/* =============================================================================
   HOME PAGE — kanar
   Page-level & section-specific styles. Utilities live in css/style.css.
   ============================================================================= */

/* ─── TOP BAR ──────────────────────────────────────────────────────────────── */
/* Tune the bar height here — it drives the bar, the body offset and the
   desktop nav offset together. */
:root {
  --topbar-h: 56px;
}

/* The bar is pinned to the viewport top and sits BEHIND the page (low z-index).
   body padding-top reserves its height so it peeks out at rest; on scroll the
   page sheet slides up and covers it. */
.site-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding-inline: var(--sp-1);
  background: transparent;
}

.divider {
  width: 1px;
  height: 24px;
  background: var(--primary-500);
}

.site-topbar__tagline {
  font-size: 14px;
  padding-right: 8px;
}

body {
  padding-top: var(--topbar-h);
}

/* Opaque sheet holding the whole page. Stacked above the fixed bar, so as the
   window scrolls it slides up and covers the bar (the page is "on" the bar). */
.page-scroll {
  position: relative;
  z-index: 1;
  background-color: #f1f1f3;
}

/* body::before (the page texture) is hidden behind the opaque sheet — re-apply
   the same texture on the sheet so content keeps its textured background. */
.page-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../../assets/images/texture.png");
  background-repeat: repeat;
  background-size: 150px;
  opacity: 0.5;
  pointer-events: none;
}

.site-topbar__brand {
  display: flex;
  align-items: center;
}

.site-topbar__logo-mark {
  height: 32px;
  width: auto;
}
.site-topbar__logo-type {
  height: 32px;
  width: auto;
  margin-right: -6px;
}

/* Tablet shows a centered 430px app shell — keep the fixed bar aligned to it
   instead of spanning the full viewport. */
@media (min-width: 768px) and (max-width: 899px) {
  .site-topbar {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--app-max-width);
    transform: translateX(-50%);
  }
}

/* ─── HERO ─────────────────────────────────────────────────────────────────── */
/* The page sits like a card elevated above the top bar: a soft shadow on the
   hero's top edge spills upward onto the bar. position:relative (already set via
   [data-skeleton-section]) keeps it painting above the static bar. */
.home-hero {
  box-shadow: 0 -6px 12px -7px rgba(29, 32, 48, 0.16);
  border-radius: 12px 12px 0 0;
}

/* Brand inside the hero is desktop-only — hidden on mobile/tablet. */
.hero-logo {
  display: none;
}
.hero-section__bg {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.hero__block--headline {
  top: 100px;
}
.hero__block--story {
  top: 330px;
}
.hero__block--closing {
  top: 500px;
}

/* Mobile: the hero image height scales with viewport width, so a fixed
   top offset lets the (variable-length) closing text overflow and get
   clipped by the next section. Let it flow below the image instead — it
   tucks into the image's faded bottom and always has room. */
@media (max-width: 899px) {
  .home-hero .hero__block--closing {
    position: static;
    margin-top: -56px;
    padding-bottom: 8px;
  }
}

/* ─── STATS ────────────────────────────────────────────────────────────────── */
.stat-grid {
  max-width: 480px;
  margin-inline: auto;
  display: grid;
  margin-bottom: 24px;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-6);
  /* Hand-drawn square frame — source is square, so stretch 100% 100%
     on a square card keeps it undistorted. */
  aspect-ratio: 1 / 1;
  background: url("../../assets/images/sections/statistics-frame.png") center /
    100% 100% no-repeat;
}

/* Stat number: 24px bold. Stat description: 16px medium. */
.stat-card__num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.stat-card__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 430px) {
  .stat-card {
    padding: var(--sp-4);
  }
  /* "آزمون میزان فرسودگی" — lives in a w-1/2 column, tight space */
  .cta-card__btn {
    font-size: clamp(0.7rem, 3.6vw, 1.25rem);
    padding-inline: 10px;
  }
  /* "پیش‌ثبت‌نام گروه‌های حمایتی" — lives in a w-2/3 column */
  .cta-card--reverse .cta-card__btn {
    font-size: clamp(0.8rem, 4.5vw, 1.125rem);
  }
}

/* ─── POSTAL BANNER ────────────────────────────────────────────────────────── */

/* The skeleton wrapper has overflow:hidden, which clips the shadow on .postal-banner.
   Override it here so the shadow is visible; the banner's own overflow:hidden still
   clips the internal masked image correctly. */
