/* ============================================================
   SANVEL - one-page brand showcase (sanvel.html)
   Tokens from "SANVEL Design System": Green #1D3C34, Beige #F2E9DC,
   Dark Gray #333 (text). Serif accent stands in for "The Seasons".
   ============================================================ */
:root {
  --sn-green: #1D3C34;
  --sn-deep: #112F27;
  --sn-beige: #F2E9DC;
  --sn-beige-2: #E7DCC9;
  --sn-sand: #F8F5EF;
  --sn-ink: #231F20;
  --sn-text: #393536;
  --sn-muted: #7B7879;
  --sn-line: rgba(29, 60, 52, .14);
  --sn-line-light: rgba(242, 233, 220, .22);
  --sn-serif: "Cormorant Garamond", "The Seasons", Georgia, "Times New Roman", serif;
  --sn-grad: linear-gradient(135deg, #F2E9DC 10%, #899389 38%, #3B544B 60%, #1D3C34 71%);
}

.sn { color: var(--sn-text); background: var(--sn-sand); }
.sn ul, .sn ol { list-style: none; margin: 0; padding: 0; }
.sn section { position: relative; }
.sn .container { width: min(1280px, 92vw); margin-inline: auto; }

/* ---------- type ---------- */
.sn-eyebrow {
  font-family: var(--sn-serif); font-size: clamp(15px, 1.25vw, 18px); font-style: italic; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sn-green); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 12px;
}
.sn-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.sn-eyebrow--light { color: var(--sn-beige); }
.sn-title { font-size: clamp(30px, 3.9vw, 56px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.22; color: var(--sn-ink); }
.sn-title--light { color: #fff; }
.sn-lead { font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.8; color: var(--sn-muted); max-width: 46ch; }
.sn-lead--light { color: rgba(242, 233, 220, .72); }
.sn-head { margin-bottom: clamp(40px, 6vw, 72px); }
.sn-head--row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.sn-head--row .sn-lead { margin-bottom: 6px; }

/* ---------- buttons ---------- */
.sn-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;
  padding: 17px 30px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  border: 1px solid transparent; transition: color .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.sn-btn .arr { transition: transform .35s var(--ease); }
.sn-btn:hover .arr { transform: translateX(4px); }
.sn-btn::before { content: ""; position: absolute; inset: 0; transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; z-index: 0; }
.sn-btn:hover::before { transform: none; }
.sn-btn > * { position: relative; z-index: 1; }
.sn-btn--beige { background: var(--sn-beige); color: var(--sn-green); }
.sn-btn--beige::before { background: #fff; }
.sn-btn--ghost { border-color: rgba(242, 233, 220, .45); color: var(--sn-beige); }
.sn-btn--ghost::before { background: var(--sn-beige); }
.sn-btn--ghost:hover { color: var(--sn-green); }
.sn-btn--sm { padding: 12px 20px; font-size: 13.5px; }

/* ---------- chips ---------- */
.sn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-chips li { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--sn-line-light); color: rgba(242, 233, 220, .88); }
.sn-chips--line li { color: rgba(242, 233, 220, .7); }

/* glass caption */
.sn-glass {
  display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-radius: 12px;
  background: rgba(242, 233, 220, .14); border: 1px solid rgba(242, 233, 220, .28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff;
}
.sn-glass b { font-size: 14px; font-weight: 700; }
.sn-glass span { font-size: 12px; color: rgba(242, 233, 220, .75); }

/* ============================================================
   HERO
   ============================================================ */
.sn-hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 70% at 84% 40%, rgba(242, 233, 220, .16) 0%, transparent 62%),
    radial-gradient(40% 50% at 10% 100%, rgba(137, 147, 137, .28) 0%, transparent 60%),
    linear-gradient(160deg, #244A40 0%, var(--sn-green) 45%, var(--sn-deep) 100%);
}
.sn-hero__mark {
  position: absolute; right: -8vw; top: -10vh; width: clamp(420px, 52vw, 860px); opacity: .07; pointer-events: none;
  filter: brightness(0) invert(1);
  animation: snDrift 18s ease-in-out infinite alternate;
}
@keyframes snDrift { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(6deg) translateY(4vh); } }
.sn-hero__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  padding-top: calc(var(--header-h) + 8vh); padding-bottom: 6vh; position: relative; z-index: 1;
}
.sn-hero__logo { height: clamp(48px, 5.4vw, 74px); width: auto; margin-bottom: 40px; }
.sn-hero__title { font-size: clamp(44px, 6.6vw, 96px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; color: #fff; }
.sn-hero__quote { margin-top: 26px; font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: clamp(20px, 2vw, 28px); color: var(--sn-beige); letter-spacing: .01em; }
.sn-hero__desc { margin-top: 18px; font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.8; color: rgba(242, 233, 220, .72); max-width: 52ch; }
.sn-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 38px; }

.sn-hero__visual { position: relative; margin: 0; aspect-ratio: 5 / 6; display: flex; align-items: flex-end; justify-content: center; }
.sn-hero__arch {
  position: absolute; left: 8%; right: 8%; top: 4%; bottom: 0;
  border-radius: 999px 999px 28px 28px;
  background: linear-gradient(180deg, #F2E9DC 0%, #E2D6C3 100%);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .5);
}
.sn-hero__arch::after {
  content: ""; position: absolute; inset: 14px; border-radius: inherit; border: 1px solid rgba(29, 60, 52, .18);
}
.sn-hero__person { position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.sn-hero__visual figcaption { position: absolute; left: 0; bottom: 8%; z-index: 2; }

.sn-hero__ticker { margin-top: auto; border-top: 1px solid var(--sn-line-light); border-bottom: 1px solid var(--sn-line-light); padding: 14px 0; background: rgba(17, 47, 39, .35); position: relative; z-index: 1; }
.sn-hero__ticker .marquee-track { gap: 0; }
.sn-tick { display: inline-flex; align-items: baseline; gap: 14px; padding: 0 44px; color: var(--sn-beige); font-size: 14px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.sn-tick em { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 24px; letter-spacing: .04em; color: #fff; }
.sn-tick::after { content: "→"; margin-left: 44px; color: rgba(242, 233, 220, .45); font-weight: 400; }

/* ============================================================
   STORY (beige)
   ============================================================ */
.sn-story { background: var(--sn-beige); padding: clamp(80px, 12vh, 140px) 0; }
.sn-story__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sn-eq { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 8px; }
.sn-eq__term { display: flex; flex-direction: column; gap: 6px; }
.sn-eq__term b { font-family: var(--sn-serif); font-weight: 500; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.01em; color: var(--sn-green); }
.sn-eq__term span { font-size: 13px; color: var(--sn-muted); letter-spacing: .02em; }
.sn-eq__op { font-family: var(--sn-serif); font-style: normal; font-size: clamp(30px, 3vw, 44px); color: rgba(29, 60, 52, .45); align-self: flex-start; margin-top: 8px; }
.sn-eq__term--result { flex-basis: 100%; margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--sn-line); flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.sn-eq__term--result::before { content: "="; font-family: var(--sn-serif); font-size: clamp(30px, 3vw, 44px); color: rgba(29, 60, 52, .45); line-height: 1; }
.sn-eq__term--result span { flex-basis: 100%; }
.sn-eq__term--result img { height: clamp(40px, 4.2vw, 58px); width: auto; }
.sn-eq__term--result span { font-size: 14px; font-weight: 600; color: var(--sn-green); }
.sn-story__creed .sn-lead { margin-top: 22px; color: var(--sn-text); }
.sn-creed { margin-top: 34px; display: grid; gap: 0; border-top: 1px solid var(--sn-line); }
.sn-creed li { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--sn-line); font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; color: var(--sn-ink); letter-spacing: -0.02em; }
.sn-creed li span { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 15px; color: var(--sn-green); letter-spacing: .08em; }

/* ============================================================
   JOURNEY (sand)
   ============================================================ */
.sn-journey { padding: clamp(80px, 12vh, 140px) 0; }
.sn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sn-line); counter-reset: sn; }
.sn-steps li { counter-increment: sn; padding: 32px 28px 40px 0; border-right: 1px solid var(--sn-line); margin-right: 28px; position: relative; }
.sn-steps li:last-child { border-right: 0; margin-right: 0; }
.sn-steps li::before { content: "0" counter(sn); font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 15px; letter-spacing: .1em; color: var(--sn-green); display: block; margin-bottom: 26px; }
.sn-steps em { display: block; font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--sn-green); letter-spacing: .01em; margin-bottom: 12px; }
.sn-steps h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; color: var(--sn-ink); }
.sn-steps p { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: var(--sn-muted); }

