/* -------------------------------------------------------------------------
   ZOPANTA
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   THE HEADER OVER THE HERO
   ------------------------------------------------------------------------- */
/* This file is the home page only, and the home page is the only page whose
   header sits on a photograph. The bar paints nothing there, so the section
   links need their own contrast. Version 4: no box. A wide, weak cloud of
   white sits behind the link and dies away long before its own edge, so
   nothing reads as a shape. The cloud is drawn on ::before, not on the link
   itself, so it can spill far past the words without making the link wider.
   That matters: a wider link would cover the button next to it and steal
   its clicks. pointer-events: none keeps the cloud out of the way too.
   Wide screens only: on a phone the links live in the drawer, which has its
   own paper background. The cloud goes the moment the bar paints itself on
   scroll. Shayan 2026-09-21. */
@media (min-width: 901px) {
  .site-head:not(.is-stuck):not(:has(.nav.is-open)) .nav > a:not(.head-cta) {
    color: var(--ink);
    font-weight: 700;
  }
  .site-head:not(.is-stuck):not(:has(.nav.is-open)) .nav > a:not(.head-cta)::before {
    content: "";
    position: absolute;
    inset: -2.1rem -4.6rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      ellipse 50% 44% at 50% 50%,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(255, 255, 255, 0.66) 26%,
      rgba(255, 255, 255, 0.45) 48%,
      rgba(255, 255, 255, 0.22) 70%,
      rgba(255, 255, 255, 0.07) 86%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: calc(var(--head-h) * -1);
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--head-h) + clamp(2rem, 5vw, 4rem)) clamp(3rem, 7vw, 6rem);
  background-image: url("img/hero-coast.webp");
  background-size: cover;
  background-position: 25% center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero > .wrap { position: relative; z-index: 1; }

.hero-copy { max-width: 30rem; }
.hero-copy > * + * { margin-top: 1.5rem; }

/* Bigger and darker. Shayan 2026-09-21: at 0.74rem in Nature Green it washed
   out on the photograph. The green word now takes the ink green, which is the
   same green carried far enough down to read as text. */
.brand-strip {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
}
/* One colour, no dot. Shayan 2026-09-21. */
.brand-strip .c1 { color: var(--sun-deep); }

/* THE STRAPLINE HAND-OVER. Shayan 2026-09-22.
   At the top of the page the words sit under the header logo. On the first
   scroll they fade out there and fade in above the headline, which is where
   they live for the rest of the page. The hero copy never moves: the words
   only change opacity, so nothing on the page jumps. Without JavaScript the
   `scrolled` class never arrives, so the rules below are gated on `.js` and
   the hero keeps the words from the start. */
.brand { position: relative; }
.brand-tag {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.34rem;
  /* Centred under the wordmark, like the logo lockup. The small indent pays
     back the space the last letter's tracking adds on the right, so the words
     sit truly in the middle. Shayan 2026-09-22. */
  text-align: center;
  text-indent: 0.11em;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* A short yellow to orange wash across the words. Shayan 2026-09-22. */
  color: var(--sun-deep);
  background-image: linear-gradient(90deg, var(--yellow) 0%, var(--sun) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-tag { color: transparent; }
}
.js .brand-strip {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.js.scrolled .brand-strip { opacity: 1; transform: none; }
.js.scrolled .brand-tag   { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .brand-tag, .js .brand-strip { transition: none; }
}

.hero h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); max-width: none; }
.hero h1 .lit { color: var(--sun); }

.hero .lede { max-width: 30rem; color: var(--ink-70); }

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.4rem;
}
.hero-note {
  margin-top: 0.9rem !important;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--green-deep);
  max-width: 30rem;
}

/* -------------------------------------------------------------------------
   2. MARQUEE
   ------------------------------------------------------------------------- */
