/* ─── Pichler Raumausstattung ── design tokens ──────────────────────── */
@font-face{
  font-family:"Apris";
  src:url("fonts/apris-variable.woff") format("woff-variations"),
      url("fonts/apris-variable.woff") format("woff");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Neue Montreal";
  src:url("fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Tex Gyre Schola";
  src:url("fonts/tex-gyre-schola.regular.woff2") format("woff2"),
      url("fonts/tex-gyre-schola.regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --cream:#EFE5D2;
  --cream-2:#E7DBC3;
  --orange:#FE5000;
  --green-deep:#13322B;
  --green-panel:#313830;
  --taupe:#9D927C;
  --white:#FFFFFF;
  --black:#000000;

  --fg:var(--green-deep);
  --bg:var(--cream);

  --display:"Apris", "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --body:"Neue Montreal", -apple-system, system-ui, sans-serif;
  --mono:"Tex Gyre Schola", Georgia, serif;
  --body-size:20px;
  --body-leading:1.35;
  --small-body-size:15px;
  --small-body-leading:1.45;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --container:1440px;
  --gutter:clamp(20px, 4vw, 64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html, body{background:var(--bg);color:var(--fg);font-family:var(--body);
  font-weight:300;font-size:var(--body-size);line-height:var(--body-leading);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}

img, svg, video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer}
em, i{font-style:normal}

::selection{background:var(--orange);color:var(--cream)}

/* ─── Type system ────────────────────────────────────────────────── */
.display, h1, h2, h3{font-family:var(--display);font-weight:400;
  letter-spacing:-.015em;line-height:.95}
.h-hero{font-size:clamp(58px, 11vw, 168px);line-height:.88;letter-spacing:-.025em}
.h-section{font-size:clamp(34px, 5vw, 72px);line-height:1.05;letter-spacing:-.015em}
.h-large{font-size:clamp(32px, 4vw, 64px);line-height:1;letter-spacing:-.015em}
.h-mid{font-size:clamp(26px, 2.6vw, 42px);line-height:1.05;letter-spacing:-.01em}

.eyebrow{font-family:var(--mono);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;color:var(--taupe)}
.eyebrow.on-dark{color:#a89f87}

.lede{font-size:var(--body-size);line-height:var(--body-leading);
  font-weight:300;max-width:32em}
p.body{font-size:var(--body-size);line-height:var(--body-leading);max-width:34em}
.italic{font-style:normal;font-family:var(--display);font-weight:400}

/* ─── Layout primitives ──────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding:clamp(80px, 12vh, 160px) 0;position:relative}
section.tight{padding:clamp(60px, 9vh, 110px) 0}

.section-cream{background:var(--cream);color:var(--green-deep)}
.section-dark{background:var(--green-deep);color:var(--cream)}
.section-panel{background:var(--green-panel);color:var(--cream)}
.section-cream-deep{background:var(--cream-2);color:var(--green-deep)}

/* ─── Top bar + menu ─────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;
  padding:22px var(--gutter);display:flex;align-items:center;
  justify-content:space-between;mix-blend-mode:normal;
  transition:padding .4s var(--ease-out)}
.topbar.scrolled{padding-top:14px;padding-bottom:14px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center;color:var(--cream)}
.logo-mark{display:block;width:110px;aspect-ratio:595.28 / 157.53;
  background:currentColor;
  -webkit-mask:url("img/Pichler_Logo.svg") center / contain no-repeat;
  mask:url("img/Pichler_Logo.svg") center / contain no-repeat}
.topbar .logo{line-height:1;color:var(--cream);transition:color .4s}
.topbar.on-light .logo{color:var(--green-deep)}
.topbar.scrolled .logo{color:var(--green-deep)}

.burger{display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-radius:999px;border:.5px solid transparent;
  color:var(--cream);transition:color .4s, background .4s, border-color .4s}
.topbar.on-light .burger{color:var(--green-deep)}
.topbar.scrolled .burger{color:var(--green-deep)}
.burger:hover{background:color-mix(in srgb, currentColor 8%, transparent);
  border-color:color-mix(in srgb, currentColor 18%, transparent)}
.burger .label{font-family:var(--mono);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.16em}
.burger .lines{width:22px;height:10px;position:relative}
.burger .lines i{position:absolute;left:0;right:0;height:1px;
  background:currentColor;transition:transform .35s var(--ease-in-out)}
.burger .lines i:nth-child(1){top:2px}
.burger .lines i:nth-child(2){bottom:2px}

/* ─── Fixed side slogan ──────────────────────────────────────────── */
.side-slogan{position:fixed;right:18px;top:50%;z-index:40;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.35;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  mix-blend-mode:difference;pointer-events:none;white-space:nowrap}
@media (max-width:880px){.side-slogan{display:none}}

/* ─── Fullscreen menu overlay ───────────────────────────────────── */
.menu-overlay{position:fixed;inset:0;z-index:60;background:var(--green-deep);
  color:var(--cream);display:flex;flex-direction:column;
  padding:90px var(--gutter) 50px;
  clip-path:circle(0% at calc(100% - 60px) 40px);
  transition:clip-path .85s var(--ease-in-out);
  pointer-events:none;font-family:var(--body);text-transform:uppercase}
.menu-overlay.open{clip-path:circle(160% at calc(100% - 60px) 40px);
  pointer-events:auto}
.menu-overlay .menu-top{display:flex;align-items:center;
  justify-content:space-between;position:absolute;top:22px;left:var(--gutter);
  right:var(--gutter)}
.menu-overlay .menu-top .logo{color:var(--cream)}
.menu-overlay .close{display:flex;align-items:center;gap:14px;padding:10px 14px;
  border-radius:999px;border:.5px solid rgba(239,229,210,.2);color:var(--cream)}
.menu-overlay .close .label{font-family:var(--mono);font-size:11px;
  line-height:1.35;text-transform:uppercase;letter-spacing:.16em;font-weight:400}
.menu-overlay .close .x{width:22px;height:22px;position:relative}
.menu-overlay .close .x i{position:absolute;inset:0;margin:auto;width:18px;
  height:1px;background:currentColor}
.menu-overlay .close .x i:nth-child(1){transform:rotate(45deg)}
.menu-overlay .close .x i:nth-child(2){transform:rotate(-45deg)}

.menu-grid{flex:1;display:grid;grid-template-columns:1.4fr 1fr;
  gap:60px;align-content:end;padding-bottom:40px}
@media (max-width:880px){.menu-grid{grid-template-columns:1fr;align-content:start;
  padding-top:20px}}

.menu-col .menu-col-label{font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.35;
  text-transform:uppercase;letter-spacing:.16em;color:#a89f87;
  margin-bottom:28px}
.menu-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.menu-list li{overflow:hidden}
.menu-list a{font-family:var(--body);font-size:clamp(28px, 3vw, 44px);
  line-height:1.15;letter-spacing:0;text-transform:none;font-weight:400;display:inline-flex;align-items:baseline;
  gap:14px;color:var(--cream);position:relative;
  transform:translateY(100%);transition:transform .7s var(--ease-out),
    color .35s}
.menu-overlay.open .menu-list a{transform:translateY(0)}
.menu-list li:nth-child(1) a{transition-delay:.15s}
.menu-list li:nth-child(2) a{transition-delay:.20s}
.menu-list li:nth-child(3) a{transition-delay:.25s}
.menu-list li:nth-child(4) a{transition-delay:.30s}
.menu-list li:nth-child(5) a{transition-delay:.35s}
.menu-list li:nth-child(6) a{transition-delay:.40s}
.menu-list li:nth-child(7) a{transition-delay:.45s}
.menu-list a:hover{color:var(--orange)}
.menu-list a .num{font-family:var(--body);font-size:20px;
  line-height:1;letter-spacing:0;color:#a89f87;font-style:normal;font-weight:400;align-self:flex-start;
  margin-top:.5em}
.menu-list a .arrow{font-family:var(--body);font-size:.6em;color:#a89f87;
  opacity:0;transform:translateX(-10px);transition:opacity .3s, transform .3s}
.menu-list a:hover .arrow{opacity:1;transform:translateX(0)}

.menu-right{display:flex;flex-direction:column;gap:32px;align-self:end}
.menu-contact .line{font-family:var(--body);font-size:clamp(28px, 3vw, 44px);line-height:1.15;letter-spacing:0;font-weight:400;text-transform:none}
.menu-contact .line.mono{font-family:var(--mono);font-size:11px;
  line-height:1.35;letter-spacing:.16em;color:#a89f87;font-weight:400;text-transform:uppercase}

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero{min-height:100vh;position:relative;background:#0a1815;color:var(--cream);
  display:flex;align-items:flex-end;padding:0;overflow:hidden}
.hero .cinemagraph{position:absolute;inset:0;overflow:hidden}
.hero .cinemagraph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,15,12,.45) 0%, rgba(10,15,12,.15) 35%, rgba(10,15,12,.55) 75%, rgba(10,15,12,.95) 100%)}

.hero .cinemagraph .scene{position:absolute;inset:-5%;
  background-image:url("img/hero.jpg");
  background-size:cover;
  background-position:center;
  animation:slowDrift 24s var(--ease-in-out) infinite alternate}
.hero[data-hero-image="hero2"] .cinemagraph .scene{background-image:url("img/hero2.jpg")}
@keyframes slowDrift{
  0%{transform:scale(1.04) translate(0, 0)}
  100%{transform:scale(1.08) translate(-1.5%, -1.5%)}
}
.hero .vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.55) 100%);
  pointer-events:none}

