/* ════════════════════════════════════════════════════════════════════
   KLEE Resources — Contact / Disciplined Luxury Architectural Editorial
   ────────────────────────────────────────────────────────────────────
   Fifth propagation of the frozen Home visual system
   (KLEE-VISUAL-SYSTEM-V1), following Projects, About and Services.

   SAME BRAND   Near-black architectural canvas (#0D1110/#101413/#141917),
                warm ivory type (#F0EEE7/#D9D6CE), one restrained brass
                accent (#C0A878/#9a875f). Playfair Display for a few
                modest editorial moments; tracked uppercase Inter for
                metadata, captions and labels. Hairlines for structure.
   DIFFERENT JOB Home = brand, Projects = proof, About = trust,
                Services = scope. Contact = take action: one clear,
                calm invitation to reach KLEE directly on WhatsApp.
                No cards, no forms, no lead funnel, no map.
   CONTENT      Every meaningful element defaults to visible. No opacity
   VISIBILITY   gating, no clip-path reveal, no lazy animation state.
                JS only drives the mobile menu and the fixed header.
   RHYTHM      quiet intro → PRIMARY CONTACT (one clear action) →
                quiet details → quiet site measurement → quiet close.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. tokens
   ───────────────────────────────────────────── */
:root {
  /* canvas */
  --bg:        #0D1110;
  --bg-2:      #101413;
  --bg-3:      #141917;

  /* type */
  --ivory:     #F0EEE7;
  --ivory-2:   #D9D6CE;
  --mute:      rgba(240, 238, 231, 0.76);
  --mute-2:    rgba(240, 238, 231, 0.52);

  /* lines */
  --line:      rgba(240, 238, 231, 0.14);
  --line-2:    rgba(240, 238, 231, 0.30);

  /* accent */
  --brass:     #C0A878;
  --brass-2:   #9a875f;

  /* type stacks */
  --serif: 'Playfair Display', 'Iowan Old Style', 'Baskerville', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --gutter: clamp(24px, 4.5vw, 88px);
  --col-gap: clamp(24px, 3.4vw, 56px);
  --nav-h: 78px;
  --container: 1440px;
  --section-pad: clamp(88px, 12vh, 160px);
}

/* ─────────────────────────────────────────────
   2. reset / base
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--sans);
  color: var(--ivory);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
::selection { background: var(--brass); color: var(--bg); }

/* skip link */
.skip {
  position: fixed; top: 0; left: var(--gutter); z-index: 300;
  padding: 13px 20px;
  background: var(--bg-3); color: var(--ivory);
  border: 1px solid var(--line-2);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  transform: translateY(-130%); transition: transform 0.22s ease;
}
.skip:focus { transform: translateY(16px); }

/* ─────────────────────────────────────────────
   3. layout primitives
   ───────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: var(--section-pad) 0; }

/* ─────────────────────────────────────────────
   4. type primitives
   ───────────────────────────────────────────── */
.label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ivory);
}

.lede {
  font-size: clamp(1.0rem, 1.2vw, 1.12rem);
  line-height: 1.72; color: var(--mute); max-width: 52ch;
}

.meta {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mute);
}

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

/* ─────────────────────────────────────────────
   5. header / nav  (identical to Home / Projects / About / Services)
   ───────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  color: var(--ivory);
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(13, 17, 16, 0.82);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom-color: var(--line);
}

.brand { display: inline-flex; align-items: baseline; gap: 9px; line-height: 1; flex: 0 0 auto; }
.brand__name {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.3rem; letter-spacing: 0.2em; color: var(--ivory);
}
.brand__sub { font-size: 0.6rem; letter-spacing: 0.42em; font-weight: 600; color: var(--mute); }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute); transition: color 0.25s ease;
}
.nav__links a:hover { color: var(--ivory); }
.nav__links a[aria-current="page"] { color: var(--ivory); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 9px;
  height: 1px; background: var(--brass);
}

.nav__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory); flex: 0 0 auto; transition: color 0.25s ease;
}
.nav__cta .arrow { color: var(--brass); transition: transform 0.3s ease; }
.nav__cta:hover .arrow { transform: translateX(4px); }

.nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0 12px; background: none; border: 0; color: inherit;
}
.nav__toggle-bar { display: block; width: 100%; height: 1px; background: currentColor; transition: transform 0.3s ease; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ─────────────────────────────────────────────
   6. mobile full-screen menu  (identical to Home / Projects / About / Services)
   ───────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 48px;
  background: var(--bg); color: var(--ivory);
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.menu.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.32s ease;
}
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex; align-items: baseline; gap: 16px; min-height: 56px; padding: 14px 0;
  font-family: var(--serif); font-size: clamp(1.7rem, 8vw, 2.6rem); font-weight: 400;
  letter-spacing: -0.01em; color: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.menu__links a[aria-current="page"] { color: var(--brass); }
.menu__links a:last-child { border-bottom: 0; }
.menu__links a .idx { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.24em; color: var(--mute); }
.menu__foot { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.menu__reg { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--mute); }

/* minimal editorial button + quiet text link */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  border: 1px solid var(--line-2); color: var(--ivory);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn:hover { border-color: var(--brass); color: var(--brass); }

