/* Proto Chrom — Swiss / condensed-display / catalog-cards system */

:root{
  --color-black:#0d0d0d;
  --color-white:#ffffff;
  --color-paper:#f4f3f0;
  --color-accent:#d8321a;
  --color-line:#0d0d0d;
  --font-display: "Arial Narrow", "Helvetica Neue Condensed", "Oswald", Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --border-w: 2px;
  --gap: 1.5rem;
  --container-w: 1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-black);
  background:var(--color-paper);
  line-height:1.5;
}

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

a{ color:var(--color-black); text-decoration:none; }
a:hover{ text-decoration:underline; }

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

.skip-link{
  position:absolute; left:0; top:-40px;
  background:var(--color-black); color:var(--color-white);
  padding:.6rem 1rem; z-index:100; transition:top .15s ease;
}
.skip-link:focus{ top:0; }

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

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 1.25rem;
}

/* ===== Header ===== */
.site-header{
  border-bottom:var(--border-w) solid var(--color-line);
  background:var(--color-white);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem;
}
.brand{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.02em;
  font-size:1.6rem;
  text-transform:uppercase;
  color:var(--color-black);
}
.brand span{ color:var(--color-accent); }
.brand.small{ font-size:1.2rem; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:var(--border-w) solid var(--color-line);
  padding:.5rem .6rem;
  cursor:pointer;
}
.nav-toggle .bar{
  width:22px; height:2px; background:var(--color-black); display:block;
}

.site-nav ul{
  list-style:none; display:flex; gap:1.4rem;
  margin:0; padding:0;
}
.site-nav a{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.92rem;
  letter-spacing:.04em;
  padding:.35rem .1rem;
  border-bottom:3px solid transparent;
}
.site-nav a.active,
.site-nav a:hover{
  border-bottom-color:var(--color-accent);
  text-decoration:none;
}

/* ===== Layout helpers ===== */
.section{ padding:3.5rem 0; }
.bordered{ border:var(--border-w) solid var(--color-line); }
.bordered-top{ border-top:var(--border-w) solid var(--color-line); }

.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.85rem;
  color:var(--color-accent);
  margin:0 0 .6rem;
}

.section-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.9rem;
  letter-spacing:.01em;
  margin:0 0 1.2rem;
  border-bottom:var(--border-w) solid var(--color-line);
  padding-bottom:.5rem;
}
.section-title.small{ font-size:1.3rem; }

.section-intro{ max-width:70ch; margin-bottom:2rem; }

.outline-heading{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(2.2rem, 5.5vw, 4.2rem);
  line-height:1.03;
  letter-spacing:.005em;
  margin:0 0 1.2rem;
  color:var(--color-white);
  -webkit-text-stroke:1.5px var(--color-black);
  text-stroke:1.5px var(--color-black);
}
.outline-heading.small{
  font-size:clamp(1.6rem, 3.5vw, 2.4rem);
}

/* Fallback fill for browsers without text-stroke support */
@supports not (-webkit-text-stroke: 1px black){
  .outline-heading{ color:var(--color-black); }
}

.lead{ font-size:1.1rem; max-width:60ch; }

/* ===== Hero ===== */
.hero{ background:var(--color-white); }
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  align-items:center;
  padding:2.5rem 1.25rem;
}
.hero-media{ width:100%; }

.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }

/* ===== Buttons ===== */
.btn{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.95rem;
  padding:.85rem 1.6rem;
  display:inline-block;
  border:var(--border-w) solid var(--color-line);
}
.btn-solid-rect{
  background:var(--color-accent);
  color:var(--color-white);
  border-color:var(--color-accent);
}
.btn-solid-rect:hover{
  background:var(--color-black);
  border-color:var(--color-black);
  text-decoration:none;
}
.btn-outline-rect{
  background:transparent;
  color:var(--color-black);
}
.btn-outline-rect:hover{
  background:var(--color-black);
  color:var(--color-white);
  text-decoration:none;
}

/* ===== Framed images ===== */
.framed-image{
  border:var(--border-w) solid var(--color-line);
  background:var(--color-white);
  padding:.5rem;
}
.framed-image img{
  width:100%;
  height:auto;
  object-fit:contain;
  aspect-ratio:4/3;
  background:var(--color-paper);
}
.caption{
  font-size:.85rem;
  padding:.6rem .2rem 0;
  margin:0;
  color:#333;
}