[data-skeleton-section]:has(.postal-banner) {
  overflow: visible;
}

.postal-banner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 36px;
  padding-bottom: 30px;
  /* Tone the card down from near-white toward the page background (#f1f1f3). */
  background-color: var(--primary-100);
}

.postal-card-image {
  flex-shrink: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 78%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 78%);
}

.postal-banner__content {
  position: relative;
  z-index: 1;
  margin-top: -45%;
  padding-top: 0;
}

.postal-banner__title {
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.postal-banner__btn {
  padding: var(--sp-4) var(--sp-6);
  margin-inline: var(--sp-6);
  font-size: clamp(1rem, 5vw, 22px);
}

/* ─── SERVICES ─────────────────────────────────────────────────────────────── */
.service-row__title {
  min-height: 40px;
}

/* ─── CTA CARD ─────────────────────────────────────────────────────────────── */
.cta-card {
  position: relative;
  width: 100%;
  min-height: 250px;
  overflow: hidden;
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: color-mix(in srgb, var(--secondary-500) 15%, transparent);
}

.cta-card .image-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, black 10%, transparent 70%);
  mask-image: linear-gradient(to right, black 10%, transparent 60%);
}

.cta-card--reverse {
  min-height: 200px;
  height: 200px;
}

.cta-card--reverse::before {
  background-color: color-mix(in srgb, #c4cfe0 60%, transparent);
}

.cta-card--reverse .image-card {
  width: 50%;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to left, black 20%, transparent 100%);
  mask-image: linear-gradient(to left, black 20%, transparent 100%);
}

.cta-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 250px;
  margin-inline-end: auto;
  padding: var(--sp-5);
  text-align: right;
}

.cta-card--reverse .cta-card__content {
  min-height: 200px;
  margin-inline-end: 0;
  margin-inline-start: auto;
}

.cta-card--reverse .cta-card__content--bottom {
  /* justify-content: flex-end; */
}

.cta-card__lead {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.cta-card__btn {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 1.25rem;
  border: 1px solid var(--secondary-500);
  border-radius: 10px;
  background: var(--secondary-500);
  color: #fff;
  font-family: var(--font-secondary);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease;
}

.cta-card__btn:focus {
  outline: none;
}

.cta-card__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (hover: hover) {
  .cta-card__btn:hover {
    background-color: var(--secondary-700);
    border-color: var(--secondary-700);
  }
}

.cta-card__btn:active {
  background-color: var(--secondary-700);
  border-color: var(--secondary-700);
}

.cta-card--reverse .cta-card__btn {
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  font-size: 1.125rem;
  background: transparent;
  border-color: #0f134c;
  color: #0f134c;
}

.cta-card--reverse .cta-card__btn:focus-visible {
  outline-color: #0f134c;
}

@media (hover: hover) {
  .cta-card--reverse .cta-card__btn:hover {
    background-color: #0f134c;
    color: #fff;
  }
}

.cta-card--reverse .cta-card__btn:active {
  background-color: #0f134c;
  color: #fff;
}

/* ─── VALUES SCROLL ────────────────────────────────────────────────────────── */
.values-scroll {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--sp-4);
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: calc(-1 * var(--sp-4));
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sp-4);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.values-scroll::-webkit-scrollbar {
  display: none;
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  flex: 0 0 250px;
  height: 360px;
  padding: var(--sp-4);
  direction: rtl;
  background-color: var(--primary-50);
  border-radius: var(--r-md);
  box-shadow: 0 2px 12px rgba(29, 32, 48, 0.08);
  scroll-snap-align: start;
}

.value-card__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
  background-image: url("/assets/images/badge-circle.png");
  background-size: cover;
  background-position: center;
  opacity: 0.75;
}

/* ─── FOOTER ───────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: #212752;
  color: #fff;
  padding-block: var(--sp-6);
}

.site-footer__inner {
  padding-inline: var(--sp-4);
  display: flex;
  flex-direction: column;
}

.site-footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.site-footer__logo-mark {
  width: 64px;
}
.site-footer__logo-type {
  width: 72px;
  margin-top: -11px;
}

.site-footer__copy {
  flex: 1;
  text-align: right;
}

.site-footer__tagline {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.site-footer__launch {
  margin-top: var(--sp-6);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.site-footer__social-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.site-footer__social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.85);
  transition: color 250ms ease;
}

.site-footer__social-link:hover {
  color: #fff;
}

.site-footer__social-handle {
  font-size: 1.125rem;
}

.site-footer__social-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.site-footer__divider {
  width: 1px;
  height: 18px;
  background-color: #f8f8fb;
  flex-shrink: 0;
}

/* ─── DESKTOP NAV (hidden on mobile/tablet) ────────────────────────────────── */
.home-nav {
  display: none;
}