.sn-loop { margin-top: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; }
.sn-loop__node { background: #fff; border: 1px solid var(--sn-line); border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; box-shadow: 0 30px 60px -40px rgba(29, 60, 52, .35); }
.sn-loop__node img { height: 26px; width: auto; }
.sn-loop__node b { font-size: 15.5px; font-weight: 700; color: var(--sn-ink); letter-spacing: -0.01em; }
.sn-loop__node--hospital { background: var(--sn-green); border-color: var(--sn-green); color: #fff; }
.sn-loop__node--hospital em { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--sn-beige); line-height: 26px; }
.sn-loop__node--hospital b { color: #fff; }
.sn-loop__link { width: clamp(28px, 4vw, 64px); height: 1px; background: var(--sn-green); position: relative; opacity: .6; }
.sn-loop__link::after { content: ""; position: absolute; right: -1px; top: -4px; width: 6px; height: 6px; border-top: 1px solid var(--sn-green); border-right: 1px solid var(--sn-green); transform: rotate(45deg); }

/* ============================================================
   PILLARS (white)
   ============================================================ */
.sn-pillars { background: #fff; padding: clamp(80px, 12vh, 140px) 0; }
.sn-pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sn-pillar__media { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 10%; position: relative; }
.sn-pillar__media--beige { background: linear-gradient(160deg, #F7F1E7 0%, var(--sn-beige-2) 100%); }
.sn-pillar__media--green { background: linear-gradient(160deg, #244A40 0%, var(--sn-deep) 100%); }
.sn-pillar__media--photo { padding: 0; }
.sn-pillar__media img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .18)); transition: transform 1.2s var(--ease); }
.sn-pillar__media--photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.sn-pillar:hover .sn-pillar__media img { transform: scale(1.04); }
.sn-pillar em { display: block; margin-top: 22px; font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--sn-green); }
.sn-pillar h3 { margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.025em; color: var(--sn-ink); }
.sn-pillar p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--sn-muted); }

/* ============================================================
   LINE-UP (green)
   ============================================================ */
.sn-lineup { background: var(--sn-green); color: #fff; padding: clamp(80px, 12vh, 140px) 0 clamp(40px, 6vh, 70px); }
.sn-flag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vh, 72px) 0; border-top: 1px solid var(--sn-line-light); }
.sn-flag--rev { direction: rtl; }
.sn-flag--rev > * { direction: ltr; }
.sn-flag__logo { height: clamp(30px, 3vw, 40px); width: auto; margin-bottom: 26px; }
.sn-flag h3 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.28; color: #fff; }
.sn-flag p { margin-top: 18px; font-size: 15.5px; line-height: 1.8; color: rgba(242, 233, 220, .74); max-width: 50ch; }
.sn-flag .sn-chips { margin-top: 24px; }
.sn-flag__media { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .7); }
.sn-flag__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   PLATFORM PRODUCTS (deep green)
   ============================================================ */