.strip {
  border-block: 1px solid var(--line-soft);
  background: var(--green-wash);
  padding-block: 1.05rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.strip-track {
  display: flex; width: max-content;
  animation: slide 184s linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }
@keyframes slide { to { transform: translateX(-50%); } }

.strip-item {
  display: flex; align-items: center; gap: 2.4rem;
  padding-right: 2.4rem;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--green-deep);
  white-space: nowrap;
}
.strip-item b { font-weight: 700; color: var(--sun); }
.strip-item b:nth-of-type(2) { color: var(--blue-sky); }
.strip-item span:nth-of-type(1) { color: var(--green-deepen); }
.strip-item span:nth-of-type(2) { color: var(--green-deep); }
.strip-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); flex: none; }
.strip-item i:nth-of-type(2) { background: var(--yellow); }
.strip-item i:nth-of-type(3) { background: var(--green-nature); }
.strip-item i:nth-of-type(4) { background: var(--blue-sky); }

/* -------------------------------------------------------------------------
   3. THE PROBLEM
   ------------------------------------------------------------------------- */
.problem {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(38rem, 88vh, 54rem);
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  background-image: url("img/problem-sunset.webp");
  background-size: cover;
  background-position: 25% center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.problem::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(253,253,252,0.94) 0%,
    rgba(253,253,252,0.86) 24%,
    rgba(253,253,252,0.56) 38%,
    rgba(253,253,252,0.16) 51%,
    rgba(253,253,252,0) 62%);
  pointer-events: none;
}
.problem > .wrap { position: relative; z-index: 1; }

.problem-copy { max-width: 30.5rem; }
.problem-copy > * + * { margin-top: 1.4rem; }
.problem-copy h2 { max-width: none; }
.problem-copy h2 em { font-style: normal; color: var(--sun); }
.problem-copy .lede { max-width: 30.5rem; }

.problem-stats {
  margin-top: 2.4rem !important;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
}
.problem-stats div { border-left: 3px solid var(--sun); padding-left: 0.9rem; }
.problem-stats dt {
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--green-deep);
}
.problem-stats dd {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-deep);
}
.problem-stats div:nth-child(2) dd { color: var(--blue-deepen); }
.problem-stats div:nth-child(2) { border-left-color: var(--blue-sky); }

/* -------------------------------------------------------------------------
   THE TALL CUTS OF THE TWO PHOTOGRAPHS
   ------------------------------------------------------------------------- */
