:root{
  --green:#203f35;
  --green-deep:#18352d;
  --green-mid:#315346;
  --stone:#ebe4d7;
  --paper:#f4efe6;
  --ivory:#f3ecdf;
  --brass:#ad8a4d;
  --brass-dark:#7d6338;
  --ink:#131713;
  --muted:#6f6b62;
  --line:rgba(19,23,19,.16);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.72}
.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

/* LOGO */
.logo-mark{
  display:inline-flex;align-items:flex-end;color:#fff;
  line-height:.72;white-space:nowrap;letter-spacing:-.09em
}
.zuern-word{
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:1.78rem;font-weight:900;
  transform:scaleX(1.13);transform-origin:left bottom;
}
.zuern-dot{
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:2.05rem;font-weight:900;
  margin-left:.18rem;line-height:.55;
}

/* NAV */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(25,48,41,.985);
  border-bottom:1px solid rgba(173,138,77,.34);
  backdrop-filter:blur(10px)
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.desktop-nav{display:flex;gap:25px;color:#ddd5c8;font-size:.82rem}
.desktop-nav a{padding:8px 0}

/* HERO */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 16%,rgba(210,215,205,.025),transparent 31%),
    radial-gradient(ellipse at 82% 70%,rgba(128,148,137,.045),transparent 35%),
    linear-gradient(118deg,#294b40 0%,#203d34 48%,#2b4d41 100%);
  color:var(--ivory);
  padding:72px 0 86px;
}
.marble-vein{
  position:absolute;pointer-events:none;opacity:.12;filter:blur(.35px);
  background:linear-gradient(90deg,transparent 0%,rgba(207,211,203,.72) 48%,transparent 54%);
  width:880px;height:2px;transform-origin:left center
}
.marble-one{top:23%;left:-8%;transform:rotate(26deg)}
.marble-two{bottom:18%;right:-22%;transform:rotate(-18deg)}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.eyebrow,.section-label{
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:750;color:var(--brass)
}
.hero h1{
  margin:18px 0 0;
  font:400 clamp(4rem,6.2vw,6.9rem)/.96 Georgia,"Times New Roman",serif;
  letter-spacing:-.055em;
  max-width:720px;
}
.quote-by{
  margin-top:22px;color:#d2c8b8;
  font:italic 1.08rem Georgia,"Times New Roman",serif
}
.lead{
  margin:36px 0 0;max-width:620px;
  font-size:1.16rem;color:#ddd6ca
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 17px;border:1px solid var(--brass);
  font-size:.84rem;font-weight:750
}
.btn-brass{background:var(--brass);color:var(--green-deep)}
.btn-ghost{color:var(--ivory);background:transparent}
.btn-light{border-color:var(--ink);color:var(--ink)}
.hero-art{margin:0}
.image-frame{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:#d8d4cc;
  box-shadow:0 26px 72px rgba(0,0,0,.18)
}
.image-frame::after{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(173,138,77,.42);
  pointer-events:none
}
.image-frame img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 46%;display:block
}
.hero-art figcaption{margin-top:9px;color:#a9a193;font-size:.68rem}

/* THESIS */
section{padding:92px 0;border-top:1px solid var(--line)}
.thesis-grid,.human-grid,.contact-grid{display:grid;grid-template-columns:.26fr .74fr;gap:58px}
.section-label{color:var(--muted)}
.display{
  margin:0;
  font:400 clamp(2.5rem,4.6vw,5rem)/1.04 Georgia,"Times New Roman",serif;
  letter-spacing:-.045em
}
.techline{
  margin:38px 0 0;color:var(--brass-dark);
  text-transform:uppercase;letter-spacing:.08em;
  font-size:.76rem;line-height:2
}
.techline span{padding:0 .22rem}

/* OPERATING SYSTEM */
.operating-system,.sos{
  color:var(--ivory);
  background:
    radial-gradient(circle at 85% 18%,rgba(255,255,255,.06),transparent 30%),
    linear-gradient(130deg,#24483a,#3b6252);
  border-top:1px solid rgba(173,138,77,.28)
}
.brass{color:var(--brass)!important}
.pillars{
  margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--brass);border-bottom:1px solid var(--brass)
}
.pillars article{padding:35px 34px 42px 0}
.pillars article+article{padding-left:34px;border-left:1px solid rgba(173,138,77,.42)}
.index{display:block;color:var(--brass);font:400 2.1rem Georgia,serif;margin-bottom:40px}
.pillars h2{margin:0;font-size:1.02rem;letter-spacing:.08em}
.pillars p{max-width:310px;color:#c8c1b4;font-size:.92rem}

/* EVIDENCE */
.evidence-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:26px;border-top:1px solid var(--line)
}
.evidence-item{
  padding:28px 20px 30px 0;border-bottom:1px solid var(--line)
}
.evidence-item+.evidence-item{padding-left:20px;border-left:1px solid var(--line)}
.evidence-item strong{
  display:block;font:400 2.45rem Georgia,serif;letter-spacing:-.05em
}
.evidence-item span{display:block;margin-top:4px;font-size:.85rem}
.evidence-item small{display:block;margin-top:5px;color:var(--muted);font-size:.69rem}
.text-link{display:inline-block;margin-top:26px;font-weight:700;font-size:.9rem}

/* SOS */
.sos-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end}
.sos h2{
  margin:16px 0 0;
  font:400 clamp(2.8rem,5vw,5.4rem)/1.02 Georgia,serif;
  letter-spacing:-.05em
}
.sos-copy p{max-width:570px;color:#cfc7b9;font-size:1.05rem}
.sos-price{margin:26px 0 0;font:400 2.2rem Georgia,serif;color:var(--brass)}
.sos-price span{font:600 .72rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;margin-left:8px}

/* HUMAN */
.human-sub{font:400 1.7rem Georgia,serif;margin:26px 0 0;color:#3e423d}
.micro{margin-top:25px;color:var(--muted);font-size:.86rem}

/* CONTACT / FOOTER */
.contact{background:var(--paper)}
.contact h2{margin:0;font:400 clamp(2.7rem,4.6vw,4.9rem)/1.02 Georgia,serif;letter-spacing:-.045em}
footer{background:var(--green-deep);color:#cfc7b8;padding:38px 0;border-top:1px solid rgba(173,138,77,.3)}
.footer-row{display:flex;justify-content:space-between;font-size:.77rem}

/* MOBILE */
@media(max-width:860px){
  .wrap{width:min(100% - 34px,var(--max))}
  .desktop-nav{display:none}
  .nav{height:68px}
  .logo{font-size:1.35rem}
  .hero{padding:54px 0 62px}
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero h1{
    font-size:clamp(3.5rem,15vw,5.4rem);
    max-width:none
  }
  .lead{font-size:1.07rem}
  .hero-art{order:2}
  .image-frame{aspect-ratio:3/4}
  .image-frame img{object-position:center 44%}
  section{padding:68px 0}
  .thesis-grid,.human-grid,.contact-grid,.sos-grid{grid-template-columns:1fr;gap:25px}
  .pillars{grid-template-columns:1fr}
  .pillars article{padding:28px 0 32px}
  .pillars article+article{padding-left:0;border-left:0;border-top:1px solid rgba(173,138,77,.36)}
  .index{margin-bottom:18px}
  .evidence-grid{grid-template-columns:1fr 1fr}
  .evidence-item+.evidence-item{padding-left:0;border-left:0}
  .evidence-item:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
  .evidence-item strong{font-size:2rem}
  .display{font-size:clamp(2.35rem,11vw,4rem)}
}
@media(max-width:480px){
  .hero h1{font-size:15.4vw}
  .hero-actions .btn{flex:1}
  .evidence-grid{grid-template-columns:1fr}
  .evidence-item,.evidence-item:nth-child(even){padding-left:0;border-left:0}
  .footer-row{flex-direction:column;gap:5px}
}

/* v0.3.1 fixes */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:860px){
  .desktop-nav{display:none!important}
  .nav{justify-content:flex-start}
  .zuern-word{font-size:1.55rem}
  .zuern-dot{font-size:1.78rem}
  .hero h1{
    font-size:clamp(3.15rem,13.1vw,4.9rem);
    line-height:.98;
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero-copy{min-width:0}
  .lead{max-width:100%;overflow-wrap:break-word}
}

/* v0.4 desktop-first safety: prevent horizontal canvas overflow on phones.
   Full mobile art direction intentionally deferred until desktop sign-off. */
@media(max-width:860px){
  .hero-grid,.hero-copy,.hero-art,.image-frame{min-width:0;max-width:100%}
  .hero h1,.lead{max-width:100%;overflow-wrap:normal}
  .image-frame{width:100%}
  img{max-width:100%}
}

/* v0.4.1 — Nationalgalerie mineral detailing */
.marble-one{
  background:linear-gradient(90deg,transparent 0%,rgba(180,145,78,.62) 46%,rgba(207,187,140,.28) 50%,transparent 55%);
}
.marble-two{
  background:linear-gradient(90deg,transparent 0%,rgba(191,198,192,.48) 46%,rgba(222,225,219,.22) 50%,transparent 55%);
}

/* 1920s German-geometric direction: Kabel-inspired without shipping a proprietary font */
.hero h1{
  font-family:"Avenir Next","Century Gothic","Futura","Trebuchet MS",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.94;
}

/* White ZÜRN. mark — deliberately hard-edged, not editorial */
.logo-mark{color:#fff}
.zuern-word,.zuern-dot{
  font-family:Impact,"Arial Black","Arial Narrow Bold",Arial,sans-serif;
}

/* Laptop refinement */
@media(min-width:861px){
  .hero-copy{transform:translateY(-28px)}
}

/* iPhone/mobile art direction — independent from desktop */
@media(max-width:860px){
  .site-header{position:relative}
  .nav{height:64px}
  .desktop-nav{display:none!important}
  .hero{padding:44px 0 58px}
  .hero-grid{display:flex;flex-direction:column;gap:34px}
  .hero-copy{order:1;transform:none}
  .hero-art{order:2;width:100%}
  .eyebrow{font-size:.66rem;letter-spacing:.16em}
  .hero h1{
    margin-top:15px;
    font-size:clamp(3rem,13.6vw,4.45rem);
    line-height:.95;
    letter-spacing:-.06em;
  }
  .quote-by{margin-top:17px;font-size:.95rem}
  .lead{margin-top:26px;font-size:1rem;line-height:1.55}
  .hero-actions{margin-top:24px}
  .image-frame{aspect-ratio:3/4}
  .image-frame img{object-position:center 45%}
  .hero-art figcaption{font-size:.65rem}
}

/* v0.4.2 — B2 Organic Vein, background B LOCKED */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.34;
  filter:blur(.25px);
  border-radius:50%;
}
.hero::before{
  width:44vw;height:8px;
  left:-6vw;top:63%;
  transform:rotate(-13deg);
  background:
    radial-gradient(circle at 18% 50%,rgba(204,210,205,.70) 0 4px,transparent 5px),
    radial-gradient(circle at 61% 45%,rgba(205,211,206,.48) 0 7px,transparent 8px),
    linear-gradient(90deg,transparent 0%,rgba(203,210,205,.44) 12%,rgba(226,229,224,.64) 48%,rgba(190,198,192,.30) 76%,transparent 100%);
}
.hero::after{
  width:48vw;height:11px;
  right:-11vw;top:31%;
  transform:rotate(19deg);
  background:
    radial-gradient(circle at 28% 50%,rgba(186,145,76,.72) 0 5px,transparent 6px),
    radial-gradient(circle at 72% 50%,rgba(194,155,86,.52) 0 8px,transparent 9px),
    linear-gradient(90deg,transparent 0%,rgba(179,140,73,.25) 14%,rgba(190,150,78,.58) 46%,rgba(212,178,109,.28) 72%,transparent 100%);
}
.hero-grid{position:relative;z-index:2}
.marble-one{
  height:3px!important;
  opacity:.18!important;
  background:
    radial-gradient(circle at 37% 50%,rgba(205,211,206,.70) 0 5px,transparent 6px),
    linear-gradient(90deg,transparent 0%,rgba(204,210,205,.24) 18%,rgba(225,228,223,.58) 48%,rgba(191,199,193,.24) 78%,transparent 100%)!important;
}
.marble-two{
  height:4px!important;
  opacity:.16!important;
  background:
    radial-gradient(circle at 64% 50%,rgba(190,150,78,.65) 0 6px,transparent 7px),
    linear-gradient(90deg,transparent 0%,rgba(176,138,72,.20) 15%,rgba(195,155,83,.54) 48%,rgba(215,181,112,.22) 80%,transparent 100%)!important;
}
/* keep mineral detail subtle on phones */
@media(max-width:860px){
  .hero::before,.hero::after{opacity:.20}
  .marble-one,.marble-two{opacity:.10!important}
}

/* =========================================================
   ZÜRN HOME v0.5 — COMPLETE DESKTOP REWORK
   LOCKED: C typography / Background B / B2 organic veins
   ========================================================= */

/* Global rhythm */
@media(min-width:861px){
  section{padding:82px 0}
  .hero{padding:76px 0 72px}
  .hero-grid{grid-template-columns:.95fr 1.05fr;gap:68px}
  .hero-copy{transform:translateY(-20px)}
  .hero h1{font-size:clamp(4.25rem,5.8vw,6.55rem)}
  .image-frame{max-height:690px}
  .thesis{padding-top:76px;padding-bottom:78px}
  .operating-system{padding-top:78px;padding-bottom:82px}
  .evidence-strip{padding-top:74px;padding-bottom:74px}
  .human{padding-top:72px;padding-bottom:76px}
  .sos{padding-top:80px;padding-bottom:68px}
}

/* Human comes earlier: a deliberate breath after evidence */
.human{
  background:#e9e2d6;
}
.human .display{
  max-width:900px;
}
.human-sub{
  font-family:"Avenir Next","Century Gothic","Futura","Trebuchet MS",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.025em;
  color:#2e3933;
}
.human-copy{
  max-width:720px;
  margin:22px 0 0;
  color:#565950;
  font-size:1rem;
  line-height:1.7;
}

/* SOS is now the final commercial crescendo, not an interruption */
.sos{
  background:
    radial-gradient(ellipse at 15% 18%,rgba(220,224,217,.025),transparent 30%),
    linear-gradient(120deg,#1d3930 0%,#29493e 100%);
}
.sos-head{
  display:grid;
  grid-template-columns:1.15fr .65fr;
  gap:90px;
  align-items:end;
  margin-top:18px;
}
.sos-head h2{
  margin:0;
  max-width:760px;
  font-family:"Avenir Next","Century Gothic","Futura","Trebuchet MS",Arial,sans-serif;
  font-weight:400;
  font-size:clamp(3rem,4.9vw,5.3rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.sos-head > p{
  margin:0 0 7px;
  max-width:470px;
  color:#cec7bb;
  font-size:1rem;
  line-height:1.65;
}
.sos-deliverables{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:54px;
  border-top:1px solid rgba(181,142,77,.55);
  border-bottom:1px solid rgba(181,142,77,.38);
}
.sos-deliverables > div{
  padding:26px 24px 30px 0;
}
.sos-deliverables > div+div{
  padding-left:24px;
  border-left:1px solid rgba(181,142,77,.28);
}
.sos-deliverables span{
  display:block;
  margin-bottom:20px;
  color:var(--brass);
  font-size:.68rem;
  letter-spacing:.16em;
}
.sos-deliverables strong{
  display:block;
  color:var(--ivory);
  font-size:.88rem;
  letter-spacing:.02em;
}
.sos-deliverables small{
  display:block;
  margin-top:8px;
  color:#aaa499;
  font-size:.72rem;
  line-height:1.55;
}
.sos-close{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:26px;
  align-items:end;
  margin-top:38px;
}
.sos-close > p{
  margin:0;
  max-width:620px;
  color:#b9b2a7;
  font-size:.84rem;
}
.sos-close .btn{margin:0}
.sos-price{
  margin:0;
  text-align:right;
  white-space:nowrap;
  font-family:"Avenir Next","Century Gothic","Futura","Trebuchet MS",Arial,sans-serif;
  font-size:2.45rem;
  font-weight:400;
  letter-spacing:-.045em;
  color:var(--brass);
}
.sos-price span{
  display:block;
  margin:4px 0 0;
  font-size:.61rem;
  letter-spacing:.16em;
  color:#c6bda9;
}

/* Contact becomes the quiet final action after the commercial offer */
.contact{
  padding-top:68px!important;
  padding-bottom:72px!important;
}

/* Consistent geometric display language */
.contact h2,
.display{
  font-family:"Avenir Next","Century Gothic","Futura","Trebuchet MS",Arial,sans-serif;
  font-weight:400;
}
.display{letter-spacing:-.05em}

/* Keep mobile structurally safe; full mobile art direction follows desktop sign-off */
@media(max-width:860px){
  .sos-head,.sos-close{grid-template-columns:1fr;gap:22px}
  .sos-deliverables{grid-template-columns:1fr 1fr}
  .sos-deliverables > div+div{border-left:0;padding-left:0}
  .sos-deliverables > div:nth-child(even){padding-left:18px;border-left:1px solid rgba(181,142,77,.28)}
  .sos-price{text-align:left}
  .human-copy{font-size:.95rem}
}
@media(max-width:480px){
  .sos-deliverables{grid-template-columns:1fr}
  .sos-deliverables > div:nth-child(even){padding-left:0;border-left:0}
}

.legal-links{display:flex;gap:18px}.legal-page{background:var(--paper);min-height:70vh;padding:92px 0}.legal-wrap{max-width:820px}.legal-wrap h1{margin:14px 0 48px;font-family:"Avenir Next","Century Gothic","Futura","Trebuchet MS",Arial,sans-serif;font-weight:400;font-size:clamp(3.2rem,5vw,5.2rem);letter-spacing:-.055em}.legal-wrap h2{margin:34px 0 8px;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase}.legal-wrap p{max-width:680px;line-height:1.75}

.logo-mark{display:inline-flex;align-items:center;text-decoration:none}.logo-mark img{display:block;width:112px;height:auto;object-fit:contain}