/* ============================================================
   HOMEPAGE V3 — toile edition
   Scoped entirely to .home-v3. Does not affect blog pages or
   any existing blog CSS (style.css / home-v2.css untouched).

   Colour tokens below were sampled directly from the four
   toile illustrations:
     paper    #FAEFDB  modal background of desktop-hero.webp
     ink      #1A3768  mean of the indigo linework
     ink-deep #10203F  darkest linework core

   Terracotta is reserved for one solid element per viewport
   (the hero CTA, or the nav CTA once the hero is scrolled past)
   plus the fixed text accents: the .xyz suffix, the second
   headline line, and the availability dot.
   ============================================================ */

.home-v3 *,
.home-v3 *::before,
.home-v3 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.home-v3 {
  margin: 0;
  --h3-paper: #FAEFDB;
  --h3-ink: #1A3768;
  --h3-ink-deep: #10203F;
  --h3-accent: #C4552D;
  /* Darkened accent used only where the terracotta carries text
     weight, so it clears 4.5:1 on paper (5.18:1). */
  --h3-accent-ink: #A8461F;
  --h3-muted: #5A6284;

  --h3-rule: rgba(26, 55, 104, 0.20);
  --h3-border: rgba(26, 55, 104, 0.25);

  --h3-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --h3-font-dev: 'Noto Sans Devanagari', 'Geist', sans-serif;

  --h3-gut: clamp(20px, 5vw, 64px);
  --h3-max: 1180px;
  --h3-nav-h: 84px;

  background: var(--h3-paper);
  color: var(--h3-ink);
  font-family: var(--h3-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The body background propagates to the page canvas, so the paper
   tone runs edge to edge and the illustrations melt into the page
   with no rectangle seam. */

.home-v3 a { color: inherit; text-decoration: none; }
.home-v3 img { display: block; max-width: 100%; }
.home-v3 :focus-visible {
  outline: 2px solid var(--h3-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.home-v3 [id] { scroll-margin-top: calc(var(--h3-nav-h) + 16px); }

.home-v3 .h3-wrap {
  max-width: var(--h3-max);
  margin: 0 auto;
  padding: 0 var(--h3-gut);
}

.home-v3 .h3-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--h3-ink); color: var(--h3-paper);
  padding: 10px 16px; font-size: 14px; border-radius: 2px;
}
.home-v3 .h3-skip:focus { left: 12px; top: 12px; }

.home-v3 .h3-vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shared type ---------- */
.home-v3 .h3-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--h3-muted);
}
.home-v3 .h3-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 600; color: var(--h3-ink-deep);
}
.home-v3 .h3-lede {
  color: var(--h3-muted); max-width: 52ch; margin-top: 14px;
}

/* ---------- buttons ---------- */
.home-v3 .h3-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 13px 22px; border-radius: 2px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.home-v3 .h3-btn-primary {
  background: var(--h3-accent-ink); color: var(--h3-paper);
  border-color: var(--h3-accent-ink);
}
.home-v3 .h3-btn-primary:hover { background: #8F3A19; border-color: #8F3A19; }
.home-v3 .h3-btn-ink {
  background: var(--h3-ink); color: var(--h3-paper); border-color: var(--h3-ink);
}
.home-v3 .h3-btn-ink:hover { background: var(--h3-ink-deep); border-color: var(--h3-ink-deep); }

.home-v3 .h3-textlink {
  color: var(--h3-ink); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  font-size: 15px;
}
.home-v3 .h3-textlink:hover { color: var(--h3-accent-ink); }

.home-v3 .h3-inline-link {
  color: var(--h3-ink); text-decoration: underline;
  text-decoration-color: var(--h3-rule); text-underline-offset: 3px;
}
.home-v3 .h3-inline-link:hover {
  color: var(--h3-accent-ink); text-decoration-color: currentColor;
}
.home-v3 .h3-inline-link span { font-size: 0.85em; opacity: .55; }

/* ============================================================
   NAV
   Fixed, transparent while the hero is on screen, paper-backed
   after it. Without JS the .is-over-hero class never lands, so
   the bar keeps its paper background and the CTA stays solid,
   which is the safe fallback.
   ============================================================ */
.home-v3 .h3-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--h3-paper);
  border-bottom: 1px solid var(--h3-rule);
  transition: background-color .2s ease, border-color .2s ease;
}
.home-v3 .h3-nav.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
}
.home-v3 .h3-nav-inner {
  max-width: var(--h3-max); margin: 0 auto;
  padding: 0 var(--h3-gut);
  height: var(--h3-nav-h); display: flex; align-items: center; gap: 24px;
}
.home-v3 .h3-logo {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--h3-ink-deep); margin-right: auto;
}
.home-v3 .h3-logo em { font-style: normal; color: var(--h3-accent); }

