@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #ffffff;
  --surface: #f5f6f7;
  --surface-strong: #ebeef1;
  --text: #111318;
  --muted: #626a73;
  --line: #d9dde2;
  --accent: #ff6600;
  --accent-dark: #d95700;
  --accent-soft: #fff1e8;
  --graphite: #171b21;
  --white: #ffffff;
  --shadow: 0 28px 70px rgba(17, 19, 24, 0.14);
  --radius: 4px;
  --container: 1320px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(17, 19, 24, 0.035) 1px, transparent 1px) 0 0 / 92px 92px,
    var(--bg);
  color: var(--text);
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--container), calc(100% - 64px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(217, 221, 226, 0.82);
  backdrop-filter: blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 96px;
  gap: 30px;
}

.brand img {
  width: 228px;
  height: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  color: #22272f;
  font-size: 15px;
  font-weight: 720;
}

.main-nav ul,
.main-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  position: relative;
  padding: 30px 0;
}

.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

.btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.wp-block-button__link {
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background: var(--accent-dark) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--line);
}

.btn-secondary:hover {
  background: var(--line);
}

.btn-outline {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--white);
}

.btn-light {
  background: var(--white);
  color: var(--accent);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--white);
}

.hero {
  min-height: 640px;
  position: relative;
  padding: 50px 0 34px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.96) 43%, rgba(255, 255, 255, 0.82) 100%),
    linear-gradient(135deg, rgba(255, 102, 0, 0.07) 0 1px, transparent 1px 18px);
  overflow: hidden;
}

.hero::before {
  position: absolute;
  top: 0;
  right: clamp(24px, 6vw, 96px);
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255, 102, 0, 0.55), transparent);
  content: "";
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(530px, 0.93fr) minmax(600px, 1.07fr);
  align-items: center;
  gap: 52px;
}

.hero-copy h1 {
  max-width: 760px;
  margin: 0;
  color: #090b0f;
  font-size: clamp(50px, 4.2vw, 70px);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.04;
}

.hero-copy p {
  max-width: 670px;
  margin: 28px 0 0;
  color: #303842;
  font-size: 19px;
  line-height: 1.76;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 46px 0 0;
}

.proof-strip div {
  min-height: 82px;
  padding-top: 16px;
  border-top: 1px solid #c8ced5;
}

.proof-strip dt {
  font-size: 15px;
  font-weight: 760;
}

.proof-strip dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.hero-media {
  position: relative;
  display: grid;
  height: 560px;
  grid-template-columns: 1.22fr 0.78fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  isolation: isolate;
}

.hero-media::before {
  position: absolute;
  right: -18px;
  bottom: -18px;
  left: 42px;
  height: 18px;
  background: var(--accent);
  content: "";
  z-index: -1;
}

.hero-media::after {
  position: absolute;
  top: 28px;
  right: -18px;
  bottom: -18px;
  width: 18px;
  background: var(--accent);
  content: "";
  z-index: -1;
}

.hero-media > *,
.media-stack {
  min-height: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  border: 8px solid var(--white);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.hero-main {
  grid-row: 1 / span 2;
  clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%);
}

.media-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.hero-side {
  grid-column: 2;
}

.section {
  padding: 84px 0;
}

.section-title {
  margin: 0;
  color: #111318;
  font-size: 40px;
  font-weight: 820;
  line-height: 1.15;
}

.center {
  text-align: center;
}

.why-title {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  white-space: nowrap;
}

.why-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  /* The artwork is centred inside its own box, but "Dlaczego" sits lower in its
     line box because of the descenders, so align-items: center lines up the
     boxes and not the ink. This nudge matches the two optical centres and
     scales with the heading: 4.5px at 40px, 3.6px at 32px. */
  transform: translateY(0.1125em);
}

.muted {
  color: var(--muted);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.text-link {
  color: var(--accent);
  font-size: 14px;
  font-weight: 820;
}

.text-link::after,
.product-card a::after,
.article-grid a::after {
  content: " ->";
}

.path-section {
  padding-top: 58px;
}

.path-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.96fr 0.96fr;
  gap: 22px;
  margin-top: 26px;
}

.path-card {
  position: relative;
  min-height: 292px;
  overflow: hidden;
  border-radius: 0;
  background: var(--graphite);
  color: var(--white);
  isolation: isolate;
}

.path-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
  z-index: -2;
}

.path-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.78));
  content: "";
  z-index: -1;
}

.path-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--accent);
  content: "";
}

.path-card span,
.path-card p,
.path-card strong {
  display: block;
  margin-left: 24px;
  margin-right: 24px;
}

.path-card span {
  max-width: 310px;
  margin-top: 132px;
  font-size: 28px;
  font-weight: 840;
  line-height: 1.08;
}

.path-card p {
  max-width: 330px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
}

.path-card strong {
  margin-top: 18px;
  color: #fff;
  font-size: 14px;
}

.path-card strong::after {
  content: " ->";
  color: #fff;
}

