/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --bg:            #f6f3ec;
  --bg-alt:        #efeae0;
  --surface:       #ffffff;
  --ink:           #0d0f12;
  --ink-2:         #2a2d33;
  --muted:         #6a6f78;
  --muted-2:       #82868d;
  --line:          #e3ddd0;
  --line-strong:   #cfc8b8;
  --accent:        #ed1c24;          /* signal red (matches logo) */
  --accent-deep:   #c41820;
  --accent-soft:   #fde7e8;
  --shadow-sm:     0 1px 2px rgba(13,15,18,.04), 0 1px 1px rgba(13,15,18,.03);
  --shadow-md:     0 4px 14px rgba(13,15,18,.06), 0 1px 3px rgba(13,15,18,.04);
  --shadow-lg:     0 24px 48px -16px rgba(13,15,18,.18), 0 6px 18px rgba(13,15,18,.06);

  --font-display:  Georgia, "Times New Roman", "Book Antiqua", Palatino, serif;
  --font-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --container: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
.link-inherit{color:inherit}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:0;
  line-height:1.08;
  margin:0;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem, 5.6vw, 4.6rem); font-weight:400}
h2{font-size:clamp(1.8rem, 3.4vw, 2.8rem)}
h3{font-size:1.4rem}
p{margin:0}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
@media (max-width:640px){ .container{padding:0 20px} }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,243,236,.97);
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:rgba(246,243,236,.99);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  display:inline-flex; align-items:center;
  text-decoration:none;
  flex:0 0 auto;
  min-width:96px;
}
.brand-logo{
  /* Display logo at native size to avoid scaling artifacts on the
     low-resolution source. Replace logo.png with a higher-resolution
     or SVG version for sharper rendering on retina displays. */
  display:block;
  height:36px;            /* fixed height in nav (cap to avoid distortion) */
  width:auto;
  max-width:100%;
  object-fit:contain;
  /* Smooth out the small bitmap a touch */
  image-rendering:auto;
}
@media (max-width:520px){
  .brand{min-width:112px}
  .brand-logo{
    height:42px;
    max-width:112px;
  }
}
/* Logo size in footer — slightly larger, but still capped */
.footer .brand-logo{
  height:42px;
}
/* Legacy brand-mark kept for any future use */
.brand-mark{
  width:30px; height:30px;
  background:var(--ink);
  display:grid; place-items:center;
  border-radius:6px;
  position:relative;
}
.brand-mark::before{
  content:""; position:absolute;
  inset:6px;
  background:
    linear-gradient(135deg, var(--accent) 0 50%, transparent 50% 100%),
    linear-gradient(135deg, transparent 0 50%, #fff 50% 100%);
  background-size:100% 100%;
  border-radius:2px;
}
.nav-links{
  display:flex; align-items:center; gap:36px;
}
.nav-links a{
  font-size:.92rem; font-weight:500;
  color:var(--ink-2);
  position:relative;
  padding:6px 0;
  transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active::after{
  content:""; position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink);
  color:#fff;
  padding:11px 18px;
  border-radius:var(--radius);
  font-size:.88rem; font-weight:600;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.nav-cta:hover{background:var(--accent); transform:translateY(-1px)}
.nav-cta svg{width:14px;height:14px}

.sticky-inquiry-cta{display:none}
@media (max-width:760px){
  body{padding-bottom:86px}
  .sticky-inquiry-cta{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:58px;
    padding:11px 16px;
    background:rgba(13,15,18,.96);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);
    box-shadow:0 10px 26px rgba(13,15,18,.20);
  }
  .sticky-inquiry-cta span{
    display:block;
    color:rgba(255,255,255,.62);
    font-size:.72rem;
    line-height:1.15;
  }
  .sticky-inquiry-cta strong{
    display:block;
    font-size:.95rem;
    line-height:1.2;
    color:#fff;
  }
  .sticky-inquiry-cta svg{
    width:18px;
    height:18px;
    flex-shrink:0;
  }
  @supports (bottom:max(14px, env(safe-area-inset-bottom))){
    .sticky-inquiry-cta{bottom:max(14px, env(safe-area-inset-bottom))}
  }
  body[data-route="inquiry"],
  body[data-route="product"],
  body[data-route="products"]{
    padding-bottom:0;
  }
  body[data-route="inquiry"] .sticky-inquiry-cta,
  body[data-route="product"] .sticky-inquiry-cta,
  body[data-route="products"] .sticky-inquiry-cta{
    display:none;
  }
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */
.lang-switcher{
  position:relative;
}
.lang-toggle{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.85rem;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.lang-toggle:hover{
  border-color:var(--ink);
  color:var(--ink);
}
.lang-toggle .lang-flag{
  font-size:1rem;
  line-height:1;
}
.lang-toggle .lang-code{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
}
.lang-toggle .lang-chevron{
  width:12px; height:12px;
  transition:transform .2s var(--ease);
}
.lang-switcher.open .lang-toggle{
  border-color:var(--ink);
  color:var(--ink);
}
.lang-switcher.open .lang-chevron{
  transform:rotate(180deg);
}
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:180px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  z-index:60;
}
.lang-switcher.open .lang-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.lang-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:9px 12px;
  background:transparent;
  border-radius:8px;
  font-size:.88rem;
  color:var(--ink-2);
  cursor:pointer;
  text-align:left;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.lang-menu button:hover{
  background:var(--bg-alt);
  color:var(--ink);
}
.lang-menu button.active{
  background:var(--bg-alt);
  color:var(--ink);
  font-weight:600;
}
.lang-menu button .lang-flag{
  font-size:1.05rem;
  line-height:1;
}
.lang-menu button .lang-check{
  margin-left:auto;
  width:14px;
  height:14px;
  color:var(--accent);
  opacity:0;
}
.lang-menu button.active .lang-check{
  opacity:1;
}

.menu-toggle{display:none}
@media (max-width:880px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:14px 28px 24px;
    transform:translateY(calc(-100% - 86px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
      transform .3s var(--ease),
      opacity .2s var(--ease),
      visibility 0s linear .3s;
    align-items:flex-start;
    box-shadow:0 18px 34px rgba(13,15,18,.08);
  }
  .nav-links.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .nav-links a{padding:14px 0; width:100%; border-bottom:1px solid var(--line)}
  .nav-links a:last-of-type{border-bottom:0}
  .nav-cta{display:none}
  .lang-toggle .lang-code{display:none}
  .lang-toggle{padding:8px 10px}
  .menu-toggle{
    display:grid; place-items:center;
    width:42px; height:42px;
    border-radius:8px;
  }
  .menu-toggle svg{width:22px;height:22px;stroke:var(--ink)}
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  border-radius:var(--radius);
  font-size:.92rem; font-weight:600;
  letter-spacing:.005em;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
  cursor:pointer;
  border:1.5px solid transparent;
}
.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.nav-links a:focus-visible,
.lang-toggle:focus-visible,
.menu-toggle:focus-visible,
.category-filter-link:focus-visible,
.product-card:focus-visible,
.card-foot .view:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.btn svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:#fff; border-color:var(--ink)}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); box-shadow:0 6px 18px rgba(237,28,36,.22)}
.btn-accent{background:var(--accent);color:#fff; border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
.btn-outline{
  background:transparent; color:var(--ink);
  border-color:var(--ink);
}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-ghost{
  background:transparent; color:var(--ink);
  padding:13px 4px;
  border-color:transparent;
}
.btn-ghost:hover{color:var(--accent)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:80px 0 100px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(13,15,18,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(13,15,18,.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.2));
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
  position:relative;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .hero{padding:50px 0 70px}
}
@media (max-width:640px){
  .hero{
    padding:34px 0 48px;
  }
  .hero-grid{
    gap:34px;
  }
}

.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  max-width:100%;
  padding:7px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.8rem; font-weight:500;
  line-height:1.3;
  color:var(--ink-2);
  margin-bottom:28px;
}
.hero-tag .dot{
  flex-shrink:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(237,28,36,.15);
}
.hero-title{
  font-size:4.6rem;
  font-weight:400;
  letter-spacing:0;
  line-height:1.02;
}
@media (max-width:1100px){.hero-title{font-size:3.8rem}}
@media (max-width:640px){.hero-title{font-size:clamp(2.05rem, 10vw, 2.45rem); line-height:1.05}}
@media (max-width:380px){.hero-title{font-size:2.3rem}}
.hero-title .accent{
  font-style:italic;
  color:var(--accent);
  font-weight:400;
}
.hero-sub{
  margin:28px 0 36px;
  max-width:520px;
  font-size:1.08rem;
  color:var(--ink-2);
  line-height:1.6;
}
@media (max-width:640px){
  .hero-sub{font-size:1rem; margin:24px 0 30px}
}
.hero-proof-list{
  list-style:none;
  padding:0;
  margin:-12px 0 34px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:580px;
}
.hero-proof-list li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.72);
  color:var(--ink-2);
  font-size:.84rem;
  font-weight:600;
  line-height:1.2;
}
.hero-proof-list li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
@media (max-width:520px){
  .hero-actions{align-items:stretch}
  .hero-actions .btn{width:100%; justify-content:center}
  .hero-proof-list{margin-top:-12px; margin-bottom:28px}
  .hero-proof-list li{
    width:100%;
    min-height:38px;
  }
}

/* hero visual */
.hero-visual{
  position:relative;
  aspect-ratio: 5/6;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:#1a1d23; /* fallback while photo loads */
}
.hero-photo{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (max-width:640px){
  .hero-visual{aspect-ratio:4/3; border-radius:var(--radius)}
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{
  padding:22px 0;
  background:var(--surface);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
/* 5 items don't divide cleanly into 3 — go straight to 2 columns on tablet
   so the last row is balanced, then 1 column on small phones. */
@media (max-width:1080px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}
.trust-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:104px;
  padding:18px;
  background:var(--bg);
  color:var(--muted);
}
.trust-item .icon{
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  background:var(--accent-soft);
  border:1px solid rgba(237,28,36,.22);
  display:grid; place-items:center;
  flex-shrink:0;
}
.trust-item .icon svg{width:20px;height:20px;stroke:var(--accent-deep);fill:none;stroke-width:1.7}
.trust-item strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.25;
}
.trust-item span span{
  display:block;
  font-size:.84rem;
  line-height:1.45;
}

/* =========================================================
   PROCESS BAND (3-step inquiry workflow on home page)
   Industrial styling: numbered cards, dark accents.
   ========================================================= */
.process-band{
  padding:78px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.process-head{
  max-width:600px;
  margin-bottom:42px;
}
.process-head h2{margin-top:14px}
.process-steps{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--line);
}
.process-step{
  background:var(--surface);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.process-step-num{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:6px;
}
.process-step h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink);
  line-height:1.25;
  margin:0;
}
.process-step p{
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink-2);
}
@media (max-width:880px){
  .process-band{padding:60px 0}
  .process-steps{grid-template-columns:1fr}
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section{padding:90px 0}
.section-compact-top{padding-top:50px}
.section-center{text-align:center}
.heading-offset{margin-top:14px}
.heading-offset-lg{margin-top:14px; margin-bottom:24px}
.stack-offset{margin-top:80px}
.contact-card-spaced{margin-top:8px}
.contact-card-note{margin-top:4px; font-size:.85rem; color:var(--muted)}
.contact-card-block{margin-top:14px}
.not-found-page{padding:120px 28px; text-align:center}
.not-found-page p{margin:20px 0 30px; color:var(--muted)}
.honeypot-field{position:absolute; left:-9999px; width:0; height:0; opacity:0}
@media (max-width:768px){.section{padding:48px 0}}

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:50px;
}
@media (max-width:768px){
  .section-head{flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:36px}
}
.section-head h2{max-width:600px}
.section-head .desc{
  max-width:380px;
  color:var(--muted);
  font-size:1rem;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-section{
  padding:78px 0;
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.faq-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:58px;
  align-items:start;
}
.faq-intro{
  margin-top:18px;
  color:var(--muted);
  line-height:1.65;
  max-width:390px;
}
.faq-list{
  display:grid;
  gap:12px;
}
.faq-item{
  padding:22px 24px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
}
.faq-item h3{
  margin-bottom:9px;
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:700;
  letter-spacing:0;
  line-height:1.35;
}
.faq-item p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
}
@media (max-width:880px){
  .faq-section{padding:58px 0}
  .faq-grid{grid-template-columns:1fr; gap:34px}
}

