/* ===== G.P.R. MARMI — design system v2 ===== */
:root{
  --black:#0a0a0a;
  --warm-white:#faf7f2;
  --white:#ffffff;
  --stone:#e9e2d2;
  --stone-deep:#dcd3ba;
  --grey:#5c5850;
  --grey-light:#9c9686;
  --orange:#ff7d01;
  --orange-deep:#cc6401;
  --line: rgba(10,10,10,0.12);
  --line-on-dark: rgba(255,255,255,0.18);
  --maxw: 1220px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--warm-white);
  color:var(--black);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
  line-height:1.0;
}

p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}
.wrap--narrow{max-width:860px;}

.section{padding:clamp(3.5rem, 7vw, 6.5rem) 0;}
.section--stone{background:var(--stone);}
.section--black{background:var(--black); color:var(--white);}
.section--tight{padding:clamp(2.4rem,4vw,3.5rem) 0;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---- tag bar ---- */
.tag-bar{
  display:inline-block;
  background:var(--black);
  color:var(--white);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  padding:0.5em 0.9em 0.45em 1em;
  margin-bottom:1.3rem;
}
.section--black .tag-bar{background:var(--orange); color:var(--black);}

/* ---- logo ---- */
.logo{
  display:inline-flex; align-items:center; gap:0.55rem;
  text-decoration:none; color:var(--black);
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800; font-size:1.28rem; letter-spacing:0.01em;
  text-transform:uppercase; white-space:nowrap;
}
.logo .logo-mark{
  width:9px; height:24px; background:var(--orange);
  transform:skewX(-14deg); display:inline-block; flex-shrink:0;
}
/* header uses the official raster logo; footer keeps the CSS wordmark
   (readable in white on the black footer — the logo's black shapes would
   disappear against that background). */
.logo img{height:40px; width:auto; display:block;}
.section--black .logo, footer .logo{color:var(--white);}

/* ---- header / nav ---- */
header{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
}
/* backdrop-filter lives on ::before (not on header itself) so header never
   becomes a containing block for its position:fixed descendants (the mobile
   nav-links overlay) — a filter/backdrop-filter on an ancestor otherwise
   breaks position:fixed sizing for descendants. */
header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(250,247,242,0.92);
  backdrop-filter:blur(8px);
}
.nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0.75rem clamp(1.25rem, 4vw, 3rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.nav-links{
  display:flex;
  gap:1.3rem;
  list-style:none;
  margin:0; padding:0;
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.nav-links a{
  text-decoration:none;
  color:var(--black);
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active{border-color:var(--orange);}
.nav-right{display:flex; align-items:center; gap:1.1rem;}

.lang-switch{display:flex; align-items:center; gap:0.35rem; font-family:'IBM Plex Mono', monospace; font-size:0.76rem;}
.lang-switch a{text-decoration:none; color:var(--black); opacity:0.35;}
.lang-switch a.active{opacity:1; font-weight:700; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px;}
.lang-switch span.sep{opacity:0.3;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55em;
  padding:0.85rem 1.6rem;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:700;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  text-decoration:none;
  border:2px solid var(--black);
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-solid{background:var(--black); color:var(--white); border-color:var(--black); box-shadow:inset 0 -4px 0 var(--orange);}
.btn-solid:hover{background:#1c1c1a;}
.btn-outline{background:transparent; color:var(--black);}
.btn-outline:hover{background:var(--black); color:var(--white);}
.section--black .btn-outline{border-color:var(--line-on-dark); color:var(--white);}
.section--black .btn-outline:hover{background:var(--white); color:var(--black); border-color:var(--white);}
.nav-cta{padding:0.6rem 1.15rem; font-size:0.74rem;}
.btn-link{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem;
  letter-spacing:0.04em; text-transform:uppercase;
  text-decoration:none; color:inherit;
  border-bottom:1px solid var(--orange); padding-bottom:2px;
}
.btn-link:hover{color:var(--orange-deep);}
.section--black .btn-link:hover{color:var(--orange);}

.menu-btn{
  display:none;
  position:relative;
  width:44px; height:44px;
  background:var(--black); border:none;
  box-shadow:inset 0 -3px 0 var(--orange);
  cursor:pointer;
  transition:background 0.2s ease, box-shadow 0.2s ease;
}
.menu-btn:hover{background:#1c1c1a;}
.menu-btn-bars{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:20px; height:14px;
}
.menu-btn-bars span{
  position:absolute; left:0; width:100%; height:2px;
  background:var(--white);
  transition:transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.menu-btn-bars span:nth-child(1){top:0;}
.menu-btn-bars span:nth-child(2){top:6px;}
.menu-btn-bars span:nth-child(3){top:12px;}
.menu-btn.is-open{box-shadow:inset 0 -3px 0 var(--orange-deep);}
.menu-btn.is-open .menu-btn-bars span:nth-child(1){top:6px; transform:rotate(45deg);}
.menu-btn.is-open .menu-btn-bars span:nth-child(2){opacity:0;}
.menu-btn.is-open .menu-btn-bars span:nth-child(3){top:6px; transform:rotate(-45deg);}

@media (max-width:1120px){
  .nav-links{
    position:fixed; inset:0; top:64px;
    background:var(--warm-white);
    flex-direction:column;
    padding:2.5rem 1.5rem;
    gap:1.6rem;
    font-size:1.25rem;
    transform:translateX(100%);
    transition:transform 0.35s ease;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-right .nav-cta, .nav-right .lang-switch{display:none;}
  .menu-btn{display:block;}
}

/* ---- media slot (image / video placeholder) ---- */
.media-slot{
  position:relative;
  background:repeating-linear-gradient(135deg, var(--stone) 0px, var(--stone) 22px, var(--stone-deep) 22px, var(--stone-deep) 44px);
  border:1px dashed rgba(10,10,10,0.28);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:var(--grey);
  text-align:center;
  width:100%;
}
.media-slot img, .media-slot video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.media-slot .slot-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  padding:1.2rem;
}
.slot-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:rgba(250,247,242,0.9);
  padding:0.6em 1em;
  border:1px solid var(--line);
  max-width:34ch;
  line-height:1.5;
}
.slot-play{
  width:52px;height:52px;border-radius:50%;
  background:var(--orange); color:var(--black);
  display:flex;align-items:center;justify-content:center;
  font-size:0.95rem;
}
.media-slot--16-9{aspect-ratio:16/9;}
.media-slot--4-5{aspect-ratio:4/5;}
.media-slot--4-3{aspect-ratio:4/3;}
.media-slot--1-1{aspect-ratio:1/1;}
.media-slot--full{position:absolute; inset:0; aspect-ratio:auto; border:none;}
/* Hero backgrounds already carry real headline text on top (see .hero-inner);
   the placeholder label would sit dead-center and collide with it, so it's
   hidden here — the HTML comment above each hero-media block still documents
   exactly which clip/photo goes there for whoever edits the code. */
.media-slot--full .slot-inner{display:none;}

/* ---- hero ---- */
.hero{
  position:relative;
  background:var(--black);
  color:var(--white);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero--home{min-height:92vh; padding:7rem 0 4rem;}
.hero--page{min-height:52vh; padding:6rem 0 3rem;}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media .media-slot{border:none; background:repeating-linear-gradient(135deg, #171512 0px, #171512 22px, #201d18 22px, #201d18 44px);}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.78) 100%);
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:6px; z-index:2;
  background:var(--orange);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.hero-inner{position:relative; z-index:3; max-width:780px;}
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  color:var(--white);
}
.hero h1 .accent{color:var(--orange);}
.hero p.lede{
  margin-top:1.5rem;
  max-width:52ch;
  font-size:1.1rem;
  color:#dcdcdc;
}
.hero-ctas{margin-top:2.3rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}
.page-hero .lede{color:#dcdcdc; max-width:62ch; margin-top:1.1rem; font-size:1.05rem;}

/* ---- numbers strip ---- */
.numbers-strip{background:var(--black); color:var(--white);}
.numbers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:1px;
  background:var(--line-on-dark);
  border-top:1px solid var(--line-on-dark);
  border-bottom:1px solid var(--line-on-dark);
}
.number-item{background:var(--black); padding:clamp(1.6rem,3vw,2.4rem) 1.2rem; text-align:center;}
.number-value{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); color:var(--orange);
  line-height:1;
}
.number-value.is-placeholder{
  color:var(--grey-light); font-size:0.85rem; font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.03em; text-transform:none; border:1px dashed var(--line-on-dark);
  padding:0.5em 0.6em; display:inline-block;
}
.number-label{margin-top:0.5rem; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.07em; text-transform:uppercase; color:#c4c4c4;}

/* ---- section head ---- */
.section-head{margin-bottom:2.6rem; max-width:720px;}
.section-head h2{font-size:clamp(1.9rem, 4vw, 3rem);}
.section-head .lede{margin-top:1rem; color:var(--grey); font-size:1.03rem; max-width:60ch;}
.section--black .section-head .lede{color:#d2d2d2;}
.section-head--split{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap;}

/* ---- editorial (media + text, big) ---- */
.editorial-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center;}
.editorial-grid.is-reversed .editorial-media{order:2;}
.editorial-text p{color:var(--grey); font-size:1.05rem; max-width:56ch;}
.editorial-text p + p{margin-top:1rem;}
.section--black .editorial-text p{color:#d6d6d6;}
@media (max-width:900px){
  .editorial-grid{grid-template-columns:1fr;}
  .editorial-grid.is-reversed .editorial-media{order:-1;}
}

/* ---- about body / fact row (azienda) ---- */
.about-body p{color:var(--grey); font-size:1.03rem; max-width:62ch;}
.about-body p + p{margin-top:1rem;}
.fact-row{display:flex; flex-wrap:wrap; gap:0.6rem 2.2rem; margin-top:1.8rem;}
.fact-row .fact{font-family:'IBM Plex Mono', monospace; font-size:0.82rem;}
.fact-row .fact b{display:block; font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:0.98rem; letter-spacing:0; color:var(--black);}
.fact-row .fact span{color:var(--grey-light); letter-spacing:0.06em; text-transform:uppercase; font-size:0.68rem;}
.section--black .fact-row .fact b{color:var(--white);}

/* ---- timeline (continuità passato -> futuro) ---- */
.timeline{display:flex; flex-wrap:wrap; gap:0; margin-top:2.5rem; border-top:2px solid var(--black);}
.timeline-item{flex:1; min-width:150px; padding:1.1rem 1.3rem 0; border-right:1px solid var(--line);}
.timeline-item:last-child{border-right:none;}
.timeline-item .t-label{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-deep);}
.timeline-item p{margin-top:0.5rem; font-size:0.92rem; color:var(--grey);}
@media (max-width:760px){.timeline{border-top:none;} .timeline-item{border-right:none; border-top:2px solid var(--black);}}

/* ---- media card grid (prodotti / varietà) ---- */
.media-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem;}
.media-card{
  border:1px solid var(--line); background:var(--white);
  display:flex; flex-direction:column; text-decoration:none; color:var(--black);
  transition:box-shadow .25s ease, transform .25s ease;
}
.media-card:hover{box-shadow:0 16px 34px rgba(10,10,10,0.10); transform:translateY(-3px);}
.media-card-body{padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:0.7rem; flex:1;}
.media-card-tag{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.05em; color:var(--orange-deep); text-transform:uppercase;}
.media-card-body h3{font-size:1.45rem; letter-spacing:0;}
.media-card-body p{color:var(--grey); font-family:'IBM Plex Sans'; text-transform:none; font-weight:400; font-size:0.95rem; letter-spacing:normal;}
.media-card-link{margin-top:auto; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; display:inline-flex; align-items:center; gap:0.4em;}
.media-card:hover .media-card-link{color:var(--orange-deep);}
@media (max-width:900px){.media-card-grid{grid-template-columns:1fr;}}

/* ---- gallery grid variants (used for photo placeholder grids) ---- */
.gallery-3{grid-template-columns:repeat(3,1fr);}
.gallery-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.gallery-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.gallery-3, .gallery-4{grid-template-columns:1fr;}}

/* ---- 2-card variant (used when the product grid has only 2 items) ---- */
.cols-2{grid-template-columns:repeat(2,1fr); max-width:800px; margin-left:auto; margin-right:auto;}
@media (max-width:900px){.cols-2{grid-template-columns:1fr; max-width:none;}}

/* ---- variety grid (perlato royal) ---- */
.variety-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:1.4rem; margin-top:1rem;}
.variety-card{border:1px solid var(--line); background:var(--white); overflow:hidden;}
.variety-card .variety-name{display:block; padding:0.95rem 1.1rem 0; font-family:'IBM Plex Sans'; font-weight:700; font-size:0.98rem;}
.variety-card .variety-code{display:block; font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:0.68rem; letter-spacing:0.05em; color:var(--grey-light); text-transform:uppercase; margin-top:0.25rem;}

/* ---- product detail pages (existing) ---- */
.detail-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2.5rem,5vw,5rem); align-items:start;}
.detail-grid p{color:var(--grey); font-size:1.02rem;}
.detail-grid p + p{margin-top:1rem;}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr;}}

/* ---- process flow (sostenibilità) ---- */

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.5rem;}
.step{border-top:2px solid var(--orange); padding-top:1.2rem;}
.step .step-num{font-family:'IBM Plex Mono', monospace; color:var(--orange); font-size:0.85rem;}
.step h3{font-family:'IBM Plex Sans'; text-transform:none; letter-spacing:0; font-weight:700; font-size:1.1rem; margin-top:0.5rem;}
.section--black .step h3{color:var(--white);}
.step p{margin-top:0.5rem; font-size:0.95rem; color:var(--grey);}
.section--black .step p{color:#d2d2d2;}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}

/* ---- process grid (recovery pipeline — icon + number + text per stage) ---- */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:1rem;
}
.process-card{background:var(--white); padding:2.1rem 1.8rem; display:flex; flex-direction:column; gap:0.8rem;}
.process-icon{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,125,1,0.09); color:var(--orange-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0.2rem;
}
.process-icon svg{width:26px; height:26px;}
.process-num{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--orange-deep); letter-spacing:0.05em;}
.process-card h3{font-family:'IBM Plex Sans'; text-transform:none; letter-spacing:0; font-weight:700; font-size:1.12rem;}
.process-card p{color:var(--grey); font-size:0.93rem;}
@media (max-width:1080px){.process-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.process-grid{grid-template-columns:1fr;}}

