*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17202a;background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}.container{width:min(1120px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(10,16,24,.96);color:#fff;backdrop-filter:blur(12px);box-shadow:0 3px 20px #0002}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#f59e0b;color:#111;font-size:22px}.nav nav{display:flex;align-items:center;gap:22px;font-size:.92rem}.nav nav a{opacity:.9}.nav nav a:hover{opacity:1;color:#fbbf24}.nav .phone{font-weight:800;color:#fbbf24}.menu{display:none;background:none;border:0;color:#fff;font-size:28px}.hero{min-height:650px;display:flex;align-items:center;position:relative;background:#07111d url("business-card.jpg") right center/auto 92% no-repeat;overflow:hidden;color:#fff}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,18,.99) 0%,rgba(3,10,18,.93) 30%,rgba(3,10,18,.48) 52%,rgba(3,10,18,.03) 78%);z-index:0}.hero:after{content:"";position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(transparent,#101820);z-index:1}.hero-overlay{position:absolute;inset:0;z-index:0}.hero-content{position:relative;z-index:2;max-width:1120px;width:100%;padding:90px 0}.hero-copy-block{max-width:650px}.hero h1{font-size:clamp(2.5rem,5.4vw,4.7rem);line-height:1.02;letter-spacing:-.05em;margin:0 0 24px;max-width:700px}.hero-copy{font-size:1.18rem;max-width:650px;color:#d6dde5}.eyebrow{font-size:.78rem;font-weight:900;letter-spacing:.18em;color:#16c7ff;margin:0 0 10px}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:0 22px;border-radius:10px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:.2s}.btn.primary{background:#f59e0b;color:#111}.btn.primary:hover{background:#fbbf24;transform:translateY(-1px)}.btn.secondary{border-color:#ffffff55;background:#ffffff0b}.btn.secondary:hover{background:#fff1}.btn.outline{border-color:#d8dde3}.btn.outline:hover{border-color:#f59e0b;color:#a16207}.intro{padding:80px 0;text-align:center}.intro h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin:0 0 18px}.intro p{max-width:760px;margin:auto;color:#5f6b76;font-size:1.1rem}.features{padding:0 0 90px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #e6e9ed;border-radius:18px;padding:34px;background:#fff;box-shadow:0 12px 35px #18212b0d}.icon{font-size:40px;margin-bottom:16px}.card h2{margin:0 0 10px;font-size:1.35rem}.card p{color:#65707c;min-height:76px}.text-link{font-weight:800;color:#b45309}.inventory{background:#f5f7f9;padding:90px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.section-heading h2,.contact h2,.cta h2{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.product{background:#fff;border:1px solid #e3e7eb;border-radius:18px;overflow:hidden}.product-image{height:210px;position:relative;background:#101820}.product-image:after{position:absolute;inset:0;display:grid;place-items:center;font-size:76px;filter:drop-shadow(0 12px 20px #0005)}.product-image.pc{background:linear-gradient(135deg,#111827,#334155)}.product-image.pc:after{content:"🖥️"}.product-image.console{background:linear-gradient(135deg,#111,#374151)}.product-image.console:after{content:"🎮"}.product-image.laptop{background:linear-gradient(135deg,#18232e,#475569)}.product-image.laptop:after{content:"💻"}.product-body{padding:24px}.product-body h3{margin:6px 0 8px;font-size:1.3rem}.product-body p{margin:0;color:#65707c}.tag{display:inline-block;padding:4px 9px;border-radius:99px;background:#fff7e6;color:#a16207;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.cta{background:#101820;color:#fff;padding:72px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{max-width:750px}.contact{padding:90px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact p{color:#65707c}.contact-list{display:grid;gap:10px;margin-top:25px}.contact-list a:hover{color:#b45309}.contact-form{display:grid;gap:15px;padding:28px;border:1px solid #e1e5e9;border-radius:18px;background:#fafbfc}.contact-form label{display:grid;gap:6px;font-weight:700;font-size:.9rem}.contact-form input,.contact-form textarea{width:100%;font:inherit;border:1px solid #cfd5db;border-radius:9px;padding:12px;background:#fff}.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #f59e0b55;border-color:#f59e0b}.form-note{font-size:.78rem;margin:0}.contact-form .btn{justify-self:start}footer{background:#0a1016;color:#aeb8c2;padding:25px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer-inner a{color:#fbbf24}@media(max-width:850px){.nav nav{display:none}.menu{display:block}.nav.mobile-open nav{display:grid;position:absolute;top:72px;left:0;right:0;background:#0a1016;padding:18px 4%;gap:14px}.cards,.product-grid{grid-template-columns:1fr}.hero{min-height:620px;background-size:auto 78%;background-position:right center}.hero:before{background:linear-gradient(90deg,rgba(3,10,18,.97),rgba(3,10,18,.78) 60%,rgba(3,10,18,.38))}.section-heading,.cta-inner{align-items:flex-start;flex-direction:column}.contact-grid{grid-template-columns:1fr;gap:35px}}@media(max-width:520px){.hero{min-height:650px;background-size:auto 62%;background-position:center 18%}.hero-content{padding:65px 0}.hero h1{font-size:2.55rem}.hero-content{padding:70px 0}.actions .btn{width:100%}.intro,.contact,.inventory{padding:65px 0}}

/* Homepage cleanup */
.what-we-do-title{text-align:center;font-size:5rem;width:75%;margin:0 auto 1rem}.what-we-do-tagline{text-align:center;font-size:2.75rem;width:75%;margin:0 auto 1rem}.what-we-do-copy{text-align:center;font-size:1.25rem;width:85%;margin:0 auto}.contact-owner{font-size:1.65rem;width:55%;text-align:center;line-height:1.35}.cta-button-wrap{text-align:center}.cta-button{font-size:1.75rem;width:60%;text-align:center}
@media(max-width:850px){.what-we-do-title{font-size:3.5rem;width:92%}.what-we-do-tagline{font-size:2rem;width:92%}.what-we-do-copy{width:92%}.contact-owner,.cta-button{width:100%;font-size:1.25rem}}
@media(max-width:520px){.what-we-do-title{font-size:2.7rem}.what-we-do-tagline{font-size:1.55rem}.contact-owner,.cta-button{font-size:1.05rem}}
/* Bling upgrade */
:root{--blue:#16c7ff;--blue2:#0ea5e9;--gold:#f59e0b;--dark:#07111d;--ink:#17202a}
body{background:#f7f9fb}
.site-header{border-bottom:1px solid rgba(22,199,255,.18);box-shadow:0 3px 24px rgba(0,0,0,.28)}
.brand-mark{background:linear-gradient(135deg,var(--gold),#ffd166);box-shadow:0 0 22px rgba(245,158,11,.4);position:relative}
.brand-mark:after{content:"";position:absolute;inset:-4px;border:1px solid rgba(22,199,255,.35);border-radius:13px;animation:pulseGlow 2.4s infinite}
.nav nav a{transition:.2s;text-shadow:0 0 0 transparent}.nav nav a:hover{color:var(--blue);text-shadow:0 0 12px rgba(22,199,255,.55)}
.nav .phone{color:#ffd166!important;text-shadow:0 0 14px rgba(245,158,11,.35)}
.hero{background-color:#050b12;isolation:isolate}
.hero:before{background:linear-gradient(90deg,rgba(3,10,18,.99) 0%,rgba(3,10,18,.94) 34%,rgba(3,10,18,.5) 58%,rgba(3,10,18,.08) 82%)}
.hero:after{height:180px;background:linear-gradient(transparent,#07111d)}
.hero-overlay:before,.hero-overlay:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.hero-overlay:before{width:420px;height:420px;right:5%;top:12%;background:radial-gradient(circle,rgba(22,199,255,.16),transparent 68%);animation:floatGlow 7s ease-in-out infinite}
.hero-overlay:after{width:260px;height:260px;left:42%;bottom:4%;background:radial-gradient(circle,rgba(245,158,11,.12),transparent 68%);animation:floatGlow 9s ease-in-out infinite reverse}
.hero h1{background:linear-gradient(90deg,#fff 0%,#fff 55%,#aeeeff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(22,199,255,.08)}
.hero-copy{color:#dbe8f2}.eyebrow{color:var(--blue);text-shadow:0 0 13px rgba(22,199,255,.45)}
.btn.primary{background:linear-gradient(135deg,#f59e0b,#ffd166);box-shadow:0 8px 28px rgba(245,158,11,.25),inset 0 1px rgba(255,255,255,.5);position:relative;overflow:hidden}
.btn.primary:before{content:"";position:absolute;top:-80%;left:-25%;width:18%;height:260%;background:rgba(255,255,255,.55);transform:rotate(20deg);transition:.55s}
.btn.primary:hover:before{left:120%}.btn.primary:hover{box-shadow:0 10px 34px rgba(245,158,11,.38);transform:translateY(-2px)}
.features{padding:76px 0 92px;background:linear-gradient(180deg,#fff 0%,#f4f8fb 100%)}
.what-we-do-title{color:#111827;text-shadow:0 3px 0 #fff,0 0 22px rgba(22,199,255,.12)}
.what-we-do-tagline{color:#334155}.what-we-do-copy{color:#64748b}
.cards{gap:26px}.card{position:relative;border:1px solid #dce5ec;background:rgba(255,255,255,.92);box-shadow:0 16px 45px rgba(15,23,42,.08);overflow:hidden;transition:.3s}
.card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--blue),var(--gold));transform:scaleX(.35);transform-origin:left;transition:.3s}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(15,23,42,.14);border-color:rgba(22,199,255,.4)}.card:hover:before{transform:scaleX(1)}
.icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#e8faff,#fff5df);box-shadow:inset 0 0 0 1px rgba(22,199,255,.16),0 8px 22px rgba(15,23,42,.07);font-size:34px}
.card h2{color:#111827}.card p{color:#64748b}.text-link{color:#0369a1}.text-link:hover{color:#f59e0b}
.cta{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,rgba(22,199,255,.13),transparent 30%),radial-gradient(circle at 20% 80%,rgba(245,158,11,.11),transparent 30%),#07111d;border-top:1px solid rgba(22,199,255,.15);border-bottom:1px solid rgba(22,199,255,.15)}
.cta:before{content:"✦  ✧  ✦  ✧  ✦";position:absolute;right:5%;top:14%;font-size:1.5rem;letter-spacing:20px;color:rgba(22,199,255,.22);animation:twinkle 3s ease-in-out infinite}
.cta h2{color:#fff}.cta .eyebrow{color:#ffd166}.cta-button{box-shadow:0 0 0 1px rgba(245,158,11,.25),0 10px 38px rgba(245,158,11,.24)}
.contact{background:#fff}.contact-form{background:linear-gradient(145deg,#fff,#f4f8fb);box-shadow:0 18px 50px rgba(15,23,42,.08);border-color:#dce5ec}.contact-form input:focus,.contact-form textarea:focus{outline:3px solid rgba(22,199,255,.14);border-color:var(--blue)}
.contact-list span strong{color:#334155}.contact-list span:nth-last-child(-n+3){color:#b45309;font-size:.88rem;letter-spacing:.03em}
footer{border-top:1px solid rgba(22,199,255,.15)}
@keyframes pulseGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes floatGlow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-18px,14px,0)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.85;transform:translateY(8px)}}
@media(max-width:850px){.features{padding-top:55px}.cta:before{display:none}.hero:before{background:linear-gradient(90deg,rgba(3,10,18,.98),rgba(3,10,18,.82) 60%,rgba(3,10,18,.45))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero-trust{display:inline-block;margin:12px 0 0;padding:7px 12px;border:1px solid rgba(22,199,255,.28);border-radius:999px;background:rgba(22,199,255,.06);color:#b9efff;font-size:.78rem;font-weight:900;letter-spacing:.08em;box-shadow:0 0 24px rgba(22,199,255,.08)}


/* What We Do refresh */
.features#we_do{
  position:relative;
  overflow:hidden;
  padding:72px 0 78px;
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%,rgba(22,199,255,.22),transparent 34%),
    radial-gradient(circle at 88% 75%,rgba(245,158,11,.18),transparent 30%),
    linear-gradient(135deg,#07111d 0%,#0b2340 52%,#07111d 100%);
  border-top:1px solid rgba(22,199,255,.28);
  border-bottom:1px solid rgba(245,158,11,.2);
  box-shadow:inset 0 0 70px rgba(0,0,0,.18),0 12px 35px rgba(7,17,29,.14);
}
.features#we_do:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.055) 45%,transparent 55%);
  transform:translateX(-100%);animation:sectionShine 9s ease-in-out infinite;
}
.features#we_do .container{position:relative;z-index:1}
.features#we_do .what-we-do-title{
  font-size:4rem;
  width:75%;
  margin:0 auto 12px;
  color:#fff;
  text-shadow:0 0 20px rgba(22,199,255,.25),0 3px 0 rgba(0,0,0,.18);
}
.features#we_do .what-we-do-tagline{
  font-size:2.15rem;
  width:75%;
  margin:0 auto 12px;
  color:#ffd166;
  text-shadow:0 0 15px rgba(245,158,11,.2);
}
.features#we_do .what-we-do-copy{
  font-size:1.1rem;
  width:82%;
  margin:0 auto;
  color:#d9edf7;
}
.features#we_do .what-we-do-title u{text-decoration-color:#16c7ff;text-decoration-thickness:4px;text-underline-offset:10px}
@keyframes sectionShine{0%,65%,100%{transform:translateX(-100%)}80%{transform:translateX(100%)}}
@media(max-width:850px){
  .features#we_do{padding:58px 0 64px}
  .features#we_do .what-we-do-title{font-size:2.8rem;width:92%}
  .features#we_do .what-we-do-tagline{font-size:1.7rem;width:92%}
  .features#we_do .what-we-do-copy{font-size:1rem;width:92%}
}
@media(max-width:520px){
  .features#we_do .what-we-do-title{font-size:2.25rem}
  .features#we_do .what-we-do-tagline{font-size:1.4rem}
  .features#we_do .what-we-do-copy{font-size:.95rem}
}

/* I'd Love To Help — polished CTA */
.cta{scroll-margin-top:72px;position:relative;overflow:hidden;padding:78px 0 82px;background:radial-gradient(circle at 85% 18%,rgba(22,199,255,.20),transparent 32%),radial-gradient(circle at 12% 85%,rgba(245,158,11,.15),transparent 30%),linear-gradient(135deg,#050d17 0%,#0b2340 52%,#07111d 100%);border-top:1px solid rgba(22,199,255,.28);border-bottom:1px solid rgba(245,158,11,.24);box-shadow:inset 0 0 80px rgba(0,0,0,.22)}
.cta:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.045) 50%,transparent 75%);transform:translateX(-100%);animation:ctaShine 8s ease-in-out infinite}
.cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:42px}
.cta-copy{max-width:780px}
.cta .eyebrow{margin:0 0 12px;color:#ffd166;font-size:1.05rem;letter-spacing:.22em;text-shadow:0 0 16px rgba(245,158,11,.28)}
.cta h2{margin:0;color:#fff;font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;letter-spacing:-.035em;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.cta-sub{margin:16px 0 0;color:#bfe6f5;font-size:1rem}
.cta-button-wrap{display:flex;justify-content:center}
.cta-button{width:260px;min-height:78px;padding:12px 18px;border-radius:16px;text-align:center;font-size:1rem;line-height:1.15;flex-direction:column;gap:2px;box-shadow:0 0 0 1px rgba(245,158,11,.35),0 14px 36px rgba(245,158,11,.22),0 0 28px rgba(22,199,255,.10)}
.cta-button span{font-size:1.25rem;line-height:1}
.cta-button small{font-size:.82rem;font-weight:800;opacity:.82}
@keyframes ctaShine{0%,65%,100%{transform:translateX(-100%)}80%{transform:translateX(100%)}}
@media(max-width:850px){.cta{padding:62px 0 68px}.cta-inner{grid-template-columns:1fr;gap:26px;text-align:center}.cta-copy{max-width:700px;margin:auto}.cta .eyebrow{font-size:.9rem}.cta-sub{font-size:.95rem}.cta-button{width:min(340px,100%)}}
@media(max-width:520px){.cta{padding:52px 0 58px}.cta h2{font-size:1.85rem}.cta .eyebrow{font-size:.78rem}.cta-sub{font-size:.9rem}.cta-button{min-height:72px;font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.cta:after{animation:none}}

/* Final What We Do color correction */
.features#we_do{
  background:linear-gradient(135deg,#dff5ff 0%,#eef8fc 48%,#fff3d6 100%);
  color:#17202a;
  border-top:1px solid rgba(14,165,233,.28);
  border-bottom:1px solid rgba(245,158,11,.30);
  box-shadow:inset 0 8px 35px rgba(14,165,233,.07),inset 0 -8px 35px rgba(245,158,11,.06);
}
.features#we_do:before{
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.42) 45%,transparent 55%);
}
.features#we_do .what-we-do-title{
  color:#0b2940;
  text-shadow:0 2px 0 rgba(255,255,255,.8),0 0 18px rgba(14,165,233,.20);
}
.features#we_do .what-we-do-tagline{
  color:#a65300;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 0 14px rgba(245,158,11,.15);
}
.features#we_do .what-we-do-copy{color:#334e60}
.features#we_do .what-we-do-title u{text-decoration-color:#0ea5e9}

/* Third section flair — warm orange service/item showcase */
.features#items{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,#eef8fc 0%,#f3f5f2 16%,#f8eadc 36%,#f6d6b7 62%,#efc094 100%);
  border-top:0;
  border-bottom:2px solid rgba(190,96,34,.20);
  box-shadow:inset 0 18px 45px rgba(255,255,255,.28),inset 0 -18px 55px rgba(184,91,32,.07);
}
.features#items:before{
  content:none;
}
.features#items .card{
  background:rgba(255,255,255,.97);
  border-color:rgba(244,184,125,.55);
  box-shadow:0 16px 38px rgba(151,76,26,.12);
}
.features#items .card:before{
  background:linear-gradient(90deg,#f59e52,#ffc27d,#f59e52);
}
.features#items .icon{
  background:linear-gradient(135deg,#fff4e8,#fffdf9);
  box-shadow:inset 0 0 0 1px rgba(234,142,72,.18),0 8px 22px rgba(151,76,26,.08);
}
.features#items .card h2{color:#9a4f1e}
.features#items .card p{color:#665248}
.features#items .text-link{color:#c26122}
.features#items .text-link:hover{color:#8f4315}

/* Site-wide gradual section transitions — clean, modern, no decorative stars */
.hero{
  background-color:#07111d;
}
.features#we_do{
  background:linear-gradient(180deg,#07111d 0%,#dff5ff 20%,#eef8fc 55%,#f4f1e8 100%);
}
.features#items{
  background:linear-gradient(180deg,#f4f1e8 0%,#f7e7d7 28%,#f3d0ad 65%,#e9b77f 100%);
}
.cta{
  background:linear-gradient(180deg,#e9b77f 0%,#cfdde4 18%,#0d2030 48%,#07111d 100%);
}
.cta:before{content:none!important;}

/* Smooth section edges */
.features#we_do,
.features#items,
.cta{
  border-top:0;
  position:relative;
}
.features#we_do:after,
.features#items:after,
.cta:after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:72px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);
}
.features#we_do .container,
.features#items .container,
.cta .container{position:relative;z-index:2;}


/* Compact hero supporting copy */
.hero-copy-cta{font-size:.9rem;line-height:1.45;max-width:560px;margin:0 0 14px;color:#b9c6d2;}

/* Match cce.html's smooth, modern section-to-section transitions */
.index-transition{position:relative;overflow:hidden}
.hero{
  background-color:#07111d;
  background-image:url("business-card.jpg");
  background-position:right center;
  background-size:auto 92%;
  background-repeat:no-repeat;
}
.hero:after{
  height:120px;
  background:linear-gradient(180deg,transparent 0%,rgba(219,233,238,.18) 45%,#dff5ff 100%);
}
.features#we_do{
  background:linear-gradient(180deg,#dff5ff 0%,#eef8fc 30%,#f4f1e8 100%);
}
.features#items{
  background:linear-gradient(180deg,#f4f1e8 0%,#f7e7d7 24%,#f3d0ad 62%,#e9b77f 100%);
}
.cta{
  background:linear-gradient(180deg,#e9b77f 0%,#cfdde4 18%,#0d2030 50%,#07111d 100%);
}
.features#we_do:after,
.features#items:after,
.cta:after{
  height:76px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);
}

/* Accessibility contrast pass — backgrounds unchanged */
#we_do .what-we-do-title,
#we_do .what-we-do-tagline,
#we_do .what-we-do-copy,
#items .card h2,
#items .card p,
#items .text-link,
.inventory .section-heading h2,
.inventory .section-heading p,
.inventory .product-body h3,
.inventory .product-body p{color:#17202a;}
#items .text-link{color:#8f4315;}
#help .cta h2{color:#fff;}
#help .cta-sub{color:#dceaf3;}

/* cce.html — accessible contrast for the light What We Do transition */
.services .eyebrow{
  color:#12324a !important;
  text-shadow:none !important;
}
.services > .wrap > h2{
  color:#17202a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}
.services .service h3{color:#7d431f !important;}
.services .service p{color:#4b5563 !important;}


/* Responsive phone + 4K optimization */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, canvas, svg { max-width:100%; height:auto; }
h1,h2,h3,p,a,li,button { overflow-wrap:break-word; }

@media (max-width:767px) {
  .hero, #hero, section:first-of-type {
    min-height:auto !important;
    height:auto !important;
    padding:72px 18px 44px !important;
  }
  .hero h1, #hero h1 {
    font-size:clamp(2rem,9vw,3rem) !important;
    line-height:1.08 !important;
  }
  .hero h2, #hero h2 { font-size:clamp(1.15rem,5vw,1.6rem) !important; }
  .hero p, #hero p { font-size:clamp(1rem,4.2vw,1.2rem) !important; line-height:1.45 !important; }
  .hero-content, .hero-inner, .hero-grid { width:100% !important; max-width:100% !important; }
  .hero::before {
    background-size:contain !important;
    background-position:85% center !important;
    background-repeat:no-repeat !important;
    pointer-events:none !important;
  }
  .hero .btn, #hero .btn, .hero button, #hero button, .cta-button {
    width:min(100%,360px) !important;
    min-height:58px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:14px 18px !important;
    font-size:1.05rem !important;
  }
  .badges, .features, .hero-features, .service-badges {
    display:flex !important; flex-wrap:wrap !important;
    justify-content:center !important; gap:10px 14px !important;
  }
  .cta, .cta-section, .contact-section { padding:48px 18px !important; }
  .cta > *, .cta-section > *, .contact-section > * { max-width:100% !important; }
}

@media (min-width:768px) and (max-width:1599px) {
  .hero, #hero { padding-left:clamp(28px,5vw,80px) !important; padding-right:clamp(28px,5vw,80px) !important; }
  .hero h1, #hero h1 { font-size:clamp(2.5rem,4vw,4.6rem) !important; }
}

@media (min-width:1600px) {
  body { font-size:18px; }
  .hero, #hero {
    min-height:min(850px,78vh) !important;
    padding-left:clamp(60px,6vw,140px) !important;
    padding-right:clamp(60px,6vw,140px) !important;
  }
  .hero h1, #hero h1 {
    font-size:clamp(4rem,4vw,6.5rem) !important;
    line-height:1.04 !important;
  }
  .hero h2, #hero h2 { font-size:clamp(1.8rem,1.8vw,2.6rem) !important; }
  .hero p, #hero p { font-size:clamp(1.25rem,1.3vw,1.75rem) !important; }
  .hero .btn, #hero .btn, .hero button, #hero button, .cta-button {
    min-height:70px !important; padding:18px 32px !important; font-size:1.25rem !important;
  }
  section { padding-left:clamp(40px,5vw,120px); padding-right:clamp(40px,5vw,120px); }
}
@media (min-width:2200px) {
  .hero-content, .hero-inner, .cta-content, .contact-content { max-width:1900px !important; margin-left:auto; margin-right:auto; }
}


/* Center the background business card in the first section */
.hero::before,
#hero::before {
  background-position: center center !important;
}


/* First-section layout: keep all foreground content in the left area.
   The business-card background remains centered and behind the content. */
@media (min-width: 768px) {
  .hero, #hero, section:first-of-type {
    text-align: left !important;
  }

  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 52% !important;
    max-width: 900px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero h1, .hero h2, .hero p,
  #hero h1, #hero h2, #hero p {
    text-align: left !important;
  }

  .hero .btn, #hero .btn,
  .hero button, #hero button, .cta-button {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .badges, .features, .hero-features, .service-badges {
    justify-content: flex-start !important;
  }
}

@media (min-width: 1600px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 50% !important;
    max-width: 1000px !important;
  }
}

@media (max-width: 767px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* Business-card background opacity: 85% left to 90% right */
.hero::before,
#hero::before {
  opacity: 1 !important;
}


/* ==========================================================
   Business card foreground + responsive small/medium/4K layout
   ========================================================== */

/* Put the business card visually in the foreground of the hero,
   while keeping the actual text/buttons above it. */
.hero,
#hero,
section:first-of-type {
  position: relative !important;
  isolation: isolate !important;
}

.hero::before,
#hero::before {
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero > *,
#hero > *,
section:first-of-type > * {
  position: relative;
  z-index: 2;
}

/* If the card is a dedicated image/container, put it above the background
   and below the content. */
.hero .business-card,
.hero .business-card-bg,
.hero .card-bg,
#hero .business-card,
#hero .business-card-bg,
#hero .card-bg {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Keep text and interactive controls above the card. */
.hero h1, .hero h2, .hero h3, .hero p,
.hero a, .hero button, .hero .btn,
#hero h1, #hero h2, #hero h3, #hero p,
#hero a, #hero button, #hero .btn {
  position: relative;
  z-index: 3 !important;
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .hero, #hero, section:first-of-type {
    min-height: auto !important;
    padding: 64px 16px 40px !important;
  }

  .hero .business-card,
  .hero .business-card-bg,
  .hero .card-bg,
  #hero .business-card,
  #hero .business-card-bg,
  #hero .card-bg {
    width: 78% !important;
    max-width: 340px !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1, #hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.08 !important;
  }

  .hero p, #hero p {
    font-size: 1rem !important;
  }
}