/* =========================================================
   PRODUCT GALLERY
   ========================================================= */
.category-filter{
  margin-bottom:28px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.category-filter-label{
  width:100%;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.category-filter-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink-2);
  font-size:.86rem;
  font-weight:700;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.category-filter-link:hover{
  transform:translateY(-1px);
  border-color:var(--ink);
  color:var(--ink);
}
.category-filter-link.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.category-filter-count{
  opacity:.62;
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:600;
}
.category-filter-link.active .category-filter-count{opacity:.8}
.category-filter.compact{
  margin:0 0 28px;
}
.category-filter.compact .category-filter-label{
  margin-bottom:2px;
}
@media (max-width:640px){
  .category-filter{
    gap:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    margin-left:-20px;
    margin-right:-20px;
    padding:0 20px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .category-filter::after{
    content:"";
    flex:0 0 20px;
  }
  .category-filter-label{display:none}
  .category-filter-link{white-space:nowrap; scroll-snap-align:start}
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
@media (max-width:1024px){.gallery{grid-template-columns:repeat(2, 1fr); gap:22px}}
@media (max-width:640px) {.gallery{grid-template-columns:1fr; gap:20px}}

.product-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  display:flex; flex-direction:column;
  contain:layout paint style;
}
@supports (content-visibility:auto){
  .product-card{
    content-visibility:auto;
    contain-intrinsic-size:560px;
  }
}
@media (hover:hover) and (pointer:fine){
  .product-card:hover{
    transform:translateY(-2px);
    border-color:var(--ink);
    box-shadow:var(--shadow-md);
  }
}
.product-card.is-sold{
  opacity:.56;
  filter:saturate(.35);
}
.product-card.is-sold:hover{
  border-color:var(--line-strong);
}
.card-media{
  position:relative;
  aspect-ratio: 4/3;
  background:linear-gradient(170deg, #f1ede4 0%, #e6e0d2 100%);
  overflow:hidden;
}
.card-media::before{
  /* subtle hatched pattern */
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 12px, rgba(13,15,18,.025) 12px 13px);
}
.card-media svg,
.card-media picture{
  position:absolute;
  inset:0;
  width:100%; height:100%;
}
.card-media picture{display:block}
.card-media picture img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .22s var(--ease);
}
.card-media svg{
  transition:transform .22s var(--ease);
}
.card-media img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .22s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .card-media svg,
  .product-card:hover .card-media img{transform:scale(1.025)}
}
/* Status badge sits in top-right corner of card media */
.card-status{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
}
.card-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(to top, rgba(13,15,18,.92), rgba(13,15,18,0));
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .card-overlay{opacity:1; transform:translateY(0)}
}
.card-overlay span{font-size:.85rem; font-weight:600; letter-spacing:0}
.card-overlay .arrow-circle{
  width:36px; height:36px;
  background:var(--accent);
  border-radius:50%;
  display:grid; place-items:center;
}
.card-overlay .arrow-circle svg{
  position:static;
  width:14px; height:14px;
  stroke:#fff; fill:none; stroke-width:2;
}
.card-body{
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:6px;
  flex:1;
}
.card-category{
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.card-title{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0;
  line-height:1.2;
}
.card-variant{
  margin-top:2px;
  font-size:.82rem;
  font-weight:700;
  color:var(--muted);
}
.card-desc{
  margin-top:8px;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.45;
}
.card-price{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}
.card-price.on-request{
  font-family:var(--font-sans);
  font-size:.88rem;
  color:var(--muted);
}
/* Meta info rows: location, pickup/delivery, quantity */
.card-meta{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.card-meta-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--ink-2);
  line-height:1.3;
}
.card-meta-row svg{
  width:14px; height:14px;
  flex-shrink:0;
  stroke:var(--muted);
  opacity:.85;
}
.card-foot{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
}
.card-foot .view{
  font-size:.85rem; font-weight:600;
  color:var(--ink-2);
  display:flex; align-items:center; gap:8px;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .product-card:hover .card-foot .view{color:var(--accent); gap:12px}
}
.card-foot .view svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

