/* ============================================================
   HEAD & CAP — CSS QUICK EDIT GUIDE
   ============================================================

   Najczęściej edytowane ustawienia:

   GLOBALNE MARGINESY STRONY
   -> :root -> --pad

   GŁÓWNE NAGŁÓWKI SEKCJI
   -> .display

   DUŻE NAGŁÓWKI PO PRAWEJ
   -> .lead

   GŁÓWNY TEKST AKAPITÓW
   -> .bodycopy

   CZARNY PASEK POD HERO
   -> .trust strong  (biały nagłówek)
   -> .trust span    (szary opis)

   BOXES / CAPABILITIES
   -> .cap-card h3   (nagłówki)
   -> .cap-card p    (opisy)

   ETYKIETY NA ZDJĘCIACH
   -> .shot figcaption

   HOW WE WORK
   -> .value b       (nagłówki)
   -> .value p       (opisy)

   PROCESS
   -> .step h3       (Brief / Development / Sample...)
   -> .step p        (opisy pod krokami)

   CAP TYPES WE MANUFACTURE
   -> .cap-type-copy h3       (nazwy typów czapek)
   -> .cap-type-markers       (techniczne wskaźniki)
   -> .cap-type-copy p        (opisy SEO / produktowe)
   -> .cap-types-cta          (dolny CTA)

   FORMULARZ
   -> .contact-card, .field, .submit, .note

   TELEFON / TABLET
   -> sekcje @media na końcu CSS

   ============================================================ */

/* ============================================================
   01. GLOBAL SETTINGS / COLORS / SIDE MARGINS
   ============================================================ */

:root {
  --red:#e31b23;
  --black:#0b0b0b;
  --ink:#151515;
  --paper:#f6f6f3;
  --white:#fff;
  --grey:#6f6f6b;
  --line:#d9d9d4;
  --max:1440px;
  --pad:clamp(24px,5vw,88px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --hc-micro:Arial,Helvetica,sans-serif;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

img {
  display:block;
  width:100%
}

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

button,input,select,textarea {
  font:inherit
}

.wrap {
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--pad);
  padding-right:var(--pad)
}

/* ============================================================
   02. ACCESSIBILITY
   ============================================================ */

.skip {
  position:fixed;
  left:12px;
  top:-60px;
  z-index:1000;
  background:#fff;
  padding:10px 14px
}

.skip:focus {
  top:12px
}

/* ============================================================
   03. HEADER / NAVIGATION
   ============================================================ */

.header {
  height:78px;
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:height .25s var(--ease),box-shadow .25s
}

.header.scrolled {
  height:68px;
  box-shadow:0 6px 28px rgba(0,0,0,.06)
}

.header-inner {
  width:100%;
  max-width:none;
  margin:0;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}

.logo {
  width:166px;
  display:block
}

.logo img {
  height:auto
}

.nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em
}

.nav a {
  position:relative;
  padding:8px 0
}

.nav a:not(.nav-cta):after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:2px;
  background:var(--red);
  transition:right .25s
}

.nav a:hover:after {
  right:0
}

.nav-cta {
  background:var(--black);
  color:white;
  padding:13px 18px!important;
  transition:background .2s
}

.nav-cta:hover {
  background:var(--red)
}

.menu {
  display:none;
  border:0;
  background:none;
  padding:8px;
  width:42px;
  height:42px
}

.menu span {
  display:block;
  height:2px;
  background:#111;
  margin:6px 0;
  transition:.25s
}

/* ============================================================
   04. HERO / FIRST SCREEN
   ============================================================ */

.hero {
  padding-top:78px;
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  background:var(--white)
}

.hero-copy {
  padding:clamp(60px,7vw,118px) var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none;
  margin-left:0
}

.eyebrow {
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:11px
}

.eyebrow:before {
  content:"";
  width:28px;
  height:3px;
  background:var(--red)
}

h1 {
  font-size:clamp(56px,6.2vw,104px);
  line-height:.9;
  letter-spacing:-.055em;
  margin:26px 0 30px;
  font-weight:800
}

h1 span {
  display:block;
  color:var(--red)
}

.hero-copy p {
  font-size:clamp(18px,1.5vw,23px);
  line-height:1.5;
  color:#454545;
  max-width:590px;
  margin:0 0 38px
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:17px 22px;
  border:1px solid #111;
  font-weight:800;
  font-size:13px;
  letter-spacing:.03em;
  transition:.22s
}

.btn-dark {
  background:#111;
  color:white
}

.btn-dark:hover {
  background:var(--red);
  border-color:var(--red)
}

.btn-light:hover {
  background:#111;
  color:#fff
}

.hero-image {
  position:relative;
  overflow:hidden;
  min-height:680px
}

.hero-image img {
  height:100%;
  object-fit:cover;
  object-position:center
}

.hero-image:after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.38));
  height:35%
}

.hero-label {
  position:absolute;
  z-index:2;
  left:28px;
  bottom:24px;
  color:white;
  font-size:12px;
  letter-spacing:.12em;
  font-weight:700
}

.scroll-mark {
  position:absolute;
  right:20px;
  bottom:22px;
  z-index:2;
  background:#fff;
  color:#111;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:20px
}

/* ============================================================
   05. BLACK TRUST BAR
   ============================================================ */

.trust {
  background:#0b0b0b;
  color:#fff
}

.trust .wrap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-top:28px;
  padding-bottom:28px
}

