/* Duri Developments — v1 brochure
   One stylesheet for all three pages. No build step. */

:root {
  --ink: #14140f;
  --body: #55554d;
  --muted: #86867c;
  --line: #e3e2da;
  --paper: #ffffff;
  --paper-2: #f7f6f1;
  --black: #000000;
  --accent: #c8501f;
  --wrap: 1080px;
  --header-h: 56px;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Editorial serif for the hero headline. System faces only - no webfont to
     download, so the first screen paints immediately and works offline. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, Cambria, "Times New Roman", serif;
  /* Slightly warmer than pure black so the globe's glow has something to sit
     in rather than clipping straight to nothing. */
  --stage: #050507;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
a { color: var(--accent); }
a:hover { color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 24px;
}

.section { padding-block: clamp(56px, 9vw, 104px); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink); max-width: 62ch; }
.measure { max-width: 68ch; }

/* ---------- header / nav (black bar, matches the hero) ---------- */

.site-header {
  background: var(--stage);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.nav__brand {
  color: #fff;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  padding: 7px 11px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.92rem;
  padding-block: 6px;
}

.nav__links a:hover { color: #fff; }
.nav__links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -1px 0 var(--accent); }

@media (max-width: 720px) {
  .nav { flex-wrap: wrap; }
  .nav__toggle { display: block; }
  .nav__links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 10px;
  }
  .nav__links:not(.is-open) { display: none; }
  .nav__links li { width: 100%; }
  .nav__links a {
    display: block;
    width: 100%;
    padding: 11px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
}

/* ---------- hero (home only) ---------- */

/* The hero is a stage: a full-bleed canvas with the type sitting on top of it.
   The header above is the same black, so together they read as one 100vh
   screen. Everything below the fold is unchanged and stays light. */

.hero {
  position: relative;
  background: var(--stage);
  color: #fff;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* the globe is draggable, so do not let a drag scroll the page instead */
  touch-action: none;
  cursor: grab;
}

.hero__canvas:active { cursor: grabbing; }

/* Darkens the left of the frame so the headline stays readable where it
   crosses the globe, and keeps the edges from feeling like a flat void. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(4,4,6,0.94) 0%,
      rgba(4,4,6,0.82) 26%,
      rgba(4,4,6,0.35) 48%,
      rgba(4,4,6,0) 66%),
    radial-gradient(140% 120% at 50% 50%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: 40px;
  pointer-events: none;   /* let drags reach the canvas underneath */
}

.hero__inner a { pointer-events: auto; }

.hero__headline {
  font-family: var(--serif);
  color: #fff;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-weight: 400;
  max-width: 15ch;
  margin: 0 0 22px;
  text-wrap: balance;
}

.hero__sub {
  color: rgba(255,255,255,0.58);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 36ch;
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.42);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Desktop: type holds the lower-left, globe sits mid-right. */
@media (min-width: 861px) {
  .hero { align-items: end; }
  .hero__inner { padding-bottom: clamp(90px, 16vh, 170px); }
  .hero__scroll {
    left: auto;
    right: 32px;
    transform: none;
  }
}

/* Phone: globe centred in the upper half, type beneath it. */
@media (max-width: 860px) {
  .hero { align-items: end; }
  .hero__inner { padding-bottom: clamp(72px, 13vh, 120px); }
  .hero__headline { max-width: 12ch; }
}

.hero__scroll:hover { color: #fff; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid var(--ink);
  cursor: pointer;
}

.btn:hover { background: #000; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- grids / cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-top: 40px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px;
}

.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 13px 0; border-top: 1px solid var(--line); }
.facts li:first-child { border-top: 0; }
.facts strong { color: var(--ink); display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }

.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 32px; } }

.eyebrow--gap { margin-top: 38px; }
.label-optional { color: var(--muted); font-weight: 400; }

.note {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 18px;
  color: var(--ink);
  margin-block: 26px;
}

.note > p { margin: 0; }

/* ---------- contact form ---------- */

.form { margin-top: 32px; max-width: 620px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.9rem; color: var(--ink); font-weight: 500; margin-bottom: 6px; }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}

.field input:focus,
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field textarea { min-height: 150px; resize: vertical; }

.form__hint { font-size: 0.88rem; color: var(--muted); margin-top: 14px; }
.form__status { font-size: 0.92rem; color: var(--ink); margin-top: 14px; min-height: 1.4em; }
.form__status.is-error { color: var(--accent); font-weight: 500; }
.form .btn[disabled] { opacity: 0.55; cursor: wait; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--stage);
  color: rgba(255,255,255,0.6);
  padding-block: 46px;
  font-size: 0.9rem;
}

.site-footer a { color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: 7px; }

.footer__bottom {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.45);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}