.path-card:hover img {
  transform: scale(1.05);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card,
.service-card,
.case-card,
.article-grid article {
  overflow: hidden;
  border: 1px solid rgba(217, 221, 226, 0.78);
  border-radius: 0;
  background: var(--white);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.product-card:hover,
.service-card:hover,
.case-card:hover,
.article-grid article:hover {
  border-color: rgba(255, 102, 0, 0.35);
  box-shadow: 0 22px 55px rgba(17, 19, 24, 0.1);
  transform: translateY(-2px);
}

.product-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: var(--surface);
}

.product-card div {
  padding: 24px 24px 26px;
}

.product-card h3,
.service-card h3,
.case-card h3,
.article-grid h3,
.benefit-grid h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 820;
  line-height: 1.2;
}

.product-card p,
.service-card p,
.case-card p,
.article-grid p,
.benefit-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.product-card a,
.article-grid a {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 820;
}

.why-section {
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(255, 102, 0, 0.18) calc(50% - 1px), rgba(255, 102, 0, 0.18) 50%, transparent 50%),
    #f7f8f9;
  border-block: 1px solid rgba(217, 221, 226, 0.86);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 34px;
}

.benefit-grid article {
  padding: 10px 30px 8px 0;
  border-right: 1px solid var(--line);
}

.benefit-grid article:last-child {
  border-right: 0;
}

.benefit-grid svg {
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.machine-section {
  background:
    linear-gradient(90deg, var(--graphite) 0%, var(--graphite) 52%, #ffffff 52%, #ffffff 100%);
}

.machine-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 42px;
  align-items: stretch;
}

.machine-copy {
  padding: 54px 46px;
  border-left: 6px solid var(--accent);
  background: var(--graphite);
  color: var(--white);
}

.machine-copy .section-title {
  color: var(--white);
}

.lead {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 19px;
  line-height: 1.62;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 30px 0 34px;
  padding: 0;
  list-style: none;
}

.check-list li {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 650;
}

.check-list li::before {
  margin-right: 10px;
  color: var(--accent);
  content: "/";
  font-weight: 900;
}

.machine-media {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

.machine-media img {
  width: 100%;
  height: 100%;
  min-height: 214px;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(17, 19, 24, 0.13);
  object-fit: cover;
}

.machine-main {
  grid-row: span 2;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.service-tags span {
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.service-offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}

.service-card {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 278px;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.service-card img {
  width: 100%;
  height: 100%;
  min-height: 278px;
  object-fit: cover;
}

.service-card div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  padding: 28px 30px;
}

.service-card:hover,
.service-detail-box:hover {
  border-color: rgba(255, 102, 0, 0.48);
  box-shadow: 0 16px 36px rgba(17, 19, 24, 0.08);
  transform: translateY(-2px);
}

.service-card div > p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.service-card div > a {
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
}

.service-detail-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 108px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--white);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.service-offers .service-card,
.service-offers .service-detail-box {
  min-width: 0;
}

.service-detail-box h3 {
  margin: 0;
  max-width: 440px;
  font-size: 18px;
  line-height: 1.25;
}

.service-detail-box p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.process-section {
  padding-top: 58px;
  background: #f8f9fa;
  border-block: 1px solid var(--line);
}

.delivery-section {
  padding-top: 58px;
  padding-bottom: 58px;
  background: var(--white);
}

.delivery-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
  padding: 34px 38px;
  border: 1px solid var(--line);
  background: #fbfcfd;
}

.delivery-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.delivery-copy .section-title {
  max-width: 470px;
  font-size: 30px;
}

.delivery-copy p {
  max-width: 520px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.delivery-partners {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: stretch;
}

.delivery-logo {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border: 1px solid rgba(217, 221, 226, 0.9);
  background: var(--white);
}

.delivery-logo img {
  display: block;
  width: 100%;
  max-width: 116px;
  max-height: 42px;
  object-fit: contain;
}

.delivery-logo:nth-child(3) img {
  max-height: 50px;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: process;
}

.process-list li {
  position: relative;
  min-height: 150px;
  padding: 24px;
  border: 0;
  border-top: 2px solid #cfd5db;
  border-radius: 0;
  background: var(--white);
}

.process-list li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -18px;
  color: var(--accent);
  content: "->";
  font-weight: 900;
  transform: translateY(-50%);
  z-index: 2;
}

.process-list span {
  display: block;
  color: var(--accent);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}

.process-list strong {
  display: block;
  margin-top: 14px;
  font-size: 17px;
}

.process-list p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 30px;
}

.realization-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 112px;
  gap: 14px;
  margin-top: 34px;
}

.realization-tile {
  grid-column: span 3;
  grid-row: span 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.realization-tile-featured {
  grid-column: span 6;
  grid-row: span 4;
}

/* Tiles render through the core image block so the gallery inherits the same lightbox
   as the rest of the site. The figure fills the grid cell and the caption sits below the
   image, which gives up the height it needs, so the mosaic keeps its proportions. */
.realization-tile .wp-block-image {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
}

.realization-tile img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  transition: transform 360ms ease;
}

.realization-tile:hover img {
  transform: scale(1.035);
}

.realization-tile .wp-element-caption {
  flex: none;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: left;
}

html.js main > section,
html.js main .entry-content > section,
html.js .about-story,
html.js .about-panel,
html.js .path-card,
html.js .product-card,
html.js .service-card,
html.js .service-detail-box,
html.js .delivery-logo,
html.js .article-grid article,
html.js .product-with-sidebar .breadcrumbs,
html.js .product-with-sidebar .product-content > .page > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