/* ---------- Medium phones / tablets ---------- */
@media (min-width: 481px) and (max-width: 767px) {
  .hero, #hero, section:first-of-type {
    min-height: auto !important;
    padding: 76px 24px 48px !important;
  }

  .hero .business-card,
  .hero .business-card-bg,
  .hero .card-bg,
  #hero .business-card,
  #hero .business-card-bg,
  #hero .card-bg {
    width: 68% !important;
    max-width: 440px !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ---------- Standard desktop ---------- */
@media (min-width: 768px) and (max-width: 1599px) {
  .hero .business-card,
  .hero .business-card-bg,
  .hero .card-bg,
  #hero .business-card,
  #hero .business-card-bg,
  #hero .card-bg {
    width: min(44vw, 680px) !important;
    left: 68% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ---------- Large 4K ---------- */
@media (min-width: 1600px) {
  .hero, #hero, section:first-of-type {
    min-height: min(850px, 78vh) !important;
  }

  .hero .business-card,
  .hero .business-card-bg,
  .hero .card-bg,
  #hero .business-card,
  #hero .business-card-bg,
  #hero .card-bg {
    width: min(38vw, 900px) !important;
    left: 70% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    max-width: 1000px !important;
  }
}

/* ---------- Very large 4K / ultrawide ---------- */
@media (min-width: 2200px) {
  .hero .business-card,
  .hero .business-card-bg,
  .hero .card-bg,
  #hero .business-card,
  #hero .business-card-bg,
  #hero .card-bg {
    width: min(34vw, 1000px) !important;
  }
}


