/* /shopify-expert (Raleigh). Builds on css/styles.css: the homepage's nav, hero, console,
   proof band, logo strip, sections, services, steps, recs, footer, sticky bar and consult
   dialog are reused as-is. Only page-specific pieces live here. No images, no third-party code. */

/* ---------- Nav ---------- */
.nav-links a[aria-current="page"]{color:var(--accent)}
.mobile-menu > a[aria-current="page"]{color:var(--accent)}
.se-nav-cta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:9px 12px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;
  transition:background .2s,color .2s;
}
.se-nav-cta:hover,.se-nav-cta:focus-visible{background:var(--accent);color:var(--bg)}
@media (max-width:359px){.se-nav-cta{display:none}}
@media (min-width:861px){.se-nav-cta{font-size:11px;padding:8px 14px}}

/* ---------- Hero ---------- */
.se-wordmark{font-size:36vw;top:auto;bottom:-.1em;opacity:.06}
.se-display{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(60px,18vw,128px);line-height:.84;letter-spacing:-.015em;margin-bottom:24px;
}
.se-outline{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.se-lime{color:var(--accent)}
.se-h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,7vw,36px);line-height:1.06;letter-spacing:-.01em;
  color:var(--muted-2);max-width:22ch;margin-bottom:16px;
}
.se-h1 em{color:var(--parchment)}
@supports not (-webkit-text-stroke:1px black){.se-outline{color:var(--accent)}}
@media (min-width:861px){
  .se-wordmark{font-size:min(26vw,440px);bottom:-.1em;opacity:.06}
  .se-display{font-size:clamp(84px,8.4vw,132px)}
  .se-h1{font-size:clamp(28px,2.5vw,38px)}
}

