/* ============================================================
   ARKON DEVELOPMENTS — Design System
   Palette: highland dusk navy + brand gold, drawn from the logo
   and the "Coming Soon" teaser art.
   Type: Fraunces (display) / Inter (body) / Jost (utility, eyebrows)
   Signature: topographic contour-line "elevation" motif — a literal
   read of "Najd" (highland / elevated plateau) and the "Higher
   Horizons" line.
   ============================================================ */

:root{
  /* Color */
  --navy-950:#070c13;
  --navy-900:#0c1520;
  --navy-800:#111d2c;
  --navy-700:#182838;
  --line-gold:rgba(197,160,89,.22);
  --line-soft:rgba(233,228,214,.10);
  --gold:#c5a059;
  --gold-bright:#e3c583;
  --gold-dim:#8d7442;
  --sand:#d9cbae;
  --ivory:#f3efe6;
  --muted:#93a0b3;
  --muted-dark:#5c6879;
  --ink:#0b1420;

  /* Type */
  --f-display:'Fraunces', ui-serif, Georgia, serif;
  --f-body:'Inter', -apple-system, Segoe UI, sans-serif;
  --f-utility:'Jost', -apple-system, Segoe UI, sans-serif;

  /* Rhythm */
  --edge: clamp(1.5rem, 5vw, 4.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--ivory);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:500; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

.container{
  max-width:1280px;
  margin-inline:auto;
  padding-inline:var(--edge);
}

.eyebrow{
  font-family:var(--f-utility);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold);
  display:inline-block;
}

.italic{ font-style:italic; color:var(--gold-bright); font-weight:400; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--f-utility);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:.95em 1.7em;
  border:1px solid var(--gold);
  color:var(--ivory);
  background:transparent;
  cursor:pointer;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn svg{ width:14px; height:14px; transition:transform .35s ease; }
.btn:hover{ background:var(--gold); color:var(--ink); }
.btn:hover svg{ transform:translateX(3px); }
.btn.solid{ background:var(--gold); color:var(--ink); }
.btn.solid:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn.ghost{ border-color:var(--line-soft); color:var(--sand); }
.btn.ghost:hover{ border-color:var(--gold); background:transparent; color:var(--gold-bright); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.35rem var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(7,12,19,.85), transparent);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(7,12,19,.92);
  backdrop-filter:blur(10px);
  padding:.9rem var(--edge);
  border-bottom-color:var(--line-gold);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:26px; width:auto; }

.main-nav ul{ display:flex; align-items:center; gap:2.4rem; }
.main-nav a{
  font-family:var(--f-utility);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sand);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color:var(--gold-bright); }
.nav-cta{ display:flex; align-items:center; gap:1.8rem; }

.nav-toggle{
  display:none; background:none; border:0; color:var(--ivory);
  width:32px; height:22px; position:relative; cursor:pointer; z-index:110;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor; transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span{ top:50%; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span::after{ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:fixed; inset:0; background:var(--navy-950);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .main-nav.open{ opacity:1; pointer-events:auto; }
  .main-nav ul{ flex-direction:column; gap:2.2rem; text-align:center; }
  .main-nav a{ font-size:1.1rem; }
  .nav-cta .btn:not(.mobile-only){ display:none; }
}
@media (min-width:901px){ .mobile-only{ display:none; } }

/* ---------- Contour / elevation motif (signature element) ---------- */
.contour-divider{ display:block; width:100%; height:auto; }
.contour-divider path{
  fill:none; stroke:var(--gold); stroke-width:1; opacity:.55;
}
.contour-line{
  stroke-dasharray:2000; stroke-dashoffset:2000;
  animation:draw 2.6s cubic-bezier(.25,.7,.35,1) forwards;
}
.contour-line:nth-child(2){ animation-delay:.15s; opacity:.4; }
.contour-line:nth-child(3){ animation-delay:.3s; opacity:.25; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.watermark-contour{
  position:absolute; inset:auto 0 0 0; width:100%; opacity:.5; pointer-events:none;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--navy-950);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(7,12,19,.98) 0%, rgba(7,12,19,.55) 42%, rgba(7,12,19,.35) 65%, rgba(7,12,19,.75) 100%);
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  padding:0 var(--edge) clamp(4rem,9vw,7rem);
}
.hero .eyebrow{ margin-bottom:1.4rem; }
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  line-height:1.04;
  color:var(--ivory);
  max-width:16ch;
}
.hero-sub{
  margin-top:1.6rem; max-width:46ch; color:var(--sand);
  font-size:1.05rem;
}
.hero-actions{ margin-top:2.6rem; display:flex; gap:1.1rem; flex-wrap:wrap; }
.hero-contour{ position:absolute; left:0; right:0; bottom:-2px; z-index:1; }