html.js main > section.is-visible,
html.js main .entry-content > section.is-visible,
html.js .about-story.is-visible,
html.js .about-panel.is-visible,
html.js .path-card.is-visible,
html.js .product-card.is-visible,
html.js .service-card.is-visible,
html.js .service-detail-box.is-visible,
html.js .delivery-logo.is-visible,
html.js .article-grid article.is-visible,
html.js .product-with-sidebar .breadcrumbs.is-visible,
html.js .product-with-sidebar .product-content > .page > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .estyma-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

html.js .estyma-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .about-panel,
html.js .path-card:nth-child(2),
html.js .product-card:nth-child(2),
html.js .service-card:nth-child(2),
html.js .service-detail-box:nth-child(2),
html.js .delivery-logo:nth-child(2),
html.js .article-grid article:nth-child(2) {
  transition-delay: 80ms;
}

html.js .path-card:nth-child(3),
html.js .product-card:nth-child(3),
html.js .service-detail-box:nth-child(3),
html.js .delivery-logo:nth-child(3),
html.js .article-grid article:nth-child(3) {
  transition-delay: 160ms;
}

html.js .product-card:nth-child(4),
html.js .service-detail-box:nth-child(4),
html.js .delivery-logo:nth-child(4) {
  transition-delay: 240ms;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 28px rgba(17, 19, 24, 0.08);
}


