/* Extra blocks for the direction, solution and season pages. Loaded after page.css;
   uses only its tokens (navy, orange, offwhite, Unbounded) — no new colours or fonts. */

/* season bar above the header: one line, links to the season hub */
.season-bar{background:var(--navy-deep); color:rgba(255,255,255,0.88); font-size:13px; text-align:center; padding:9px 16px; line-height:1.35;}
.season-bar a{color:var(--white); font-weight:600; border-bottom:1px solid var(--orange); padding-bottom:1px; margin-left:6px; white-space:nowrap;}

/* hero with photo: text left, photo right on desktop; photo under the text on phones */
.hero-split{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
.hero-photo{border-radius:24px; overflow:hidden; box-shadow:var(--shadow-2); position:relative;}
.hero-photo img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;}
.hero-photo figcaption{position:absolute; left:14px; bottom:14px; right:14px; background:rgba(12,29,56,0.86); color:var(--white); font-size:12.5px; line-height:1.4; padding:10px 14px; border-radius:12px;}
@media(max-width:860px){.hero-split{grid-template-columns:1fr; gap:28px;} .hero-photo img{aspect-ratio:16/11;}}

/* "who are you" — four direction tiles, used at the end of every page */
.who{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:900px){.who{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.who{grid-template-columns:1fr;}}
.who a{display:flex; flex-direction:column; justify-content:space-between; min-height:150px; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px 20px; transition:background 200ms ease-out, color 200ms ease-out, transform 160ms ease-out;}
.who a:active{transform:scale(0.98);}
.who b{font-family:var(--font-display); font-weight:800; font-size:15px; line-height:1.25; text-transform:uppercase;}
.who span{font-size:13px; color:var(--navy-soft); margin-top:10px; line-height:1.45;}
.who i{font-style:normal; color:var(--orange); font-size:20px; margin-top:14px;}
@media (hover:hover) and (pointer:fine){
  .who a:hover{background:var(--navy); color:var(--white); border-color:var(--navy);}
  .who a:hover span{color:rgba(255,255,255,0.72);}
}

/* card that is a link (solutions on a direction page) */
a.card{display:block; transition:transform 160ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;}
a.card h3{margin-bottom:8px;}
a.card .more{display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--orange-btn);}
a.card .more::after{content:' →';}
a.card:active{transform:scale(0.98);}
@media (hover:hover) and (pointer:fine){a.card:hover{border-color:var(--orange); box-shadow:var(--shadow-1); transform:translateY(-3px);}}

/* idea card: number, title, text, and a "what we take on" strip */
.ideas{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media(max-width:760px){.ideas{grid-template-columns:1fr;}}
.idea{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px 24px; display:flex; flex-direction:column;}
.idea .num{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--orange); margin-bottom:12px;}
.idea p{font-size:14.5px; color:var(--navy-soft); line-height:1.6;}
.idea-do{margin-top:auto; padding-top:16px;}
.idea-do div{border-left:3px solid var(--orange); background:var(--offwhite); border-radius:0 10px 10px 0; padding:12px 14px; font-size:13.5px; line-height:1.5; color:var(--navy);}
.idea-do b{display:block; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange-btn); margin-bottom:3px;}
.idea p + .idea-do{margin-top:16px;}

/* steps / timeline */
.steps{list-style:none; counter-reset:s; display:grid; gap:0; max-width:760px;}
.steps li{counter-increment:s; position:relative; padding:0 0 26px 62px;}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%; background:var(--navy); color:var(--white); font-family:var(--font-display); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;}
.steps li::after{content:''; position:absolute; left:20px; top:46px; bottom:4px; width:2px; background:var(--line);}
.steps li:last-child{padding-bottom:0;} .steps li:last-child::after{display:none;}
.steps b{display:block; font-size:16px; margin-bottom:3px;}
.steps span{font-size:14.5px; color:var(--navy-soft); line-height:1.6;}

/* mid-page CTA: light card, not the dark closing block */
.mid-cta{background:var(--white); border:1px solid var(--line); border-left:5px solid var(--orange); border-radius:16px; padding:28px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.mid-cta h3{font-family:var(--font-display); font-size:clamp(17px,2.2vw,22px); text-transform:uppercase; margin-bottom:6px;}
.mid-cta p{font-size:14.5px; color:var(--navy-soft); line-height:1.55; max-width:520px;}
@media(max-width:640px){.mid-cta{padding:22px 20px;} .mid-cta .btn{width:100%;}}

/* a short list of reasons: bold lead + one line */
.reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:900px){.reasons{grid-template-columns:1fr;}}
.reason{border-top:3px solid var(--navy); padding-top:16px;}
.reason b{display:block; font-size:16px; margin-bottom:6px;}
.reason p{font-size:14.5px; color:var(--navy-soft); line-height:1.6;}

