/* UNFOLD — landing draft styles */
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/CormorantGaramond-VF.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/CormorantGaramond-Italic-VF.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
/* Montserrat (SIL OFL 1.1, see assets/fonts/Montserrat-OFL.txt): self-hosted, subset Latin + Turkish, weights 200–500. Used for the hero + nav only (wide geometric caps of the client reference). */
@font-face { font-family: "Montserrat"; src: url("assets/fonts/Montserrat-VF.woff2") format("woff2"); font-weight: 200 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-VF.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --cream: #F7F4EF;
  --cream-2: #F5EFE6;
  --sand: #EEE6DA;
  --ink: #2C2C2C;
  --ink-2: #5C5750;
  --ink-3: #8A847B;
  --line: rgba(44, 44, 44, .16);
  --dark: #1B1713;
  --dark-2: #231E19;
  --light: #F7F4EF;
  --light-2: rgba(247, 244, 239, .72);
  --light-line: rgba(247, 244, 239, .22);
  --slate: #5B7A8C;
  --terra: #C4A484;
  --d1: #C46A4A; --d2: #7F9B7A; --d3: #D9A84E; --d4: #7D8FA6;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --geo: "Montserrat", "Inter", system-ui, sans-serif;

  --pad-x: clamp(24px, 5.6vw, 80px);
  --section-y: clamp(96px, 11vw, 168px);
  --maxw: 1280px;
  --gap: clamp(16px, 2vw, 32px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0;
}
[hidden], .is-hidden { display: none !important; }
img { display: block; max-width: 100%; }
section[id] { scroll-margin-top: 56px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--terra); color: var(--dark); }