.realization-tile img {
  cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
  html.js main > section,
  html.js .path-card,
  html.js .product-card,
  html.js .service-card,
  html.js .service-detail-box,
  html.js .delivery-logo,
  html.js .article-grid article {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .realization-tile img {
    transition: none;
  }
}

.case-card img,
.article-grid img {
  width: 100%;
  height: 225px;
  object-fit: cover;
}

.case-card div,
.article-grid article {
  padding: 22px;
}

.case-card span,
.article-grid span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.case-card h3,
.article-grid h3 {
  margin-top: 8px;
}

.case-card strong {
  display: block;
  margin-top: 16px;
  color: #22272f;
  font-size: 14px;
}

.trust-section {
  padding-top: 54px;
  background: #f7f8f9;
}

.logo-wall {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 26px;
  border: 1px solid rgba(217, 221, 226, 0.7);
  background: var(--white);
}

.logo-wall span {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  color: #7a8088;
  font-size: 18px;
  font-weight: 850;
  text-align: center;
  filter: grayscale(1);
}

.logo-wall span:last-child {
  border-right: 0;
}

.knowledge-section {
  padding-top: 54px;
}

.article-grid article {
  padding: 0;
}

.article-grid article > span,
.article-grid article > h3,
.article-grid article > a {
  margin-inline: 22px;
}

.article-grid article > span {
  display: block;
  margin-top: 20px;
}

.article-grid article > a {
  margin-bottom: 24px;
}

.cta-section {
  padding: 58px 0;
  background:
    linear-gradient(120deg, var(--accent) 0%, #f07a18 52%, #22272f 52%, #171b21 100%);
  color: var(--white);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.cta-inner h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
}

.cta-inner p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.site-footer {
  background: #12161c;
  color: rgba(255, 255, 255, 0.74);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(4, 1fr);
  gap: 36px;
  padding: 46px 0 34px;
}

.footer-brand img {
  width: 148px;
  padding: 8px 10px;
  background: var(--white);
}

.footer-brand p {
  max-width: 330px;
}

.site-footer h3 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 15px;
}

.site-footer a,
.site-footer p {
  display: block;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

@media (max-width: 1180px) {
  .main-nav {
    gap: 18px;
  }

  .hero-grid,
  .machine-grid {
    grid-template-columns: 1fr;
  }

  .hero-media {
    min-height: 470px;
  }

  .proof-strip,
  .benefit-grid,
  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid,
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-wall {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 820px) {
  .container {
    width: min(100% - 32px, var(--container));
  }

  .why-title {
    gap: 8px;
    font-size: 32px;
  }

  .why-logo {
    height: 36px;
  }

  .header-inner {
    min-height: auto;
    padding: 14px 0;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .main-nav {
    order: 3;
    width: 100%;
    gap: 10px;
    font-size: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .main-nav a {
    padding: 8px 0;
    white-space: nowrap;
  }

  .main-nav a::after {
    bottom: 0;
  }

  .hero {
    min-height: 0;
    padding-top: 40px;
  }

  .hero-grid,
  .path-grid,
  .product-grid,
  .benefit-grid,
  .service-offers,
  .process-list,
  .article-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy h1 {
    font-size: 42px;
  }

  .proof-strip {
    grid-template-columns: 1fr 1fr;
  }

  .hero-media {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .hero-media img {
    height: 260px;
  }

  .hero-media::before {
    right: -10px;
    bottom: -10px;
    left: 18px;
    height: 10px;
  }

  .hero-media::after {
    top: 16px;
    right: -10px;
    bottom: -10px;
    width: 10px;
  }

  .media-stack,
  .hero-side {
    display: none;
  }

  .section-head,
  .cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-card {
    grid-template-columns: 1fr;
  }

  .service-offers {
    grid-template-columns: 1fr;
  }

  .delivery-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 24px;
  }

  .delivery-partners {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-detail-box {
    min-height: 0;
  }

  .machine-media {
    grid-template-columns: 1fr;
  }

  .realization-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }

  .realization-tile,
  .realization-tile-featured {
    grid-column: span 2;
  }

  .machine-main {
    grid-row: auto;
  }

  .process-list li:not(:last-child)::after {
    display: none;
  }

  .logo-wall {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Header tools, cart count and mobile menu */
.header-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
}

/* The editable FSE template wraps header actions in a paragraph. */
.header-tools > p {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}

.header-tools > p > br {
  display: none;
}

/* Normalize whitespace nodes that can be retained by the block editor. */
.header-inner > br,
.header-inner > p {
  display: none;
}

.header-tools br {
  display: none;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.language-switcher__link {
  display: inline-flex;
  min-width: 31px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: color 180ms ease, background 180ms ease;
}

.language-switcher__link:hover,
.language-switcher__link:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}

.language-switcher__link.is-active {
  color: var(--text);
  background: var(--surface-strong);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  color: var(--text);
  transition: color 180ms ease, background 180ms ease;
  position: relative;
}

.tool-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.tool-btn svg {
  width: 22px;
  height: 22px;
}

.cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.cart-count[data-count="0"] {
  display: none;
}

.header-cta-mobile {
  display: none;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: transform 200ms ease, opacity 200ms ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 2;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    min-height: 100dvh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
    padding: 126px max(32px, calc((100vw - var(--container)) / 2)) 42px;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(.22, .61, .36, 1), opacity 220ms ease, visibility 320ms ease;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow-y: auto;
  }

  .main-nav.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.menu-is-open {
    overflow: hidden;
  }

  .main-nav a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.15;
  }

  .main-nav a::after {
    display: none;
  }

  .main-nav .header-cta-mobile {
    display: inline-flex;
    width: fit-content;
    margin-top: 28px;
    padding-inline: 28px;
    justify-content: center;
    font-size: 15px;
  }

  .header-cta {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand img {
    width: 154px;
  }

  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 10px 12px;
    padding-block: 12px;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .menu-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .main-nav {
    padding: 128px 24px 32px;
  }

  .tool-btn {
    width: 40px;
    height: 40px;
  }

  .tool-btn svg {
    width: 20px;
    height: 20px;
  }

  .language-switcher {
    gap: 0;
    margin: 0 auto 0 0;
    padding-right: 8px;
  }

  .language-switcher__link {
    min-width: 27px;
    min-height: 30px;
    font-size: 11px;
  }

  .header-tools {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
}

/* Product pages with sidebar */
.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

.product-sidebar {
  position: sticky;
  top: 110px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.product-sidebar .widget-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text);
}

.product-sidebar .widget_nav_menu ul,
.product-sidebar .widget_nav_menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-sidebar .widget_nav_menu li {
  border-bottom: 1px solid var(--line);
}

.product-sidebar .widget_nav_menu a {
  display: block;
  padding: 12px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: color 180ms ease;
}

.product-sidebar .widget_nav_menu a:hover {
  color: var(--accent);
}

.product-sidebar .widget_nav_menu .sub-menu {
  padding-left: 16px;
  border-left: 2px solid var(--line);
  margin: 0 0 8px 4px;
}

.product-sidebar .widget_nav_menu .sub-menu li {
  border-bottom: none;
}

.product-sidebar .widget_nav_menu .sub-menu a {
  padding: 8px 0;
  font-weight: 500;
  font-size: 13px;
}

.breadcrumbs {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs .sep {
  margin: 0 8px;
  color: var(--line);
}

.breadcrumbs .current {
  color: var(--text);
  font-weight: 600;
}

.tool-btn.search-toggle {
  appearance: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.search-modal[hidden] {
  display: none;
}

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  padding: clamp(96px, 16vh, 180px) 24px 24px;
}

.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 19, 24, .56);
  backdrop-filter: blur(7px);
}

.search-modal__panel {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

.search-modal__panel h2 {
  margin: 8px 0 28px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
}

.search-modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  transition: color 180ms ease, transform 180ms ease;
}

.search-modal__close:hover {
  color: var(--accent);
  transform: rotate(90deg);
}

.search-modal__form {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--text);
}

.search-modal__form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 18px;
}

.search-modal__form input::placeholder {
  color: var(--muted);
}

.search-modal__hint {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.search-is-open {
  overflow: hidden;
}

/* Overview pages use a section block with its own container. Keep one shared
   horizontal alignment and avoid stacking the page and block spacing. */
.estyma-overview-page {
  padding: 28px 0 0;
}

.estyma-overview-page > .container > article > .section {
  padding: 48px 0 64px;
}

.estyma-overview-page > .container > article > .section > .container {
  width: 100%;
}

.estyma-overview-page .breadcrumbs {
  margin-bottom: 0;
}

.product-page-cta {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .product-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-sidebar {
    position: static;
  }
}

/* Product image grid */
.product-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.product-images-grid .product-image {
  margin: 0;
}

.product-images-grid .product-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Technical drawings and their captions.
   One drawing plus its caption is a single <figure>, and a <figure> is one grid
   cell, so the pair cannot be split — including when the grid collapses to a
   single column on phones. */
.spec-figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 28px 0;
}

.spec-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  break-inside: avoid;
}

.spec-figure--wide {
  margin: 28px 0;
}

.spec-figure__media {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.spec-figure__image {
  display: block;
  width: 100%;
  height: auto;
}

.spec-figure__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.spec-figure__name {
  color: var(--text);
}

@media (max-width: 900px) {
  .spec-figure-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* Native block replacement for the legacy three-column media row. */
.product-media-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.product-media-grid > .wp-block-column { margin: 0 !important; min-width: 0; }
.product-media-grid .wp-block-embed,
.product-media-grid .wp-block-image { margin: 0; }
.product-media-grid img,
.product-media-grid iframe { display: block; width: 100%; height: auto; }
.estyma-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.estyma-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The player is only loaded on click, so what stands here first is a poster with a
   play button. Without a poster the panel falls back to the video title on graphite. */
.estyma-video__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--graphite);
  cursor: pointer;
}

.estyma-video__start img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.estyma-video__title {
  position: relative;
  padding: 0 20px 64px;
  color: var(--white);
  font-weight: 600;
  text-align: center;
}

.estyma-video__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 10px 28px rgba(17, 19, 24, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.estyma-video__icon::before {
  content: "";
  /* left-pointing border makes the play triangle; the offset centres it optically */
  margin-left: 5px;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--white);
}

.estyma-video__start:hover .estyma-video__icon,
.estyma-video__start:focus-visible .estyma-video__icon {
  transform: scale(1.08);
  background: var(--accent-dark);
}

@media (prefers-reduced-motion: reduce) {
  .estyma-video__icon { transition: none; }
  .estyma-video__start:hover .estyma-video__icon,
  .estyma-video__start:focus-visible .estyma-video__icon { transform: none; }
}
.perforation-diagram { max-width: 720px !important; margin-left: 0 !important; margin-right: auto !important; }
.perforation-diagram img { width: 100% !important; height: auto !important; }
@media (max-width: 767px) {
	.product-media-grid { grid-template-columns: 1fr; gap: 16px; }
	.perforation-diagram { max-width: 100% !important; }
}

/* Specification tables */
.wp-block-table.spec-table,
.spec-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin: 28px 0;
}