/* WhatsApp lead button on phones: full-width in hero */
@media(max-width:560px){.hero-actions .btn{width:100%;}}

/* intro text above a block of cards / reasons / malls */
.section-intro{max-width:760px; margin-bottom:22px;}
.section-intro p{font-size:16px; line-height:1.65; color:var(--navy-soft);}

/* list of shopping malls: a name and one clear action per tile */
.malls{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.malls.n4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.malls, .malls.n4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.malls, .malls.n4{grid-template-columns:1fr;}}
.mall{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:170px;}
.mall-city{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-btn);}
.mall h3{font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.25; text-transform:uppercase; overflow-wrap:anywhere;}
.mall p{font-size:14px; color:var(--navy-soft); line-height:1.5;}
.mall-link{margin-top:auto; display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border-radius:999px; background:var(--orange-btn); color:var(--white); font-size:13.5px; font-weight:600; transition:transform 160ms ease-out, box-shadow 200ms ease-out;}
.mall-link::after{content:' →'; white-space:pre;}
.mall-link:active{transform:scale(0.97);}
@media (hover:hover) and (pointer:fine){.mall-link:hover{box-shadow:0 8px 24px rgba(255,107,0,0.30); transform:translateY(-2px);}}
@media(max-width:480px){.mall-link{width:100%; justify-content:center;} .mall{min-height:0;}}

/* ---------- dark variant: every third page. Same blocks, navy ground. ---------- */
body.dark{background:var(--navy-deep); color:var(--white);}
body.dark header{background:rgba(12,29,56,0.9); box-shadow:0 1px 0 rgba(255,255,255,0.08);}
body.dark header .logo-color{display:none;}
body.dark header .logo-white{display:block;}
body.dark .hdr-phone{color:var(--white);}
body.dark .season-bar{background:var(--orange-btn);}
body.dark .crumbs, body.dark .crumbs a{color:rgba(255,255,255,0.62);}
body.dark .crumbs span{color:rgba(255,255,255,0.3);}
body.dark h1, body.dark h2, body.dark h3{color:var(--white);}
body.dark .lead, body.dark .prose p, body.dark .prose li, body.dark .card p, body.dark .idea p,
body.dark .reason p, body.dark .mall p, body.dark .section-intro p, body.dark .steps span, body.dark .faq-a p, body.dark .mid-cta p,
body.dark .fact span, body.dark .who span, body.dark .price-note, body.dark .shot figcaption{color:rgba(255,255,255,0.72);}
body.dark .prose p strong, body.dark .prose li strong{color:var(--white);}
body.dark .btn-ghost{color:var(--white); border-color:rgba(255,255,255,0.32);}
body.dark .btn-ghost:hover{background:rgba(255,255,255,0.08); border-color:var(--white);}
body.dark .facts{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.1);}
body.dark .fact, body.dark .card, body.dark .idea, body.dark .who a, body.dark .mid-cta, body.dark .shot, body.dark .mall,
body.dark .price-table{background:var(--navy-mid); border-color:rgba(255,255,255,0.1);}
body.dark .fact b, body.dark .who b, body.dark .idea-do div{color:var(--white);}
body.dark .idea-do div{background:rgba(255,255,255,0.06);}
body.dark .idea-do b, body.dark a.card .more, body.dark .mall-city{color:var(--orange-dim);}
body.dark .reason{border-top-color:var(--orange);}
body.dark .steps li::before{background:var(--orange-btn);}
body.dark .steps li::after{background:rgba(255,255,255,0.15);}
body.dark .faq-item{border-bottom-color:rgba(255,255,255,0.12);}
body.dark .faq-q{color:var(--white);}
body.dark .faq-plus::before, body.dark .faq-plus::after{background:var(--white);}
body.dark .related a{background:var(--navy-mid); border-color:rgba(255,255,255,0.12); color:var(--white);}
body.dark .cta-block{background:var(--orange-btn);}
body.dark .cta-block::before{background:radial-gradient(ellipse 60% 70% at 85% 0%, rgba(255,255,255,0.18), transparent 62%);}
body.dark .cta-block p{color:rgba(255,255,255,0.88);}
body.dark .cta-block .btn-wa{box-shadow:0 8px 24px rgba(0,0,0,0.25);}
body.dark footer{background:#08152A; border-top:1px solid rgba(255,255,255,0.08);}
@media (hover:hover) and (pointer:fine){
  body.dark .who a:hover{background:var(--orange-btn); border-color:var(--orange-btn);}
  body.dark a.card:hover{border-color:var(--orange);}
  body.dark .related a:hover{background:var(--orange-btn); border-color:var(--orange-btn);}
}

/* ---------- раздел «Работа»: для соискателей, живее и теплее страниц услуг ---------- */

/* бегущая строка с ролями: оранжевая лента с наклоном; без анимации при reduce-motion */
.ticker-band{overflow:hidden; padding:18px 0; margin:6px 0;}
.ticker{background:var(--orange-btn); color:var(--white); transform:rotate(-1.2deg); margin:0 -16px; overflow:hidden; padding:15px 0;}
.ticker-track{display:flex; width:max-content; animation:tick 36s linear infinite;}
.ticker-set{display:flex; flex-shrink:0;}
.ticker-set span{display:flex; align-items:center; font-family:var(--font-display); font-weight:800; font-size:clamp(14px,1.8vw,19px); text-transform:uppercase; letter-spacing:0.02em; padding-left:22px; white-space:nowrap;}
.ticker-set span::after{content:''; width:9px; height:9px; border-radius:50%; background:var(--navy-deep); margin-left:22px; flex-shrink:0;}
@keyframes tick{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:8px;}
  .ticker-set + .ticker-set{display:none;}
}

