/* mateuszgoral.com – one stylesheet. Colours are tokens so dark mode is one extra :root block.
   Radius rule: controls (buttons, inputs) use --radius, blocks (tiles, bands, photo) use --radius-lg. */

@font-face {
  font-family: "Geist";
  src: url("/assets/geist.woff2?v=2") format("woff2");
  font-weight: 400 700;
  font-display: optional;
}

:root {
  --bg: #f5f7f5;
  --surface: #fdfefd;
  --tint: #e4eee8;
  --text: #14201a;
  --muted: #47544e;
  --line: #d2dcd6;
  --line-strong: #75807a;
  --accent: #0b6e4f;
  --accent-hover: #085a40;
  --on-accent: #f4faf6;
  --on-accent-muted: #d3e8dc;
  --on-accent-hover: #dcefe4;
  --error: #a3261b;
  --shadow-sm: 0 1px 2px rgb(16 56 38 / 0.06), 0 6px 18px -8px rgb(16 56 38 / 0.14);
  --shadow-md: 0 2px 4px rgb(16 56 38 / 0.06), 0 20px 40px -18px rgb(16 56 38 / 0.28);
  --radius: 6px;
  --radius-lg: 14px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --measure: 65ch;
  --gutter: 1rem;
  --section: clamp(3.5rem, 8vw, 6.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font);
}

::selection { background: var(--accent); color: var(--on-accent); }

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

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 20ch; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); max-width: 24ch; }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }

p, ul, ol { margin: 0 0 1rem; }
p, li { max-width: var(--measure); text-wrap: pretty; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.5rem; }
li::marker { color: var(--accent); }
strong { font-weight: 600; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 20;
  background: var(--accent); color: var(--on-accent);
  padding: 0.5rem 1rem; border-radius: var(--radius);
}
.skip:focus { top: 0.5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons: one primary (filled), one secondary (outlined), primary inverted on the green band. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  font: 600 1rem/1.2 var(--font); letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; border: 1.5px solid var(--accent); border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease), transform 120ms var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary:hover { background: var(--tint); color: var(--accent-hover); }
.btn:active { transform: translateY(1px) scale(0.98); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; min-height: 4.5rem; padding-block: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; line-height: 1.25; }
.brand:hover { color: var(--text); }
.brand-mark { flex: none; width: 2.5rem; height: auto; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.025em; white-space: nowrap; } /* Geist 700: the kit's wordmark weight */
.brand-tag { font-size: 0.8125rem; color: var(--muted); }

.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-toggle-label {
  font: 600 0.9375rem/1 var(--font); padding: 0.75rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; user-select: none;
}
.nav-toggle:focus-visible + .nav-toggle-label { outline: 3px solid var(--accent); outline-offset: 3px; }
.nav-toggle:checked + .nav-toggle-label { background: var(--tint); }
.site-nav { display: none; flex-basis: 100%; }
.nav-toggle:checked ~ .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; }
.site-nav li { margin: 0; }
.site-nav a:not(.btn) {
  display: block; padding: 0.75rem 0; color: var(--text); text-decoration: none;
  font-weight: 500; font-size: 1.0625rem; line-height: 1.2; border-top: 1px solid var(--line);
}
.site-nav a:not(.btn)[aria-current="page"] { color: var(--accent); }
.site-nav .btn { margin-top: 0.75rem; }
@media (max-width: 59.99rem) { .brand { flex: 1 1 0; max-width: max-content; } }

@media (min-width: 60rem) {
  :root { --gutter: 2rem; }
  .brand-mark { width: 3rem; }
  .nav-toggle, .nav-toggle-label { display: none; }
  .site-nav { display: block; flex-basis: auto; }
  .site-nav ul { display: flex; align-items: center; gap: 2rem; padding: 0; }
  .site-nav a:not(.btn) { border: 0; padding: 0.5rem 0; font-size: 1rem; transition: color 200ms var(--ease); }
  .site-nav a:not(.btn):hover { color: var(--accent); }
  .site-nav a:not(.btn)[aria-current="page"] { box-shadow: inset 0 -2px var(--accent); }
  .site-nav .btn { margin: 0; min-height: 2.5rem; padding-block: 0.5rem; }
}

