/* Energy Incline Media — styles for the static (crawlable) sections: services, FAQ, service pages.
   The animated sections are drawn by eim-site.js; these use the same colours and type. */
:root{--gold:#CFB983;--gold2:#F4E2AA;--cream:#EAE8C8;--sec:#B9B8A2;--muted:#8A8D7C;--btn:#F1E6BC;--btnh:#FFF6D2;--bg:#0E1512;--raised:#121A16;--card:#151C18;--line:rgba(207,185,131,.22);--eout:cubic-bezier(.2,.8,.2,1);--gut:clamp(20px,4vw,56px);--body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--disp:"Tusker Grotesk Condensed","Anton","Arial Narrow",sans-serif}
html{scroll-padding-top:96px}
body{color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}

/* Text copies of the animated sections, for search engines and AI crawlers. Hidden once scripts run. */
.js .eim-fb{display:none}
.eim-fb{padding:24px var(--gut);font:400 16px/1.6 var(--body);color:var(--sec)}
.eim-fb h1,.eim-fb h2,.eim-fb h3{font-family:var(--disp);text-transform:uppercase;color:var(--cream);margin:16px 0 8px}
.eim-fb a{color:var(--gold)}

.x-sec,.x-sec *,.x-main,.x-main *{box-sizing:border-box}
.x-sec{position:relative;padding:clamp(64px,9vw,120px) var(--gut);margin:0}
.x-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(207,185,131,0) 0%,var(--line) 18%,var(--line) 82%,rgba(207,185,131,0) 100%)}
/* The client-work section ends on its own bright gold rule, so the section after it skips the faint rule and
   leaves the same 64px under that rule as the client cards leave above it (24px card padding + 40px row gap) */
eim-client-work + .x-sec{padding-top:64px}
eim-client-work + .x-sec::before{display:none}
/* Homepage services → FAQ: the same 64px either side of the dividing rule */
#services{padding-bottom:64px}
#services ~ #faq{padding-top:64px}
.x-in{max-width:1240px;margin:0 auto}
.x-head{display:flex;flex-direction:column;gap:14px;max-width:860px;margin-bottom:clamp(32px,4vw,52px)}
.x-eye{margin:0;font:800 11px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.x-h2{margin:0;font:700 clamp(36px,4.4vw,60px)/.92 var(--disp);text-transform:uppercase;letter-spacing:.005em;display:flex;flex-wrap:wrap;gap:0 .25em;color:var(--cream)}
.x-h1{margin:0;font:700 clamp(54px,8.4vw,120px)/.88 var(--disp);text-transform:uppercase;display:flex;flex-direction:column;color:var(--cream);text-wrap:balance}
.g{color:var(--gold)}
.x-lead{margin:0;font:400 clamp(16px,1.35vw,18px)/1.7 var(--body);color:var(--sec);max-width:720px;text-wrap:pretty}
.x-lead strong{color:var(--cream);font-weight:700}
.x-sec p,.x-main p{margin:0}
.x-sec a,.x-main a{color:inherit;text-decoration:none}

/* buttons, same as the site's */
.x-ctas{display:flex;gap:12px;flex-wrap:wrap}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 30px;font:800 14px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .16s var(--eout),color .16s var(--eout),box-shadow .16s var(--eout),transform .1s}
.x-btn:active{transform:scale(.97)}
.x-btn.pri{background:var(--btn);color:var(--bg)}.x-btn.pri:hover{background:var(--btnh);box-shadow:0 0 28px rgba(244,226,170,.35)}
.x-btn.sec{color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(234,232,200,.36)}.x-btn.sec:hover{background:var(--cream);color:var(--bg)}
.x-btn.slant{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:0 34px}
.x-btn svg{flex:none}

/* service cards */
.x-grid{display:grid;gap:12px}
.x-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s var(--eout),background .2s var(--eout)}
a.x-card:hover{box-shadow:inset 0 0 0 1px var(--gold),0 0 40px rgba(207,185,131,.08);background:#18201B}
.x-num{font:700 46px/.8 var(--disp);color:var(--gold)}
.x-card h3{margin:0;font:700 clamp(24px,2vw,28px)/.98 var(--disp);text-transform:uppercase;color:var(--cream)}
.x-card p{font:400 15px/1.65 var(--body);color:var(--sec)}
.x-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
a.x-card:hover .x-more svg{transform:translateX(3px)}.x-more svg{transition:transform .2s var(--eout)}
/* Explore link: gold underline under the label (not the arrow) draws in with a glow and one highlight sweep on card hover */
.x-ul{position:relative}
.x-ul::after{content:'';position:absolute;left:0;right:.08em;bottom:-6px;height:2px;pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--eout),box-shadow .45s var(--eout);background:linear-gradient(90deg,var(--gold) 0 40%,var(--gold2) 50%,var(--gold) 60% 100%) 100% 0/250% 100% no-repeat}
a.x-card:hover .x-ul::after,a.x-card:focus-visible .x-ul::after{transform:scaleX(1);box-shadow:0 0 8px rgba(207,185,131,.55);animation:ulSheen .9s .2s var(--eout) both}
@keyframes ulSheen{from{background-position:100% 0}to{background-position:0 0}}

