/* ============================================================
   Crown Pillar — site stylesheet
   BCG-inspired editorial flow · charcoal · copper · white palette
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700&display=swap');

:root{
  /* charcoal spectrum */
  --charcoal-deep:#161618;
  --charcoal:#222226;
  --charcoal-mid:#2c2c33;
  --charcoal-light:#3a3a43;
  --charcoal-ink:#101012;

  /* copper spectrum */
  --copper:#b87333;
  --copper-light:#cf8f54;
  --copper-warm:#985c2c;
  --copper-pale:#f0dcc8;
  --copper-glow:rgba(184,115,51,.12);

  /* neutrals */
  --bg:#fafbfc;
  --bg-warm:#f7f5f0;
  --bg-alt:#f0f2f5;
  --ink:#111827;
  --body:#3d4b5e;
  --muted:#6b7a90;
  --line:#e2e7ee;
  --line-strong:#cdd5e0;

  --maxw:1240px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(10,22,40,.04), 0 12px 40px rgba(10,22,40,.06);
  --shadow-lg:0 32px 80px rgba(10,22,40,.14);
  --t:.3s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important; animation:none!important;}}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--body); background:var(--bg);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

h1,h2,h3,h4{color:var(--ink); line-height:1.05; letter-spacing:-.025em; font-weight:800;}
h1{font-family:'Playfair Display',Georgia,serif; font-size:clamp(3rem,7vw,5.4rem); font-weight:900; letter-spacing:-.04em; line-height:.98;}
h2{font-family:'Playfair Display',Georgia,serif; font-size:clamp(2.2rem,4.2vw,3.6rem); font-weight:800; letter-spacing:-.03em;}
h3{font-size:1.3rem; letter-spacing:-.015em; font-weight:700;}
p{color:var(--body);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.section{padding:120px 0;}
.section-sm{padding:80px 0;}
.bg-alt{background:var(--bg-alt);}
.bg-warm{background:var(--bg-warm);}

.eyebrow{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--copper-warm); margin-bottom:20px;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--muted); max-width:58ch; line-height:1.7;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:.92rem; letter-spacing:.03em; text-transform:uppercase;
  padding:16px 32px; border-radius:50px; cursor:pointer;
  transition:var(--t); border:2px solid transparent; white-space:nowrap;
}
.btn .arr{transition:transform var(--t); font-style:normal;}
.btn:hover .arr{transform:translateX(5px);}
.btn-copper{
  background:linear-gradient(135deg,var(--copper),var(--copper-light));
  color:var(--charcoal-deep); border-color:transparent;
  box-shadow:0 4px 20px rgba(184,115,51,.25);
}
.btn-copper:hover{
  background:linear-gradient(135deg,var(--copper-warm),var(--copper));
  box-shadow:0 6px 28px rgba(184,115,51,.35); transform:translateY(-1px);
}
.btn-charcoal{
  background:linear-gradient(135deg,var(--charcoal),var(--charcoal-mid));
  color:#fff; border-color:transparent;
}
.btn-charcoal:hover{background:linear-gradient(135deg,var(--charcoal-mid),var(--charcoal-light)); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--charcoal); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--charcoal); background:var(--charcoal); color:#fff;}
.btn-ghost{padding:0; border:0; background:none; color:var(--charcoal); text-transform:none; font-size:1rem; letter-spacing:0;}
.btn-ghost:hover{color:var(--copper-warm);}

