/* ==========================================================================
   MODOM — Home page sections (ATELIER design language)
   Cinematic hero (kept) + rebuilt editorial sections with premium panels.
   ========================================================================== */

/* --- 01 Hero — cinematic scroll sequence --------------------------------- */
/* Tall height + sticky pin only when JS activates `.hero--cinematic`.
   Fallback (no JS / reduced-motion) is a normal single-screen hero. */
.hero {
  position: relative;
  height: 100svh;
  height: 100dvh; /* dynamic viewport: fills the area as mobile browser chrome shows/hides */
  color: var(--color-cream);
  isolation: isolate;
  --hero-head: clamp(2.5rem, 1.7rem + 2.8vw, 3.5rem);
}
.hero--cinematic { height: 480vh; }

.hero__sticky {
  position: relative;
  top: 0;
  height: 100svh;
  height: 100dvh; /* keeps the pinned screen full-height when the toolbar retracts (no white gap) */
  overflow: hidden;
}
.hero--cinematic .hero__sticky { position: sticky; }

.hero__layer { position: absolute; inset: 0; will-change: transform, opacity; }
.hero__layer img { width: 100%; height: 100%; object-fit: cover; }
.hero__interior { opacity: 0; }

.hero__overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.62) 0%, rgba(10,8,6,0.28) 45%, rgba(10,8,6,0) 78%),
    linear-gradient(0deg, rgba(10,8,6,0.5) 0%, rgba(10,8,6,0) 38%);
}

.hero__scene {
  position: absolute;
  left: var(--edge-x); bottom: 12vh;
  z-index: 3;
  max-width: none;
  will-change: transform, opacity;
}
.hero:not(.hero--cinematic) .hero__scene--2 { display: none; }

.hero__eyebrow {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #e8c489;
  margin-bottom: 1.1rem;
  padding-left: 0.4em;
  text-shadow: 0 1px 3px rgba(8, 9, 5, 0.85), 0 0 14px rgba(8, 9, 5, 0.6);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 3rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-shadow: 0 2px 36px rgba(0,0,0,0.4);
}

.hero__big { display: flex; flex-direction: column; }
.hero__line {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 3rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.hero__line-in { display: block; }

.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-8);
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(247,240,236,0.65);
}
.hero__cue-line { width: 1px; height: 44px; background: linear-gradient(var(--accent-soft), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero__cue-line { animation: scrollPulse 2.4s var(--ease-in-out) infinite; transform-origin: top; }
}
@keyframes scrollPulse { 0%,100% { transform: scaleY(0.35); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 768px) {
  .hero--cinematic { height: 360vh; }
  .hero__scene { left: var(--edge-x); right: var(--edge-x); bottom: 11vh; max-width: none; }
  .hero__cue { display: none; }
  /* Smaller hero headlines on mobile */
  .hero__title, .hero__line { font-size: 2.4rem; }
}

/* ==========================================================================
   Shared editorial primitives (.headline/.section-copy/.mcard/.fc-*/.layer-*
   moved to components.css — shared with subpages)
   ========================================================================== */
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-accent { color: var(--accent); }

/* Floating panels share a soft entrance offset on desktop */
.panel-pad { padding: var(--space-32); }

/* ==========================================================================
   02 Why MODOM (Philosophy archetype)
   ========================================================================== */
.why { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); align-items: center; }
.why__body { padding-block: clamp(1rem, 0.5rem + 2vw, 3rem); }

.quote {
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3rem);
  max-width: 520px;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border-radius: var(--radius-panel);
}
.quote__row { display: flex; gap: var(--space-20); }
.quote__mark { font-family: var(--serif); font-weight: 400; font-size: 4.6rem; line-height: 0.6; color: var(--accent); }
.quote__text { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.85rem); line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); }
.quote__by { margin-top: var(--space-20); font-size: 0.86rem; font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--accent); }

.points { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem); display: flex; flex-wrap: wrap; gap: var(--space-24); }
.point { display: flex; gap: var(--space-12); flex: 1 1 200px; max-width: 260px; }
.point--more { align-items: center; }
/* Direct child only — keeps nested .btn__icon (CTA arrow) untouched */
.point > svg { width: 34px; height: 34px; flex: none; color: var(--accent); margin-top: 2px; }
.point h3 { font-family: var(--sans); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.point p { margin-top: var(--space-8); font-size: 0.8rem; font-weight: 600; line-height: 1.48; color: var(--muted); }

/* Right visual: image + ticker; min-width:0 lets the grid column shrink
   below the ticker's intrinsic (nowrap) width */
.why__visual { position: relative; min-width: 0; }
.stack-img {
  position: relative; z-index: 1;
  width: 86%; margin-left: auto;
  aspect-ratio: 3 / 3.4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 38px 92px rgba(49, 37, 28, 0.22);
}
.stack-img img { width: 100%; height: 100%; object-fit: cover; }
.stack-slab {
  position: absolute; right: 8%; top: -4%; z-index: 0;
  width: 56%; aspect-ratio: 4/3; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.62), transparent 30%),
    linear-gradient(135deg, #e1d4c4, #b99d82 46%, #eadfce);
  box-shadow: 0 28px 74px rgba(62, 48, 37, 0.16);
}