/* film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.container { width: 100%; max-width: calc(var(--maxw) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: var(--light); padding: 10px 16px; border-radius: 99px; font-size: 14px; }
.skip:focus { top: 16px; }
:focus-visible { outline: 1.5px solid var(--slate); outline-offset: 4px; border-radius: 4px; }

/* ---------- type ---------- */
.display {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.012em;
  font-size: clamp(50px, 7vw, 104px); line-height: .98;
}
.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.01em; }
.lead { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.14; letter-spacing: -.005em; }
.body-lg { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: var(--ink-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: none; color: var(--ink-2);
}
.eyebrow__num { color: var(--ink-3); letter-spacing: .12em; padding-right: 14px; border-right: 1px solid var(--line); }
.eyebrow--light { color: var(--light-2); }
.eyebrow--light .eyebrow__num { color: rgba(247,244,239,.5); border-color: var(--light-line); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--1 { background: var(--d1); } .dot--2 { background: var(--d2); } .dot--3 { background: var(--d3); } .dot--4 { background: var(--d4); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid currentColor; font-size: 15px; font-weight: 450; letter-spacing: .01em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.pill .arrow { transition: transform .35s var(--ease); }
.pill:hover .arrow { transform: translateX(3px); }
.pill--light { color: var(--light); border-color: rgba(247,244,239,.7); }
.pill--light:hover { background: var(--light); color: var(--ink); border-color: var(--light); }
.pill--ink { color: var(--ink); border-color: var(--ink); }
.pill--ink:hover { background: var(--ink); color: var(--light); }
.pill--nav { height: 42px; padding: 0 22px; font-size: 14px; border-color: rgba(247,244,239,.6); }
.pill--nav:hover { background: var(--light); color: var(--ink); }
.textlink { font-size: 15px; letter-spacing: .01em; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.textlink--light { color: var(--light-2); border-color: rgba(247,244,239,.35); transition: color .3s, border-color .3s; }
.textlink--light:hover { color: var(--light); border-color: var(--light); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--light); font-family: var(--geo); transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: clamp(88px, 11.3svh, 116px); transition: height .45s var(--ease); }
.brand { display: inline-flex; align-items: center; gap: 16px; }
.brand__mark { width: 32px; height: auto; }
.brand__word { font-size: 15px; font-weight: 400; letter-spacing: .42em; margin-right: -.42em; }
/* hero2: no logo over the hero; a minimal wordmark (back to top) appears only in the solid / menu-open nav */
.nav .brand { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.nav.is-solid .brand, .nav.menu-open .brand { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s; }
.nav .brand__word { font-size: 13.5px; font-weight: 400; letter-spacing: .5em; margin-right: -.5em; }
.nav__links { display: flex; gap: 34px; margin-left: auto; margin-right: 46px; }
.nav__links a { font-size: 14px; font-weight: 380; letter-spacing: .06em; opacity: .92; transition: opacity .3s; }
.nav__links a:hover { opacity: 1; }
.nav__right { display: flex; align-items: center; gap: 44px; }
.lang { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 400; letter-spacing: .14em; padding-left: 26px; border-left: 1px solid rgba(247,244,239,.42); height: 26px; }
.lang__btn { opacity: .6; transition: opacity .3s; letter-spacing: .14em; }
.lang__btn[aria-pressed="true"] { opacity: 1; }
.lang__btn:hover { opacity: .9; }
.lang__sep { opacity: .5; }
.nav__menu { display: none; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; }
.pill--nav { font-family: var(--geo); height: 52px; padding: 0 38px; font-size: 14px; font-weight: 400; letter-spacing: .04em; border-color: rgba(247,244,239,.78); }

.nav.is-solid { background: rgba(247, 244, 239, .9); color: var(--ink); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav.is-solid .nav__inner { height: 76px; }
.nav.is-solid .lang { border-color: var(--line); }
.nav.is-solid .pill--nav { height: 42px; border-color: var(--ink); }
.nav.is-solid .pill--nav:hover { background: var(--ink); color: var(--light); }

.mobile-menu { display: none; }

/* ---------- hero (hero2: client reference) ----------
   --u = one pixel of the 1024px-wide reference, i.e. the background's scale on screen (object-fit: cover of a 3:2 image),
   capped by height so the brand block always fits. All brand-block sizes are expressed in --u so they sit on the wall
   exactly as in the reference. */
.hero {
  --u: min(max(.09766vw, .14641svh), .17857svh);
  --wall: 48.2%;
  position: relative; height: 100svh; min-height: 640px; color: #fff; background: #1D1712;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate;
  font-family: var(--geo);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; transform-origin: 66% 60%; }
.hero__glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .5;
  background: radial-gradient(60% 55% at 58% 62%, rgba(255, 214, 168, .55) 0%, rgba(255, 214, 168, 0) 70%); }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,11,8,.38) 0, rgba(14,11,8,0) 150px),
    linear-gradient(0deg, rgba(14,11,8,.55) 0%, rgba(14,11,8,.22) 20%, rgba(14,11,8,0) 38%),
    linear-gradient(90deg, rgba(14,11,8,.16) 0%, rgba(14,11,8,0) 46%);
}

.hero__brand {
  position: absolute; left: 0; top: 0; width: var(--wall); height: 79.6%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hero__mark { width: calc(90 * var(--u)); height: calc(90 * var(--u)); color: #FBF8F3; margin-top: calc(10 * var(--u)); overflow: visible; }
.hero__word {
  --ls: .35em;
  margin-top: calc(30 * var(--u));
  font-family: var(--geo); font-weight: 260; font-size: calc(42 * var(--u)); line-height: 1;
  letter-spacing: var(--ls); text-indent: var(--ls); /* indent balances the trailing tracking so the word stays optically centred */
  white-space: nowrap;
}
.hero__tag {
  margin-top: calc(29 * var(--u));
  font-size: calc(10.4 * var(--u)); font-weight: 400; line-height: 1.2;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: rgba(255,255,255,.92);
}
/* free20: Sina's tagline is longer than the reference's two-word line, so it is set as a quiet serif italic in light cream
   (one line on desktop, at most two balanced lines on mobile) instead of the tracked caps. */
.hero__tag.hero__tag--serif {
  margin-top: calc(24 * var(--u));
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(23 * var(--u)); line-height: 1.25;
  letter-spacing: .015em; text-indent: 0; text-transform: none; color: #F1E9DD; white-space: nowrap;
}

.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: clamp(40px, 11svh, 116px); }
.hero__phases { display: flex; }
.hero__phases li { width: min(calc(158 * var(--u)), 15.5vw, 236px); }
.hero__phases li:last-child { width: auto; }
.hero__phases a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(22 * var(--u)); row-gap: 15px; padding-right: calc(36 * var(--u)); }
.hero__phases li:last-child a { padding-right: 0; grid-template-columns: auto calc(18 * var(--u)); }
.hero__num { font-size: 13px; font-weight: 400; letter-spacing: .14em; color: rgba(255,255,255,.88); line-height: 1; transition: color .4s var(--ease); }
.hero__line { height: 1px; background: rgba(255,255,255,.5); transform-origin: left center; transition: transform .6s var(--ease), background .4s var(--ease); }
.hero__label { grid-column: 1 / -1; font-size: 11.5px; font-weight: 400; letter-spacing: .26em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.hero__phases a:hover .hero__line, .hero__phases a:focus-visible .hero__line { background: #fff; transform: scaleX(1.12); }
.hero__phases a:hover .hero__label, .hero__phases a:focus-visible .hero__label { transform: translateX(3px); }
.hero__phases a:focus-visible, .hero__cta:focus-visible { outline-color: rgba(255,255,255,.8); outline-offset: 8px; }

.hero__cta { display: inline-flex; align-items: center; gap: calc(17 * var(--u)); margin-bottom: calc(-20 * var(--u) + 6px); white-space: nowrap; }
.hero__ring {
  position: relative; display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 46px; min-height: 46px;
  border: 1px solid rgba(255,255,255,.82); border-radius: 50%; overflow: hidden;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.hero__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .5s var(--ease); }
.hero__ring svg { position: relative; width: 24px; height: 24px; transition: transform .5s var(--ease); }
.hero__cta-txt { font-size: 11.5px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; line-height: 1; }
.hero__cta:hover .hero__ring, .hero__cta:focus-visible .hero__ring { color: var(--ink); border-color: #fff; }
.hero__cta:hover .hero__ring::before, .hero__cta:focus-visible .hero__ring::before { transform: scale(1); }
.hero__cta:hover .hero__ring svg, .hero__cta:focus-visible .hero__ring svg { transform: translateX(3px); }

/* motion: slow entrance, very slow Ken Burns + breathing light. Off for ?static=1 and prefers-reduced-motion. */
@keyframes heroKen { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes heroBreathe { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@keyframes heroFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes heroOpen { from { opacity: 0; letter-spacing: calc(var(--ls) + .3em); text-indent: calc(var(--ls) + .3em); } to { opacity: 1; letter-spacing: var(--ls); text-indent: var(--ls); } }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.static) .hero__img { animation: heroKen 22s ease-in-out 1.2s infinite alternate both; }
  html:not(.static) .hero__glow { animation: heroBreathe 14s ease-in-out infinite; }
  html:not(.static) .hero__media { animation: heroIn 1.6s ease both; }
  html:not(.static) .hero__mark { animation: heroFade 1.8s var(--ease) .35s both; }
  html:not(.static) .hero__word { animation: heroOpen 2.6s cubic-bezier(.16,.7,.2,1) .6s both; }
  html:not(.static) .hero__tag { animation: heroFade 1.6s var(--ease) 1.5s both; }
  html:not(.static) .hero__phases li { animation: heroFade 1.2s var(--ease) both; }
  html:not(.static) .hero__phases li:nth-child(1) { animation-delay: 1.8s; }
  html:not(.static) .hero__phases li:nth-child(2) { animation-delay: 1.92s; }
  html:not(.static) .hero__phases li:nth-child(3) { animation-delay: 2.04s; }
  html:not(.static) .hero__phases li:nth-child(4) { animation-delay: 2.16s; }
  html:not(.static) .hero__cta { animation: heroFade 1.2s var(--ease) 2.3s both; }
  html:not(.static) .nav__inner { animation: heroIn 1.4s ease 1s both; }
}

@media (max-width: 1100px) and (min-width: 961px) {
  .hero__phases li { width: min(calc(150 * var(--u)), 14.5vw); }
  .hero__label, .hero__cta-txt { letter-spacing: .2em; }
}
/* tablet + mobile: centred brand over a darkening gradient, doorway + light beam kept in frame */
@media (max-width: 960px) {
  .hero { --u: min(.16vw, max(.13svh, .78px)); min-height: 600px; }
  .hero__img { object-position: 50% 50%; transform-origin: 60% 60%; }
  .hero__shade { background:
    radial-gradient(70% 34% at 50% 44%, rgba(14,11,8,.42) 0%, rgba(14,11,8,0) 100%),
    linear-gradient(180deg, rgba(14,11,8,.5) 0%, rgba(14,11,8,.4) 30%, rgba(14,11,8,.3) 52%, rgba(14,11,8,.62) 76%, rgba(14,11,8,.88) 100%); }
  .lang { border-left: 0; padding-left: 0; }
  .pill--nav { height: 44px; padding: 0 24px; }
  .hero__brand { width: 100%; height: 72%; padding: 80px 24px 0; }
  .hero__mark { width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
  .hero__word { font-size: calc(46 * var(--u)); margin-top: calc(30 * var(--u)); }
  .hero__tag { font-size: max(11px, calc(11 * var(--u))); margin-top: calc(26 * var(--u)); }
  .hero__tag.hero__tag--serif { font-size: max(18px, calc(23 * var(--u))); margin-top: calc(22 * var(--u)); white-space: normal; text-wrap: balance; max-width: 16em; }
  .hero__foot { flex-direction: column; align-items: stretch; gap: 30px; padding-bottom: 36px; }
  .hero__phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .hero__phases li, .hero__phases li:last-child { width: auto; }
  .hero__phases a, .hero__phases li:last-child a { grid-template-columns: auto 1fr; padding-right: 0; column-gap: 14px; }
  .hero__cta { margin-bottom: 0; align-self: flex-start; }
}
@media (max-width: 640px) {
  .hero { --u: min(.21vw, max(.12svh, .78px)); }
  .hero__brand { height: 66%; padding-top: 64px; }
  .hero__word { font-size: calc(48 * var(--u)); --ls: .34em; }
  .hero__phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; column-gap: 28px; }
  .hero__num { font-size: 11.5px; }
  .hero__label { font-size: 10.5px; letter-spacing: .2em; }
  .hero__phases a { row-gap: 10px; }
  .hero__cta-txt { font-size: 11px; letter-spacing: .24em; }
  .hero__foot { gap: 26px; padding-bottom: 28px; }
}
@media (max-height: 700px) and (min-width: 961px) {
  .hero__foot { padding-bottom: 40px; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section-head { row-gap: 0; margin-bottom: clamp(56px, 6vw, 88px); align-items: end; }
.section-head .eyebrow { grid-column: 1 / -1; margin-bottom: 28px; }
.section-head .h2 { grid-column: 1 / span 6; }
.section-head .section-head__intro { grid-column: 8 / span 5; }
.section-head__intro { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); line-height: 1.65; max-width: 30em; }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal, .static .reveal { opacity: 1; transform: none; transition: none; }
.static body { position: relative; }
.static body::after { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- intro ---------- */
.intro { background: var(--cream); }
.intro__aside { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 48px; }
.intro__strip { width: min(150px, 100%); aspect-ratio: 214 / 792; overflow: hidden; }
.intro__strip img { width: 100%; height: 100%; object-fit: cover; }
.intro__main { grid-column: 5 / span 8; padding-top: 4px; }
.intro .lead { max-width: 15.5em; }
.intro .body-lg { margin-top: 36px; max-width: 34em; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(64px, 7vw, 104px); }
.principles li { border-top: 1px solid var(--line); padding-top: 24px; }
.principles h3, .trust__list h3, .step h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.2; letter-spacing: -.003em; }
.principles p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 22em; }

/* ---------- journey ---------- */
.journey { background: var(--sand); }
.timeline { display: flex; align-items: center; gap: 24px; margin-bottom: 56px; font-size: 12px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; }
.timeline__track { position: relative; flex: 1; height: 1px; background: var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.timeline__track .dot { position: relative; top: -3px; width: 7px; height: 7px; box-shadow: 0 0 0 6px var(--sand); }
/* ---------- how ---------- */
.how { background: var(--cream); }
.how__text { grid-column: 1 / span 5; align-self: center; }
.how__text .eyebrow { margin-bottom: 28px; }
.how__text .section-head__intro { margin-top: 24px; }
.steps { margin-top: 56px; }
.step { display: grid; grid-template-columns: 64px 1fr; padding: 26px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--slate); line-height: 1.3; }
.step p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 28em; }
/* ---------- how: problems + journey head ---------- */
.problems__label { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2vw, 30px); margin-bottom: 28px; }
.problems { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap); margin-bottom: clamp(80px, 9vw, 128px); }
.problems li { border-top: 1px solid var(--line); padding-top: 20px; }
.problems__area { display: block; font-size: 11px; letter-spacing: .2em; font-weight: 500; color: var(--slate); }
.problems p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 16em; }
.journey__head { align-items: end; margin-bottom: 36px; }
.journey__title { grid-column: 1 / span 7; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; }
.journey__resume { grid-column: 9 / span 4; justify-self: end; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }

