/* ==========================================================================
   Upahaar Co. — styles.css
   One stylesheet for the whole site. Mobile-first: base rules target phones
   (~360px); min-width media queries layer on tablet (48em) and desktop (64em).

   Sections
     1. Tokens (colours, type, spacing)
     2. Base / reset
     3. Typography helpers (Devanagari, eyebrow, lede)
     4. Layout utilities
     5. Header + navigation
     6. Buttons and links
     7. Motifs (sesame divider, double border, kite)
     8. Page sections (hero, cards, steps, shloka band, FAQ …)
     9. Enquiry form
    10. Footer
    11. Motion (scroll reveal, kite drift) + reduced motion
   ========================================================================== */

/* 0. Fraunces macron patch -------------------------------------------------
   Fraunces (Google Fonts and the brand-kit TTFs) misplaces the macron on
   ā ī ē ō ū, so "Sudāma" and "Shabarī" render with a floating bar. These
   tiny files (~2KB, built from correctly-instanced Fraunces glyphs) cover only
   those letters via unicode-range; everything else still uses Fraunces. */
@font-face { font-family: "Fraunces Macron"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/fraunces-macron-500.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B; }
@font-face { font-family: "Fraunces Macron"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/fraunces-macron-600.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B; }
@font-face { font-family: "Fraunces Macron"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/fonts/fraunces-macron-400i.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B; }

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand palette (fixed — see brand rules) */
  --indigo: #23395B;   /* Patang Indigo — primary */
  --amber: #C2701E;    /* Gul Amber — accent, CTA fills */
  --jaggery: #3B220F;  /* body text, dark sections */
  --ivory: #F5EDE0;    /* Til Ivory — page background */

  /* Supporting colours from the brand kit (04-Colours) — use sparingly */
  --deep-indigo: #1A2A45;  /* text on amber */
  --amber-light: #E9A55A;  /* amber on indigo / dark backgrounds */
  --sand: #E9C9A0;         /* small labels on dark backgrounds */
  --clay: #CDBBA0;         /* Clay Rule — thin lines and borders */

  /* Web-only helpers (not in the kit), derived for accessibility.
     Contrast notes (WCAG 2.x):
       amber #C2701E on ivory        ≈ 3.2:1 → large text / graphics only
       deep-indigo on amber           ≈ 3.9:1 → large text only (buttons are 19px bold)
       deep-indigo on amber-light     ≈ 6.8:1 → button hover
       amber-ink #8F5112 on ivory     ≈ 5.4:1 → small accent text on light
       amber-light on jaggery ≈ 7.0:1, on indigo ≈ 5.5:1 → small accent text on dark
       indigo on ivory ≈ 10:1, jaggery on ivory ≈ 12.7:1 */
  --amber-ink: #8F5112;
  --ivory-deep: #EDE1CE;   /* card / band tint */
  --line: var(--clay);
  --white: #FFFDF8;

  /* Type */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces Macron", "Fraunces", Georgia, "Times New Roman", serif;
  --font-deva: "Tiro Devanagari Marathi", "Noto Serif Devanagari", "Mangal", serif;

  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --step-5: clamp(3.25rem, 2.2rem + 5vw, 6rem);

  /* Space */
  --gutter: 1.25rem;
  --space-s: .75rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --radius: 6px;
  --maxw: 72rem;
  --header-h: 4rem;
}

/* 2. Base / reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--jaggery);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--indigo);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--amber-ink); }
strong { font-weight: 700; }

/* Visible, consistent focus ring everywhere (keyboard only) */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--amber-light); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--indigo); color: var(--ivory); padding: .6rem 1rem; border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--ivory); }

.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;
}

/* 3. Typography helpers ------------------------------------------------------ */
/* All Devanagari (Marathi / Sanskrit) uses Tiro Devanagari Marathi */
.deva, :lang(mr), :lang(sa), :lang(hi) { font-family: var(--font-deva); font-weight: 400; letter-spacing: 0; }
.eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: .75rem;
}
.on-dark .eyebrow { color: var(--amber-light); }
.lede { font-size: var(--step-1); max-width: 40rem; }
.muted { opacity: .85; }
.small { font-size: var(--step--1); }
.draft-note {
  display: inline-block; font-size: var(--step--1); font-style: italic;
  border-left: 3px solid var(--amber); padding: .15rem 0 .15rem .6rem; margin: 0 0 1rem;
}
/* Placeholder tokens like [PRICE] stay visible but read as "to be filled" */
.ph { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(194, 112, 30, .14); padding: 0 .25em; border-radius: 3px; white-space: nowrap; }
.on-dark .ph { background: rgba(224, 154, 85, .2); }

