/*! Сторінка «Про виробника» — стилі погодженого макета
   svitlo-sako-batteries/pro-vyrobnyka. Правила обмежені .svl-about:
   класи .hero, .breadcrumbs, .eyebrow вже зайняті на головній і в каталозі. */

.svl-about{
	--ink:#121516;--muted:#555a58;--orange:#f7a51a;--orange-deep:#d47c0b;
	--graphite:#0b0e0f;--line:#dedfdb;
	color:var(--ink);color-scheme:light;background:#fff;
	font-family:Inter,system-ui,sans-serif}

.svl-about h1,.svl-about h2,.svl-about h3{margin:0;font-family:Manrope,Inter,sans-serif}
.svl-about p{margin:0}

.svl-about .ab-eyebrow{
	color:var(--orange);letter-spacing:.27em;margin:0 0 18px;font-size:10px;font-weight:650}
/* Написи в секціях темніші й дрібніші за той, що в шапці на фото. */
.svl-about .ab-intro>.ab-eyebrow,
.svl-about .ab-strip>.ab-eyebrow,
.svl-about .ab-use__head>.ab-eyebrow,
.svl-about .ab-choice>div>.ab-eyebrow,
.svl-about .ab-cta .ab-eyebrow{color:#be7410;letter-spacing:.25em;margin:8px 0 0;font-size:9px}

/* ------------------------------------------------------------- шапка */

.svl-about .ab-hero{background:#0a0d0e;min-height:clamp(650px,76vh,860px);position:relative;overflow:hidden}
.svl-about .ab-hero>picture{position:absolute;inset:0}
.svl-about .ab-hero>picture img{object-fit:cover;object-position:center;width:100%;height:100%}
.svl-about .ab-hero__shade{
	background:linear-gradient(90deg,#050708f0 0%,#050708b8 31%,#05070838 62%,#0507082e 100%),
		linear-gradient(#0000 64%,#050708b8);position:absolute;inset:0}
.svl-about .ab-hero__content{
	/* Колір задаємо явно: обгортка сторінки світла, і без цього заголовок
	   успадкував би майже чорний — на фото його не було б видно. */
	z-index:2;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
	width:min(1480px,93.2vw);min-height:clamp(650px,76vh,860px);margin:auto;padding:34px 0 70px;position:relative}
.svl-about .ab-crumbs{
	color:#aeb2b1;display:flex;gap:10px;font-size:11px;position:absolute;top:24px;left:0}
.svl-about .ab-crumbs a{color:#aeb2b1}
.svl-about .ab-crumbs a:hover{color:#fff}
.svl-about .ab-crumbs b{color:#fff;font-weight:450}
.svl-about .ab-hero h1{
	color:#fff;letter-spacing:-.065em;max-width:810px;font-size:clamp(62px,6.8vw,112px);font-weight:280;line-height:.88}
/* На великому кеглі Manrope виглядає помітно щільніше за шрифт макета,
   тож на десктопі беремо найтонше нарекання змінного шрифта. На телефоні
   кегль малий і 280 читається правильно — там лишаємо як є. */
@media (width>720px){.svl-about .ab-hero h1{font-weight:200}}
.svl-about .ab-hero h1 em{color:var(--orange);font-style:normal;font-weight:300}
.svl-about .ab-lead-hero{
	color:#d0d4d3;max-width:610px;margin:32px 0 0;font-size:clamp(15px,1.15vw,18px);font-weight:330;line-height:1.65}
.svl-about .ab-hero__content>a{
	color:#fff;letter-spacing:.08em;backdrop-filter:blur(8px);background:#ffffff08;border:1px solid #ffffff45;
	display:flex;align-items:center;gap:34px;min-height:54px;margin-top:34px;padding:0 22px;
	font-size:12px;transition:all .25s}
.svl-about .ab-hero__content>a:hover{border-color:var(--orange);background:var(--orange);color:#111}
.svl-about .ab-hero__content>a svg{width:18px}
.svl-about .ab-hero__index{
	z-index:2;display:flex;align-items:center;gap:14px;color:#8b8f8d;font-size:10px;
	position:absolute;right:3.4vw;bottom:44px}
.svl-about .ab-hero__index i{background:#ffffff35;width:46px;height:1px}

/* ------------------------------------------------------------- наш підхід */

.svl-about .ab-intro{
	color:#141718;background:#f2f0eb;display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;
	padding:125px max(6.8vw,30px)}
.svl-about .ab-intro h2{letter-spacing:-.055em;font-size:clamp(40px,4.3vw,72px);font-weight:290;line-height:1}
.svl-about .ab-intro h2 span{color:#969794}
/* Абзаци стають у другий рядок першої колонки — так у макеті. */
.svl-about .ab-intro>div{display:grid;grid-template-columns:1fr 1fr;gap:35px;max-width:790px;padding-top:8px}
.svl-about .ab-intro>div p{color:#535856;font-size:15px;line-height:1.75}

/* ------------------------------------------------------------- бренди */

.svl-about .ab-story{display:grid;grid-template-columns:1.08fr .92fr;background:#fff;color:#121516}
.svl-about .ab-story--binshi{background:#e9e7e2;grid-template-columns:.92fr 1.08fr}
.svl-about .ab-visual{background:#111;min-height:920px;position:relative;overflow:hidden}
.svl-about .ab-visual>picture{position:absolute;inset:0}
.svl-about .ab-visual>picture img{object-fit:cover;width:100%;height:100%}
.svl-about .ab-story--sako .ab-visual>picture img{object-position:58% center}
.svl-about .ab-story--binshi .ab-visual>picture img{object-position:42% center}
.svl-about .ab-caption{
	backdrop-filter:blur(8px);background:#0b0e0ee8;display:flex;align-items:center;gap:18px;
	min-height:58px;padding:0 25px;position:absolute;bottom:0;left:0;right:0}
.svl-about .ab-caption span{color:var(--orange);font-size:12px}
.svl-about .ab-caption p{color:#cdd0cf;letter-spacing:.19em;font-size:9px}
.svl-about .ab-copy{
	display:flex;flex-direction:column;justify-content:center;
	padding:clamp(70px,7vw,126px) clamp(48px,6vw,100px)}
.svl-about .ab-copy h2{letter-spacing:-.057em;font-size:clamp(46px,4.5vw,74px);font-weight:300;line-height:.98}
.svl-about .ab-lead{color:var(--muted);max-width:670px;margin:29px 0 0;font-size:15px;line-height:1.75}
.svl-about .ab-note{color:var(--muted);margin:27px 0 0;font-size:12.5px;line-height:1.7}

/* Марка бренду — текст із підкресленням, як у макеті: у файлах постачальника
   логотип теж набраний шрифтом, тож картинка нічого не додала б. */
.svl-about .ab-mark{
	color:#15191a;display:flex;align-items:flex-end;gap:12px;width:max-content;
	margin:0 0 30px;padding:0 0 13px;position:relative}
.svl-about .ab-mark:after{
	content:"";background:linear-gradient(90deg,var(--orange) 0 42%,#d8d8d3 42% 100%);
	width:100%;height:3px;position:absolute;bottom:0;left:0}
.svl-about .ab-mark strong{
	letter-spacing:-.065em;font-family:Manrope,Inter,sans-serif;
	font-size:clamp(38px,3.5vw,58px);font-weight:720;line-height:.78}
.svl-about .ab-mark span{color:#777b79;letter-spacing:.26em;font-size:10px;font-weight:650;line-height:1}
.svl-about .ab-mark--sako strong{color:#d82c25;font-style:italic}
.svl-about .ab-mark--binshi strong{color:#141819;letter-spacing:-.045em}
.svl-about .ab-mark--binshi:after{
	background:linear-gradient(90deg,#15191a 0 36%,var(--orange) 36% 63%,#c8c9c4 63% 100%)}

.svl-about .ab-features{border-top:1px solid var(--line);margin-top:38px}
.svl-about .ab-features article{
	border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:17px;padding:18px 0}
.svl-about .ab-features svg{width:28px;height:28px;color:var(--orange)}
.svl-about .ab-features h3{margin:0 0 5px;font-size:14px;font-weight:620}
.svl-about .ab-features p{color:#686c6a;font-size:12px;line-height:1.55}

.svl-about .ab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:33px}
.svl-about .ab-actions>a{
	border:1px solid #cfd0cc;display:flex;align-items:center;gap:13px;min-height:49px;padding:0 17px;font-size:11px}
.svl-about .ab-actions>a svg{width:16px;height:16px}
.svl-about .ab-actions .is-primary{color:#fff;background:#15191a;border-color:#15191a}
.svl-about .ab-actions .is-primary:hover{border-color:var(--orange);background:var(--orange);color:#111}
.svl-about .ab-actions .is-official{
	color:#777b79;border:0;width:100%;min-height:auto;padding:10px 0 0;font-size:10px}

/* ------------------------------------------------------------- перехід */

.svl-about .ab-strip{text-align:center;background:var(--graphite);padding:105px 6.8vw 96px}
.svl-about .ab-strip h2{
	color:#fff;letter-spacing:-.043em;max-width:1100px;margin:22px auto 54px;
	font-size:clamp(30px,3.1vw,50px);font-weight:270;line-height:1.22}
.svl-about .ab-flow{display:flex;justify-content:center;align-items:center;max-width:920px;margin:auto}
.svl-about .ab-flow span{
	color:#d7dad9;letter-spacing:.15em;display:flex;flex-direction:column;align-items:center;
	gap:12px;min-width:125px;font-size:9px}
.svl-about .ab-flow svg{width:33px;height:33px;color:var(--orange)}
.svl-about .ab-flow i{
	background:linear-gradient(90deg,#ffffff25,var(--orange),#ffffff25);flex:1;height:1px}

/* ------------------------------------------------------------- цифри */

.svl-about .ab-nums{
	border-top:1px solid #cecfca;border-left:1px solid #cecfca;
	display:grid;grid-template-columns:1fr 1fr;margin-top:38px}
.svl-about .ab-nums>div{
	border-bottom:1px solid #cecfca;border-right:1px solid #cecfca;
	display:flex;flex-direction:column;justify-content:center;min-height:114px;padding:18px}
.svl-about .ab-nums strong{color:var(--orange-deep);letter-spacing:-.04em;font-size:31px;font-weight:450}
.svl-about .ab-nums span{color:#5d615f;margin-top:6px;font-size:10px;line-height:1.45}

/* ------------------------------------------------------------- сфери */

.svl-about .ab-use{color:#111516;background:#fff;padding:110px 6.8vw 120px}
.svl-about .ab-use__head{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}
.svl-about .ab-use__head h2{letter-spacing:-.05em;font-size:clamp(42px,4vw,66px);font-weight:290;line-height:1}
.svl-about .ab-use__grid{
	border-top:1px solid #dcded9;border-bottom:1px solid #dcded9;
	display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px}
.svl-about .ab-use__grid article{border-right:1px solid #dcded9;min-height:285px;padding:29px;position:relative}
.svl-about .ab-use__grid article:last-child{border-right:0}
.svl-about .ab-use__grid svg{width:49px;height:49px;color:var(--orange)}
.svl-about .ab-use__grid>article>span{color:#b5b8b5;font-size:10px;position:absolute;top:29px;right:24px}
.svl-about .ab-use__grid h3{margin:59px 0 11px;font-size:19px;font-weight:520}
.svl-about .ab-use__grid p{color:#676c69;font-size:12px;line-height:1.65}

/* ------------------------------------------------------------- як обрати */

.svl-about .ab-choice{
	color:#111516;background:#eceae5;display:grid;grid-template-columns:.62fr 1.38fr;
	gap:65px;padding:105px 6.8vw 115px}
.svl-about .ab-choice h2{letter-spacing:-.05em;margin:16px 0 0;font-size:clamp(39px,3.7vw,60px);font-weight:290;line-height:1.02}
.svl-about .ab-choice__grid{display:grid;grid-template-columns:1fr 1fr 1.18fr}
.svl-about .ab-choice__grid article{
	background:#f4f2ed;border:1px solid #d2d1cc;border-right:0;min-height:310px;padding:29px}
.svl-about .ab-choice__grid article:last-child{border-right:1px solid #d2d1cc}
.svl-about .ab-choice__grid article>span{
	color:var(--orange-deep);letter-spacing:.18em;font-size:9px;font-weight:650}
.svl-about .ab-choice__grid h3{margin:70px 0 20px;font-size:21px;font-weight:500;line-height:1.2}
.svl-about .ab-choice__grid ul{color:#626765;margin:0;padding:0;font-size:11px;line-height:2;list-style:none}
.svl-about .ab-choice__grid li:before{content:"—";color:var(--orange);margin-right:7px}
.svl-about .ab-choice__grid p{color:#d7d9d8;font-size:12px;line-height:1.7}
.svl-about .ab-choice__grid .is-accent{color:#fff;background:#15191a;border-color:#15191a}
.svl-about .ab-choice__grid .is-accent>span{color:var(--orange)}

/* ------------------------------------------------------------- заклик */

.svl-about .ab-cta{
	background:var(--orange);color:#111516;display:flex;justify-content:space-between;
	align-items:center;gap:50px;padding:65px 6.8vw}
.svl-about .ab-cta .ab-eyebrow{color:#62400f;margin:0 0 15px}
.svl-about .ab-cta h2{letter-spacing:-.055em;font-size:clamp(36px,4vw,64px);font-weight:310;line-height:1.02}
.svl-about .ab-cta>a{
	border:1px solid #16191a;display:grid;grid-template-columns:1fr auto;gap:5px 20px;
	min-width:292px;padding:19px 20px;color:#111516}
.svl-about .ab-cta>a span{letter-spacing:.16em;font-size:8px}
.svl-about .ab-cta>a strong{font-size:18px;font-weight:650}
.svl-about .ab-cta>a svg{grid-area:1/2/3;align-self:center;width:22px;height:22px}

/* ------------------------------------------------------------- планшет */

@media (width<=1080px){
	.svl-about .ab-story,
	.svl-about .ab-story--binshi{grid-template-columns:1fr}
	.svl-about .ab-visual{min-height:670px}
	/* На вузькому екрані фото завжди після тексту — і в SAKO, і в BINSHI. */
	.svl-about .ab-story--binshi .ab-copy{order:1}
	.svl-about .ab-story--binshi .ab-visual{order:2}
	.svl-about .ab-use__grid{grid-template-columns:1fr 1fr}
	.svl-about .ab-use__grid article:nth-child(2){border-right:0}
	.svl-about .ab-use__grid article:nth-child(-n+2){border-bottom:1px solid #dcded9}
	.svl-about .ab-choice{grid-template-columns:1fr}
	.svl-about .ab-intro{grid-template-columns:1fr;gap:26px}
}

/* ------------------------------------------------------------- телефон */

@media (width<=720px){
	.svl-about .ab-hero{min-height:680px}
	.svl-about .ab-hero>picture img{object-position:center}
	.svl-about .ab-hero__shade{background:linear-gradient(#0507081f 14%,#050708bf 56%,#050708f7 100%)}
	.svl-about .ab-hero__content{justify-content:flex-end;width:auto;min-height:680px;padding:130px 20px 48px}
	.svl-about .ab-crumbs{font-size:9px;top:20px;left:20px}
	.svl-about .ab-hero h1{font-size:clamp(48px,15vw,68px);line-height:.91}
	.svl-about .ab-lead-hero{margin-top:23px;font-size:14px;line-height:1.6}
	.svl-about .ab-hero__content>a{justify-content:space-between;width:100%;margin-top:25px}
	.svl-about .ab-hero__index{display:none}

	.svl-about .ab-intro{gap:26px;padding:75px 20px 80px}
	.svl-about .ab-intro>.ab-eyebrow{margin:0}
	.svl-about .ab-intro h2{font-size:42px}
	.svl-about .ab-use__head>.ab-eyebrow{margin:0 0 22px}
	.svl-about .ab-intro>div{grid-template-columns:1fr;gap:18px;padding:0}
	.svl-about .ab-intro>div p{font-size:14px;line-height:1.7}

	.svl-about .ab-visual{aspect-ratio:4/5;height:auto;min-height:0}
	.svl-about .ab-story--sako .ab-visual>picture img,
	.svl-about .ab-story--binshi .ab-visual>picture img{object-position:center}
	.svl-about .ab-caption{gap:11px;min-height:51px;padding:0 15px}
	.svl-about .ab-caption p{letter-spacing:.13em;font-size:7px}
	.svl-about .ab-copy{padding:70px 20px 76px}
	.svl-about .ab-mark{gap:10px;margin-bottom:27px;padding-bottom:12px}
	.svl-about .ab-mark strong{font-size:44px}
	.svl-about .ab-mark span{font-size:8px}
	.svl-about .ab-copy h2{font-size:43px}
	.svl-about .ab-lead{margin-top:23px;font-size:14px;line-height:1.7}
	.svl-about .ab-features{margin-top:29px}
	.svl-about .ab-features article{grid-template-columns:38px 1fr;gap:11px}
	.svl-about .ab-features p{font-size:11px}
	.svl-about .ab-actions{display:grid;grid-template-columns:1fr}
	.svl-about .ab-actions>a{justify-content:space-between}
	.svl-about .ab-actions .is-official{justify-content:flex-start}

	.svl-about .ab-strip{padding:76px 20px 72px}
	.svl-about .ab-strip h2{margin:18px 0 45px;font-size:30px}
	.svl-about .ab-flow{display:grid;grid-template-columns:1fr 1fr;gap:26px 12px}
	.svl-about .ab-flow i{display:none}
	.svl-about .ab-flow span{border:1px solid #ffffff1c;justify-content:center;min-height:90px;padding:17px 8px}

	.svl-about .ab-nums{margin-top:30px}
	.svl-about .ab-nums>div{min-height:125px;padding:15px}
	.svl-about .ab-nums strong{font-size:27px}

	.svl-about .ab-use{padding:76px 20px 84px}
	.svl-about .ab-use__head{grid-template-columns:1fr;gap:0}
	.svl-about .ab-use__head h2{font-size:38px}
	.svl-about .ab-use__grid{grid-template-columns:1fr;margin-top:40px}
	.svl-about .ab-use__grid article{border-right:0;border-bottom:1px solid #dcded9;min-height:0;padding:26px 0}
	.svl-about .ab-use__grid article:last-child{border-bottom:0}
	.svl-about .ab-use__grid>article>span{top:26px;right:0}
	.svl-about .ab-use__grid h3{margin:22px 0 9px;font-size:18px}

	.svl-about .ab-choice{gap:34px;padding:76px 20px 84px}
	.svl-about .ab-choice h2{font-size:36px}
	.svl-about .ab-choice__grid{grid-template-columns:1fr}
	.svl-about .ab-choice__grid article{
		border-right:1px solid #d2d1cc;border-bottom:0;min-height:0;padding:26px 22px}
	.svl-about .ab-choice__grid article:last-child{border-bottom:1px solid #d2d1cc}
	.svl-about .ab-choice__grid h3{margin:28px 0 16px;font-size:20px}

	.svl-about .ab-cta{flex-direction:column;align-items:stretch;gap:28px;padding:52px 20px 56px}
	.svl-about .ab-cta h2{font-size:34px}
	.svl-about .ab-cta>a{min-width:0}
}