/* ---------- program (timeline composition) ---------- */
.program { background: var(--cream-2); overflow: hidden; isolation: isolate; }
.program > .container { position: relative; z-index: 1; }
.program__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* a soft shaft of light, narrow at top-left and widening to bottom-right (echoes the beam in the mark) */
.program__beam { position: absolute; inset: -6% -4%; filter: blur(42px); opacity: .95; }
.program__beam::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(14% 0, 30% 0, 100% 58%, 100% 100%, 62% 100%);
  background: linear-gradient(128deg, rgba(255,253,249,.0) 8%, rgba(255,253,249,.85) 34%, rgba(255,251,244,.55) 62%, rgba(255,251,244,0) 96%);
}
.program__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(74,56,40,.085), rgba(74,56,40,0) 70%),
    radial-gradient(45% 40% at 100% 0%, rgba(74,56,40,.06), rgba(74,56,40,0) 70%);
}

/* ---------- trust ---------- */
.trust { background: var(--dark); color: var(--light); }
.trust__img { grid-column: 1 / span 6; aspect-ratio: 1408 / 1290; overflow: hidden; align-self: center; }
.trust__img img { width: 100%; height: 100%; object-fit: cover; }
.trust__text { grid-column: 8 / span 5; align-self: center; }
.trust__text .eyebrow { margin-bottom: 28px; }
.trust .body-lg { margin-top: 28px; color: var(--light-2); max-width: 30em; }
.trust__list { margin-top: 48px; }
.trust__list li { padding: 22px 0; border-top: 1px solid var(--light-line); display: grid; grid-template-columns: 11em 1fr; gap: 24px; align-items: baseline; }
.trust__list li:last-child { border-bottom: 1px solid var(--light-line); }
.trust__list h3 { font-size: 23px; }
.trust__list p { font-size: 15px; line-height: 1.6; color: var(--light-2); }

/* ---------- beta ---------- */
.beta { background: var(--cream-2); text-align: center; }
.beta__inner { display: flex; flex-direction: column; align-items: center; }
.beta__dots { display: flex; gap: 10px; margin-bottom: 36px; }
.beta .section-head__intro { margin-top: 22px; text-wrap: balance; }
/* free20 (DRAFT copy): small tracked-caps badge between the dots and the heading; fades out with the heading block after submit */
.beta__dots + .beta__badge { margin-top: -10px; }
.beta__badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 9px 18px 9px 16px;
  border: 1px solid rgba(44,44,44,.22); border-radius: 999px; background: rgba(255,255,255,.35);
  font-family: var(--geo); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
}
.beta__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--d3); flex: none; }
.beta__free { font-weight: 500; color: var(--ink); }
/* beta form v2 (2026-10-07): labelled underline fields, 2 columns on desktop, 1 on mobile */
.beta__stage { width: min(760px, 100%); transition: height .6s var(--ease); }
.beta__stage.is-folding { overflow: hidden; }
.beta__form { margin-top: 56px; width: 100%; text-align: left; }
.beta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); row-gap: 0; }
.beta__grid > .field:nth-child(n+3):not(.field--other) { margin-top: 34px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field__label { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); line-height: 1.4; }
.field__opt { font-weight: 400; color: var(--ink-3); }
.field__input {
  width: 100%; height: 46px; margin: 4px 0 0; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(44,44,44,.3); border-radius: 0;
  background: transparent; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: var(--ink-3); opacity: .8; }
.field__input:hover { border-bottom-color: rgba(44,44,44,.55); }
.field__input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field__input[aria-invalid="true"] { border-bottom-color: var(--d1); box-shadow: 0 1px 0 0 rgba(196,106,74,.5); }
.field__select { position: relative; }
.field__select select { padding-right: 30px; cursor: pointer; text-overflow: ellipsis; }
.field__select select:invalid { color: var(--ink-3); }
.field__select option { color: var(--ink); background: var(--cream); }
.field__chev { position: absolute; right: 4px; top: calc(50% + 2px); width: 13px; height: 8px; margin-top: -4px; color: var(--ink-2); pointer-events: none; transition: transform .3s var(--ease); }
.field__select select:focus + .field__chev { color: var(--ink); }
.field__err { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--d1); }
/* "Diğer" → reveal a text field under the select (right column) */
.beta__grid > .field--other { grid-column: 2; align-self: start; display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; visibility: hidden;
  transition: grid-template-rows .45s var(--ease), margin-top .45s var(--ease), opacity .35s var(--ease), visibility 0s linear .45s; }
