:root{
  --me-navy:#073b46;--me-navy-2:#0a4a56;--me-deep:#082f38;--me-gold:#e0ae22;
  --me-gold-soft:#fff5d6;--me-cream:#f7f2e8;--me-paper:#fffdfa;--me-text:#132b34;
  --me-muted:#607078;--me-line:#ded7c9;--me-green:#2f6857;--me-shadow:0 18px 45px rgba(7,59,70,.10)
}
*{box-sizing:border-box}
.me-shell{
  width:100%;
  max-width:none;
  margin:0;
  padding:34px 0 54px;
  color:var(--me-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  position:relative;
  left:auto;
  right:auto;
  transform:none;
  box-sizing:border-box;
}
.me-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.65fr);gap:24px;align-items:stretch;background:linear-gradient(120deg,var(--me-navy) 0%,#0f5560 62%,#687049 100%);border-radius:24px;padding:34px;color:#fff;box-shadow:var(--me-shadow);overflow:hidden;position:relative}
.me-hero:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(224,174,34,.28);border-radius:50%;right:-95px;top:-100px}
.me-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ffd75a;font-weight:800;margin-bottom:10px}
.me-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.06;margin:0 0 12px;font-family:Georgia,"Times New Roman",serif}
.me-hero p{max-width:720px;margin:0;color:#e7eff1;font-size:16px;line-height:1.6}
.me-hero-side{display:grid;grid-template-columns:1fr;gap:12px;align-content:center;position:relative;z-index:1}
.me-mini{padding:16px 18px;border:1px solid rgba(255,255,255,.23);border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.me-mini small{display:block;color:#d8e3e5;margin-bottom:4px}.me-mini strong{font-size:16px;color:#fff}
.me-related{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:15px 18px;background:var(--me-gold-soft);border:1px solid #ead083;border-radius:16px;margin:18px 0}
.me-related strong{font-size:13px;margin-right:4px}.me-related a{font-weight:750;color:#624900;text-decoration:none;border-bottom:1px solid rgba(98,73,0,.35)}
.me-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.62fr);gap:18px;align-items:start}
.me-card{background:var(--me-paper);border:1px solid var(--me-line);border-radius:20px;box-shadow:0 12px 30px rgba(7,59,70,.06);padding:22px}
.me-card-title{display:flex;align-items:center;gap:12px;margin-bottom:20px}.me-step{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--me-navy);color:#fff;font-weight:800}.me-card-title h2{font-size:20px;margin:0}.me-card-title p{margin:3px 0 0;color:var(--me-muted);font-size:12px}
.me-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.me-field label{display:block;font-weight:750;font-size:12px;margin-bottom:7px;color:var(--me-deep)}
.me-field input,.me-field select{width:100%;height:48px;padding:0 13px;border:1px solid #d8d2c6;border-radius:12px;background:#fff;color:var(--me-text);font-size:14px;outline:none;transition:.15s ease}
.me-field input:focus,.me-field select:focus{border-color:var(--me-gold);box-shadow:0 0 0 3px rgba(224,174,34,.13)}
.me-hint{font-size:11px;color:var(--me-muted);margin-top:6px;line-height:1.4}
.me-actions{display:flex;gap:10px;margin-top:20px}.me-btn{border:0;border-radius:12px;min-height:48px;padding:0 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.me-btn-primary{background:var(--me-gold);color:#1e210d;flex:1}.me-btn-secondary{background:#edf2f1;color:var(--me-navy)}
.me-side{position:sticky;top:110px}
.me-side-panel{background:linear-gradient(145deg,var(--me-deep),var(--me-navy-2));color:white;border-radius:20px;padding:24px;box-shadow:var(--me-shadow)}
.me-side .me-kicker{margin-bottom:8px}.me-side h3{font-size:28px;margin:0 0 6px}.me-side p{color:#cfe0e3;font-size:13px;line-height:1.5;margin:0}
.me-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.me-stat{padding:13px;border:1px solid rgba(255,255,255,.15);border-radius:13px;background:rgba(255,255,255,.07)}.me-stat span{display:block;color:#bcd1d4;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.me-stat strong{display:block;margin-top:4px;font-size:16px;color:#ffd75a}
.me-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(224,174,34,.13);border:1px solid rgba(224,174,34,.32);font-size:11px;line-height:1.5;color:#f4ead0}
.me-error{margin:0 0 16px;padding:13px 15px;border-radius:12px;background:#fff1f1;border:1px solid #efb7b7;color:#8c2424}
.me-results{margin-top:22px}.me-summary{background:var(--me-deep);color:white;border-radius:20px;padding:22px;margin-bottom:18px}
.me-summary-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.me-summary h2{margin:0;color:#ffd75a;font-size:18px}
.me-print{background:#fff;color:var(--me-navy);border-radius:10px;border:0;padding:10px 14px;font-weight:800;cursor:pointer}
.me-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.me-summary-item{padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px}.me-summary-item span{display:block;font-size:10px;color:#a9c3c7;text-transform:uppercase;letter-spacing:.06em}.me-summary-item strong{display:block;margin-top:4px;font-size:14px}
.me-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.me-section{background:#fff;border:1px solid var(--me-line);border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(7,59,70,.05)}
.me-section h3{margin:0;padding:16px 18px;background:#f5f6f1;border-bottom:1px solid var(--me-line);font-size:15px;color:var(--me-deep)}
.me-table{width:100%;border-collapse:collapse}.me-table th,.me-table td{padding:11px 14px;border-bottom:1px solid #eee9df;text-align:left;font-size:12px;vertical-align:top}.me-table th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6b7477;background:#fffdfa}.me-table td:nth-child(2){font-weight:850;color:var(--me-navy);white-space:nowrap}.me-table tr:last-child td{border-bottom:0}
.me-disclaimer{margin-top:18px;padding:19px 20px;background:#fff9e7;border:1px solid #e7cf84;border-radius:16px;color:#544a2c;font-size:12px;line-height:1.65}
.me-disclaimer strong{color:#332b12}
.me-footer-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.me-footer-links a{color:var(--me-navy);font-weight:800;text-decoration:none}
@media(max-width:1100px){
  .me-shell{width:100%;max-width:none}
  .me-layout{grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr)}
}
@media(max-width:900px){
  .me-shell{width:100%;max-width:none}
  .me-hero{grid-template-columns:1fr}
  .me-layout{grid-template-columns:1fr}
  .me-side{position:static}
  .me-summary-grid{grid-template-columns:repeat(2,1fr)}
  .me-section-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
  .me-shell{width:100%;max-width:none;padding-top:16px}
  .me-hero{padding:22px;border-radius:16px}
  .me-hero h1{font-size:30px}
  .me-grid{grid-template-columns:1fr}
  .me-actions{flex-direction:column}
  .me-summary-grid{grid-template-columns:1fr 1fr}
  .me-card{padding:16px;border-radius:16px}
  .me-table{min-width:560px}
  .me-section{overflow-x:auto}
  .me-table th,.me-table td{padding:10px 11px}
  .me-related{align-items:flex-start;flex-direction:column}
}
@media print{.me-no-print,.me-hero,.me-related,.me-card:first-child,.me-side{display:none!important}.me-shell{width:100%;padding:0}.me-results{margin:0}.me-summary{border-radius:0;background:#fff;color:#000;border:1px solid #aaa}.me-summary h2,.me-summary-item strong{color:#000}.me-summary-item span{color:#555}.me-section-grid{grid-template-columns:1fr}.me-section{box-shadow:none;break-inside:avoid}.me-disclaimer{break-inside:avoid}}


/* Sadiqeen live-site integration refinements */
#material-estimator{scroll-margin-top:110px}
.me-shell:first-child{margin-top:0}
@media(min-width:1200px){
  .me-hero{padding:30px 32px}
  .me-side-panel{padding:22px}
}
@media(max-width:900px){
  .me-side{position:static}
}



/* v1.0.3 — live site container breakout
   The live site's parent Tools container is narrower than this module.
   This rule centers the estimator on the parent container's centerline
   without aligning the 1160px module to the parent's left edge. */


/* v1.0.4 — follow parent container left alignment
   The Material Estimator now follows the site's existing parent content container,
   matching the Construction Cost Estimator alignment instead of using breakout centering. */


/* ============================================================
   v1.0.4 — PERMANENT LIVE PAGE ALIGNMENT
   Matches the Construction Cost Estimator content geometry.
   No transform-based centering. Balanced desktop margins.
   ============================================================ */
.me-shell{
  width:min(1152px,calc(100% - 48px)) !important;
  max-width:1152px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:42px 0 56px !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
}
.me-hero,.me-related,.me-layout,.me-results{
  width:100% !important;
  max-width:none !important;
}
@media(max-width:900px){
  .me-shell{
    width:calc(100% - 24px) !important;
    max-width:none !important;
    padding-top:26px !important;
  }
}
@media(max-width:580px){
  .me-shell{
    width:calc(100% - 16px) !important;
    max-width:none !important;
    padding-top:18px !important;
  }
}