/* ---------- Crew console: CSS-only loop (12s), research -> build -> data -> you ---------- */
.se-console{overflow:hidden}
.se-prog{height:2px;background:var(--line)}
.se-prog i{display:block;height:100%;background:var(--accent);transform-origin:left;animation:se-prog 12s linear infinite}
@keyframes se-prog{0%{transform:scaleX(0)}96%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.se-row{cursor:default}
.se-row::after{transform:scaleX(0)}
.se-state{position:relative;width:76px;height:23px;padding:0;border:0;background:none}
.se-state i{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;
  border:1px solid var(--line);color:var(--muted);opacity:0;
}
.se-state .s-w{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.se-state .s-d{color:var(--accent);border-color:rgba(200,245,66,.4)}
.se-con-cmd{padding:12px 14px;border-top:1px solid var(--line-soft);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.se-con-cmd span{color:var(--accent)}
.se-caret{color:var(--accent);font-weight:400;animation:se-caret 1s steps(1) infinite}
@keyframes se-caret{50%{opacity:0}}
.se-con-foot{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-soft)}
@media (max-width:359px){.se-state{grid-column:2;justify-self:start}}
@keyframes se-q1{0%,100%{opacity:0}}
@keyframes se-w1{0%,24.99%{opacity:1}25.00%,100%{opacity:0}}
@keyframes se-d1{0%,24.99%{opacity:0}25.00%,99.9%{opacity:1}100%{opacity:0}}
@keyframes se-b1{0%,0.00%{transform:scaleX(0)}24.50%{transform:scaleX(1);opacity:1}25.00%,100%{transform:scaleX(1);opacity:0}}
.se-r1 .s-q{animation:se-q1 12s linear infinite}.se-r1 .s-w{animation:se-w1 12s linear infinite}.se-r1 .s-d{animation:se-d1 12s linear infinite}.se-r1::after{animation:se-b1 12s linear infinite}
@keyframes se-q2{0%,24.99%{opacity:1}25.00%,100%{opacity:0}}
@keyframes se-w2{0%,24.99%{opacity:0}25.00%,49.99%{opacity:1}50.00%,100%{opacity:0}}
@keyframes se-d2{0%,49.99%{opacity:0}50.00%,99.9%{opacity:1}100%{opacity:0}}
@keyframes se-b2{0%,24.99%{transform:scaleX(0)}49.50%{transform:scaleX(1);opacity:1}50.00%,100%{transform:scaleX(1);opacity:0}}
.se-r2 .s-q{animation:se-q2 12s linear infinite}.se-r2 .s-w{animation:se-w2 12s linear infinite}.se-r2 .s-d{animation:se-d2 12s linear infinite}.se-r2::after{animation:se-b2 12s linear infinite}
@keyframes se-q3{0%,49.99%{opacity:1}50.00%,100%{opacity:0}}
@keyframes se-w3{0%,49.99%{opacity:0}50.00%,74.99%{opacity:1}75.00%,100%{opacity:0}}
@keyframes se-d3{0%,74.99%{opacity:0}75.00%,99.9%{opacity:1}100%{opacity:0}}
@keyframes se-b3{0%,49.99%{transform:scaleX(0)}74.50%{transform:scaleX(1);opacity:1}75.00%,100%{transform:scaleX(1);opacity:0}}
.se-r3 .s-q{animation:se-q3 12s linear infinite}.se-r3 .s-w{animation:se-w3 12s linear infinite}.se-r3 .s-d{animation:se-d3 12s linear infinite}.se-r3::after{animation:se-b3 12s linear infinite}
@keyframes se-q4{0%,74.99%{opacity:1}75.00%,100%{opacity:0}}
@keyframes se-w4{0%,74.99%{opacity:0}75.00%,99.99%{opacity:1}100.00%,100%{opacity:0}}
@keyframes se-d4{0%,100%{opacity:0}}
@keyframes se-b4{0%,74.99%{transform:scaleX(0)}99.50%{transform:scaleX(1);opacity:1}100.00%,100%{transform:scaleX(1);opacity:0}}
.se-r4 .s-q{animation:se-q4 12s linear infinite}.se-r4 .s-w{animation:se-w4 12s linear infinite}.se-r4 .s-d{animation:se-d4 12s linear infinite}.se-r4::after{animation:se-b4 12s linear infinite}

/* ---------- Proof band sits right under the hero ---------- */
.se-proof .proof-range p{max-width:40ch}

/* ---------- First step (offer) ---------- */
.se-offer{max-width:var(--max);margin:0 auto;display:grid;border:1px solid var(--accent)}
.se-offer-lead{background:var(--accent);color:var(--bg);padding:28px 22px 30px}
.se-offer-lead .eyebrow{color:#3d3d33}
.se-offer-lead h2{font-size:clamp(56px,16vw,104px);margin:2px 0 16px}
.se-offer-dek{font-family:var(--serif);font-style:italic;font-size:clamp(20px,5.4vw,26px);line-height:1.2;max-width:30ch;margin-bottom:24px}
.se-offer-btn{
  display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 20px;
  background:var(--bg);color:var(--parchment);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.se-offer-btn:hover,.se-offer-btn:focus-visible{background:var(--parchment);color:var(--bg)}
.se-offer-steps{display:grid}
.se-offer-steps li{padding:22px;border-top:1px solid var(--line)}
.se-offer-steps li:first-child{border-top:0}
.se-offer-steps .step-num{color:var(--accent)}
.se-offer-steps h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,8vw,40px);line-height:.9;text-transform:uppercase;margin:8px 0 8px}
.se-offer-steps p{font-size:14px;line-height:1.5;color:var(--muted)}
@media (min-width:861px){
  .se-offer{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .se-offer-lead{padding:44px 40px}
  .se-offer-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .se-offer-steps li{padding:44px 28px;border-top:0;border-left:1px solid var(--line)}
  .se-offer-steps li:first-child{border-left:0}
}

/* ---------- FAQ ---------- */
.se-faq{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line)}
.se-q{border-bottom:1px solid var(--line)}
.se-q summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr) 40px;gap:12px;align-items:center;
  padding:22px 0;outline-offset:-2px;
}
.se-q summary::-webkit-details-marker{display:none}
.se-q-n{font-family:var(--mono);font-size:11px;color:var(--accent)}
.se-q-t{font-family:var(--serif);font-size:clamp(21px,5.6vw,30px);line-height:1.15;transition:color .25s}
.se-q-i{position:relative;width:40px;height:40px;border:1px solid var(--line);transition:background .25s,border-color .25s}
.se-q-i::before,.se-q-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.se-q-i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.se-q[open] .se-q-i{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.se-q[open] .se-q-i::after{transform:translate(-50%,-50%) rotate(0deg)}
.se-q summary:hover .se-q-t{color:var(--accent)}
.se-q p{padding:0 52px 26px 48px;font-size:15px;line-height:1.6;color:var(--muted-2);max-width:72ch}
@media (min-width:861px){
  .se-q summary{grid-template-columns:64px minmax(0,1fr) 52px;padding:30px 0}
  .se-q-i{width:52px;height:52px}
  .se-q p{padding:0 84px 34px 76px;font-size:16px}
}

/* ---------- Service area: Wake County map + contact ---------- */
.se-area-grid{max-width:var(--max);margin:0 auto;display:grid;gap:36px}
.se-map{margin:0;min-width:0}
.wk-map{display:block;width:100%;height:auto}
.wk-grid line{stroke:var(--line);stroke-width:1}
.wk-county{fill:var(--bg-2)}
.wk-city{fill:var(--accent);fill-rule:evenodd;opacity:.92;animation:wk-breathe 6s ease-in-out infinite}
@keyframes wk-breathe{50%{opacity:.68}}
.wk-edge{fill:none;stroke:var(--parchment);stroke-width:1.4;stroke-linejoin:round}
.wk-trace{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-dasharray:90 910;animation:wk-trace 7s linear infinite}
@keyframes wk-trace{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.wk-town{fill:var(--parchment);stroke:var(--bg);stroke-width:2}
.wk-lab,.wk-coord,.wk-tag-t{font-family:var(--mono)}
.wk-lab{font-size:12px;letter-spacing:1.5px;fill:var(--muted-2);paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.wk-coord{font-size:11px;letter-spacing:1.5px;fill:var(--muted)}
.wk-pin{fill:var(--bg);stroke:var(--accent);stroke-width:2.5}
.wk-ping{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:wk-ping 2.2s ease-out infinite}
@keyframes wk-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(5.5);opacity:0}}
.wk-tag{fill:var(--bg);stroke:var(--accent)}
.wk-tag-t{font-size:13px;font-weight:500;letter-spacing:2px;fill:var(--accent)}
.se-map figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.se-area-copy{min-width:0}
.se-area-copy h2{font-size:clamp(52px,15vw,104px);margin:2px 0 20px}
.se-area-copy .dek{max-width:32ch;margin-bottom:28px}
.se-socials{justify-content:flex-start;margin-top:24px}
.foot-tel{color:var(--parchment)}
.se-nowrap{white-space:nowrap}
.se-area-copy{order:-1}
.wk-tagg{transform-box:fill-box;transform-origin:0 100%}
@media (max-width:560px){
  .wk-lab{font-size:19px;letter-spacing:1px}
  .wk-town{r:5}
  .wk-tagg{transform:scale(1.55)}
}
@media (min-width:861px){
  .se-area-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center}
  .se-area-copy{order:0}
}

/* ---------- Reduced motion: hold a finished, readable state ---------- */
@media (prefers-reduced-motion:reduce){
  .se-prog i,.se-caret,.se-state i,.se-row::after,.wk-city,.wk-trace,.wk-ping{animation:none!important}
  .se-prog i{transform:scaleX(1)}
  .se-row::after{transform:scaleX(0)}
  .se-r1 .s-d,.se-r2 .s-d,.se-r3 .s-d,.se-r4 .s-w{opacity:1}
  .wk-trace,.wk-ping{display:none}
}