/* ============================================================
   K4 Fit-Out — Immersive Dark Luxury
   Built on the K4 brand system (Montserrat) recast for a
   black canvas with white text + a single champagne accent.
   ============================================================ */

:root {
  --fo-black:      #090B10;   /* deepest wall (matches Our Projects --gx-void) */
  --fo-bg:         #0C0F15;   /* page canvas (--gx-wall) */
  --fo-bg-1:       #0A0D12;   /* faint step for alternating sections */
  --fo-bg-2:       #12161E;   /* raised panels (--gx-panel) */
  --fo-line:       rgba(255,255,255,0.10);
  --fo-line-soft:  rgba(255,255,255,0.06);

  --fo-white:      #FFFFFF;
  --fo-fg:         #FFFFFF;
  --fo-fg-2:       #A8B2C2;   /* ink-300 (cool) */
  --fo-fg-3:       #808EA7;   /* fog */
  --fo-fg-4:       rgba(128,142,167,0.55);

  /* accent — cool silver (replaces champagne, matches the museum palette) */
  --fo-gold:       #C9D2E0;
  --fo-gold-soft:  rgba(201,210,224,0.14);
  --fo-gold-line:  rgba(201,210,224,0.45);

  --fo-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fo-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --fo-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --fo-pad-x: 64px;
  --fo-maxw: 1340px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fo-black);
  color: var(--fo-fg);
  font-family: var(--fo-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
}

img { max-width: 100%; display: block; }

::selection { background: var(--fo-gold); color: #000; }

/* ---- type primitives ---- */
.fo-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fo-gold);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.fo-eyebrow.muted { color: var(--fo-fg-3); }
.fo-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--fo-gold-line);
  display: inline-block;
}
.fo-eyebrow.no-rule::before { display: none; }

.fo-display {
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--fo-white);
  text-wrap: balance;
}
.fo-h2 {
  font-weight: 250;
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  color: var(--fo-white);
  text-wrap: balance;
}
.fo-h3 {
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--fo-white);
}
.fo-lead {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--fo-fg-2);
}
.fo-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--fo-fg-2);
}
.fo-emph { color: var(--fo-white); font-weight: 400; }

/* serif-ish elegance: italic Montserrat for accents */
.fo-italic { font-style: italic; font-weight: 300; }

/* ---- layout helpers ---- */
.fo-section { position: relative; padding: clamp(96px, 12vw, 184px) var(--fo-pad-x); }
.fo-inner { max-width: var(--fo-maxw); margin: 0 auto; width: 100%; }
.fo-divide { border-top: 1px solid var(--fo-line); }

/* ---- buttons / links ---- */
.fo-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fo-font);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 17px 32px;
  border: 1px solid var(--fo-white);
  background: var(--fo-white); color: #000;
  cursor: pointer;
  transition: background var(--fo-dur,0.4s) var(--fo-ease), color .4s var(--fo-ease), border-color .4s var(--fo-ease);
  text-decoration: none;
  white-space: nowrap;
}
.fo-btn:hover { background: transparent; color: var(--fo-white); }
.fo-btn--ghost { background: transparent; color: var(--fo-white); border-color: var(--fo-line); }
.fo-btn--ghost:hover { border-color: var(--fo-white); background: transparent; color: var(--fo-white); }

.fo-textlink {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fo-white); text-decoration: none;
  cursor: pointer; background: none; border: none; font-family: var(--fo-font); padding: 0;
}
.fo-textlink .fo-arrow {
  width: 26px; height: 1px; background: var(--fo-gold); position: relative;
  transition: width .4s var(--fo-ease);
}
.fo-textlink:hover .fo-arrow { width: 40px; }
.fo-textlink .fo-arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; border-top: 1px solid var(--fo-gold); border-right: 1px solid var(--fo-gold);
  transform: rotate(45deg);
}

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--fo-ease), transform 1.1s var(--fo-ease); will-change: opacity, transform; }
.reveal.in { opacity: 1 !important; transform: none !important; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* hide scrollbars on horizontal rails */
.fo-noscroll::-webkit-scrollbar { height: 0; width: 0; display: none; }
.fo-noscroll { scrollbar-width: none; -ms-overflow-style: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  :root { --fo-pad-x: 40px; }
}
@media (max-width: 760px) {
  :root { --fo-pad-x: 22px; }
  .fo-section { padding-top: clamp(72px, 16vw, 96px); padding-bottom: clamp(72px, 16vw, 96px); }
}