/* ==========================================================================
   ABUJA LAND GURU — DESIGN SYSTEM
   Brand: Abuja Land Guru (Ekime) — "Before You Buy" buyer protection initiative
   Palette: warm ink black, warm paper white, gold (authority), red (emphasis)
   ========================================================================== */

:root{
  /* ---- Color: 6 named values, documented roles ---- */
  --ink:        #14110D;   /* depth / authority — text, hero backgrounds, footer */
  --ink-70:     rgba(20,17,13,0.7);
  --ink-45:     rgba(20,17,13,0.45);
  --paper:      #FBF9F4;   /* breathing room — primary background */
  --paper-dim:  #F3EFE6;   /* secondary surface, one shade down from paper */
  --gold:       #C9A84C;   /* authority accent — CTAs, rules, highlights */
  --gold-deep:  #8A6D2C;   /* gold for text-on-light / hover states */
  --red:        #CC2200;   /* strategic emphasis — warnings, key moments only */
  --stone:      #DAD3C2;   /* neutral border/rule, derived from ink+paper+gold */

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Scale ---- */
  --step-1: clamp(2.6rem, 2rem + 3vw, 5rem);      /* hero display */
  --step-2: clamp(1.9rem, 1.5rem + 1.8vw, 3.1rem); /* section display */
  --step-3: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); /* sub-head */
  --step-0: 1rem;      /* body */
  --step--1: 0.875rem; /* small / labels */

  /* ---- Spacing / rhythm ----
     Tightened from the original scale — sections were reading as isolated
     blocks with too much dead air between them. This keeps a clear scale
     (still 4 distinct steps from tight to generous) but closes the gap. */
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2.25rem; --space-5: 3.25rem; --space-6: 4.75rem;

  /* ---- Shape / elevation ---- */
  --radius-sm: 3px; --radius-md: 6px;
  --container: 1200px; --measure: 62ch;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms; --dur-med: 420ms; --dur-slow: 700ms;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* safety net: prevents any stray element from creating horizontal scroll */
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--ink); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
h1{ font-size:var(--step-1); line-height:1.05; }
h2{ font-size:var(--step-2); line-height:1.12; }
h3{ font-size:var(--step-3); line-height:1.3; }
p{ margin:0 0 var(--space-2); max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-3); }
@media (min-width:900px){ .container{ padding:0 var(--space-4); } }

/* ---- Visually hidden (a11y) ---- */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---- Focus ---- */
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

/* ---- Buttons: one deliberate system ---- */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  padding:0.85em 1.6em; border-radius:var(--radius-sm); cursor:pointer;
  display:inline-block; border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:#dcbb62; }
.btn-primary:focus-visible{ outline-color:var(--ink); }
.btn-ghost-dark{ background:transparent; color:var(--paper); border-color:var(--ink-45); }
.btn-ghost-dark:hover{ border-color:var(--paper); }
.btn-ghost-light{ background:transparent; color:var(--ink); border-color:var(--stone); }
.btn-ghost-light:hover{ border-color:var(--ink); }
.btn-text{ background:none; border:none; padding:0; font-weight:600; color:var(--gold-deep);
  border-bottom:1px solid var(--gold); transition:color var(--dur-fast) var(--ease); }
.btn-text:hover{ color:var(--ink); border-color:var(--ink); }

/* ---- Nav ---- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2) 0; position:relative; z-index:20; background:var(--paper);
}
.brandmark-link{ display:flex; align-items:center; gap:0.6em; text-decoration:none; }
.brand-logo{ height:44px; width:auto; display:block; flex-shrink:0; }
.brandmark{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; white-space:nowrap; }
.brandmark small{ display:block; font-family:var(--font-body); font-weight:500; font-size:0.65rem;
  letter-spacing:0.04em; color:var(--ink-70); margin-top:1px; white-space:normal; }

@media (max-width:520px){
  .brand-logo{ height:34px; }
  .brandmark{ font-size:1.05rem; }
  .brandmark small{ display:none; } /* tagline moves into the mobile menu context instead of wrapping the header */
}
.nav-links{ display:flex; gap:var(--space-4); font-size:0.92rem; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; position:relative; padding-bottom:3px; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold-deep);
  transition:right var(--dur-fast) var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--gold-deep); }
