/* Layout: follows the reference Jack chose (dark, Inter, square cards, accent band, process circles, big footer CTA),
   with Brightwell's gold as the accent so it sits with the logo. IT header uses the existing site style and real logo, with the requested IT brand and Pricing link. */
:root{
  --bg:#02050A;
  --panel:#0A1019;
  --card:#0C131C;
  --card-2:#111A25;
  --line:rgba(255,255,255,.09);
  --white:#FFFFFF;
  --soft:#C9CFD7;
  --muted:#8E98A5;
  --gold:#E0BC82;
  --gold-hi:#EDD2A1;
  --on-gold:#02050A;
  --cream:#E8E4DA;
  --ink:#17364C;
  --font:"Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
}
@font-face{font-family:Inter;src:url("/digital-marketing/assets/inter-latin-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--white)}
body{margin:0;font:400 16px/1.78 var(--font);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:20px}
.center{text-align:center}
.kicker{display:inline-flex;align-items:center;gap:14px;font-size:18px;font-weight:500;color:var(--gold)}
.kicker svg{width:28px;height:10px;stroke:var(--gold)}
.h3{font-size:clamp(32px,4vw,48px);font-weight:600;letter-spacing:-.96px;line-height:1.2}
.h3 em{font-style:italic;font-weight:400;color:var(--gold)}
.sub{font-size:18px;line-height:1.78;color:var(--soft)}
.arrow{width:16px;height:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1.2 var(--font);padding:16px 28px;text-decoration:none;border:1px solid var(--gold);transition:background .2s,color .2s}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-hi)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- page hero ---------- */
.page-hero{position:relative;padding-block:120px 110px;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 100%)}
.page-hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.page-hero h1{position:relative;font-size:clamp(52px,7.4vw,85px);font-weight:600;letter-spacing:-1.7px;line-height:1.1}
.page-hero h1 .rays{position:absolute;right:-78px;top:-22px;width:62px;height:62px;stroke:var(--gold)}
.page-hero .sub{max-width:760px}
.page-hero .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding-top:10px}
@media (max-width:640px){.page-hero{padding-block:80px 72px}.page-hero h1 .rays{right:-44px;top:-18px;width:40px;height:40px}}