.beta__grid > .field--other.is-open { grid-template-rows: 1fr; margin-top: 16px; opacity: 1; visibility: visible; transition-delay: 0s; }
.field--other__in { min-height: 0; overflow: hidden; padding-bottom: 2px; }
.field--other .field__input { margin-top: 0; }
.beta__checks { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.beta__consent { display: flex; align-items: flex-start; gap: 12px; text-align: left; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.beta__consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid rgba(44,44,44,.45); border-radius: 4px;
  background: rgba(255,255,255,.4); cursor: pointer; display: grid; place-items: center; transition: background .25s, border-color .25s;
}
.beta__consent input::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid var(--light); border-bottom: 1.5px solid var(--light); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.beta__consent input:checked { background: var(--ink); border-color: var(--ink); }
.beta__consent input:checked::after { opacity: 1; }
.beta__consent input:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.beta__consent input[aria-invalid="true"] { border-color: var(--d1); }
.beta__consent label { cursor: pointer; text-wrap: pretty; }
.beta__consent a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(44,44,44,.35); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.beta__consent a:hover { text-decoration-color: var(--ink); }
.field__err--check { margin: -8px 0 0 28px; }
.beta__actions { margin-top: 40px; display: flex; justify-content: center; }
.beta__actions .pill { height: 52px; padding: 0 34px; }
.beta__actions .pill:disabled { opacity: .5; cursor: progress; }
.beta__note { margin-top: 28px; font-size: 13px; color: var(--ink-3); }
.beta__error { margin-top: 16px; font-size: 13px; color: var(--d1); text-align: center; }
/* fold away on success */
.beta__stage.is-folding .beta__form.reveal {
  opacity: 0; transform: translateY(-14px) scaleY(.97); transform-origin: 50% 0; filter: blur(1.5px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease); transition-delay: 0s !important;
}
/* thanks2: heading, eyebrow dots, intro and notes fade out together with the form, then only the thank-you remains */
.beta .is-leaving { opacity: 0 !important; transform: translateY(-8px) !important; transition: opacity .35s var(--ease), transform .35s var(--ease) !important; transition-delay: 0s !important; }
.beta__inner.is-collapsing { overflow: hidden; transition: height .6s var(--ease); }
.beta--done .beta__stage { width: 100%; }
.beta--done .thx { padding-top: 0; }

/* personalized thank-you — thin ring draws, four phase dots arrive, the name fades up letter by letter */
.thx { padding-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.thx__mark { width: 92px; height: 92px; overflow: visible; }
.thx__ring { fill: none; stroke: var(--slate); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.thx__dot { transform-box: fill-box; transform-origin: center; }
.thx__dot--1 { fill: var(--d1); } .thx__dot--2 { fill: var(--d2); } .thx__dot--3 { fill: var(--d3); } .thx__dot--4 { fill: var(--d4); }
.thx__title { margin-top: 30px; font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.005em; color: var(--ink); }
.thx__title:focus { outline: none; }
.thx__w { display: inline-block; white-space: nowrap; }
.thx__ch { display: inline-block; }
.thx__line { margin-top: 14px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--ink-2); max-width: 30em; text-wrap: balance; }
.thx.is-on .thx__ring { animation: thxDraw 1.15s cubic-bezier(.4, .1, .3, 1) .05s both; }
.thx.is-on .thx__dot { animation: thxDot .55s var(--ease) both; }
.thx.is-on .thx__dot--1 { animation-delay: .12s; } .thx.is-on .thx__dot--2 { animation-delay: .4s; }
.thx.is-on .thx__dot--3 { animation-delay: .66s; } .thx.is-on .thx__dot--4 { animation-delay: .9s; }
.thx.is-on .thx__ch { animation: thxCh .55s var(--ease) both; }
.thx.is-on .thx__line { animation: thxUp .7s var(--ease) both; }
@keyframes thxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes thxDot { from { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
@keyframes thxCh { from { opacity: 0; transform: translateY(.32em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes thxUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.thx--still .thx__ring, .thx--still .thx__dot, .thx--still .thx__ch, .thx--still .thx__line { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .thx__ring, .thx__dot, .thx__ch, .thx__line { animation: none !important; }
  .beta__stage, .field--other, .beta__stage.is-folding .beta__form.reveal, .beta .is-leaving, .beta__inner.is-collapsing { transition: none !important; }
}

.pricing { margin-top: 48px; width: min(760px, 100%); text-align: left; }
.pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.plan { border-top: 1px solid var(--ink); padding-top: 22px; }
.plan__name { font-family: var(--serif); font-weight: 500; font-size: 26px; }
.plan__rows { margin: 14px 0 0; }
.plan__rows div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.plan__rows dd { margin: 0; font-weight: 500; }
.plan__note { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.pricing__vat { margin-top: 22px; font-size: 13px; color: var(--ink-3); }

/* ---------- faq ---------- */
.faq { background: var(--cream); }
.faq__head { grid-column: 1 / span 4; }
.faq__head .eyebrow { margin-bottom: 28px; }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 28px 0; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.25;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--ink), var(--ink)) center / 14px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 14px no-repeat; transition: transform .35s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 64px 30px 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 38em; }

/* ---------- footer ---------- */
.footer { background: var(--dark); color: var(--light); padding: 96px 0 40px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 56px; border-bottom: 1px solid var(--light-line); }
.footer__tag { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--light); text-align: right; }
.footer__mid { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 32px; font-size: 14px; }
.footer__links a { color: var(--light-2); transition: color .3s; }
.footer__links a:hover { color: var(--light); }
.lang--footer { border: 0; padding: 0; }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; color: rgba(247,244,239,.5); padding-top: 24px; border-top: 1px solid var(--light-line); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 28px; margin-right: 28px; }
  .trust__list li { grid-template-columns: 1fr; gap: 6px; }
  .problems { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 36px; }
}
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-block; }
  .mobile-menu:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px; padding: 8px var(--pad-x) 28px; background: var(--cream); color: var(--ink); box-shadow: 0 1px 0 var(--line);
  }
  .mobile-menu a { font-family: var(--serif); font-size: 28px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu .pill { font-family: var(--sans); font-size: 15px; margin-top: 20px; align-self: flex-start; border-bottom: 1px solid var(--ink); padding: 0 26px; }
  .nav.menu-open { background: var(--cream); color: var(--ink); }
  .nav.menu-open .lang { border-color: var(--line); }
  .section-head .h2, .section-head .section-head__intro { grid-column: 1 / -1; }
  .section-head .section-head__intro { margin-top: 20px; }
  .intro__aside { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
  .intro__strip { width: 120px; }
  .intro__main { grid-column: 1 / -1; }
  .timeline__track { grid-template-columns: repeat(4, 1fr); }
  .how__text, .how__visual { grid-column: 1 / -1; }
  .trust__img, .trust__text { grid-column: 1 / -1; }
  .trust__text { margin-top: 56px; }
  .faq__head, .faq__list { grid-column: 1 / -1; }
  .faq__list { margin-top: 40px; }
  .journey__title, .journey__resume { grid-column: 1 / -1; justify-self: start; }
  .journey__resume { margin-top: 16px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav__inner { height: 72px; }
  .nav.is-solid .nav__inner { height: 64px; }
  .pill--nav { display: none; }
  .nav__right { gap: 18px; }
  .lang { padding-left: 0; }
  .brand { gap: 12px; } .brand__mark { width: 26px; } .brand__word { font-size: 13px; letter-spacing: .36em; margin-right: -.36em; }
  .nav .brand__word { font-size: 12.5px; letter-spacing: .42em; margin-right: -.42em; }
  .principles { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .principles li { padding: 22px 0 26px; }
  .timeline { margin-bottom: 32px; gap: 14px; font-size: 11px; }
  .step { grid-template-columns: 48px 1fr; }
  .trust__list li { padding: 18px 0; }
  .beta__form { margin-top: 44px; }
  .beta__grid { grid-template-columns: minmax(0, 1fr); }
  .beta__grid > .field:nth-child(n+2):not(.field--other) { margin-top: 28px; }
  .beta__grid > .field--other { grid-column: 1; margin-top: 0; }
  .beta__grid > .field--other.is-open { margin-top: 12px; }
  .beta__checks { margin-top: 34px; }
  .beta__actions { margin-top: 34px; }
  .beta__actions .pill { width: 100%; justify-content: center; }
  .thx { padding-top: 40px; }
  .beta--done .thx { padding-top: 0; }
  .lang.lang--footer { padding-left: 0; }
  .intro__strip { width: 92px; }
  .qa summary { padding: 22px 0; }
  .qa p { padding-right: 0; }
  .footer { padding-top: 72px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__tag { text-align: left; }
  .footer__mid { flex-direction: column; align-items: flex-start; }
  .footer__links { gap: 14px 24px; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .problems { grid-template-columns: 1fr; row-gap: 0; margin-bottom: 72px; }
  .problems li { padding: 18px 0 20px; }
  .problems p { max-width: none; }
  .pricing__grid { grid-template-columns: 1fr; }
}

/* Sina fb1 (2026-10-06): 01 lead is the single word UNFOLD; 02 head has no intro paragraph */
.lead--word { font-size: clamp(72px, 9.6vw, 148px); line-height: .86; letter-spacing: .015em; margin-left: -.04em; }
.intro .lead.lead--word { max-width: none; }
.intro .lead--word + .body-lg { margin-top: clamp(32px, 3.4vw, 48px); font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.3; color: var(--ink); max-width: 23em; text-wrap: pretty; }
.section-head--solo .h2--solo { grid-column: 1 / span 10; font-size: clamp(48px, 6vw, 92px); line-height: .98; }
.h2--solo em { display: inline-block; font-style: italic; color: var(--slate); padding-left: 1.6em; }
@media (max-width: 960px) { .section-head--solo .h2--solo { grid-column: 1 / -1; } }
@media (max-width: 640px) { .h2--solo em { padding-left: .8em; } }

/* =====================================================================
   Sina fb1b (2026-10-06): phase strip (#how), dark BAŞLA visual (#inside),
   three programs side by side (#program)
   ===================================================================== */
.icon { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- #how: 4-phase strip (warm greige panels) ---------- */
.phases { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; box-shadow: 0 30px 60px -48px rgba(74,56,40,.35); }
.phase { position: relative; display: flex; flex-direction: column; padding: 30px clamp(22px, 2.3vw, 36px) clamp(40px, 3.6vw, 56px); background: #E6DFD4; }
.phase--2 { background: #E3DCD0; } .phase--3 { background: #E0D8CC; } .phase--4 { background: #DDD5C8; }
.phase + .phase { box-shadow: inset 1px 0 0 rgba(255,255,255,.42); }
.phase__top { display: flex; align-items: center; gap: 18px; }
.phase__num { font-size: 11.5px; letter-spacing: .12em; color: var(--ink-2); }
.phase__rule { position: relative; flex: 1; height: 1px; background: rgba(44,44,44,.14); }
.phase__rule i { position: absolute; left: 22%; top: -.5px; width: 30%; height: 2px; }
.phase--1 .phase__rule i { background: var(--d1); } .phase--2 .phase__rule i { background: var(--d2); }
.phase--3 .phase__rule i { background: var(--d3); } .phase--4 .phase__rule i { background: var(--d4); }
.phase__icon { width: 34px; height: 34px; margin-top: 46px; }
.phase__title { margin-top: 30px; font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 2.8vw, 42px); line-height: 1.04; letter-spacing: -.01em; }
.phase__q { margin-top: 14px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.25; color: var(--ink); min-height: 2.5em; }
.phase__d { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 20em; }

/* ---------- #inside: dark "BAŞLA" placeholder visual ---------- */
.vis { grid-column: 7 / span 6; position: relative; margin: 0; align-self: stretch; min-height: 760px; overflow: hidden; isolation: isolate; background: #0D0B09; }
.vis__bg { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; object-position: 20% 70%; filter: blur(30px) brightness(.42) saturate(1.2); z-index: -2; }
.vis__glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 46% at 50% 34%, rgba(10,9,8,.86), rgba(10,9,8,0) 100%),
  radial-gradient(48% 30% at 92% 84%, rgba(214,160,104,.30), rgba(214,160,104,0) 100%),
  radial-gradient(40% 50% at 0% 40%, rgba(120,92,66,.22), rgba(120,92,66,0) 100%),
  linear-gradient(0deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 40%); }

/* ---------- #program: three programs side by side ---------- */
.section-head--prog .h2 { grid-column: 1 / span 9; }
.pgx { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--ink); }
.pgx__col { position: relative; display: flex; flex-direction: column; padding: 34px clamp(24px, 2.8vw, 48px) 8px; }
.pgx__col:first-child { padding-left: 0; }
.pgx__col:last-child { padding-right: 0; }
.pgx__col + .pgx__col { border-left: 1px solid var(--line); }
.pgx__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11.5px; letter-spacing: .22em; font-weight: 500; color: var(--ink); }
.pgx__status { display: inline-flex; align-items: center; gap: 10px; color: #5E7A59; letter-spacing: .18em; font-size: 10.5px; }
.pgx__soon { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); letter-spacing: .18em; font-size: 10.5px; }
.pgx__soon::before { content: ""; width: 18px; border-top: 1px dashed rgba(92,87,80,.6); }
.product__pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--d2); flex: none; }
.product__pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--d2); opacity: 0; animation: pgmPulse 3.2s var(--ease) infinite; }
@keyframes pgmPulse { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.pgx__name { margin-top: 44px; font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 4.4vw, 66px); line-height: .98; letter-spacing: -.015em; min-height: 1.96em; text-wrap: balance; }
.pgx__name em { display: block; font-style: italic; color: var(--slate); }
.pgx__col--soon .pgx__eyebrow > span:first-child { color: var(--ink-2); }
.pgx__col--soon .pgx__name { color: var(--ink-2); }
.pgx__desc { margin-top: 22px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 21em; min-height: 4.8em; }
.pgx__col--soon .pgx__desc { color: var(--ink-3); }