/* Benefits ticker under the visual — light paper variant of the o-projekte one;
   matches the image width (stack-img is 86%, right-aligned) */
.why__ticker {
  width: 86%;
  margin-left: auto;
  margin-top: var(--space-32);
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.why__ticker-track {
  display: inline-flex; align-items: center; gap: var(--space-32);
  padding: 0.85rem var(--space-32);
  white-space: nowrap;
  animation: why-ticker 46s linear infinite;
}
.why__ticker-track span {
  font-size: 0.72rem; font-weight: var(--weight-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.why__ticker-track i { font-size: 7px; color: var(--taupe); }
@keyframes why-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .why__ticker-track { animation: none; } }

@media (max-width: 980px) {
  .why { grid-template-columns: 1fr; gap: var(--space-48); }
  .why__visual { min-height: 0; display: grid; gap: var(--space-20); }
  .stack-img { width: 100%; margin: 0; aspect-ratio: 16/11; }
  .stack-slab { display: none; }
  .why__ticker { width: 100%; margin-top: 0; }
}

/* ==========================================================================
   03 Models (Style Library archetype)
   ========================================================================== */
.models { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; }
.models__cards { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(1rem, 0.5rem + 1vw, 1.5rem); }
.models__col { display: flex; flex-direction: column; gap: clamp(1rem, 0.5rem + 1vw, 1.5rem); }

/* .mcard component lives in components.css */
.materials-card { margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); max-width: 380px; padding: clamp(1.5rem, 1rem + 1.4vw, 2rem); border-radius: var(--radius-panel); }
.materials-card h3 { font-family: var(--sans); font-size: 0.92rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.materials-card__dots { margin-top: var(--space-24); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
.materials-card__dots .material-dot { width: 42px; height: 42px; border-radius: 50%; }
/* Tiny screens: smaller dots keep all five on one row (fixes 320px overflow) */
@media (max-width: 360px) {
  .materials-card__dots { gap: var(--space-8); }
  .materials-card__dots .material-dot { width: 34px; height: 34px; }
}
.materials-card p { margin-top: var(--space-24); font-size: 0.8rem; font-weight: 600; line-height: 1.55; color: var(--muted); max-width: 20rem; }

@media (max-width: 980px) {
  .models { grid-template-columns: 1fr; gap: var(--space-40); }
}
@media (max-width: 560px) {
  .models__cards { grid-template-columns: 1fr; }
  /* Mobile: every section CTA spans its box */
  main .btn { width: 100%; }
  .point--more { flex-basis: 100%; max-width: none; }
}

/* ==========================================================================
   04 Thermal comfort (2-column + layer panel)
   ========================================================================== */
.thermal { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; }
/* .layer-card component lives in components.css */
@media (max-width: 980px) { .thermal { grid-template-columns: 1fr; gap: var(--space-40); } }

/* ==========================================================================
   05 How it works — auto-plays once when scrolled into view (.is-running)
   Pure CSS transitions (compositor-driven, rAF-independent). 1.8s timeline.
   ========================================================================== */
.process {
  position: relative;
  margin-top: clamp(3rem, 2rem + 2vw, 4.5rem);
  --node: 66px;
  --dur: 2.6s;            /* total fill duration (slower, calmer) */
}

/* Track between node centres (4 cols → centres at 12.5% / 87.5%) */
.process__track {
  position: absolute; top: calc(var(--node) / 2 - 1.5px); left: 12.5%; right: 12.5%;
  height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; z-index: 0;
}
.process__fill {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--taupe), var(--accent));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) linear;
}
.process.is-running .process__fill { transform: scaleX(1); }

