/*
Theme Name: WAMA Media Group
Theme URI: https://wamamedia.pl/
Author: WAMA MEDIA Group
Description: Jednostronicowy motyw firmowy WAMA MEDIA Group.
Version: 1.1.0
Text Domain: wama-media
*/

:root {
  --ink: #10233b;
  --paper: #f4f7fa;
  --cream: #e5edf5;
  --green: #073f7d;
  --lime: #56a7e8;
}

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

.site-header {
  min-height: 116px;
  padding: 28px clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(16, 35, 59, .16);
}
.wordmark { display: flex; flex-direction: column; line-height: .8; }
.wordmark span { font-size: 29px; font-weight: 900; letter-spacing: -.055em; }
.wordmark small { margin-top: 9px; font-size: 9px; font-weight: 700; letter-spacing: .31em; }
.header-contact {
  padding-bottom: 5px;
  border-bottom: 1px solid;
  font-size: 13px;
  font-weight: 700;
}

.hero {
  min-height: 660px;
  padding: 92px clamp(24px, 8.3vw, 126px) 90px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "W";
  position: absolute;
  right: -2vw;
  bottom: -18vw;
  color: rgba(7, 63, 125, .065);
  font-size: min(58vw, 820px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.13em;
  pointer-events: none;
}
.eyebrow, .section-label {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 700;
}
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 30px; height: 2px; background: var(--lime); }
.hero h1 {
  margin: 32px 0 28px;
  max-width: 900px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(70px, 10vw, 148px);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .78;
}
.hero > p {
  max-width: 570px;
  margin: 0 0 38px;
  color: #4c5c6d;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
}
.primary-link {
  display: inline-flex;
  gap: 42px;
  padding: 17px 22px;
  background: var(--green);
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.primary-link span { color: var(--lime); }

.about, .contact {
  padding: 105px clamp(24px, 8.3vw, 126px);
  display: grid;
  grid-template-columns: minmax(160px, .65fr) 2fr;
  gap: 70px;
  border-top: 1px solid rgba(16, 35, 59, .16);
}
.section-label { padding-top: 9px; color: #68788a; }
.about h2, .contact h2 {
  margin: 0 0 30px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5.2vw, 74px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1;
}
.about-copy > p {
  max-width: 720px;
  margin: 0;
  color: #526477;
  font-size: 18px;
  line-height: 1.75;
}

.project {
  padding: 90px clamp(24px, 8.3vw, 126px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 90px;
  background: var(--green);
  color: white;
}
.section-label.light { color: #b7cde2; }
.tko-mark {
  margin-top: 66px;
  color: white;
  font-size: clamp(72px, 12vw, 162px);
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: .75;
}
.tko-mark span { color: var(--lime); font-size: .38em; letter-spacing: -.04em; }
.project-copy h2 {
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(35px, 4vw, 57px);
  font-weight: 400;
  letter-spacing: -.045em;
}
.project-copy p { max-width: 510px; color: #d1dfec; font-size: 17px; line-height: 1.7; }
.project-copy a {
  display: inline-flex;
  gap: 50px;
  margin-top: 20px;
  padding-bottom: 7px;
  border-bottom: 1px solid #78a1c8;
  font-size: 13px;
  font-weight: 700;
}
.project-copy a span { color: var(--lime); }
.advertising {
  margin-top: 42px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.advertising small {
  display: block;
  margin-bottom: 11px;
  color: #b7cde2;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.advertising a {
  margin: 0;
  gap: 32px;
  border-bottom-color: rgba(255, 255, 255, .55);
  font-size: 16px;
}

.contact { grid-template-columns: 1fr 1fr; }
.contact .section-label { margin-bottom: 46px; }
.email {
  display: inline-block;
  margin: 5px 0 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid;
  font-size: clamp(19px, 2vw, 26px);
}
address { color: #617285; font-size: 15px; font-style: normal; line-height: 1.7; }
.company-data { padding-top: 72px; }
.company-data h3 { margin: 0 0 28px; font-size: 16px; }
.data-row {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid rgba(16, 35, 59, .16);
  font-size: 13px;
}
.data-row span, .bank span { color: #6e7e8f; }
.data-row strong { font-weight: 600; }
.bank { padding-top: 22px; border-top: 1px solid rgba(16, 35, 59, .16); }
.bank span, .bank strong { display: block; }
.bank span { margin-bottom: 9px; font-size: 11px; }
.bank strong { font-size: 13px; font-weight: 600; letter-spacing: .03em; }

footer {
  padding: 26px clamp(24px, 5vw, 76px);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(16, 35, 59, .16);
  color: #6b7b8c;
  font-size: 11px;
}

@media (max-width: 720px) {
  .site-header { min-height: 92px; padding-top: 20px; padding-bottom: 20px; }
  .hero { min-height: 590px; padding-top: 72px; }
  .hero h1 { font-size: clamp(62px, 22vw, 92px); }
  .hero::after { right: -8vw; bottom: -6vw; font-size: 95vw; }
  .about, .contact, .project { grid-template-columns: 1fr; gap: 45px; padding-top: 74px; padding-bottom: 74px; }
  .section-label { padding-top: 0; }
  .tko-mark { margin-top: 40px; }
  .company-data { padding-top: 15px; }
  .data-row { align-items: flex-end; }
  .bank strong { line-height: 1.7; }
}