/* плитки вакансий: вся плитка — ссылка, у промоутера внутри ещё три города */
.roles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:900px){.roles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.roles{grid-template-columns:1fr;}}
.role{position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:20px; padding:26px 24px 72px; display:flex; flex-direction:column; gap:8px; min-height:240px; transition:transform 160ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;}
.role::before{content:''; position:absolute; right:-46px; top:-46px; width:130px; height:130px; border-radius:50%; background:rgba(255,107,0,0.10); transition:transform 500ms var(--ease);}
.role > *{position:relative;}
.role-tag{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-btn);}
.role h3{font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1.2; text-transform:uppercase; position:static;}
.role h3 a::after{content:''; position:absolute; inset:0; z-index:0;}
.role p{font-size:14.5px; color:var(--navy-soft); line-height:1.55;}
.role-cities{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; z-index:1;}
.role-cities a{display:inline-flex; align-items:center; min-height:40px; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--offwhite); font-size:13px; font-weight:600; transition:background 200ms ease-out, color 200ms ease-out;}
.role-go{position:absolute; right:20px; bottom:20px; width:42px; height:42px; border-radius:50%; background:var(--orange-btn); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:19px; transition:transform 300ms var(--ease);}
.role:active{transform:scale(0.98);}
@media (hover:hover) and (pointer:fine){
  .role:hover{transform:translateY(-4px); border-color:var(--orange); box-shadow:var(--shadow-1);}
  .role:hover::before{transform:scale(3.2);}
  .role:hover .role-go{transform:translateX(4px);}
  .role-cities a:hover{background:var(--navy); color:var(--white);}
}

/* лестница роста: три ступени, каждая выше предыдущей */
.ladder{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end;}
.ladder li{position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:22px 22px 24px; display:flex; flex-direction:column; gap:6px; min-height:calc(120px + var(--i) * 46px);}
.ladder li:nth-child(2){border-color:var(--orange);}
.ladder li:nth-child(3){background:var(--navy); border-color:var(--navy); color:var(--white);}
.ladder-n{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-btn);}
.ladder b{font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.2; text-transform:uppercase;}
.ladder-t{font-size:14.5px; line-height:1.55; color:var(--navy-soft);}
.ladder li:nth-child(3) .ladder-n{color:var(--orange-dim);}
.ladder li:nth-child(3) .ladder-t{color:rgba(255,255,255,0.78);}
@media(max-width:760px){
  .ladder{grid-template-columns:1fr; align-items:stretch;}
  .ladder li{min-height:0; margin-left:calc((var(--i) - 1) * 14px);}
}