.trust-item {
  padding:7px clamp(14px,2.2vw,34px);
  border-left:1px solid rgba(255,255,255,.2)
}

.trust-item:first-child {
  border-left:0;
  padding-left:0
}

.trust strong {
  display:block;
  font-size:28px;
  margin-bottom:5px
}

.trust span {
  color:#a9a9a9;
  font-size:24px;
  line-height:1.4
}

/* ============================================================
   06. COMMON SECTION LAYOUT / TYPOGRAPHY
   ============================================================ */

.section {
  padding:clamp(86px,9vw,150px) 0
}

.section-kicker {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:800;
  color:var(--red);
  margin-bottom:22px
}

.split {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(50px,8vw,130px);
  align-items:start
}

.display {
  font-size:clamp(44px,5.2vw,82px);
  line-height:.97;
  letter-spacing:-.045em;
  margin:0;
  font-weight:800
}

.display em {
  font-style:normal;
  color:var(--red)
}

.lead {
  font-size:clamp(30px,2.2vw,38px);
  line-height:1.35;
  margin:0 0 28px;
  color:#333
}

.bodycopy {
  font-size:22px;
  line-height:1.65;
  color:#5b5b57;
  margin:0
}

.about-copy .bodycopy+.bodycopy {
  margin-top:20px
}

.text-link {
  display:inline-flex;
  gap:14px;
  align-items:center;
  margin-top:34px;
  font-size:17px;
  font-weight:800;
  border-bottom:2px solid #111;
  padding-bottom:6px
}

.text-link:hover {
  border-color:var(--red);
  color:var(--red)
}

/* ============================================================
   07. CAPABILITIES
   ============================================================ */

.capabilities {
  background:var(--paper)
}

.cap-head {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(50px,8vw,130px);
  align-items:start;
  margin-bottom:58px
}

.cap-head .bodycopy {
  max-width:none
}

.cap-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.cap-card {
  position:relative;
  min-height:235px;
  padding:42px 56px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.45);
  transition:background .25s,transform .25s;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center
}

.cap-card:hover {
  background:#fff;
  transform:translateY(-3px)
}

.cap-num {
  position:absolute;
  top:28px;
  left:32px;
  font-size:12px;
  font-weight:800;
  color:var(--red);
  margin:0
}

.cap-card h3 {
  font-size:clamp(30px,2.2vw,38px);
  line-height:1.35;
  letter-spacing:-.03em;
  margin:0 0 18px;
  max-width:780px
}

.cap-card p {
  color:#5b5b57;
  font-size:22px;
  line-height:1.65;
  margin:0;
  max-width:760px
}

/* ============================================================
   08. PRODUCT DETAILS / PUZZLE GALLERY
   ============================================================ */

.details-head {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(50px,8vw,130px);
  align-items:start;
  margin-bottom:52px
}

.gallery {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:20px;
  aspect-ratio:16/9;
  align-items:stretch
}

.shot {
  overflow:hidden;
  position:relative;
  background:#ddd;
  height:100%
}

.shot img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease)
}

.shot:hover img {
  transform:scale(1.035)
}

.shot figcaption {
  position:absolute;
  left:20px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.94);
  color:#111;
  padding:12px 16px 11px 14px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)
}

.shot figcaption::before {
  content:"";
  width:4px;
  height:18px;
  flex:0 0 4px;
  background:var(--red)
}

.shot:hover figcaption {
  transform:translateY(-4px);
  background:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.2)
}

.s1 {
  grid-column:1 / 8;
  grid-row:1 / 4
}

.s2 {
  grid-column:8 / 13;
  grid-row:1 / 3
}

.s3 {
  grid-column:8 / 13;
  grid-row:3 / 5
}

.s4 {
  grid-column:1 / 4;
  grid-row:4 / 7
}

.s5 {
  grid-column:4 / 8;
  grid-row:5 / 7
}

.s6 {
  grid-column:8 / 13;
  grid-row:5 / 7
}

/* ============================================================
   09. HOW WE WORK / VALUES
   ============================================================ */

.values {
  background:#111;
  color:white
}

.values .section-kicker {
  color:#ff4c52
}

.values-top {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(50px,8vw,130px);
  align-items:start;
  margin-bottom:58px
}

.values-top .lead {
  color:#fff
}

.values-top .bodycopy {
  color:#aaa;
  max-width:none
}

.value-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid #343434
}

.value {
  position:relative;
  min-width:0;
  min-height:320px;
  padding:38px 34px 30px 34px;
  border-right:1px solid #343434;
  border-bottom:1px solid #343434;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.value::before {
  content:"";
  position:absolute;
  left:34px;
  top:-2px;
  width:42px;
  height:3px;
  background:var(--red)
}

.value:nth-child(4n) {
  border-right:0
}

.value-num {
  display:block;
  margin-bottom:16px;
  font-family:var(--hc-micro);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
  color:#9da7b5
}

.value b {
  display:block;
  font-size:29px;
  line-height:1.03;
  letter-spacing:-.03em;
  margin-bottom:14px;
  max-width:92%
}

.value p {
  color:#b0b0b0;
  line-height:1.48;
  margin:0;
  font-size:16px;
  max-width:95%
}

.value a {
  color:#fff;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.9)
}

.value a:hover {
  color:var(--red);
  border-color:var(--red)
}

/* ============================================================
   10. PROCESS STEPS
   ============================================================ */