@media (max-width:640px){
  @supports (content-visibility:auto){
    .product-card{
      contain-intrinsic-size:470px;
    }
  }
  .card-media{
    aspect-ratio:16/10;
  }
  .card-body{
    padding:18px 18px 20px;
    gap:5px;
  }
  .card-title{
    font-size:1.18rem;
    line-height:1.24;
  }
  .card-desc{
    margin-top:5px;
  }
  .card-price{
    margin-top:7px;
  }
  .card-meta{
    margin-top:10px;
    gap:5px;
  }
  .card-foot{
    margin-top:14px;
    padding-top:14px;
  }
}

/* corner index ribbon */
.card-index{
  position:absolute;
  top:14px; left:14px;
  font-family:var(--font-mono);
  font-size:.7rem;
  background:rgba(255,255,255,.92);
  padding:5px 9px;
  border-radius:var(--radius-sm);
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:.05em;
  z-index:1;
}

/* =========================================================
   BADGE SYSTEM (universal status indicators)
   used by: product cards, detail page, location strips
   Industrial look — no pill shapes, no soft edges.
   ========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  background:var(--bg-alt);
  color:var(--ink-2);
  border:1px solid var(--line);
  white-space:nowrap;
}
.badge svg{
  width:11px; height:11px;
  stroke:currentColor; fill:none; stroke-width:2;
  flex-shrink:0;
}
.badge-condition{ background:#eef5ee; color:#356a3a; border-color:#cfe1d0 }
.badge-available{ background:#eef5ee; color:#356a3a; border-color:#cfe1d0 }
.badge-stock{     background:var(--accent-soft); color:var(--accent-deep); border-color:#f3c8ca }
.badge-pickup{    background:#fff; color:var(--ink-2); border-color:var(--line-strong) }
.badge-location{  background:var(--ink); color:#fff; border-color:var(--ink) }
.badge-location svg{ stroke:#fff }
.badge-warning{   background:#fdf3e2; color:#8a5a08; border-color:#f0d8a8 }
.badge-sold{      background:#ecebea; color:#626262; border-color:#cfcac2 }

/* empty gallery state */
.empty-gallery{
  grid-column:1 / -1;
  text-align:center;
  padding:80px 32px;
  background:var(--surface);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-lg);
}
.empty-gallery-icon{
  width:64px;
  height:64px;
  margin:0 auto 24px;
  background:var(--bg-alt);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.empty-gallery-icon svg{
  width:28px;
  height:28px;
}
.empty-gallery h3{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:500;
  margin-bottom:14px;
  letter-spacing:0;
}
.empty-gallery p{
  color:var(--muted);
  max-width:480px;
  margin:0 auto 28px;
  line-height:1.6;
}
.empty-gallery-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  max-width:620px;
  margin:0 auto 28px;
}
.empty-gallery-tags span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:var(--radius);
  background:var(--bg-alt);
  border:1px solid var(--line);
  color:var(--ink-2);
  font-size:.82rem;
  font-weight:600;
}

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */
.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:36px;
  font-family:var(--font-mono);
}
.breadcrumb a{color:var(--muted); transition:color .2s var(--ease)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink-2)}

