/* BEATA WOŚ — spójny, responsywny projekt w jednym pliku CSS */
:root {
  color-scheme: light;
  --canvas: #f8f7f2;
  --paper: #fffefb;
  --pale: #eff0e7;
  --green: #36523d;
  --green-darker: #28402f;
  --green-mid: #677d67;
  --ink: #263329;
  --muted: #637067;
  --line: #d9dfd6;
  --container: 1160px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --header-bg: rgb(248 247 242 / 95%);
  --button-ink: #fffefb;
  --statement-bg: #36523d;
  --statement-ink: #f7f7ee;
  --statement-accent: #d7e0d0;
  --statement-symbol: #bccbb7;
  --booking-bg: #e9ede3;
  --booking-border: #d8dfd1;
  --booking-accent: #8da78b;
  --selected-bg: #e8efe6;
  --input-bg: #fffefb;
  --shadow-color: rgb(39 60 44 / 5%);
  --nav-shadow: rgb(38 51 41 / 6%);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #141a16;
  --paper: #202922;
  --pale: #27332a;
  --green: #b0d3b3;
  --green-darker: #c8e4c9;
  --green-mid: #b7cbb5;
  --ink: #f1f4ee;
  --muted: #c2cfc2;
  --line: #3c4d40;
  --header-bg: rgb(20 26 22 / 95%);
  --button-ink: #122019;
  --statement-bg: #29412f;
  --statement-ink: #f2f5ec;
  --statement-accent: #d4e5d0;
  --statement-symbol: #c0d6bb;
  --booking-bg: #1b271f;
  --booking-border: #425747;
  --booking-accent: #98b79b;
  --selected-bg: #344a3a;
  --input-bg: #27332a;
  --shadow-color: rgb(0 0 0 / 20%);
  --nav-shadow: rgb(0 0 0 / 25%);
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:84px}
body {margin:0; min-width:280px; font-family:var(--sans); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; line-height:1.65}
a {color:inherit; text-decoration:none}
img,svg {display:block; max-width:100%}
button,input,select {font:inherit}
button,a,input,select { -webkit-tap-highlight-color:transparent }
:focus-visible {outline:3px solid #9cb898; outline-offset:4px}
.container {width:min(var(--container), calc(100% - 72px)); margin-inline:auto}
.skip-link {position:fixed; top:10px; left:10px; z-index:500; padding:10px 16px; background:var(--paper); transform:translateY(-170%)}
.skip-link:focus {transform:translateY(0)}
.section {padding:116px 0}
.section-kicker {font-size:12px; letter-spacing:.18em; color:var(--green-mid); text-transform:uppercase; font-weight:750; line-height:1.4; margin:0 0 24px}
h1,h2,h3,p,figure {margin-top:0}
h1,h2 {font-family:var(--serif); font-weight:normal; letter-spacing:-.042em}
h1 em,h2 em,.statement em {font-weight:normal; color:var(--green-mid)}
h2 {font-size:clamp(39px,4.2vw,61px); line-height:1.15; margin-bottom:24px}
p {line-height:1.8}

/* Header */
.site-header {position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:blur(15px); border-bottom:1px solid var(--line)}
.header-layout {min-height:84px; display:flex; justify-content:space-between; align-items:center; gap:24px}
.brand {display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:0}
.brand img {width:46px; height:46px; object-fit:contain}
.brand-copy,.footer-brand span {display:flex; flex-direction:column; line-height:1.32}
.brand-copy strong,.footer-brand strong {font-family:var(--serif); font-size:23px; font-weight:normal; letter-spacing:-.02em}
.brand-copy small {font-size:10px; letter-spacing:.045em; color:var(--muted); white-space:nowrap}
.main-nav {order:2; display:flex; align-items:center; gap:30px; margin-left:auto}
.main-nav>a {font-size:13px; font-weight:550; transition:color .2s ease; white-space:nowrap}
.main-nav>a:hover {color:var(--green-mid)}
.main-nav .nav-cta {border:1px solid var(--green); color:var(--green); padding:11px 18px; transition:color .2s ease,background .2s ease}
.main-nav .nav-cta:hover {color:var(--button-ink); background:var(--green)}
.nav-cta span {margin-left:12px}
.menu-toggle {display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; height:44px; width:44px; padding:0; background:transparent; color:var(--green); border:1px solid var(--line); border-radius:2px; cursor:pointer}
.menu-toggle span {width:20px; height:1.5px; background:currentColor; transition:transform .2s ease, opacity .2s ease}


/* Light/dark theme toggle: keyboard and touch friendly. */
.header-actions {order:3; display:flex; align-items:center; justify-content:flex-end; flex-shrink:0; gap:9px}
.theme-toggle {display:inline-flex; gap:8px; align-items:center; justify-content:center; min-height:42px; padding:9px 11px; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:3px; font-size:12px; font-weight:650; cursor:pointer; white-space:nowrap; transition:background .18s ease,border-color .18s ease}
.theme-toggle:hover {background:var(--pale); border-color:var(--green-mid)}
.theme-icon {width:19px; height:19px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.theme-icon-sun {display:none}
html[data-theme="dark"] .theme-icon-sun {display:block}
html[data-theme="dark"] .theme-icon-moon {display:none}
/* Green logo linework gets a light backing on dark surfaces for legibility. */
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .footer-brand img {background:#e7eee5; border-radius:50%; padding:3px}
html[data-theme="dark"] .about-visual {background:#e9eee6; border-color:#546d56}
@media (max-width:420px) {
  .theme-toggle {padding:10px; width:42px; height:42px}
  .theme-label {display:none}
}

/* Hero */
.hero {padding:82px 0 96px}
.hero-layout {display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center; gap:clamp(48px,8vw,128px)}
.eyebrow {display:flex; align-items:center; gap:13px; color:var(--green-mid); font-size:11px; font-weight:700; letter-spacing:.14em; margin-bottom:30px}
.eyebrow-line {height:1px; width:35px; background:var(--green-mid); flex-shrink:0}
.hero h1 {font-size:clamp(54px,5.8vw,84px); line-height:1.1; margin-bottom:30px; max-width:740px}
.hero h1 em {display:block}
.hero-intro {font-size:17px; color:var(--muted); max-width:520px; line-height:1.9; margin-bottom:34px}
.hero-actions {display:flex; align-items:center; flex-wrap:wrap; gap:20px 28px}
.btn {display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-height:52px; padding:13px 22px; font-weight:600; font-size:13px; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:background .2s ease,transform .2s ease}
.btn:hover {transform:translateY(-2px)}
.btn-primary {background:var(--green); color:var(--button-ink)}
.btn-primary:hover {background:var(--green-darker)}
.text-link {display:inline-flex; gap:13px; align-items:center; padding-bottom:4px; border-bottom:1px solid var(--green-mid); color:var(--green); font-size:13px; font-weight:550; transition:gap .2s ease}
.text-link:hover {gap:19px}
.hero-note {margin:38px 0 0; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; letter-spacing:.025em}
.note-dot {width:7px; height:7px; flex-shrink:0; border-radius:50%; background:var(--green-mid)}
.hero-photo {margin:0; min-width:0; position:relative}
.hero-photo img {display:block; width:100%; height:auto; max-height:570px; aspect-ratio:auto; object-fit:contain; object-position:center bottom; border:0; border-radius:0; background:transparent; padding:0; box-shadow:none}
.hero-photo figcaption {display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-family:var(--serif); font-size:17px; padding-top:15px; color:var(--green)}
.hero-photo figcaption span {font-family:var(--sans); font-size:11px; letter-spacing:.02em; color:var(--muted)}

/* Calm quotation */
.statement {background:var(--statement-bg); color:var(--statement-ink); padding:45px 0}
.statement-layout {display:flex; align-items:center; justify-content:center; gap:32px; text-align:center}
.statement-symbol {color:var(--statement-symbol); font-size:26px; line-height:1}
.statement p {font-family:var(--serif); font-size:clamp(21px,2.3vw,30px); line-height:1.55; margin:0; letter-spacing:-.02em}
.statement em {color:var(--statement-accent)}

/* Section 01 */
.section-intro {display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; margin-bottom:54px}
.section-intro h2 {margin-bottom:0}
.section-description {font-size:16px; color:var(--muted); max-width:440px; margin:0 0 8px}
.focus-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.focus-item {padding:32px 32px 30px 0}
.focus-item:not(:first-child) {padding-left:32px; border-left:1px solid var(--line)}
.focus-number {display:block; color:var(--green-mid); font-family:var(--serif); font-size:16px; margin-bottom:38px}
.focus-item h3 {font-family:var(--serif); font-size:26px; line-height:1.22; font-weight:normal; margin-bottom:16px; letter-spacing:-.035em}
.focus-item p {font-size:14px; line-height:1.9; color:var(--muted); margin-bottom:0}

/* About */
.about {background:var(--paper)}
.about-layout {display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:clamp(60px,10vw,160px)}
.about-visual {width:min(100%,370px); aspect-ratio:1; border:1px solid var(--line); background:var(--canvas); border-radius:50%; display:grid; place-items:center; margin-inline:auto}
.about-visual img {width:73%; height:73%; object-fit:contain; opacity:.9}
.about-copy p:not(.section-kicker) {font-size:16px; color:var(--muted); max-width:540px; margin-bottom:20px}
.about-copy .text-link {margin-top:9px}

/* Meetings */
.meetings-layout {display:grid; grid-template-columns:1fr 1fr; gap:clamp(54px,10vw,146px); align-items:start}
.meetings-heading>p:not(.section-kicker) {font-size:16px; max-width:450px; color:var(--muted)}
.meeting-ways {border-top:1px solid var(--line)}
.meeting-way {display:flex; gap:22px; padding:28px 0; border-bottom:1px solid var(--line)}
.meeting-way-icon {flex:0 0 46px; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--green)}
.meeting-way-icon svg {width:22px; height:22px; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round}
.meeting-way h3 {font-family:var(--serif); font-size:24px; font-weight:normal; line-height:1.3; letter-spacing:-.03em; margin:0 0 7px}
.meeting-way p {font-size:13px; color:var(--muted); margin:0}
.meeting-action {display:flex; align-items:center; justify-content:space-between; color:var(--green); font-size:13px; font-weight:650; margin-top:22px; width:fit-content; gap:24px; border-bottom:1px solid var(--green); padding-bottom:5px}

/* Booking: a single, deliberate visual contrast */
.booking-section {background:var(--booking-bg); padding:102px 0}
.booking-layout {display:grid; grid-template-columns:.94fr 1.06fr; gap:clamp(48px,9vw,120px); align-items:center}
.booking-text h2 {margin-bottom:23px}
.booking-text>p:not(.section-kicker) {color:var(--muted); max-width:455px; font-size:16px}
.booking-text .booking-note {margin-top:32px; padding-left:16px; border-left:2px solid var(--booking-accent); font-size:13px!important}
.booking-form {background:var(--paper); padding:36px; border:1px solid var(--booking-border); box-shadow:0 20px 60px var(--shadow-color)}
.choice-fieldset {border:0; padding:0; margin:0 0 27px; min-width:0}
.choice-fieldset legend,.form-field label {display:block; font-size:13px; font-weight:650; margin-bottom:12px; color:var(--ink)}
.choice-grid {display:grid; grid-template-columns:1fr 1fr; gap:10px}
.choice {display:block; position:relative; cursor:pointer}
.choice input {position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer}
.choice span {display:block; padding:15px 14px; text-align:center; border:1px solid var(--line); font-size:14px; transition:background .2s ease,border-color .2s ease,color .2s ease}
.choice input:checked+span {background:var(--selected-bg); border-color:var(--green); color:var(--green); font-weight:650}
.choice input:focus-visible+span {outline:3px solid #9cb898; outline-offset:3px}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-field {min-width:0}
.form-field label {line-height:1.35; min-height:36px; margin-bottom:7px}
.form-field label span {display:block; font-weight:400; color:var(--muted); font-size:11px}
.form-field input,.form-field select {border:1px solid var(--line); border-radius:0; min-height:48px; width:100%; padding:9px 11px; background:var(--input-bg); color:var(--ink); font-size:13px}
.form-field select {appearance:auto}
.form-submit {width:100%; margin-top:25px}
.form-caption {font-size:11px; color:var(--muted); margin:12px 0 0; line-height:1.75}

/* Contact */
.contact-layout {display:grid; grid-template-columns:.98fr 1.02fr; gap:clamp(60px,9vw,120px); align-items:start}
.contact-intro {color:var(--muted); font-size:16px; max-width:460px}
.contact-links {border-top:1px solid var(--line)}
.contact-links a {display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:18px; min-height:80px; border-bottom:1px solid var(--line); transition:color .2s ease,padding .2s ease}
.contact-links a:hover {color:var(--green-mid); padding-inline:7px}
.contact-links a span:first-child {font-size:12px; color:var(--muted)}
.contact-links a strong {font-size:14px; font-weight:600; overflow-wrap:anywhere}
.contact-links a span:last-child {font-size:18px}

/* Footer */
.footer {border-top:1px solid var(--line); padding:28px 0; background:var(--paper)}
.footer-layout {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.footer-brand {display:flex; align-items:center; gap:10px}
.footer-brand img {width:35px; height:35px}
.footer-brand strong {font-size:17px}
.footer-brand small {font-size:10px; color:var(--muted)}
.footer p,.footer>a,.footer-layout>a {font-size:11px; color:var(--muted); margin:0}

/* Tablet and narrow desktop */
@media (max-width:1100px){
  .main-nav {gap:19px}
  .hero-layout {gap:50px}
  .hero h1 {font-size:clamp(49px,5.5vw,70px)}
  .section-intro,.meetings-layout,.booking-layout,.contact-layout {gap:52px}
  .about-layout {gap:55px}
}
@media (max-width:900px){
  html {scroll-padding-top:75px}
  .header-layout {min-height:74px}
  .menu-toggle {display:flex}
  .menu-toggle[aria-expanded='true'] span:first-child {transform:translateY(6.5px) rotate(45deg)}
  .menu-toggle[aria-expanded='true'] span:nth-child(2) {opacity:0}
  .menu-toggle[aria-expanded='true'] span:last-child {transform:translateY(-6.5px) rotate(-45deg)}
  .main-nav {position:absolute; top:100%; left:0; right:0; padding:16px max(24px,calc((100vw - var(--container))/2)); background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 15px 25px var(--nav-shadow); display:none; flex-direction:column; align-items:stretch; gap:0}
  .main-nav.is-open {display:flex}
  .main-nav>a {padding:12px 0; font-size:15px}
  .main-nav .nav-cta {padding:13px 17px; margin:9px 0 2px; align-self:flex-start}
  .hero {padding:64px 0 72px}
  .hero-layout {grid-template-columns:1.1fr .9fr; gap:30px}
  .hero h1 {font-size:clamp(44px,6.5vw,61px)}
  .hero-intro {font-size:15px}
  .hero-actions {gap:15px}
  .hero-photo figcaption span {display:none}
  .section {padding:88px 0}
  .section-intro {gap:35px}
  .focus-item {padding-right:20px}
  .focus-item:not(:first-child) {padding-left:20px}
  .focus-item h3 {font-size:23px}
  .about-visual {width:270px}
  .meetings-layout,.contact-layout,.booking-layout {gap:40px}
  .booking-form {padding:26px}
}
@media (max-width:700px){
  .container {width:calc(100% - 40px)}
  .section {padding:78px 0}
  .hero {padding:48px 0 65px}
  .hero-layout {grid-template-columns:1fr; gap:38px}
  .hero h1 {font-size:clamp(46px,9.4vw,67px)}
  .hero-photo {width:min(100%,430px); margin-inline:auto}
  .hero-photo img {height:auto; max-height:420px; aspect-ratio:auto; border-radius:0; object-position:center bottom; padding:0}
  .hero-photo figcaption span {display:inline}
  .hero-note {margin-top:29px}
  .statement {padding:35px 0}
  .statement-symbol {display:none}
  .section-intro,.about-layout,.meetings-layout,.booking-layout,.contact-layout {grid-template-columns:1fr; gap:28px}
  .section-intro {margin-bottom:34px}
  .section-description {max-width:580px}
  .focus-grid {grid-template-columns:1fr}
  .focus-item,.focus-item:not(:first-child) {padding:24px 0; border-left:0; border-top:1px solid var(--line)}
  .focus-item:first-child {border-top:0}
  .focus-number {margin-bottom:10px}
  .focus-item h3 {margin-bottom:8px}
  .about-visual {width:min(100%,240px); margin:0 auto 10px; grid-row:2}
  .about-copy {grid-row:1}
  .booking-section {padding:72px 0}
  .booking-text .booking-note {margin-top:23px}
  .contact-layout {gap:20px}
}
@media (max-width:420px){
  .container {width:calc(100% - 32px)}
  .brand img {height:41px; width:41px}
  .brand-copy strong {font-size:20px}
  .brand-copy small {font-size:9px}
  .hero h1 {font-size:clamp(42px,11vw,48px)}
  .hero-actions {align-items:flex-start; flex-direction:column}
  .hero-actions .btn {width:100%}
  .hero-photo figcaption {font-size:15px}
  .hero-photo figcaption span {font-size:10px}
  .booking-form {padding:20px}
  .form-row {grid-template-columns:1fr}
  .form-field label {min-height:0}
  .contact-links a {grid-template-columns:76px 1fr auto; gap:10px}
  .contact-links a strong {font-size:12px}
  .footer-layout {align-items:flex-start; flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html {scroll-behavior:auto}
  *,*::before,*::after {transition-duration:.01ms!important; animation-duration:.01ms!important}
}


/* === Poprawki mobilne: kontrast logo, układ nagłówka, czytelne sterowanie === */
.brand-mark, .footer-mark {display:block; flex:none; position:relative; width:46px; height:46px}
.brand-mark img, .footer-mark img {width:100%; height:100%; object-fit:contain; position:absolute; inset:0}
.logo-dark {display:none !important}
html[data-theme="dark"] .logo-light {display:none !important}
html[data-theme="dark"] .logo-dark {display:block !important}
.footer-mark {width:35px; height:35px}
/* Bez białego koła. Ciemny motyw korzysta z osobnego jasnego logo. */
html[data-theme="dark"] .brand-mark img,
html[data-theme="dark"] .footer-mark img {background:transparent; padding:0; border-radius:0; filter:none}

@media (max-width:900px) {
  .site-header {background:var(--paper); backdrop-filter:none}
  .header-layout {min-height:72px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding-block:11px}
  .brand {min-width:0; flex-shrink:1; gap:11px}
  .brand-mark {width:45px; height:45px}
  .brand-copy {min-width:0}
  .brand-copy strong {font-size:22px; line-height:1.15}
  .brand-copy small {font-size:11px; letter-spacing:0; line-height:1.35; white-space:normal; overflow-wrap:normal}
  .header-actions {order:unset; gap:8px}
  .theme-toggle, .menu-toggle {min-width:44px; min-height:44px; width:44px; height:44px; background:var(--canvas); border-color:var(--line); border-radius:10px; color:var(--green)}
  .theme-toggle {padding:0; gap:0}
  .theme-label {display:none}
  .theme-toggle:focus-visible, .menu-toggle:focus-visible {outline:3px solid var(--green-mid); outline-offset:3px}
  .main-nav {order:unset; margin:0; padding:12px max(20px,calc((100vw - var(--container))/2)) 24px; max-height:calc(100dvh - 72px); overflow-y:auto}
  .main-nav>a {min-height:48px; display:flex; align-items:center; border-bottom:1px solid var(--line)}
  .main-nav .nav-cta {border-radius:8px; padding:12px 16px; min-height:48px; justify-content:center; margin-top:16px; border:1px solid var(--green)}
  html {scroll-padding-top:84px}
  .eyebrow {flex-wrap:wrap; gap:9px; line-height:1.6}
}

@media (max-width:480px) {
  .container {width:calc(100% - 36px)}
  .header-layout {gap:8px; padding-block:10px; min-height:70px}
  .brand {gap:9px}
  .brand-mark {width:43px; height:43px}
  .brand-copy strong {font-size:21px}
  .brand-copy small {font-size:10.5px}
  .header-actions {gap:7px}
  .theme-toggle, .menu-toggle {min-width:42px; min-height:42px; width:42px; height:42px}
  .main-nav {padding-inline:18px}
  .hero {padding-top:40px}
  .hero h1 {font-size:clamp(39px,11vw,52px); line-height:1.13}
  .hero-intro {font-size:15px; line-height:1.8}
  .hero-actions {gap:16px}
  .hero-actions .btn {justify-content:center; width:100%}
  .hero-photo {max-width:340px}
  .section {padding:64px 0}
  .statement {padding:30px 0}
  .statement p {font-size:clamp(20px,5.8vw,25px)}
  .booking-section {padding:65px 0}
  .booking-form {padding:20px}
}

/* Na wąskich smartfonach: dwa wyraźne rzędy zamiast ścisku i uciętego tekstu. */
@media (max-width:339px) {
  .container {width:calc(100% - 28px)}
  .header-layout {grid-template-columns:1fr auto; row-gap:8px; padding-block:10px}
  .brand {grid-column:1/-1; width:100%}
  .header-actions {grid-column:2; justify-self:end}
  .brand-copy strong {font-size:21px}
  .brand-copy small {font-size:11px}
  .main-nav {max-height:calc(100dvh - 126px)}
  .choice-grid {grid-template-columns:1fr}
  .contact-links a {grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding-block:12px}
  .contact-links a span:first-child {grid-column:1; grid-row:1}
  .contact-links a strong {grid-column:1; grid-row:2; font-size:13px}
  .contact-links a span:last-child {grid-column:2; grid-row:1/3; align-self:center}
}