/* =============================================================================
   DESKTOP (≥1024px)
   Everything above is the mobile (base) layout — do NOT edit it for desktop.
   Add desktop-only overrides inside the per-section blocks below. Anything
   not overridden here keeps inheriting the mobile styles untouched.
   ============================================================================= */

/* ─── DESKTOP · PAGE / LAYOUT + NAV ────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Tune these two to resize the desktop content band:
     --dt-max = max content width, --dt-pad = left/right gutter. */
  :root {
    --dt-max: 1440px;
    --dt-pad: 120px;
    /* Taller bar on desktop — drives the bar height and the body offset. */
    --topbar-h: 88px;
    /* Unified desktop spacing: large gap between sections, small gap from each
       section heading to its content. Tune these two to retune the whole page. */
    --dt-section-gap: 64px;
    --dt-head-gap: 18px;
  }

  /* Uniform vertical rhythm between consecutive sections (overrides the mobile
     mt-14 utility). The first section (hero) keeps no top margin. */
  main.container > section + section {
    margin-top: var(--dt-section-gap);
  }

  /* Topbar stays hidden on desktop — brand lives in the hero-logo instead. */
  .site-topbar {
    display: none;
  }

  body {
    padding-top: 0;
  }

  /* Drop the card look on desktop — no rounded top corners, no top-edge shadow. */
  .home-hero {
    border-radius: 0;
    box-shadow: none;
  }

  /* Old desktop overlay nav is replaced by the top bar. */
  .home-nav {
    display: none;
  }

  .home-nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .home-nav__logo-type {
    height: 34px;
    width: auto;
  }
  .home-nav__logo-mark {
    height: 42px;
    width: auto;
  }

  .home-nav__links {
    display: flex;
    align-items: center;
    gap: 34px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-700);
  }

  .home-nav__links a {
    color: inherit;
    transition:
      color 250ms ease,
      background-color 250ms ease;
  }

  .home-nav__links a:hover {
    color: var(--secondary-500);
  }

  .home-nav__cta {
    padding: 11px 24px;
    border-radius: 10px;
    background: var(--secondary-500);
    color: #fff;
    font-weight: 600;
  }

  .home-nav__cta:hover {
    background: var(--secondary-700);
    color: #fff;
  }
}

/* ─── DESKTOP · HERO (split, full-bleed image) ─────────────────────────────── */
@media (min-width: 900px) {
  .home-hero {
    position: relative;
    padding-inline: 0;
  }

  .hero-logo {
    display: flex;
    align-items: center;
    max-width: var(--dt-max);
    margin-inline: auto;
    padding: 24px 0 0;
    padding-inline-start: var(--dt-pad);
  }
  .hero-logo__mark {
    display: block;
    width: auto;
    height: 54px;
  }
  .hero-logo__type {
    display: block;
    width: auto;
    height: 54px;
    margin-right: -6px;
  }

  .hero-logo .divider {
    margin-inline-start: 12px;
  }

  .hero-logo .site-topbar__tagline {
    padding-right: 22px;
    font-size: 24px;
    font-weight: 600;
  }

  /* Text stays inside the shrunk content band; the image bleeds outside it. */
  .home-hero > .relative {
    position: static;
    max-width: var(--dt-max);
    margin-inline: auto;
    padding: 0;
    padding-inline-start: var(--dt-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 48px;
    align-items: start;
    min-height: 640px;
    overflow: visible;
  }

  /* Image overflows the band, stuck to the top-left corner of the screen. */
  .home-hero .hero-section__bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: clamp(360px, 46vw, 760px);
    height: 600px;
    margin: 0;
    object-fit: cover;
    object-position: left top;
    /* Horizontal fade (right edge) + vertical fade over the bottom quarter. */
    -webkit-mask-image:
      linear-gradient(to right, black 60%, transparent 100%),
      linear-gradient(to bottom, black 75%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, black 60%, transparent 100%),
      linear-gradient(to bottom, black 75%, transparent 100%);
    mask-composite: intersect;
  }

  /* Text column (col 1 = visual right), lifted above the bleeding image. */
  .home-hero .hero__block--headline,
  .home-hero .hero__block--story {
    position: relative;
    z-index: 2;
    left: auto;
    top: auto;
    grid-column: 1;
    width: 100%;
    max-width: 560px;
    margin-inline-start: 0;
    padding: 0;
  }

  .home-hero .hero__block--headline {
    grid-row: 1;
    align-self: start;
    margin-top: 120px;
  }

  .home-hero .hero__block--story {
    grid-row: 2;
    align-self: start;
    margin-top: 40px;
    margin-bottom: 64px;
  }

  .home-hero .hero__block--headline span {
    font-size: 76px;
    line-height: 1.14;
    letter-spacing: -1px;
  }

  .home-hero .hero__block--story span {
    font-size: 30px;
    line-height: 1.5;
  }

  /* Closing statement — full-width centered band below the hero (#about). */
  .home-hero .hero__block--closing {
    position: relative;
    z-index: 2;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding: 90px 56px 24px;
  }

  .home-hero .hero__block--closing span {
    font-size: 38px;
    line-height: 1.65;
    text-wrap: balance;
  }
}