.hero.hero-sm{ min-height:62vh; }

/* ---------- Section framework ---------- */
section{ position:relative; }
.section{ padding:var(--section-y) 0; }
.section-head{ max-width:56ch; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); margin-top:.9rem; color:var(--ivory); }
.section-head p{ margin-top:1.1rem; color:var(--muted); font-size:1.02rem; }

.rule{ border:0; border-top:1px solid var(--line-gold); margin:0; }

/* ---------- Intro / About strip ---------- */
.intro-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.intro-grid p{ color:var(--sand); font-size:1.08rem; line-height:1.8; }
.intro-grid p + p{ margin-top:1.2rem; }
@media (max-width:800px){ .intro-grid{ grid-template-columns:1fr; } }

.pillar-row{
  margin-top:3.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem;
}
.pillar{ padding-top:1.6rem; border-top:1px solid var(--line-gold); }
.pillar .glyph{ width:30px; height:30px; margin-bottom:1.2rem; }
.pillar h4{ color:var(--ivory); font-size:1.08rem; font-weight:500; }
.pillar p{ color:var(--muted); margin-top:.6rem; font-size:.94rem; }
@media (max-width:750px){ .pillar-row{ grid-template-columns:1fr; gap:2.2rem; } }

/* ---------- Feature / project teaser ---------- */
.feature{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(2rem,5vw,5rem);
}
.feature.reverse{ grid-template-columns:.95fr 1.05fr; }
.feature.reverse .feature-media{ order:2; }
.feature-media{ position:relative; overflow:hidden; }
.feature-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .8s ease; }
.feature-media:hover img{ transform:scale(1.04); }
.feature-tag{
  position:absolute; top:1.1rem; left:1.1rem;
  font-family:var(--f-utility); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(7,12,19,.72); color:var(--gold-bright); border:1px solid var(--line-gold);
  padding:.5em .9em; backdrop-filter:blur(4px);
}
.feature-copy h3{ font-size:clamp(1.7rem,3vw,2.5rem); color:var(--ivory); }
.feature-copy .eyebrow{ margin-bottom:1.1rem; }
.feature-copy p{ color:var(--muted); margin-top:1.2rem; font-size:1.02rem; }
.feature-copy .btn{ margin-top:2.2rem; }
@media (max-width:850px){
  .feature, .feature.reverse{ grid-template-columns:1fr; }
  .feature.reverse .feature-media{ order:0; }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--navy-800); border-top:1px solid var(--line-gold); border-bottom:1px solid var(--line-gold);
  padding:var(--section-y) 0; text-align:center; position:relative; overflow:hidden;
}
.cta-banner h2{ font-size:clamp(1.9rem,4vw,3.1rem); color:var(--ivory); max-width:20ch; margin:0 auto; }
.cta-banner .eyebrow{ justify-content:center; margin-bottom:1.2rem; }
.cta-banner .btn{ margin-top:2.2rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-950); padding-top:var(--section-y); }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem;
}
.footer-brand img{ height:28px; margin-bottom:1.2rem; }
.footer-brand p{ color:var(--muted); max-width:32ch; font-size:.92rem; }
.footer-col h5{
  font-family:var(--f-utility); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem; font-weight:400;
}
.footer-col li{ margin-bottom:.7rem; }
.footer-col a, .footer-col address{ color:var(--sand); font-size:.92rem; font-style:normal; line-height:1.6; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{
  border-top:1px solid var(--line-soft); padding:1.6rem 0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; font-size:.82rem; color:var(--muted-dark);
}
.socials{ display:flex; gap:1.1rem; }
.socials a{
  width:34px; height:34px; border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; color:var(--sand);
  transition:border-color .3s ease, color .3s ease;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold-bright); }