.process {
  background:#fff
}

.process-head {
  max-width:840px;
  margin-bottom:58px
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid #bbb
}

.step {
  padding:24px 22px 0 0;
  position:relative
}

.step:before {
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:42px;
  height:3px;
  background:var(--red)
}

.step span {
  font-size:12px;
  color:#8a8a87;
  font-weight:800
}

.step h3 {
  font-size:28px;
  line-height:1.2;
  margin:30px 0 12px;
  letter-spacing:-.02em
}

/* EDIT: PROCESS descriptions, e.g. “Send a sketch, reference...” */
.step p {
  font-size:18px;
  line-height:1.4;
  color:#666;
  margin:0
}

/* ============================================================
   11. FULL-WIDTH STATEMENT IMAGE
   ============================================================ */

.statement {
  min-height:630px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}

.statement img {
  position:absolute;
  inset:0;
  height:100%;
  object-fit:cover;
  filter:brightness(.36)
}

.statement-copy {
  position:relative;
  z-index:2;
  color:white;
  text-align:center;
  padding:70px var(--pad);
  max-width:1100px
}

.statement blockquote {
  font-size:clamp(38px,5vw,76px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:800;
  margin:0 0 26px
}

.statement blockquote em {
  font-style:normal;
  color:#ff3d45
}

.statement small {
  font-size:11px;
  letter-spacing:.18em;
  font-weight:800
}

/* ============================================================
   12. CONTACT / ENQUIRY FORM
   ============================================================ */

.contact {
  background:var(--paper)
}

.contact-top {
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:70px;
  margin-bottom:64px
}

.contact-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end
}

.contact-links a {
  font-size:clamp(22px,2vw,34px);
  font-weight:800;
  letter-spacing:-.025em;
  border-bottom:2px solid #111;
  margin-bottom:13px
}

.contact-links a:hover {
  color:var(--red);
  border-color:var(--red)
}

.contact-card {
  background:#fff;
  border:1px solid var(--line);
  padding:clamp(26px,4vw,54px)
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 24px
}

.field {
  display:flex;
  flex-direction:column;
  gap:8px
}

.field.full {
  grid-column:1/-1
}

.field label {
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}

.field input,.field select,.field textarea {
  width:100%;
  border:0;
  border-bottom:1px solid #aaa;
  background:transparent;
  padding:13px 2px 12px;
  border-radius:0;
  outline:0;
  color:#111
}

.field textarea {
  min-height:100px;
  resize:vertical
}

.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--red);
  box-shadow:0 1px 0 var(--red)
}

.form-actions {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:14px
}

.note {
  font-size:12px;
  color:#777;
  line-height:1.5;
  max-width:460px
}

.submit {
  border:0;
  background:#111;
  color:#fff;
  padding:17px 24px;
  font-weight:800;
  cursor:pointer;
  transition:background .25s,opacity .25s
}

.submit:hover {
  background:var(--red)
}

.submit:disabled {
  cursor:wait;
  opacity:.55
}

.form-status {
  grid-column:1/-1;
  display:none;
  margin-top:4px;
  padding:16px 18px;
  font-size:14px;
  line-height:1.5;
  border:1px solid var(--line);
  background:#fff
}

.form-status.show {
  display:block
}

.form-status.success {
  border-color:#111;
  color:#111
}

.form-status.error {
  border-color:var(--red);
  color:var(--red)
}

.hp-field {
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important
}

/* ============================================================
   13. FOOTER
   ============================================================ */

.footer {
  background:#0b0b0b;
  color:#fff;
  padding:52px 0 34px
}

.footer-main {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}

.footer-logo {
  width:190px;
  filter:brightness(0) invert(1)
}

.footer-meta {
  text-align:right;
  color:#8e8e8e;
  font-size:12px;
  line-height:1.8
}

.footer-links {
  display:flex;
  gap:20px;
  justify-content:flex-end;
  margin-bottom:8px;
  color:#fff;
  font-weight:700
}

.footer-bottom {
  border-top:1px solid #2a2a2a;
  margin-top:35px;
  padding-top:18px;
  color:#707070;
  font-size:11px;
  display:flex;
  justify-content:space-between
}

/* ============================================================
   14. SCROLL ANIMATIONS
   ============================================================ */

.reveal {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)
}

.reveal.in {
  opacity:1;
  transform:none
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .shot img {
    transition:none
  }
}



/* ============================================================
   HEAD & CAP MICRO TYPOGRAPHY
   Neutral, visible and clearly distinct from wide sports-brand
   typography. Applied to all small UI / kicker labels.
   ============================================================ */

.eyebrow,
.section-kicker,
.cap-num,
.shot figcaption,
.statement small,
.field label,
.privacy-eyebrow,
.section-black-bridge-kicker,
.bridge-proof-source,
.cap-type-markers {
  font-family:var(--hc-micro);
  font-weight:700;
  color:#555550;
}

.eyebrow,
.section-kicker,
.privacy-eyebrow,
.section-black-bridge-kicker,
.bridge-proof-source,
.shot figcaption,
.statement small,
.cap-type-markers {
  letter-spacing:.06em;
}

.section-kicker,
.eyebrow {
  font-size:12px;
}

.cap-num {
  font-size:13px;
}

.field label,
.shot figcaption,
.statement small,
.bridge-proof-source,
.cap-type-markers {
  font-size:11px;
  line-height:1.25;
}