/* ---------- intro split ---------- */
.intro{padding-block:110px}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.intro .body{border-left:3px solid var(--gold);padding-left:28px;margin-top:28px;font-size:18px;line-height:1.78;color:var(--white)}
.pills{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:22px 18px}
.pills li{background:#FFFFFF;color:var(--on-gold);font-size:17px;font-weight:600;letter-spacing:-.3px;text-transform:uppercase;padding:14px 24px;border-radius:40px;box-shadow:0 5px 0 var(--gold)}
.glance{background:var(--panel);border:1px solid var(--line);padding:30px}
.glance-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px}
.glance-head span{font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.glance-head small{font-size:13px;color:var(--muted)}
.glance ul{list-style:none;margin:0;padding:0}
.glance li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.glance li b{display:block;font-size:17px;font-weight:600}
.glance .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:2px;line-height:1.5}
.glance .tag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--on-gold);background:var(--gold);padding:2px 7px}
.glance .p{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3}
.glance .p b{font-size:28px;letter-spacing:-.8px}
.glance .p span{font-size:13px;color:var(--muted)}
.glance-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;font-size:14px;color:var(--muted)}
.glance-foot b{color:var(--white)}
.glance-foot a{color:var(--gold);font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
@media (max-width:960px){.intro{padding-block:72px}.intro .wrap{grid-template-columns:minmax(0,1fr);gap:48px}}
@media (max-width:420px){.pills li{font-size:15px;padding:12px 18px}.glance{padding:22px 18px}.glance .p b{font-size:23px}}

/* ---------- services ---------- */
.services{padding-block:40px 110px}
.section-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:48px}
.section-head .sub{max-width:620px}
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.svc{position:relative;flex:0 1 calc(25% - 15px);min-width:220px;background:var(--card);border:1px solid var(--line);padding:30px 24px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;text-decoration:none;color:var(--white);transition:background .25s,color .25s,border-color .25s}
.svc .ico{width:48px;height:48px;stroke:var(--gold);margin-top:14px;transition:stroke .25s}
.svc h3{font-size:18px;font-weight:600;letter-spacing:-.3px}
.svc p{font-size:15px;line-height:1.6;color:var(--muted);transition:color .25s}
.svc .go{position:absolute;top:8px;right:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:transform .25s}
.svc .go svg{width:16px;height:16px;stroke:var(--gold)}
.svc.on,.svc:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.svc.on .ico,.svc:hover .ico{stroke:var(--on-gold)}
.svc.on p,.svc:hover p{color:#2B2416}
.svc:hover .go{transform:rotate(45deg)}
@media (max-width:1000px){.svc{flex-basis:calc(50% - 10px)}}
@media (max-width:560px){.svc{flex-basis:100%}}

/* ---------- accent band ---------- */
.band{background:var(--gold);color:var(--on-gold)}
.band ul{list-style:none;margin:0;padding:34px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.band li{font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:-.54px;display:flex;align-items:center;gap:12px}
.band li svg{flex-shrink:0;width:22px;height:22px;stroke:var(--on-gold)}
@media (max-width:860px){.band ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.band ul{grid-template-columns:minmax(0,1fr);gap:14px;padding:28px 0}}

/* ---------- process ---------- */
.process{padding-block:110px}
.process .head{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-bottom:56px}
.process .head h3{font-size:18px;font-weight:500;letter-spacing:-.36px}
.circles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;justify-items:center;align-items:center}
.circle{width:270px;max-width:100%;aspect-ratio:1;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:8px}
.circle .n{font-size:16px;font-weight:500;color:var(--gold)}
.circle h3{font-size:20px;font-weight:700;letter-spacing:-.4px;line-height:1.2}
.circle hr{width:70%;border:0;border-top:1px solid var(--line);margin:10px 0}
.circle p{font-size:15px;line-height:1.6;color:var(--soft)}
.circle.mid{width:290px;background:radial-gradient(circle at 30% 25%,var(--gold-hi),var(--gold) 60%,#C9A15C);border-color:var(--gold);color:var(--on-gold)}
.circle.mid .n{color:#3A2E14}
.circle.mid hr{border-top-color:rgba(2,5,10,.25)}
.circle.mid p{color:#2B2416}
@media (max-width:860px){.circles{grid-template-columns:minmax(0,1fr)}.circle,.circle.mid{width:280px}}

/* ---------- pricing ---------- */
.pricing{padding-block:40px 110px}
.toggle{display:inline-flex;border:1px solid var(--line);padding:4px;background:var(--panel)}
.toggle button{font:600 15px/1 var(--font);color:var(--muted);background:transparent;border:0;padding:12px 20px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold)}
.toggle .save{font-weight:500;margin-left:6px;opacity:.85}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:0;padding-top:14px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);padding:36px 30px;display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:24px;align-content:start}
@supports not (grid-template-rows:subgrid){.plan{display:flex;flex-direction:column;gap:24px}}
.plan.rec{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.plan .tag{position:absolute;top:-13px;left:29px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--on-gold);background:var(--gold);padding:5px 11px}
.plan h3{font-size:20px;font-weight:600;letter-spacing:-.3px}
.plan .who{font-size:15px;color:var(--muted);margin-top:2px}
.amount{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.amount .v{font-size:48px;font-weight:600;letter-spacing:-1.5px;line-height:1}
.amount .per{font-size:15px;color:var(--muted)}
.plan .note{font-size:14px;color:var(--muted);margin-top:10px}
.plan .btn{width:100%;padding:15px 20px;font-size:15px}
.plan ul{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;font-size:16px;color:var(--soft)}
.plan li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.plan li svg{flex-shrink:0;width:16px;height:16px;margin-top:4px;stroke:var(--gold)}
.payg{margin-top:28px;border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:200px repeat(4,minmax(0,1fr))}
.payg > div{padding:20px 22px;border-left:1px solid var(--line);line-height:1.5}
.payg > div:first-child{border-left:0;display:flex;align-items:center;font-weight:600;color:var(--gold)}
.payg span{display:block;font-size:13px;color:var(--muted)}
.payg b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr);row-gap:32px}.plan{display:flex;flex-direction:column;gap:24px;grid-row:auto}
  .payg{grid-template-columns:repeat(2,minmax(0,1fr))}.payg > div:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}.payg > div:nth-child(2),.payg > div:nth-child(4){border-left:0}.payg > div:nth-child(2),.payg > div:nth-child(3){border-bottom:1px solid var(--line)}}