/* First section: center all foreground objects, with a minimum 50% content width */
@media (min-width: 768px) {
  .hero, #hero, section:first-of-type {
    text-align: center !important;
  }

  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: max(50%, 600px) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .hero h1, .hero h2, .hero h3, .hero p,
  #hero h1, #hero h2, #hero h3, #hero p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .btn, #hero .btn,
  .hero button, #hero button, .cta-button {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .badges, .features, .hero-features, .service-badges {
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1600px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: max(50%, 800px) !important;
    max-width: 1200px !important;
  }
}

@media (max-width: 767px) {
  .hero, #hero, section:first-of-type {
    text-align: center !important;
  }

  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .hero h1, .hero h2, .hero h3, .hero p,
  #hero h1, #hero h2, #hero h3, #hero p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .btn, #hero .btn,
  .hero button, #hero button, .cta-button {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .badges, .features, .hero-features, .service-badges {
    justify-content: center !important;
  }
}


/* =========================================================
   First section: maximum 85% width + all-screen optimization
   ========================================================= */

/* The first section itself can remain full-bleed; its CONTENT is capped at 85%. */
.hero, #hero, section:first-of-type {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

/* Center the complete first-section content within an 85% maximum width. */
.hero-content, .hero-inner, .hero-grid,
.hero .content, #hero .content {
  width: 85% !important;
  max-width: 85% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Keep every direct foreground object centered. */