/* ============================================================
   15. RESPONSIVE / TABLET
   ============================================================ */

@media(max-width:980px) {
  .nav {
    display:none
  }
  .menu {
    display:block
  }
  .header.open .nav {
    display:flex;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:18px var(--pad) 28px;
    border-bottom:1px solid #ddd;
    gap:4px
  }
  .header.open .nav a {
    padding:14px 0
  }
  .hero {
    grid-template-columns:1fr;
    min-height:0
  }
  .hero-copy {
    max-width:none;
    margin:0;
    padding-top:82px;
    padding-bottom:70px
  }
  .hero-image {
    min-height:58vw
  }
  .trust .wrap {
    grid-template-columns:repeat(2,1fr)
  }
  .trust-item:nth-child(3) {
    border-left:0
  }
  .split,.details-head,.values-top,.contact-top {
    grid-template-columns:1fr
  }
  .cap-head {
    grid-template-columns:1fr;
    align-items:start
  }
  .value-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .value:nth-child(4n) {
    border-right:1px solid #343434
  }
  .value:nth-child(2n) {
    border-right:0
  }
  .value {
    min-height:290px;
    padding:36px 24px 24px 24px
  }
  .value::before {
    left:24px
  }
  .value b {
    font-size:25px;
    max-width:100%
  }
  .value p {
    max-width:100%
  }
  .process-grid {
    grid-template-columns:repeat(2,1fr);
    row-gap:46px
  }
  .gallery {
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:repeat(6,90px);
    aspect-ratio:auto
  }
  .s1 {
    grid-column:1 / 8;
    grid-row:1 / 4
  }
  .s2 {
    grid-column:8 / 13;
    grid-row:1 / 3
  }
  .s3 {
    grid-column:8 / 13;
    grid-row:3 / 5
  }
  .s4 {
    grid-column:1 / 4;
    grid-row:4 / 7
  }
  .s5 {
    grid-column:4 / 8;
    grid-row:5 / 7
  }
  .s6 {
    grid-column:8 / 13;
    grid-row:5 / 7
  }
  .contact-links {
    align-items:flex-start
  }
  .contact-links a {
    font-size:26px
  }
}

/* ============================================================
   16. RESPONSIVE / MOBILE
   ============================================================ */

@media(max-width:640px) {
  .header {
    height:68px
  }
  .hero {
    padding-top:68px
  }
  .logo {
    width:142px
  }
  h1 {
    font-size:54px
  }
  .hero-image {
    min-height:78vw
  }
  .trust .wrap {
    grid-template-columns:1fr;
    padding-top:12px;
    padding-bottom:12px
  }
  .trust-item,.trust-item:first-child,.trust-item:nth-child(3) {
    border-left:0;
    border-top:1px solid #292929;
    padding:15px 0
  }
  .trust-item:first-child {
    border-top:0
  }
  .section {
    padding:78px 0
  }
  .display {
    font-size:44px
  }
  .cap-grid {
    grid-template-columns:1fr
  }
  .cap-card {
    min-height:230px;
    padding:52px 28px 34px
  }
  .cap-num {
    top:22px;
    left:24px;
    margin:0
  }
  .cap-card h3 {
    font-size:30px
  }
  .cap-card p {
    font-size:18px;
    line-height:1.55
  }
  .gallery {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:none;
    aspect-ratio:auto;
    gap:16px
  }
  .shot {
    min-height:250px
  }
  .shot figcaption {
    left:14px;
    bottom:14px;
    padding:10px 13px 9px 12px;
    font-size:10px;
    gap:8px
  }
  .shot figcaption::before {
    height:15px;
    width:3px;
    flex-basis:3px
  }
  .s1,.s2,.s3,.s4,.s5,.s6 {
    grid-column:auto;
    grid-row:auto
  }
  .values-top {
    margin-bottom:42px
  }
  .value-grid {
    grid-template-columns:1fr
  }
  .value,.value:nth-child(2n),.value:nth-child(4n) {
    border-right:0;
    border-bottom:1px solid #343434;
    margin-right:0;
    min-height:0;
    padding:24px 0 26px
  }
  .value::before {
    left:0;
    top:-2px;
    width:34px;
    height:3px
  }
  .value:last-child {
    border-bottom:0
  }
  .value-num {
    margin-bottom:14px
  }
  .value b {
    font-size:24px;
    line-height:1.08;
    max-width:100%
  }
  .value p {
    font-size:19px;
    line-height:1.5;
    max-width:100%
  }
  .process-grid {
    grid-template-columns:1fr
  }
  .step h3 {
    font-size:24px
  }
  .step p {
    font-size:19px;
    line-height:1.5
  }
  .statement {
    min-height:520px
  }
  .contact-top {
    gap:32px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  .form-actions {
    grid-column:auto;
    align-items:stretch;
    flex-direction:column
  }
  .submit {
    width:100%
  }
  .footer-main,.footer-bottom {
    align-items:flex-start;
    flex-direction:column
  }
  .footer-meta {
    text-align:left
  }
  .footer-links {
    justify-content:flex-start
  }
}

/* ============================================================
   17. PRIVACY / COOKIES / LEGAL POPUPS
   ============================================================ */

/* ===== HEAD & CAP PRIVACY / COOKIES / LEGAL ===== */
html.privacy-lock,html.privacy-lock body {
  overflow:hidden
}

.privacy-banner {
  position:fixed;
  z-index:9998;
  left:50%;
  bottom:26px;
  transform:translate(-50%,24px);
  width:min(1040px,calc(100% - 36px));
  background:rgba(13,13,13,.97);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 80px rgba(0,0,0,.32);
  padding:28px 30px;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px)
}

