/* ==========================================================
   Opona 24 — wulkanizacja przy trasie, Warszawa
   Wymiana i przechowalnia opon, rezerwacja slotów SMS
   Paleta: czerń opon + sygnałowy błękit
   Fonty: Barlow Condensed (nagłówki) + Barlow (tekst)
   ========================================================== */

:root{
	--o24-bg:       #ffffff;
	--o24-ink:      #15181c;   /* czerń opony — ciemne pasy, hero, stopka */
	--o24-ink-2:    #1d2126;
	--o24-blue:     #1668e3;   /* sygnałowy błękit — akcent, przyciski */
	--o24-blue-dk:  #1152b8;
	--o24-blue-lt:  #eaf1fd;
	--o24-steel:    #52606c;
	--o24-panel:    #eef1f4;   /* chłodna szarość — panel jak beton */
	--o24-panel-2:  #f5f7f9;
	--o24-line:     #dde2e8;
	--o24-line-dk:  #2c333b;
	--o24-text:     #232a31;
	--o24-muted:    #66727d;
	--o24-muted-lt: #9aa6b0;
	--o24-maxw:     1200px;
	--o24-shadow:   0 16px 40px rgba(21,24,28,.14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
	margin:0;
	font-family:'Barlow', Arial, sans-serif;
	font-size:17px;
	line-height:1.6;
	color:var(--o24-text);
	background:var(--o24-bg);
	-webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--o24-blue-dk); text-decoration:none; }
a:hover{ color:var(--o24-blue); }

h1,h2,h3,h4{
	font-family:'Barlow Condensed', 'Barlow', sans-serif;
	font-weight:600;
	line-height:1.08;
	color:var(--o24-ink);
	margin:0 0 .4em;
	text-transform:uppercase;
	letter-spacing:.5px;
}

p{ margin:0 0 1.1em; }

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

.o24-eyebrow{
	font-family:'Barlow Condensed', sans-serif;
	text-transform:uppercase; letter-spacing:3px;
	font-size:15px; font-weight:600; color:var(--o24-blue-dk);
	display:block; margin:0 0 12px;
}
.o24-lead{ font-size:20px; color:var(--o24-steel); }

/* left accent bar on headings (template DNA, recolored) */
.o24-lb{ position:relative; padding-left:18px; }
.o24-lb::before{ content:""; position:absolute; left:0; top:.08em; bottom:.12em; width:5px; background:var(--o24-blue); }