/* live column: the four phases as a small vertical journey */
.pgx__path { position: relative; margin-top: 30px; }
.pgx__path::before { content: ""; position: absolute; left: 5px; top: 26px; bottom: 26px; width: 1.5px; transform: translateX(-.25px); background: linear-gradient(180deg, var(--d1), var(--d2) 33%, var(--d3) 66%, var(--d4)); }
.pgx__step { position: relative; display: grid; grid-template-columns: 11px 28px minmax(0,1fr); column-gap: 18px; align-items: center; padding: 13px 0; }
.pgx__node { position: relative; z-index: 1; width: 11px; height: 11px; box-shadow: 0 0 0 4px var(--cream-2); }
.pgx__step:nth-child(1) .pgx__node { box-shadow: 0 0 0 4px var(--cream-2), 0 4px 16px 3px rgba(196,106,74,.3); }
.pgx__step:nth-child(2) .pgx__node { box-shadow: 0 0 0 4px var(--cream-2), 0 4px 16px 3px rgba(127,155,122,.3); }
.pgx__step:nth-child(3) .pgx__node { box-shadow: 0 0 0 4px var(--cream-2), 0 4px 16px 3px rgba(217,168,78,.32); }
.pgx__step:nth-child(4) .pgx__node { box-shadow: 0 0 0 4px var(--cream-2), 0 4px 16px 3px rgba(125,143,166,.32); }
.pgx__icon { width: 26px; height: 26px; }
.pgx__steptag { display: flex; gap: 10px; font-size: 11px; letter-spacing: .2em; font-weight: 500; color: var(--ink); }
.pgx__num { color: var(--ink-3); letter-spacing: .12em; }
.pgx__q { margin-top: 3px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--ink-2); }
.pgx__resume { margin-top: 26px; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--ink); }
.pgx__cta { margin-top: 26px; align-self: flex-start; }