.detail{padding:60px 0 90px}
.detail-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:flex-start;
}
@media (max-width:920px){
  .detail-grid{grid-template-columns:1fr; gap:40px}
  .detail{padding:30px 0 70px}
}

.detail-media{
  position:sticky; top:100px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
@media (max-width:920px){.detail-media{position:static}}

/* Main image container — keyboard focusable for arrow nav */
.detail-media-main{
  aspect-ratio:1/1;
  background:linear-gradient(170deg, #f1ede4 0%, #e6e0d2 100%);
  position:relative;
  outline:none;
}
@media (max-width:920px){
  .detail-media-main{
    aspect-ratio:16/10;
  }
}
@media (max-width:520px){
  .detail{
    padding:22px 0 54px;
  }
  .detail-grid{
    gap:28px;
  }
}
.detail-media-main::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 14px, rgba(13,15,18,.025) 14px 15px);
  pointer-events:none;
  z-index:0;
}
.detail-media-main:focus-visible{
  box-shadow:inset 0 0 0 3px var(--accent);
}
/* Both <img> and <div.detail-media-svg> share these positioning rules.
   z-index:1 sits above the diagonal hatched ::before pattern. */
.detail-media-main > [data-gallery-main]{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
}
.detail-media-main > img[data-gallery-main],
.detail-media-main > picture[data-gallery-main] img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.detail-media-main > .detail-media-svg svg{
  width:100%; height:100%;
}

/* Image counter (e.g. "Image 2 of 6") */
.gallery-counter{
  position:absolute;
  top:14px; left:14px;
  z-index:3;
  background:rgba(13,15,18,.82);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  padding:5px 9px;
  border-radius:var(--radius-sm);
  pointer-events:none;
}

/* Prev / Next navigation buttons */
.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px; height:42px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  color:var(--ink);
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.gallery-nav:hover{
  background:#fff;
  border-color:var(--ink);
}
.gallery-nav:active{
  transform:translateY(-50%) scale(.96);
}
.gallery-nav:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.gallery-nav svg{width:18px; height:18px}
.gallery-prev{left:14px}
.gallery-next{right:14px}
@media (max-width:520px){
  .gallery-nav{width:36px; height:36px}
  .gallery-prev{left:10px}
  .gallery-next{right:10px}
}

