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

/* --- 01 Hero — automatic Ken Burns slider (time-based, rAF-independent) -- */
/* main.js adds `.hero--slider` and rotates `.is-active` on layer+scene pairs.
   Fallback (no JS / reduced-motion) is a static single-screen hero. */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* stable viewport unit — no resize jumps as mobile browser chrome hides */
  color: var(--color-cream);
  isolation: isolate;
  --hero-head: clamp(2.5rem, 1.7rem + 2.8vw, 3.5rem);
}

.hero__sticky {
  position: relative;
  height: 100%;
  overflow: hidden;
}

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

/* Slider mode: slow zoom rides on a transform transition so deactivation
   eases back instead of snapping while the layer is still fading out */
.hero--slider .hero__layer {
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.4s var(--ease-in-out), transform 9s linear;
}
.hero--slider .hero__layer.is-active { opacity: 1; transform: scale(1.1); }
/* Second slide plays the opposite move — it settles (zoom out) instead of pushing in */
.hero--slider .hero__interior { transform: scale(1.1); }
.hero--slider .hero__interior.is-active { transform: scale(1); }

.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--slider) .hero__scene--2 { display: none; }

/* Scene crossfade — incoming text waits until the outgoing one is mostly gone */
.hero--slider .hero__scene {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  pointer-events: none;
}
.hero--slider .hero__scene.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}
/* Big lines rise inside their masks, staggered */
.hero__line { overflow: hidden; }
.hero--slider .hero__line-in { transform: translateY(115%); transition: transform 0.9s var(--ease-out); }
.hero--slider .hero__scene.is-active .hero__line-in { transform: none; }
.hero--slider .hero__scene.is-active .hero__line:nth-child(1) .hero__line-in { transition-delay: 0.55s; }
.hero--slider .hero__scene.is-active .hero__line:nth-child(2) .hero__line-in { transition-delay: 0.7s; }

.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__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.01em; 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); }

/* Featured point — gentle emphasis (expandability is the brand promise) */
.point--featured {
  position: relative;
  flex-wrap: wrap; /* badge drops to its own full-width row (under icon too) */
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20);
  margin: calc(-1 * var(--space-16)) 0;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(90deg, rgba(154, 116, 77, 0.09), rgba(154, 116, 77, 0.02) 78%, transparent);
}
/* Text block keeps its place beside the icon; only the badge wraps */
.point--featured > div { flex: 1 1 0; min-width: 0; }
.point__badge {
  display: block;
  flex-basis: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #7c5430;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(154, 116, 77, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

/* 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; }

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

/* Delicate hairline closing the panel at the section's bottom edge */
#modely { position: relative; }
#modely::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-warm) 18%, var(--line-warm) 82%, transparent);
}

@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.
   ========================================================================== */
/* Drafting-paper background — a faint blueprint grid sets the section apart
   from the panel section above and the plain paper below */
.section--process {
  position: relative;
  background:
    radial-gradient(90% 70% at 50% 28%, rgba(154, 116, 77, 0.07), transparent 70%),
    #f2ebe1;
  overflow: hidden;
}
.section--process::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(154, 116, 77, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 116, 77, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 40%, #000 32%, transparent 80%);
          mask-image: radial-gradient(130% 95% at 50% 40%, #000 32%, transparent 80%);
}
.section--process > .container { position: relative; }
.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 (5 cols → centres at 10% / 90%) */
.process__track {
  position: absolute; top: calc(var(--node) / 2 - 1.5px); left: 10%; right: 10%;
  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: 10%;
  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: 90%; opacity: 1; }

.process__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-24); 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.65s; }
.process.is-running .pstep:nth-child(3) .pstep__node, .process.is-running .pstep:nth-child(3) .pstep__num { transition-delay: 1.3s; }
.process.is-running .pstep:nth-child(4) .pstep__node, .process.is-running .pstep:nth-child(4) .pstep__num { transition-delay: 1.95s; }
.process.is-running .pstep:nth-child(5) .pstep__node, .process.is-running .pstep:nth-child(5) .pstep__num { transition-delay: 2.6s; }

/* Celebration when the fill reaches the final node (~end of --dur) */
.pstep:nth-child(5) .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(5) .pstep__node::after { animation: nodePing 1.2s var(--ease-out) 2.6s 2; }
.process.is-running .pstep:nth-child(5) .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.01em; 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(5) .pstep__node,
  .process.is-running .pstep:nth-child(5) .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; }
}

/* ==========================================================================
   06 Smart home (2-column, mirrors .thermal language)
   ========================================================================== */
.smart { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; }

.smart-card { padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); border-radius: var(--radius-panel); }
.smart-card__row { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-16) 0; }
.smart-card__row + .smart-card__row { border-top: 1px solid var(--line-warm); }
.smart-card__row > i {
  flex: none; width: 44px; height: 44px; 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); font-size: 17px;
}
.smart-card__row h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.smart-card__row p { margin-top: var(--space-8); font-size: 0.82rem; font-weight: 600; line-height: 1.5; color: var(--muted); }

@media (max-width: 980px) { .smart { grid-template-columns: 1fr; gap: var(--space-40); } }

/* ==========================================================================
   07 Partners — three premium panels
   ========================================================================== */
/* Long two-line headline needs more room than the 56ch section-head default */
.partners__head { max-width: none; }
.partners__head p { max-width: 56ch; }

