@font-face{font-family:'Yekan';src:url(fonts/yekan.woff) format('woff');font-weight:100 900;font-display:swap}
:root{
  --bg:#FBF7ED; --bg2:#FBF9F3; --card:#FBF7ED; --ink:#0A0A05; --muted:#5A5B4F; --label:#98978A;
  --line:#E6E0CE; --green:#2C562F; --green-ink:#FFFFFF; --mint:#D8E8C8; --hero-glow:#EBEBD4;
  --num:#264D2B; --ghost:#BDBDAE; --quote:#3E4135;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Yekan",Tahoma,"Segoe UI",sans-serif;line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* header */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700}
.logo{height:40px;width:auto;display:block}
.nav{display:none;gap:26px;font-size:15px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;font:inherit;font-weight:500;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s}
.btn-fill{background:var(--green);color:var(--green-ink)}
.btn-fill:hover{transform:translateY(-1px)}
.btn-line{border-color:var(--line);background:var(--card)}
.btn-text{padding:0 8px;color:var(--ink)}


/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 64px;min-height:520px;display:flex;align-items:center;background:linear-gradient(to left,rgba(251,247,237,.95) 0%,rgba(251,247,237,.86) 55%,rgba(251,247,237,.55) 100%),url(../img/hero-bg.jpg) center/cover no-repeat var(--bg)}
.hero .wrap{width:100%}
@media (max-width:859px){.hero{background:linear-gradient(rgba(251,247,237,.88),rgba(251,247,237,.88)),url(../img/hero-bg.jpg) center/cover no-repeat var(--bg)}}
.hero h1{font-size:clamp(40px,9vw,76px);line-height:1.2;font-weight:400;margin:0 0 22px;letter-spacing:-.01em}
.hero .kicker{display:block;font-size:13px;color:var(--label);margin-bottom:18px;letter-spacing:.04em}
.hero p{max-width:34em;color:var(--muted);font-size:17px;margin:0 0 30px}
.hero .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (min-width:860px){.hero{padding:120px 0 100px}}


/* motion */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.card,.quote{transition:transform .3s ease,box-shadow .3s ease}
.card:hover,.quote:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(44,86,47,.45)}
.card .ico{transition:transform .35s ease}.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.card:hover,.quote:hover{transform:none}.card:hover .ico{transform:none}}


.hero{position:relative}
/* sticky mobile dock */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);transition:transform .3s}
.dock .btn{flex:1}.dock.hide{transform:translateY(110%)}
@media (min-width:860px){.dock{display:none}}
@media (max-width:859px){footer.site{padding-bottom:96px}}
.social{display:flex;gap:10px;margin-top:6px}
.social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--green);background:var(--card);transition:background .2s}
.social a:hover{background:var(--mint)}.social svg{width:20px;height:20px}


/* intro screen */
.intro{display:none}
.js .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;cursor:pointer;
  background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:opacity .9s ease,visibility 0s linear .9s}