/* service icons: small gold icon beside each card number; each makes one move when its card is hovered
   (the script on the homepage adds .play to the card) */
.x-top{display:flex;align-items:center;gap:14px}
.x-ico{flex:none;width:40px;height:40px;color:var(--gold);transition:color .2s var(--eout)}
.x-ico svg{display:block;width:100%;height:100%}
a.x-card:hover .x-ico{color:var(--gold2)}
svg.motion .clap{transform-box:view-box;transform-origin:6px 20px}
svg.motion .spin{transform-box:view-box;transform-origin:24px 24px}
svg.motion .ln{stroke-dasharray:1 2}
svg.motion .cur{transform-box:view-box;transform-origin:26px 18px}
svg.motion .rip{opacity:0;transform-box:view-box;transform-origin:26px 18px}
svg.motion .bar{transform-box:fill-box;transform-origin:50% 50%}
svg.motion .env{transform-box:view-box;transform-origin:24px 24px}
.play svg.motion .clap{animation:clapT .8s cubic-bezier(.3,0,.2,1)}
.play svg.motion .spin{animation:spinT 1s cubic-bezier(.2,.8,.2,1)}
.play svg.motion .cur{animation:curT .9s cubic-bezier(.2,.8,.2,1)}
.play svg.motion .rip{animation:ripT .6s ease-out .45s}
.play svg.motion .ln{animation:lnT .5s cubic-bezier(.6,0,.3,1) .55s both}.play svg.motion .l2{animation-delay:.68s}
.play svg.motion .bar{animation:barT .75s cubic-bezier(.3,0,.2,1) calc(var(--i)*.06s)}
.play svg.motion .env{animation:envT .9s cubic-bezier(.3,0,.2,1)}
@keyframes clapT{35%,50%{transform:rotate(13deg)}}
@keyframes spinT{to{transform:rotate(120deg)}}
@keyframes curT{0%{transform:translate(8px,10px);opacity:0}50%{transform:translate(0,0);opacity:1}62%{transform:scale(.8)}78%{transform:scale(1)}}
@keyframes ripT{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes lnT{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes barT{30%{transform:scaleY(.4)}65%{transform:scaleY(1.15)}}
@keyframes envT{30%{transform:scale(.92)}65%{transform:scale(1.04)}}

/* FAQ */
.x-faqwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.x-faqwrap .x-head{margin-bottom:0;position:sticky;top:110px}
.x-faq{display:flex;flex-direction:column}
.x-faq details{box-shadow:inset 0 -1px 0 var(--line)}
.x-faq details:first-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.x-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary h3{margin:0;font:700 clamp(19px,1.6vw,22px)/1.25 var(--body);color:var(--cream);text-transform:none}
.x-faq summary:hover h3{color:var(--gold2)}
.x-pm{position:relative;flex:none;width:28px;height:28px;box-shadow:inset 0 0 0 1px rgba(207,185,131,.55)}
.x-pm::before,.x-pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--gold);transform:translate(-50%,-50%);transition:transform .2s var(--eout)}
.x-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.x-faq details[open] .x-pm::after{transform:translate(-50%,-50%) rotate(0)}
.x-a{padding:0 48px 24px 0;font:400 16px/1.7 var(--body);color:var(--sec)}
.x-a a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* services strip (work, contact and service pages) */
.x-band{padding-top:56px;padding-bottom:56px}
.x-band .x-in{display:flex;align-items:center;gap:20px 40px;flex-wrap:wrap}
.x-links{display:flex;flex-wrap:wrap;gap:10px}
.x-links a{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;font:800 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .16s var(--eout),color .16s var(--eout)}
.x-links a:hover,.x-links a[aria-current]{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}