/* coming-soon columns: a faint dashed path hinting their own future journey */
.pgx__future { position: relative; margin-top: 30px; height: 300px; padding-top: 30px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); }
.pgx__future::before { content: ""; position: absolute; left: 5px; top: 36px; bottom: 0; border-left: 1.25px dashed rgba(92,87,80,.45); }
.pgx__future i { position: relative; display: block; width: 11px; height: 11px; border-radius: 50%; border: 1.25px dashed rgba(92,87,80,.55); background: var(--cream-2); margin-bottom: 59px; }

/* along the way */
.along { margin-top: 64px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: var(--gap); padding-top: 30px; border-top: 1px solid var(--line); }
.along__label { font-size: 11px; letter-spacing: .22em; font-weight: 500; color: var(--ink-3); padding-top: 2px; }
.along__feats { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--gap); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.along__feats li::before { content: ""; display: block; width: 16px; height: 1px; margin: 9px 0 14px; background: var(--terra); }

/* motion off: ?static=1, no JS, reduced motion */
.static .product__pulse::after, .static .vis__ring::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .product__pulse::after, .vis__ring::after { animation: none; opacity: 0; } }

/* responsive */
@media (max-width: 1100px) {
  .pgx__col { padding-inline: 24px; }
  .pgx__name { font-size: clamp(38px, 4.2vw, 48px); }
  .along__feats { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 8px; }
}
@media (max-width: 960px) {
  .phases { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .phase + .phase { box-shadow: none; }
  .vis { grid-column: 1 / -1; margin-top: 64px; min-height: 0; aspect-ratio: 4 / 5; }
  .section-head--prog .h2 { grid-column: 1 / -1; }
  .pgx { grid-template-columns: 1fr; border-top: 0; }
  .pgx__col, .pgx__col:first-child, .pgx__col:last-child { padding: 30px 0 48px; border-top: 1px solid var(--line); }
  .pgx__col:first-child { border-top-color: var(--ink); }
  .pgx__col + .pgx__col { border-left: 0; }
  .pgx__name, .pgx__desc { min-height: 0; }
  .pgx__name { margin-top: 28px; font-size: clamp(42px, 9vw, 60px); }
  .pgx__future { height: 120px; padding-bottom: 30px; margin-top: 24px; }
  .pgx__future i:nth-child(n+3) { display: none; }
  .along { grid-template-columns: 1fr; margin-top: 48px; }
  .along__label { margin-bottom: 6px; }
  .along__feats { grid-column: 1; }
}
@media (max-width: 640px) {
  .phases { grid-template-columns: 1fr; margin-inline: calc(var(--pad-x) * -1); }
  .phase { padding: 26px var(--pad-x) 36px; }
  .phase + .phase { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
  .phase__icon { margin-top: 30px; }
  .phase__title { margin-top: 22px; font-size: 36px; }
  .phase__q { min-height: 0; }
  .vis { margin-top: 48px; margin-inline: calc(var(--pad-x) * -1); aspect-ratio: 4 / 5.4; }
  .pgx__q { font-size: 18px; }
  .along__feats { grid-template-columns: 1fr; }
  .along__feats li { display: flex; align-items: center; gap: 14px; padding: 5px 0; }
  .along__feats li::before { margin: 0; flex: none; width: 14px; }
}

/* ---------- #inside interactive panel (Sina fb2, 2026-10-06) ---------- */
.vis { cursor: default; outline-offset: 6px; }
.vis:focus-visible { outline: 1.5px solid var(--slate); border-radius: 0; }
/* soft warm light; JS moves it (lerp) with the cursor or towards the active zone */
.vis__light { position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0; pointer-events: none; transform: translate3d(73%, 30%, 0); will-change: transform; }
.vis__light::before { content: ""; position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(230,176,116,.44), rgba(214,160,104,.2) 45%, rgba(214,160,104,0) 100%); mix-blend-mode: screen; }
.vis:not(.vis--live) .vis__light { left: 73%; top: 30%; transform: none; }

/* vertical dot path, centred; the ring travels to the active dot */
.vis__path { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; --gap: 92px; }
.vis__label { font-size: 11px; letter-spacing: .36em; margin-right: -.36em; font-weight: 500; color: rgba(247,244,239,.72); margin-bottom: 34px; }
.vis__dots { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) - 6px); }
.vis__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--light); opacity: .42; box-shadow: 0 0 10px rgba(247,244,239,.35); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.vis[data-active="1"] .vis__dot:nth-child(1), .vis[data-active="2"] .vis__dot:nth-child(2),
.vis[data-active="3"] .vis__dot:nth-child(3), .vis[data-active="4"] .vis__dot:nth-child(4) { opacity: 1; transform: scale(1.35); box-shadow: 0 0 14px 2px rgba(247,244,239,.55); }
.vis__ring { position: absolute; left: 50%; top: 3px; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(247,244,239,.7);
  transform: translateY(calc(var(--gap) * var(--a, 1))); transition: transform .7s cubic-bezier(.65,.05,.25,1); }
.vis[data-active="1"] .vis__ring { --a: 0; } .vis[data-active="2"] .vis__ring { --a: 1; } .vis[data-active="3"] .vis__ring { --a: 2; } .vis[data-active="4"] .vis__ring { --a: 3; }
.vis__ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(247,244,239,.5); animation: visPulse 5.2s var(--ease) infinite; }
@keyframes visPulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.55); opacity: 0; } }

/* phase texts: one per quadrant */
.vis__phases { position: absolute; inset: 0; pointer-events: none; --px: clamp(28px, 3.2vw, 48px); --py: clamp(32px, 4vw, 56px); }
.vis__ph { position: absolute; width: calc(50% - var(--px) - 44px); color: var(--light); opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .6s var(--ease); }
.vis__ph.is-active { opacity: 1; transform: none; transition-delay: .14s; }
.vis__ph--1 { left: var(--px); top: var(--py); }
.vis__ph--2 { right: var(--px); top: var(--py); text-align: right; }
.vis__ph--3 { left: var(--px); bottom: var(--py); }
.vis__ph--4 { right: var(--px); bottom: var(--py); text-align: right; }
.vis__ph--3, .vis__ph--4 { transform: translateY(-14px); }
.vis__ph--3.is-active, .vis__ph--4.is-active { transform: none; }
.vis__icon { width: 30px; height: 30px; stroke: rgba(247,244,239,.82); display: block; margin-bottom: 22px; }
.vis__ph--2 .vis__icon, .vis__ph--4 .vis__icon { margin-left: auto; }
.vis__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; font-weight: 500; color: rgba(247,244,239,.8);
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(247,244,239,.2); }
.vis__tag .dot { width: 8px; height: 8px; }
.vis__ph--1 .dot { box-shadow: 0 0 0 4px rgba(196,106,74,.2), 0 0 18px 4px rgba(196,106,74,.4); }
.vis__ph--2 .dot { box-shadow: 0 0 0 4px rgba(127,155,122,.2), 0 0 18px 4px rgba(127,155,122,.4); }
.vis__ph--3 .dot { box-shadow: 0 0 0 4px rgba(217,168,78,.2), 0 0 18px 4px rgba(217,168,78,.4); }
.vis__ph--4 .dot { box-shadow: 0 0 0 4px rgba(125,143,166,.22), 0 0 18px 4px rgba(125,143,166,.42); }
.vis__sep { opacity: .55; }
.vis__q { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.04; letter-spacing: -.01em; color: var(--light); text-wrap: balance; }