/* Page heads and sections */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.page-head::before {
  content: ""; display: block; width: 3rem; height: 4px; margin-bottom: 1.5rem;
  background: var(--accent); border-radius: 2px;
}
.lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; max-width: 52ch; color: var(--muted); }
.section { padding-block: var(--section) 0; }
.section > .wrap > p:last-child, .section > .wrap > ul:last-child { margin-bottom: 0; }
.label { font-weight: 600; margin-bottom: 0.5rem; }
.more { font-weight: 600; }
.more a::after, a.more::after { content: " \2192"; }

/* Photo on a solid green panel (home hero, /o-mnie/). The panel is drawn in CSS, not an image. */
.photo-panel { position: relative; isolation: isolate; width: min(100%, 26rem); margin: 0 1.25rem 1.25rem 0; }
.photo-panel::before {
  content: ""; position: absolute; z-index: -1; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--accent); border-radius: var(--radius-lg);
}
.photo-panel img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (min-width: 48rem) {
  .photo-panel { margin: 0 2rem 2rem 0; }
  .photo-panel::before { inset: 2rem -2rem -2rem 2rem; }
}

/* Home hero: text left, photo right; photo after the text on phones. */
.hero { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.hero .lead { margin-top: 1.5rem; }
@media (min-width: 48rem) {
  .hero { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 4rem; }
  .hero .photo-panel { justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .photo-panel::before { animation: panel-in 900ms var(--ease) 150ms both; }
}
@keyframes panel-in { from { transform: translate(-1.25rem, -1.25rem); opacity: 0; } }

/* Problems: the client's words in large type, first one full width. */
.problems { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2.5rem; }
.problems li { margin: 0; max-width: none; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.problems .quote {
  font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.25;
  letter-spacing: -0.025em; margin-bottom: 0.625rem; max-width: 32ch;
}
.problems li:first-child { border-top: 2px solid var(--accent); }
.problems li:first-child .quote { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem); line-height: 1.12; letter-spacing: -0.035em; }
.problems p:last-child { color: var(--muted); margin: 0; max-width: 52ch; }
@media (min-width: 48rem) {
  .problems { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }
  .problems li:first-child { grid-column: 1 / -1; }
}

/* Offers: three tiles of different sizes, the audit tile solid green and full width on top. */
.tiles { display: grid; gap: 1rem; margin-top: 2.5rem; }
.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg); padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.tile p { flex-grow: 1; }
.tile .more { flex-grow: 0; margin: 0; }
.tile .more a { text-decoration: none; }
.tile .more a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole tile clickable */
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.tile .more a:focus-visible { outline: none; }
.tile-main { background: var(--accent); color: var(--on-accent); }
.tile-main p { color: var(--on-accent-muted); }
.tile-main .more a, .tile-main .more a:hover { color: var(--on-accent); }
@media (min-width: 48rem) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .tile { padding: 2.25rem; }
  /* Heading left, copy and link right, so the wide tile has no empty half. */
  .tile-main { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.5rem 3rem; padding: 2.75rem; }
  .tile-main h3 { grid-row: span 2; margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); letter-spacing: -0.035em; }
  .tile-main p { margin: 0; font-size: 1.125rem; max-width: 52ch; }
}

/* Collaboration steps: one row joined by a line on desktop, a vertical line on phones. */
.flow { list-style: none; padding: 0 0 0 1.5rem; margin: 2.5rem 0 0; display: grid; gap: 2rem; border-left: 2px solid var(--accent); }
.flow li { margin: 0; }
.flow strong { display: block; font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 0.375rem; }
.flow p { margin: 0; color: var(--muted); }
@media (min-width: 60rem) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; border-left: 0; border-top: 2px solid var(--accent); }
  .flow li { padding: 1.75rem 2rem 0 0; }
}

/* Tinted band (facts boxes) */
.band { background: var(--tint); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.75rem); }
.band p:last-child, .band ul:last-child { margin-bottom: 0; }

/* Closing: full-width solid green band, the one full-colour area of a page. */
.cta-band { position: relative; margin-top: var(--section); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 6.5rem); background: var(--accent); color: var(--on-accent); }
/* The mark as a faint white ridge on the band's bottom edge, right-aligned with the content.
   Its height is width x 164/383, so clamp(8rem, 21vw, 15rem) wide gives clamp(3.43rem, 9vw, 6.42rem) tall:
   never more than the bottom padding, so it never sits under the text or the button.
   From 48rem the button sits above the ridge, so the ridge narrows to keep at least 6px clear of its focus ring. */
