/*
  KOLORY — zmieniaj wyłącznie te wartości, aby zmienić motyw strony.
*/
:root {
  --color-ink: #151515;
  --color-ink-soft: #252525;
  --color-paper: #efede7;
  --color-paper-alt: #dedbd3;
  --color-primary:  #4f7f12;
  --color-primary-dark: #4f7f12;
  --color-text-light: #ffffff;
  --color-text-soft: #d4d4d4;
  --color-muted: #77736c;
  --color-border: #cac6bd;
  --color-border-soft: #c7c2b9;
  --color-overlay: rgb(0 0 0 / 43%);
  --color-overlay-light: rgb(0 0 0 / 47%);
  --color-footer-text: #eeeeee;
  --color-footer-muted: #dddddd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: Manrope, Arial, sans-serif; }

.topline { height: 28px; padding: 0 4vw; background: var(--color-ink); color: var(--color-paper); display: flex; justify-content: space-between; align-items: center; font: 9px/1 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.topline a { color: inherit; text-decoration: none; }
.header { height: 58px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); position: relative; background: var(--color-paper); z-index: 5; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { display: block; width: 108px; height: 39px; object-fit: contain; mix-blend-mode: multiply; }
.nav { display: flex; align-items: center; gap: 29px; }
.nav a { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--color-ink); text-decoration: none; }
.nav-cta { background: var(--color-primary-dark); padding: 11px 15px !important; color: var(--color-text-light) !important; }
.nav-cta i { font-style: normal; font-size: 15px; margin-left: 8px; }
.menu-toggle { display: none; border: 0; background: none; padding: 10px; }
.menu-toggle span { display: block; width: 25px; height: 2px; background: var(--color-ink); margin: 5px; }

.hero { height: calc(100vh - 90px); min-height: 600px; position: relative; background: var(--color-ink-soft); overflow: hidden; color: var(--color-text-light); }
.hero-photo, .coach-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-photo { background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1800&q=85'); filter: grayscale(100%); }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--color-overlay); }
.hero-copy { position: relative; z-index: 1; max-width: 880px; padding: 11vh 4vw; }
.eyebrow, .section-label { font: 10px/1 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.hero h1, h2, h3 { font-family: 'Barlow Condensed', Impact, sans-serif; margin: 0; font-weight: 800; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(75px, 10.3vw, 160px); line-height: .78; }
.hero h1 em, h2 em { font-style: italic; color: var(--color-primary); }
.lead { font-size: 15px; line-height: 1.7; max-width: 410px; margin: 35px 0 28px; color: var(--color-footer-text); }
.button { display: inline-flex; align-items: center; gap: 32px; text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 16px 18px; }
.button-light { background: var(--color-paper); color: var(--color-ink); }
.button span { font-size: 19px; }
.hero-foot { position: absolute; z-index: 1; bottom: 25px; left: 4vw; right: 4vw; display: flex; justify-content: space-between; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }

.section { padding: 120px 4vw; display: grid; grid-template-columns: 22% 1fr; }
.section-label { color: var(--color-muted); }
.intro-content { max-width: 900px; }
.intro h2, .hours h2 { font-size: clamp(54px, 7vw, 105px); line-height: .82; }
.intro p { max-width: 515px; margin: 34px 0 0; font-size: 16px; line-height: 1.75; }

.areas { display: grid; grid-template-columns: repeat(3, 1fr); }
.area { min-height: 430px; padding: 30px 32px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; color: var(--color-text-light); overflow: hidden; }
.area-dark { background: var(--color-ink-soft); }
.area-red { background: var(--color-primary-dark); }
.area-image { background: url('https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?auto=format&fit=crop&w=900&q=85') center/cover; }
.area-image::before { content: ''; position: absolute; inset: 0; background: var(--color-overlay-light); }
.area-image > * { position: relative; }
.area-number { position: absolute; top: 30px; font: 12px 'DM Mono', monospace; }
.area h3 { font-size: 71px; line-height: .8; }
.area p { font-size: 13px; max-width: 210px; line-height: 1.5; margin: 13px 0 0; }
.area-line { width: 100%; height: 1px; background: currentColor; margin-top: 28px; opacity: .65; }

.statement { padding: 145px 4vw 125px; background: var(--color-paper-alt); }
.statement-main { margin: 43px 0 0 22%; position: relative; }
.quote-mark { font: 900 105px/.3 Georgia, serif; color: var(--color-primary-dark); position: absolute; left: -68px; top: -7px; }
.statement h2 { font-size: clamp(62px, 8vw, 122px); line-height: .8; }
.statement-note { max-width: 300px; margin: 45px 0 0 calc(22% + 4px); font-size: 14px; line-height: 1.75; }

.coaching { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 650px; background: var(--color-ink); color: var(--color-text-light); }
.coach-photo { position: relative; background-image: url('https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?auto=format&fit=crop&w=1100&q=85'); filter: grayscale(100%); background-position: center; }
.coach-copy { padding: 100px 10% 70px; }
.coach-copy h2 { font-size: clamp(64px, 6vw, 105px); line-height: .8; margin: 25px 0; }
.coach-copy p:not(.eyebrow) { font-size: 14px; line-height: 1.75; max-width: 330px; color: var(--color-text-soft); }
.text-link { color: var(--color-text-light); text-decoration: none; display: inline-flex; gap: 27px; margin-top: 30px; border-bottom: 1px solid var(--color-primary); padding-bottom: 9px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.text-link span { color: var(--color-primary); font-size: 17px; }

.hours { padding-top: 130px; padding-bottom: 140px; }
.hours-content { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: start; }
.schedule { border-top: 2px solid var(--color-ink); }
.schedule-row { padding: 20px 0; border-bottom: 1px solid var(--color-border-soft); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.schedule-row strong { font: 500 13px 'DM Mono', monospace; }
.schedule-row.active { color: var(--color-primary-dark); }
.schedule-row.active::before { content: 'DZIŚ'; font: 9px 'DM Mono', monospace; position: absolute; margin-left: -38px; letter-spacing: .05em; }
.hours-note { font-size: 10px; line-height: 1.7; color: var(--color-muted); margin-top: 22px; }

.contact { background: var(--color-primary-dark); color: var(--color-text-light); padding: 105px 4vw; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.contact h2 { font-size: clamp(62px, 7vw, 113px); line-height: .8; margin-top: 26px; }
.contact h2 em { color: var(--color-text-light); }
.contact-details { padding-top: 8px; display: flex; flex-direction: column; align-items: start; gap: 22px; }
.contact-details a { font-size: 14px; color: var(--color-text-light); text-decoration: none; border-bottom: 1px solid var(--color-text-light); padding-bottom: 10px; }
.contact-details .address { font-size: 22px; line-height: 1.4; border: 0; padding: 0; margin-bottom: 25px; }
.contact-details span { margin-left: 12px; }

footer { padding: 28px 4vw; background: var(--color-ink); color: var(--color-footer-text); display: flex; align-items: center; justify-content: space-between; }
footer .logo img { width: 92px; height: 33px; mix-blend-mode: normal; }
footer p, footer a:not(.logo) { font: 10px 'DM Mono', monospace; letter-spacing: .06em; color: var(--color-footer-muted); text-decoration: none; text-transform: uppercase; }

@media (max-width: 750px) {
  .topline { height: 25px; padding: 0 20px; font-size: 8px; }
  .header { height: 56px; padding: 0 20px; }
  .logo img { width: 94px; height: 34px; }
  .nav { display: none; position: absolute; top: 55px; left: 0; right: 0; background: var(--color-paper); padding: 20px; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--color-border); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; }
  .nav-cta { text-align: center; margin-top: 8px; }
  .menu-toggle { display: block; }
  .hero { height: calc(100vh - 81px); min-height: 540px; }
  .hero-photo { background-position: 58% center; }
  .hero-copy { padding: 12vh 20px; }
  .hero h1 { font-size: 68px; }
  .lead { font-size: 13px; margin-top: 25px; }
  .hero-foot { left: 20px; right: 20px; font-size: 8px; }
  .section { padding: 72px 20px; display: block; }
  .section-label { margin-bottom: 38px; }
  .intro h2, .hours h2 { font-size: 55px; }
  .intro p { font-size: 14px; margin-top: 26px; }
  .areas { grid-template-columns: 1fr; }
  .area { min-height: 315px; padding: 24px 20px; }
  .area-number { top: 24px; left: 20px; }
  .area h3 { font-size: 65px; }
  .statement { padding: 80px 20px; }
  .statement-main { margin: 35px 0 0 20px; }
  .quote-mark { left: -25px; font-size: 70px; }
  .statement h2 { font-size: 60px; }
  .statement-note { margin: 35px 0 0 20px; }
  .coaching { grid-template-columns: 1fr; }
  .coach-photo { min-height: 370px; }
  .coach-copy { padding: 70px 20px; }
  .coach-copy h2 { font-size: 64px; }
  .hours-content { display: block; }
  .schedule { margin-top: 38px; }
  .schedule-row { font-size: 11px; }
  .schedule-row strong { font-size: 10px; }
  .schedule-row.active::before { display: none; }
  .contact { padding: 75px 20px; grid-template-columns: 1fr; gap: 48px; }
  .contact h2 { font-size: 62px; }
  .contact-details .address { font-size: 18px; }
  footer { padding: 23px 20px; ;}
  footer .logo img { width: 82px; height: 30px; }
  footer p { display: none; }
}