.hero .content{position:relative;z-index:2;width:100%;
  padding:0 var(--gutter) clamp(60px, 9vh, 120px);
  display:flex;justify-content:flex-end}
@media (max-width:880px){.hero .content{justify-content:flex-start}}

.hero .hero-claim{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:2;padding:0 var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--display);font-size:clamp(54px, 9vw, 120px);
  line-height:.86;letter-spacing:0;text-transform:uppercase;font-weight:400;
  font-feature-settings:"ss01" on;pointer-events:none}
.hero .hero-claim .claim-left{text-align:center}
.hero .hero-claim .claim-right{text-align:center}
.hero .hero-claim .italic{font-style:normal;color:var(--orange)}
.hero .hero-claim .orange{color:var(--orange)}
@media (max-width:880px){
  .hero{align-items:stretch;flex-direction:column;justify-content:flex-start;
    padding:clamp(110px, 18vh, 180px) 0 clamp(40px, 7vh, 80px)}
  .hero .hero-claim{position:relative;top:auto;transform:none;
    flex-direction:column;align-items:center;padding:0 var(--gutter);gap:8px}
  .hero .hero-claim .claim-right{align-self:center;text-align:center}
  .hero .content{margin-top:clamp(40px, 6vh, 80px);justify-content:flex-start;padding-bottom:0}
  .hero .scroll-cue{display:none}
}

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