.nav-right{ display:flex; align-items:center; gap:var(--space-3); }
.nav-toggle{ display:none; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; background:none; border:1px solid var(--stone); border-radius:var(--radius-sm); padding:0.5em 0.8em; }
  /* WhatsApp + Book button move into the mobile menu panel below instead of
     competing for space with the logo and toggle — this is what was causing
     the Book button to be clipped off-screen on narrow phones. */
  .nav-whatsapp, .nav-book{ display:none; }
}
@media (min-width:881px){
  .mobile-menu-actions{ display:none; }
}

.mobile-menu{ background:var(--ink); }
.mobile-menu ul{ list-style:none; margin:0; padding:var(--space-3); display:grid; gap:1.1em; }
.mobile-menu a{ color:var(--paper); text-decoration:none; font-size:1.05rem; }
.mobile-menu[hidden]{ display:none; }
.mobile-menu-actions{ padding:0 var(--space-3) var(--space-3); display:grid; gap:0.7em; border-top:1px solid rgba(255,255,255,0.12); padding-top:var(--space-3); }
.mobile-menu-actions .btn{ text-align:center; }

/* ---- Section rhythm (no repeated horizontal rules between every block) ---- */
.section{ padding:var(--space-6) 0; }
.section-tight{ padding:var(--space-5) 0; }
.on-ink{ background:var(--ink); color:var(--paper); }
.on-ink h1,.on-ink h2,.on-ink h3{ color:var(--paper); }
.on-dim{ background:var(--paper-dim); }

/* ---- Editorial list (replaces repetitive card grids where content isn't a sequence) ---- */
.ed-list{ list-style:none; margin:0; padding:0; }
.ed-list li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--stone);
}
.ed-list li:last-child{ border-bottom:1px solid var(--stone); }
.ed-list h3{ font-size:1.05rem; }
.ed-list p{ color:var(--ink-70); font-size:0.95rem; }

/* ---- Numbered sequence (only for genuine step-by-step content) ---- */
.sequence{ display:grid; gap:var(--space-4); grid-template-columns:repeat(3,1fr); }
.sequence .num{ font-family:var(--font-display); font-size:1.4rem; color:var(--gold-deep); margin-bottom:var(--space-1); }
.sequence h3{ margin-bottom:0.4em; }
.sequence p{ font-size:0.92rem; color:var(--ink-70); }

/* ---- Real photo container: fixed aspect, no stretching/distortion ---- */
/* width:100% + min-width:0 together are required here — without them, an
   aspect-ratio box that's stretched to a tall grid row can compute its
   WIDTH from that height instead of from its column, and overflow past the
   column edge (a real bug caught and fixed during testing). */
.photo{ border-radius:var(--radius-md); overflow:hidden; background:var(--paper-dim); width:100%; min-width:0; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo.tall{ aspect-ratio:3/4; }
.photo.wide{ aspect-ratio:4/3; }
.photo.square{ aspect-ratio:1/1; }
.photo.book{ aspect-ratio:5/7; background:var(--ink); }
.photo.book img{ object-fit:contain; }

/* ---- Full-bleed hero photo (replaces the gradient placeholder version) ---- */
.hero-photo{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation: kenburns 22s ease-in-out infinite alternate;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,0.25) 0%, rgba(20,17,13,0.78) 100%);
}
.hero-photo .hero-content{ position:relative; z-index:2; color:var(--paper); padding:var(--space-5) 0 var(--space-6); width:100%; }
@media (prefers-reduced-motion: reduce){ .hero-photo img{ animation:none; } }