/* ===== Catalog / cards grid ===== */
.grid-catalog{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--gap);
  margin-bottom:2rem;
}
.card{
  background:var(--color-white);
  padding:1.6rem;
  position:relative;
}
.card-index{
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--color-accent);
  display:inline-block;
  margin-bottom:.6rem;
}
.card h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.15rem;
  margin:.2rem 0 .7rem;
}

.gallery-mini .card,
.gallery-full .card{ padding:0; }
.gallery-mini .caption,
.gallery-full .caption{ padding:0 .8rem .8rem; }

/* ===== Details section ===== */
.details-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  align-items:start;
}
.check-list{
  list-style:none; padding:0; margin:1.2rem 0 0;
}
.check-list li{
  padding-left:1.4rem; position:relative; margin-bottom:.55rem;
}
.check-list li::before{
  content:"—";
  position:absolute; left:0; color:var(--color-accent); font-weight:700;
}
.check-list.compact li{ font-size:.95rem; }

/* ===== FAQ ===== */
.faq-list{ display:flex; flex-direction:column; gap:1rem; }
.faq-item{
  background:var(--color-white);
  padding:1rem 1.2rem;
}
.faq-item summary{
  font-family:var(--font-display);
  text-transform:uppercase;
  cursor:pointer;
  font-size:1.02rem;
  padding:.2rem 0;
}
.faq-item p{ margin:.8rem 0 .2rem; }

/* ===== Steps ===== */
.steps-list{
  list-style:none; margin:0 0 2rem; padding:0;
  display:grid; gap:1.2rem;
}
.steps-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.2rem;
  align-items:start;
  background:var(--color-white);
  padding:1.2rem;
}
.steps-list.detailed li{ padding:1.4rem 1.6rem; }
.step-number{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:800;
  color:var(--color-accent);
  border-right:var(--border-w) solid var(--color-line);
  padding-right:1.1rem;
}
.steps-list h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  margin:0 0 .4rem;
  font-size:1.05rem;
}
.steps-list p{ margin:0; }

/* ===== CTA final ===== */
.cta-final{ background:var(--color-white); text-align:center; }
.cta-final-inner{ max-width:60ch; margin:0 auto; }
.cta-final p{ margin-bottom:1.4rem; }

/* ===== Contact ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
}
.contact-card{ background:var(--color-white); }
.contact-list{ margin:0; }
.contact-list div{ margin-bottom:1rem; }
.contact-list dt{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--color-accent);
}
.contact-list dd{ margin:0; font-size:1.02rem; }

/* ===== Privacy ===== */
.privacy-content{ max-width:75ch; }
.privacy-content h2{ margin-top:2rem; }

/* ===== Footer ===== */
.site-footer{ background:var(--color-black); color:var(--color-paper); padding:3rem 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.2fr;
  gap:2rem;
  padding-bottom:2rem;
}
.footer-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:.4rem;
  margin-bottom:.8rem;
  color:var(--color-white);
}
.footer-col a{ color:var(--color-paper); }
.footer-col a:hover{ color:var(--color-accent); }
.footer-nav{ list-style:none; padding:0; margin:0; }
.footer-nav li{ margin-bottom:.4rem; }
address{ font-style:normal; line-height:1.7; }
.vat{ margin-top:.8rem; font-size:.85rem; color:#bbb; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.2);
  padding:1rem 1.25rem;
  font-size:.85rem;
  color:#aaa;
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .hero-grid, .details-grid, .contact-grid, .footer-grid{
    grid-template-columns:1fr;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--color-white);
    border-bottom:var(--border-w) solid var(--color-line);
  }
  .site-nav.open{ display:block; }
  .site-nav ul{
    flex-direction:column; gap:0;
  }
  .site-nav a{
    display:block; padding:1rem 1.25rem;
    border-bottom:1px solid #ddd;
  }
  .nav-toggle{ display:inline-flex; }
}

@media (max-width: 560px){
  .section{ padding:2.4rem 0; }
  .outline-heading{ font-size:clamp(1.9rem, 9vw, 2.8rem); }
  .steps-list li{ grid-template-columns:1fr; }
  .step-number{ border-right:none; border-bottom:var(--border-w) solid var(--color-line); padding-bottom:.4rem; }
}