/* 4. Layout utilities -------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 46rem; }
.section { padding-block: var(--space-xl); }
.section--tint { background: var(--ivory-deep); }
.section--indigo { background: var(--indigo); color: var(--ivory); }
.section--jaggery { background: var(--jaggery); color: var(--ivory); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--ivory); }
.on-dark a { color: var(--ivory); }
.on-dark a:hover { color: var(--amber-light); }
.section-head { max-width: 44rem; margin-bottom: var(--space-l); }
.center { text-align: center; margin-inline: auto; }
.grid { display: grid; gap: var(--space-m); }
.stack > * + * { margin-top: var(--space-m); }
@media (min-width: 48em) {
  :root { --gutter: 2rem; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: center; }
}
@media (min-width: 64em) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { gap: var(--space-xl); }
}

/* 5. Header + navigation ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 237, 224, .96);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(6px)) {
  .site-header { background: rgba(245, 237, 224, .88); backdrop-filter: blur(6px); }
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
/* Horizontal lockup: brand guidelines set a 160px minimum width on screen */
.brand img { width: 164px; height: auto; }

.nav-toggle { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.nav-list a {
  display: inline-block; padding: .5rem .1rem; text-decoration: none; color: var(--jaggery); font-weight: 500;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--indigo); border-bottom-color: var(--amber); }
.nav-list a[aria-current="page"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.header-cta { order: 2; }

/* Without JS (html lacks .js) the nav simply wraps onto its own row below the logo. */
.site-nav { order: 3; width: 100%; padding-bottom: .5rem; }

/* With JS on small screens, collapse into an accessible disclosure menu. */
@media (max-width: 63.99em) {
  .js .nav-toggle {
    order: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--indigo); cursor: pointer;
  }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle .bars::before { top: -6px; }
  .nav-toggle .bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

  .js .site-nav { order: 4; display: none; padding: .25rem 0 1rem; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav .nav-list { flex-direction: column; gap: 0; }
  .js .site-nav .nav-list a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: var(--step-1); }
  .js .site-nav .nav-list a[aria-current="page"] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--amber); padding-left: .75rem; }
}
@media (max-width: 47.99em) {
  .site-header .container { padding-inline: 1rem; }
  .header-inner { gap: .5rem; }
  .header-cta.btn { padding-inline: .8rem; }
}
@media (min-width: 64em) {
  .header-inner { flex-wrap: nowrap; }
  .site-nav { order: 1; width: auto; padding: 0; }
  .header-cta { order: 2; }
  .brand { margin-right: auto; }
}

/* 6. Buttons and links ------------------------------------------------------- */
/* CTA text is 19px bold so Deep Indigo on amber qualifies as WCAG "large text" (≥3:1). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.35rem; border-radius: var(--radius);
  font: 700 var(--step-1)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  text-align: center; border: 2px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--amber { background: var(--amber); color: var(--deep-indigo); }
.btn--amber:hover { background: var(--amber-light); color: var(--deep-indigo); }
.btn--outline { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn--outline:hover { background: var(--indigo); color: var(--ivory); }
.on-dark .btn--outline { color: var(--ivory); border-color: var(--ivory); }
.on-dark .btn--outline:hover { background: var(--ivory); color: var(--indigo); }
.btn--sm { min-height: 44px; padding: .45rem 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.text-link { font-weight: 700; color: var(--indigo); }
.text-link::after { content: " →"; }

/* 7. Motifs ------------------------------------------------------------------ */
/* Row of sesame seeds as a section divider */
.divider {
  height: 12px; border: 0; margin: var(--space-m) 0;
  background: url("/assets/divider-sesame.svg") center / 120px 12px repeat-x;
  max-width: 240px;
}
.divider.center { margin-inline: auto; }
/* Thin double border frame */
.frame { border: 3px double var(--indigo); padding: var(--space-m); border-radius: 2px; }
.on-dark .frame, .frame--light { border-color: rgba(245, 237, 224, .6); }
.kite-deco { position: absolute; pointer-events: none; color: var(--indigo); }