/* ─── DESKTOP · STATS ──────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Full band so the heading lines up with the other section headings… */
  .home-stats {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
  }

  .home-stats h2 {
    width: 100%;
    font-size: 42px;
    margin-top: 60px;
    margin-bottom: var(--dt-head-gap);
    text-align: right;
  }

  /* …but the cards keep their narrower, centered group. */
  .home-stats .stat-grid {
    max-width: 1024px;
    margin-inline: auto;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .home-stats .stat-card {
    gap: 10px;
    padding: var(--sp-12) var(--sp-8) var(--sp-8) var(--sp-10);
  }

  /* Scaled type for desktop. */
  .home-stats .stat-card__num {
    font-size: 32px;
  }
  .home-stats .stat-card__label {
    font-size: 22px;
    line-height: 1.6;
  }

  .home-stats .stat-card__num,
  .home-stats .stat-card__label {
    width: 160px;
    margin-inline: auto;
    /* text-align: center; */
  }
  .home-stats .stat-card__label {
    min-height: 3.2em; /* 2 lines × line-height 1.6 */
  }
}

/* ─── DESKTOP · POSTAL BANNER ──────────────────────────────────────────────── */
@media (min-width: 900px) {
  .home-postal {
    padding-inline: var(--dt-pad);
  }

  /* Stacked → 2-column (image + content); fixed 480px card, centered, max 1160. */
  .home-postal .postal-banner {
    max-width: var(--dt-max);
    height: 480px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
  }

  .home-postal .postal-card-image {
    width: auto;
    height: 100%;
    min-width: 0;
    /* Mobile skeleton min-height (460px+) must not inflate the desktop grid row. */
    min-height: 0;
    -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
    mask-image: linear-gradient(to left, black 60%, transparent 100%);
  }

  .home-postal .postal-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .home-postal .postal-banner__content {
    margin-top: 0;
    height: 100%;
    min-width: 0;
    padding: 72px 60px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px !important;
  }

  .home-postal .postal-banner__title {
    font-size: 42px;
  }

  /* subtitle carries inline font-size:22px — override it */
  .home-postal .postal-banner__content span.font-on {
    font-size: 24px !important;
    line-height: 1.8;
  }

  .home-postal .postal-banner__btn {
    width: 90%;
    align-self: center;
    margin-inline: 0;
    font-size: 24px;
    padding: 12px 64px !important;
  }
}

/* ─── DESKTOP · QUOTES ─────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Section spans the standard content width so the heading aligns to the
     page's right margin like the others… */
  .home-quotes {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
  }

  .quote-card__text {
    font-size: 1.7rem !important;
  }

  .home-quotes h2 {
    margin-top: 80px;
    font-size: 42px;
    margin-bottom: 30px;
    text-align: center;
  }

  /* Carousel stays centered at a readable width. */
  .home-quotes .carousel {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 80px;
  }
  .quote-card__author {
    font-size: 1.5rem !important;
  }
}