.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory); min-height: 40px;
}
.link .arrow { color: var(--brass); transition: transform 0.3s ease; }
.link:hover .arrow { transform: translateX(4px); }

/* ─────────────────────────────────────────────
   7. intro — quiet, no masthead, no hero
   ───────────────────────────────────────────── */
.intro {
  padding-top: calc(var(--nav-h) + clamp(72px, 11vh, 128px));
  padding-bottom: clamp(72px, 10vh, 120px);
  border-bottom: 1px solid var(--line);
}
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 7vw, 140px);
  align-items: start;
}
.intro__labels { display: flex; flex-direction: column; gap: 14px; }
.intro__label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ivory);
}
.intro__sub {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--mute);
}
.intro__right { display: flex; flex-direction: column; gap: 26px; }
.intro__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ivory); max-width: 22ch;
}
.intro__title em { font-style: italic; color: var(--ivory-2); }

/* ─────────────────────────────────────────────
   8. primary contact — the one clear action
   One large editorial serif text link, no button, no box, no pill.
   ───────────────────────────────────────────── */
.primary {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.primary__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 7vw, 140px);
  align-items: start;
}
.primary__label { padding-top: 8px; }
.primary__right { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

.primary__link {
  display: inline-flex; align-items: baseline; gap: 16px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.02; letter-spacing: -0.015em;
  color: var(--ivory);
  transition: color 0.3s ease;
}
.primary__link:hover { color: var(--brass); }
.primary__arrow {
  font-family: var(--sans); font-weight: 400;
  font-size: 0.42em; line-height: 1;
  color: var(--brass);
  transition: transform 0.3s ease;
}
.primary__link:hover .primary__arrow { transform: translateX(8px); }

.primary__phone {
  font-size: 0.94rem; letter-spacing: 0.05em; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────
   9. contact details — reachability first, factual only
   ───────────────────────────────────────────── */
.details { border-bottom: 1px solid var(--line); }
.details__head { margin-bottom: clamp(44px, 6.5vh, 80px); }

.facts { border-top: 1px solid var(--line); }
.facts__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.facts__row dt {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute); flex: 0 0 auto;
}
.facts__row dd {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ivory); text-align: right; letter-spacing: 0;
}
.facts__row dd small { font-family: var(--sans); font-size: 0.78rem; color: var(--mute); letter-spacing: 0.02em; }

/* ─────────────────────────────────────────────
   10. site measurement — the next step, simply
   ───────────────────────────────────────────── */
.measure { border-bottom: 1px solid var(--line); }
.measure__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 7vw, 140px);
  align-items: start;
}
.measure__left { display: flex; flex-direction: column; gap: 18px; }
.measure__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ivory); max-width: 16ch;
}

.measure__right { display: flex; flex-direction: column; gap: 34px; }

/* ─────────────────────────────────────────────
   11. close — quiet final invitation
   ───────────────────────────────────────────── */
.close__inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr);
  gap: clamp(40px, 6vw, 120px); align-items: end;
}
.close__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--ivory); max-width: 18ch;
}
.close__title em { font-style: italic; color: var(--ivory-2); }
.close__right { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; padding-bottom: 6px; }

/* ─────────────────────────────────────────────
   12. footer — quiet ending  (identical to Home / Projects / About / Services)
   ───────────────────────────────────────────── */
.footer { background: var(--bg-3); border-top: 1px solid var(--line); }
.footer__inner {
  padding: clamp(48px, 7vh, 80px) var(--gutter) clamp(28px, 4vh, 40px);
}
.footer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap;
}
.footer__wordmark {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.35rem; letter-spacing: 0.18em; color: var(--ivory); line-height: 1;
}
.footer__wordmark span {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.4em; color: var(--mute);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer__nav a { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--mute); transition: color 0.2s ease; }
.footer__nav a:hover { color: var(--ivory); }
.footer__wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory);
}
.footer__wa .arrow { color: var(--brass); transition: transform 0.3s ease; }
.footer__wa:hover .arrow { transform: translateX(4px); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap;
  margin-top: clamp(40px, 6vh, 64px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--mute);
}

/* ─────────────────────────────────────────────
   13. responsive
   ───────────────────────────────────────────── */
/* tablet + mobile — single column */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }

  .intro__grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .intro__title { max-width: 20ch; }

  .primary__grid { grid-template-columns: 1fr; gap: 34px; }
  .primary__label { padding-top: 0; }

  .measure__grid { grid-template-columns: 1fr; gap: 34px; }

  .close__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  :root { --section-pad: clamp(72px, 18vh, 108px); }

  .intro { padding-top: calc(var(--nav-h) + clamp(56px, 12vh, 88px)); }
  .intro__title { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }

  .primary__link { font-size: clamp(1.8rem, 8vw, 2.6rem); }

  .facts__row { flex-direction: column; gap: 8px; }
  .facts__row dd { text-align: left; }

  .measure__title { font-size: clamp(1.5rem, 7vw, 2rem); }

  .close__title { font-size: clamp(1.4rem, 6.6vw, 1.9rem); }
  .footer__top { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ─────────────────────────────────────────────
   14. reduced motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}