*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#2c3a50;background:#f5f7fa;line-height:1.72;font-size:17px}
a{color:#2a7cb8;text-decoration:none;transition:color .2s}
a:hover{color:#1a5e8a}

/* ── Light engineering theme ── */
:root{
  --bg-primary:#f5f7fa;
  --bg-card:#ffffff;
  --bg-card-alt:#eef2f7;
  --bg-code:#f0f4f8;
  --border:#d5dde8;
  --border-accent:#b0c4de;
  --text-primary:#2c3a50;
  --text-secondary:#4a5d75;
  --text-muted:#7b8fa6;
  --accent:#2a7cb8;
  --accent-warm:#c87a20;
  --accent-red:#c0392b;
  --accent-green:#1e8449;
  --accent-cyan:#1a6e8e;
  --radius:10px;
  --radius-lg:16px;
}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 0}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:36px;width:auto;border-radius:6px}
.nav-logo span{font-size:15px;font-weight:600;color:var(--text-primary)}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:14px;color:var(--text-secondary);font-weight:500}
.nav-links a:hover{color:var(--accent)}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,#e8f0f8 0%,#dce8f4 40%,#d0dfef 100%);padding:72px 24px 56px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-80px;right:-120px;width:500px;height:500px;background:radial-gradient(circle,rgba(42,124,184,.07) 0%,transparent 70%);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(42,124,184,.1);border:1px solid rgba(42,124,184,.2);color:var(--accent);font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:20px;text-transform:uppercase;letter-spacing:.8px}
.hero h1{font-size:clamp(28px,4vw,42px);font-weight:800;color:#1a2a3a;line-height:1.2;margin-bottom:16px;max-width:820px}
.hero h1 span{color:var(--accent)}
.hero-desc{font-size:17px;color:var(--text-secondary);max-width:700px;line-height:1.7;margin-bottom:32px}

/* Quick-answer box */
.quick-answer{background:linear-gradient(135deg,rgba(42,124,184,.06),rgba(200,122,32,.04));border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:40px;position:relative}
.quick-answer::before{content:'QUICK ANSWER';position:absolute;top:-10px;left:24px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:1px}
.quick-answer p{font-size:17px;line-height:1.75;color:var(--text-primary)}

/* Key metrics bar */
.metrics-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:32px}
.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 18px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.metric-card .val{font-size:28px;font-weight:700;color:var(--accent-cyan);display:block}
.metric-card .lbl{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.6px}

/* ── Section wrapper ── */
.section{max-width:1200px;margin:0 auto;padding:56px 24px}
.section-dark{background:var(--bg-card-alt);padding:56px 24px}
.section-dark .section-inner{max-width:1200px;margin:0 auto}

/* Section headers */
.section h2{font-size:28px;font-weight:700;color:#1a2a3a;margin-bottom:8px;line-height:1.3}
.section h2 .num{color:var(--accent);font-weight:300;margin-right:8px;font-size:24px}
.section-dark h2{font-size:28px;font-weight:700;color:#1a2a3a;margin-bottom:8px}
.section-dark h2 .num{color:var(--accent)}
.section .subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:32px;line-height:1.6}
.section-dark .subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:32px}

/* ── Two-column parameter layout ── */
.param-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:40px}
@media(max-width:768px){.param-grid{grid-template-columns:1fr}}