/* Thumbnails — now buttons (interactive elements) */
.detail-thumbs{
  display:flex; gap:10px; padding:14px;
  border-top:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:thin;
}
.detail-thumbs .thumb{
  flex:0 0 auto;
  width:80px; height:80px;
  background:linear-gradient(170deg, #f1ede4, #e6e0d2);
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .2s var(--ease), transform .15s var(--ease);
  position:relative;
  overflow:hidden;
  padding:0;
}
.detail-thumbs .thumb:hover{border-color:var(--ink-2)}
.detail-thumbs .thumb.active{
  border-color:var(--ink);
  border-width:2px;
}
.detail-thumbs .thumb:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.detail-thumbs .thumb svg{width:70%; height:70%}
.detail-thumbs .thumb picture,
.detail-thumbs .thumb img{
  width:100%; height:100%;
  display:block;
}
.detail-thumbs .thumb img{
  object-fit:cover;
}
@media (max-width:520px){
  .detail-thumbs{padding:10px; gap:8px}
  .detail-thumbs .thumb{width:64px; height:64px}
}

/* Detail badges row — sits above the H1 */
.detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

/* Quick info table */
.detail-quick{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  margin:24px 0 8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--line);
}
.detail-quick > div{
  padding:14px 16px;
  background:var(--surface);
}
.detail-quick dt{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.detail-quick dd{
  margin:0;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}
@media (min-width:521px){
  .detail-quick-remark{grid-row:span 2}
}
@media (max-width:520px){
  .detail-quick{grid-template-columns:1fr}
}

.detail-content h1{
  margin-bottom:18px;
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:400;
  letter-spacing:0;
}
.detail-tag{
  display:inline-flex; align-items:center;
  background:var(--accent-soft);
  color:var(--accent-deep);
  padding:5px 10px;
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:18px;
}
a.detail-tag{
  text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
a.detail-tag:hover{
  background:var(--accent);
  color:#fff;
}
.detail-overview{
  font-size:1.05rem;
  color:var(--muted);
  line-height:1.65;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.detail-overview-plain{
  border-bottom:none;
  padding-bottom:0;
}

.detail-section{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.detail-section-flush{
  border-top:none;
  padding-top:0;
}
.detail-section:last-of-type{border-bottom:none}
.detail-section h3{
  font-size:.78rem;
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.detail-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:14px;
}
.detail-list li{
  display:flex; gap:14px;
  font-size:.98rem;
  color:var(--ink-2);
  line-height:1.5;
}
.detail-list li::before{
  content:"";
  flex-shrink:0;
  width:6px; height:6px;
  margin-top:9px;
  background:var(--accent);
  border-radius:50%;
}
.spec-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:14px 28px;
}
.spec-grid .spec{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.spec-grid .spec .label{
  font-size:.75rem;
  font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted);
}
.spec-grid .spec .value{
  font-size:.98rem;
  font-weight:500;
  color:var(--ink);
}
.detail-aliases{
  color:var(--ink-2);
  line-height:1.6;
}
.detail-delivery-copy{
  color:var(--ink-2);
  line-height:1.6;
}
@media (max-width:520px){.spec-grid{grid-template-columns:1fr}}

.detail-cta{
  margin-top:28px;
  padding:24px;
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius);
  display:flex; justify-content:space-between; align-items:center;
  gap:20px;
}
.detail-cta strong{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:500;
  display:block;
  margin-bottom:4px;
}
.detail-cta p{font-size:.88rem; color:rgba(255,255,255,.65)}
.detail-cta .btn-accent{flex-shrink:0}
.detail-cta-mobile{display:none}
.detail-cta.is-sold{
  background:var(--bg-alt);
  color:var(--ink);
  border:1px solid var(--line-strong);
}
.detail-cta.is-sold p{color:var(--ink-2)}
@media (max-width:760px){
  .detail-cta-mobile{
    display:flex;
    margin:18px 0 4px;
  }
  .detail-cta-bottom{
    display:none;
  }
}
@media (max-width:520px){
  .detail-cta{flex-direction:column; align-items:flex-start}
  .detail-cta .btn{width:100%; justify-content:center}
}

/* =========================================================
   INQUIRY PAGE
   ========================================================= */
.inquiry{padding:60px 0 100px}
.inquiry-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:60px;
  align-items:flex-start;
}
@media (max-width:880px){
  .inquiry-grid{
    display:flex;
    flex-direction:column;
    gap:34px;
  }
  .form-card{order:1}
  .inquiry-side{order:2}
}

.inquiry-side h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:20px;
}
.inquiry-title{margin-top:14px}
.inquiry-side p{color:var(--muted); margin-bottom:32px; line-height:1.6}
.inquiry-side .info-block{
  padding:20px 0;
  border-top:1px solid var(--line);
}
.inquiry-side .info-block:last-child{border-bottom:1px solid var(--line)}
.inquiry-side .info-block .label{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.inquiry-side .info-block .value{
  font-size:1rem;
  color:var(--ink);
  font-weight:500;
}
.inquiry-side .info-block .value .meta{
  display:inline-block;
  margin-top:4px;
  font-size:.82rem;
  font-weight:400;
  color:var(--muted);
}

.inquiry-notice{
  margin:28px 0 8px;
  padding:18px 20px;
  background:var(--accent-soft);
  border:1px solid rgba(237, 28, 36, .15);
  border-radius:var(--radius);
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.inquiry-notice-icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  color:var(--accent-deep);
  margin-top:1px;
}
.inquiry-notice-icon svg{
  width:24px;
  height:24px;
}
.inquiry-notice strong{
  display:block;
  font-size:.92rem;
  color:var(--accent-deep);
  margin-bottom:4px;
  font-weight:600;
}
.inquiry-notice p{
  font-size:.85rem;
  color:var(--ink-2);
  line-height:1.5;
  margin:0;
}

.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px;
  box-shadow:var(--shadow-sm);
}
@media (max-width:520px){.form-card{padding:28px 22px}}

.form-head{
  margin-bottom:26px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.form-head h2{
  font-size:1.35rem;
  font-weight:500;
  margin-bottom:8px;
}
.form-head p{
  color:var(--muted);
  line-height:1.55;
  font-size:.95rem;
  max-width:620px;
}
.form-progress{
  position:relative;
  list-style:none;
  padding:0;
  margin:22px 0 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.form-progress::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:18px;
  height:1px;
  background:var(--line);
}
.form-progress li{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  background:var(--surface);
  padding-right:8px;
}
.form-progress .step-dot{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:600;
}
.form-progress strong{
  font-size:.84rem;
  color:var(--ink-2);
  line-height:1.25;
}
@media (max-width:640px){
  .form-progress{display:none}
  .form-head{margin-bottom:18px; padding-bottom:18px}
}
.form-hints{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.form-hints li{
  padding:10px 11px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:.8rem;
  color:var(--ink-2);
  line-height:1.35;
}
.form-hints strong{
  display:block;
  margin-bottom:3px;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:720px){.form-hints{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:430px){.form-hints{grid-template-columns:1fr}}

.form-status{
  display:none;
  margin-bottom:22px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--bg-alt);
  color:var(--ink-2);
  gap:12px;
  align-items:flex-start;
}
.form-status.visible{display:flex}
.form-status:focus{outline:2px solid var(--ink); outline-offset:3px}
.form-status-icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  margin-top:1px;
}
.form-status-icon svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.form-status strong{
  display:block;
  font-size:.92rem;
  margin-bottom:3px;
  color:var(--ink);
}
.form-status span span{
  display:block;
  font-size:.86rem;
  line-height:1.5;
}
.form-status a,
.form-foot .legal a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.form-status.success{
  background:#edf8ef;
  border-color:#b9dfc0;
  color:#1d6b2a;
}
.form-status.error{
  background:#fff0f0;
  border-color:#f0b6b6;
  color:#a52424;
}
.form-status.warning{
  background:#fff7e0;
  border-color:#e9cf88;
  color:#8a6400;
}

.form-required{
  margin:0 0 18px;
  font-size:.78rem;
  color:var(--muted);
}
.form-section{
  padding:26px 0;
  border-top:1px solid var(--line);
}
.form-section:first-of-type{padding-top:18px}
.form-section-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
}
.form-section-index{
  width:34px;
  height:34px;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent-deep);
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
}
.form-section h3{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:4px;
}
.form-section p{
  color:var(--muted);
  line-height:1.5;
  font-size:.88rem;
}
.optional{
  margin-left:6px;
  font-weight:500;
  color:var(--muted);
  font-size:.76rem;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.form-grid .full{grid-column:1 / -1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr; gap:16px}}