.cta-band::after {
  content: ""; position: absolute; bottom: 0; right: max(var(--gutter), calc((100% - 74rem) / 2 + var(--gutter)));
  width: clamp(8rem, 21vw, 15rem); aspect-ratio: 383 / 164; pointer-events: none;
  background: url("/assets/logo-mark-white.svg?v=1") no-repeat bottom / contain; opacity: 0.16;
}
.cta-band h2 { margin-bottom: 0.75rem; }
.cta-band p { color: var(--on-accent-muted); max-width: 52ch; margin: 0; font-size: 1.125rem; }
.cta-band p + p { margin-top: 0.75rem; }
.cta-band a:not(.btn), .cta-band a:not(.btn):hover { color: var(--on-accent); }
.cta-band .actions { margin-top: 2rem; }
.cta-band :focus-visible { outline-color: var(--on-accent); }
.btn-inverse { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }
.btn-inverse:hover { background: var(--on-accent-hover); border-color: var(--on-accent-hover); color: var(--accent-hover); }
@media (min-width: 48rem) {
  .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
  .cta-band .actions { margin: 0; flex-shrink: 0; }
  .cta-band::after { width: clamp(8rem, 16vw, 11.5rem); }
}
main:has(> .cta-band:last-child) + .site-footer { margin-top: 0; border-top: 0; }

/* Two-column: heading left, content right */
@media (min-width: 48rem) {
  .split { display: grid; grid-template-columns: 1fr 1.8fr; gap: 3rem; align-items: start; }
}

/* Audit: two scopes side by side, so they read as a choice. */
.scopes { display: grid; gap: 1.25rem; }
.scope { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-sm); }
.scope ul { flex-grow: 1; }
.scope .band { margin-top: 0.5rem; padding: 1.25rem 1.5rem; }
@media (min-width: 60rem) {
  .scopes { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* Grid list for longer scope lists: two columns on desktop */
.grid-list { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1rem; }
.grid-list li { margin: 0; max-width: none; background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); }
@media (min-width: 48rem) {
  .grid-list { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .grid-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Numbered steps (emergency page) */
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; margin: 0; padding: 1.5rem 1.5rem 1.5rem 3.75rem; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); max-width: none; }
.steps li::before {
  content: counter(step); position: absolute; left: 1.5rem; top: 1.4rem;
  font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--accent);
}

/* Phone block */
.phone { margin-top: 1.75rem; }
.phone a { font-weight: 600; font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; }
.phone p { margin: 0.25rem 0 0; color: var(--muted); }

/* About */
.about { display: grid; gap: 2.5rem; padding-top: 2rem; }
@media (min-width: 48rem) {
  .about { grid-template-columns: minmax(14rem, 1fr) 1.6fr; gap: 4rem; align-items: start; }
}

/* Contact */
.contact { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .contact { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; } }
.contact-aside { list-style: none; padding: 0; margin: 0; }
.contact-aside li { margin: 0 0 1rem; }

/* Form */
.form { display: grid; gap: 1.25rem; max-width: 40rem; }
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 600; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 0.6875rem 0.875rem;
  transition: border-color 200ms var(--ease);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--accent); }
.form-note { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.form .btn { justify-self: start; }
.form-error { color: var(--error); font-weight: 600; border-left: 4px solid var(--error); padding-left: 0.75rem; margin: 0; }
.notice { background: var(--tint); border-radius: var(--radius-lg); padding: 1.5rem; font-size: 1.1875rem; font-weight: 600; max-width: 40rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 2.5rem 6rem; color: var(--muted); font-size: 0.9375rem; margin-top: var(--section); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer p { margin: 0; max-width: none; }
.footer-mark { width: 2.5rem; margin-bottom: 0.75rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.link-button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.link-button:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

/* Consent banner: bottom of the screen on phones, bottom-left on desktop. */
.consent {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  padding: 1rem var(--gutter) 1.25rem; font-size: 0.9375rem; box-shadow: var(--shadow-md);
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 0.75rem; }
.consent-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.consent .btn { min-height: 2.75rem; }
@media (min-width: 48rem) {
  .consent { left: 1.5rem; right: auto; bottom: 1.5rem; max-width: 24rem; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; animation: none !important; }
  .tile:hover { transform: none; }
}