@media (max-width: 900px) and (max-aspect-ratio: 1/1) {

  .hero, .problem {
    align-items: flex-start;
    background-position: center center;
  }

  .hero    { background-image: url("img/hero-coast-tall.webp"); }
  .problem { background-image: url("img/problem-sunset-tall.webp"); }

  .problem::before {
    background: linear-gradient(to bottom,
      rgba(253,253,252,0.97) 0%,
      rgba(253,253,252,0.95) 34%,
      rgba(253,253,252,0.78) 44%,
      rgba(253,253,252,0.28) 49%,
      rgba(253,253,252,0) 53%);
  }

  .hero {
    padding-block: calc(var(--head-h) + 0.5rem) clamp(2.5rem, 8vw, 4rem);
  }

  .hero-copy > * + * { margin-top: 0.95rem; }
  .hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .hero .lede { font-size: 1rem; line-height: 1.52; }
  .hero-actions { padding-top: 0.15rem; }
  .hero-note {
    margin-top: 0.7rem !important;
    color: var(--ink-70);
  }

  .problem-copy > * + * { margin-top: 0.95rem; }
  .problem-copy h2 { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
  .problem-copy .lede { font-size: 1rem; line-height: 1.52; }
  .problem-stats { margin-top: 1.5rem !important; gap: 0.9rem 1.6rem; }
  .problem-stats dt { font-size: 1.55rem; }

}

@media (max-width: 900px) and (max-height: 720px) and (max-aspect-ratio: 1/1) {
  .problem::before {
    background: linear-gradient(to bottom,
      rgba(253,253,252,0.97) 0%,
      rgba(253,253,252,0.95) 38%,
      rgba(253,253,252,0.8) 48%,
      rgba(253,253,252,0.3) 53%,
      rgba(253,253,252,0) 56%);
  }

  .hero { padding-block: var(--head-h) 1.75rem; }
  .hero-copy > * + * { margin-top: 0.58rem; }
  .hero h1 { font-size: 1.58rem; }
  .hero .lede { font-size: 0.88rem; line-height: 1.5; }
  .hero .btn { padding: 0.7rem 1.2rem; font-size: 0.88rem; }
  .hero-note { margin-top: 0.55rem !important; font-size: 0.84rem; }
  .brand-strip { font-size: 0.82rem; letter-spacing: 0.18em; }

  .problem { padding-block: 1.75rem 2rem; }
  .problem-copy > * + * { margin-top: 0.7rem; }
  .problem-copy h2 { font-size: 1.6rem; }
  .problem-copy .lede { font-size: 0.92rem; line-height: 1.5; }
  .problem-stats { margin-top: 1.1rem !important; }
  .problem-stats dt { font-size: 1.35rem; }
  .problem {
    min-height: clamp(34rem, 80vh, 46rem);
    padding-block: clamp(2.75rem, 9vw, 4rem) clamp(2.5rem, 8vw, 4rem);
  }

}

/* -------------------------------------------------------------------------
   4. HOW IT WORKS
   ------------------------------------------------------------------------- */
.how { background: var(--paper); }

.how.pad     { padding-block: var(--sec-pad); }
.moments.pad { padding-top: 0; padding-bottom: var(--sec-pad); }
.trust.pad   { padding-top: 0; padding-bottom: var(--sec-pad); }

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}

.how-body { display: flex; flex-direction: column; }
.how-body h2 {
  margin-top: 1rem;
  max-width: none;
  font-size: clamp(1.9rem, 3.1vw, 2.5rem);
}
.how-body .how-steps { margin-top: clamp(2rem, 3.4vw, 2.9rem); flex: 1; }

.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.how-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-content: start;
  flex: 1 1 auto;
  padding-bottom: 2.4rem;
}
.how-steps li:last-child { flex: none; padding-bottom: 0; }
.how-steps::after { content: ""; flex: 2.2 1 0; }

.how-steps .n {
  grid-row: 1 / span 2;
  align-self: start;
  position: relative;
  z-index: 1;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--sun);
}
.how-steps li:nth-child(2) .n { background: var(--blue-sky); }
.how-steps li:nth-child(3) .n { background: var(--green-nature); }

.how-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.45rem - 1px);
  top: 2.9rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--sun), var(--blue-sky));
}
.how-steps li:nth-child(2)::before {
  background: linear-gradient(to bottom, var(--blue-sky), var(--green-nature));
}

.how-steps h3 { margin: 0; padding-top: 0.55rem; }
.how-steps li > p:last-child {
  margin-top: 0.5rem;
  font-size: 0.99rem;
  color: var(--ink-70);
  max-width: 42ch;
}

.how-stage {
  position: relative;
  margin: 0;
  min-height: clamp(30rem, 48vw, 42rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(24, 33, 28, 0.16);
}
/* The <picture> is the box, not the <img>. display:contents here looks tidy
   but WebKit drops the image out of the render tree, so phones showed an
   empty frame. Found and fixed 2026-10-06. Do not put it back. */
.how-stage picture {
  display: block;
  position: absolute;
  inset: 0;
}
.how-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}