.socials svg{ width:15px; height:15px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Gallery grid ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.gallery-grid figure{ margin:0; overflow:hidden; position:relative; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.gallery-grid figure:hover img{ transform:scale(1.05); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem;
  background:linear-gradient(to top, rgba(7,12,19,.85), transparent);
  font-family:var(--f-utility); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand);
}
@media (max-width:700px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ---------- Definition / editorial block (used on Najd Plaza + About) ---------- */
.editorial{
  display:grid; grid-template-columns:.55fr 1fr; gap:clamp(2rem,6vw,6rem);
}
.editorial .word{
  font-family:var(--f-display); font-style:italic; color:var(--gold-bright);
  font-size:clamp(2.4rem,5vw,4rem); line-height:1;
}
.editorial .word small{
  display:block; font-family:var(--f-utility); font-style:normal; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-size:.7rem; margin-top:1rem;
}
.editorial p{ font-size:1.15rem; line-height:1.85; color:var(--sand); }
.editorial p + p{ margin-top:1.3rem; }
@media (max-width:800px){ .editorial{ grid-template-columns:1fr; } }

/* ---------- Info panel (project facts) ---------- */
.fact-row{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-gold); border-bottom:1px solid var(--line-gold); }
.fact{ padding:1.8rem 1.5rem; border-left:1px solid var(--line-gold); }
.fact:first-child{ border-left:0; }
.fact .eyebrow{ margin-bottom:.7rem; font-size:.65rem; }
.fact .eyebrow::before{ display:none; }
.fact strong{ display:block; font-family:var(--f-display); font-size:1.25rem; color:var(--ivory); font-weight:500; }
@media (max-width:800px){ .fact-row{ grid-template-columns:1fr 1fr; } .fact:nth-child(3){ border-left:0; } }
@media (max-width:480px){ .fact-row{ grid-template-columns:1fr; } .fact{ border-left:0 !important; border-top:1px solid var(--line-gold); } .fact:first-child{ border-top:0; } }

/* ---------- Values list (About page) ---------- */
.value-list{ margin-top:2.5rem; }
.value-item{
  display:grid; grid-template-columns:9ch 1fr; gap:2rem; padding:1.9rem 0; border-top:1px solid var(--line-gold);
  align-items:baseline;
}
.value-list .value-item:last-child{ border-bottom:1px solid var(--line-gold); }
.value-item .num{ font-family:var(--f-utility); color:var(--gold); font-size:.78rem; letter-spacing:.1em; }
.value-item h4{ color:var(--ivory); font-size:1.2rem; font-weight:500; }
.value-item p{ color:var(--muted); margin-top:.5rem; font-size:.95rem; max-width:60ch; }
@media (max-width:600px){ .value-item{ grid-template-columns:1fr; gap:.6rem; } }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-block + .contact-block{ margin-top:2.4rem; padding-top:2.4rem; border-top:1px solid var(--line-gold); }
.contact-block h5{
  font-family:var(--f-utility); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.8rem; font-weight:400;
}
.contact-block a, .contact-block address{ font-style:normal; color:var(--ivory); font-size:1.15rem; font-family:var(--f-display); }
.contact-block a:hover{ color:var(--gold-bright); }
.contact-block p{ color:var(--muted); font-size:.95rem; margin-top:.4rem; }

.field{ margin-bottom:1.5rem; }
.field label{
  display:block; font-family:var(--f-utility); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem;
}
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  color:var(--ivory); font-family:var(--f-body); font-size:1rem; padding:.7em .1em; resize:vertical;
  transition:border-color .3s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ min-height:120px; }
.form-note{ font-size:.82rem; color:var(--muted-dark); margin-top:1.2rem; }
.form-status{ font-size:.85rem; color:var(--gold-bright); margin-top:1rem; min-height:1.2em; }

.map-frame{ border:1px solid var(--line-gold); filter:grayscale(.4) invert(.92) contrast(.9); width:100%; height:340px; }

/* ---------- Page header (non-hero, for interior sections) ---------- */
.page-top-space{ height:82px; }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-lg{ margin-top:var(--section-y); }