/* ── Parameter card ── */
.param-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 26px;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.param-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(42,124,184,.08)}
.param-card h3{font-size:18px;font-weight:600;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.param-card h3 .icon{font-size:22px}
.param-card p{font-size:15px;color:var(--text-secondary);line-height:1.7}
.param-card .formula{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin:14px 0;font-family:'JetBrains Mono','Fira Code',monospace;font-size:15px;color:var(--accent-cyan);text-align:center;letter-spacing:.5px}
.param-card .note{font-size:13px;color:var(--text-muted);margin-top:10px;font-style:italic}

/* ── Four-number control strip ── */
.control-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px}
@media(max-width:900px){.control-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.control-strip{grid-template-columns:1fr}}
.control-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;text-align:center;position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.control-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);opacity:0;transition:opacity .2s}
.control-item:hover::after{opacity:1}
.control-item .step{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px}
.control-item h3{font-size:17px;font-weight:600;color:#1a2a3a;margin-bottom:10px}
.control-item p{font-size:14px;color:var(--text-secondary);line-height:1.6}
.control-item .unit{font-size:13px;color:var(--accent-warm);font-weight:600;margin-top:6px}

/* ── Data tables ── */
.data-table-wrap{overflow-x:auto;margin:24px 0;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.data-table{width:100%;border-collapse:collapse;font-size:15px;background:var(--bg-card)}
.data-table thead{background:rgba(42,124,184,.06)}
.data-table th{padding:14px 16px;text-align:left;color:var(--accent);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--border-accent)}
.data-table td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--text-primary)}
.data-table tbody tr:hover{background:rgba(42,124,184,.03)}
.data-table .tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:600}
.tag-rough{background:rgba(200,122,32,.12);color:var(--accent-warm)}
.tag-finish{background:rgba(30,132,73,.12);color:var(--accent-green)}
.tag-slot{background:rgba(192,57,43,.12);color:var(--accent-red)}
.tag-drill{background:rgba(26,110,142,.12);color:var(--accent-cyan)}
.tag-turn{background:rgba(100,70,200,.12);color:#6c4dc0}

/* ── Formula block ── */
.formula-block{background:var(--bg-card);border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:32px;margin:28px 0;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.formula-block h3{font-size:18px;font-weight:600;color:var(--accent-warm);margin-bottom:16px}
.formula-row{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.formula-box{flex:1;min-width:260px;background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center}
.formula-box .label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.formula-box .formula{font-family:'JetBrains Mono','Fira Code',monospace;font-size:18px;color:var(--accent-cyan);font-weight:600}
.formula-box .result{font-size:14px;color:var(--accent-green);margin-top:8px;font-weight:600}

/* ── Worked example ── */
.worked-example{background:linear-gradient(135deg,rgba(42,124,184,.04),rgba(26,110,142,.03));border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:32px;margin:32px 0;position:relative}
.worked-example::before{content:'WORKED EXAMPLE';position:absolute;top:-10px;left:24px;background:var(--accent-green);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:1px}
.worked-example h3{font-size:18px;color:#1a2a3a;margin-bottom:16px;font-weight:600;margin-top:4px}
.worked-example .step-list{list-style:none;counter-reset:step}
.worked-example .step-list li{counter-increment:step;padding:10px 0 10px 40px;position:relative;font-size:15px;color:var(--text-primary);line-height:1.6}
.worked-example .step-list li::before{content:counter(step);position:absolute;left:0;top:8px;width:26px;height:26px;background:var(--accent);color:#fff;border-radius:50%;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.worked-example .calc{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:16px;margin:12px 0;font-family:'JetBrains Mono','Fira Code',monospace;font-size:15px;color:var(--accent-cyan);text-align:center}
.worked-example .disclaimer{font-size:13px;color:var(--accent-warm);margin-top:16px;font-weight:500}

/* ── RPM reference cards ── */
.rpm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:28px 0}
.rpm-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.rpm-card .diameter{font-size:14px;color:var(--text-muted);margin-bottom:6px}
.rpm-card .rpm-value{font-size:32px;font-weight:700;color:var(--accent-cyan)}
.rpm-card .rpm-label{font-size:12px;color:var(--text-secondary);margin-top:4px}

/* ── Grade comparison cards ── */
.grade-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0}
.grade-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.grade-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 4px 16px rgba(42,124,184,.1)}
.grade-card .grade-name{font-size:20px;font-weight:700;color:#1a2a3a;margin-bottom:4px}
.grade-card .grade-sub{font-size:13px;color:var(--accent);margin-bottom:12px;font-weight:500}
.grade-card .grade-app{font-size:14px;color:var(--text-secondary);line-height:1.6}
.grade-card .grade-note{font-size:13px;color:var(--accent-warm);margin-top:10px;font-weight:500}

/* ── HEM comparison ── */
.hem-compare{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0}
@media(max-width:768px){.hem-compare{grid-template-columns:1fr}}
.hem-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.hem-panel.conventional{border-top:3px solid var(--accent-red)}
.hem-panel.hem{border-top:3px solid var(--accent-green)}
.hem-panel h3{font-size:18px;font-weight:700;margin-bottom:14px}
.hem-panel.conventional h3{color:var(--accent-red)}
.hem-panel.hem h3{color:var(--accent-green)}
.hem-panel p{font-size:15px;color:var(--text-secondary);line-height:1.7}
.hem-panel .engagement{font-size:36px;font-weight:800;margin:16px 0 8px;display:block}
.hem-panel.conventional .engagement{color:var(--accent-red)}
.hem-panel.hem .engagement{color:var(--accent-green)}

/* ── Tool wear symptom table ── */
.symptom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin:24px 0}
.symptom-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.symptom-icon{font-size:24px;flex-shrink:0;width:40px;text-align:center}
.symptom-item .symptom-name{font-size:15px;font-weight:600;color:var(--accent-warm);margin-bottom:4px}
.symptom-item .symptom-cause{font-size:14px;color:var(--text-secondary);line-height:1.5}

/* ── Image sections ── */
.img-section{margin:36px 0;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.img-section img{width:100%;height:auto;display:block;border-radius:var(--radius-lg)}
.img-section .caption{font-size:13px;color:var(--text-muted);margin-top:10px;text-align:center;font-style:italic}

/* Side-by-side image + text */
.media-text{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:32px 0}
@media(max-width:768px){.media-text{grid-template-columns:1fr}}
.media-text img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--border)}
.media-text .text-side h3{font-size:20px;color:#1a2a3a;font-weight:600;margin-bottom:12px}
.media-text .text-side p{font-size:15px;color:var(--text-secondary);line-height:1.7}

/* ── Validation methodology strip ── */
.methodology-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
@media(max-width:768px){.methodology-strip{grid-template-columns:1fr}}
.method-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.method-card .method-num{font-size:36px;font-weight:200;color:var(--border-accent);margin-bottom:8px}
.method-card h3{font-size:16px;color:#1a2a3a;font-weight:600;margin-bottom:10px}
.method-card p{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* ── Goldcattle section ── */
.gc-section{background:linear-gradient(135deg,#e8f0f8,#dce8f4);border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:36px 32px;margin:36px 0}
.gc-section h2{color:var(--accent);font-size:24px;margin-bottom:20px}
.gc-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.gc-cap{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-primary)}
.gc-cap .check{color:var(--accent-green);font-size:18px;font-weight:700}

/* ── FAQ ── */
.faq-list{margin-top:24px}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.faq-q{padding:18px 22px;font-size:16px;font-weight:600;color:#1a2a3a;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q::after{content:'+';color:var(--accent);font-size:22px;font-weight:300;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 22px 18px;font-size:15px;color:var(--text-secondary);line-height:1.7;display:none}
.faq-item.open .faq-a{display:block}

/* ── CTA ── */
.cta-bar{background:linear-gradient(135deg,var(--accent),#1a5e8a);border-radius:var(--radius-lg);padding:40px 32px;text-align:center;margin:48px 0}
.cta-bar h2{color:#fff;font-size:26px;margin-bottom:12px}
.cta-bar p{color:rgba(255,255,255,.85);font-size:16px;margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto}
.cta-btn{display:inline-block;background:linear-gradient(135deg,#2a7cb8,#1a5e8a);color:#fff;font-size:16px;font-weight:700;padding:14px 36px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .15s,box-shadow .15s}
.cta-btn:hover{background:linear-gradient(135deg,#1a5e8a,#14476e);transform:translateY(-2px);box-shadow:0 6px 24px rgba(42,124,184,.35)}
.cta-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(42,124,184,.2);background:linear-gradient(135deg,#14476e,#0e3555)}

/* ── Internal link cards ── */
.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:28px 0}
.link-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.link-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(42,124,184,.08)}
.link-card .lc-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.link-card a{font-size:16px;color:var(--accent);font-weight:600}
.link-card p{font-size:13px;color:var(--text-secondary);margin-top:6px;line-height:1.5}

/* ── Disclaimer ── */
.disclaimer-box{background:rgba(200,122,32,.06);border:1px solid rgba(200,122,32,.2);border-radius:var(--radius);padding:18px 22px;margin:28px 0;font-size:14px;color:var(--accent-warm);line-height:1.6}

/* ── Footer ── */
.footer{background:#1a2a3a;border-top:1px solid var(--border);padding:36px 24px;text-align:center}
.footer p{font-size:13px;color:#8a9bb8}
.footer a{color:#b0c4de}

/* ── Responsive ── */
@media(max-width:640px){
  .hero{padding:48px 16px 40px}
  .hero h1{font-size:26px}
  .section{padding:36px 16px}
  .section-dark{padding:36px 16px}
  .formula-row{flex-direction:column}
  .metrics-bar{grid-template-columns:1fr 1fr}
  .control-strip{grid-template-columns:1fr 1fr}
  .hem-compare{grid-template-columns:1fr}
  .symptom-grid{grid-template-columns:1fr}
  .methodology-strip{grid-template-columns:1fr}
  .data-table{font-size:13px}
  .data-table th,.data-table td{padding:10px 12px}
  .param-grid{grid-template-columns:1fr}
}

/* ── Chart placeholder styling ── */
.chart-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin:24px 0}
.chart-block h3{font-size:16px;color:var(--text-secondary);margin-bottom:16px;font-weight:600}
.chart-canvas{width:100%;height:320px;position:relative}
.chart-note{font-size:12px;color:var(--text-muted);margin-top:12px;text-align:center;font-style:italic}

/* ── Bullet list ── */
.bullet-list{list-style:none;margin:14px 0;padding:0}
.bullet-list li{padding:8px 0 8px 28px;position:relative;font-size:15px;color:var(--text-secondary);line-height:1.65}
.bullet-list li::before{content:'';position:absolute;left:6px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ── Inline code ── */
code{font-family:'JetBrains Mono','Fira Code',monospace;background:var(--bg-code);color:var(--accent-cyan);padding:2px 7px;border-radius:4px;font-size:14px}

/* ── Utility classes ── */
.mt-12{margin-top:12px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-28{margin-top:28px}
.mt-32{margin-top:32px}
.mb-16{margin-bottom:16px}
.text-secondary{color:var(--text-secondary)}
.text-accent-warm{color:var(--accent-warm)}
.text-sm{font-size:14px}
.text-sm-secondary{font-size:14px;color:var(--text-secondary)}
.text-sm-warm{font-size:14px;color:var(--accent-warm);font-weight:500}
.text-md-secondary{font-size:15px;color:var(--text-secondary)}
.lh-17{line-height:1.7}
.icon-red{color:var(--accent-red)}
.icon-warm{color:var(--accent-warm)}
.icon-cyan{color:var(--accent-cyan)}
.icon-purple{color:#6c4dc0}
.footer-note{margin-top:6px}
.resources-heading{font-size:22px;margin-bottom:20px}