.home-v3 .h3-nav-links { display: flex; align-items: center; gap: 30px; }
.home-v3 .h3-nav-link {
  font-size: 15px; color: var(--h3-ink);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.home-v3 .h3-nav-link:hover {
  color: var(--h3-accent-ink); border-bottom-color: currentColor;
}
.home-v3 .h3-nav-cta { padding: 11px 18px; font-size: 14px; }

/* Ghost variant while the hero owns the one solid terracotta. */
.home-v3 .h3-nav.is-over-hero .h3-nav-cta {
  background: transparent;
  color: var(--h3-accent-ink);
  border-color: var(--h3-accent-ink);
}
.home-v3 .h3-nav.is-over-hero .h3-nav-cta:hover {
  background: var(--h3-accent-ink); color: var(--h3-paper);
}

.home-v3 .h3-menu-btn {
  display: none; background: transparent; border: 1px solid var(--h3-border);
  border-radius: 2px; padding: 9px 11px; cursor: pointer; color: var(--h3-ink);
}
.home-v3 .h3-menu-btn svg { display: block; }

/* ============================================================
   HERO
   ============================================================ */
.home-v3 .h3-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(112px, 15vh, 168px);
  padding-bottom: 40px;
  isolation: isolate;
  overflow: hidden; /* clips the wash, which is intentionally wider than the viewport */
  background: var(--h3-paper);
}
.home-v3 .h3-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
/* Soft paper wash so the copy stays readable over linework. */
.home-v3 .h3-hero::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: clamp(60px, 12vh, 140px);
  width: min(1180px, 150vw); height: min(760px, 88vh);
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 42%,
    rgba(250, 239, 219, 0.70) 0%,
    rgba(250, 239, 219, 0.66) 38%,
    rgba(250, 239, 219, 0.40) 62%,
    rgba(250, 239, 219, 0) 82%
  );
  pointer-events: none;
}
.home-v3 .h3-hero-inner {
  position: relative;
  max-width: var(--h3-max); margin: 0 auto; width: 100%;
  padding: 0 var(--h3-gut);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.home-v3 .h3-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--h3-ink);
}
.home-v3 .h3-badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--h3-accent); flex: none;
}

.home-v3 .h3-h1 {
  margin-top: 22px;
  font-size: clamp(42px, 7.2vw, 84px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 600;
  color: var(--h3-ink-deep);
}
.home-v3 .h3-h1 span { display: block; color: var(--h3-accent); }

.home-v3 .h3-hero-sub {
  margin-top: 22px; max-width: 46ch;
  color: var(--h3-muted); font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.62;
}
/* Button and secondary link ride one centred row, vertically centred on
   each other so the link sits on the button label's optical centre. The
   note is its own line, centred under the pair. */
.home-v3 .h3-hero-ctas {
  margin-top: 30px;
  display: flex; flex-direction: column; align-items: center;
}
.home-v3 .h3-cta-row {
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.home-v3 .h3-cta-note {
  margin-top: 10px; font-size: 13px; color: var(--h3-muted);
}

/* ============================================================
   SECTIONS
   ============================================================ */
/* Vertical only. A shorthand here would beat .h3-wrap on source order and
   strip the horizontal gutter from every section that carries both classes. */
.home-v3 .h3-section {
  padding-top: clamp(64px, 9vw, 116px);
  padding-bottom: clamp(64px, 9vw, 116px);
}
.home-v3 .h3-section-head { max-width: 62ch; }
.home-v3 .h3-section-head .h3-h2 { margin-top: 12px; }

/* ============================================================
   SERVICES

   Two flat panels on paper, ruled rather than filled: a 1px
   border in the same ink wash the results table uses, a 2px
   radius to match the buttons, and no shadow, tint, or gradient.
   The feature list is a hairline-divided stack, so a panel reads
   as a continuation of the page's rules rather than a widget
   dropped on top of them. Equal-height columns with the button
   pinned to the panel foot; one column below 900px.
   ============================================================ */
.home-v3 .h3-panels {
  margin-top: 44px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 30px);
}
.home-v3 .h3-panel {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--h3-border); border-radius: 2px;
  transition: border-color .15s ease;
}
.home-v3 .h3-panel:hover { border-color: rgba(26, 55, 104, 0.45); }