.privacy-banner.show {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}

.privacy-banner-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:end
}

.privacy-eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:900;
  color:var(--red);
  margin-bottom:12px;
  text-transform:uppercase
}

.privacy-banner h2 {
  font-size:clamp(27px,2.2vw,38px);
  letter-spacing:-.04em;
  line-height:1.05;
  margin:0 0 12px;
  color:#fff
}

.privacy-banner p {
  margin:0;
  color:#c7c7c7;
  font-size:15px;
  line-height:1.6;
  max-width:760px
}

.privacy-banner .privacy-company {
  display:block;
  color:#8f8f8f;
  margin-top:10px;
  font-size:12px;
  line-height:1.5
}

.privacy-actions {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap
}

.privacy-btn {
  appearance:none;
  border:0;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  padding:14px 18px;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;
  white-space:nowrap
}

.privacy-btn:hover {
  transform:translateY(-2px)
}

.privacy-btn.primary {
  background:#fff;
  color:#111;
  border:1px solid #fff
}

.privacy-btn.secondary {
  background:transparent;
  color:#fff;
  border:1px solid #4a4a4a
}

.privacy-btn.secondary:hover {
  border-color:#fff
}

.privacy-inline-link {
  appearance:none;
  border:0;
  background:none;
  color:#fff;
  padding:0;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  font:inherit
}

.legal-overlay {
  position:fixed;
  z-index:9999;
  inset:0;
  background:rgba(0,0,0,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s
}

.legal-overlay.open {
  opacity:1;
  visibility:visible
}

.legal-panel {
  width:min(1120px,100%);
  max-height:min(860px,calc(100vh - 56px));
  background:#f7f7f4;
  color:#151515;
  display:grid;
  grid-template-rows:auto auto 1fr;
  box-shadow:0 30px 100px rgba(0,0,0,.36);
  transform:translateY(18px);
  transition:transform .3s var(--ease);
  overflow:hidden
}

.legal-overlay.open .legal-panel {
  transform:translateY(0)
}

.legal-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  padding:28px 34px 22px;
  border-bottom:1px solid #d9d9d5
}

.legal-top .section-kicker {
  margin:0 0 9px
}

.legal-top h2 {
  margin:0;
  font-size:clamp(30px,3vw,48px);
  letter-spacing:-.045em;
  line-height:1
}

.legal-close {
  width:46px;
  height:46px;
  border:1px solid #cfcfca;
  background:transparent;
  color:#111;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  transition:background .2s,border-color .2s
}

.legal-close:hover {
  background:#111;
  color:#fff;
  border-color:#111
}

.legal-tabs {
  display:flex;
  gap:0;
  overflow:auto;
  border-bottom:1px solid #d9d9d5;
  background:#fff
}

.legal-tab {
  appearance:none;
  border:0;
  border-right:1px solid #e3e3df;
  background:#fff;
  color:#555;
  padding:17px 22px;
  font:inherit;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap
}

.legal-tab.active {
  background:#111;
  color:#fff
}

.legal-content {
  overflow:auto;
  padding:34px;
  scrollbar-gutter:stable
}

.legal-section {
  display:none;
  max-width:920px
}

.legal-section.active {
  display:block
}

.legal-section h3 {
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.03em;
  margin:0 0 18px
}

.legal-section h4 {
  font-size:18px;
  line-height:1.3;
  margin:28px 0 10px
}

.legal-section p,.legal-section li {
  font-size:15px;
  line-height:1.7;
  color:#555
}

.legal-section p {
  margin:0 0 14px
}

.legal-section ul {
  padding-left:20px;
  margin:8px 0 18px
}

.legal-section li {
  margin:5px 0
}

.legal-section strong {
  color:#151515
}

.legal-meta {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:#d9d9d5;
  border:1px solid #d9d9d5;
  margin:20px 0 26px
}

.legal-meta div {
  background:#fff;
  padding:16px 18px;
  font-size:14px;
  line-height:1.5
}

.cookie-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid #d9d9d5
}

.cookie-row:last-of-type {
  border-bottom:1px solid #d9d9d5
}

.cookie-row h4 {
  margin:0 0 5px;
  font-size:17px
}

.cookie-row p {
  margin:0;
  font-size:14px
}

.cookie-state {
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:9px 11px;
  background:#111;
  color:#fff;
  white-space:nowrap
}

.cookie-state.off {
  background:#e9e9e5;
  color:#666
}

.cookie-save {
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}

.cookie-save .privacy-btn.primary {
  background:#111;
  color:#fff;
  border-color:#111
}

.cookie-note {
  font-size:12px;
  color:#777
}

.legal-updated {
  font-size:12px!important;
  color:#888!important;
  margin-top:30px!important;
  border-top:1px solid #ddd;
  padding-top:14px
}

.footer-links button {
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  padding:0;
  cursor:pointer
}

.footer-links button:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.form-privacy {
  font-size:12px;
  line-height:1.55;
  color:#777;
  max-width:720px;
  margin-top:2px
}

.form-privacy button {
  appearance:none;
  border:0;
  background:none;
  padding:0;
  color:#111;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer
}