.sn-platform { background: var(--sn-deep); color: #fff; padding: clamp(80px, 12vh, 140px) 0; }
.sn-platform::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 100% 0%, rgba(242, 233, 220, .1), transparent 60%); pointer-events: none; }
.sn-fn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.sn-fn li { border: 1px solid var(--sn-line-light); border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; background: rgba(255, 255, 255, .03); }
.sn-fn em { grid-row: 1 / 3; font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--sn-beige); }
.sn-fn b { font-size: 15px; font-weight: 700; color: #fff; }
.sn-fn span { font-size: 12.5px; color: rgba(242, 233, 220, .6); margin-top: 3px; }

.sn-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sn-product {
  position: relative; border: 1px solid var(--sn-line-light); border-radius: 18px; padding: 26px 26px 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  display: flex; flex-direction: column; gap: 12px; min-height: 150px;
  transition: border-color .4s, transform .5s var(--ease), background .4s;
}
.sn-product:hover { border-color: rgba(242, 233, 220, .55); transform: translateY(-4px); background: rgba(255, 255, 255, .06); }
.sn-product__logo { height: 22px; width: auto; align-self: flex-start; }
.sn-product p { font-size: 13.5px; color: rgba(242, 233, 220, .72); }
.sn-combo { margin-top: auto; display: flex; gap: 5px; flex-wrap: wrap; padding-top: 6px; }
.sn-combo i, .sn-combo b { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-style: normal; }
.sn-combo i { background: rgba(242, 233, 220, .16); color: var(--sn-beige); border: 1px solid rgba(242, 233, 220, .3); }
.sn-combo b { background: var(--sn-beige); color: var(--sn-green); }

/* generated sub-brand lockup: official tagline-less wordmark + typed suffix on the baseline */
.sn-sub { display: inline-flex; align-items: flex-end; gap: .34em; height: 24px; align-self: flex-start; }
.sn-sub img { height: 100%; width: auto; }
.sn-sub b { font-size: 14px; font-weight: 400; letter-spacing: .04em; color: #fff; line-height: 1; padding-bottom: 1px; white-space: nowrap; }
.sn-sub--word { font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #fff; line-height: 24px; }

.sn-legend { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--sn-line-light); padding-top: 36px; }
.sn-legend h4 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sn-beige); margin-bottom: 16px; }
.sn-legend h4 i, .sn-legend h4 b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-style: normal; font-weight: 700; }
.sn-legend h4 i { background: rgba(242, 233, 220, .16); border: 1px solid rgba(242, 233, 220, .3); color: var(--sn-beige); }
.sn-legend h4 b { background: var(--sn-beige); color: var(--sn-green); }
.sn-legend ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.sn-legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.sn-legend li span, .sn-legend li b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.sn-legend li span { background: rgba(242, 233, 220, .16); border: 1px solid rgba(242, 233, 220, .3); color: var(--sn-beige); }
.sn-legend li b { background: var(--sn-beige); color: var(--sn-green); }
.sn-legend li small { font-size: 11.5px; color: rgba(242, 233, 220, .5); margin-left: 2px; }
.sn-legend__ext { margin-top: 28px; }
.sn-legend__col > ol + .sn-legend__ext { margin-top: 28px; }