/* ─── DESKTOP · CTA · BURNOUT TEST ─────────────────────────────────────────── */
@media (min-width: 900px) {
  .home-cta-test {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
  }

  .home-cta-test .cta-card {
    min-height: 320px;
    border-radius: 20px;
  }

  .home-cta-test .cta-card .image-card {
    -webkit-mask-image: linear-gradient(to right, black 8%, transparent 62%);
    mask-image: linear-gradient(to right, black 8%, transparent 62%);
  }

  .home-cta-test .cta-card__content {
    width: 52%;
    min-height: 320px;
    padding: 56px;
    gap: 28px;
  }
  .home-cta-test .cta-card__btn {
    max-width: 84%;
    font-size: 1.5rem;
    padding: 12px 24px;
  }

  .home-cta-test .cta-card__lead {
    font-size: 28px;
  }
}

/* ─── DESKTOP · SERVICES ───────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Section becomes the grid; rows become vertical cards. */
  .home-services {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 36px;
    row-gap: 0;
    align-items: start;
  }

  .home-services img {
    margin-bottom: 12px !important;
  }

  .home-services > h2 {
    grid-column: 1 / -1;
    font-size: 42px;
    margin-bottom: var(--dt-head-gap);
  }

  .home-services > .section-skeleton {
    grid-column: 1 / -1;
  }

  .home-services > .w-full.flex {
    flex-direction: column;
    align-items: center;
    width: auto;
    padding-top: 0;
    text-align: center;
  }

  .home-services > .w-full.flex > .w-1\/3 {
    width: 128px;
  }

  .home-services > .w-full.flex > .w-1\/3 img {
    width: 128px;
    height: 128px;
    object-fit: contain;
    margin: 0 auto 22px;
  }

  .home-services > .w-full.flex > .w-2\/3 {
    width: 100%;
    padding-left: 0;
  }

  .home-services .service-row__title {
    min-height: 0;
    margin-bottom: 8px;
    font-size: 23px;
  }

  .home-services .w-2\/3 .text-lg {
    font-size: 25px;
    line-height: 1.5;
  }
}

/* ─── DESKTOP · CTA · SIGNUP ───────────────────────────────────────────────── */
@media (min-width: 900px) {
  .home-cta-signup {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
  }

  .home-cta-signup .cta-card--reverse {
    min-height: 300px;
    height: auto;
    border-radius: 20px;
  }

  .home-cta-signup .cta-card--reverse .image-card {
    width: 42%;
    /* anchor to the top so the person's head isn't cropped on desktop */
    object-position: right top;
    -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
    mask-image: linear-gradient(to left, black 30%, transparent 100%);
  }

  .home-cta-signup .cta-card__content {
    width: 58%;
    min-height: 300px;
    padding: 56px 80px;
    gap: 26px;
    /* RTL: flex-end = visual LEFT, so the button sits under the left-aligned text */
    align-items: flex-end !important;
  }

  .home-cta-signup .cta-card__lead {
    font-size: 36px;
    line-height: 1.45;
  }

  .home-cta-signup .cta-card__btn {
    width: 54%;
  }

  .home-cta-signup .cta-card--reverse .cta-card__btn {
    font-size: 24px;
  }
}

/* ─── DESKTOP · VALUES ─────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .home-values {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: var(--dt-pad);
  }

  .home-values h2 {
    font-size: 42px;
    margin-bottom: var(--dt-head-gap);
  }

  /* The skeleton wrapper clips card shadows with overflow:hidden — opt out. */
  .home-values[data-skeleton-section] {
    overflow: visible;
  }

  /* Horizontal scroller → 3-up grid */
  .home-values .values-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    direction: rtl;
    overflow: visible;
    margin-inline: 0;
    padding: 4px;
  }

  .home-values .value-card {
    flex: initial;
    width: auto;
    height: auto;
    padding: 36px 32px;
    border-radius: 14px;
  }

  .home-values .value-card > span.text-lg {
    font-size: 25px;
    line-height: 1.5;
  }
}