@media(max-width:760px) {
  .privacy-banner {
    bottom:14px;
    width:calc(100% - 24px);
    padding:22px
  }
  .privacy-banner-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .privacy-actions {
    justify-content:stretch
  }
  .privacy-actions .privacy-btn {
    flex:1 1 auto
  }
  .legal-overlay {
    padding:10px
  }
  .legal-panel {
    max-height:calc(100vh - 20px)
  }
  .legal-top {
    padding:22px 20px 18px
  }
  .legal-tabs {
    scrollbar-width:thin
  }
  .legal-tab {
    padding:15px 16px
  }
  .legal-content {
    padding:24px 20px
  }
  .legal-meta {
    grid-template-columns:1fr
  }
  .cookie-row {
    grid-template-columns:1fr;
    gap:10px
  }
  .cookie-state {
    justify-self:start
  }
}


/* ============================================================
   18. ABOUT HEAD & CAP — PENCIL STORY COMPOSITION
   Screenshot-matched layout: large sketch + 2x2 facts on the left,
   compact brand story on the right.
   ============================================================ */
.about-section {
  padding:clamp(72px,5.5vw,106px) 0 clamp(82px,6vw,116px);
  background:#fff;
}

.about-layout {
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
  gap:clamp(70px,7vw,132px);
  align-items:start;
}

.about-left,
.about-copy {
  min-width:0;
}

.about-section .section-kicker {
  margin-bottom:18px;
}

.about-section .display {
  font-size:clamp(48px,4vw,72px);
  line-height:.94;
  letter-spacing:-.048em;
}

.about-sketch {
  margin-top:18px;
  width:100%;
  overflow:hidden;
}

.about-sketch img {
  width:100%;
  height:auto;
  display:block;
  background:#fff;
  object-fit:contain;
}

.about-facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:2px;
  border-top:1px solid var(--line);
}

.about-fact {
  min-width:0;
  min-height:112px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:18px 22px;
}

.about-fact:nth-child(odd) {
  border-right:1px solid var(--line);
}

.about-fact:nth-child(-n+2) {
  border-bottom:1px solid var(--line);
}

.about-fact-icon {
  width:58px;
  height:58px;
  object-fit:contain;
}

.about-fact strong {
  display:block;
  margin-bottom:7px;
  color:#111;
  font-size:16px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.01em;
}

.about-fact span {
  display:block;
  color:#3f3f3d;
  font-size:14px;
  line-height:1.42;
}

.about-section .about-copy .lead {
  font-size:clamp(28px,1.8vw,35px);
  line-height:1.22;
  letter-spacing:-.025em;
  margin:0 0 28px;
  color:#222;
}

.about-section .about-copy .bodycopy {
  max-width:none;
  font-size:clamp(16px,1vw,19px);
  line-height:1.55;
  color:#444440;
}

.about-section .about-copy .bodycopy + .bodycopy {
  margin-top:20px;
}

@media(max-width:1280px) and (min-width:981px) {
  .about-layout {
    grid-template-columns:minmax(0,1.03fr) minmax(400px,.97fr);
    gap:clamp(46px,5vw,72px);
  }
  .about-section .display {
    font-size:clamp(46px,4.25vw,60px);
  }
  .about-fact {
    grid-template-columns:60px minmax(0,1fr);
    gap:13px;
    padding:16px 14px;
  }
  .about-fact-icon {
    width:50px;
    height:50px;
  }
  .about-fact strong {
    font-size:14px;
  }
  .about-fact span {
    font-size:13px;
  }
  .about-section .about-copy .lead {
    font-size:clamp(27px,2.2vw,31px);
  }
  .about-section .about-copy .bodycopy {
    font-size:16px;
    line-height:1.52;
  }
}

@media(max-width:980px) {
  .about-layout {
    grid-template-columns:1fr;
    gap:58px;
  }
  .about-sketch {
    max-width:760px;
  }
  .about-facts {
    max-width:760px;
  }
  .about-section .about-copy {
    max-width:760px;
  }
}