.hero-content > *, .hero-inner > *, .hero-grid > *,
.hero .content > *, #hero .content > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Background business card stays centered and responsive. */
.hero::before, #hero::before {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
}

/* Flexible typography prevents clipping at intermediate sizes. */
.hero h1, #hero h1 {
  font-size: clamp(2rem, 5vw, 6rem) !important;
  line-height: 1.05 !important;
}
.hero h2, #hero h2 {
  font-size: clamp(1.25rem, 2.5vw, 3rem) !important;
  line-height: 1.15 !important;
}
.hero h3, #hero h3 {
  font-size: clamp(1.05rem, 1.8vw, 2rem) !important;
}
.hero p, #hero p {
  font-size: clamp(1rem, 1.5vw, 1.65rem) !important;
  line-height: 1.45 !important;
}

/* Buttons scale without becoming too wide. */
.hero .btn, #hero .btn,
.hero button, #hero button, .cta-button {
  width: min(100%, 380px) !important;
  min-height: clamp(54px, 5vw, 72px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Feature/badge objects remain centered and wrap naturally. */
.badges, .features, .hero-features, .service-badges {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(8px, 1.5vw, 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Small phones */
@media (max-width: 480px) {
  .hero, #hero, section:first-of-type {
    padding: 58px 10px 38px !important;
    min-height: auto !important;
  }
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 85% !important;
    max-width: 85% !important;
  }
  .hero h1, #hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.5rem) !important;
  }
  .hero p, #hero p {
    font-size: clamp(.95rem, 4vw, 1.1rem) !important;
  }
}