/* ---- Image placeholder: designed intentionally, not a broken box ---- */
.placeholder{
  position:relative; overflow:hidden; border-radius:var(--radius-md);
  background:
    repeating-linear-gradient(135deg, rgba(201,168,76,0.07) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,#1d1a14,var(--ink));
  color:var(--paper); display:flex; align-items:flex-end; padding:var(--space-3);
  min-height:340px; border:1px solid rgba(201,168,76,0.25);
}
.placeholder.light{
  background:
    repeating-linear-gradient(135deg, rgba(20,17,13,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,var(--paper-dim),#eae4d6);
  color:var(--ink); border-color:var(--stone);
}
.placeholder-label{
  font-size:0.8rem; font-weight:600; letter-spacing:0.02em;
  display:inline-flex; align-items:center; gap:0.5em;
  background:var(--paper); color:var(--ink); padding:0.5em 0.9em; border-radius:var(--radius-sm);
}
.placeholder.light .placeholder-label{ background:var(--ink); color:var(--paper); }
.placeholder-label svg{ width:14px; height:14px; }
.placeholder-sub{ font-size:0.72rem; color:#a9a294; margin-top:0.4em; max-width:26ch; }

/* ---- Full-bleed hero media with a slow, deliberate zoom (the one motion moment) ---- */
.hero-media{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media .media-layer{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,17,13,0.35) 0%, rgba(20,17,13,0.75) 100%),
    repeating-linear-gradient(135deg, rgba(201,168,76,0.08) 0 2px, transparent 2px 16px),
    linear-gradient(160deg,#2a2510,var(--ink) 70%);
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.hero-media .hero-content{ position:relative; z-index:2; color:var(--paper); padding:var(--space-5) 0 var(--space-6); width:100%; }
@media (prefers-reduced-motion: reduce){ .hero-media .media-layer{ animation:none; } }

/* ---- Forms ---- */
.field{ margin-bottom:var(--space-3); }
.field label{ display:block; font-size:0.85rem; color:var(--ink-70); margin-bottom:0.4em; }
.field input, .field textarea{
  width:100%; padding:0.8em 0.9em; border:1px solid var(--stone); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:1rem; background:var(--paper); color:var(--ink);
}
.field input:focus, .field textarea:focus{ border-color:var(--gold-deep); }

/* ---- Inline action form (order/booking), injected on click ---- */
.inline-form{ border:1px solid var(--stone); border-radius:var(--radius-md); padding:var(--space-3); margin-top:var(--space-2); background:var(--paper); }

/* ---- Footer ---- */
.site-footer{ background:var(--ink); color:var(--ink-70,#bcb6a8); padding:var(--space-5) 0 var(--space-3); }
.site-footer a{ text-decoration:none; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-4); }
.footer-grid h4{ color:var(--paper); font-family:var(--font-body); font-size:0.85rem; font-weight:600; margin-bottom:var(--space-2); }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.6em; font-size:0.9rem; }
.footer-grid a{ color:#cfc9ba; }
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:var(--space-3);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em; font-size:0.8rem; }

@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .sequence{ grid-template-columns:1fr; }
  .ed-list li{ grid-template-columns:1fr; gap:0.5em; }
}

/* Every section on the site was composed with inline grid-template-columns
   for its specific asymmetric layout (text+image splits, 2-up and 3-up
   groups), rather than shared classes — so a single rule here collapses
   ALL of them to one column on phones, rather than patching each section
   individually. This was tested and confirmed necessary: several sections
   (the 3-step process, image+text pairs) did not collapse without it and
   read as cramped on narrow screens. */
@media (max-width:640px){
  [style*="display:grid"]{ grid-template-columns:1fr !important; }
}

/* ---- Motion: one orchestrated entrance only; respects reduced motion ---- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.hero-enter > *{ opacity:0; animation:riseIn var(--dur-slow) var(--ease) forwards; }
.hero-enter > *:nth-child(1){ animation-delay:60ms; }
.hero-enter > *:nth-child(2){ animation-delay:160ms; }
.hero-enter > *:nth-child(3){ animation-delay:260ms; }
.hero-enter > *:nth-child(4){ animation-delay:360ms; }

/* Progressive enhancement: [data-reveal] elements are visible by default.
   The opacity:0 starting state only applies once html.js is present, which
   is set synchronously in <head> — so if JavaScript fails to load for any
   reason, every element stays visible rather than being permanently
   hidden. This is a safety net, not decoration. */
[data-reveal]{ opacity:1; }
.js [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.js [data-reveal].is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-enter > *{ animation:none !important; opacity:1 !important; transform:none !important; }
  *{ transition-duration:0.001ms !important; }
}