/* 8. Page sections ----------------------------------------------------------- */
/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.hero .container { position: relative; z-index: 1; }
.hero-deva { font-size: var(--step-5); line-height: 1.1; color: var(--indigo); margin: 0; }
.hero-title { font-size: var(--step-4); margin: .3rem 0 1rem; color: var(--jaggery); font-weight: 500; }
.hero .lede { margin-bottom: var(--space-l); }
.hero-kite { position: absolute; right: -10px; top: 1.5rem; width: clamp(90px, 22vw, 210px); opacity: .9; z-index: 0; }
.hero-kite svg { width: 100%; height: auto; }
.page-hero { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) var(--space-l); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-bottom: 0; }

/* Generic card */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-m); position: relative;
}
.card h3 { margin-bottom: .35rem; }
.card--plain { background: transparent; border: 0; padding: 0; }
.card .icon { width: 44px; height: 44px; color: var(--amber); margin-bottom: .75rem; }

/* Petika product card */
.petika-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.petika-card .ph-image { background: var(--ivory-deep); border-bottom: 1px solid var(--line); }
.petika-card .ph-image svg { width: 100%; height: auto; }
.petika-card .body { padding: var(--space-m); display: flex; flex-direction: column; flex: 1; }
.petika-card .occasion { font-size: var(--step--1); font-weight: 700; color: var(--amber-ink); letter-spacing: .04em; margin-bottom: .5rem; }
.petika-card .hook { font-family: var(--font-head); font-style: italic; font-size: 1.0625rem; color: var(--indigo); }
.petika-card dl { margin: 0 0 1rem; font-size: .9375rem; }
.petika-card dt { font-weight: 700; margin-top: .5rem; }
.petika-card dd { margin: 0; }
.petika-card .btn { margin-top: auto; align-self: flex-start; }

/* Feature banner (Tilgul launch) */
.banner { background: var(--indigo); color: var(--ivory); border-radius: var(--radius); padding: var(--space-l) var(--space-m); position: relative; overflow: hidden; }
.banner .frame { border-color: rgba(245, 237, 224, .45); }
.banner h2 { color: var(--ivory); }
.banner .kite-deco { right: -18px; top: -14px; width: 96px; height: auto; color: var(--ivory); opacity: .3; }
@media (min-width: 48em) { .banner .kite-deco { display: none; } }
@media (min-width: 48em) { .banner { padding: var(--space-xl) var(--space-l); } }

/* Numbered steps strip */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-m); counter-reset: step; }
.steps li { counter-increment: step; padding: var(--space-m); border: 3px double var(--line); border-radius: 2px; background: var(--white); }
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--indigo); color: var(--ivory); font-family: var(--font-head); font-weight: 600; margin-bottom: .5rem;
}
.steps h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.steps p { margin: 0; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Q&A facts grid ("What buyers ask") */
.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; }
.facts > div { background: var(--white); padding: var(--space-m); }
.facts dt { font-family: var(--font-head); font-weight: 600; color: var(--indigo); font-size: var(--step-1); margin-bottom: .25rem; }
.facts dd { margin: 0; }
@media (min-width: 48em) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .facts { grid-template-columns: repeat(3, 1fr); } }

/* Lists with sesame bullets */
.seed-list { list-style: none; padding: 0; }
.seed-list li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; }
.seed-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .38rem;
  background: var(--amber); border-radius: 60% 40% 60% 40% / 70% 50% 50% 30%; transform: rotate(-20deg);
}

/* Shloka band */
.shloka { text-align: center; }
.shloka blockquote { margin: 0 auto; max-width: 44rem; }
.shloka .sa { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem); line-height: 1.8; margin-bottom: 1rem; color: var(--ivory); }
.shloka .sa span { display: block; }
.shloka .en { font-family: var(--font-head); font-style: italic; font-size: var(--step-1); }
.shloka cite { display: block; font-style: normal; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; margin-top: 1rem; color: var(--sand); }
.shloka--light .sa { color: var(--indigo); }
.shloka--light cite { color: var(--amber-ink); }

/* Box spec / story layout */
.greeting { font-size: var(--step-3); color: var(--indigo); margin: 0; }
.on-dark .greeting { color: var(--ivory); }
.callout { background: var(--white); border-left: 4px solid var(--amber); padding: var(--space-m); border-radius: 0 var(--radius) var(--radius) 0; }