/* white variants for dark bgs */
.dark .btn-outline,.bg-charcoal .btn-outline{color:#fff; border-color:rgba(255,255,255,.3);}
.dark .btn-outline:hover,.bg-charcoal .btn-outline:hover{background:#fff; color:var(--charcoal); border-color:#fff;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,251,252,.92);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .3s, box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 2px 20px rgba(10,22,40,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px;}
.brand{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.01em;}
.brand .mark{width:34px; height:34px; flex:none;}
.brand .mark svg{width:100%; height:100%; display:block;}
.brand .name{font-size:1.08rem; color:var(--charcoal-ink); letter-spacing:.06em; font-weight:800;}
.brand .name b{color:var(--copper); font-weight:800;}
.nav-links{display:flex; align-items:center; gap:38px;}
.nav-links a{
  font-size:.88rem; font-weight:700; color:var(--ink); position:relative; padding:6px 0;
  letter-spacing:.04em; text-transform:uppercase;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg,var(--copper),var(--copper-light)); transition:width var(--t);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:16px;}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; transition:var(--t); border-radius:2px;}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,var(--charcoal-deep) 0%,var(--charcoal) 40%,var(--charcoal-mid) 100%);
  color:#fff; min-height:92vh; display:flex; align-items:center;
}
.hero-inner{position:relative; z-index:2; padding:140px 0 120px; max-width:860px;}
.hero h1{color:#fff; margin-bottom:30px;}
.hero h1 .accent{
  background:linear-gradient(135deg,var(--copper-light),var(--copper-pale));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero .lead{font-size:clamp(1.15rem,1.8vw,1.45rem); color:rgba(255,255,255,.7); max-width:56ch; margin-bottom:44px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-rule{height:4px; width:72px; background:linear-gradient(90deg,var(--copper),var(--copper-light)); margin-bottom:40px; border-radius:2px;}

/* hero ambient glow */
.hero::before{
  content:''; position:absolute; right:-15%; top:-20%; width:70%; height:70%;
  background:radial-gradient(ellipse at center, rgba(184,115,51,.12) 0%, transparent 65%);
  pointer-events:none;
}
.hero::after{
  content:''; position:absolute; left:-10%; bottom:-30%; width:60%; height:60%;
  background:radial-gradient(ellipse at center, rgba(44,44,51,.5) 0%, transparent 60%);
  pointer-events:none;
}
/* geometric line pattern */
.hero-geo{
  position:absolute; right:0; top:0; bottom:0; width:50%;
  opacity:.06; pointer-events:none; overflow:hidden;
}
.hero-geo::before{
  content:''; position:absolute; right:-50px; top:50%; transform:translateY(-50%);
  width:600px; height:600px;
  border:1px solid #fff; border-radius:50%;
}
.hero-geo::after{
  content:''; position:absolute; right:80px; top:50%; transform:translateY(-50%);
  width:400px; height:400px;
  border:1px solid #fff; border-radius:50%;
}

/* ---------- stats strip ---------- */
.stats-section{background:var(--bg); border-bottom:1px solid var(--line);}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.stat{padding:52px 32px; border-left:1px solid var(--line); text-align:center;}
.stat:first-child{border-left:0;}
.stat .num{font-family:'Playfair Display',Georgia,serif; font-size:3.2rem; font-weight:900; color:var(--charcoal); letter-spacing:-.04em; line-height:1;}
.stat .num span{color:var(--copper);}
.stat .lbl{margin-top:12px; font-size:.88rem; color:var(--muted); font-weight:500; letter-spacing:.01em;}

/* ---------- section headings ---------- */
.head{max-width:720px; margin-bottom:64px;}
.head.center{margin-left:auto; margin-right:auto; text-align:center;}
.head h2{margin-bottom:20px;}
.head .lead{margin-top:0;}

/* ---------- cards ---------- */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:40px 34px; transition:var(--t); position:relative; overflow:hidden;
}
.card:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-4px);}
.card .knum{font-size:.76rem; font-weight:800; letter-spacing:.14em; color:var(--copper-warm); text-transform:uppercase;}
.card h3{margin:16px 0 14px;}
.card p{font-size:.97rem; color:var(--muted); line-height:1.65;}
.card .more{margin-top:20px; font-weight:700; font-size:.88rem; color:var(--charcoal); display:inline-flex; gap:.4em; letter-spacing:.03em; text-transform:uppercase;}
.card .more .arr{transition:transform var(--t);}
.card:hover .more .arr{transform:translateX(5px);}
.card .topbar{position:absolute; left:0; top:0; height:4px; width:0; background:linear-gradient(90deg,var(--copper),var(--copper-light)); transition:width var(--t);}
.card:hover .topbar{width:100%;}

