/* ===================================================================
   Rashleela Enterprises — Design System
   Single stylesheet: tokens, reset, base type, layout, components,
   header/nav/footer, forms, utilities, responsive.
   =================================================================== */

/* ===== Design tokens ===== */
:root {
  --color-charcoal: #1c1f22;
  --color-earth:    #6b4e2e;   /* mining */
  --color-solar:    #d99a2b;   /* solar accent */
  --color-plantation:#3f6b3a;  /* plantation accent */
  --color-accent:   #c1621f;   /* primary CTA (industrial ochre) */
  --color-accent-dk:#a4501a;
  --color-bg:       #f7f5f1;   /* warm off-white */
  --color-surface:  #ffffff;
  --color-text:     #23262a;
  --color-muted:    #5c6169;
  --color-line:     #e3ded6;
  --font-head: "Georgia", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem;
  --maxw: 1160px;
  --radius: 6px;
  --shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* ===== Reset / base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;font-weight:700;color:var(--color-charcoal)}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h3{font-size:1.25rem}
p{max-width:65ch}
ul{list-style-position:inside}

/* ===== Layout ===== */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-3)}
.section{padding-block:var(--space-6)}
.section--tight{padding-block:var(--space-4)}
.section--alt{background:var(--color-surface);border-block:1px solid var(--color-line)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;color:var(--color-accent);margin-bottom:.5rem}
.lead{font-size:1.15rem;color:var(--color-muted);margin-top:var(--space-2)}
.grid{display:grid;gap:var(--space-3)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.stack > * + *{margin-top:var(--space-2)}
.center{text-align:center}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}

/* ===== Components ===== */
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:var(--radius);font-weight:700;border:2px solid transparent;transition:.15s;cursor:pointer;font-size:1rem}
.btn--primary{background:var(--color-accent);color:#fff}
.btn--primary:hover{background:var(--color-accent-dk)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn + .btn{margin-left:.75rem}

.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-3)}
.card h3{margin-bottom:.5rem}
.card .more{display:inline-block;margin-top:var(--space-2);color:var(--color-accent);font-weight:700}

.stat{font-family:var(--font-head);font-size:clamp(2rem,4vw,3rem);color:var(--color-accent);font-weight:700;line-height:1}
.stat-label{font-size:.9rem;color:var(--color-muted);margin-top:.35rem}

.logo-strip{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:center}
.logo-tile{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:1rem 1.4rem;font-weight:700;color:var(--color-muted);min-width:150px;text-align:center}

/* Hero (home) — ensure headline is legible on the dark background */
.hero h1{color:#fff}

/* Real photos in content slots (replace .map-placeholder) */
.photo{width:100%;height:100%;min-height:240px;object-fit:cover;border-radius:var(--radius);display:block}
.card .photo{min-height:170px;margin-bottom:var(--space-2)}

/* Banner with a photo backdrop (interior hero) */
.banner--photo{background-size:cover;background-position:center;position:relative}
.banner--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,22,25,.72),rgba(20,22,25,.72))}
.banner--photo .container{position:relative;z-index:1}

/* Page banner (interior pages) */
.banner{background:var(--color-charcoal);color:#fff;padding-block:var(--space-5)}
.banner .eyebrow{color:#e0b877}
.banner h1{color:#fff}
.banner p{color:#d7d4cf}

/* Milestones */
.milestones{list-style:none}
.milestones li{display:flex;gap:var(--space-2);padding:.6rem 0;border-bottom:1px solid var(--color-line)}
.milestones b{font-family:var(--font-head);color:var(--color-accent);min-width:64px}

/* vertical accents */
.v-mining{--v:var(--color-earth)} .v-solar{--v:var(--color-solar)} .v-plantation{--v:var(--color-plantation)}
.card--vertical{border-top:4px solid var(--v,var(--color-accent))}

/* Stats band on dark */
.band{background:var(--color-earth);color:#fff}
.band .stat{color:#fff}
.band .stat-label{color:#e8ddcf}

/* ===== Header / nav ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-charcoal);color:#fff}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.brand{display:flex;flex-direction:column;padding-block:.7rem}
.brand b{font-family:var(--font-head);font-size:1.25rem;letter-spacing:.02em}
.brand span{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#c9a26b}
.site-nav ul{list-style:none;display:flex;gap:var(--space-3);align-items:center}
.site-nav a{padding:.4rem 0;font-weight:600;font-size:.95rem;color:#e8e6e2}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--color-accent)}
.has-dropdown{position:relative}
.has-dropdown>.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:230px;border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem}
.has-dropdown>.dropdown a{display:block;color:var(--color-text);padding:.55rem .8rem;border-radius:4px}
.has-dropdown>.dropdown a:hover{background:var(--color-bg)}
.has-dropdown.open>.dropdown,.has-dropdown:hover>.dropdown{display:block}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1}
.nav-cta{background:var(--color-accent);color:#fff !important;padding:.5rem 1rem;border-radius:var(--radius)}
.nav-cta:hover{background:var(--color-accent-dk)}

/* ===== Footer ===== */
.site-footer{background:#15171a;color:#c7ccd2;padding-block:var(--space-5) var(--space-3);font-size:.9rem}
.site-footer a{color:#c7ccd2}
.site-footer a:hover{color:#fff}
.site-footer b{color:#fff;display:block;margin-bottom:.5rem;font-family:var(--font-head)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-4)}
.footer-legal{border-top:1px solid #2a2d31;margin-top:var(--space-3);padding-top:var(--space-3);color:#8a9099;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between}

/* ===== Forms ===== */
.form-grid{display:grid;gap:var(--space-2);max-width:560px}
form label{display:block;font-weight:600;font-size:.92rem}
form input,form select,form textarea{width:100%;margin-top:.35rem;padding:.7rem .8rem;border:1px solid var(--color-line);border-radius:var(--radius);font:inherit;background:var(--color-surface)}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.map-placeholder{background:var(--color-line);border-radius:var(--radius);min-height:220px;display:flex;align-items:center;justify-content:center;color:var(--color-muted);margin-top:var(--space-2)}

/* Prose (legal pages) */
.prose{max-width:75ch}
.prose h2{margin-top:var(--space-4)}
.prose h3{margin-top:var(--space-3)}
.prose p,.prose li{color:var(--color-text)}
.prose ul{margin-left:var(--space-2)}

/* ===== Responsive ===== */
@media(max-width:980px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .contact-cols{grid-template-columns:1fr}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-charcoal);padding:var(--space-2)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:.4rem;width:100%}
  .has-dropdown{width:100%}
  .has-dropdown>.dropdown{position:static;box-shadow:none;background:transparent;padding:0 0 0 var(--space-2)}
  .has-dropdown>.dropdown a{color:#e8e6e2}
  .nav-toggle{display:block}
  .footer-grid{grid-template-columns:1fr}
}