.home-v3 .h3-panel-num {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; color: var(--h3-muted);
}
.home-v3 .h3-panel h3 {
  margin-top: 14px;
  font-size: clamp(21px, 2vw, 25px); line-height: 1.18;
  font-weight: 600; letter-spacing: -0.02em; color: var(--h3-ink-deep);
}
.home-v3 .h3-panel-desc {
  margin-top: 12px; font-size: 15.5px; color: var(--h3-muted);
}
.home-v3 .h3-panel ul {
  margin-top: 24px; list-style: none;
  border-top: 1px solid var(--h3-rule);
  font-size: 14.5px; color: var(--h3-ink);
}
.home-v3 .h3-panel li {
  padding: 11px 0; border-bottom: 1px solid var(--h3-rule);
}
/* Pinned to the foot so both buttons land on one line even when
   the two copy blocks differ in length. */
.home-v3 .h3-panel-cta { margin-top: auto; padding-top: 26px; }

/* Ink button, never terracotta: the accent stays with the nav and
   hero primary. */
.home-v3 .h3-btn-arch {
  background: var(--h3-ink-deep); color: var(--h3-paper);
  border-color: var(--h3-ink-deep);
}
.home-v3 .h3-btn-arch:hover { background: var(--h3-ink); border-color: var(--h3-ink); }

@media (max-width: 899.98px) {
  .home-v3 .h3-panels { grid-template-columns: 1fr; gap: 20px; }
  .home-v3 .h3-panel-cta { padding-top: 22px; }
}

.home-v3 .h3-lintel {
  margin: 44px auto 0; max-width: 82ch;
  padding-top: 26px; border-top: 1px solid var(--h3-rule);
  text-align: center;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 2.1;
  color: var(--h3-muted);
}

/* ============================================================
   RESULTS
   ============================================================ */
.home-v3 .h3-cases {
  list-style: none; margin-top: 44px;
  border-top: 1px solid var(--h3-rule);
}
.home-v3 .h3-case {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) 2fr minmax(170px, 0.86fr);
  gap: 6px 32px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--h3-rule);
}
.home-v3 .h3-case-name {
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--h3-ink-deep);
}
.home-v3 .h3-case-name a:hover { color: var(--h3-accent-ink); }
.home-v3 .h3-case-name span { font-size: 14px; opacity: .55; }
.home-v3 .h3-case-desc { font-size: 15.5px; color: var(--h3-muted); }
.home-v3 .h3-case-stat {
  font-size: 14.5px; color: var(--h3-ink); text-align: right;
}

.home-v3 .h3-exp-title {
  margin-top: 60px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--h3-muted);
}
.home-v3 .h3-exp {
  list-style: none; margin-top: 18px;
  border-top: 1px solid var(--h3-rule);
}
.home-v3 .h3-exp li {
  display: grid; grid-template-columns: 210px 1fr; gap: 8px 24px;
  padding: 12px 0; border-bottom: 1px solid var(--h3-rule);
}
.home-v3 .h3-exp-when { font-size: 13.5px; color: var(--h3-muted); }
.home-v3 .h3-exp-what { font-size: 15px; color: var(--h3-ink); }

/* ============================================================
   FAQ
   ============================================================ */
.home-v3 .h3-faq { margin-top: 44px; border-top: 1px solid var(--h3-rule); max-width: 860px; }
.home-v3 .h3-faq details { border-bottom: 1px solid var(--h3-rule); }
.home-v3 .h3-faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 40px 22px 0; position: relative;
  font-size: 17.5px; font-weight: 500; color: var(--h3-ink-deep);
}
.home-v3 .h3-faq summary::-webkit-details-marker { display: none; }
.home-v3 .h3-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 20px;
  font-size: 20px; font-weight: 400; color: var(--h3-muted);
}
.home-v3 .h3-faq details[open] summary::after { content: "\2212"; }
.home-v3 .h3-faq summary:hover { color: var(--h3-accent-ink); }
.home-v3 .h3-faq-a {
  padding: 0 48px 24px 0; max-width: 72ch;
  font-size: 16px; color: var(--h3-muted);
}

/* ============================================================
   FOOTER
   The illustration is split into a scene and a bottom trim block.
   Real copy sits on paper between them, so nothing is baked into
   the artwork and nothing collides with the hill-and-deer vignette
   that lives in the trim. The newsletter block is overlaid on the
   scene's open sky, which is clear of linework across the middle
   60% of the image down to 60% of its height on desktop and 74%
   on mobile.
   ============================================================ */