@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  /* Text first, picture second. Shayan 2026-09-22. The picture stays first in
     the HTML because that is the wide-screen order. */
  .how-body  { order: 1; }
  /* Phones: the photo sits in the normal flow. Do NOT give the figure its
     height with aspect-ratio here. The figure is a grid item and the grid
     stretches it, and WebKit gives a stretched item NO height from
     aspect-ratio, so the box collapsed to nothing and the photo vanished on
     iPhone while Chrome looked fine. The <img> carries the 4/3 crop now, so
     the figure is sized by real content. Found in Safari, fixed 2026-10-06.
     Do not put aspect-ratio or position:absolute back here. */
  .how-stage { order: 2; aspect-ratio: auto; min-height: 0; }
  .how-stage picture { position: static; display: block; }
  .how-stage img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .how-body h2 { font-size: clamp(1.8rem, 6.4vw, 2.3rem); }
  .how-body .how-steps { margin-top: 1.9rem; }
  .how-steps { display: block; }
  .how-steps::after { display: none; }
  .how-steps li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem; padding-bottom: 2rem; }
  .how-steps .n { width: 2.5rem; height: 2.5rem; font-size: 0.82rem; }
  .how-steps li:not(:last-child)::before { left: calc(1.25rem - 1px); top: 2.5rem; }
  .how-steps h3 { padding-top: 0.35rem; }
}

/* -------------------------------------------------------------------------
   5. WHAT YOU GET BACK
   ------------------------------------------------------------------------- */
.moments-head {
  text-align: center;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}
.moments-head h2 { margin-top: 1rem; }

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1.22fr);
  grid-template-rows: repeat(2, clamp(12rem, 21vw, 19rem));
  gap: 10px;
}
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  display: flex; align-items: flex-end;
  padding: 1.5rem;
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(24,33,28,0.78) 100%);
  transition: opacity 0.5s var(--ease);
}
.tile figcaption {
  position: relative; z-index: 1;
  color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.015em;
  transform: translateY(0);
  transition: transform 0.45s var(--ease);
  text-shadow: 0 1px 12px rgba(24, 33, 28, 0.45);
}
.tile:hover figcaption { transform: translateY(-4px); }
.tile figcaption small {
  display: block; font-weight: 500; font-size: 0.88rem;
  color: rgba(255,255,255,0.86); margin-top: 0.25rem; letter-spacing: 0;
}

.t-talk      { grid-column: 1; grid-row: 1 / span 2; }
.t-move      { grid-column: 2; grid-row: 1; }
.t-together  { grid-column: 3; grid-row: 1; }
.t-focus     { grid-column: 2; grid-row: 2; }
.t-afternoon { grid-column: 3; grid-row: 2; }

.t-talk figcaption { font-size: 1.28rem; }
.t-talk figcaption small { font-size: 0.95rem; }

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .tile { aspect-ratio: 3 / 2; }
  .t-talk { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .t-move, .t-together, .t-focus, .t-afternoon { grid-column: auto; grid-row: auto; }
  .t-talk figcaption { font-size: 1.15rem; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 3; padding: 1.15rem; }
  .t-talk { grid-column: 1; aspect-ratio: 4 / 5; }
  .tile figcaption { font-size: 1rem; }
  .tile figcaption small { font-size: 0.84rem; }
}

/* -------------------------------------------------------------------------
   6. TRUST
   ------------------------------------------------------------------------- */
.trust { background: var(--paper); }
.trust-head { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.trust-head h2 { margin-top: 1rem; margin-inline: auto; max-width: 34ch; }

.trust-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.trust-grid li {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: #fff;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.trust-grid li { border-top: 3px solid var(--sun); }
.trust-grid li:nth-child(2) { border-top-color: var(--blue-sky); }
.trust-grid li:nth-child(3) { border-top-color: var(--green-nature); }

.t-ico {
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  color: var(--sun-deep);
  background: rgba(255, 106, 61, 0.12);
}
.trust-grid li:nth-child(2) .t-ico { color: var(--blue-deepen); background: rgba(0, 139, 219, 0.12); }
.trust-grid li:nth-child(3) .t-ico { color: var(--green-deepen); background: var(--green-wash); }

.trust-grid h3 { margin: 1.15rem 0 0; }
.trust-grid p { margin-top: 0.7rem; font-size: 0.99rem; color: var(--ink-70); }
.t-more {
  margin-top: 0.8rem !important;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line-soft);
  font-size: 0.9rem !important;
}
.t-more strong { font-weight: 700; color: var(--sun-deep); }

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-head h2 { max-width: none; }
}