/* Knowledge base — editorial layer matching the ESTYMA homepage. */
.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.knowledge-section .section-head {
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.knowledge-section .section-head .text-link {
  margin-bottom: 8px;
}

.knowledge-section .article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.knowledge-section .article-grid article,
.knowledge-card-grid .article-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(34, 39, 47, .06);
}

.knowledge-section .article-grid article:hover,
.knowledge-card-grid .article-card:hover {
  border-color: rgba(255, 150, 5, .55);
  box-shadow: 0 18px 38px rgba(34, 39, 47, .12);
}

.knowledge-section .article-grid img,
.knowledge-card-grid .article-card-image img {
  display: block;
  height: 220px;
  object-fit: cover;
}

.knowledge-section .article-grid article > h3,
.knowledge-section .article-grid article > p {
  margin-inline: 22px;
}

.knowledge-section .article-grid article > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.knowledge-section .article-grid article > a {
  display: inline-block;
  margin-top: 8px;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 800;
}

.knowledge-archive {
  background: linear-gradient(180deg, #f7f8f9 0, var(--white) 360px);
}

.knowledge-archive-header {
  max-width: 720px;
  margin: 20px 0 48px;
}

.knowledge-archive-header .page-title {
  margin: 10px 0 14px;
}

.archive-intro {
  max-width: 600px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.knowledge-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.knowledge-card-grid .article-card-image {
  display: block;
  overflow: hidden;
}

.knowledge-card-grid .article-card-image img {
  width: 100%;
  transition: transform 320ms ease;
}

.knowledge-card-grid .article-card:hover .article-card-image img {
  transform: scale(1.04);
}

.article-card-body {
  padding: 24px;
}

.article-card-tag {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.article-card-tag a {
  color: inherit;
}

.article-card h2 {
  margin: 10px 0 10px;
  font-size: 22px;
  line-height: 1.15;
}

.article-card h2 a {
  color: var(--graphite);
}

.article-card-body > p {
  min-height: 70px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.article-card-footer time {
  color: var(--muted);
}

.article-card-footer a {
  color: var(--graphite);
  font-weight: 800;
}

.article-section {
  background: linear-gradient(180deg, #f7f8f9 0, var(--white) 420px);
}

.article-container {
  max-width: 1040px;
}

.article-single {
  max-width: 880px;
  margin: 20px auto 0;
}

.article-header {
  max-width: 780px;
  margin: 0 auto 30px;
  text-align: center;
}

.article-header .page-title {
  margin: 12px 0 16px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.article-featured-image {
  margin: 0 0 42px;
}

.article-featured-image img {
  display: block;
  width: 100%;
  max-height: 540px;
  border-radius: calc(var(--radius) * 1.3);
  object-fit: cover;
  box-shadow: 0 22px 55px rgba(34, 39, 47, .14);
}

.article-content {
  max-width: 720px;
  margin: 0 auto;
  color: #424852;
  font-size: 17px;
  line-height: 1.85;
}

.article-content h2,
.article-content h3 {
  margin-top: 42px;
  color: var(--graphite);
  line-height: 1.2;
}

.article-content li::marker {
  color: var(--accent);
}

.article-footer {
  max-width: 720px;
  margin: 42px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Native Latest Posts block on the editable Wiedza page. */
.estyma-knowledge-page .wp-block-latest-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 38px;
  padding: 0;
}

.estyma-knowledge-page .wp-block-latest-posts li {
  overflow: hidden;
  margin: 0;
  padding: 0 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(34, 39, 47, .06);
  list-style: none;
}

.estyma-knowledge-page .wp-block-latest-posts__featured-image {
  width: calc(100% + 48px);
  max-width: none;
  margin: 0 -24px 22px;
}

.estyma-knowledge-page .wp-block-latest-posts__featured-image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.estyma-knowledge-page .wp-block-latest-posts__post-title {
  display: block;
  margin-bottom: 10px;
  color: var(--graphite);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.estyma-knowledge-page .wp-block-latest-posts__post-date {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.estyma-knowledge-page .wp-block-latest-posts__post-excerpt {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Contact page */
.estyma-contact-page > .container {
  max-width: 1080px;
}

.estyma-contact-page article > h1.page-title {
  margin-bottom: 36px;
}

.estyma-contact-page .wp-block-columns {
  gap: 24px;
  margin: 30px 0 42px;
}

.estyma-contact-page .wp-block-column,
.estyma-contact-page .wpcf7 {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(34, 39, 47, .05);
}

.estyma-contact-page .wp-block-column p {
  color: var(--muted);
  line-height: 1.75;
}

.estyma-contact-page .wpcf7 {
  margin: 14px 0 46px;
  background: #f7f8f9;
}

.estyma-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.estyma-contact-page .wpcf7 label {
  display: block;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 800;
}

.estyma-contact-page .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.estyma-contact-page .wpcf7 textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #d9dde2;
  border-radius: 8px;
  background: var(--white);
  color: var(--graphite);
  font: inherit;
}

.estyma-contact-page .wpcf7 textarea {
  min-height: 150px;
  resize: vertical;
}

.estyma-contact-page .wpcf7 input:focus,
.estyma-contact-page .wpcf7 textarea:focus {
  outline: 2px solid rgba(255, 150, 5, .35);
  border-color: var(--accent);
}

.estyma-contact-page .wpcf7 input[type="submit"] {
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.estyma-contact-page .wpcf7 .wpcf7-acceptance,
.estyma-contact-page .wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0;
}

.estyma-contact-page .wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 680px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
}

.estyma-contact-page .wpcf7 input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--accent);
}

.estyma-map {
  overflow: hidden;
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef1f2;
}

.estyma-map iframe {
  display: block;
  width: 100%;
  min-height: 380px;
  border: 0;
}

.estyma-map p {
  margin: 0;
  padding: 14px 18px;
  background: var(--white);
}

@media (max-width: 800px) {
  .knowledge-section .article-grid,
  .knowledge-card-grid,
  .estyma-knowledge-page .wp-block-latest-posts {
    grid-template-columns: 1fr;
  }

  .article-header .page-title {
    font-size: 42px;
  }

  .estyma-form-grid {
    grid-template-columns: 1fr;
  }
}

.wp-block-table.spec-table table,
table.spec-table {
  min-width: 600px;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wp-block-table.spec-table th,
.wp-block-table.spec-table td,
.spec-table th,
.spec-table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.wp-block-table.spec-table th,
.spec-table th {
  background: var(--graphite);
  color: var(--white);
  font-weight: 600;
}

.wp-block-table.spec-table tbody tr:nth-child(even),
.spec-table tbody tr:nth-child(even) {
  background: var(--surface);
}

.dbs-spec-table {
  overflow-x: auto;
  margin: 24px 0;
}

.dbs-spec-table__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 14px;
}

.dbs-spec-table__table th,
.dbs-spec-table__table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.dbs-spec-table__table th {
  background: var(--graphite);
  color: var(--white);
  font-weight: 600;
}

.dbs-spec-table__table tbody tr:nth-child(even) {
  background: var(--surface);
}

.dbs-spec-table__desktop {
  display: block;
}

.dbs-spec-table__mobile {
  display: none;
}

@media (max-width: 768px) {
  .dbs-spec-table__desktop {
    display: none;
  }

  .dbs-spec-table__mobile {
    display: block;
  }
}

/* Product color swatches */
.color-box-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.color-box {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.color-box.black { background: #000000; }
.color-box.white { background: #ffffff; }
.color-box.gray { background: #9aa0a6; }
.color-box.blue { background: #0066cc; }
.color-box.red { background: #cc0000; }
.color-box.gold { background: #d4af37; }
.color-box.goldmetalic {
  background: linear-gradient(135deg, #b8860b, #f9e076, #b8860b);
}
.color-box.green { background: #228b22; }
.color-box.yellow { background: #ffd700; }
.color-box.orange { background: #ff8c00; }

.spec-download {
  margin: 24px 0 0;
}

/* Homepage knowledge cards use the same visual grammar as category cards. */
.knowledge-home-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.96fr 0.96fr;
  gap: 22px;
  margin-top: 26px;
}

.knowledge-home-card {
  position: relative;
  display: block;
  min-height: 292px;
  overflow: hidden;
  border-radius: 0;
  background: var(--graphite);
  color: var(--white);
  isolation: isolate;
}

.knowledge-home-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
  z-index: -2;
}

.knowledge-home-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04) 8%, rgba(0, 0, 0, .84) 100%);
  content: "";
  z-index: -1;
}

.knowledge-home-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--accent);
  content: "";
}

.knowledge-home-card__overlay {
  display: flex;
  min-height: 292px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 26px 24px 24px;
}

.knowledge-home-card small {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .74);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.knowledge-home-card strong {
  max-width: 340px;
  color: var(--white);
  font-size: 24px;
  line-height: 1.12;
}

.knowledge-home-card__cta {
  margin-top: 17px;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  transition: transform 180ms ease;
}

.knowledge-home-card:hover img {
  transform: scale(1.06);
}

.knowledge-home-card:hover .knowledge-home-card__cta {
  transform: translateX(5px);
}

html.js .knowledge-home-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .75, .25, 1);
}

html.js .knowledge-home-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .knowledge-home-card:nth-child(2) { transition-delay: 80ms; }
html.js .knowledge-home-card:nth-child(3) { transition-delay: 160ms; }

/* Refined Contact composition. */
.estyma-contact-page article > h1.page-title {
  max-width: 1080px;
  margin: 0 auto 16px;
}

.estyma-contact-page .contact-lead {
  max-width: 700px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.estyma-contact-page .contact-primary {
  margin-top: 0;
}

.estyma-contact-page .contact-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-top: 4px solid var(--accent);
}

.contact-card__label {
  margin: 0 0 14px;
  color: var(--accent) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.estyma-contact-page .contact-card h3 {
  margin-bottom: 14px;
  font-size: 26px;
}

.estyma-contact-page .contact-card a {
  color: var(--graphite);
  font-weight: 750;
}

.estyma-contact-page .contact-section-title {
  margin: 48px 0 18px;
}

.estyma-contact-page .contact-form-panel,
.estyma-contact-page .contact-map-panel {
  margin-top: 48px;
}

.estyma-contact-page .contact-form-panel > h2,
.estyma-contact-page .contact-map-panel > h2 {
  margin-bottom: 8px;
}

.estyma-contact-page .contact-form-panel > p {
  max-width: 620px;
	margin: 0 0 24px !important;
  color: var(--muted);
}

.estyma-contact-page .wp-block-details {
  margin-top: 32px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: #f7f8f9;
}

.estyma-contact-page .wp-block-details summary {
  color: var(--graphite);
  cursor: pointer;
  font-weight: 800;
}

.knowledge-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 38px;
}

.knowledge-list-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(34, 39, 47, .06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.knowledge-list-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 150, 5, .55);
  box-shadow: 0 22px 45px rgba(34, 39, 47, .13);
}

.knowledge-list-card__image {
  display: block;
  overflow: hidden;
}

.knowledge-list-card__image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 320ms ease;
}

.knowledge-list-card:hover .knowledge-list-card__image img {
  transform: scale(1.06);
}

.knowledge-list-card__body {
  padding: 23px;
}

.knowledge-list-card__body > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.knowledge-list-card h2 {
  margin: 10px 0;
  font-size: 22px;
  line-height: 1.18;
}

.knowledge-list-card h2 a,
.knowledge-list-card__body > div a {
  color: var(--graphite);
}

.knowledge-list-card__body > p {
  min-height: 70px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.knowledge-list-card__body > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.knowledge-list-card__body time {
  color: var(--muted);
}

.knowledge-list-card__body > div a {
  font-weight: 800;
}

/* Final responsive overrides for knowledge and contact layouts. */
@media (max-width: 800px) {
  .knowledge-home-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-list-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-section .article-grid,
  .knowledge-card-grid,
  .estyma-knowledge-page .wp-block-latest-posts {
    grid-template-columns: 1fr;
  }

  .article-header .page-title {
    font-size: 42px;
  }

  .estyma-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Legal pages: terms of sale and privacy policy. The client document is long and
   numbered throughout, so the text gets a reading-width column, the contents list
   a column of its own beside it, and every clause number its own gutter, which
   keeps a wrapped line aligned with the text instead of with the number.
   Clauses, notes and lists are registered block styles, so the same formatting is
   one click away in the editor when a clause has to be added by hand.
   The selectors carry the wrapper because the global flow layout sets the block
   gap at the same specificity and would otherwise win on source order. */
.legal-content {
  --legal-gutter: 2.5rem;
  --legal-gutter-sub: 2.1rem;
  margin-top: 30px;
}

.legal-content .legal-body {
  max-width: 820px;
  font-size: 15.5px;
  line-height: 1.75;
}

.legal-content .is-style-legal-lead {
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.legal-body .is-style-legal-section {
  margin: 48px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  scroll-margin-top: 110px;
}

/* The terms open with a section heading, which needs no rule above it. */
.legal-body > .is-style-legal-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-section__no {
  color: var(--accent);
}

.legal-body p,
.legal-body .is-style-legal-item,
.legal-body .is-style-legal-item-sub,
.legal-body .is-style-legal-note,
.legal-body .is-style-legal-note-sub,
.legal-body .is-style-legal-list,
.legal-body .is-style-legal-list-sub {
  margin: 0 0 16px;
}

.legal-body .is-style-legal-item,
.legal-body .is-style-legal-note {
  padding-left: var(--legal-gutter);
}

.legal-body .is-style-legal-item-sub {
  margin-left: var(--legal-gutter);
  margin-bottom: 8px;
  padding-left: var(--legal-gutter-sub);
}

.legal-body .is-style-legal-note-sub {
  padding-left: calc(var(--legal-gutter) + var(--legal-gutter-sub));
}

/* The clause number is a fixed-width inline box pulled back out of the indent, so
   it sits in the gutter and the wrapped lines still line up with the text. On a
   paragraph without the number the style is simply an indent, which keeps it
   usable when a clause is written by hand in the editor. */
.legal-item__no {
  display: inline-block;
  width: var(--legal-gutter);
  margin-left: calc(-1 * var(--legal-gutter));
  color: var(--accent);
  font-weight: 700;
}

.is-style-legal-item-sub .legal-item__no {
  width: var(--legal-gutter-sub);
  margin-left: calc(-1 * var(--legal-gutter-sub));
  color: var(--muted);
  font-weight: 600;
}

/* A returning top-level clause needs to read as a new step after a nested run. */
.legal-body .is-style-legal-item-sub + .is-style-legal-item,
.legal-body .is-style-legal-note + .is-style-legal-item,
.legal-body .is-style-legal-note-sub + .is-style-legal-item,
.legal-body .is-style-legal-list + .is-style-legal-item,
.legal-body .is-style-legal-list-sub + .is-style-legal-item {
  margin-top: 22px;
}

.legal-body .is-style-legal-list {
  padding-left: calc(var(--legal-gutter) + 20px);
}

.legal-body .is-style-legal-list-sub {
  padding-left: calc(var(--legal-gutter) + var(--legal-gutter-sub) + 20px);
}

.is-style-legal-list li,
.is-style-legal-list-sub li {
  margin-bottom: 6px;
}

.is-style-legal-list li::marker,
.is-style-legal-list-sub li::marker {
  color: var(--accent);
}

.legal-body .is-style-legal-def {
  margin: 0 0 10px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line);
}

.legal-def__term {
  font-weight: 800;
}

.legal-body a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Full register addresses are longer than a phone column. */
  overflow-wrap: anywhere;
}

.legal-body a:hover {
  color: var(--accent);
}

.legal-content .legal-toc {
  margin: 0 0 36px;
  padding: 22px 24px;
  background: var(--surface);
  border-radius: var(--radius);
}

.legal-toc .legal-toc__title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-toc .legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc__list li {
  border-top: 1px solid var(--line);
}

.legal-toc__list li:first-child {
  border-top: 0;
}

.legal-toc__list a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 8px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.legal-toc__list a:hover {
  color: var(--accent);
}

.legal-toc__no {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 640px) {
  .legal-content {
    --legal-gutter: 1.9rem;
    --legal-gutter-sub: 1.7rem;
  }
}

@media (min-width: 1000px) {
  .legal-content {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 0 64px;
    align-items: start;
  }

  .legal-content .is-style-legal-lead {
    grid-column: 1 / -1;
  }

  .legal-content .legal-toc {
    margin: 0;
  }
}

/* Homepage "About us" section. The client's story from the About page, set in the
   visual grammar the page already uses: an eyebrow over the section title, a light
   card for the story and the graphite panel with an accent edge, borrowed from the
   machines section, for the international reach. Selectors carry the section because
   the global flow layout sets the block gap at the same specificity and would
   otherwise win on source order. */
.about-section {
  padding-top: 72px;
  padding-bottom: 72px;
  background: var(--surface);
}

.about-section .about-head {
  max-width: 720px;
  margin-bottom: 36px;
}

.about-section .about-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-section .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 32px;
  align-items: stretch;
}

.about-section .about-story {
  padding: 34px 36px;
  border: 1px solid var(--line);
  background: var(--white);
}

.about-section .about-panel {
  padding: 34px 36px;
  border-left: 6px solid var(--accent);
  background: var(--graphite);
  color: var(--white);
}

.about-section .about-title {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.about-panel .about-title {
  color: var(--white);
}

.about-section .about-story p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}

.about-section .about-story .about-first {
  color: var(--text);
  font-size: 17px;
  line-height: 1.66;
}

.about-section .about-story .about-lead-in {
  margin-bottom: 0;
  color: var(--text);
  font-weight: 700;
}

.about-section .about-panel p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.72;
}

.about-section .about-panel .about-close {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-weight: 650;
}

.about-section .about-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.about-section .about-list li {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}

.about-section .about-list li:last-child {
  grid-column: 1 / -1;
}

.about-section .about-list li::before {
  margin-right: 9px;
  color: var(--accent);
  content: "/";
  font-weight: 900;
}

@media (max-width: 900px) {
  .about-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .about-section .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .about-section .about-story,
  .about-section .about-panel {
    padding: 26px 24px;
  }

  .about-section .about-list {
    grid-template-columns: minmax(0, 1fr);
  }
}