/* ─── DESKTOP · FOOTER ─────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .home-footer {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  /* Two columns: main stack (logo + copy) on the right, social on the left. */
  .home-footer .site-footer__inner {
    max-width: var(--dt-max);
    margin-inline: auto;
    padding-inline: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 16px;
    align-items: start;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* .home-footer .site-footer__logo-mark { width: 62px; } */
  .home-footer .site-footer__logo-type {
    /* width: 84px;  */
    margin-top: -10px;
    padding-right: 4px;
  }

  /* logo + tagline → top of the main column */
  .home-footer .site-footer__inner > .w-full {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-end;
  }

  /* Narrower copy column so the paragraph wraps sooner. */
  .home-footer .site-footer__copy {
    grid-column: 1;
    grid-row: 2;
    max-width: 800px;
  }

  .home-footer .site-footer__brand {
    justify-content: flex-start;
    gap: 8px;
  }

  .home-footer .site-footer__tagline {
    font-size: 24px;
    line-height: 1.5;
    flex: 1;
  }
  .home-footer .site-footer__launch {
    font-size: 24px;
    padding-top: 0px;
    margin-top: -4px;
  }
  .home-footer .site-footer__social-title {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 0;
  }
  .home-footer .site-footer__social-handle {
    font-size: 28px;
  }
  .home-footer .site-footer__social-link {
    font-size: 28px;
  }
  .home-footer .site-footer__social-icon {
    width: 26px;
    height: 26px;
  }

  /* Social block: own column on the end, pinned to the top of the footer. */
  .home-footer .site-footer__social {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-inline-end: 180px;
    gap: var(--sp-6);
  }

  .home-footer .site-footer__social-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  /* Inline dividers don't make sense in a vertical stack. */
  .home-footer .site-footer__divider {
    display: none;
  }
}

/* ─── SMALL DESKTOP (900 – 1440px) ─────────────────────────────────────────── */
/* Overrides the 1440px-targeted base desktop styles for narrower viewports.
   clamp() values ensure smooth scaling across the full 900–1440px range. */