.process__dot {
  position: absolute; top: calc(var(--node) / 2); left: 12.5%;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper);
  box-shadow: 0 0 0 3px rgba(154, 116, 77, 0.22), 0 4px 12px rgba(46, 35, 27, 0.22);
  transform: translate(-50%, -50%);
  opacity: 0; z-index: 1;          /* below nodes so it tucks behind the final one */
  transition: left var(--dur) linear, top var(--dur) linear, opacity 0.4s var(--ease-out);
}
.process.is-running .process__dot { left: 87.5%; opacity: 1; }

.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); position: relative; }
.pstep { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pstep__node {
  width: var(--node); height: var(--node); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  /* Pending: same design language as .crow__badge */
  background: var(--panel);
  border: 1px solid var(--border);
  position: relative; z-index: 2; margin-bottom: var(--space-24);
  box-shadow: var(--bevel);
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
}
.pstep__num {
  font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1;
  color: var(--accent);           /* pending: bronze accent, like the badge icons */
  transition: color 0.45s var(--ease-out);
}
/* Reached node — stays a light badge (like crow__badge); only a subtle bronze accent */
.process.is-running .pstep__node {
  border-color: var(--accent);
  box-shadow: var(--bevel), 0 8px 22px rgba(154, 116, 77, 0.22);
}
.process.is-running .pstep__num { color: #7c5430; }
.process.is-running .pstep:nth-child(1) .pstep__node, .process.is-running .pstep:nth-child(1) .pstep__num { transition-delay: 0s; }
.process.is-running .pstep:nth-child(2) .pstep__node, .process.is-running .pstep:nth-child(2) .pstep__num { transition-delay: 0.87s; }
.process.is-running .pstep:nth-child(3) .pstep__node, .process.is-running .pstep:nth-child(3) .pstep__num { transition-delay: 1.73s; }
.process.is-running .pstep:nth-child(4) .pstep__node, .process.is-running .pstep:nth-child(4) .pstep__num { transition-delay: 2.6s; }

/* Celebration when the fill reaches the final node (~end of --dur) */
.pstep:nth-child(4) .pstep__node::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; pointer-events: none;
}
.process.is-running .pstep:nth-child(4) .pstep__node::after { animation: nodePing 1.2s var(--ease-out) 2.6s 2; }
.process.is-running .pstep:nth-child(4) .pstep__node { animation: nodePop 0.75s var(--ease-out) 2.6s both; }
@keyframes nodePing { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes nodePop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

.pstep__body h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.04em; color: var(--ink); }
.pstep__body p { margin-top: var(--space-12); font-size: 0.9rem; font-weight: 600; line-height: 1.5; color: var(--muted); max-width: 24ch; margin-inline: auto; }

.process__cta { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); text-align: center; }

@media (max-width: 820px) {
  .process { --node: 56px; }
  /* Vertical track ends at the last node centre (top/height set by JS: --track-top/--track-h) */
  .process__track { top: var(--track-top, 0); bottom: auto; left: calc(var(--node) / 2 - 1.5px); right: auto; width: 3px; height: var(--track-h, 100%); }
  .process__fill { transform: scaleY(0); transform-origin: top center; }
  .process.is-running .process__fill { transform: scaleY(1); }
  .process__dot { top: var(--dot-start, 0); left: calc(var(--node) / 2); }
  .process.is-running .process__dot { top: var(--dot-end, 100%); left: calc(var(--node) / 2); }
  .process__steps { grid-template-columns: 1fr; gap: var(--space-40); }
  .pstep { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-24); }
  .pstep__node { margin-bottom: 0; flex: none; }
  .pstep__body p { margin-inline: 0; max-width: 46ch; }
}

@media (prefers-reduced-motion: reduce) {
  .process__fill, .process__dot, .pstep__node, .pstep__num { transition: none; }
  .process.is-running .pstep:nth-child(4) .pstep__node,
  .process.is-running .pstep:nth-child(4) .pstep__node::after { animation: none; }
}

/* ==========================================================================
   06 Contact (redesigned — watermark + GSAP cascade)
   ========================================================================== */
.contact-section { position: relative; overflow: hidden; }

/* City skyline art — fills up (reveals bottom→top) on scroll-in via clip-path.
   Placed bottom-left (empty area, not behind the form panel). */