/* Medium phones / tablets */
@media (min-width: 481px) and (max-width: 767px) {
  .hero, #hero, section:first-of-type {
    padding: 68px 14px 44px !important;
    min-height: auto !important;
  }
}

/* Tablets and normal desktops */
@media (min-width: 768px) and (max-width: 1599px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 85% !important;
    max-width: 85% !important;
  }
}

/* Large desktop / 4K */
@media (min-width: 1600px) {
  .hero, #hero, section:first-of-type {
    min-height: min(900px, 82vh) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 85% !important;
    max-width: 85% !important;
  }
}

/* Very large 4K / 5K / ultrawide */
@media (min-width: 2560px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 85% !important;
    max-width: 85% !important;
  }
}


/* ==========================================================
   First section: minimum 75% width + responsive all screens
   ========================================================== */

/* Full-width section background; all first-section content is at least 75%
   of the available viewport/container width and remains centered. */
.hero, #hero, section:first-of-type {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Main first-section objects/content: never narrower than 75%. */
.hero-content, .hero-inner, .hero-grid,
.hero .content, #hero .content {
  width: 75% !important;
  min-width: 75% !important;
  max-width: 75% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Center all direct objects inside the first-section content area. */
.hero-content > *, .hero-inner > *, .hero-grid > *,
.hero .content > *, #hero .content > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fluid media and controls */
.hero img, #hero img, .hero video, #hero video {
  max-width: 100% !important;
  height: auto !important;
}