/* ---------- FAQ ---------- */
.faq{padding-block:40px 120px}
.faq .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.badge{position:relative;width:148px;height:148px;margin-bottom:32px}
.badge .ring{position:absolute;inset:0;animation:spin 24s linear infinite}
.badge .ring text{font:500 10.5px var(--font);letter-spacing:3.2px;fill:var(--soft);text-transform:uppercase}
.badge .core{position:absolute;inset:36px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center}
.badge .core svg{width:40px;height:40px;stroke:var(--gold)}
.badge::before{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.faq .intro-text{color:var(--soft);font-size:17px;margin-top:20px;max-width:420px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px;font-weight:600;letter-spacing:-.3px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--card-2)}
.faq summary .pm svg{width:14px;height:14px;stroke:var(--gold);transition:transform .2s}
.faq details[open] summary .pm{background:var(--gold)}
.faq details[open] summary .pm svg{stroke:var(--on-gold);transform:rotate(45deg)}
.faq details p{padding:0 50px 24px 0;color:var(--soft);font-size:16px;line-height:1.75}
@media (max-width:900px){.faq .wrap{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ---------- footer CTA ---------- */
.site-footer{background:radial-gradient(900px 520px at 100% 100%,rgba(224,188,130,.14),rgba(224,188,130,0) 70%),var(--panel);border-top:1px solid var(--line)}
.foot-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.foot-cta{padding:80px 48px 72px 0;border-right:1px solid var(--line)}
.foot-cta h2{font-size:clamp(44px,5.4vw,72px);font-weight:600;letter-spacing:-1.8px;line-height:1.08}
.foot-cta h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.pill-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.pill-links a{display:inline-flex;align-items:center;gap:14px;font-size:clamp(17px,1.6vw,22px);color:var(--white);text-decoration:none;border:1px solid rgba(255,255,255,.28);border-radius:40px;padding:18px 30px;transition:border-color .2s,color .2s}
.pill-links a:hover{border-color:var(--gold);color:var(--gold)}
.pill-links svg{width:16px;height:16px;stroke:currentColor}
.foot-cols{padding:80px 0 72px 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.foot-cols h4{font-size:19px;font-weight:600;margin-bottom:18px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot-cols a{color:var(--soft);text-decoration:none;font-size:16px}
.foot-cols a:hover{color:var(--gold)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:26px;font-size:14px;color:var(--muted)}
.foot-bottom nav{display:flex;gap:28px}
.foot-bottom a{color:var(--soft);text-decoration:none}
.foot-bottom a:hover{color:var(--gold)}
@media (max-width:900px){.foot-main{grid-template-columns:minmax(0,1fr)}.foot-cta{padding:64px 0 48px;border-right:0;border-bottom:1px solid var(--line)}.foot-cols{padding:40px 0 48px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.badge .ring{animation:none}}

/* Feed states and shared IT page details. */
.loading,.error{padding:22px 0;color:var(--soft)}.error a{color:var(--gold)}.plan ul li::before{content:"✓";color:var(--gold);flex:none}.plan ul{font-size:15px}.plan header{min-width:0}.plan .amount{flex-wrap:wrap}.glance li{min-width:0}.glance .p{flex:none}.included-list{list-style:none}.foot-cols .footer-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px}.footer-socials svg{width:22px;height:22px}.foot-address{display:block;margin-top:28px;color:var(--muted);font-size:14px;line-height:1.6;font-style:normal}.support-terms{padding-block:0 80px}.support-terms ul{padding-left:22px;color:var(--soft)}.it-local .hero{padding-block:110px;border-bottom:1px solid var(--line)}.it-local .w{max-width:1140px;padding-inline:20px;margin:auto}.it-local .hero h1{font-size:clamp(40px,5vw,66px);line-height:1.1;letter-spacing:-1.5px;max-width:880px;margin:18px 0 24px}.it-local .hero p{color:var(--soft);font-size:18px;max-width:760px}.it-local .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}.it-local .section{padding-block:80px}.it-local .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.it-local .card{padding:30px;background:var(--card);border:1px solid var(--line)}.it-local .card h2{font-size:22px;line-height:1.3;margin-bottom:18px}.it-local .card p,.it-local .area p{color:var(--soft)}.it-local .area{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:38px;border:1px solid var(--line);background:var(--panel)}.it-local .area h2{font-size:32px;line-height:1.2;margin-bottom:18px}
@media(max-width:700px){.it-local .grid,.it-local .area{grid-template-columns:1fr}.it-local .hero{padding-block:72px}.pill-links a{padding:16px 18px;font-size:16px;max-width:100%;overflow-wrap:anywhere}.pill-links svg{flex:none}.foot-bottom nav{flex-wrap:wrap}.page-hero h1 .rays{right:-32px;width:30px}.glance li{gap:10px}.glance .p b{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.svc:hover .go,.faq details[open] summary .pm svg{transform:none}.svc,.btn,.pill-links a{transition:none}.badge .ring{animation:none}}
/* The feed feature list uses CSS checks; custom scope retains its SVG checks. */
.plan ul:not(.included-list) li::before{content:none}
@media(prefers-reduced-motion:reduce){
 .svc:not(.on):hover{background:var(--card);border-color:var(--line);color:var(--white)}
 .svc:not(.on):hover .ico{stroke:var(--gold)}
 .svc:not(.on):hover p{color:var(--muted)}
 .btn-gold:hover{background:var(--gold)}
 .btn-ghost:hover{border-color:rgba(255,255,255,.28);color:var(--white)}
 .pill-links a:hover{border-color:rgba(255,255,255,.28);color:var(--white)}
}

/* Footer contact details and published weekday hours, without link directories. */
.site-footer .foot-cols{display:flex;flex-direction:column;gap:32px}.footer-hours h3,.footer-connect h3{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;line-height:1.4;margin:0 0 12px}.footer-hours h3 svg{width:22px;height:22px;color:var(--gold)}.footer-hours>p{color:var(--muted);font-size:14px;margin:0 0 20px}.footer-hours dl{margin:0}.footer-hours dl>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 0;color:var(--soft);font-size:15px;line-height:1.5}.footer-hours dt,.footer-hours dd{margin:0}.footer-hours dd{font-variant-numeric:tabular-nums;white-space:nowrap}.site-footer .footer-socials{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;margin-top:16px}.footer-socials a{border:1px solid var(--line);border-radius:50%;flex:0 0 44px}.footer-contact{display:flex;flex-direction:column;gap:20px;margin-top:36px;font-style:normal;color:var(--soft);font-size:16px;line-height:1.65}.footer-contact>div,.footer-contact>a{display:flex;align-items:flex-start;gap:14px;text-decoration:none}.footer-contact svg{width:22px;height:22px;margin-top:2px;flex:none;color:var(--gold)}.footer-contact span{min-width:0;overflow-wrap:anywhere}.footer-contact a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:420px){.footer-hours dl>div{font-size:14px;gap:12px}.footer-contact{font-size:15px}.site-footer .footer-socials{gap:12px}}

/* Persistent phone action with a brief attention cue and a quiet interval. */
.it-floating-call{position:fixed;left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--on-gold);border:1px solid var(--gold-hi);box-shadow:0 6px 24px #0006;text-decoration:none}
.it-floating-call svg{width:26px;height:26px}.it-floating-call:focus-visible{outline:3px solid var(--white);outline-offset:4px}
.site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
@media(max-width:700px){.it-floating-call{left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

.it-floating-call::before{content:"";position:absolute;inset:-2px;border:2px solid var(--gold);border-radius:inherit;pointer-events:none;opacity:0;animation:it-call-pulse 5s ease-out infinite}
.it-floating-call svg{animation:it-call-wiggle 5s ease-in-out infinite;transform-origin:50% 60%}
@keyframes it-call-pulse{0%{opacity:.65;transform:scale(1)}28%,100%{opacity:0;transform:scale(1.45)}}
@keyframes it-call-wiggle{0%,4%,12%,20%,100%{transform:rotate(0)}6%,14%{transform:rotate(-12deg)}9%,17%{transform:rotate(12deg)}}
.it-floating-call:is(:hover,:focus-visible)::before,.it-floating-call:is(:hover,:focus-visible) svg{animation:none}
@media(prefers-reduced-motion:reduce){.it-floating-call::before,.it-floating-call svg{animation:none;transform:none}}