/* «кажется — на деле»: развенчание ожиданий, одна строка = один миф */
.vs{display:grid; gap:12px;}
.vs-row{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden;}
.vs-no, .vs-yes{padding:20px 24px;}
.vs-no{background:rgba(11,31,58,0.04);}
.vs-yes{background:var(--white); border-left:4px solid var(--orange);}
.vs span{display:block; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;}
.vs-no span{color:var(--navy-soft);}
.vs-yes span{color:var(--orange-btn);}
.vs-no p{font-size:15px; line-height:1.55; color:var(--navy-soft); text-decoration:line-through; text-decoration-color:rgba(255,107,0,0.6);}
.vs-yes p{font-size:15px; line-height:1.55; font-weight:600;}
@media(max-width:640px){.vs-row{grid-template-columns:1fr;} .vs-yes{border-left:0; border-top:4px solid var(--orange);} .vs-no, .vs-yes{padding:18px 20px;}}

/* анкета: форма собирает сообщение и открывает WhatsApp */
.apply-wrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:36px; align-items:start;}
@media(max-width:900px){.apply-wrap{grid-template-columns:1fr; gap:22px;}}
.apply{background:var(--white); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow-1);}
.apply-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;}
@media(max-width:560px){.apply-grid{grid-template-columns:1fr;} .apply{padding:22px 18px;}}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0;}
.fld-wide{grid-column:1 / -1;}
.fld > span{font-size:12.5px; font-weight:600; color:var(--navy-soft);}
.fld input, .fld select{font:inherit; font-size:16px; min-height:48px; padding:10px 14px; border:1.5px solid rgba(11,31,58,0.18); border-radius:12px; background:var(--white); color:var(--navy); width:100%;}
.fld input:focus, .fld select:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);}
.days{border:0; margin:0 0 20px; padding:0; min-width:0;}
.days legend{font-size:12.5px; font-weight:600; color:var(--navy-soft); margin-bottom:8px; padding:0;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{position:relative;}
.chip input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer;}
.chip span{display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border-radius:999px; border:1.5px solid rgba(11,31,58,0.18); background:var(--white); font-size:14px; font-weight:600; transition:background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;}
.chip input:checked + span{background:var(--navy); border-color:var(--navy); color:var(--white);}
.chip input:focus-visible + span{outline:2px solid var(--orange); outline-offset:2px;}
.apply .btn{width:100%;}
.apply-note{font-size:12.5px; color:var(--navy-soft); line-height:1.5; margin-top:14px;}

/* тёмный вариант раздела */
body.dark .role, body.dark .ladder li, body.dark .apply{background:var(--navy-mid); border-color:rgba(255,255,255,0.1);}
body.dark .role::before{background:rgba(255,255,255,0.06);}
body.dark .role-tag, body.dark .ladder-n{color:var(--orange-dim);}
body.dark .role p, body.dark .ladder-t, body.dark .vs-no p, body.dark .fld > span, body.dark .days legend, body.dark .apply-note{color:rgba(255,255,255,0.72);}
body.dark .role-cities a{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); color:var(--white);}
body.dark .ladder li:nth-child(3){background:var(--orange-btn); border-color:var(--orange-btn);}
body.dark .ladder li:nth-child(3) .ladder-n{color:var(--white);}
body.dark .ladder li:nth-child(3) .ladder-t{color:rgba(255,255,255,0.9);}
body.dark .vs-row{border-color:rgba(255,255,255,0.12);}
body.dark .vs-no{background:rgba(255,255,255,0.05);}
body.dark .vs-yes{background:var(--navy-mid);}
body.dark .vs-no span{color:rgba(255,255,255,0.6);}
body.dark .vs-yes span{color:var(--orange-dim);}
body.dark .fld input, body.dark .fld select{background:var(--navy-deep); border-color:rgba(255,255,255,0.22); color:var(--white); color-scheme:dark;}
body.dark .chip span{background:transparent; border-color:rgba(255,255,255,0.3); color:var(--white);}
body.dark .chip input:checked + span{background:var(--orange-btn); border-color:var(--orange-btn);}
body.dark .hdr-link{color:var(--white);}
@media (hover:hover) and (pointer:fine){
  body.dark .role:hover{border-color:var(--orange);}
  body.dark .role-cities a:hover{background:var(--orange-btn); border-color:var(--orange-btn);}
}