/* ==========================================================
   Serwis Kowalczyk i Synowie — warsztat, Warszawa
   Zawieszenia i hamulce, auta francuskie
   Paleta: grafit warsztatowy + bursztyn sygnałowy
   Fonty: Oswald (nagłówki) + Source Sans 3 (tekst)
   ========================================================== */

:root{
	--sks-bg:        #ffffff;
	--sks-ink:       #18212b;   /* grafitowy granat — ciemne sekcje */
	--sks-ink-2:     #202b37;
	--sks-amber:     #e08a1e;   /* bursztyn — przyciski, akcent */
	--sks-amber-dk:  #c4741a;
	--sks-steel:     #46586a;   /* stalowy błękit, wyciszony */
	--sks-panel:     #f0ebe2;   /* ciepła kość słoniowa — panel */
	--sks-panel-2:   #f6f3ee;
	--sks-line:      #e2ded6;
	--sks-line-dk:   #33414f;
	--sks-text:      #2e3a45;
	--sks-muted:     #6a7883;
	--sks-muted-lt:  #9aa6b0;
	--sks-white:     #ffffff;
	--sks-maxw:      1160px;
	--sks-radius:    3px;
	--sks-shadow:    0 12px 34px rgba(24,33,43,.10);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	font-family:'Source Sans 3', Arial, sans-serif;
	font-size:16px;
	line-height:1.7;
	color:var(--sks-text);
	background:var(--sks-bg);
	-webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--sks-amber-dk); text-decoration:none; }
a:hover{ color:var(--sks-amber); }

h1,h2,h3,h4{
	font-family:'Oswald', 'Source Sans 3', sans-serif;
	font-weight:600;
	line-height:1.15;
	color:var(--sks-ink);
	margin:0 0 .5em;
	letter-spacing:.5px;
}

p{ margin:0 0 1.1em; }

.sks-wrap{
	width:100%;
	max-width:var(--sks-maxw);
	margin:0 auto;
	padding:0 22px;
}

.sks-upper{ text-transform:uppercase; letter-spacing:2px; }

.sks-eyebrow{
	font-family:'Oswald', sans-serif;
	text-transform:uppercase;
	letter-spacing:3px;
	font-size:13px;
	font-weight:500;
	color:var(--sks-amber-dk);
	margin:0 0 14px;
	display:block;
}

.sks-lead{ font-size:19px; color:var(--sks-steel); }