/* Multi-material list */
.material-item + .material-item{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.material-item-head{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:4px;
}
.material-remove-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  border-radius:6px;
  padding:0;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.material-remove-btn:hover{
  background:var(--accent-soft);
  color:var(--accent-deep);
}
.material-remove-btn svg{width:14px;height:14px}
.material-add-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:8px 14px;
  border:1.5px dashed var(--line-strong);
  background:transparent;
  color:var(--muted);
  font-size:.875rem;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.material-add-btn:hover{
  border-color:var(--accent);
  color:var(--accent-deep);
  background:var(--accent-soft);
}
.material-add-btn svg{width:15px;height:15px;flex-shrink:0}

.field{display:flex; flex-direction:column; gap:7px}
.field label{
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-2);
  letter-spacing:0;
}
.field label .req{color:var(--accent); margin-left:2px}
.choice-field{
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}
.choice-field legend{
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-2);
  letter-spacing:0;
  margin-bottom:6px;
}
.choice-help{
  margin:0 0 12px;
  font-size:.84rem;
  line-height:1.45;
  color:var(--muted);
}
.choice-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.choice-option{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height:100px;
  padding:15px 42px 15px 14px;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.choice-option:hover{
  border-color:var(--line-strong);
  background:#fff;
}
.choice-option input{
  position:absolute;
  top:15px;
  right:15px;
  width:18px;
  height:18px;
  flex-shrink:0;
  accent-color:var(--accent);
}
.choice-icon{
  width:36px;
  height:36px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--accent);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.choice-icon svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.choice-option:has(input:checked){
  border-color:var(--ink);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.choice-option:has(input:checked)::after{
  content:"";
  position:absolute;
  top:20px;
  right:20px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  pointer-events:none;
}
.choice-option:has(input:checked) .choice-icon{
  background:var(--accent-soft);
  border-color:rgba(237,28,36,.25);
}
.choice-option strong{
  display:block;
  font-size:.92rem;
  color:var(--ink);
  margin-bottom:3px;
}
.choice-option span span{
  display:block;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.4;
}
@media (max-width:600px){.choice-grid{grid-template-columns:1fr}}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{resize:vertical; min-height:110px; font-family:inherit; line-height:1.5}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:#fff;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted-2)}
.choice-option input[type="radio"]{
  width:auto;
  padding:0;
  background:transparent;
  border:0;
  border-radius:50%;
}
.choice-option input[type="radio"]:focus{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

.form-foot{
  margin-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.form-foot .legal{font-size:.78rem; color:var(--muted); max-width:340px}
@media (max-width:600px){
  .form-foot{align-items:stretch}
  .form-foot .legal{max-width:none}
  .form-foot .btn{width:100%; justify-content:center}
}

.success-state{
  text-align:center;
  padding:50px 30px;
}
.success-state .check{
  width:64px; height:64px;
  margin:0 auto 22px;
  background:var(--accent-soft);
  border-radius:50%;
  display:grid; place-items:center;
}
.success-state .check svg{width:30px;height:30px;stroke:var(--accent-deep);fill:none;stroke-width:2.5}
.success-state h2{
  font-size:1.8rem;
  margin-bottom:12px;
}
.success-state p{color:var(--muted); max-width:420px; margin:0 auto 28px}

/* Error state (red accent) */
.error-state .error-check{
  background:#fee;
}
.error-state .error-check svg{
  stroke:#c92a2a;
  stroke-width:2.5;
  stroke-linecap:round;
}

/* Not-configured state (warning amber) */
.not-configured-state .warn-check{
  background:#fff7e0;
}
.not-configured-state .warn-check svg{
  stroke:#a07000;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Submit-button loading spinner */
.spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation: spin .7s linear infinite;
  margin-right:4px;
  vertical-align:-2px;
}
@keyframes spin{
  to { transform: rotate(360deg); }
}
button[disabled]{
  opacity:.7;
  cursor:not-allowed;
}

/* =========================================================
   ABOUT / CONTACT GENERIC
   ========================================================= */
.page-head{
  padding:48px 0 24px;
  border-bottom:1px solid var(--line);
}
.page-head .eyebrow{margin-bottom:14px}
.page-head h1{max-width:780px}
.page-head p{
  margin-top:18px;
  max-width:640px;
  font-size:1.02rem;
  color:var(--muted);
  line-height:1.6;
}
@media (max-width:640px){
  .page-head{
    padding:38px 0 22px;
  }
  .page-head p{
    font-size:1rem;
  }
}

.about-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:flex-start;
}
.about-grid--single{
  grid-template-columns:minmax(0, 760px);
}
@media (max-width:880px){.about-grid{grid-template-columns:1fr; gap:40px}}
.about-grid h2{margin-bottom:20px}
.about-grid p{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:18px;
  font-size:1.02rem;
}

.values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:60px;
}
@media (max-width:880px){.values{grid-template-columns:1fr; gap:18px}}
.value-card{
  padding:32px 28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .25s var(--ease);
}
.value-card:hover{transform:translateY(-3px)}
.value-card .num{
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:400;
  color:var(--accent);
  line-height:1;
  margin-bottom:18px;
}
.value-card h3{
  font-size:1.2rem;
  margin-bottom:8px;
}
.value-card p{font-size:.95rem; color:var(--muted); line-height:1.55}

/* contact */
.contact-intake{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:stretch;
  margin-bottom:34px;
  padding:34px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
}
.contact-intake h2{
  margin-top:10px;
  max-width:620px;
  color:#fff;
}
.contact-intake p{
  margin-top:16px;
  max-width:620px;
  color:rgba(255,255,255,.72);
  line-height:1.65;
}
.contact-intake .eyebrow{color:rgba(255,255,255,.62)}
.contact-intake .btn{margin-top:26px}
.contact-checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:1px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
}
.contact-checklist li{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:#171a20;
  color:rgba(255,255,255,.82);
  font-size:.92rem;
  line-height:1.35;
}
.contact-checklist li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-card{
  padding:32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.contact-card .icon{
  width:44px; height:44px;
  background:var(--accent-soft);
  border-radius:10px;
  display:grid; place-items:center;
  margin-bottom:16px;
}
.contact-card .icon svg{width:22px;height:22px;stroke:var(--accent-deep);fill:none;stroke-width:1.6}
.contact-card h3{font-size:1.05rem; margin-bottom:6px}
.contact-card p, .contact-card a{
  font-size:.95rem; color:var(--muted);
  line-height:1.5; word-break:break-word;
}
.contact-card a:hover{color:var(--accent)}
.contact-final{
  margin-top:72px;
  text-align:center;
}
.contact-final h2{margin-bottom:18px}
.contact-final p{
  color:var(--muted);
  max-width:560px;
  margin:0 auto 28px;
  line-height:1.65;
}
@media (max-width:880px){
  .contact-intake{grid-template-columns:1fr; padding:28px}
}
@media (max-width:520px){
  .contact-intake{padding:24px 20px}
  .contact-intake .btn{width:100%; justify-content:center}
}

/* =========================================================
   LEGAL PAGES (Impressum, Datenschutz)
   ========================================================= */
.legal-page{
  padding:60px 0 90px;
}
.legal-page .container{
  max-width:820px;
}
.legal-content{
  margin-top:40px;
}
.legal-content h2{
  font-size:1.5rem;
  margin:48px 0 16px;
  font-weight:500;
  letter-spacing:0;
}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{
  font-size:1.15rem;
  margin:32px 0 12px;
  font-weight:600;
  font-family:var(--font-sans);
  color:var(--ink);
  letter-spacing:0;
}
.legal-content h4{
  font-size:1rem;
  margin:24px 0 10px;
  font-weight:600;
  font-family:var(--font-sans);
  color:var(--ink-2);
  letter-spacing:0;
}
.legal-content p,
.legal-content li{
  font-size:.96rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 14px;
}
.legal-content ul{
  padding-left:22px;
  margin:0 0 18px;
}
.legal-content ul li{
  margin-bottom:8px;
  padding-left:4px;
}
.legal-content a{
  color:var(--accent-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal-content a:hover{color:var(--accent)}
.legal-content strong{
  color:var(--ink);
  font-weight:600;
}
.legal-content .legal-block{
  padding:18px 22px;
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  border-radius:6px;
  margin:14px 0 22px;
}
.legal-content .legal-block p{margin-bottom:6px}
.legal-content .legal-block p:last-child{margin-bottom:0}
.legal-content .uppercase-notice{
  text-transform:uppercase;
  font-size:.82rem;
  line-height:1.6;
  letter-spacing:.01em;
  background:var(--bg-alt);
  padding:18px 22px;
  border-radius:6px;
  margin:0 0 18px;
}

/* =========================================================
   LEGAL PAGES (Impressum, Datenschutz)
   ========================================================= */
.legal-page{
  padding:60px 0 100px;
}
.legal-page .container{max-width:880px}

.legal-page .breadcrumb{margin-bottom:36px}

.legal-page h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:14px;
}
.legal-page .lead{
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
  margin-bottom:48px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}

.legal-page h2{
  font-size:1.4rem;
  margin:48px 0 18px;
  letter-spacing:0;
}
.legal-page h3{
  font-size:1.05rem;
  font-weight:600;
  font-family:var(--font-sans);
  letter-spacing:0;
  margin:32px 0 12px;
  color:var(--ink);
}

.legal-page p{
  color:var(--ink-2);
  line-height:1.7;
  margin:0 0 16px;
  font-size:.97rem;
}
.legal-page p strong{color:var(--ink); font-weight:600}

.legal-page ul{
  padding-left:22px;
  margin:0 0 18px;
}
.legal-page ul li{
  color:var(--ink-2);
  line-height:1.6;
  margin-bottom:8px;
  font-size:.97rem;
}

.legal-page a{
  color:var(--accent-deep);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-page a:hover{color:var(--accent)}

/* Impressum field block */
.legal-fields{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:14px 32px;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:32px 0 12px;
}
@media (max-width:600px){
  .legal-fields{grid-template-columns:1fr; gap:4px 0}
  .legal-fields .legal-label{margin-top:14px}
  .legal-fields .legal-label:first-child{margin-top:0}
}
.legal-fields .legal-label{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  padding-top:3px;
}
.legal-fields .legal-value{
  color:var(--ink);
  font-size:.98rem;
  line-height:1.55;
}

/* Heads-up callout for "uppercase legal-style" passages */
.legal-callout{
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  padding:20px 24px;
  border-radius:6px;
  margin:24px 0;
}
.legal-callout p{
  font-size:.88rem;
  margin:0;
  color:var(--ink-2);
  line-height:1.6;
}

/* =========================================================
   LEGAL PAGES (Impressum, Datenschutzerklärung)
   ========================================================= */
.legal-page{
  padding:60px 0 90px;
}
@media (max-width:768px){
  .legal-page{padding:40px 0 70px}
}

.legal-content{
  max-width:780px;
}

.legal-content h2{
  font-size:1.5rem;
  margin:48px 0 14px;
  font-weight:500;
  letter-spacing:0;
}
.legal-content h2:first-child{margin-top:0}

.legal-content h3{
  font-size:1.1rem;
  margin:32px 0 10px;
  font-weight:600;
  font-family:var(--font-sans);
  letter-spacing:0;
}

.legal-content h4{
  font-size:.95rem;
  margin:24px 0 8px;
  font-weight:600;
  font-family:var(--font-sans);
  color:var(--ink-2);
}

.legal-content p{
  font-size:.96rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 14px;
}

.legal-content a{
  color:var(--accent-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
.legal-content a:hover{color:var(--accent)}

.legal-content ul{
  margin:0 0 18px;
  padding-left:22px;
}
.legal-content ul li{
  font-size:.96rem;
  line-height:1.65;
  color:var(--ink-2);
  margin-bottom:6px;
}

.legal-content strong{
  color:var(--ink);
  font-weight:600;
}

/* dl-style block for Impressum data rows */
.legal-block{
  margin:20px 0 28px;
}
.legal-block .legal-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.legal-block p{
  margin:0 0 4px;
  color:var(--ink);
  font-weight:500;
}

/* Quoted DSGVO blocks (caps text in original) */
.legal-content .dsgvo-quote{
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  padding:18px 22px;
  margin:18px 0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-2);
}
.legal-content .legal-title{
  font-size:clamp(2rem, 4vw, 2.6rem);
  margin-bottom:32px;
}
.legal-extra-spaced{
  margin-top:14px;
}
.legal-heading-spaced{
  margin-top:64px;
}


.cta-strip{
  margin:90px 0 0;
  padding:70px 0;
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-strip::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 50%, rgba(237,28,36,.18), transparent 60%),
    repeating-linear-gradient(-45deg, transparent 0 40px, rgba(255,255,255,.015) 40px 42px);
}
.cta-strip-inner{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.cta-strip h2{
  color:#fff;
  max-width:580px;
  font-weight:400;
}
.cta-strip h2 em{color:var(--accent); font-style:italic; font-weight:400}
.cta-strip p{color:rgba(255,255,255,.65); max-width:520px; margin-top:14px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  padding:60px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:48px;
}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

.footer h4{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.footer ul a{
  font-size:.92rem;
  color:var(--ink-2);
  transition:color .2s var(--ease);
}
.footer ul a:hover{color:var(--accent)}
.footer-tagline{
  margin-top:14px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
  max-width:320px;
}
.footer-bot{
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  font-size:.85rem;
  color:var(--muted);
}
.footer-bot a{transition:color .2s var(--ease)}
.footer-bot a:hover{color:var(--accent)}

/* =========================================================
   LEGAL PAGES (Impressum, Datenschutz)
   ========================================================= */
.legal{padding:60px 0 100px}
.legal-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:60px;
  align-items:flex-start;
}
@media (max-width:880px){
  .legal-grid{grid-template-columns:1fr; gap:30px}
}
.legal-toc{
  position:sticky; top:100px;
  font-size:.88rem;
}
@media (max-width:880px){.legal-toc{position:static}}
.legal-toc .toc-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.legal-toc ul{
  list-style:none; padding:0; margin:0;
  display:grid; gap:6px;
}
.legal-toc a{
  display:block;
  padding:7px 14px;
  color:var(--muted);
  border-left:2px solid var(--line);
  font-size:.86rem;
  line-height:1.4;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.legal-toc a:hover{
  color:var(--ink);
  border-left-color:var(--accent);
  background:var(--bg-alt);
}

.legal-content{
  max-width:760px;
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-2);
}
.legal-content h1{
  font-size:clamp(2rem, 4vw, 2.6rem);
  font-weight:400;
  letter-spacing:0;
  margin-bottom:8px;
  color:var(--ink);
}
.legal-content .legal-lead{
  font-size:1.02rem;
  color:var(--muted);
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
  line-height:1.6;
}
.legal-content h2{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink);
  margin:48px 0 14px;
  scroll-margin-top:90px;
}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{
  font-family:var(--font-sans);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0;
  color:var(--ink);
  margin:28px 0 8px;
}
.legal-content p{
  margin:0 0 14px;
  color:var(--ink-2);
  font-size:.97rem;
}
.legal-content strong{color:var(--ink); font-weight:600}
.legal-content ul{
  margin:10px 0 18px;
  padding-left:22px;
  color:var(--ink-2);
  font-size:.97rem;
  line-height:1.65;
}
.legal-content ul li{margin-bottom:6px}
.legal-content a{
  color:var(--accent-deep);
  text-decoration:underline;
  text-decoration-color:rgba(176,61,0,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.legal-content a:hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
}

/* "Pflichtangaben"-Karte für Impressum */
.legal-meta{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:0 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 28px;
  margin:18px 0 28px;
}
.legal-meta .row{
  display:contents;
}
.legal-meta .row .k,
.legal-meta .row .v{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.legal-meta .row:last-child .k,
.legal-meta .row:last-child .v{border-bottom:none}
.legal-meta .row .k{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.legal-meta .row .v{
  color:var(--ink);
  font-weight:500;
  line-height:1.5;
  font-size:.97rem;
}
@media (max-width:600px){
  .legal-meta{
    grid-template-columns:1fr;
    padding:8px 22px;
  }
  .legal-meta .row .k{padding:14px 0 4px; border-bottom:none}
  .legal-meta .row .v{padding:0 0 14px}
}

/* "Großbuchstaben-Block" für DSGVO-Widerspruch */
.legal-content .upper-block{
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  padding:20px 24px;
  margin:18px 0;
  font-size:.88rem;
  line-height:1.65;
  color:var(--ink-2);
  border-radius:0 var(--radius) var(--radius) 0;
  letter-spacing:.005em;
}

/* =========================================================
   PAGE TRANSITIONS
   ========================================================= */
.page{
  animation: fadeUp .18s var(--ease) both;
}
@keyframes fadeUp{
  from{opacity:.96; transform:translateY(3px)}
  to  {opacity:1; transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

@supports (text-wrap:balance){
  .hero-title,
  .page-head h1,
  .section-head h2,
  .detail-content h1,
  .cta-strip h2{
    text-wrap:balance;
  }
}

/* =========================================================
   NEWSLETTER BLOCK
   ========================================================= */
.newsletter-block{
  padding:80px 0;
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.newsletter-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.newsletter-text .eyebrow{
  display:inline-block;
  margin-bottom:12px;
}
.newsletter-text h2{
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:var(--ink);
}
.newsletter-text p{
  color:var(--ink-2);
  font-size:.97rem;
  line-height:1.65;
  margin:0;
}
.newsletter-form-wrap{
  display:flex;
  flex-direction:column;
  gap:0;
}
.newsletter-input-row{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
.newsletter-input-row input[type="email"]{
  flex:1;
  min-width:0;
  padding:12px 16px;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--ink);
  font-size:.97rem;
  font-family:inherit;
  transition:border-color .18s var(--ease);
  outline:none;
}
.newsletter-input-row input[type="email"]::placeholder{color:var(--ink-3)}
.newsletter-input-row input[type="email"]:focus{
  border-color:var(--ink);
}
.newsletter-btn{
  white-space:nowrap;
  flex-shrink:0;
}
.newsletter-legal{
  font-size:.78rem;
  color:var(--ink-3);
  line-height:1.55;
  margin:0;
}
.newsletter-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.newsletter-legal a:hover{color:var(--ink)}

/* Success state */
.newsletter-success{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 20px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  font-size:.97rem;
  font-weight:500;
}
.newsletter-success svg{
  width:20px;height:20px;
  stroke:var(--ink);
  flex-shrink:0;
}

/* Error state */
.newsletter-error{
  margin-top:8px;
  font-size:.84rem;
  color:var(--accent);
  font-weight:500;
}

/* Responsive */
@media(max-width:860px){
  .newsletter-inner{
    grid-template-columns:1fr;
    gap:32px;
  }
}
@media(max-width:480px){
  .newsletter-input-row{
    flex-direction:column;
  }
  .newsletter-btn{
    width:100%;
    justify-content:center;
  }
}