.home-v3 .h3-footer { background: var(--h3-paper); margin-top: clamp(40px, 6vw, 72px); }
.home-v3 .h3-footer-top {
  position: relative;
  overflow: hidden; /* clips the newsletter wash, which bleeds past the block */
}
.home-v3 .h3-footer-scene,
.home-v3 .h3-footer-trim { width: 100%; height: auto; }
.home-v3 .h3-footer-scene { aspect-ratio: 1440 / 757; object-fit: cover; }
.home-v3 .h3-footer-trim { aspect-ratio: 1440 / 203; object-fit: cover; }

.home-v3 .h3-newsletter {
  position: absolute; top: 6%; left: 0; right: 0;
  padding: 0 var(--h3-gut);
  text-align: center;
}
.home-v3 .h3-newsletter::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: -8%; transform: translateX(-50%);
  width: min(860px, 132%); height: 128%;
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(250, 239, 219, 0.82) 0%,
    rgba(250, 239, 219, 0.74) 46%,
    rgba(250, 239, 219, 0.34) 70%,
    rgba(250, 239, 219, 0) 88%
  );
  pointer-events: none;
}
.home-v3 .h3-newsletter > * { position: relative; z-index: 1; }
.home-v3 .h3-newsletter-kicker { color: var(--h3-ink); }
.home-v3 .h3-newsletter-h {
  margin-top: 12px;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 600; color: var(--h3-ink-deep);
}
.home-v3 .h3-newsletter-p {
  margin: 12px auto 0; max-width: 54ch;
  font-size: clamp(14.5px, 1.2vw, 16px); color: var(--h3-muted);
}
.home-v3 .h3-newsletter .h3-form {
  margin: 24px auto 0; max-width: 460px; justify-content: center;
}
/* Keeps the note inside the illustration's clear central band, where
   the edge foliage starts earlier than the sky above the horizon. */
.home-v3 .h3-newsletter .h3-form-note {
  text-align: center; max-width: 36ch; margin-left: auto; margin-right: auto;
}

.home-v3 .h3-form { display: flex; gap: 10px; flex-wrap: wrap; }
.home-v3 .h3-form input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  font: inherit; font-size: 15px; color: var(--h3-ink);
  background: rgba(250, 239, 219, 0.72);
  border: 1px solid var(--h3-border); border-radius: 2px;
  padding: 13px 14px;
}
.home-v3 .h3-form input::placeholder { color: var(--h3-muted); opacity: .8; }
.home-v3 .h3-form input:focus { outline: 2px solid var(--h3-ink); outline-offset: 1px; }
.home-v3 .h3-form-note { margin-top: 12px; font-size: 13px; color: var(--h3-muted); }

.home-v3 .h3-footer-body {
  max-width: var(--h3-max); margin: 0 auto;
  padding: 44px var(--h3-gut) 44px;
}
.home-v3 .h3-footer-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) repeat(3, minmax(130px, .78fr)) auto;
  gap: 36px 30px;
  align-items: start;
}
.home-v3 .h3-footer-brand { font-size: 17px; font-weight: 600; color: var(--h3-ink-deep); }
.home-v3 .h3-footer-brand em { font-style: normal; color: var(--h3-accent); }
.home-v3 .h3-footer-tag { margin-top: 10px; font-size: 15px; color: var(--h3-ink); }
.home-v3 .h3-footer-loc { margin-top: 6px; font-size: 14px; color: var(--h3-muted); }