.hero .right-block{align-self:end;padding-bottom:6px;
  display:flex;flex-direction:column;gap:24px;max-width:460px;justify-self:end}
@media (max-width:880px){.hero .right-block{justify-self:start;max-width:none}}
.hero .right-block p{font-size:var(--body-size);line-height:var(--body-leading);color:#dccfb6}
.hero .right-block .meta{font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.35;
  letter-spacing:.16em;text-transform:uppercase;color:#a89f87;display:flex;gap:14px;align-items:center;white-space:nowrap}
.hero .right-block .meta::before{content:"";width:36px;height:1px;background:#a89f87}
@media (max-width:520px){.hero .right-block .meta{white-space:normal}}

.hero .scroll-cue{position:absolute;left:var(--gutter);bottom:24px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#a89f87;display:flex;align-items:center;gap:10px}
.hero .scroll-cue .line{width:1px;height:24px;background:#a89f87;position:relative;overflow:hidden}
.hero .scroll-cue .line::after{content:"";position:absolute;inset:0;background:var(--cream);
  animation:scrollPulse 2.4s var(--ease-in-out) infinite}
@keyframes scrollPulse{
  0%{transform:translateY(-100%)}
  50%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

/* ─── Reveals ─────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}

.lift{transform:translateY(40px);opacity:0;
  transition:opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out)}
.lift.in{opacity:1;transform:none}

.split{overflow:hidden;display:inline-block}
.split-line{display:block}
.split-line span{display:inline-block;transform:translateY(105%);
  transition:transform 1.2s var(--ease-out)}
.split.in .split-line span{transform:translateY(0)}
.split.in .split-line:nth-child(2) span{transition-delay:.1s}
.split.in .split-line:nth-child(3) span{transition-delay:.18s}
.split.in .split-line:nth-child(4) span{transition-delay:.26s}

/* ─── Intro story section ────────────────────────────────────────── */
.section-light{background:var(--white);color:var(--green-deep)}
.intro-story{padding:clamp(80px, 12vh, 160px) 0}
.intro-story .container{display:grid;grid-template-columns:repeat(12, 1fr);
  gap:clamp(20px, 3vw, 40px) clamp(16px, 2vw, 24px)}
.intro-story .intro-lead{grid-column:1 / 7;
  font-size:var(--body-size);line-height:var(--body-leading);
  font-family:var(--body);font-weight:300;max-width:34em}
.intro-story .intro-image{grid-column:6 / 12;justify-self:center;
  margin:clamp(40px, 6vh, 80px) 0 0;max-width:520px;width:100%}
.intro-story .intro-image img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.intro-story .intro-headline{grid-column:1 / 8;
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px, 5vw, 72px);line-height:1.05;letter-spacing:-.015em;
  color:var(--orange);margin-top:clamp(-280px, -22vw, -120px);position:relative;z-index:2}
.intro-story .intro-outro{grid-column:1 / 7;
  font-size:var(--body-size);line-height:var(--body-leading);
  font-family:var(--body);font-weight:300;max-width:34em;
  margin-top:clamp(48px, 8vh, 96px)}
@media (max-width:880px){
  .intro-story .container{grid-template-columns:1fr}
  .intro-story .intro-lead,
  .intro-story .intro-image,
  .intro-story .intro-headline,
  .intro-story .intro-outro{grid-column:1}
  .intro-story .intro-image{justify-self:start;margin:24px 0}
  .intro-story .intro-headline{margin-top:0}
}

/* ─── Manifest section (dark) ─────────────────────────────────────── */
.manifest{padding:clamp(120px, 18vh, 220px) 0}
.manifest-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:24px;
  align-items:end}
.manifest .quote{grid-column:1 / 9;font-family:var(--display);
  font-size:clamp(34px, 5vw, 72px);line-height:1.05;letter-spacing:-.015em}
.manifest .quote .em{color:var(--orange);font-style:normal}
.manifest .quote.orange-quote{color:var(--orange)}
.manifest .side{grid-column:10 / 13;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:#a89f87;
  border-left:1px solid rgba(168,159,135,.3);padding:6px 0 6px 18px}
@media (max-width:880px){
  .manifest .quote, .manifest .side{grid-column:1 / -1}
  .manifest .side{margin-top:32px;border-left:0;padding-left:0;
    border-top:1px solid rgba(168,159,135,.3);padding-top:18px}
}

.statement-stack{display:flex;flex-direction:column;gap:8px;
  margin-top:clamp(80px, 12vh, 140px);font-family:var(--body);
  font-size:clamp(28px, 3vw, 44px);line-height:1.15;letter-spacing:0;text-transform:none}
.statement-stack .line{display:flex;align-items:baseline;gap:24px;
  border-top:1px solid rgba(239,229,210,.18);padding:20px 0}
.statement-stack .line:last-child{border-bottom:1px solid rgba(239,229,210,.18)}
.statement-stack .line .n{font-family:var(--body);font-size:28px;
  letter-spacing:0;color:#a89f87;flex:0 0 60px;
  align-self:flex-start;padding-top:6px}
.statement-stack .line strong{font-weight:400}
.statement-stack .line em{font-style:normal;color:var(--cream)}

/* ─── Services ────────────────────────────────────────────────────── */
.services .head{display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:end;margin-bottom:clamp(48px, 7vh, 96px)}
@media (max-width:880px){.services .head{grid-template-columns:1fr;gap:24px}}
.services .head p{font-size:var(--body-size);line-height:var(--body-leading);max-width:32em;
  color:color-mix(in srgb, currentColor 75%, transparent);justify-self:end}
@media (max-width:880px){.services .head p{justify-self:start}}

.service-block + .service-block{margin-top:clamp(80px, 10vh, 140px)}
.service-block .block-head{display:flex;align-items:center;
  justify-content:space-between;border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding:24px 0 32px;flex-wrap:wrap;gap:16px}
.service-block .block-head h3{font-family:var(--body);
  font-size:clamp(28px, 3vw, 44px);line-height:1.15;letter-spacing:0;text-transform:none}

.cards{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:580px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:block;aspect-ratio:3/4;
  background:var(--green-deep);color:var(--cream);overflow:hidden;
  border-radius:2px;transition:transform .8s var(--ease-out)}
.card:hover{transform:translateY(-4px)}
.card .swatch{position:absolute;inset:0;transition:transform 1.2s var(--ease-out);
  background-size:cover;background-position:center}
.card:hover .swatch{transform:scale(1.04)}
.card .swatch::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, rgba(0,0,0,.75) 100%)}
.card .swatch.img-1{background-image:url("img/1.jpg")}
.card .swatch.img-2{background-image:url("img/2.jpg")}
.card .swatch.img-3{background-image:url("img/3.jpg")}
.card .swatch.img-4{background-image:url("img/4.jpg")}
.card .swatch.img-5{background-image:url("img/5.jpg")}
.card .swatch.img-6{background-image:url("img/6.jpg")}
.card .swatch.img-7{background-image:url("img/7.jpg")}
.card .swatch.img-8{background-image:url("img/8.jpg")}
.card .swatch.img-9{background-image:url("img/9.jpg")}
.card .swatch.img-10{background-image:url("img/10.jpg")}

.card .body{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  z-index:2;display:flex;flex-direction:column;gap:6px}
.card .body .name{font-family:var(--display);font-size:clamp(18px, 1.4vw, 22px);line-height:1.1;
  letter-spacing:-.005em}
@media (max-width:880px){.card .body .name{font-size:var(--body-size)}}
.card .body .arrow{position:absolute;top:18px;right:20px;width:32px;height:32px;
  border-radius:999px;border:.5px solid rgba(239,229,210,.35);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:background .35s, transform .35s, border-color .35s}
.card:hover .body .arrow{background:var(--orange);border-color:var(--orange);
  transform:rotate(-45deg)}

/* fabric swatches — CSS-only previews for each service card */
.swatch.boucle{background:
  repeating-linear-gradient(0deg, #3a4a40 0 2px, #2a3a30 2px 4px),
  radial-gradient(circle at 30% 40%, #5a6a5e 0 1px, transparent 1.5px) 0 0/8px 8px,
  radial-gradient(circle at 70% 60%, #5a6a5e 0 1px, transparent 1.5px) 4px 4px/8px 8px,
  #2e3a32}
.swatch.linen{background:
  repeating-linear-gradient(90deg, #c0b291 0 1px, #b5a784 1px 3px),
  repeating-linear-gradient(0deg, rgba(80,70,50,.18) 0 1px, transparent 1px 3px),
  #b5a784}
.swatch.velvet{background:
  radial-gradient(ellipse at 50% 30%, #5a2a18 0%, #3a1808 60%, #2a0e04 100%);
  position:absolute;inset:0}
.swatch.velvet::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(105deg, rgba(255,200,150,.06) 0 1px, transparent 1px 3px)}
.swatch.leather{background:
  radial-gradient(ellipse at 50% 30%, #6b4628 0%, #3d2614 70%, #2a1808 100%)}
.swatch.leather::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 30%, rgba(0,0,0,.2) 0 18%, transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.2) 0 14%, transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(255,220,180,.06) 0 30%, transparent 70%)}
.swatch.wool{background:
  repeating-linear-gradient(45deg, #4a5a4d 0 4px, #3a4a3d 4px 8px),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 4px, transparent 4px 8px),
  #3a4a3d}
.swatch.canvas{background:
  repeating-linear-gradient(90deg, #c9b78c 0 4px, #b8a679 4px 8px),
  repeating-linear-gradient(0deg, #c9b78c 0 4px, #b8a679 4px 8px);
  background-blend-mode:multiply}
.swatch.cord{background:
  repeating-linear-gradient(90deg, #2d3530 0 6px, #1e2622 6px 7px, #2d3530 7px 13px, #1e2622 13px 14px);
  background-color:#2d3530}
.swatch.cane{background:
  conic-gradient(from 0deg at 50% 50%, #8a6a3a 0 25%, #6a4e26 25% 50%, #8a6a3a 50% 75%, #6a4e26 75% 100%);
  background-size:14px 14px}
.swatch.checker{background:
  repeating-conic-gradient(#13322B 0% 25%, #243b34 0 50%);
  background-size:18px 18px}
.swatch.green-deep{background:linear-gradient(160deg, #1c3d35, #0a1815)}
.swatch.terra{background:linear-gradient(160deg, #FE5000 0%, #c9420a 70%, #6b2406 100%)}
.swatch.linen-warm{background:
  repeating-linear-gradient(90deg, #e6d6b5 0 1px, #dbcaa6 1px 3px),
  repeating-linear-gradient(0deg, rgba(80,70,50,.15) 0 1px, transparent 1px 3px);
  background-color:#dbcaa6}

/* ─── Materials gallery ──────────────────────────────────────────── */
.materials{position:relative}
.materials .head{display:flex;align-items:end;justify-content:space-between;
  gap:40px;margin-bottom:48px;flex-wrap:wrap}
.materials .head .lede{max-width:36em}
.materials-row{display:flex;gap:14px;overflow:hidden;
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
  padding-left:var(--gutter);padding-right:var(--gutter)}
.material-card{flex:0 0 280px;display:flex;flex-direction:column;gap:14px}
.material-card .swatch-box{aspect-ratio:1;position:relative;overflow:hidden}
.material-card .swatch-box .swatch{position:absolute;inset:0}
.material-card .meta{display:flex;justify-content:space-between;
  align-items:baseline;padding:0 2px}
.material-card .meta .name{font-family:var(--display);font-size:24px;
  line-height:1.05;letter-spacing:-.005em}
.material-card .meta .code{font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:var(--taupe)}
.material-card .desc{font-size:var(--small-body-size);line-height:var(--small-body-leading);color:color-mix(in srgb, currentColor 70%, transparent);
  padding:0 2px}

.materials-track{display:flex;gap:14px;width:max-content;
  animation:marquee 60s linear infinite}
.materials .marquee{overflow:hidden;
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.materials .marquee:hover .materials-track{animation-play-state:paused}

/* ─── Process ────────────────────────────────────────────────────── */
.process .head{margin-bottom:60px;display:grid;grid-template-columns:1fr 1fr;
  gap:40px;align-items:end}
@media (max-width:880px){.process .head{grid-template-columns:1fr}}
.process .head .lede{justify-self:end;max-width:30em}
@media (max-width:880px){.process .head .lede{justify-self:start}}

.steps{display:grid;grid-template-columns:repeat(5, 1fr);gap:0;
  border-top:1px solid rgba(239,229,210,.22)}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:580px){.steps{grid-template-columns:1fr}}
.step{padding:32px 24px 56px;border-right:1px solid rgba(239,229,210,.22);
  position:relative;min-height:280px;display:flex;flex-direction:column;gap:14px;
  transition:background .5s}
.step:last-child{border-right:0}
.step:hover{background:rgba(239,229,210,.04)}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#a89f87;display:flex;align-items:center;gap:10px}
.step .n .dot{width:6px;height:6px;border-radius:999px;background:var(--orange)}
.step h3{font-family:var(--display);font-size:24px;line-height:1.05;
  letter-spacing:-.005em;font-weight:400;margin-top:16px}
.step p{font-size:var(--small-body-size);line-height:var(--small-body-leading);color:#c9bf9f;max-width:24em;
  margin-top:auto}

/* ─── Interlude claim ────────────────────────────────────────────── */
.interlude-claim{text-align:center}
.interlude-claim .claim-stack{font-family:var(--display);font-weight:400;
  font-size:clamp(34px, 5vw, 72px);line-height:1.05;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--orange);font-feature-settings:"ss01" on;
  display:flex;flex-direction:column;align-items:center;gap:0}
.interlude-claim .claim-stack .split-line{display:block}
.interlude-claim .claim-logo{display:block;width:min(140px, 40%);
  aspect-ratio:595.28 / 157.53;margin:clamp(28px, 4vh, 48px) auto 0;
  background:var(--cream);
  -webkit-mask:url("img/Pichler_Logo.svg") center / contain no-repeat;
  mask:url("img/Pichler_Logo.svg") center / contain no-repeat}

/* ─── Poetic interludes ──────────────────────────────────────────── */
.interlude{padding:clamp(80px, 13vh, 160px) 0;text-align:center}
.interlude.dark{background:var(--green-deep);color:var(--cream)}
.interlude.cream{background:var(--white);color:var(--green-deep)}
.interlude.cream .quote{color:var(--orange)}
.interlude .quote{font-family:var(--display);font-style:normal;
  font-size:clamp(34px, 5vw, 72px);line-height:1.05;letter-spacing:-.015em;
  font-weight:400;max-width:18em;margin:0 auto}
.interlude .quote .em{color:var(--orange);font-style:normal}
.interlude .attribution{font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-top:24px}
.interlude.dark .attribution{color:#a89f87}

/* ─── Why ────────────────────────────────────────────────────────── */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 6vw, 100px);
  align-items:start}
@media (max-width:880px){.why{grid-template-columns:1fr}}
.why .left{position:sticky;top:120px}
.why .points{display:flex;flex-direction:column;gap:10px}
.why .point{border-top:1px solid rgba(239,229,210,.2);
  padding:24px 0;display:block}
.why .point:last-child{border-bottom:1px solid rgba(239,229,210,.2)}
.why .point h3{font-family:var(--body);font-size:clamp(28px, 3vw, 44px);line-height:1.15;
  letter-spacing:0;font-weight:400;margin-bottom:8px}
.why .point p{font-size:var(--small-body-size);line-height:var(--small-body-leading);color:#c9bf9f;max-width:28em}

/* ─── Contact ─────────────────────────────────────────────────────── */
.contact{padding-bottom:clamp(60px, 9vh, 110px);background:var(--white)}
.contact .head h2{color:var(--orange)}
.contact .head{margin-bottom:clamp(48px, 7vh, 88px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px, 5vw, 80px);align-items:start}
.contact .head h2{margin-bottom:32px;max-width:14em}
@media (max-width:880px){.contact .head{grid-template-columns:1fr}}

.contact-people{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:580px){.contact-people{grid-template-columns:1fr}}
.person-card{position:relative;display:block;aspect-ratio:3/4;
  background:var(--green-deep);color:var(--cream);overflow:hidden;
  border-radius:2px;transition:transform .8s var(--ease-out);text-decoration:none}
.person-card:hover{transform:translateY(-4px)}
.person-card .swatch{position:absolute;inset:0;transition:transform 1.2s var(--ease-out);
  background-size:cover;background-position:center top}
.person-card:hover .swatch{transform:scale(1.04)}
.person-card .swatch::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, rgba(0,0,0,.75) 100%)}
.person-card .body{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  z-index:2;display:flex;flex-direction:column;gap:4px}
.person-card .body .name{font-family:var(--display);font-size:28px;line-height:1.05;
  letter-spacing:-.005em}
.person-card .body .phone{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--cream);opacity:.9}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;align-items:start}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-grid h3{font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.35;
  text-transform:uppercase;letter-spacing:.16em;color:var(--taupe);
  margin-bottom:14px}
.contact-grid .big{font-family:var(--body);font-size:30px;
  line-height:1.1;letter-spacing:0;font-weight:400}
.contact-grid .line{font-size:var(--body-size);line-height:var(--body-leading)}
.contact-grid .line a:hover{color:var(--orange)}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:48px;align-items:center}

.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 24px;
  border-radius:999px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;font-weight:400;
  background:var(--green-deep);color:var(--cream);
  transition:transform .35s var(--ease-out), background .35s,
    color .35s, padding .35s var(--ease-out)}
.btn:hover{background:var(--orange);color:var(--cream);transform:translateY(-2px);
  padding-right:34px}
.btn .arrow{width:24px;height:8px;position:relative;
  transition:transform .4s var(--ease-out)}
.btn .arrow::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:currentColor}
.btn .arrow::after{content:"";position:absolute;right:0;top:50%;
  width:8px;height:8px;border-top:1px solid currentColor;
  border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn:hover .arrow{transform:translateX(6px)}
.btn.ghost{background:transparent;color:inherit;
  border:.5px solid color-mix(in srgb, currentColor 35%, transparent)}
.btn.ghost:hover{background:transparent;border-color:var(--orange);color:var(--orange)}
.btn.large{padding:22px 32px;font-size:11px}
.btn.large:hover{padding-right:42px}

/* ─── Footer ──────────────────────────────────────────────────────── */
footer{background:var(--black);color:var(--cream);padding:80px var(--gutter) 32px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:64px;border-bottom:1px solid rgba(239,229,210,.15)}
@media (max-width:880px){footer .top{grid-template-columns:1fr 1fr;gap:48px 24px}}
footer .brand{color:var(--cream)}
footer .brand .icon-mark{display:block;width:108px;aspect-ratio:421 / 386;
  background:currentColor;
  -webkit-mask:url("img/Pichler_Icon.svg") center / contain no-repeat;
  mask:url("img/Pichler_Icon.svg") center / contain no-repeat}
footer h3{font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.35;text-transform:uppercase;
  letter-spacing:.16em;color:#a89f87;margin-bottom:18px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;
  font-size:var(--small-body-size);line-height:var(--small-body-leading)}
footer ul a:hover{color:var(--orange)}
footer .bottom{display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#a89f87;flex-wrap:wrap;gap:14px}

/* ─── Hero variant: typographic only (no cinemagraph) ─────────────── */
.hero[data-variant="type"] .cinemagraph{opacity:.3}
.hero[data-variant="type"] h1{font-size:clamp(72px, 14vw, 220px)}

/* ─── Detail page hero ───────────────────────────────────────────── */
.detail-hero{min-height:88vh;position:relative;background:#0a1815;
  color:var(--cream);display:flex;align-items:flex-end;overflow:hidden}
.detail-hero .scene-bg{position:absolute;inset:0;
  background-image:var(--detail-hero-image, url("img/hero2.jpg"));background-size:cover;background-position:center}
.detail-hero .scene-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,15,12,.4) 0%, rgba(10,15,12,.2) 40%, rgba(10,15,12,.9) 100%)}
.detail-hero .placeholder{position:absolute;inset:0;overflow:hidden}
.detail-hero .content{position:relative;z-index:2;width:100%;
  padding:0 var(--gutter) clamp(60px, 9vh, 110px);
  display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:end}
@media (max-width:880px){.detail-hero .content{grid-template-columns:1fr;gap:32px}}
.detail-hero .crumbs{font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:#a89f87;
  margin-bottom:32px;display:flex;gap:10px;align-items:center}
.detail-hero .crumbs .sep{opacity:.5}
.detail-hero h1{font-family:var(--display);font-size:clamp(40px, 5.5vw, 88px);
  line-height:.95;letter-spacing:-.02em;font-weight:400;max-width:14em}
.detail-hero h1 .italic{font-style:normal}
.detail-hero h1 .orange{color:var(--orange);font-style:normal}
.detail-hero .right-block{align-self:end;justify-self:end;max-width:280px}
@media (max-width:880px){.detail-hero .right-block{justify-self:start;max-width:none}}
.detail-hero .right-block p{font-size:var(--body-size);line-height:var(--body-leading);color:#c9bf9f}

/* ─── Detail page body ─────────────────────────────────────────── */
.detail-intro{padding:clamp(80px, 12vh, 140px) 0}
.detail-intro p.opener{font-family:var(--display);font-style:normal;
  font-size:clamp(32px, 4vw, 56px);line-height:1.1;letter-spacing:-.015em;
  max-width:16em;margin-bottom:48px;color:var(--orange)}
.detail-intro p.opener span{color:inherit !important}
.detail-intro .twocol{display:grid;grid-template-columns:1fr 1.4fr;
  gap:clamp(40px, 6vw, 100px);align-items:start}
@media (max-width:880px){.detail-intro .twocol{grid-template-columns:1fr;gap:32px}}
.detail-intro .twocol .sticky{position:sticky;top:120px}
.detail-intro .twocol .right p{font-size:var(--body-size);line-height:var(--body-leading);
  color:color-mix(in srgb, currentColor 80%, transparent);max-width:32em}
.detail-intro .twocol .right p + p{margin-top:1.2em}

.feature-row{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px, 3vw, 64px);align-items:stretch;
  margin-top:clamp(60px, 8vh, 100px)}
@media (max-width:880px){.feature-row{grid-template-columns:1fr}}
.feature-row .image{aspect-ratio:4/5;position:relative;overflow:hidden;
  background:#2a3a32;background-size:cover;background-position:center}
.feature-row .text{display:flex;flex-direction:column;justify-content:center;
  gap:20px;padding:20px 0}
.feature-row .text h3{font-family:var(--display);font-size:clamp(28px, 3.4vw, 48px);
  line-height:1.05;letter-spacing:-.01em;font-weight:400;max-width:14em}
.feature-row .text p{font-size:var(--body-size);line-height:var(--body-leading);max-width:30em}

.suited-for{padding:clamp(80px, 12vh, 140px) 0}
.suited-for .head{display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:end;margin-bottom:48px}
@media (max-width:880px){.suited-for .head{grid-template-columns:1fr;gap:24px}}
.suited-for .head p{justify-self:end;max-width:28em}
@media (max-width:880px){.suited-for .head p{justify-self:start}}
.suited-list{display:grid;grid-template-columns:repeat(5, 1fr);gap:0;
  border-top:1px solid rgba(239,229,210,.22)}
@media (max-width:880px){.suited-list{grid-template-columns:repeat(2, 1fr)}}
.suited-item{padding:32px 24px 48px;border-right:1px solid rgba(239,229,210,.22);
  display:flex;flex-direction:column;gap:14px;min-height:200px}
.suited-item:last-child{border-right:0}
.suited-item .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:#a89f87}
.suited-item h3{font-family:var(--display);font-size:28px;line-height:1.05;
  font-weight:400;letter-spacing:-.005em}
.suited-item p{font-size:var(--small-body-size);line-height:var(--small-body-leading);color:#c9bf9f;margin-top:auto}

/* ─── Legal pages ────────────────────────────────────────────────── */
.legal-hero{padding:clamp(120px, 18vh, 190px) 0 clamp(70px, 10vh, 120px)}
.legal-hero .crumbs{font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:#a89f87;
  margin-bottom:32px;display:flex;gap:10px;align-items:center}
.legal-hero .crumbs .sep{opacity:.5}
.legal-hero h1{font-family:var(--display);font-size:clamp(58px, 9vw, 128px);
  line-height:.9;letter-spacing:-.02em;font-weight:400}
.legal-page{padding:clamp(80px, 12vh, 140px) 0}
.legal-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px, 7vw, 120px);
  align-items:start}
@media (max-width:880px){.legal-grid{grid-template-columns:1fr}}
.legal-grid > div:first-child{position:sticky;top:120px}
@media (max-width:880px){.legal-grid > div:first-child{position:static}}
.legal-content{display:flex;flex-direction:column;gap:30px}
.legal-content h3{font-family:var(--display);font-size:clamp(26px, 2.6vw, 40px);
  line-height:1.05;letter-spacing:-.01em;font-weight:400}
.legal-content p{font-size:var(--body-size);line-height:var(--body-leading);
  color:color-mix(in srgb, var(--green-deep) 78%, transparent);max-width:42em}
.legal-content a{color:var(--green-deep);border-bottom:1px solid color-mix(in srgb, var(--green-deep) 25%, transparent)}
.legal-content a:hover{color:var(--orange);border-color:var(--orange)}

/* ─── Typography specimen page ───────────────────────────────────── */
.type-page{padding:clamp(80px, 12vh, 140px) 0}
.type-page-head{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px, 6vw, 96px);align-items:end;margin-bottom:clamp(56px, 8vh, 96px)}
.type-page-head .eyebrow{margin-bottom:18px}
.type-page-head p{font-size:var(--body-size);line-height:var(--body-leading);
  color:color-mix(in srgb, var(--green-deep) 75%, transparent);max-width:34em}
@media (max-width:880px){.type-page-head{grid-template-columns:1fr}}

.type-family{padding:0}
.type-family + .type-family{margin-top:clamp(56px, 8vh, 96px)}
.type-family-head{display:flex;justify-content:space-between;gap:24px;
  align-items:end;border-bottom:1px solid color-mix(in srgb, var(--green-deep) 22%, transparent);
  padding-bottom:18px;margin-bottom:10px}
.type-family-head h3{font-family:var(--display);font-size:clamp(32px, 4vw, 56px);
  line-height:1;letter-spacing:-.015em;font-weight:400}
.type-family-head span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe)}

.type-spec-list{display:flex;flex-direction:column}
.type-spec-row{display:grid;grid-template-columns:minmax(260px, .75fr) minmax(0, 1.25fr);
  gap:clamp(24px, 4vw, 72px);align-items:center;
  border-bottom:1px solid color-mix(in srgb, var(--green-deep) 14%, transparent);
  padding:28px 0}
.type-spec-meta h4{font-family:var(--body);font-size:var(--body-size);
  line-height:var(--body-leading);font-weight:400;margin-bottom:14px}
.type-spec-meta dl{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px}
.type-spec-meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:2px}
.type-spec-meta dd{font-size:var(--small-body-size);line-height:var(--small-body-leading);
  color:color-mix(in srgb, var(--green-deep) 72%, transparent)}
.type-spec-sample{color:var(--green-deep);overflow-wrap:anywhere}
@media (max-width:880px){
  .type-spec-row{grid-template-columns:1fr;gap:20px}
  .type-spec-meta dl{grid-template-columns:1fr}
}