/* large editorial card (BCG impact-style) */
.card-editorial{
  background:linear-gradient(165deg,var(--charcoal-deep),var(--charcoal-mid));
  border:0; color:#fff; padding:56px 48px; border-radius:var(--radius);
  min-height:380px; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.card-editorial::before{
  content:''; position:absolute; right:-40px; top:-40px; width:240px; height:240px;
  background:radial-gradient(circle,rgba(184,115,51,.15),transparent 60%);
}
.card-editorial .eyebrow{color:var(--copper-light);}
.card-editorial h3{color:#fff; font-family:'Playfair Display',Georgia,serif; font-size:1.9rem; line-height:1.15; margin-bottom:14px;}
.card-editorial p{color:rgba(255,255,255,.65); font-size:.95rem;}
.card-editorial .more{color:var(--copper-light);}

/* feature list */
.feature{display:flex; gap:20px; padding:28px 0; border-bottom:1px solid var(--line);}
.feature:last-child{border-bottom:0;}
.feature .fi{
  flex:none; width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,var(--copper-glow),rgba(184,115,51,.06));
  border:1px solid rgba(184,115,51,.15);
  display:grid; place-items:center; color:var(--copper-warm); font-weight:900; font-size:1.1rem;
}
.feature h3{font-size:1.1rem; margin-bottom:6px;}
.feature p{font-size:.95rem; color:var(--muted);}

/* split layout */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center;}

/* ---------- cta band ---------- */
.cta-band{
  background:linear-gradient(160deg,var(--charcoal-deep),var(--charcoal),var(--charcoal-mid));
  color:#fff; border-radius:var(--radius); padding:72px 64px;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; right:-60px; top:-60px; width:320px; height:320px;
  background:radial-gradient(circle,rgba(184,115,51,.18),transparent 55%);
}
.cta-band::after{
  content:''; position:absolute; left:-80px; bottom:-80px; width:280px; height:280px;
  background:radial-gradient(circle,rgba(44,44,51,.4),transparent 60%);
}
.cta-band>*{position:relative; z-index:1;}
.cta-band h2{color:#fff; max-width:20ch;}
.cta-band p{color:rgba(255,255,255,.65); margin:18px 0 34px; max-width:50ch; font-size:1.08rem;}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  background:linear-gradient(165deg,var(--charcoal-deep),var(--charcoal),var(--charcoal-mid));
  color:#fff; padding:110px 0 90px; position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; right:-10%; top:-30%; width:50%; height:80%;
  background:radial-gradient(ellipse,rgba(184,115,51,.1),transparent 60%);
  pointer-events:none;
}
.page-hero .eyebrow{color:var(--copper-light);}
.page-hero h1{color:#fff; max-width:18ch; margin-bottom:24px;}
.page-hero .lead{color:rgba(255,255,255,.65);}
.crumbs{font-size:.82rem; color:rgba(255,255,255,.4); margin-bottom:24px; letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.crumbs a{transition:color var(--t);}
.crumbs a:hover{color:#fff;}

/* ---------- impact / case study section ---------- */
.impact-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px;}
.impact-grid .card-editorial:first-child{grid-row:span 2;}

/* ---------- platform callout ---------- */
.platform-callout{
  background:var(--bg-warm);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.platform-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.platform-visual{
  background:linear-gradient(165deg,var(--charcoal-deep),var(--charcoal-mid));
  border-radius:var(--radius); padding:48px; min-height:360px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.platform-visual::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 60px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 60px);
}
.platform-visual-content{position:relative; z-index:1; text-align:center; color:#fff;}
.platform-visual-content .icon-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px;
}
.platform-visual-content .icon-cell{
  width:64px; height:64px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center; font-size:.7rem; font-weight:700;
  color:var(--copper-light); letter-spacing:.05em; text-transform:uppercase;
}
.platform-visual-content .pv-label{
  font-size:.82rem; color:rgba(255,255,255,.5); letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}

/* ---------- mineral grid (equal-treatment commodities) ---------- */
.mineral-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:10px;}
.mineral-chip{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:15px 18px;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);}
.mineral-chip:hover{border-color:var(--copper); transform:translateY(-2px); box-shadow:var(--shadow);}
.mineral-chip .sym{flex:none; width:42px; height:42px; border-radius:9px; background:var(--copper-pale);
  color:var(--copper-warm); display:grid; place-items:center; font-size:.9rem; font-weight:800; letter-spacing:.01em;}