/* ============================================================
   LOUNGE CATALOG (beige)
   ============================================================ */
.sn-catalog { background: var(--sn-beige); padding: clamp(80px, 12vh, 140px) 0; }
.sn-catalog__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sn-catalog__group h3 { display: flex; align-items: baseline; gap: 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--sn-ink); padding-bottom: 16px; border-bottom: 1px solid var(--sn-green); margin-bottom: 6px; }
.sn-catalog__group h3 em { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 26px; color: var(--sn-green); }
.sn-cat li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--sn-line); align-items: baseline; }
.sn-cat b { font-size: 15.5px; font-weight: 700; color: var(--sn-ink); letter-spacing: -0.01em; }
.sn-cat span { font-size: 13.5px; color: var(--sn-muted); line-height: 1.6; }
.sn-catalog__group--recover { position: sticky; top: calc(var(--header-h) + 30px); }
.sn-catalog__obj { margin: 36px 0 0; display: flex; justify-content: flex-end; }
.sn-catalog__obj img { width: min(72%, 320px); height: auto; filter: drop-shadow(0 40px 60px rgba(29, 60, 52, .3)); }

/* ============================================================
   CARE MODELS (white)
   ============================================================ */
.sn-models { background: #fff; padding: clamp(80px, 12vh, 140px) 0; }
.sn-model-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sn-model { position: relative; border: 1px solid var(--sn-line); border-radius: 18px; padding: 28px 26px 30px; background: var(--sn-sand); display: flex; flex-direction: column; min-height: 300px; transition: transform .5s var(--ease), box-shadow .5s, border-color .4s; }
.sn-model:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(29, 60, 52, .4); border-color: rgba(29, 60, 52, .35); }
.sn-model em { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 16px; color: var(--sn-green); letter-spacing: .02em; }
.sn-model h3 { margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.025em; color: var(--sn-ink); }
.sn-model q { display: block; margin-top: 18px; font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--sn-green); quotes: "\201C" "\201D"; }
.sn-model p { margin-top: auto; padding-top: 18px; font-size: 13.5px; line-height: 1.7; color: var(--sn-muted); }
.sn-model--custom { background: var(--sn-green); border-color: var(--sn-green); color: #fff; }
.sn-model--custom em { color: var(--sn-beige); }
.sn-model--custom h3 { color: #fff; }
.sn-model--custom p { color: rgba(242, 233, 220, .75); margin-top: 14px; padding-top: 0; }
.sn-model--custom .sn-btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   CORE VALUES (sand)
   ============================================================ */
.sn-values { padding: clamp(80px, 12vh, 140px) 0; }
.sn-value-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sn-green); }
.sn-value-list li { padding: 28px 22px 32px 0; border-right: 1px solid var(--sn-line); margin-right: 22px; }
.sn-value-list li:last-child { border-right: 0; margin-right: 0; }
.sn-value-list span { font-family: var(--sn-serif); font-style: italic; font-weight: 500; font-size: 15px; letter-spacing: .1em; color: var(--sn-green); }
.sn-value-list b { display: block; margin-top: 18px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--sn-ink); }
.sn-value-list p { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--sn-muted); }