.hero h1, #hero h1 {
  font-size: clamp(1.9rem, 5vw, 6rem) !important;
  line-height: 1.05 !important;
}
.hero h2, #hero h2 {
  font-size: clamp(1.2rem, 2.5vw, 3rem) !important;
  line-height: 1.15 !important;
}
.hero p, #hero p {
  font-size: clamp(.98rem, 1.5vw, 1.7rem) !important;
  line-height: 1.45 !important;
}

.hero .btn, #hero .btn,
.hero button, #hero button, .cta-button {
  width: min(100%, 390px) !important;
  min-height: clamp(52px, 5vw, 74px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Badges/features stay inside the 75% area and wrap cleanly. */
.badges, .features, .hero-features, .service-badges {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(8px, 1.5vw, 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the centered background business card responsive. */
.hero::before, #hero::before {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
}

/* Small phones */
@media (max-width: 480px) {
  .hero, #hero, section:first-of-type {
    padding: 56px 8px 38px !important;
    min-height: auto !important;
  }
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 75% !important;
    min-width: 75% !important;
    max-width: 75% !important;
  }
  .hero h1, #hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.5rem) !important;
  }
}

/* Large phones / small tablets */
@media (min-width: 481px) and (max-width: 767px) {
  .hero, #hero, section:first-of-type {
    padding: 64px 12px 44px !important;
    min-height: auto !important;
  }
}

/* Tablets / laptops / standard desktop */
@media (min-width: 768px) and (max-width: 1599px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 75% !important;
    min-width: 75% !important;
    max-width: 75% !important;
  }
}

/* Large desktop / 4K */
@media (min-width: 1600px) {
  .hero, #hero, section:first-of-type {
    min-height: min(900px, 82vh) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 75% !important;
    min-width: 75% !important;
    max-width: 75% !important;
  }
}

/* 5K / ultrawide: retain 75% minimum while limiting extreme line lengths. */
@media (min-width: 2560px) {
  .hero-content, .hero-inner, .hero-grid,
  .hero .content, #hero .content {
    width: 75% !important;
    min-width: 75% !important;
    max-width: 1800px !important;
  }
}