@media (min-width: 900px) and (max-width: 1440px) {
  :root {
    --dt-pad: clamp(40px, 4vw, 80px);
    --dt-section-gap: clamp(40px, 4.5vw, 64px);
    --dt-head-gap: clamp(12px, 1.2vw, 18px);
  }

  /* ── Hero ── */
  .home-hero > .relative {
    min-height: clamp(480px, 52vw, 640px);
    padding-inline-start: clamp(32px, 4vw, 80px);
  }

  .home-hero .hero-section__bg {
    width: clamp(260px, 38vw, 600px);
    height: clamp(480px, 52vw, 640px);
  }

  .home-hero .hero__block--headline {
    margin-top: clamp(60px, 7vw, 120px);
  }
  .home-hero .hero__block--headline span {
    font-size: clamp(36px, 5vw, 76px);
    line-height: 1.14;
  }

  .home-hero .hero__block--story {
    margin-top: clamp(20px, 2.5vw, 40px);
    margin-bottom: clamp(28px, 4vw, 64px);
  }
  .home-hero .hero__block--story span {
    font-size: clamp(18px, 2.2vw, 30px);
  }

  .home-hero .hero__block--closing {
    padding: clamp(40px, 6vw, 90px) clamp(24px, 4vw, 56px) 24px;
  }
  .home-hero .hero__block--closing span {
    font-size: clamp(20px, 2.8vw, 38px);
    line-height: 1.65;
  }

  /* ── Section headings ── */
  .home-stats h2,
  .home-quotes h2,
  .home-services > h2,
  .home-values h2 {
    font-size: clamp(24px, 3vw, 42px);
  }

  /* ── Stats ── */
  /* Base desktop padding (54px / 45px) overflows cards at ~180px width — reset. */
  .home-stats h2 {
    margin-top: clamp(32px, 4vw, 60px);
  }
  .home-stats .stat-grid {
    gap: clamp(12px, 1.8vw, 24px);
  }
  .home-stats .stat-card {
    padding: clamp(12px, 1.5vw, 24px) clamp(10px, 1.2vw, 20px);
    gap: 6px;
  }
  .home-stats .stat-card__num {
    font-size: clamp(18px, 2.4vw, 32px);
  }
  .home-stats .stat-card__label {
    font-size: clamp(13px, 1.6vw, 22px);
    min-height: 0;
    line-height: 1.4;
  }
  .home-stats .stat-card__num,
  .home-stats .stat-card__label {
    width: auto;
  }

  /* ── Postal banner ── */
  .home-postal .postal-banner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    height: clamp(300px, 34vw, 480px);
  }
  .home-postal .postal-card-image {
    height: 100%;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
  }
  .home-postal .postal-banner__title {
    font-size: clamp(16px, 2.2vw, 42px);
    margin-bottom: clamp(4px, 0.6vw, 12px);
  }
  .home-postal .postal-banner__content {
    height: 100%;
    min-width: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: clamp(12px, 1.5vw, 24px) !important;
    padding: clamp(12px, 1.8vw, 48px) clamp(12px, 2.2vw, 48px);
    gap: clamp(6px, 0.8vw, 12px);
  }
  .home-postal .postal-banner__content span.font-on {
    font-size: clamp(12px, 1.5vw, 24px) !important;
    line-height: 1.5;
    padding-bottom: 0;
  }
  .home-postal .postal-banner__btn {
    font-size: clamp(12px, 1.5vw, 24px);
    padding: clamp(6px, 0.8vw, 12px) clamp(12px, 3vw, 64px) !important;
    width: 90%;
    flex-shrink: 0;
  }

  /* ── Quotes ── */
  .home-quotes h2 {
    margin-top: clamp(40px, 5vw, 80px);
    margin-bottom: clamp(16px, 2vw, 30px);
  }
  .quote-card__text {
    font-size: clamp(1.1rem, 1.8vw, 1.7rem) !important;
  }
  .quote-card__author {
    font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
  }

  /* ── CTA burnout test ── */
  .home-cta-test .cta-card {
    min-height: clamp(220px, 24vw, 320px);
  }
  .home-cta-test .cta-card__content {
    min-height: clamp(220px, 24vw, 320px);
    padding: clamp(28px, 4vw, 56px);
    gap: clamp(14px, 2vw, 28px);
  }
  .home-cta-test .cta-card__lead {
    font-size: clamp(16px, 2vw, 28px);
  }
  .home-cta-test .cta-card__btn {
    font-size: clamp(1rem, 1.4vw, 1.5rem);
  }

  /* ── Services ── */
  .home-services {
    column-gap: clamp(16px, 2.5vw, 36px);
  }
  .home-services .service-row__title {
    font-size: clamp(14px, 1.7vw, 23px);
  }
  .home-services .w-2\/3 .text-lg {
    font-size: clamp(13px, 1.6vw, 25px);
  }
  .home-services > .w-full.flex > .w-1\/3 img {
    width: clamp(72px, 9vw, 128px);
    height: clamp(72px, 9vw, 128px);
  }

  /* ── CTA signup ── */
  .home-cta-signup .cta-card--reverse {
    min-height: clamp(220px, 24vw, 300px);
  }
  .home-cta-signup .cta-card__content {
    min-height: clamp(220px, 24vw, 300px);
    padding: clamp(28px, 4vw, 56px) clamp(36px, 6vw, 80px);
    gap: clamp(14px, 2vw, 26px);
  }
  .home-cta-signup .cta-card__lead {
    font-size: clamp(20px, 2.8vw, 36px);
  }

  /* ── Values ── */
  .home-values .value-card {
    padding: clamp(18px, 2.5vw, 36px) clamp(16px, 2.2vw, 32px);
  }
  .home-values .value-card > span.text-lg {
    font-size: clamp(15px, 1.9vw, 25px);
  }

  /* ── Footer ── */
  .home-footer .site-footer__tagline {
    font-size: clamp(16px, 1.8vw, 24px);
  }
  .home-footer .site-footer__launch {
    font-size: clamp(14px, 1.6vw, 22px);
  }
  .home-footer .site-footer__social-title {
    font-size: clamp(18px, 2.1vw, 30px);
  }
  .home-footer .site-footer__social-handle {
    font-size: clamp(16px, 2vw, 28px);
  }
  .home-footer .site-footer__social-link {
    font-size: clamp(16px, 2vw, 28px);
  }
  .home-footer .site-footer__social-icon {
    width: clamp(18px, 2vw, 26px);
    height: clamp(18px, 2vw, 26px);
  }
  .home-footer .site-footer__social {
    height: 100%;
    margin-inline-end: clamp(40px, 10vw, 180px);
    gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  }
  .home-footer .site-footer__social-links {
    gap: clamp(var(--sp-1), 0.8vw, var(--sp-2));
  }
}

/* ── Services: 2-column below 1100px (4 cols too cramped at ~180px each) ── */
@media (min-width: 900px) and (max-width: 1099px) {
  .home-services {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    row-gap: 32px;
  }
  .home-services > h2 {
    grid-column: 1 / -1;
  }
  .home-services > .section-skeleton {
    grid-column: 1 / -1;
  }
}