.mineral-chip .nm{font-size:.95rem; font-weight:700; color:var(--ink); letter-spacing:.01em;}
@media(max-width:520px){.mineral-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));}}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px;}
.field{margin-bottom:22px;}
.field label{display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:.03em; text-transform:uppercase;}
.field input,.field textarea,.field select{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  padding:14px 18px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:#fff; transition:var(--t);
}
.field textarea{min-height:150px; resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--copper); box-shadow:0 0 0 3px var(--copper-glow);}
.contact-info{padding-top:20px;}
.contact-info .ci{display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--line);}
.contact-info .ci:last-child{border-bottom:0;}
.contact-info .ci .fi{
  flex:none; width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,var(--copper-glow),rgba(184,115,51,.06));
  border:1px solid rgba(184,115,51,.15);
  display:grid; place-items:center; color:var(--copper-warm); font-weight:900; font-size:1.2rem;
}
.contact-info .ci h3{font-size:1.05rem; margin-bottom:5px;}
.contact-info .ci p,.contact-info .ci a{font-size:.95rem; color:var(--muted);}
.contact-info .ci a:hover{color:var(--copper-warm);}

/* values / about */
.bigquote{font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:800; color:var(--ink); line-height:1.2; letter-spacing:-.02em; max-width:22ch;}
.bigquote .copper{
  background:linear-gradient(135deg,var(--copper),var(--copper-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--charcoal-ink); color:rgba(255,255,255,.55);
  padding:80px 0 40px;
}
.footer-top{
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer .brand .name{color:#fff;}
.site-footer .brand .name b{color:var(--copper);}
.footer-top p{font-size:.92rem; color:rgba(255,255,255,.4); margin-top:18px; max-width:32ch; line-height:1.6;}
.fcol h4{color:#fff; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; font-weight:700;}
.fcol a{display:block; font-size:.93rem; color:rgba(255,255,255,.5); padding:7px 0; transition:var(--t);}
.fcol a:hover{color:var(--copper-light);}
.footer-bot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; font-size:.82rem; color:rgba(255,255,255,.3);
  flex-wrap:wrap; gap:12px;
}

/* ---------- scroll animations ---------- */
.fade-up{opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.visible{opacity:1; transform:translateY(0);}

/* stagger children */
.stagger .fade-up:nth-child(2){transition-delay:.1s;}
.stagger .fade-up:nth-child(3){transition-delay:.2s;}
.stagger .fade-up:nth-child(4){transition-delay:.3s;}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .split{grid-template-columns:1fr; gap:48px;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(odd){border-left:0;}
  .stat:nth-child(n+3){border-top:1px solid var(--line);}
  .contact-grid{grid-template-columns:1fr; gap:48px;}
  .footer-top{grid-template-columns:1fr 1fr; gap:36px;}
  .impact-grid{grid-template-columns:1fr; gap:24px;}
  .impact-grid .card-editorial:first-child{grid-row:auto;}
  .platform-inner{grid-template-columns:1fr; gap:40px;}
  .hero{min-height:auto;}
  .hero-inner{padding:100px 0 90px;}
}
@media(max-width:680px){
  .section{padding:80px 0;}
  .nav-links,.nav-cta .btn{display:none;}
  .nav-toggle{display:block;}
  .nav-links.open{
    display:flex; position:absolute; left:0; right:0; top:78px; flex-direction:column;
    background:rgba(250,251,252,.98); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line); padding:20px 32px; gap:4px; z-index:99;
  }
  .nav-links.open a{padding:14px 0; border-bottom:1px solid var(--line);}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .cta-band{padding:48px 32px;}
  .footer-top{grid-template-columns:1fr;}
  .hero-inner{padding:80px 0 70px;}
  h1{font-size:clamp(2.4rem,8vw,3.4rem);}
}