/* ======================================================================
   ZAUNTURA — "ATELIER" REDESIGN  (loaded only by index.html, after styles.css)
   Architectural-editorial: warm paper · serif display (Newsreader) ·
   grotesk (Archivo) · refined bronze · squared hairline geometry.
   Overrides the base design system via the cascade.
   ====================================================================== */

:root{
  /* surfaces — warm paper */
  --bg:        #F1ECE3;
  --bg-deep:   #E7E0D3;
  --surface:   #FBF9F3;
  --surface-2: #F1ECE3;
  --line:      rgba(27,23,20,.16);
  --line-soft: rgba(27,23,20,.08);

  /* warm ink */
  --text:      #1B1714;
  --text-dim:  #6B6358;
  --steel:     #463E35;

  /* refined bronze accent (evolved from brass) */
  --accent:    #9C6B2E;
  --accent-2:  #B98B45;
  --accent-ink:#FBF9F3;
  --teal:      #2E6E66;

  --accent-glow: 156,107,46;
  --teal-glow:   46,110,102;

  /* type — unified modern geometric sans */
  --font-display: 'Jost', system-ui, -apple-system, sans-serif;  /* labels / UI */
  --font-body:    'Jost', system-ui, -apple-system, sans-serif;
  --font-serif:   'Jost', system-ui, -apple-system, sans-serif;   /* headings (now sans) */

  /* editorial geometry: crisp, squared */
  --r-card: 3px;
  --r-pill: 2px;
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 76px);
}

/* warm-black dark theme (walnut/bronze, not cold steel) */
.theme-dark{
  --bg:        #1B1714;
  --bg-deep:   #15110E;
  --surface:   #241F19;
  --surface-2: #2C261F;
  --line:      rgba(232,224,210,.16);
  --line-soft: rgba(232,224,210,.08);
  --text:      #F4EFE6;
  --text-dim:  #A99F90;
  --steel:     #D8CFBF;
  --teal:      #5AA89C;
  --teal-glow: 90,168,156;
}

body{
  font-size:18px;
  line-height:1.62;
  letter-spacing:0;
  background:var(--bg);
}
::selection{background:var(--accent);color:var(--accent-ink)}
body::after{opacity:.022}

/* ---------------------------------------------------------------------- *
 * TYPOGRAPHY — serif display with editorial italics
 * ---------------------------------------------------------------------- */
.h1,.h2,.h3,
.hero h1,
.shead .h2,
.svc h3,
.matx-vbot .mnm,
.matx-tab .tn,
.quote blockquote,
.faq-item summary,
.step h3,
.usp .u h3,
.team-c h4,
.guide-c h3,
.qstep h3,
.qok h3,
.tcard p,
.about-grid h2,
.region-grid h2,
.faq-head h2{
  font-family:var(--font-serif);
  font-weight:500;
  letter-spacing:-.012em;
  font-optical-sizing:auto;
}

.h1,.hero h1{font-size:clamp(46px,7.6vw,116px);line-height:.96;letter-spacing:-.025em;font-weight:500}
.h2,.shead .h2,.about-grid h2,.region-grid h2,.faq-head h2{
  font-size:clamp(34px,5vw,68px);line-height:1.02;letter-spacing:-.02em;font-weight:500}
.h3{font-size:clamp(22px,2.5vw,30px);line-height:1.12}

/* italic accent words */
.hero h1 .em,.em,.hl,.quote blockquote .hl{
  font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--accent);
  white-space:normal;background:none}
.theme-dark .hero h1 .em,.theme-dark .hl{color:var(--accent-2)}

.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:var(--text-dim);max-width:54ch}

/* ---------------------------------------------------------------------- *
 * KICKER (eyebrow) — editorial small-caps with index rule
 * ---------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-display);font-size:11.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);gap:14px}
.eyebrow::before{width:30px;height:1px;background:var(--accent);border-radius:0}
.eyebrow.teal{color:var(--teal)} .eyebrow.teal::before{background:var(--teal)}

/* ---------------------------------------------------------------------- *
 * BUTTONS — squared; primary = ink fill, hover bronze
 * ---------------------------------------------------------------------- */
.btn{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:17px 28px;transition:
  background .3s,color .3s,border-color .3s,transform .3s,box-shadow .3s}