/* compact variant used as a teaser row (e.g. on the homepage) */
.process-mini-row{display:flex; flex-wrap:wrap; gap:2rem 1.5rem; margin-top:2.2rem;}
.process-mini{display:flex; flex-direction:column; align-items:center; gap:0.4rem; text-align:center; width:92px;}
.process-mini .mini-num{font-family:'IBM Plex Mono', monospace; font-size:0.65rem; color:var(--orange-deep); letter-spacing:0.04em;}
.process-mini .process-icon{width:46px; height:46px; margin-bottom:0.1rem;}
.process-mini .process-icon svg{width:22px; height:22px;}
.process-mini .mini-label{font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--grey);}

/* ---- cross-link module ---- */
.crosslinks{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1rem;}
.crosslink{background:var(--white); padding:1.6rem 1.7rem; text-decoration:none; color:var(--black); display:flex; flex-direction:column; gap:0.3rem; transition:background 0.2s ease;}
.crosslink:hover{background:var(--stone);}
.crosslink span.label{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--orange-deep); letter-spacing:0.06em;}
.crosslink strong{font-size:1.15rem;}
@media (max-width:600px){.crosslinks{grid-template-columns:1fr;}}

/* ---- logistics list ---- */
.logistics-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem; margin-top:2rem;}
.logistics-item{border-left:2px solid var(--orange); padding-left:1.2rem;}
.logistics-item h3{font-family:'IBM Plex Sans'; text-transform:none; font-weight:700; font-size:1.05rem; letter-spacing:0;}
.logistics-item p{margin-top:0.4rem; color:var(--grey); font-size:0.95rem;}
@media (max-width:760px){.logistics-grid{grid-template-columns:1fr;}}