/* ============ BUTTONS (square, uppercase — template DNA) ============ */
.o24-btn{
	display:inline-block;
	padding:14px 30px;
	font-family:'Barlow Condensed', sans-serif;
	font-size:16px; font-weight:600;
	text-transform:uppercase; letter-spacing:1.5px;
	border-radius:0; border:2px solid transparent; cursor:pointer;
	transition:all .25s ease; line-height:1.1;
}
.o24-btn-blue{ background:var(--o24-blue); color:#fff !important; border-color:var(--o24-blue); }
.o24-btn-blue:hover{ background:var(--o24-blue-dk); border-color:var(--o24-blue-dk); }
.o24-btn-ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.7); }
.o24-btn-ghost:hover{ background:#fff; color:var(--o24-ink) !important; border-color:#fff; }
.o24-btn-dark{ background:var(--o24-ink); color:#fff !important; border-color:var(--o24-ink); }
.o24-btn-dark:hover{ background:var(--o24-ink-2); border-color:var(--o24-ink-2); }
.o24-btn-sm{ padding:11px 22px; font-size:14px; }
.o24-btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============ TOP STRIP ============ */
.o24-topstrip{ background:var(--o24-blue); color:#fff; font-size:14px; }
.o24-topstrip .o24-wrap{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 22px; flex-wrap:wrap; }
.o24-topstrip a{ color:#fff; font-weight:600; }
.o24-topstrip b{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:1px; }

/* ============ HEADER / NAV ============ */
.o24-header{ background:var(--o24-ink); position:sticky; top:0; z-index:900; box-shadow:0 2px 0 rgba(0,0,0,.3); }
.o24-header .o24-wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; }
.o24-brand{ display:flex; align-items:center; gap:12px; }
.o24-brand-mark{
	width:46px; height:46px; flex:0 0 46px;
	background:var(--o24-blue); border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:19px; color:#fff;
}
.o24-brand-txt b{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; letter-spacing:1px; color:#fff; text-transform:uppercase; line-height:1; }
.o24-brand-txt span{ display:block; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--o24-muted-lt); margin-top:4px; }

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

.o24-nav{ display:none; }
.o24-nav ul{ list-style:none; margin:0; padding:0; }
.o24-nav a{
	display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
	letter-spacing:1.5px; font-size:16px; font-weight:600; color:#e6ebef;
	padding:13px 0; border-bottom:1px solid var(--o24-line-dk);
}
.o24-nav a:hover, .o24-nav a.o24-active{ color:var(--o24-blue); }
.o24-nav.o24-open{ display:block; width:100%; margin-top:10px; }

/* ============ HERO ============ */
.o24-hero{ position:relative; color:#fff; background:var(--o24-ink); overflow:hidden; }
.o24-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.o24-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,24,28,.72), rgba(21,24,28,.6) 50%, rgba(21,24,28,.9)); }
.o24-hero-inner{ position:relative; z-index:1; padding:88px 0 96px; text-align:center; }
.o24-script{
	font-family:'Barlow', cursive, sans-serif; font-style:italic; font-weight:500;
	text-transform:none; letter-spacing:0; font-size:26px; color:var(--o24-blue);
	display:block; margin-bottom:6px;
}
.o24-hero h1{ color:#fff; font-size:44px; font-weight:700; letter-spacing:2px; margin:0 0 16px; }
.o24-hero p{ font-size:19px; color:#dbe2e8; max-width:56ch; margin:0 auto 26px; }
.o24-hero .o24-btns{ justify-content:center; }

/* ============ SECTIONS ============ */
.o24-block{ padding:64px 0; }
.o24-panel{ background:var(--o24-panel); }
.o24-panel-2{ background:var(--o24-panel-2); }
.o24-blue-soft{ background:var(--o24-blue-lt); }

.o24-head{ max-width:760px; margin:0 0 38px; }
.o24-head.o24-center{ margin:0 auto 38px; text-align:center; }
.o24-head h2{ font-size:34px; }
.o24-head .o24-lead{ margin-top:8px; }

/* ============ TWO COLUMN (template DNA) ============ */
.o24-two{ display:grid; grid-template-columns:1fr; gap:34px; align-items:center; }
.o24-two-media img{ width:100%; border-radius:2px; box-shadow:var(--o24-shadow); }
.o24-two h2{ font-size:32px; }

/* ============ FULL-WIDTH BLACK BAND ============ */
.o24-band{ position:relative; background:var(--o24-ink); color:#e3e8ed; overflow:hidden; }
.o24-band-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; z-index:0; }
.o24-band-inner{ position:relative; z-index:1; padding:76px 0; text-align:center; }
.o24-band h2{ color:#fff; font-size:34px; }
.o24-band p{ max-width:64ch; margin:0 auto 0; color:#c4ccd3; font-size:19px; }

/* ============ SERVICES GRID ============ */
.o24-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.o24-card{ background:#fff; border:1px solid var(--o24-line); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.o24-card:hover{ transform:translateY(-4px); box-shadow:var(--o24-shadow); }
.o24-card-img{ height:180px; background-size:cover; background-position:center; }
.o24-card-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.o24-card-body h3{ font-size:22px; margin-bottom:8px; }
.o24-card-body p{ font-size:15.5px; color:var(--o24-muted); flex:1; }
.o24-card-link{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-size:15px; font-weight:600; color:var(--o24-blue-dk); margin-top:8px; }
.o24-card-link::after{ content:" \2192"; }
.o24-tag{ display:inline-block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-size:12px; font-weight:600; color:var(--o24-blue-dk); background:var(--o24-blue-lt); padding:3px 10px; margin-bottom:12px; align-self:flex-start; }

/* ============ GALLERY GRID (replaces juicer feed) ============ */
.o24-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.o24-gallery div{ padding-top:74%; background-size:cover; background-position:center; border-radius:2px; }

/* ============ STATS ============ */
.o24-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.o24-stat{ text-align:center; padding:22px 10px; background:#fff; border:1px solid var(--o24-line); }
.o24-stat b{ display:block; font-family:'Barlow Condensed',sans-serif; font-size:40px; color:var(--o24-blue); line-height:1; }
.o24-stat span{ display:block; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--o24-muted); margin-top:8px; }

/* ============ RESERVATION HIGHLIGHT (replaces Follow Us) ============ */
.o24-resv{ background:var(--o24-blue); color:#fff; text-align:center; padding:52px 0; }
.o24-resv h2{ color:#fff; font-size:32px; }
.o24-resv p{ color:#eaf1fd; max-width:56ch; margin:0 auto 22px; font-size:19px; }
.o24-resv .o24-btn-ghost{ border-color:#fff; }

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

/* ============ SUBPAGE HERO ============ */
.o24-phero{ position:relative; color:#fff; background:var(--o24-ink); overflow:hidden; }
.o24-phero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.o24-phero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,24,28,.66), rgba(21,24,28,.86)); }
.o24-phero-inner{ position:relative; z-index:1; padding:66px 0; }
.o24-phero h1{ color:#fff; font-size:38px; margin-bottom:10px; }
.o24-crumb{ font-size:14px; color:var(--o24-muted-lt); letter-spacing:.5px; }
.o24-crumb a{ color:#cdd6de; }
.o24-crumb a:hover{ color:var(--o24-blue); }

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

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

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

/* ============ RESPONSIVE ============ */
@media (min-width:600px){
	.o24-grid{ grid-template-columns:repeat(2,1fr); }
	.o24-gallery{ grid-template-columns:repeat(3,1fr); }
	.o24-stats{ grid-template-columns:repeat(4,1fr); }
	.o24-cookie{ left:auto; right:24px; max-width:460px; }
}
@media (min-width:992px){
	body{ font-size:18px; }
	.o24-toggle{ display:none; }
	.o24-nav{ display:block !important; }
	.o24-nav ul{ display:flex; gap:8px; align-items:center; }
	.o24-nav a{ padding:6px 16px; border-bottom:0; position:relative; }
	.o24-nav a:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:14px; width:1px; background:rgba(255,255,255,.25); }
	.o24-nav a:hover, .o24-nav a.o24-active{ color:var(--o24-blue); }
	.o24-hero h1{ font-size:62px; }
	.o24-script{ font-size:32px; }
	.o24-hero-inner{ padding:120px 0 128px; }
	.o24-two{ grid-template-columns:1fr 1fr; gap:56px; }
	.o24-two.o24-rev .o24-two-media{ order:2; }
	.o24-grid{ grid-template-columns:repeat(3,1fr); }
	.o24-gallery{ grid-template-columns:repeat(6,1fr); }
	.o24-contact{ grid-template-columns:1fr 1fr; }
	.o24-related{ grid-template-columns:repeat(2,1fr); }
	.o24-foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; }
	.o24-head h2{ font-size:40px; }
	.o24-band h2{ font-size:42px; }
	.o24-phero h1{ font-size:48px; }
}
@media (min-width:992px){
	.o24-hero-bg, .o24-band-bg, .o24-phero-bg{ background-attachment:fixed; }
}