/* ============================================================
   CTA (green)
   ============================================================ */
.sn-cta { background: linear-gradient(180deg, var(--sn-green) 0%, var(--sn-deep) 100%); color: #fff; padding: clamp(90px, 14vh, 160px) 0; overflow: hidden; text-align: center; }
.sn-cta__mark { position: absolute; left: 50%; top: 50%; width: clamp(520px, 70vw, 1100px); transform: translate(-50%, -50%) rotate(-8deg); opacity: .06; filter: brightness(0) invert(1); pointer-events: none; }
.sn-cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.sn-cta__logo { height: clamp(110px, 14vw, 170px); width: auto; }
.sn-cta__title { font-size: clamp(34px, 5vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: #fff; }
.sn-cta .sn-hero__actions { margin-top: 4px; justify-content: center; }
.sn-cta__info { font-size: 12.5px; color: rgba(242, 233, 220, .5); letter-spacing: .01em; margin-top: 10px; }

/* header on the dark hero: keep the site header legible */
.theme-sanvel .header-cta { background: var(--sn-beige); color: var(--sn-green); }
.theme-sanvel .header-cta:hover { background: #fff; color: var(--sn-green); }
.theme-sanvel .site-header.is-scrolled .header-cta { background: var(--sn-green); color: #fff; }
.theme-sanvel ::selection { background: var(--sn-green); color: var(--sn-beige); }
.theme-sanvel .to-top { background: var(--sn-green); color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .sn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-steps li:nth-child(2) { border-right: 0; margin-right: 0; }
  .sn-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-value-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sn-value-list li:nth-child(3) { border-right: 0; margin-right: 0; }
  .sn-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-fn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sn-hero__grid { grid-template-columns: 1fr; padding-top: calc(var(--header-h) + 5vh); }
  .sn-hero__visual { max-width: 420px; margin: 8px auto 0; }
  .sn-hero__logo { height: 46px; margin-bottom: 26px; }
  .sn-head--row, .sn-story__grid, .sn-legend, .sn-catalog__grid, .sn-flag, .sn-flag--rev { grid-template-columns: 1fr; }
  .sn-flag--rev { direction: ltr; }
  .sn-loop { grid-template-columns: 1fr; gap: 14px; }
  .sn-loop__link { width: 1px; height: 28px; justify-self: center; }
  .sn-loop__link::after { top: auto; bottom: -1px; right: -3px; transform: rotate(135deg); }
  .sn-catalog__group--recover { position: static; }
  .sn-catalog__obj { justify-content: center; }
}
@media (max-width: 640px) {
  .sn-steps, .sn-pillar-grid, .sn-model-grid, .sn-products, .sn-fn, .sn-legend ol { grid-template-columns: 1fr; }
  .sn-steps li, .sn-value-list li { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--sn-line); }
  .sn-value-list { grid-template-columns: 1fr; border-top: 0; }
  .sn-model { min-height: 0; }
  .sn-eq__term b { font-size: 40px; }
  .sn-tick { padding: 0 22px; }
  .sn-tick::after { margin-left: 22px; }
  .sn-cat li { grid-template-columns: 1fr; gap: 4px; }
}