.home-v3 .h3-footer-col h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--h3-muted); line-height: 1.4;
}
.home-v3 .h3-footer-col ul { list-style: none; margin-top: 14px; }
.home-v3 .h3-footer-col li + li { margin-top: 9px; }
.home-v3 .h3-footer-col a { font-size: 14.5px; color: var(--h3-ink); }
.home-v3 .h3-footer-col a:hover { color: var(--h3-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* top edge of the icon row lines up with the column headings */
.home-v3 .h3-social { display: flex; gap: 8px; align-items: flex-start; margin-top: -8px; }
.home-v3 .h3-social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--h3-border); border-radius: 2px; color: var(--h3-ink);
}
.home-v3 .h3-social a:hover { border-color: var(--h3-ink); color: var(--h3-accent-ink); }
.home-v3 .h3-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* Sits inside the left brand block, left aligned. */
.home-v3 .h3-shloka { margin-top: 20px; }
.home-v3 .h3-shloka p:first-child {
  font-family: var(--h3-font-dev); font-weight: 400;
  font-size: 14px; line-height: 1.9; color: var(--h3-ink);
}
.home-v3 .h3-shloka p:last-child {
  margin-top: 4px; font-size: 12px; font-style: italic; color: var(--h3-muted);
}
.home-v3 .h3-colophon {
  max-width: var(--h3-max); margin: 0 auto;
  padding: 0 var(--h3-gut) 22px;
  font-size: 12.5px; color: var(--h3-muted); text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .home-v3 .h3-case {
    grid-template-columns: 1fr;
    gap: 8px; padding: 22px 0;
  }
  .home-v3 .h3-case-stat { text-align: left; }
  .home-v3 .h3-exp li { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 900px) {
  .home-v3 .h3-footer-grid { grid-template-columns: 1fr 1fr; }
  .home-v3 .h3-footer-brand-block { grid-column: 1 / -1; }
  .home-v3 .h3-social { grid-column: 1 / -1; margin-top: 0; }
}

/* Hero copy sits lower relative to the crop on short desktop
   viewports, so tighten it back into the sky. */
@media (min-width: 769px) and (max-height: 820px) {
  .home-v3 .h3-hero { padding-top: 104px; }
  .home-v3 .h3-h1 { font-size: clamp(38px, 5.4vw, 60px); }
  .home-v3 .h3-hero-sub { margin-top: 16px; font-size: 15.5px; }
  .home-v3 .h3-hero-ctas { margin-top: 22px; }
}

@media (max-width: 768px) {
  .home-v3 { font-size: 16px; --h3-nav-h: 68px; }
  .home-v3 .h3-nav-inner { gap: 12px; }
  .home-v3 .h3-nav-links {
    display: none;
    position: absolute; top: var(--h3-nav-h); left: var(--h3-gut); right: var(--h3-gut);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--h3-paper);
    border: 1px solid var(--h3-border); border-radius: 2px;
    padding: 6px 4px;
  }
  .home-v3 .h3-nav-links.is-open { display: flex; }
  .home-v3 .h3-nav-link { padding: 12px 14px; border-bottom: none; }
  .home-v3 .h3-menu-btn { display: block; order: 2; }
  .home-v3 .h3-nav-cta { order: 3; padding: 10px 14px; font-size: 13.5px; }

  .home-v3 .h3-hero { padding-top: 92px; min-height: 100svh; }
  /* Denser illustration on the mobile crop, so the wash runs stronger. */
  .home-v3 .h3-hero::before {
    top: 30px; width: 170vw; height: min(660px, 72vh);
    background: radial-gradient(
      ellipse at 50% 38%,
      rgba(250, 239, 219, 0.90) 0%,
      rgba(250, 239, 219, 0.86) 48%,
      rgba(250, 239, 219, 0.46) 70%,
      rgba(250, 239, 219, 0) 90%
    );
  }
  .home-v3 .h3-h1 { margin-top: 18px; }
  .home-v3 .h3-hero-sub { margin-top: 18px; }
  .home-v3 .h3-hero-ctas { margin-top: 26px; align-self: stretch; }
  .home-v3 .h3-cta-row { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .home-v3 .h3-cta-row .h3-btn { width: 100%; }
  .home-v3 .h3-cta-row .h3-textlink { align-self: center; }

  .home-v3 .h3-proof p { letter-spacing: 0.14em; font-size: 11px; line-height: 2; }

  .home-v3 .h3-lintel { letter-spacing: 0.1em; line-height: 2; }


  .home-v3 .h3-newsletter { top: 4%; }
  .home-v3 .h3-newsletter::before {
    width: 150%; height: 132%;
    background: radial-gradient(
      ellipse at 50% 46%,
      rgba(250, 239, 219, 0.93) 0%,
      rgba(250, 239, 219, 0.88) 52%,
      rgba(250, 239, 219, 0.42) 74%,
      rgba(250, 239, 219, 0) 90%
    );
  }
  .home-v3 .h3-newsletter-h { margin-top: 10px; }
  .home-v3 .h3-newsletter .h3-form { max-width: 100%; margin-top: 20px; }
  .home-v3 .h3-newsletter .h3-form input[type="email"] { flex: 1 1 100%; }
  .home-v3 .h3-newsletter .h3-form .h3-btn { width: 100%; }

  .home-v3 .h3-footer-scene { aspect-ratio: 828 / 1273; }
  .home-v3 .h3-footer-trim { aspect-ratio: 828 / 198; }
  .home-v3 .h3-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .home-v3 .h3-footer-body { padding-top: 36px; padding-bottom: 36px; }
  .home-v3 .h3-shloka { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v3 * { transition: none !important; }
}