.btn-primary{background:var(--text);color:var(--bg);box-shadow:none}
.btn-primary:hover{background:var(--accent);color:var(--accent-ink);box-shadow:none;transform:translateY(-2px)}
.theme-dark .btn-primary{background:var(--accent);color:#1B1714}
.theme-dark .btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:transparent;transform:translateY(-2px)}
.btn-sm{padding:12px 18px;font-size:12px}

.lnk{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.1em}
.lnk::after{background:var(--accent);height:1px}

/* chips & small pills → squared hairline */
.chip,.city-chips span,.matx-strengths span,.gal-filter button,.rating-badge,
.matx-finish,.matx-vbot .mno{border-radius:var(--r-pill)}
.chip{font-family:var(--font-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:10.5px;background:transparent}
.lang{border-radius:var(--r-pill)}
.gal-filter button.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------------------------------------------------------------------- *
 * NAV — editorial, hairline
 * ---------------------------------------------------------------------- */
.nav{padding-block:22px;mix-blend-mode:normal}
.nav.scrolled{background:rgba(251,249,243,.86);border-bottom-color:var(--line-soft);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.brand{font-family:var(--font-serif);font-weight:600;letter-spacing:.04em;font-size:21px}
.brand .wm b{font-weight:600;font-style:italic}
.brand .mark{border-radius:2px;border-width:1.5px}
.nav-links a{font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.nav-links a::after{background:var(--accent)}
.nav-tel{font-family:var(--font-display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.lang{font-family:var(--font-display)}

/* nav over warm-black hero */
.nav .brand{color:#F4EFE6}
.nav .nav-links a{color:rgba(244,239,230,.72)}
.nav .nav-links a:hover{color:#fff}
.nav.scrolled .brand{color:var(--text)}
.nav.scrolled .nav-links a{color:var(--text-dim)}
.nav.scrolled .nav-links a:hover{color:var(--text)}
.nav.scrolled .nav-links a.active{color:var(--text)}

/* ---------------------------------------------------------------------- *
 * HERO — editorial composition
 * ---------------------------------------------------------------------- */
.hero{padding-top:120px}
.hero-scrim{background:
  linear-gradient(90deg,#15110E 0%,rgba(21,17,14,.92) 24%,rgba(21,17,14,.5) 46%,transparent 66%),
  linear-gradient(0deg,#15110E 1%,transparent 30%)}
.hero-bg{background:
  radial-gradient(75% 60% at 70% 36%, rgba(185,139,69,.12), transparent 60%),
  linear-gradient(180deg,#1b17140a,#15110E 94%)}
.hero-copy{max-width:min(820px,64vw)}
.hero .eyebrow{color:rgba(244,239,230,.7)}
.hero .eyebrow::before{background:var(--accent-2)}
.hero h1{margin:.28em 0 .26em}
.hero .lead{color:rgba(244,239,230,.78);font-size:clamp(17px,1.5vw,21px);max-width:46ch;margin-bottom:42px}
.hero-trust{margin-top:54px;gap:0;border-top:1px solid rgba(244,239,230,.18);padding-top:26px;max-width:680px}
.hero-trust .t{flex:1}
.hero-trust .t+.t{border-left:1px solid rgba(244,239,230,.18);padding-left:30px}
.hero-trust .n{font-family:var(--font-serif);font-weight:500;font-size:34px;color:#F4EFE6}
.hero-trust .l{color:rgba(244,239,230,.6);font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:10.5px;margin-top:6px}
.scroll-cue{color:rgba(244,239,230,.55);font-family:var(--font-display)}
.scroll-cue .bar{background:linear-gradient(var(--accent-2),transparent)}
.scroll-cue .bar::after{background:var(--accent-2)}
.hero-canvas-loading{color:rgba(244,239,230,.5);font-family:var(--font-display)}

/* corner meta on hero */
.hero-meta{position:absolute;top:120px;right:var(--gut);z-index:3;text-align:right;
  font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,239,230,.5);line-height:1.9;display:none}
@media(min-width:1100px){.hero-meta{display:block}}
.hero-meta b{color:rgba(244,239,230,.85);font-weight:600}

/* ---------------------------------------------------------------------- *
 * MARQUEE
 * ---------------------------------------------------------------------- */
.marquee{background:var(--text)}
.marquee-track span{font-family:var(--font-display);color:rgba(244,239,230,.7);
  text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;font-weight:500}
.marquee-track span::after{content:"—";color:var(--accent-2)}

/* ---------------------------------------------------------------------- *
 * SECTION HEADERS — oversized editorial index numbers
 * ---------------------------------------------------------------------- */
body{counter-reset:sec}
.shead{counter-increment:sec;align-items:flex-start}
.shead .l{position:relative;padding-top:46px}
.shead .l::before{content:counter(sec,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:17px;color:var(--accent);
  letter-spacing:.02em}
.shead .l::after{content:"";position:absolute;top:9px;left:42px;width:34px;height:1px;background:var(--line)}
.shead .eyebrow{display:none}
.shead .h2{margin-top:2px}

/* generic section rhythm */
.section{padding-block:clamp(84px,11vw,168px)}

/* ---------------------------------------------------------------------- *
 * CARDS — flat hairline, crisp corners (no heavy shadows/glows)
 * ---------------------------------------------------------------------- */
.svc{border-radius:var(--r-card);box-shadow:none;background:var(--surface);
  border-color:var(--line);min-height:288px;padding:32px 30px 28px}
.svc:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(27,23,20,.4);border-color:var(--text)}
.svc::after{display:none}
.svc .ico{color:var(--accent)}
.svc h3{font-weight:500;font-size:23px}
.svc .num{font-family:var(--font-display);color:var(--text-dim);letter-spacing:.12em}
.theme-dark .svc:hover,.svc.on-dark:hover{background:var(--surface-2)}

.usp .u{border-radius:var(--r-card);box-shadow:none}
.usp .u:hover{box-shadow:0 18px 40px -28px rgba(27,23,20,.4);border-color:var(--text)}
.usp .u .n{font-family:var(--font-serif);font-style:italic;font-size:17px;color:var(--accent);letter-spacing:.02em;font-weight:400}
.usp .u h3{font-weight:500;font-size:20px}

/* ---------------------------------------------------------------------- *
 * MATERIAL EXPLORER
 * ---------------------------------------------------------------------- */
.matx-tab{border-radius:var(--r-card)}
.matx-tabs{grid-template-columns:repeat(2,1fr)}
.matx-tab .tn{font-weight:500;font-size:18px;white-space:nowrap}
.matx-tab .td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matx-finish{font-size:10.5px;letter-spacing:.03em;max-width:62%;line-height:1.3}
.matx-tab.on{box-shadow:inset 0 0 0 1px var(--mat)}
.matx-visual{border-radius:var(--r-card)}
.matx-fact{border-radius:var(--r-card)}
.matx-fact .fn{font-family:var(--font-serif);font-weight:500}
.matx-vbot .mnm{font-weight:500}
.matx-lead{font-size:17px;color:var(--text-dim)}

/* ---------------------------------------------------------------------- *
 * SMART
 * ---------------------------------------------------------------------- */
.smart-diagram{border-radius:var(--r-card)}
.sd-node .box{border-radius:6px}
.smart .feature-list li .v b{font-weight:600}

/* ---------------------------------------------------------------------- *
 * CONFIGURATOR teaser
 * ---------------------------------------------------------------------- */
.cfg{border-radius:var(--r-card);background:var(--surface-2)}
.cfg::before{background:radial-gradient(60% 120% at 88% 50%,rgba(var(--accent-glow),.1),transparent 60%)}
.cfg .mockpanel{border-radius:var(--r-card);background:var(--surface)}
.theme-dark .cfg .mockpanel{background:rgba(21,17,14,.5)}
.cfg .mp-opt{border-radius:2px}
.cfg .mp-swatches i{border-radius:2px}

/* ---------------------------------------------------------------------- *
 * STEPS / ABLAUF
 * ---------------------------------------------------------------------- */
.step .sn{font-family:var(--font-serif);font-style:italic;font-size:18px;color:var(--accent);font-weight:400;letter-spacing:.02em}
.step h3{font-weight:500;font-size:21px}
.step::before{background:var(--accent)}

/* ---------------------------------------------------------------------- *
 * GALLERY + COMPARE
 * ---------------------------------------------------------------------- */
.gallery-c image-slot{border-radius:var(--r-card)}
.gallery-c .meta b{font-family:var(--font-serif);font-weight:500;font-size:18px}
.compare{border-radius:var(--r-card)}
.compare .handle{background:var(--accent)}
.compare .handle .knob{background:var(--accent);color:var(--accent-ink);border-radius:50%}
.compare .clab.r{color:var(--accent-2)}

/* ---------------------------------------------------------------------- *
 * ABOUT / TEAM / REGION
 * ---------------------------------------------------------------------- */
.about-grid image-slot,.team-c image-slot,.region-map{border-radius:var(--r-card)}
.about-facts .f .n{font-family:var(--font-serif);font-weight:500;font-size:36px}
.team-c h4{font-weight:500;font-size:18px}
.partners .pl{font-family:var(--font-serif);font-weight:500;font-style:italic;opacity:.6}
.partners .lead-sm{font-family:var(--font-display)}

/* ---------------------------------------------------------------------- *
 * TESTIMONIALS
 * ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- *
 * TESTIMONIALS — bento grid
 * ---------------------------------------------------------------------- */
.tcard{border-radius:var(--r-card);box-shadow:none}
.tcard p{font-family:var(--font-serif);font-weight:400;font-size:19px;line-height:1.5;letter-spacing:-.005em}
.tcard .who b{font-family:var(--font-display);font-weight:600}
.rating-badge .rb b{font-weight:600}

.tbento{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:780px){.tbento{grid-template-columns:repeat(4,1fr)}}
.tb{display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:28px 28px 26px;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}
.tb:hover{transform:translateY(-3px);border-color:var(--text);box-shadow:0 26px 56px -34px rgba(27,23,20,.42)}
.tb-feat{grid-column:1 / -1}
.tb-wide{grid-column:1 / -1}
@media(min-width:780px){
  .tb-feat{grid-column:span 2;grid-row:span 2}
  .tb-wide{grid-column:span 2}
  .tb-sm{grid-column:span 1}
}
.tb-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tb-source{font-family:var(--font-serif);font-style:italic;font-size:19px;color:var(--text)}
.tb-stars{color:var(--accent);letter-spacing:.08em;font-size:14px}
.tb blockquote{margin:0;display:flex;flex-direction:column;gap:24px;height:100%;justify-content:space-between}
.tb-q{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em;color:var(--text);margin:0}
.tb-feat .tb-q{font-size:clamp(22px,2vw,28px);line-height:1.34}
.tb-feat .tb-q .hl{font-style:italic;color:var(--accent)}
.tb-wide .tb-q{font-size:clamp(19px,1.6vw,23px);line-height:1.4}
.tb-sm .tb-q{font-size:17px;line-height:1.5;font-weight:400}
.tb-who{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px}
.tb-who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.tb-who .mono{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--accent,#E8B23A);background:rgba(232,178,58,.14);border:1px solid rgba(232,178,58,.32)}
.tb-who .nm{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--text);line-height:1.2}
.tb-who .rl{font-size:12.5px;color:var(--text-dim)}

/* ---------------------------------------------------------------------- *
 * TEXT REVEAL BY WORD (scroll-driven manifest)
 * ---------------------------------------------------------------------- */
.rvw{position:relative;height:240vh;background:var(--bg)}
.rvw-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.rvw-wrap{max-width:1120px;margin:0 auto;padding-inline:var(--gut);width:100%}
.rvw-kicker{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel);display:inline-flex;align-items:center;gap:14px;margin-bottom:30px}
.rvw-kicker::before{content:"";width:30px;height:1px;background:var(--accent)}
.rvw-text{font-family:var(--font-serif);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(27px,4.4vw,60px);line-height:1.2;display:flex;flex-wrap:wrap;margin:0}
.rword{position:relative;margin-right:.26em;color:var(--text);opacity:.14;
  transition:opacity .15s linear}
.rword.acc{color:var(--accent);font-style:italic}
@media (prefers-reduced-motion:reduce){.rvw{height:auto}.rvw-sticky{height:auto;padding-block:clamp(80px,11vw,160px)}.rword{opacity:1}}
/* Mobile / touch: un-pin the manifest so its 100svh sticky block can't stay
   stuck over the sections below it (was making FAQ/footer untappable). */
@media (max-width:860px),(hover:none) and (pointer:coarse){
  .rvw{height:auto}
  .rvw-sticky{position:static;height:auto;overflow:visible;padding-block:clamp(72px,12vw,140px)}
  .rword{opacity:1 !important}
}

/* ---------------------------------------------------------------------- *
 * FAQ
 * ---------------------------------------------------------------------- */
.faq-item summary{font-weight:500;font-size:21px}
.faq-item .ic{border-radius:50%}
.faq-item[open] .ic{border-color:var(--accent);color:var(--accent)}

/* ---------------------------------------------------------------------- *
 * KONTAKT FORM
 * ---------------------------------------------------------------------- */
.qform{border-radius:var(--r-card);background:rgba(244,239,230,.04)}
.qopt,.qfield input,.qfield select{border-radius:2px}
.qopt.on{box-shadow:inset 0 0 0 1px var(--accent);background:rgba(156,107,46,.14)}
.quick a{border-radius:var(--r-card);align-items:flex-start;padding:20px 22px}
.quick a .qi{border-radius:2px}
.quick a .qt{white-space:nowrap}
.quick a .qs{white-space:nowrap}

/* ---------------------------------------------------------------------- *
 * FOOTER
 * ---------------------------------------------------------------------- */
.footer{background:#15110E;color:#F4EFE6;border-top:0}
.footer .brand{color:#F4EFE6}
.footer .foot-brand p{color:rgba(244,239,230,.6)}
.footer .foot-col h4{color:rgba(244,239,230,.5)}
.footer .foot-col a{color:rgba(244,239,230,.82)}
.footer .foot-col a:hover{color:var(--accent-2)}
.footer .foot-trust{border-bottom-color:rgba(244,239,230,.16)}
.footer .foot-trust .tb{color:rgba(244,239,230,.78);white-space:nowrap}
.foot-trust .tb{white-space:nowrap}
.foot-bar{gap:10px 28px}
.footer .foot-trust .tb b{color:#F4EFE6}
.footer .foot-trust .tb .d{background:var(--accent-2)}
.footer .foot-hours{color:rgba(244,239,230,.7)}
.footer .foot-social a{border-color:rgba(244,239,230,.2);color:rgba(244,239,230,.75)}
.footer .foot-social a:hover{border-color:var(--accent-2);color:var(--accent-2)}
.footer .foot-bar{border-top-color:rgba(244,239,230,.16);color:rgba(244,239,230,.55)}
.footer .foot-bar a:hover{color:var(--accent-2)}

/* ---------------------------------------------------------------------- *
 * CHROME — progress, back-to-top
 * ---------------------------------------------------------------------- */
.scroll-prog .bar{background:var(--accent);box-shadow:none}
.to-top{border-radius:50%;background:var(--text);color:var(--bg);border-color:var(--text)}
.to-top:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------------------------------------------------------------------- *
 * PRELOADER — warm walnut, serif wordmark
 * ---------------------------------------------------------------------- */
#preloader{background:#15110E}
.pl-gate{background:linear-gradient(180deg,#2c2620,#191510)}
.pl-gate::after{box-shadow:inset 0 16px 0 #221d17,inset 0 -16px 0 #221d17,inset 0 0 0 1px rgba(232,224,210,.08)}
.pl-trim{background:var(--accent-2)}
.pl-edge{background:linear-gradient(180deg,var(--accent-2),#fff,var(--accent-2))}
.pl-mark{font-family:var(--font-serif);font-weight:500;letter-spacing:.16em}
.pl-mark b{color:var(--accent-2);font-style:italic}
.pl-bar span{background:var(--accent-2)}
.pl-cap{font-family:var(--font-display)}

/* ---------------------------------------------------------------------- *
 * CONSENT + tweaks stay dark; just warm them slightly
 * ---------------------------------------------------------------------- */
.consent{background:rgba(27,23,20,.95);border-color:rgba(232,224,210,.16);border-radius:var(--r-card)}
.consent p a{color:var(--accent-2)}

/* responsive hero copy */
@media (max-width:900px){.hero-copy{max-width:100%}}
@media (max-width:600px){.hero-trust{flex-wrap:wrap;gap:18px}.hero-trust .t+.t{border-left:0;padding-left:0}}