/* FAQ accordions */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); color: var(--indigo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: .6rem; height: .6rem;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 1.25rem; max-width: 46rem; }

/* Simple centred message pages (thank-you, 404) */
.message-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-xl); }
.message-page .frame { padding: var(--space-l) var(--space-m); max-width: 40rem; background: var(--white); }

/* 9. Enquiry form ------------------------------------------------------------ */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .35rem; }
.field label, .field legend, .field .label { font-weight: 700; color: var(--jaggery); }
.req { color: var(--amber-ink); }
.hint { font-size: var(--step--1); margin: 0; opacity: .9; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem; font: inherit; color: var(--jaggery);
  background: var(--white); border: 1.5px solid rgba(59, 34, 15, .45); border-radius: var(--radius);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; border-color: var(--indigo); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: .5rem; }
.choices { display: grid; gap: .5rem; }
@media (min-width: 40em) { .choices--2 { grid-template-columns: 1fr 1fr; } .choices--3 { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; background: var(--white);
  border: 1.5px solid rgba(59, 34, 15, .25); border-radius: var(--radius); cursor: pointer; font-weight: 500;
}
.choice:hover { border-color: var(--indigo); }
.choice input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--indigo); flex: none; }
.choice:has(input:checked) { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.choice:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }
.choice small { display: block; font-weight: 400; font-size: var(--step--1); }
.field-error { color: #9B1C1C; font-weight: 700; font-size: .9375rem; margin: 0; }
.field-error:empty { display: none; }
.field-error::before { content: "⚠ "; }
[aria-invalid="true"] { border-color: #9B1C1C !important; box-shadow: 0 0 0 1px #9B1C1C; }
.fieldset-invalid .choice { border-color: #9B1C1C; }
.error-summary { border: 3px solid #9B1C1C; background: var(--white); padding: var(--space-m); border-radius: var(--radius); }
.error-summary h2 { font-size: var(--step-1); color: #9B1C1C; font-family: var(--font-body); font-weight: 700; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: #9B1C1C; font-weight: 700; }
.form-status { border-radius: var(--radius); padding: var(--space-m); background: var(--white); border-left: 4px solid #9B1C1C; }
.form-status p:last-child { margin-bottom: 0; }
/* Honeypot: Web3Forms recommends display:none for the "botcheck" field */
.hp-field { display: none !important; }
[hidden] { display: none !important; }
.form-aside { font-size: .9375rem; }
@media (min-width: 64em) {
  .form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .form-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* 10. Footer ----------------------------------------------------------------- */
.site-footer { background: var(--jaggery); color: var(--ivory); padding-block: var(--space-xl) var(--space-l); font-size: .9375rem; }
.site-footer a { color: var(--ivory); }
.site-footer a:hover { color: var(--amber-light); }
.footer-grid { display: grid; gap: var(--space-l); }
.footer-brand img { width: 200px; height: auto; margin-bottom: 1rem; }
.footer-line { font-family: var(--font-head); font-style: italic; font-size: var(--step-1); margin-bottom: .5rem; }
.site-footer h2 { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-light); margin-bottom: .75rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer-links a { text-decoration: none; display: inline-block; padding: .2rem 0; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(205, 187, 160, .35); margin-top: var(--space-l); padding-top: var(--space-m); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.footer-bottom p { margin: 0; }
.signoff { font-family: var(--font-head); font-style: italic; }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* 11. Motion ----------------------------------------------------------------- */
/* Reveal-on-scroll only hides content when JS is running (html.js) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes kite-drift {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  50%  { transform: translate(-12px, -14px) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}
.hero-kite svg { animation: kite-drift 9s ease-in-out infinite; transform-origin: 50% 30%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Print: keep it simple */
@media print {
  .site-header, .site-footer, .hero-kite, .btn { display: none !important; }
  body { background: #fff; }
}

/* Small additions used by page templates */
.btn-row[data-center] { justify-content: center; margin-top: var(--space-m); }
.message-page img.center, .message-page svg.center { margin: 0 auto 1rem; }
.message-page .signoff { margin-top: var(--space-m); color: var(--indigo); }
.page-hero .hero-kite { top: 1rem; width: clamp(70px, 16vw, 150px); opacity: .7; }
blockquote.shloka { margin: 1.25rem 0; }