@media(max-width:640px) {
  .about-section {
    padding:70px 0 78px;
  }
  .about-section .display {
    font-size:44px;
  }
  .about-sketch {
    margin-top:14px;
  }
  .about-facts {
    grid-template-columns:1fr;
  }
  .about-fact,
  .about-fact:nth-child(odd),
  .about-fact:nth-child(-n+2) {
    min-height:94px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .about-fact:last-child {
    border-bottom:0;
  }
  .about-section .about-copy .bodycopy {
    font-size:16px;
  }
}

/* ============================================================
   19. ABOUT HEAD & CAP — DESKTOP HEIGHT MATCH
   Keeps the complete left composition (headline + sketch + facts)
   the same height as the story text in the right column.
   The pencil artwork automatically becomes smaller on wide screens
   instead of making the whole section taller.
   ============================================================ */
@media (min-width:981px) {
  .about-layout {
    align-items:stretch;
  }

  /* Do not let the intrinsic image height determine the grid row height.
     The right-hand text becomes the height reference for this section. */
  .about-left {
    display:flex;
    flex-direction:column;
    align-self:stretch;
    min-height:0;
    contain:size;
    overflow:hidden;
  }

  .about-section .section-kicker,
  .about-section .display,
  .about-facts {
    flex:0 0 auto;
  }

  /* The sketch uses only the space that remains between the headline
     and the 2x2 fact grid, so both columns finish on the same baseline. */
  .about-sketch {
    flex:1 1 0;
    min-height:0;
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .about-sketch img {
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center center;
  }

  /* Slightly more compact fact rows, matching the reference layout. */
  .about-facts {
    margin-top:0;
  }

  .about-fact {
    min-height:88px;
    grid-template-columns:58px minmax(0,1fr);
    gap:14px;
    padding:12px 18px;
  }

  .about-fact-icon {
    width:48px;
    height:48px;
  }
}




/* ============================================================
   19B. BLACK RECOGNITION / SEO BRIDGE
   Editorial trust section between PROCESS and CAP TYPES.
   No CTA: independent recognition + strong semantic SEO terms.
   ============================================================ */

.section-black-bridge {
  background:#0b0b0b;
  color:#fff;
  padding:clamp(74px,6.4vw,112px) 0 clamp(62px,5.4vw,94px);
}

.section-black-bridge-top {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:clamp(64px,8vw,150px);
  align-items:start;
  margin-bottom:clamp(56px,5.2vw,86px);
}

.section-black-bridge-copy,
.section-black-bridge-meta {
  min-width:0;
}

.section-black-bridge-kicker {
  margin-bottom:24px;
  color:#ff4c52;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.section-black-bridge-copy h2 {
  margin:0;
  max-width:900px;
  font-size:clamp(48px,5.2vw,84px);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:800;
}

.section-black-bridge-copy h2 span {
  display:block;
  color:var(--red);
}

.section-black-bridge-meta {
  padding-top:6px;
  max-width:720px;
}

.section-black-bridge-lead {
  margin:0 0 28px !important;
  color:#fff !important;
  font-size:clamp(30px,2.35vw,42px) !important;
  line-height:1.18 !important;
  letter-spacing:-.035em;
  font-weight:400;
}

.section-black-bridge-meta p {
  margin:0;
  color:#bdbdb9;
  font-size:clamp(18px,1.22vw,23px);
  line-height:1.58;
}

.section-black-bridge-proof {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid #343434;
}

.bridge-proof-item {
  position:relative;
  min-width:0;
  padding:36px clamp(22px,2.2vw,38px) 4px 0;
  margin-right:clamp(22px,2.2vw,38px);
  border-right:1px solid #343434;
}

.bridge-proof-item:last-child {
  margin-right:0;
  padding-right:0;
  border-right:0;
}

.bridge-proof-item::before {
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:42px;
  height:3px;
  background:var(--red);
}

.bridge-proof-source {
  display:block;
  margin-bottom:14px;
  color:#8e8e8a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.bridge-proof-item h3 {
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(22px,1.65vw,30px);
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:800;
}

.bridge-proof-item p {
  margin:0;
  color:#a9a9a6;
  font-size:clamp(16px,1vw,19px);
  line-height:1.5;
}

@media(max-width:1100px) {
  .section-black-bridge-top {
    grid-template-columns:1fr;
    gap:38px;
  }

  .section-black-bridge-meta {
    max-width:900px;
    padding-top:0;
  }

  .section-black-bridge-proof {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bridge-proof-item:nth-child(2) {
    border-right:0;
    margin-right:0;
    padding-right:0;
  }

  .bridge-proof-item:nth-child(3),
  .bridge-proof-item:nth-child(4) {
    border-top:1px solid #343434;
    margin-top:32px;
  }
}

@media(max-width:700px) {
  .section-black-bridge {
    padding:64px 0 58px;
  }

  .section-black-bridge-top {
    gap:30px;
    margin-bottom:44px;
  }

  .section-black-bridge-kicker {
    margin-bottom:18px;
    font-size:10px;
  }

  .section-black-bridge-copy h2 {
    font-size:clamp(40px,12vw,56px);
  }

  .section-black-bridge-lead {
    margin-bottom:18px !important;
    font-size:28px !important;
  }

  .section-black-bridge-meta p {
    font-size:16px;
    line-height:1.55;
  }

  .section-black-bridge-proof {
    grid-template-columns:1fr;
  }

  .bridge-proof-item,
  .bridge-proof-item:nth-child(2),
  .bridge-proof-item:nth-child(3),
  .bridge-proof-item:nth-child(4) {
    margin:0;
    padding:30px 0 28px;
    border-right:0;
    border-top:1px solid #343434;
  }

  .bridge-proof-item:first-child {
    border-top:0;
  }

  .bridge-proof-item h3 {
    font-size:24px;
  }

  .bridge-proof-item p {
    font-size:16px;
  }
}

/* ============================================================
   20. CAP TYPES WE MANUFACTURE
   3 columns x 4 rows on desktop.
   Horizontal product composition: image left / technical copy right.
   ============================================================ */

.cap-types-section {
  background:#fff;
  padding:clamp(82px,7vw,122px) 0 0;
}

.cap-types-head {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
  gap:clamp(60px,9vw,170px);
  align-items:end;
  margin-bottom:clamp(46px,4.5vw,72px);
}

.cap-types-head .section-kicker {
  margin-bottom:16px;
}

.cap-types-head .display {
  font-size:clamp(48px,4.35vw,72px);
  line-height:.92;
}

.cap-types-intro {
  align-self:center;
  max-width:610px;
}

.cap-types-intro p {
  margin:0;
  color:#373735;
  font-size:clamp(16px,1.12vw,20px);
  line-height:1.55;
}

.cap-types-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.cap-type-card {
  min-width:0;
  min-height:330px;
  display:grid;
  grid-template-columns:minmax(150px,.92fr) minmax(0,1.18fr);
  gap:clamp(18px,1.7vw,30px);
  align-items:center;
  padding:clamp(24px,2vw,34px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  transition:none;
}

.cap-type-card:hover {
  background:#fff;
}

.cap-type-image {
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff !important;
}

.cap-type-image img {
  width:100%;
  height:100%;
  max-height:250px;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:normal;
}

.cap-type-copy {
  min-width:0;
}

.cap-type-copy h3 {
  position:relative;
  margin:0 0 27px;
  color:#111;
  font-size:clamp(20px,1.5vw,28px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
}

.cap-type-copy h3::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-13px;
  width:24px;
  height:2px;
  background:var(--red);
}

.cap-type-markers {
  display:grid;
  gap:5px;
  margin:0 0 16px;
  color:#222;
  font-size:10px;
  line-height:1.25;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cap-type-markers span {
  display:block;
  white-space:normal;
}

.cap-type-markers b {
  font-weight:800;
}

.cap-type-markers i {
  margin:0 5px;
  color:var(--red);
  font-style:normal;
  font-weight:900;
}

.cap-type-copy p {
  margin:0;
  color:#555552;
  font-size:clamp(13px,.86vw,15px);
  line-height:1.5;
}

.cap-types-cta {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
  padding:30px 0 32px;
  border-top:0;
}

.cap-types-cta-copy {
  max-width:820px;
}

.cap-types-cta h3 {
  margin:0 0 8px;
  color:#111;
  font-size:clamp(28px,2.15vw,40px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
}

.cap-types-cta h3 em {
  color:var(--red);
  font-style:normal;
}

.cap-types-cta p {
  max-width:900px;
  margin:0;
  color:#666;
  font-size:18px;
  line-height:1.5;
}

.cap-types-cta-button {
  min-width:270px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:20px 24px;
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .22s var(--ease),transform .22s var(--ease);
}

.cap-types-cta-button:hover {
  background:#111;
  transform:translateY(-2px);
}

.cap-types-cta-button span {
  font-size:19px;
  line-height:1;
}

@media(max-width:1280px) and (min-width:981px) {
  .cap-type-card {
    grid-template-columns:minmax(125px,.85fr) minmax(0,1.15fr);
    gap:18px;
    padding:25px 22px;
    min-height:315px;
  }
  .cap-type-image img {
    max-height:210px;
  }
  .cap-type-copy h3 {
    font-size:22px;
  }
  .cap-type-copy p {
    font-size:13px;
  }
}

@media(max-width:980px) {
  .cap-types-section {
    padding-top:82px;
  }
  .cap-types-head {
    grid-template-columns:1fr;
    gap:30px;
    align-items:start;
  }
  .cap-types-intro {
    max-width:760px;
  }
  .cap-types-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cap-type-card {
    min-height:300px;
    grid-template-columns:minmax(130px,.9fr) minmax(0,1.1fr);
  }
  .cap-types-cta {
    grid-template-columns:1fr auto;
  }
}

@media(max-width:700px) {
  .cap-types-grid {
    grid-template-columns:1fr;
  }
  .cap-type-card {
    min-height:250px;
    grid-template-columns:minmax(118px,.72fr) minmax(0,1.28fr);
    gap:18px;
    padding:22px 18px;
  }
  .cap-type-image img {
    max-height:205px;
  }
  .cap-type-copy h3 {
    font-size:22px;
    margin-bottom:25px;
  }
  .cap-type-markers {
    font-size:9px;
    margin-bottom:13px;
  }
  .cap-type-copy p {
    font-size:13px;
    line-height:1.45;
  }
  .cap-types-cta {
    grid-template-columns:1fr;
    gap:22px;
    padding:26px 0 30px;
  }
  .cap-types-cta-button {
    width:100%;
    min-width:0;
  }
}

@media(max-width:430px) {
  .cap-type-card {
    grid-template-columns:108px minmax(0,1fr);
    gap:14px;
    padding:20px 14px;
  }
  .cap-type-image img {
    max-height:180px;
  }
  .cap-type-copy h3 {
    font-size:20px;
  }
  .cap-type-copy p {
    font-size:12.5px;
  }
}



/* ============================================================
   HERO EYEBROW — MATCH TECH PACK
   "European cap & headwear manufacturer · Łódź, Poland"
   Same visual treatment as:
   "HEAD & CAP / PRODUCT DEVELOPMENT"
   ============================================================ */

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--hc-micro);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.2;
  color:#555550;
  text-transform:uppercase;
}

.hero .eyebrow::before {
  content:"";
  display:block;
  flex:0 0 28px;
  width:28px;
  height:3px;
  background:var(--red);
}



/* ============================================================
   SECTION KICKERS — HEAD & CAP RED
   All main section indicators stay red:
   01 / ABOUT HEAD & CAP
   02 / CAPABILITIES
   03 / PRODUCT DETAILS
   04 / HOW WE WORK
   05 / PROCESS
   06 / CAP TYPES
   07 / START A PROJECT
   ============================================================ */

.section-kicker {
  color:var(--red) !important;
}

/* Dark section: keep the same Head & Cap red, not grey */
.values .section-kicker {
  color:var(--red) !important;
}