.contact-art {
  position: absolute; left: 0; bottom: 0; z-index: 0;
  width: clamp(230px, 30vw, 380px); height: auto;
  opacity: 0.3;
  pointer-events: none; user-select: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.9s var(--ease-out);
}
.contact-art.is-drawn { clip-path: inset(0 0 0 0); }
@media (max-width: 920px) {
  .contact-art { width: clamp(180px, 46vw, 300px); opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-art { clip-path: inset(0 0 0 0); transition: none; }
}

.contact2 {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: start;
}

.contact2__intro { padding-top: var(--space-8); }
/* Typography comes from .headline — same as other section headlines */
.contact2__title { margin: var(--space-24) 0 var(--space-24); }
.cline { display: block; }
.contact2__lead { color: var(--text-soft); font-size: var(--fs-lead); line-height: 1.72; max-width: 34rem; }

.contact2__details { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); display: flex; flex-direction: column; }
.crow { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) 0; }
.crow + .crow { border-top: 1px solid var(--line-warm); }
.crow__badge {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); color: var(--accent);
  box-shadow: var(--bevel);
}
.crow__badge svg { width: 20px; height: 20px; }
.crow__badge i { font-size: 19px; line-height: 1; }
.crow__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.crow__value { margin-top: 2px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.crow__value a:hover { color: var(--accent); }

.contact2__form { padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border-radius: var(--radius-panel); }
/* Privacy note as a soft badge with a shield icon */
.contact2__note {
  margin-top: var(--space-40);
  display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-small); line-height: 1.6; color: var(--muted);
}
.contact2__note .fa-shield-halved { flex: none; margin-top: 0.15rem; color: var(--accent); font-size: 0.95rem; }

@media (max-width: 920px) {
  .contact2 { grid-template-columns: 1fr; gap: var(--space-40); }
  /* Skip the decorative skyline SVG on mobile */
  .contact-art { display: none; }
}

/* --- Contact reveal cascade (IntersectionObserver-driven; rAF-independent) */
/* Headline lines + contact rows stagger via transition-delay */
.js .contact2__title [data-c-line]:nth-child(2) { transition-delay: 0.14s; }
.js .contact2__details [data-c-row]:nth-child(2) { transition-delay: 0.08s; }
.js .contact2__details [data-c-row]:nth-child(3) { transition-delay: 0.16s; }
.js .contact2__details [data-c-row]:nth-child(4) { transition-delay: 0.24s; }

/* Form panel fades (no shift); inner fields cascade when the form gets .is-in */
.js .contact2__form[data-reveal] { transform: none; transition: opacity 0.6s var(--ease-out); }
.js .contact2__form .form-grid > .field {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.contact2__form.is-in .form-grid > .field { opacity: 1; transform: none; }
.contact2__form.is-in .form-grid > .field:nth-child(1) { transition-delay: 0.06s; }
.contact2__form.is-in .form-grid > .field:nth-child(2) { transition-delay: 0.12s; }
.contact2__form.is-in .form-grid > .field:nth-child(3) { transition-delay: 0.18s; }
.contact2__form.is-in .form-grid > .field:nth-child(4) { transition-delay: 0.24s; }
.contact2__form.is-in .form-grid > .field:nth-child(5) { transition-delay: 0.30s; }
.contact2__form.is-in .form-grid > .field:nth-child(6) { transition-delay: 0.36s; }
.contact2__form.is-in .form-grid > .field:nth-child(8) { transition-delay: 0.42s; }
/* Submit button: fade in only (transform stays free for the :hover lift);
   keep the full .btn hover transitions so hover behaves 1:1 with a plain .btn */
.js .contact2__form > .btn {
  opacity: 0;
  transition: opacity 0.55s var(--ease-out) 0.5s,
              background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.contact2__form.is-in > .btn { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .contact2__form .form-grid > .field,
  .js .contact2__form > .btn { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   Homepage loader — ink overlay with brand + progress, removed by main.js
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #1d1813, #15110d);
  transition: opacity 0.7s var(--ease-out), visibility 0s linear 0.7s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* Without JS nothing would ever hide it — never show it there */
html.no-js .loader { display: none; }

.loader__inner { display: flex; flex-direction: column; align-items: center; }
.loader__logo {
  width: clamp(96px, 80px + 4vw, 130px);
  height: auto;
  animation: loader-breathe 2.2s ease-in-out infinite;
}
@keyframes loader-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
.loader__bar {
  margin-top: var(--space-32);
  width: min(300px, 62vw);
  height: 2px;
  border-radius: 999px;
  background: rgba(245, 240, 233, 0.14);
  overflow: hidden;
}
.loader__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #9a744d, #c79a6a);
  border-radius: inherit;
  transition: width 0.35s var(--ease-out);
}
.loader__pct {
  margin-top: var(--space-16);
  font-size: 0.72rem; font-weight: var(--weight-bold);
  letter-spacing: 0.24em;
  color: rgba(245, 240, 233, 0.55);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .loader__logo { animation: none; }
  .loader { transition: opacity 0.2s; }
}