/* ============ BUTTONS ============ */
.sks-btn{
	display:inline-block;
	padding:13px 28px;
	font-family:'Oswald', sans-serif;
	font-size:14px;
	font-weight:500;
	text-transform:uppercase;
	letter-spacing:1.5px;
	border-radius:var(--sks-radius);
	border:2px solid transparent;
	cursor:pointer;
	transition:all .25s ease;
	line-height:1.2;
}
.sks-btn-amber{ background:var(--sks-amber); color:#1a1204 !important; border-color:var(--sks-amber); }
.sks-btn-amber:hover{ background:var(--sks-amber-dk); border-color:var(--sks-amber-dk); color:#1a1204; }
.sks-btn-ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.75); }
.sks-btn-ghost:hover{ background:#fff; color:var(--sks-ink) !important; border-color:#fff; }
.sks-btn-dark{ background:var(--sks-ink); color:#fff !important; border-color:var(--sks-ink); }
.sks-btn-dark:hover{ background:var(--sks-ink-2); border-color:var(--sks-ink-2); }
.sks-btn-lg{ padding:16px 36px; font-size:15px; }

/* ============ TOP STRIP ============ */
.sks-topstrip{
	background:var(--sks-ink);
	color:#cdd6de;
	font-size:13.5px;
	border-bottom:1px solid var(--sks-line-dk);
}
.sks-topstrip .sks-wrap{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	padding-top:9px;
	padding-bottom:9px;
	flex-wrap:wrap;
}
.sks-topstrip a{ color:#fff; font-weight:600; }
.sks-topstrip a:hover{ color:var(--sks-amber); }
.sks-topstrip .sks-spec{ text-transform:uppercase; letter-spacing:1.5px; font-size:12px; color:var(--sks-muted-lt); }

/* ============ HEADER / NAV ============ */
.sks-header{
	background:var(--sks-ink-2);
	position:sticky;
	top:0;
	z-index:900;
	box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.sks-header .sks-wrap{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-top:14px;
	padding-bottom:14px;
}
.sks-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.sks-brand-mark{
	width:44px; height:44px; flex:0 0 44px;
	border:2px solid var(--sks-amber);
	border-radius:var(--sks-radius);
	display:flex; align-items:center; justify-content:center;
	font-family:'Oswald', sans-serif; font-weight:700; font-size:19px;
	color:var(--sks-amber);
	letter-spacing:-1px;
}
.sks-brand-txt b{
	display:block;
	font-family:'Oswald', sans-serif;
	font-weight:600;
	font-size:19px;
	letter-spacing:1px;
	color:#fff;
	text-transform:uppercase;
	line-height:1;
}
.sks-brand-txt span{
	display:block;
	font-size:11.5px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:var(--sks-muted-lt);
	margin-top:4px;
}

.sks-nav-toggle{
	display:inline-flex; flex-direction:column; gap:5px;
	background:none; border:0; cursor:pointer; padding:8px;
}
.sks-nav-toggle span{ width:26px; height:2px; background:#fff; display:block; transition:.25s; }

.sks-nav{ display:none; }
.sks-nav ul{ list-style:none; margin:0; padding:0; }
.sks-nav a{
	display:block;
	font-family:'Oswald', sans-serif;
	text-transform:uppercase;
	letter-spacing:1.5px;
	font-size:14px;
	font-weight:400;
	color:#e6ebef;
	padding:12px 0;
	border-bottom:1px solid var(--sks-line-dk);
}
.sks-nav a:hover, .sks-nav a.sks-active{ color:var(--sks-amber); }
.sks-nav.sks-open{ display:block; width:100%; margin-top:12px; }

/* ============ HERO ============ */
.sks-hero{
	position:relative;
	color:#fff;
	background:var(--sks-ink);
	overflow:hidden;
}
.sks-hero-bg{
	position:absolute; inset:0;
	background-size:cover; background-position:center;
	z-index:0;
}
.sks-hero-bg::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(18,24,31,.82) 0%, rgba(18,24,31,.68) 55%, rgba(18,24,31,.9) 100%);
}
.sks-hero-inner{ position:relative; z-index:1; padding:96px 0 104px; }
.sks-hero h1{
	color:#fff;
	font-size:38px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:18px;
	max-width:15ch;
}
.sks-hero h1 em{ color:var(--sks-amber); font-style:normal; }
.sks-hero .sks-eyebrow{ color:var(--sks-amber); }
.sks-hero p{ font-size:18px; color:#dbe2e8; max-width:52ch; }
.sks-hero-cta{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }

/* ============ SECTIONS ============ */
.sks-block{ padding:70px 0; }
.sks-block-tight{ padding:52px 0; }
.sks-panel{ background:var(--sks-panel); }
.sks-panel-2{ background:var(--sks-panel-2); }
.sks-dark{ background:var(--sks-ink); color:#d4dbe1; }
.sks-dark h1,.sks-dark h2,.sks-dark h3{ color:#fff; }

.sks-head{ max-width:720px; margin:0 0 40px; }
.sks-head.sks-center{ margin-left:auto; margin-right:auto; text-align:center; }
.sks-head h2{ font-size:31px; text-transform:uppercase; }
.sks-rule{ width:56px; height:3px; background:var(--sks-amber); border:0; margin:16px 0 0; }
.sks-center .sks-rule{ margin-left:auto; margin-right:auto; }

/* ============ INTRO / ABOUT ============ */
.sks-split{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.sks-frame{
	position:relative;
	border:8px solid #fff;
	box-shadow:var(--sks-shadow);
	border-radius:var(--sks-radius);
	overflow:hidden;
}
.sks-frame img{ width:100%; }
.sks-badge{
	position:absolute; left:0; bottom:0;
	background:var(--sks-amber);
	color:#1a1204;
	font-family:'Oswald', sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:600;
	font-size:13px;
	padding:10px 16px;
}

/* ============ VALUES / TILES ============ */
.sks-tiles{ display:grid; grid-template-columns:1fr; gap:26px; }
.sks-tile{ text-align:center; padding:8px; }
.sks-tile-ic{
	width:60px; height:60px; margin:0 auto 16px;
	display:flex; align-items:center; justify-content:center;
	border:2px solid var(--sks-amber); border-radius:50%;
}
.sks-tile-ic svg{ width:28px; height:28px; stroke:var(--sks-amber); fill:none; stroke-width:1.7; }
.sks-tile b{
	display:block; font-family:'Oswald', sans-serif; text-transform:uppercase;
	letter-spacing:1.5px; font-size:16px; color:#fff; margin-bottom:6px;
}
.sks-tile span{ font-size:14.5px; color:#aeb9c2; }

/* ============ SERVICES GRID ============ */
.sks-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
.sks-card{
	background:#fff;
	border:1px solid var(--sks-line);
	border-radius:var(--sks-radius);
	overflow:hidden;
	display:flex; flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease;
}
.sks-card:hover{ transform:translateY(-4px); box-shadow:var(--sks-shadow); }
.sks-card-img{ height:190px; background-size:cover; background-position:center; }
.sks-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.sks-card-body h3{ font-size:20px; text-transform:uppercase; margin-bottom:8px; }
.sks-card-body p{ font-size:15px; color:var(--sks-muted); flex:1; }
.sks-card-link{
	font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:1.5px;
	font-size:13.5px; font-weight:500; color:var(--sks-amber-dk); margin-top:6px;
}
.sks-card-link:hover{ color:var(--sks-amber); }
.sks-card-link::after{ content:" \2192"; }

/* ============ OPINIE ============ */
.sks-quotes{ display:grid; grid-template-columns:1fr; gap:26px; }
.sks-quote{
	background:#fff; border:1px solid var(--sks-line);
	border-left:4px solid var(--sks-amber);
	border-radius:var(--sks-radius);
	padding:26px 24px;
}
.sks-quote p{ font-style:italic; color:var(--sks-text); font-size:16px; margin-bottom:14px; }
.sks-quote cite{
	font-style:normal; font-family:'Oswald', sans-serif; text-transform:uppercase;
	letter-spacing:1.5px; font-size:13px; color:var(--sks-muted);
}

/* ============ KONTAKT ============ */
.sks-contact{ display:grid; grid-template-columns:1fr; gap:34px; align-items:start; }
.sks-contact-list{ list-style:none; margin:0 0 8px; padding:0; }
.sks-contact-list li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--sks-line); }
.sks-contact-list li:last-child{ border-bottom:0; }
.sks-contact-ic{ flex:0 0 24px; margin-top:3px; }
.sks-contact-ic svg{ width:22px; height:22px; stroke:var(--sks-amber-dk); fill:none; stroke-width:1.7; }
.sks-contact-list b{ display:block; font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:13px; color:var(--sks-muted); margin-bottom:2px; }
.sks-contact-list a{ color:var(--sks-text); font-size:17px; font-weight:600; }
.sks-contact-list a:hover{ color:var(--sks-amber-dk); }
.sks-map{ border:0; width:100%; height:340px; border-radius:var(--sks-radius); box-shadow:var(--sks-shadow); }

/* ============ CTA STRIP ============ */
.sks-cta{
	position:relative; color:#fff; text-align:center; overflow:hidden;
	background:var(--sks-ink);
}
.sks-cta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.sks-cta-bg::after{ content:""; position:absolute; inset:0; background:rgba(18,24,31,.84); }
.sks-cta-inner{ position:relative; z-index:1; padding:64px 0; }
.sks-cta h2{ color:#fff; font-size:29px; text-transform:uppercase; }
.sks-cta p{ color:#cdd6de; max-width:56ch; margin:0 auto 24px; }

/* ============ SUBPAGE HERO ============ */
.sks-pagehero{ position:relative; color:#fff; background:var(--sks-ink); overflow:hidden; }
.sks-pagehero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.sks-pagehero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,24,31,.7), rgba(18,24,31,.88)); }
.sks-pagehero-inner{ position:relative; z-index:1; padding:70px 0; }
.sks-pagehero h1{ color:#fff; font-size:32px; text-transform:uppercase; margin-bottom:10px; }
.sks-crumb{ font-size:13.5px; color:var(--sks-muted-lt); letter-spacing:1px; }
.sks-crumb a{ color:#cdd6de; }
.sks-crumb a:hover{ color:var(--sks-amber); }

/* ============ ARTICLE ============ */
.sks-article{ max-width:760px; }
.sks-article h2{ font-size:25px; text-transform:uppercase; margin-top:34px; }
.sks-article h3{ font-size:20px; margin-top:26px; }
.sks-article ul{ padding-left:20px; margin:0 0 1.2em; }
.sks-article li{ margin-bottom:8px; }
.sks-note{
	background:var(--sks-panel); border-left:4px solid var(--sks-amber);
	padding:18px 22px; border-radius:var(--sks-radius); margin:24px 0;
	font-size:15px; color:var(--sks-steel);
}
.sks-related{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
.sks-related a{
	display:block; padding:14px 18px; background:#fff; border:1px solid var(--sks-line);
	border-radius:var(--sks-radius); font-family:'Oswald', sans-serif; text-transform:uppercase;
	letter-spacing:1px; font-size:14px; color:var(--sks-ink);
}
.sks-related a:hover{ border-color:var(--sks-amber); color:var(--sks-amber-dk); }

/* ============ FOOTER ============ */
.sks-foot{ background:var(--sks-ink); color:#9aa6b0; padding:56px 0 0; font-size:14.5px; }
.sks-foot-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
.sks-foot h4{ color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; }
.sks-foot ul{ list-style:none; margin:0; padding:0; }
.sks-foot li{ margin-bottom:9px; }
.sks-foot a{ color:#9aa6b0; }
.sks-foot a:hover{ color:var(--sks-amber); }
.sks-foot-brand b{ font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:1px; color:#fff; font-size:18px; display:block; margin-bottom:10px; }
.sks-foot-bottom{
	border-top:1px solid var(--sks-line-dk); margin-top:44px; padding:20px 0;
	font-size:13px; color:#7d8993;
	display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.sks-foot-bottom ul{ display:flex; gap:18px; flex-wrap:wrap; }
.sks-foot-bottom li{ margin:0; }

/* ============ COOKIE BANNER ============ */
.sks-cookie{
	position:fixed; left:16px; right:16px; bottom:16px; z-index:1200;
	background:var(--sks-ink-2); color:#dbe2e8;
	border:1px solid var(--sks-line-dk); border-radius:var(--sks-radius);
	box-shadow:0 14px 40px rgba(0,0,0,.4);
	padding:20px 22px;
	display:none;
}
.sks-cookie.sks-show{ display:block; }
.sks-cookie p{ margin:0 0 14px; font-size:14px; }
.sks-cookie a{ color:var(--sks-amber); }
.sks-cookie-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.sks-cookie .sks-btn{ padding:10px 18px; font-size:13px; }
.sks-btn-line{ background:transparent; color:#cdd6de !important; border-color:var(--sks-line-dk); }
.sks-btn-line:hover{ border-color:#fff; color:#fff !important; }

/* ============ RESPONSIVE ============ */
@media (min-width:600px){
	.sks-tiles{ grid-template-columns:repeat(2,1fr); }
	.sks-grid{ grid-template-columns:repeat(2,1fr); }
	.sks-quotes{ grid-template-columns:repeat(2,1fr); }
	.sks-cookie{ left:auto; right:24px; max-width:440px; }
}
@media (min-width:860px){
	body{ font-size:17px; }
	.sks-nav-toggle{ display:none; }
	.sks-nav{ display:block !important; }
	.sks-nav ul{ display:flex; gap:26px; align-items:center; }
	.sks-nav a{ padding:6px 0; border-bottom:2px solid transparent; }
	.sks-nav a:hover, .sks-nav a.sks-active{ border-bottom-color:var(--sks-amber); color:#fff; }
	.sks-hero h1{ font-size:52px; }
	.sks-hero-inner{ padding:120px 0 130px; }
	.sks-split{ grid-template-columns:1.05fr .95fr; gap:54px; }
	.sks-split.sks-rev .sks-split-media{ order:2; }
	.sks-tiles{ grid-template-columns:repeat(4,1fr); }
	.sks-grid{ grid-template-columns:repeat(3,1fr); }
	.sks-contact{ grid-template-columns:1fr 1fr; }
	.sks-related{ grid-template-columns:repeat(2,1fr); }
	.sks-foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
	.sks-head h2{ font-size:36px; }
	.sks-pagehero h1{ font-size:40px; }
	.sks-cta h2{ font-size:34px; }
}
@media (min-width:860px){
	.sks-hero-bg, .sks-cta-bg, .sks-pagehero-bg{ background-attachment:fixed; }
}