.static .vis__ring::after { animation: none; opacity: 0; }
.static .vis__ph, .static .vis__ring, .static .vis__dot { transition: none; }
@media (prefers-reduced-motion: reduce) { .vis__ph, .vis__ring, .vis__dot { transition: none !important; } .vis__ring::after { animation: none; opacity: 0; } }

@media (max-width: 640px) {
  .vis__path { --gap: 70px; }
  .vis__label { margin-bottom: 26px; }
  .vis__ring { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .vis__phases { --px: 20px; --py: 26px; }
  .vis__ph { width: calc(50% - 20px - 30px); }
  .vis__icon { width: 24px; height: 24px; margin-bottom: 14px; }
  .vis__tag { font-size: 9.5px; letter-spacing: .16em; gap: 7px; padding-bottom: 10px; margin-bottom: 12px; }
  .vis__q { font-size: 24px; }
}

/* ---------- #inside: scroll-driven sticky panel (Sina fb3, 2026-10-06) ---------- */
.how > .container { align-items: start; --vis-h: min(78vh, 720px); --nav-h: 76px; }
.how__text { align-self: start; }
/* left column gets comfortable scroll room: each step i–iv is a tall, airy block so each phase gets ~40vh of scroll */
.how .step { min-height: clamp(200px, 34vh, 340px); align-content: start; padding-top: 30px; }
.how .step h3 { font-size: clamp(25px, 2vw, 30px); }
.how .step p { font-size: 16px; }
.vis { position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--vis-h)) / 2); height: var(--vis-h); min-height: 0; align-self: start; }
.vis__path { --gap: clamp(56px, 10vh, 92px); }
@media (max-height: 760px) and (min-width: 961px) {
  .vis__q { font-size: clamp(28px, 2.4vw, 36px); }
  .vis__icon { margin-bottom: 14px; }
  .vis__tag { padding-bottom: 12px; margin-bottom: 14px; }
  .vis__phases { --py: 34px; }
}
/* static / reduced motion: plain layout, no extra scroll room */
.static .how .step { min-height: 0; padding-top: 26px; }
@media (prefers-reduced-motion: reduce) { .how .step { min-height: 0; padding-top: 26px; } }
/* mobile / small tablet: normal flow, fits the screen */
@media (max-width: 960px) {
  .vis { position: relative; top: auto; height: auto; max-height: 80vh; }
  .how .step { min-height: 0; padding-top: 26px; }
}

/* =====================================================================
   Sina fb4 (2026-10-07): optional-support therapist block (#program) and
   the full-width "Elinde ne kalıyor?" band (#keep) after section 03
   ===================================================================== */

/* ---------- #program: optional support / therapist block (full width, not a card) ---------- */
.ses { margin-top: clamp(80px, 8vw, 128px); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap);
  padding-top: clamp(40px, 4vw, 56px); border-top: 1px dashed rgba(91,122,140,.55); }
.ses__main { grid-column: 1 / span 6; }
.ses__tag { font-size: 11.5px; letter-spacing: .26em; font-weight: 500; color: var(--slate); }
.ses__title { margin-top: 24px; font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 4.7vw, 70px); line-height: 1; letter-spacing: -.012em; }
.ses__body { margin-top: 26px; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.65; color: var(--ink-2); max-width: 27em; }
.ses__row { display: flex; align-items: center; gap: clamp(28px, 3vw, 44px); margin-top: 40px; }
.ses__faces { display: inline-flex; align-items: center; }
.ses__face { position: relative; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none; background: #D9CDBD;
  box-shadow: 0 0 0 3px var(--cream-2); isolation: isolate; }
.ses__face + .ses__face { margin-left: -14px; }
.ses__face--1 { z-index: 3; } .ses__face--2 { z-index: 2; } .ses__face--3 { z-index: 1; }
.ses__face img { position: absolute; inset: -20%; width: 140%; height: 140%; max-width: none; object-fit: cover; filter: blur(5px) saturate(.95) brightness(1.16) contrast(.84); }
.ses__face--1 img { object-position: 12% 74%; }
.ses__face--2 img { object-position: 30% 72%; }
.ses__face--3 img { object-position: 88% 32%; }
/* a flat cream wash so the discs read as soft light, not as pictures */
.ses__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(247,240,229,.16); box-shadow: inset 0 0 0 1px rgba(44,44,44,.06); }
.ses__go { display: grid; place-items: center; width: 66px; height: 66px; flex: none; border-radius: 50%; border: 1px solid var(--ink); font-size: 20px; line-height: 1;
  transition: background .35s var(--ease), color .35s var(--ease); }
.ses__go span { transition: transform .35s var(--ease); }
.ses__go:hover { background: var(--ink); color: var(--light); }
.ses__go:hover span { transform: translateX(3px); }
.ses__notes { grid-column: 8 / span 5; align-self: end; }
.ses__notes li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ses__notes li:last-child { border-bottom: 1px solid var(--line); }
.ses__ring { flex: none; margin-top: 6px; width: 11px; height: 11px; border-radius: 50%; border: 1.25px solid var(--slate); }

/* ---------- #keep: "what you keep" band (keep2: headline + particle flow + example cards) ---------- */
.keepband { position: relative; background: #EFEAE2; padding-block: clamp(88px, 9vw, 140px); overflow: hidden; }
.keepband__body { position: relative; display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  grid-template-areas: "text text" "stage cards" "cta cards"; grid-template-rows: auto minmax(300px, 1fr) auto;
  column-gap: clamp(40px, 4vw, 64px); }
.keepband__text { grid-area: text; position: relative; z-index: 3; max-width: 640px; }
.keepband__text .eyebrow { margin-bottom: 26px; gap: 12px; }
.keepband__title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 3.3vw, 48px); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.keepband__lead { margin-top: 22px; font-size: clamp(15.5px, 1.15vw, 16.5px); line-height: 1.68; color: var(--ink-2); max-width: 27em; }
.keepband__stage { grid-area: stage; min-height: 300px; }
.kflow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1.6s var(--ease); }
.kflow.is-on, .static .kflow, .no-js .kflow { opacity: 1; transition: none; }
.kflow.is-on { transition: opacity 1.6s var(--ease); }
.keepband__body > .tpls { grid-area: cards; align-self: end; margin-top: clamp(48px, 4.4vw, 64px); position: relative; z-index: 1; }

/* small CTA: a quiet text link, sits under the particle cloud (desktop) / after the cards (tablet, mobile) */
.kcta { grid-area: cta; position: relative; z-index: 3; justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 0 8px; font-size: 14.5px; letter-spacing: .01em; color: var(--ink); border-bottom: 1px solid rgba(44,44,44,.38); transition: border-color .35s var(--ease), gap .35s var(--ease); }
.kcta__arr { font-size: 15px; line-height: 1; transition: transform .35s var(--ease); }
.kcta:hover { border-color: var(--ink); }
.kcta:hover .kcta__arr { transform: translateX(4px); }