/* -------------------------------------------------------------------------
   7. THE LINE
   ------------------------------------------------------------------------- */
.rule-line {
  background: transparent;
  padding-block: 0 var(--sec-pad);
  text-align: center;
}
.rule-line p {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.rule-line b { font-weight: 700; color: var(--sun); }
.rule-line b:nth-of-type(2) { color: var(--green-deepen); }

/* -------------------------------------------------------------------------
   8. VISION AND FINAL CALL
   ------------------------------------------------------------------------- */
.vision {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, 82vh, 50rem);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background-image: url("img/vision-athens.webp");
  background-size: cover;
  background-position: 30% center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.vision::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(253,253,252,0.95) 0%,
    rgba(253,253,252,0.88) 24%,
    rgba(253,253,252,0.58) 38%,
    rgba(253,253,252,0.16) 51%,
    rgba(253,253,252,0) 62%);
  pointer-events: none;
}
.vision > .wrap { position: relative; z-index: 1; }

.vision-copy { max-width: 30.5rem; }
.vision-copy > * + * { margin-top: 1.4rem; }
.vision-copy h2 { max-width: none; font-size: clamp(2rem, 3.9vw, 3rem); }
.vision-copy .lede { max-width: 28rem; color: var(--ink-70); }

.vision-mark {
  margin-top: 1.8rem !important;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--green-deep);
}
.vision-mark span { color: var(--sun); }

.vision-note {
  margin-top: 0.55rem !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-70);
}
.vision-cta { margin-top: 1.7rem !important; }

@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .vision {
    align-items: flex-start;
    background-position: center center;
    background-image: url("img/vision-athens-tall.webp");
    padding-block: 2.5rem clamp(2.5rem, 8vw, 4rem);
  }
  .vision::before {
    background: linear-gradient(to bottom,
      rgba(253,253,252,0.97) 0%,
      rgba(253,253,252,0.95) 34%,
      rgba(253,253,252,0.78) 44%,
      rgba(253,253,252,0.28) 49%,
      rgba(253,253,252,0) 53%);
  }
  .vision-copy > * + * { margin-top: 0.95rem; }
  .vision-copy h2 { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
  .vision-copy .lede { font-size: 1rem; line-height: 1.52; }
  .vision-mark { margin-top: 1.25rem !important; font-size: 1.1rem; }
  .vision-note { margin-top: 0.4rem !important; font-size: 0.9rem; }
  .vision-cta { margin-top: 1.3rem !important; }
}

@media (max-width: 900px) and (max-height: 720px) and (max-aspect-ratio: 1/1) {
  .vision::before {
    background: linear-gradient(to bottom,
      rgba(253,253,252,0.97) 0%,
      rgba(253,253,252,0.95) 38%,
      rgba(253,253,252,0.8) 48%,
      rgba(253,253,252,0.3) 53%,
      rgba(253,253,252,0) 56%);
  }
  .vision { min-height: clamp(34rem, 80vh, 46rem); padding-block: 2rem; }
  .vision-copy > * + * { margin-top: 0.7rem; }
  .vision-copy h2 { font-size: 1.6rem; }
  .vision-copy .lede { font-size: 0.92rem; line-height: 1.5; }
  .vision-mark { margin-top: 1rem !important; font-size: 1rem; }
  .vision-note { margin-top: 0.35rem !important; font-size: 0.85rem; }
  .vision-cta { margin-top: 1.05rem !important; }
  .vision .btn { padding: 0.7rem 1.2rem; font-size: 0.88rem; }
}