.partners__grid {
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.2vw, 1.75rem);
}
.partner {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--radius-panel);
  display: flex; flex-direction: column;
}
.partner__badge {
  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); font-size: 18px;
  margin-bottom: var(--space-24);
}
.partner__field { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.partner h3 { margin-top: var(--space-8); font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink); }
.partner p { margin-top: var(--space-12); font-size: 0.84rem; font-weight: 600; line-height: 1.55; color: var(--muted); }
/* Partner logo — a quiet watermark in the card background (no extra height) */
.partner { position: relative; overflow: hidden; }
.partner > :not(.partner__logo) { position: relative; z-index: 1; }
.partner__logo {
  position: absolute; top: var(--space-20); left: 50%; transform: translateX(-50%);
  width: 46%; height: auto;
  opacity: 0.05; filter: grayscale(1);
  pointer-events: none; user-select: none;
  transition: opacity 0.45s var(--ease-out);
}
.partner:hover .partner__logo { opacity: 0.1; }

@media (max-width: 920px) { .partners__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   08 About us — expandable section (client infographic content)
   ========================================================================== */
.about { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; }

.about-card { padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); border-radius: var(--radius-panel); }
.about-card__row { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-16) 0; }
.about-card__row + .about-card__row { border-top: 1px solid var(--line-warm); }
.about-card__row > i {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--accent);
  box-shadow: var(--bevel); font-size: 17px;
}
.about-card__row h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.about-card__row p { margin-top: var(--space-8); font-size: 0.82rem; font-weight: 600; line-height: 1.5; color: var(--muted); }

.about__toggle { margin-top: var(--space-40); }
.about__toggle.is-open .about__chev { transform: rotate(180deg); }
.about__chev { transition: transform 0.4s var(--ease-out); }

/* Collapsible body — height driven by main.js, CSS only animates it */
.about-more { height: 0; overflow: hidden; transition: height 0.7s var(--ease-out); }
html.no-js .about-more { height: auto; }
html.no-js .about__toggle { display: none; }
.about-more__inner { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.about-more__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.about-grid + .about-more__title { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); }
/* Tiles: flat editorial cards (border, corner number, accent line drawing on
   hover) — no big drop shadows, so the collapsible wrapper can't clip them */
.about-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
/* Hover indicator — inset from the rounded corners, pill ends, draws from left */
.about-tile::after {
  content: ""; position: absolute; top: 0;
  left: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  right: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent), #c79a6a);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.about-tile:hover { transform: translateY(-3px); border-color: var(--border); }
.about-tile:hover::after { transform: scaleX(1); }
.about-tile__num {
  position: absolute; top: var(--space-12); right: var(--space-16);
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1;
  color: var(--taupe); opacity: 0.55;
}
.about-tile h4 { margin-top: var(--space-16); font-family: var(--sans); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.about-tile p { margin-top: var(--space-8); font-size: 0.82rem; font-weight: 600; line-height: 1.5; color: var(--muted); }
/* Bottom-anchored footnote with icon (mirrors the chart note) */
.about-tile__note {
  margin-top: auto !important;
  padding-top: var(--space-16);
  border-top: 1px solid var(--line-warm);
  display: flex; align-items: flex-start; gap: var(--space-8);
  font-size: 0.78rem !important;
}
.about-tile__note i { flex: none; margin-top: 2px; color: var(--accent); }
.about-tile p + .about-tile__note { margin-top: var(--space-16); }

/* Mini bar chart — pure CSS, bars grow when the tile reveals (.is-in) */
.about-chart h4 { margin-top: 0; }
.about-chart__bars {
  margin-top: var(--space-20);
  display: flex; align-items: flex-end; gap: var(--space-8);
  height: 128px;
}
.about-chart__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.about-chart__bar i {
  display: block; height: calc(var(--h) - 18px);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #c79a6a, #9a744d);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.9s var(--ease-out);
}
.about-chart.is-in .about-chart__bar i { transform: scaleY(1); }
.about-chart.is-in .about-chart__bar:nth-child(2) i { transition-delay: 0.1s; }
.about-chart.is-in .about-chart__bar:nth-child(3) i { transition-delay: 0.2s; }
.about-chart.is-in .about-chart__bar:nth-child(4) i { transition-delay: 0.3s; }
.about-chart.is-in .about-chart__bar:nth-child(5) i { transition-delay: 0.4s; }
.about-chart.is-in .about-chart__bar:nth-child(6) i { transition-delay: 0.5s; }
.about-chart__bar span {
  margin-top: var(--space-8);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--muted); text-align: center;
  font-variant-numeric: tabular-nums;
}
.about-chart__note {
  margin-top: var(--space-16);
  display: flex; align-items: flex-start; gap: var(--space-8);
  font-size: 0.78rem; font-weight: 600; line-height: 1.5; color: var(--muted);
}
.about-chart__note i { flex: none; margin-top: 2px; color: var(--accent); }

.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); }
.about-value { display: flex; align-items: flex-start; gap: var(--space-12); }
.about-value h4 { font-family: var(--sans); font-size: 0.92rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.about-value p { margin-top: var(--space-8); font-size: 0.8rem; font-weight: 600; line-height: 1.5; color: var(--muted); }

.about__quote { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); text-align: center; }
.about__quote p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.25; letter-spacing: -0.01em; color: var(--ink);
}
.about__quote p::before { content: "\201C\00A0"; color: var(--accent); }
.about__quote p::after { content: "\00A0\201D"; color: var(--accent); }
.about__quote cite {
  display: block; margin-top: var(--space-12);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
  color: var(--accent);
}

@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; gap: var(--space-40); }
  /* main.js moves the toggle below the trust card here — the grid gap is enough */
  .about > .about__toggle { margin-top: 0; justify-self: stretch; }
  .about-grid, .about-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .about-grid, .about-values { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage loader — paper 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, var(--paper), #ece5da);
  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(23, 20, 17, 0.12);
  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(23, 20, 17, 0.55);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .loader__logo { animation: none; }
  .loader { transition: opacity 0.2s; }
}