/* templates */
.tpls { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tpls:focus-visible { outline-offset: 6px; }
.tpl { position: relative; display: flex; flex-direction: column; padding: 26px clamp(20px, 1.8vw, 28px) 30px; background: #F5F1EB; min-width: 0; }
.tpl--2 { background: #F3EEE7; } .tpl--3 { background: #F1ECE4; }
.tpl + .tpl { border-left: 1px solid var(--line); }
.tpl__label { font-size: 10px; letter-spacing: .2em; font-weight: 500; line-height: 1.55; color: var(--ink); min-height: 4.7em; text-wrap: balance; }
.tpl__ex { display: block; margin-bottom: 7px; color: var(--ink-3); font-weight: 400; letter-spacing: .18em; }
.tpl__dot { display: inline-block; vertical-align: middle; width: 4px; height: 4px; margin: -2px 0 0 8px; border-radius: 50%; background: var(--ink-3); }

/* 01 thought map */
.map { position: relative; aspect-ratio: 1; margin-top: 18px; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__axis { fill: none; stroke: rgba(44,44,44,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__c { fill: none; stroke: rgba(44,44,44,.3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1 0; }
.map__core { fill: #E2DBD0; }
.map__pt { opacity: 1; }
.map__pt--1 { fill: var(--d1); } .map__pt--2 { fill: var(--d2); } .map__pt--3 { fill: var(--d3); } .map__pt--4 { fill: var(--d4); } .map__pt--0 { fill: var(--ink); }
.map__me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 9.5px; letter-spacing: .2em; margin-left: .1em; font-weight: 500; color: var(--ink-2); }
.map__q { position: absolute; width: 38%; font-size: 10.5px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.map__q--1 { left: 0; top: 0; }
.map__q--2 { right: 0; top: 0; text-align: right; }
.map__q--3 { left: 0; bottom: 0; }
.map__q--4 { right: 0; bottom: 0; text-align: right; }

/* 02 areas of change — a hairline and one dot per row; no numbers, no scores */
.areas { margin-top: 18px; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.areas li { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 9px 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.areas__track { position: relative; display: block; height: 1px; background: rgba(44,44,44,.22); }
.areas__track b { position: absolute; top: 0; left: var(--x); width: 7px; height: 7px; margin: -3px 0 0 -3.5px; border-radius: 50%; background: var(--ink); }
.areas li.is-soft .areas__track b { background: #9C958B; }
.tpl__cap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3; color: var(--ink-2); }

/* 03 what you want to take with you */
.takes { margin-top: 18px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.takes li { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; column-gap: 12px; padding: 12px 18px 12px 16px; border: 1px solid rgba(44,44,44,.22); border-radius: 999px; background: rgba(255,255,255,.22); }
.takes__n { font-size: 10px; letter-spacing: .1em; color: var(--ink-3); }
.takes__t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px; line-height: 1.22; color: var(--ink); }

/* reveal: circles draw, dots settle into place (only when JS animates; off under ?static=1, no JS, reduced motion) */
.map__c { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.map__c:nth-of-type(2) { transition-delay: .35s; } .map__c:nth-of-type(3) { transition-delay: .5s; }
.map__pt { transition: opacity .8s var(--ease) 1.1s; }
.areas__track b { transition: left 1.5s var(--ease) .3s, opacity .6s var(--ease) .3s; }
.areas li:nth-child(2) b { transition-delay: .38s; } .areas li:nth-child(3) b { transition-delay: .46s; }
.areas li:nth-child(4) b { transition-delay: .54s; } .areas li:nth-child(5) b { transition-delay: .62s; } .areas li:nth-child(6) b { transition-delay: .7s; }
html:not(.static):not(.no-js) .tpl.reveal:not(.is-visible) .map__c { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html:not(.static):not(.no-js) .tpl.reveal:not(.is-visible) .map__pt { opacity: 0; }
html:not(.static):not(.no-js) .tpl.reveal:not(.is-visible) .areas__track b { left: 0; opacity: 0; }
.tpl.is-visible .map__c { stroke-dasharray: 1 1; }
@media (prefers-reduced-motion: reduce) {
  .map__c, .map__pt, .areas__track b { transition: none !important; }
  html .tpl.reveal .map__c { stroke-dasharray: 1 0 !important; stroke-dashoffset: 0 !important; }
  html .tpl.reveal .map__pt { opacity: 1 !important; }
  html .tpl.reveal .areas__track b { left: var(--x) !important; opacity: 1 !important; }
}

/* responsive */
@media (max-width: 1299px) {
  /* stacked: text, then the particle band (flows down into the cards), cards, CTA */
  .keepband__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "stage" "cards" "cta"; grid-template-rows: auto auto auto auto; }
  .keepband__text { max-width: 720px; }
  .keepband__stage { min-height: 0; height: clamp(230px, 27vw, 290px); margin-top: 12px; }
  .keepband__body > .tpls { margin-top: 0; }
  .kcta { margin-top: 36px; }
}
@media (max-width: 960px) {
  .ses { margin-top: 32px; }
  .ses__main, .ses__notes { grid-column: 1 / -1; }
  .ses__notes { margin-top: 48px; }
  /* templates: horizontal scroll-snap row, bleeding to the screen edges */
  .tpls { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 360px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x);
    border: 0; scrollbar-width: none; }
  .tpls::-webkit-scrollbar { display: none; }
  .tpl { scroll-snap-align: start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .tpl:last-child { border-right: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .ses__title { font-size: clamp(42px, 11.5vw, 52px); }
  .ses__row { margin-top: 32px; gap: 24px; }
  .ses__face, .ses__go { width: 58px; height: 58px; }
  .ses__face + .ses__face { margin-left: -12px; }
  .keepband__title { font-size: clamp(36px, 10vw, 46px); }
  .keepband__lead { margin-top: 18px; }
  .keepband__stage { height: 240px; margin-top: 4px; }
}

/* =====================================================================
   Motion (2026-10-14): live dot/particle canvases ported from the social loops (motion.js).
   ?static=1 and prefers-reduced-motion: no canvases, plain text.
   ===================================================================== */
/* hero: dots converge into the wordmark, then the real text fades in */
.hero__px { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.hero-px .hero__word { animation: heroIn 1s ease 3.6s both !important; }
.hero-px .hero__word.is-in { animation: none !important; opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) { .hero-px .hero__word { animation: none !important; } }

/* #inside: canvas journey path replaces the static vertical dots (the ring stays as the "you are here" marker) */
.vis__px { position: absolute; left: 0; top: 0; pointer-events: none; }
.vis--px .vis__dot { opacity: .25 !important; box-shadow: none !important; transform: none !important; }

/* slogan band */
.slg { position: relative; background: #15110D; color: #F7F1E8; }
.slg__stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 34px);
  min-height: 100svh; padding: 96px var(--pad-x, 24px); text-align: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 50% at 50% 55%, rgba(214,160,104,.10), rgba(214,160,104,0) 70%); }
.slg__px { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.slg__line { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; will-change: opacity, transform; }
.slg__big { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -.01em; }
.slg__line--2 .slg__big { font-style: italic; }
.slg__sub { font-family: var(--geo); font-size: clamp(10.5px, .9vw, 12.5px); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: rgba(247,241,232,.6); }
html[lang="en"] .slg__sub { display: none; }
.slg__word { font-family: var(--geo); font-weight: 260; font-size: clamp(40px, 6.4vw, 96px); letter-spacing: .35em; text-indent: .35em; line-height: 1; white-space: nowrap; }
.slg__dots { display: flex; gap: 12px; }
.slg__dots .dot { width: 8px; height: 8px; }
/* live: tall scroll room, sticky stage, wordmark centred over the lines */
.slg--live { height: 330vh; }
.slg--live .slg__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.slg--live .slg__line { opacity: 0; }
.slg--live .slg__word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; opacity: 0; z-index: 1; }
.slg--live .slg__dots { display: none; }
@media (max-width: 640px) {
  .slg--live { height: 280vh; }
  .slg__big { font-size: clamp(30px, 9vw, 40px); }
  .slg__word { font-size: clamp(30px, 11vw, 52px); letter-spacing: .3em; text-indent: .3em; }
}