/* ---- cta banner ---- */
.cta-banner{background:var(--black); color:var(--white); padding:clamp(2.8rem,5vw,3.8rem) 0;}
.cta-banner .wrap{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;}
.cta-banner h2{font-size:clamp(1.7rem,3vw,2.3rem); color:var(--white); max-width:26ch;}
.cta-banner p.lede{color:#d6d6d6; margin-top:0.6rem; max-width:44ch;}

/* ---- contatti ---- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2.5rem,5vw,5rem);}
.contact-card{background:var(--white); border:1px solid var(--line); padding:2rem;}
.contact-card address{font-style:normal; margin-bottom:1.5rem; line-height:1.7; font-size:1rem;}
.contact-card a.contact-link{display:block; text-decoration:none; border-bottom:1px solid var(--line); padding:0.75rem 0; font-size:0.98rem;}
.contact-card a.contact-link:hover{color:var(--orange-deep);}

form.contact-form{display:flex; flex-direction:column; gap:1.1rem;}
form.contact-form label{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:0.4rem;}
form.contact-form input:not([type="checkbox"]), form.contact-form textarea, form.contact-form select{
  width:100%; border:1px solid var(--line); background:var(--white);
  padding:0.85rem 0.9rem; font-family:'IBM Plex Sans'; font-size:0.95rem; color:var(--black); appearance:none;
}
form.contact-form input:focus, form.contact-form textarea:focus, form.contact-form select:focus{outline:2px solid var(--orange); outline-offset:1px;}
form.contact-form textarea{resize:vertical; min-height:120px;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
/* .checkbox-row is itself a <label> (so clicking the sentence toggles the
   box), which means it would otherwise inherit the small/uppercase/mono
   styling meant for field labels above — this resets it back to normal
   readable body text; the selector needs to be at least as specific as
   "form.contact-form label" for the reset to actually win. */
.contact-form label.checkbox-row{
  display:flex; align-items:flex-start; gap:0.6rem;
  font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem; letter-spacing:normal;
  text-transform:none; color:var(--grey);
}
.checkbox-row input[type="checkbox"]{width:auto; flex-shrink:0; margin-top:0.25rem;}
.form-hint{font-size:0.8rem; color:var(--grey-light); margin-top:-0.4rem;}
@media (max-width:600px){.form-row-2{grid-template-columns:1fr;}}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

/* ---- footer ---- */
footer{background:var(--black); color:#bdbdbd; padding-top:3rem;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; padding-bottom:2.4rem;}
.footer-col h4{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:#8f8f8f; margin-bottom:0.9rem;}
.footer-col a{display:block; color:#d8d8d8; text-decoration:none; font-size:0.9rem; margin-bottom:0.55rem;}
.footer-col a:hover{color:var(--orange);}
.footer-tagline{font-family:'Big Shoulders Display', sans-serif; font-size:1.05rem; text-transform:uppercase; color:#d8d8d8; margin-top:0.7rem; letter-spacing:0.01em;}
.footer-bottom{border-top:1px solid var(--line-on-dark); padding:1.3rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.78rem; color:#8a8a8a;}
.social-row{display:flex; gap:1.1rem;}
.social-row a{color:#d8d8d8; text-decoration:none; font-family:'IBM Plex Mono', monospace; font-size:0.76rem;}
.social-row a:hover{color:var(--orange);}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr; gap:1.8rem;}}