.js .intro img{width:min(88vw,520px);height:auto;animation:sweep 1.5s cubic-bezier(.45,.1,.2,1) .15s both;transition:transform .9s ease}
.js .intro.done{opacity:0;visibility:hidden;pointer-events:none}
.js .intro.done img{transform:scale(1.08)}
@keyframes sweep{from{clip-path:inset(0 0 0 100%);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.js:not(.ready) .hero h1,.js:not(.ready) .hero p,.js:not(.ready) .hero .actions,.js:not(.ready) .hero .kicker{animation-play-state:paused}
html.holding{overflow:hidden}


/* testimonial icon */
.quote .qi{width:30px;height:30px;color:#B5CBA5;align-self:flex-start;flex:none}
/* richer CTA card */
.cta{position:relative;overflow:hidden;isolation:isolate;padding:48px 28px;
  background:radial-gradient(80% 100% at 0% 0%,rgba(216,232,200,.24),transparent 62%),linear-gradient(165deg,#477443 0%,#2C562F 55%,#224826 100%)}
.cta .mark{position:absolute;left:-36px;bottom:-56px;width:min(62%,360px);opacity:.1;filter:brightness(0) invert(1);z-index:-1;pointer-events:none}
.cta h2{font-size:clamp(30px,5vw,48px);margin:0 0 12px;max-width:14em}
.cta p{font-size:17px;margin:0 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 30px;padding:0}
.chips li{padding:2px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:14px;color:#E4F0DA;background:rgba(255,255,255,.07)}
.cta .btn-light{min-height:50px;padding:0 26px;font-size:16px;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.cta .btn-light svg{transition:transform .25s}.cta .btn-light:hover svg{transform:translate(-3px,-3px)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;min-height:50px;padding:0 22px}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
@media (min-width:860px){.cta{padding:72px 64px}}
@media (prefers-reduced-motion:reduce){.cta .btn-light svg{transition:none}}


/* accent: a single lively colour, used sparingly */
:root{--pop:#FFD84A;--pop-ink:#2A2F0E;--pop-line:#D9AE00;--pop-soft:#FFF4C2}
.hero .kicker::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 1px var(--pop-line);margin-inline-end:8px}
.cta .actions .btn-light{background:var(--pop);color:var(--pop-ink)}
.cta .actions .btn-light:hover{background:#FFE67F}


/* footer styled like the boxes */
body footer.site{background:#E9F0DC;border:0;border-radius:0;padding-top:40px}

/* sections */
section{padding:72px 0}
.head{margin-bottom:36px}
.head small{display:flex;align-items:center;gap:12px;color:var(--label);font-size:13px;margin-bottom:10px}
.head small::after{content:"";width:28px;height:1px;background:var(--label);opacity:.7}
.head h2{font-size:clamp(28px,5vw,42px);line-height:1.4;font-weight:400;margin:0}
.stats{background:var(--bg2);border-block:1px solid var(--line);padding:44px 0}
.stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px}
.stats b{direction:ltr;text-align:right;font-variant-numeric:tabular-nums;display:block;font-size:44px;font-weight:300;line-height:1.2;color:var(--num)}
.stats span{color:#66665E;font-size:14px}
@media (min-width:760px){.stats ul{grid-template-columns:repeat(5,1fr)}}

.about{display:grid;gap:36px}
.about p{margin:0 0 16px;color:var(--muted);max-width:38em}
.portrait{border-radius:28px;min-height:300px;background:var(--bg2);display:grid;place-items:center;border:1px solid var(--line);padding:32px}
.portrait img{width:min(52%,230px);height:auto}
@media (min-width:860px){.about{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px}.portrait{min-height:380px}}

.cards{display:grid;gap:16px}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}
.card .ico{width:44px;height:44px;border-radius:14px;background:var(--mint);color:#2C562F;display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:22px;height:22px}
.card h3{margin:0 0 8px;font-size:19px;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:15px}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:6px 14px;padding:24px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,persian);grid-row:span 2;font-size:34px;font-weight:300;color:var(--ghost);line-height:1.2}
.steps h3{margin:0;font-size:18px;font-weight:700}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}.steps li{display:block;border:0;border-top:1px solid var(--line);padding:22px 0 0}.steps li:last-child{border-bottom:0}.steps li::before{display:block;margin-bottom:6px}}

.quotes{display:grid;gap:16px}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.quote p{margin:0;font-size:16px;color:var(--quote)}
.quote footer{border-top:1px solid var(--line);padding-top:14px;font-size:14px}
.quote footer b{display:block;font-weight:700}
.quote footer span{color:var(--muted)}

.cta{background:linear-gradient(180deg,#447040 0%,#2C562F 60%);color:var(--green-ink);border-radius:32px;padding:44px 28px;margin:0 0 72px}
.cta h2{font-size:clamp(28px,5vw,44px);line-height:1.4;font-weight:400;margin:0 0 12px}
.cta p{margin:0 0 26px;max-width:30em;opacity:.9}
.cta .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cta .btn-light{background:#D8E8C8;color:#2C562F}
.cta .btn-text{color:inherit}
@media (min-width:860px){.cta{padding:64px}}

footer.site{border-top:1px solid var(--line);padding:36px 0 44px;color:var(--muted);font-size:14px}
footer.site .wrap{display:grid;gap:18px}
footer.site strong{color:var(--ink);font-size:18px}
footer.site address{font-style:normal;display:grid;gap:2px}
@media (min-width:760px){footer.site .wrap{grid-template-columns:1.2fr 1fr;align-items:start}}

@media (min-width:860px){.nav{display:flex}}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero p,.hero .actions{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero p{animation-delay:.12s}.hero .actions{animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ===== inner pages ===== */
.acts{display:flex;align-items:center;gap:8px}
.nav a[aria-current="page"]{color:var(--ink);font-weight:500}
.menu-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.bar.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bar.open .menu-btn span:nth-child(2){opacity:0}
.bar.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:859px){
  .nav{position:absolute;top:100%;inset-inline:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 22px 14px;flex-direction:column;gap:0}
  .bar.open .nav{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:last-child{border-bottom:0}
}
@media (min-width:860px){.menu-btn{display:none}.nav{gap:22px;font-size:14.5px}}

.page-hero{padding:64px 0 48px;background:linear-gradient(135deg,var(--hero-glow) 0%,var(--bg) 60%);border-bottom:1px solid var(--line)}
.page-hero .kicker{display:block;font-size:13px;color:var(--label);margin-bottom:12px}
.page-hero h1{font-size:clamp(34px,6vw,56px);font-weight:400;line-height:1.35;margin:0 0 10px}
.page-hero p{margin:0;color:var(--muted);font-size:17px;max-width:36em}
@media (min-width:860px){.page-hero{padding:96px 0 72px}}
@media (prefers-reduced-motion:no-preference){.page-hero .wrap>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.page-hero .wrap>*:nth-child(2){animation-delay:.1s}.page-hero .wrap>*:nth-child(3){animation-delay:.2s}}

.card.team{text-align:center}
.avatar{width:68px;height:68px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:22px;font-weight:500;margin:0 auto 16px}

.svc-grid{display:grid;gap:14px}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{display:flex;gap:16px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:22px}
.svc img{width:52px;height:52px;padding:8px;background:var(--mint);border-radius:14px;object-fit:contain;flex:none}
.svc p{margin:0;font-size:15.5px;color:var(--quote)}

.media-list{display:grid;gap:56px}
.media-item{display:grid;gap:22px;align-items:center}
@media (min-width:860px){.media-item{grid-template-columns:1.1fr .9fr;gap:48px}.media-item:nth-child(even){direction:ltr}.media-item:nth-child(even)>*{direction:rtl}}
.video{aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.video iframe{width:100%;height:100%;border:0;display:block}
.media-item h2{font-size:26px;font-weight:400;margin:0 0 10px}
.media-item p{margin:0;color:var(--muted)}

.vgrid{display:grid;gap:16px}
@media (min-width:640px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#101510}
.vcard video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#101510}
.vcard.letter{background:var(--bg2)}
.vcard.letter img{width:100%;height:100%;object-fit:contain;display:block}
@media (min-width:860px){.quotes.q-long{grid-template-columns:repeat(2,1fr)}}

.post-grid{display:grid;gap:18px}
@media (min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;transition:transform .3s,box-shadow .3s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(44,86,47,.45)}
.post-card .thumb{width:100%;height:180px;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.pc-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pc-body h3{margin:0;font-size:18px;font-weight:700;line-height:1.7}
.pc-body p{margin:0;color:var(--muted);font-size:15px}
.more{margin-top:auto;color:var(--green);font-weight:500;font-size:15px}
@media (prefers-reduced-motion:reduce){.post-card:hover{transform:none}}

.narrow{max-width:760px}
.post{padding:48px 0 72px}
.cover{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:24px;border:1px solid var(--line);margin-bottom:32px}
.post p{font-size:18px;line-height:2.15;color:var(--quote);margin:0 0 20px}
.pn{display:grid;gap:12px;margin:40px 0 24px}
@media (min-width:640px){.pn{grid-template-columns:1fr 1fr}}
.pn a{text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:16px 18px;background:var(--bg2);font-size:13px;color:var(--label)}
.pn a b{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-top:2px}
.pn a:hover{border-color:var(--green)}

.contact{display:grid;gap:40px}
@media (min-width:860px){.contact{grid-template-columns:.8fr 1.2fr;gap:64px}}
.info{display:grid;gap:12px;align-content:start}
.info-card{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:18px 20px;display:grid;gap:2px}
.info-card b{font-weight:500;font-size:13px;color:var(--label)}
.info-card span,.info-card a{color:var(--ink);text-decoration:none}
.info-card a{text-align:right}
.fh{font-size:28px;font-weight:400;margin:0 0 4px}
.fp{margin:0 0 24px;color:var(--muted)}
form label{display:block;font-size:14px;color:var(--muted);margin-bottom:14px}
form input,form textarea{display:block;width:100%;margin-top:6px;min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);color:var(--ink);font:inherit;font-size:16px}
form textarea{resize:vertical}
form input:focus-visible,form textarea:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.row2{display:grid;gap:0 14px}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr}}
form{position:relative}
.hp{position:absolute!important;top:0;right:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
#formStatus{margin:14px 0 0;min-height:1.6em;font-size:15px}
#formStatus.ok{color:var(--green)}#formStatus.err{color:#A33B2B}
.map{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.map iframe{display:block;width:100%;height:380px;border:0}
.n404{font-size:clamp(90px,20vw,170px);font-weight:300;color:var(--ghost);line-height:1}
footer.site address a{color:var(--muted);text-decoration:none}footer.site address a:hover{color:var(--ink)}

/* ===== final additions ===== */
@keyframes introFail{to{opacity:0;visibility:hidden}}
.js .intro{animation:introFail .01s 6s forwards}
body footer.site .wrap{gap:28px}
footer.site .fl{display:grid;gap:2px;align-content:start}
footer.site .fl b{color:var(--ink);font-weight:500;margin-bottom:4px}
footer.site .fl a{color:var(--muted);text-decoration:none;padding:3px 0}
footer.site .fl a:hover{color:var(--ink)}
@media (min-width:760px){body footer.site .wrap{grid-template-columns:1.2fr .8fr 1.4fr}}
/* registration page */
.reg{display:grid;gap:28px}
@media (min-width:900px){.reg{grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}}
.reg-card{background:var(--bg2);border:1px solid var(--line);border-radius:28px;padding:26px}
@media (min-width:860px){.reg-card{padding:40px}}
.reg-card input,.reg-card select{background:var(--card)}
form select{display:block;width:100%;margin-top:6px;min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;font-size:16px}
form select:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.hint{display:block;margin-top:6px;font-size:13px;color:var(--label)}
.reg-side h3{font-size:20px;font-weight:700;margin:0 0 14px}
.side-steps{list-style:none;margin:0 0 20px;padding:0;counter-reset:s;display:grid;gap:14px}
.side-steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;color:var(--muted);font-size:15px}
.side-steps li::before{content:counter(s,persian);width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-weight:500}
.reg-side .note{font-size:13px;color:var(--label);border-top:1px solid var(--line);padding-top:14px}
#regOk{outline:none;text-align:start}
#regOk h2{font-size:28px;font-weight:400;margin:0 0 8px}
#regOk p{color:var(--muted);margin:0 0 20px}

/* ===== success stories (video testimonials) ===== */
.stories{background:var(--bg2);border-block:1px solid var(--line)}
.story-index{display:none}
.story{position:relative;padding:44px 0 56px}
.story+.story{border-top:1px solid var(--line)}
.story-no{display:none}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(160deg,#22432F 0%,#16281C 100%);border-radius:18px;overflow:hidden;margin:0 auto 26px;box-shadow:0 18px 40px -18px rgba(20,40,28,.45)}
.video-wrap.portrait{aspect-ratio:9/16;max-width:290px;max-height:520px}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.video-placeholder{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.8);text-align:center;padding:20px;font-size:13px}
.video-placeholder p{margin:0;line-height:1.9}
.video-wrap.missing .video-placeholder{display:flex}.video-wrap.missing video{display:none}
.play{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.story .name{font-size:28px;font-weight:700;color:#1E3B2C;margin:0;line-height:1.4}
.tag-dur{background:#1E3B2C;color:#fff;padding:3px 12px;border-radius:20px;font-size:12px;white-space:nowrap}
.story .meta{font-size:14px;color:var(--muted);margin:0 0 28px}
.growth-row{display:flex;gap:18px;align-items:stretch}
.growth-col{flex:1;min-width:0}
.growth-col h4{font-size:14px;font-weight:700;margin:0 0 12px;display:flex;gap:6px;align-items:center}
.growth-col.before h4{color:#8B7355}.growth-col.after h4{color:var(--green)}
.growth-divider{width:2px;flex:none;background:linear-gradient(to bottom,#90A99A,#47654A);border-radius:2px;opacity:.5;display:block}
.gd-arrow{display:none}
ul.tags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.tags li{font-size:14px;line-height:1.7;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.before ul.tags li{color:#5c5648}
.after ul.tags li{color:#1E3B2C;font-weight:500;border-color:rgba(71,101,74,.25);background:rgba(144,169,154,.14)}
.quote-block{margin:34px 0 0;padding:24px 24px 20px;background:#1E3B2C;border-radius:18px;color:#F2EFE5;position:relative;overflow:hidden}
.quote-block::after{content:"”";position:absolute;left:12px;top:-18px;font-size:100px;color:rgba(255,255,255,.06);font-family:Georgia,serif}
.quote-block p{font-size:16px;line-height:2;margin:0 0 10px;font-weight:500;position:relative;z-index:1}
.quote-block cite{font-style:normal;font-size:13px;color:#C9A55F;position:relative;z-index:1}
.letter-card{margin:28px 0 0;max-width:520px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg2)}
.letter-card img{display:block;width:100%;height:auto}
.letter-card figcaption{padding:10px 16px;font-size:13px;color:var(--muted)}
.js .story .tags li{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.js .story.in .tags li{opacity:1;transform:none}
.story .tags li:nth-child(1){transition-delay:.15s}.story .tags li:nth-child(2){transition-delay:.23s}.story .tags li:nth-child(3){transition-delay:.31s}
.story .tags li:nth-child(4){transition-delay:.39s}.story .tags li:nth-child(5){transition-delay:.47s}.story .tags li:nth-child(6){transition-delay:.55s}
@media (max-width:400px){.growth-row{gap:12px}.story .name{font-size:25px}}

/* desktop: richer layout */
@media (min-width:960px){
  .story{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;padding:60px 0 68px}
  .story:first-child{padding-top:8px}
  .story-media{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
  .video-wrap{margin:0;transition:transform .4s ease,box-shadow .4s ease}
  .video-wrap.portrait{max-width:300px;max-height:none;margin-inline:auto}
  .story-media:hover .video-wrap{transform:translateY(-5px);box-shadow:0 28px 50px -20px rgba(20,40,28,.55)}
  .story-body{position:relative}
  .story-no{display:block;position:absolute;inset-inline-end:0;top:-22px;font-size:88px;font-weight:300;line-height:1;color:var(--ghost);opacity:.45;pointer-events:none}
  .story .name{font-size:34px}
  .tag-dur{font-size:13px;padding:4px 14px}
  .story .meta{font-size:15.5px;margin-bottom:30px}
  .growth-row{gap:14px;align-items:flex-start}
  .growth-col{padding:20px;border-radius:22px}
  .growth-col.before{background:rgba(139,115,85,.08)}
  .growth-col.after{background:rgba(71,101,74,.10)}
  .growth-divider{width:auto;background:none;opacity:1;align-self:center;display:grid;place-items:center}
  .gd-arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#1E3B2C;color:#fff;box-shadow:0 8px 18px -8px rgba(20,40,28,.6)}
  ul.tags li{transition:transform .25s ease,border-color .25s ease}
  .growth-col:hover ul.tags li:hover{transform:translateX(-4px)}
  .quote-block{padding:34px 40px 28px;background:linear-gradient(160deg,#25493a 0%,#1a3326 100%);border-radius:24px}
  .quote-block::after{font-size:160px;left:20px;top:-34px;color:rgba(255,255,255,.07)}
  .quote-block p{font-size:19px;line-height:2.1}
  .quote-block cite{font-size:14px}
}
/* wide screens: add the sticky story index */
@media (min-width:1200px){
  .stories>.wrap{max-width:1240px}
  .stories-layout{display:grid;grid-template-columns:170px 1fr;gap:48px;align-items:start}
  .story-index{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
  .si-title{display:block;font-size:13px;color:var(--label);margin:0 0 12px;font-weight:400}
  .story-index ol{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)}
  .story-index a{display:flex;gap:10px;align-items:baseline;padding:9px 16px;margin-inline-start:-2px;border-inline-start:2px solid transparent;color:var(--muted);text-decoration:none;font-size:14.5px;transition:color .2s,border-color .2s}
  .story-index a b{font-weight:300;color:var(--ghost);font-size:13px;transition:color .2s}
  .story-index a:hover{color:var(--ink)}
  .story-index a.on{color:#1E3B2C;border-inline-start-color:var(--green)}.story-index a.on b{color:var(--green)}
}
@media (prefers-reduced-motion:reduce){.video-wrap,ul.tags li{transition:none}.story-media:hover .video-wrap{transform:none}}