/*
Theme Name: Elements Defined LLC
Theme URI: https://elementsdefinedllc.com
Author: Elements Defined LLC
Description: Custom contractor website theme for Elements Defined LLC — Concrete, Tree Service, and Hardscapes throughout Southeast Michigan.
Version: 1.0.0
Text Domain: elements-defined
*/

:root{
  --bg:#080808;
  --panel:#101010;
  --panel2:#171717;
  --text:#fff;
  --muted:#a8a8a8;
  --line:rgba(255,255,255,.10);
  --orange:#f97316;
  --orange2:#fb923c;
  --green:#1c6b44;
  --radius:26px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
body.admin-bar .site-header{top:32px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.eyebrow{font-size:.76rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#fdba74}
.section{padding:86px 0}
.section-dark{background:#0d0d0d;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{font-size:clamp(2rem,4vw,3.35rem);line-height:1.08;margin:.55rem 0 1rem;font-weight:950;letter-spacing:-.035em}
.lead{font-size:1.07rem;color:#c2c2c2;max-width:760px}
.muted{color:var(--muted)}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 22px;border-radius:16px;font-size:.87rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;transition:.2s ease;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 15px 35px rgba(249,115,22,.16)}
.btn-primary:hover{background:var(--orange2);transform:translateY(-1px)}
.btn-secondary{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.btn-secondary:hover{background:rgba(255,255,255,.09)}

.site-header{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.04);padding:3px}
.brand-name{font-size:.97rem;font-weight:950;white-space:nowrap}
.brand-tag{font-size:.73rem;color:#fdba74;font-style:italic}
.main-nav{display:flex;align-items:center;gap:24px;font-size:.88rem;color:#d0d0d0}
.main-nav a:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:10px}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#080808 0%,#111 53%,#3d1809 100%)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.hero:before{width:420px;height:420px;background:rgba(249,115,22,.14);right:-100px;top:-120px}
.hero:after{width:360px;height:360px;background:rgba(28,107,68,.14);left:-120px;bottom:-150px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center;padding:78px 0 84px}
.hero-pill{display:inline-flex;padding:8px 14px;border-radius:99px;border:1px solid rgba(251,146,60,.25);background:rgba(249,115,22,.09);color:#fed7aa;font-size:.73rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-size:clamp(3.2rem,6vw,5.8rem);line-height:.98;letter-spacing:-.055em;margin:24px 0 0;font-weight:950}
.hero h1 span{color:var(--orange2)}
.slogan{font-size:clamp(1.25rem,2.1vw,1.85rem);font-weight:800;font-style:italic;margin:22px 0 0}
.hero-copy{font-size:1.08rem;color:#c5c5c5;max-width:690px;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.micro-trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;font-size:.82rem;color:#9b9b9b}
.logo-card{border-radius:34px;border:1px solid var(--line);background:rgba(0,0,0,.35);padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.logo-stage{border-radius:26px;min-height:390px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(249,115,22,.12),rgba(255,255,255,.02),rgba(28,107,68,.12));padding:28px}
.logo-stage img{max-height:340px;object-fit:contain}
.logo-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.logo-labels span{text-align:center;padding:12px 7px;border-radius:12px;background:rgba(255,255,255,.045);font-size:.69rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#c9c9c9}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.service-card{border:1px solid var(--line);background:rgba(255,255,255,.028);border-radius:var(--radius);padding:28px;transition:.2s ease}
.service-card:hover{transform:translateY(-4px);border-color:rgba(251,146,60,.32);background:rgba(255,255,255,.045)}
.service-number{width:46px;height:46px;border-radius:14px;background:var(--orange);display:grid;place-items:center;font-weight:950;font-size:1.15rem}
.service-card h3{font-size:1.55rem;margin:18px 0 8px}
.service-card p{color:#adadad;font-size:.96rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{border:1px solid var(--line);background:#090909;border-radius:99px;padding:6px 10px;font-size:.74rem;color:#bdbdbd}
.text-link{display:inline-block;margin-top:22px;color:#fdba74;font-size:.85rem;font-weight:850}

.trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:end}
.trust-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.trust-card{background:#090909;border:1px solid var(--line);border-radius:18px;padding:20px}
.trust-card h3{font-size:1rem;margin:0 0 7px}
.trust-card p{margin:0;color:#9f9f9f;font-size:.84rem;line-height:1.6}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.project-card{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:#101010}
.project-visual{height:195px;padding:18px;display:flex;align-items:flex-end;background:linear-gradient(135deg,rgba(249,115,22,.22),#111,rgba(28,107,68,.13))}
.project-category{border:1px solid var(--line);background:rgba(0,0,0,.48);border-radius:99px;padding:5px 10px;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fed7aa}
.project-body{padding:22px}
.project-body h3{margin:0;font-size:1.2rem}
.project-body p{margin:10px 0 0;color:#a6a6a6;font-size:.9rem}

.area-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px}
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.city{border:1px solid var(--line);background:#0b0b0b;border-radius:12px;padding:11px 13px;color:#c5c5c5;font-size:.84rem}
.city.featured{border-color:rgba(249,115,22,.25);background:rgba(249,115,22,.08);color:#fed7aa;font-weight:800}
.callout{margin-top:25px;border:1px solid rgba(249,115,22,.25);background:rgba(249,115,22,.08);border-radius:18px;padding:20px}
.callout strong{display:block}
.callout a{display:inline-block;margin-top:7px;color:#fdba74;font-weight:850;font-size:.87rem}

.cta-box{border-radius:30px;padding:32px 36px;background:linear-gradient(90deg,#ea580c,#f97316);display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 30px 70px rgba(249,115,22,.12)}
.cta-box h2{max-width:800px;font-size:clamp(1.65rem,3vw,2.55rem);line-height:1.14;margin:7px 0 0;font-weight:950}
.cta-box .btn{background:#050505}

.quote-section{background:linear-gradient(135deg,#111,#050505);border-top:1px solid var(--line)}
.quote-grid{display:grid;grid-template-columns:.93fr 1.07fr;gap:50px}
.contact-stack{display:grid;gap:12px;margin-top:28px}
.contact-card{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:18px}
.contact-card small{display:block;color:#777;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.contact-card strong{font-size:1.15rem}
.quote-form{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:28px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:grid;gap:7px;font-size:.82rem;font-weight:800}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{width:100%;border-radius:13px;border:1px solid var(--line);background:#101010;color:#fff;padding:13px 14px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange2)}
.field textarea{min-height:140px;resize:vertical}
.form-note{font-size:.73rem;color:#777;text-align:center;margin:10px 0 0}
.notice{border-radius:12px;padding:12px 14px;margin-bottom:15px;font-size:.85rem}
.notice.success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:#bbf7d0}
.notice.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#fecaca}

.site-footer{border-top:1px solid var(--line);background:#030303;padding:48px 0 94px}
.footer-grid{display:grid;grid-template-columns:1.25fr .8fr .7fr;gap:40px}
.footer-brand{display:flex;gap:14px}
.footer-brand img{width:58px;height:58px;object-fit:contain;border-radius:13px;background:rgba(255,255,255,.04);padding:3px}
.footer-brand h3{margin:0;font-size:1rem}
.footer-brand .tag{color:#fdba74;font-style:italic;font-size:.82rem}
.footer-copy{color:#777;font-size:.82rem;margin-top:10px}
.footer-title{font-size:.7rem;color:#777;text-transform:uppercase;letter-spacing:.14em;font-weight:900}
.footer-links{display:grid;gap:7px;margin-top:12px;color:#aaa;font-size:.82rem}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:34px;padding-top:20px;color:#666;font-size:.72rem}

.mobile-action{display:none}

@media (max-width:980px){
  .main-nav{display:none}
  .hero-grid,.trust-grid,.area-grid,.quote-grid{grid-template-columns:1fr}
  .hero-grid{gap:38px;padding:60px 0 70px}
  .logo-card{max-width:600px}
  .cards-3,.project-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:repeat(3,1fr)}
  .city-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  body{padding-bottom:76px}
  body.admin-bar .site-header{top:46px}
  .container{width:min(100% - 28px,var(--max))}
  .header-actions{display:none}
  .header-inner{height:68px}
  .brand img{width:46px;height:46px}
  .brand-name{font-size:.88rem}
  .brand-tag{font-size:.66rem}
  .hero h1{font-size:clamp(3rem,13vw,4.5rem)}
  .hero-grid{padding:48px 0 58px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .logo-stage{min-height:250px}
  .section{padding:66px 0}
  .trust-cards{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .city-grid{grid-template-columns:repeat(2,1fr)}
  .cta-box{align-items:flex-start;flex-direction:column;padding:28px}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .site-footer{padding-bottom:42px}
  .mobile-action{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:999;background:rgba(0,0,0,.96);border-top:1px solid var(--line);padding:10px 12px}
  .mobile-action a{min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:13px;font-size:.82rem;font-weight:950;text-transform:uppercase;letter-spacing:.03em}
  .mobile-action .call{background:var(--orange)}
  .mobile-action .estimate{background:#171717;border:1px solid var(--line)}
}