/* service pages */
.x-main{display:block}
.x-hero{padding:clamp(40px,6vw,88px) var(--gut) clamp(56px,7vw,96px);position:relative;overflow:hidden}
.x-hero::after{content:"";position:absolute;top:0;bottom:0;right:22%;width:1px;transform:skewX(-9deg);opacity:.5;background:linear-gradient(180deg,rgba(207,185,131,0),var(--gold) 35%,rgba(207,185,131,0));pointer-events:none}
.x-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;position:relative;z-index:1}
.x-hero-copy{display:flex;flex-direction:column;gap:26px}
.x-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font:800 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.x-crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.x-crumbs a:hover{color:var(--gold)}
.x-crumbs [aria-current]{color:var(--gold)}
.x-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.x-facts li{height:28px;padding:0 12px;display:inline-flex;align-items:center;font:800 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(234,232,200,.24)}
.x-facts li:first-child{background:var(--gold);color:var(--bg);box-shadow:none}
.x-media{margin:0;display:flex;flex-direction:column;gap:12px;justify-self:end;width:100%}
.x-frame{position:relative;background:var(--raised);box-shadow:0 0 0 1px var(--gold),0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.x-frame.tall{aspect-ratio:9/16;height:min(72vh,640px);margin-left:auto}
.x-frame.wide{aspect-ratio:16/9}
.x-frame video,.x-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.x-media figcaption{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font:800 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.x-media figcaption b{color:var(--gold);font-weight:800}
.x-media.tall-wrap{width:auto}
.x-media.tall-wrap figcaption{justify-content:flex-end}

/* proof: who we've done it for */
.x-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.x-pcard{display:flex;flex-direction:column;gap:12px;padding:26px 24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.x-pcard .x-cat{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.x-pcard h3{margin:0;font:700 30px/.95 var(--disp);text-transform:uppercase}
.x-pcard p{font:400 15px/1.65 var(--body);color:var(--sec)}
.x-pcard a.x-ext{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.x-pcard a.x-ext:hover{color:var(--gold2)}

/* process */
.x-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;counter-reset:s}
.x-steps li{display:flex;flex-direction:column;gap:10px;padding-top:18px;box-shadow:inset 0 1.5px 0 var(--gold)}
.x-steps b{font:700 44px/.85 var(--disp);color:var(--gold2)}
.x-steps h3{margin:0;font:700 22px/.98 var(--disp);text-transform:uppercase}
.x-steps p{font:400 14px/1.6 var(--body);color:var(--sec)}

/* packages */
.x-price{display:flex;flex-direction:column;gap:10px}
.x-price .x-amt{font:700 56px/.85 var(--disp);color:var(--gold2)}
.x-price .x-amt small{font:800 12px/1 var(--body);letter-spacing:.1em;color:var(--muted);margin-left:6px;vertical-align:middle}
.x-note{margin-top:18px;font:400 14px/1.6 var(--body);color:var(--muted)}

/* closing call to action */
.x-cta .x-in{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.x-cta .x-head{margin-bottom:0}

/* Titles match the hero ("Content that moves."): Tusker Grotesk Condensed (Wix-hosted, Anton fallback) drawn as designed (no faux bold),
   no extra letter spacing, 0.9 line height */
.x-sec,.x-main,.eim-fb{font-synthesis:none}
.x-h1,.x-h2,.x-num,.x-card h3,.x-pcard h3,.x-steps b,.x-steps h3,.x-price .x-amt,.eim-fb h1,.eim-fb h2,.eim-fb h3{letter-spacing:0}
.x-h1,.x-h2,.x-card h3,.x-pcard h3,.x-steps h3{line-height:.9}

@media (max-width:1080px){.x-4{grid-template-columns:repeat(2,minmax(0,1fr))}.x-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}}
@media (max-width:860px){
  .x-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-faqwrap,.x-hero-in{grid-template-columns:minmax(0,1fr)}
  .x-faqwrap .x-head{position:static}
  .x-media{justify-self:stretch}
  .x-frame.tall{height:auto;width:min(100%,380px);margin:0}
  .x-media.tall-wrap figcaption{justify-content:flex-start}
  .x-hero::after{right:10%}
}
@media (max-width:620px){
  .x-4,.x-3,.x-2,.x-proof{grid-template-columns:minmax(0,1fr)}
  .x-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-a{padding-right:0}
  .x-btn{height:48px;padding:0 22px;font-size:13px}.x-btn.slant{padding:0 28px}
}
@media (prefers-reduced-motion:reduce){.x-card,.x-pm::after,.x-more svg,.x-ico,.x-ul::after{transition:none}.x-ul::after{animation:none!important}svg.motion *{animation:none!important}}