/* ==========================================================================
   Digital Design — Salt Lake City Web Design Agency
   Brand: deep navy (#0A0A2E), white, royal-blue→violet gradient accent
   Type: Fraunces (display serif) + Inter (UI/body)
   ========================================================================== */

:root{
  --navy:#0A0A2E;
  --navy-2:#12123F;
  --navy-3:#1A1A4A;
  --white:#FFFFFF;
  --ink:#16162C;
  --blue:#3B4FE8;
  --violet:#7B5FD4;
  --grad:linear-gradient(100deg,#3B4FE8 0%,#7B5FD4 100%);
  --muted:#A6A6C8;
  --muted-2:#6E6E92;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(10,10,46,.10);
  --bg-light:#F6F6FB;
  --radius:16px;
  --radius-sm:10px;
  --pill:999px;
  --maxw:1180px;
  --shadow:0 18px 50px rgba(10,10,46,.18);
  --shadow-grad:0 14px 30px rgba(59,79,232,.35);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.center{text-align:center}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--white);color:var(--navy);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:1000;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--serif);line-height:1.12;color:var(--navy);font-weight:600;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.18rem;line-height:1.3}
p{margin:0 0 1.1em}
strong{font-weight:600}

.section-title{margin-bottom:.6em}
.section-lead{color:var(--muted-2);font-size:1.06rem;max-width:760px;margin-bottom:2rem}
.section-dark .section-lead{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:.98rem;
  padding:.8rem 1.5rem;border-radius:var(--pill);border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-lg{padding:1rem 1.9rem;font-size:1.05rem}
.btn-grad{background:var(--grad);color:var(--white);box-shadow:var(--shadow-grad)}
.btn-grad:hover{color:var(--white);box-shadow:0 18px 38px rgba(123,95,212,.45)}
.float-cta{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:800;
  box-shadow:0 14px 34px -6px rgba(59,79,232,.55);animation:ctaBob 2.6s ease-in-out infinite}
.float-cta:hover{box-shadow:0 18px 40px -6px rgba(123,95,212,.6);animation:none}
@keyframes ctaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (max-width:600px){
  .float-cta{right:12px;bottom:12px;padding:.7rem 1.15rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.float-cta{animation:none}}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--white)}
.btn-light{background:var(--white);color:var(--navy)}
.btn-light:hover{color:var(--navy);background:#eef0ff}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--navy);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);transition:background .25s ease,box-shadow .25s ease;
}
.site-header.scrolled{background:var(--navy);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.site-header .container{max-width:none;padding-left:clamp(1.25rem,3vw,2.5rem);padding-right:clamp(1.25rem,3vw,2.5rem)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{border-radius:8px}
.brand-name{font-family:var(--serif);font-weight:700;color:var(--white);font-size:1.15rem}
/* Homepage two-tone text logo (index.html only) */
.brand-logo-text{font-size:1.4rem;letter-spacing:-.01em;line-height:1}
.brand-logo-text .brand-accent{background:linear-gradient(90deg,#4952EC,#6A3FE8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.main-nav{display:flex;align-items:center;gap:1.4rem}
.main-nav a{color:var(--white);font-weight:500;font-size:.96rem;opacity:.9}
.main-nav a:hover{opacity:1;text-decoration:none}
.main-nav a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--violet);padding-bottom:2px}
.main-nav .tel-link{font-weight:600}
.main-nav .btn-grad{color:#fff;opacity:1}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--white);overflow:hidden;isolation:isolate;
  min-height:calc(100vh - 334px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(60% 80% at 80% 10%,rgba(123,95,212,.35),transparent 60%),
             radial-gradient(50% 60% at 10% 90%,rgba(59,79,232,.30),transparent 60%),var(--navy);
}
.hero-media{position:absolute;inset:0;z-index:-1;opacity:.22}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-inner{padding:clamp(2.25rem,4.5vw,3.5rem) 24px clamp(1.75rem,3.5vw,2.75rem);max-width:var(--maxw);margin:0 auto;position:relative}
/* Hero location + live Mountain Time clock (anchored to the hero's bottom-right corner) */
.hero-clock{position:absolute;right:14px;bottom:0;
  z-index:2;display:flex;align-items:center;gap:.72rem;font-family:var(--sans);pointer-events:none}
.hero-clock-loc{font-size:clamp(1.02rem,2.16vw,1.76rem);font-weight:700;letter-spacing:.005em;color:#FFFFFF;white-space:nowrap}
.hero-clock-sep{width:2px;height:1.15em;background:rgba(255,255,255,.32);flex:none}
.hero-clock-time{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:clamp(.99rem,2.12vw,1.73rem);letter-spacing:.3em;color:#FFFFFF;white-space:nowrap;font-variant-numeric:tabular-nums;margin-right:-.3em}
/* Hero scroll indicator — bouncing down-chevron, fades out on scroll */
.hero-scroll{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.6);
  line-height:0;padding:6px;transition:opacity .35s ease,color .2s ease;animation:heroScrollBounce 1.9s ease-in-out infinite}
.hero-scroll:hover{color:#fff}
.hero-scroll.is-hidden{opacity:0;pointer-events:none}
@keyframes heroScrollBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
#see-how{scroll-margin-top:88px}
@media (max-width:760px){.hero-scroll{display:none}}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:600;
  color:var(--muted);margin-bottom:1.2rem;
}
.hero-title{margin:0 0 clamp(2.25rem,4.5vw,3.5rem);color:var(--white);display:flex;flex-direction:column;gap:.04em;
  max-width:none;text-align:left;line-height:1.06}
.hero-title .line-light{font-weight:800;font-size:clamp(2.6rem,6.4vw,4.9rem)}
.hero-title .line-grad{
  font-weight:800;font-size:clamp(2.6rem,6.4vw,4.9rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%;
}
.hero-title .line-heavy{font-weight:800;font-size:clamp(2.3rem,5.6vw,3.9rem);color:var(--white)}
.hero-sub{font-family:'Onest',var(--sans);font-size:clamp(1.25rem,2.1vw,1.7rem);color:#D9D9EC;max-width:60ch;margin-bottom:2.25rem;text-align:left;line-height:1.5}

.trust-row{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-bottom:2rem;
  padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{font-size:.95rem;color:#D9D9EC}
.trust-item strong{color:var(--white)}
.stars{color:#FFC857;letter-spacing:2px}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
.hero-cta.center{justify-content:center}

/* ---------- Sections ---------- */
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section-dark{background:var(--navy);color:var(--white)}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--white)}
.section-dark p{color:#D2D2E6}
.section-dark a{color:#B9C0FF}

.page-hero{background:var(--navy);color:var(--white);padding:clamp(2rem,4.5vw,3rem) 0 clamp(1.75rem,3.5vw,2.5rem);position:relative}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 90% 0%,rgba(123,95,212,.28),transparent 60%);pointer-events:none}
.page-hero h1{color:var(--white);position:relative}
.page-hero .page-lead{color:#D2D2E6;font-size:1.12rem;max-width:64ch;position:relative}
/* Update-request pricing policy — two scenarios (question bold, answer below) */
.policy{position:relative;max-width:60ch;margin-top:.4rem}
.policy-item + .policy-item{margin-top:1.2rem}
.policy-q{margin:0 0 .3rem;font-weight:700;color:var(--white);font-size:1.08rem}
.policy-a{margin:0;color:#D2D2E6;font-size:1.02rem;line-height:1.55}

/* ---------- Homepage services list ---------- */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-row{display:flex;align-items:center;gap:1.4rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.svc-num{font-family:var(--serif);font-size:1.5rem;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:2.5rem}
.svc-copy{flex:1}
.svc-copy h3{margin:0 0 .25em}
.svc-copy h3 a{color:var(--white)}
.svc-copy p{margin:0;color:var(--muted)}
/* Services list on a light (white) section — flip dividers and body text for contrast */
.section:not(.section-dark) .svc-list{border-top-color:var(--line-dark)}
.section:not(.section-dark) .svc-row{border-bottom-color:var(--line-dark)}
.section:not(.section-dark) .svc-copy p{color:var(--muted-2)}
/* Center the heading and subheading of the built-in-code section (list stays left) */
.code-section .section-title{text-align:center}
.code-section .section-lead{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.svc-arrow{font-size:1.5rem;color:var(--white);transition:transform .2s ease;text-decoration:none}
.svc-row:hover .svc-arrow{transform:translateX(6px);color:var(--violet)}
/* Pricing funnel — clean centered element (no box) */
.svc-pricing{text-align:center;margin-top:clamp(2.75rem,5vw,4rem)}
.svc-pricing .svc-pricing-line{margin:0 auto 1.5rem;color:var(--navy);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.2}
@media (max-width:760px){
  .svc-pricing .btn{width:100%}
}

/* ---------- Why grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem}
.why-card{background:var(--bg-light);border:1px solid var(--line-dark);border-radius:var(--radius);padding:1.6rem}
.why-card h3{margin-bottom:.4em}

/* ---------- Cities ---------- */
.cities{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0}
.cities li{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--pill);
  padding:.45rem 1rem;font-size:.9rem;color:#D2D2E6}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.testi{margin:0;background:var(--white);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--shadow)}
.testi .stars{font-size:1.05rem;margin-bottom:.6rem}
.testi blockquote{margin:0 0 1rem;font-size:1.05rem;color:var(--ink);line-height:1.55}
.testi figcaption{font-size:.9rem;color:var(--muted-2);font-weight:600}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:.8rem}
.faq details{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.4rem 1.2rem}
.faq summary{cursor:pointer;font-weight:600;padding:.9rem 0;color:var(--white);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--sans);
  position:relative;padding-right:2.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:14px;height:2px;
  background:var(--violet);border-radius:2px;transition:transform .3s ease}
.faq summary::before{transform:translateY(-50%)}
.faq summary::after{transform:translateY(-50%) rotate(90deg)}
.faq details.is-open summary::after{transform:translateY(-50%) rotate(0deg)}
.faq details p{color:#CFCFE6;padding-bottom:1rem;margin:0}
.faq-a{overflow:hidden}
.faq-js .faq-a{height:0;transition:height .3s ease}
@media (prefers-reduced-motion:reduce){.faq-js .faq-a{transition:none}
  .faq summary::before,.faq summary::after{transition:none}}
/* FAQ on light section */
.section:not(.section-dark) .faq details{background:var(--bg-light);border-color:var(--line-dark)}
.section:not(.section-dark) .faq summary{color:var(--navy)}
.section:not(.section-dark) .faq details p{color:var(--ink)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad);color:var(--white);text-align:center;padding:clamp(3rem,6vw,4.5rem) 0}
.cta-band h2{color:var(--white);margin-bottom:.4em}
.cta-band p{color:rgba(255,255,255,.92);max-width:60ch;margin:0 auto 1.8rem;font-size:1.1rem}
.cta-band .hero-cta{justify-content:center}
.cta-band h2:has(+ .cta-subline){margin-bottom:0}
.cta-band .cta-subline{margin:.1em auto 2.25rem;font-size:clamp(1.6rem,3.2vw,2.4rem);font-family:var(--serif);font-weight:600;color:var(--white)}
.cta-band .hero-cta + p{margin:2.25rem auto 0}

/* ---------- Footer ---------- */
.site-footer{position:relative;color:#C9C9E0;
  background:radial-gradient(130% 130% at 50% 0%, rgba(103,80,224,.13), rgba(103,80,224,0) 55%), #070720;
  padding:clamp(1.5rem,3vw,2.25rem) 0 clamp(.85rem,1.8vw,1.15rem);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:1.5rem 4rem;align-items:start}
.brand-footer{gap:.55rem}
.brand-footer .brand-name{font-size:1.15rem}
.footer-tag{margin:.55rem 0 0;font-size:.95rem;color:var(--muted);max-width:34ch;line-height:1.5}
.site-footer .nap{margin-top:.6rem}
.site-footer h3{color:var(--white);font-family:var(--sans);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:.6rem}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;line-height:1.2}
.footer-links a{color:#C9C9E0;font-size:.95rem;transition:color .18s ease}
.footer-links a:hover{color:#fff}
.footer-cities{font-size:.92rem;color:var(--muted);line-height:1.9}
.nap{font-style:normal;font-size:.95rem;color:#C9C9E0;line-height:1.5}
.nap strong{color:#fff}
.nap a{color:#B9C0FF;transition:color .18s ease}
.nap a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(1.1rem,2.2vw,1.5rem);padding-top:.85rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted-2)}
.footer-bottom a{color:#B9C0FF}

/* ---------- Split (service pages / about) ---------- */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:2.6rem;align-items:start}
.split-media img,.split-media{border-radius:var(--radius);overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover;background:var(--bg-light);min-height:340px}
.split-copy h3{margin-top:1.6rem}
.checklist{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.6rem}
.checklist li{position:relative;padding-left:1.9rem;color:var(--ink)}
.checklist li::before{content:"";position:absolute;left:0;top:.5rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--grad)}
.checklist li::after{content:"\2713";position:absolute;left:.22rem;top:.18rem;color:#fff;font-size:.72rem;font-weight:700}

/* ---------- Two-column proof sections (homepage) ---------- */
.proof-grid{display:flex !important;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:0;width:100%;max-width:none;margin:0}
.proof-text{flex:0 0 40%;max-width:40%;min-width:0;text-align:left !important;margin:0 !important}
.proof-media{flex:0 0 55%;max-width:55%;min-width:0;margin:0 !important}
.proof-grid.reverse .proof-text{order:2;flex:0 0 55%;max-width:55%}
.proof-grid.reverse .proof-media{order:1;flex:0 1 400px;max-width:400px}
.proof-grid.reverse .proof-media .map-embed{max-width:400px !important;width:100% !important;margin:0 !important;border-color:var(--violet)}
.proof-grid.reverse .proof-media img{max-width:400px !important;width:100% !important;margin:0 !important}
.proof-media .map-embed{margin:0 !important;max-width:none !important;width:100%;padding:8px;background:var(--bg-light);border:6px solid var(--violet);border-radius:var(--radius);box-shadow:var(--shadow)}
.proof-media img{width:100% !important;max-width:none !important;height:auto;display:block;margin:0 !important}
.proof-section .container{max-width:none !important;width:100% !important;margin:0 !important;padding:0 clamp(1.5rem,5vw,4rem) !important}
.proof-text .section-title{font-size:clamp(1.15rem,2.35vw,3.25rem)}
.proof-text p{font-size:1.4rem}
.proof-text p.proof-sub{font-size:clamp(1.5rem,1.9vw,1.9rem);color:var(--muted-2);margin-bottom:1rem}
/* SEO proof — takeaway line that flows with the paragraph above, with a small subtle search icon */
.proof-text .seo-note{display:flex;align-items:flex-start;gap:.6rem;margin:1rem 0 0;font-size:1.4rem;line-height:1.5;color:var(--white)}
.seo-note-ico{flex:none;width:1.5rem;height:1.5rem;margin-top:.3em;color:var(--violet)}
/* Extra top spacing so this section sits lower — header drops below the fold on the "see how it works" landing while the taller photo peeks up as a scroll cue */
.proof-lower{margin-top:max(1rem,calc(100vh - 832px))}
@media (max-width:760px){.proof-lower{margin-top:clamp(2rem,8vw,3.5rem)}}

/* ---------- Steps ---------- */
.steps{display:flex;flex-direction:column;gap:1.2rem}
.step{display:flex;gap:1.1rem;align-items:flex-start;background:var(--navy-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.3rem 1.5rem}
.step-num{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--serif)}
.step h3{margin:0 0 .25em;color:var(--white)}
.step p{margin:0;color:#CFCFE6}

/* ---------- How it works — timeline ---------- */
.timeline{list-style:none;margin:2.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tl-step{position:relative;text-align:center;padding:0 1rem}
.tl-node{width:76px;height:76px;border-radius:50%;background:var(--white);border:2px solid var(--line-dark);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;margin:0 auto;
  position:relative;z-index:1;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tl-num{display:block;font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:.05em;
  margin:.7rem 0 .35rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-icon{color:var(--blue);line-height:0}
.tl-icon svg{width:40px;height:40px}
.tl-step:not(:last-child)::after{content:"";position:absolute;top:38px;left:50%;width:100%;height:3px;
  transform:translateY(-50%);background:var(--grad);opacity:.4;z-index:0}
.tl-body h3{margin:0 0 .4em;font-size:1.15rem}
.tl-body p{margin:0;color:var(--muted-2);font-size:.98rem}
.tl-step:hover .tl-node{transform:translateY(-5px) scale(1.06);border-color:transparent;
  box-shadow:0 14px 30px rgba(59,79,232,.35)}

/* ---------- Services hub cards ---------- */
.svc-card{display:flex;flex-direction:column;border:1px solid var(--line-dark);
  border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.svc-card-body{padding:2.2rem;flex:1}
/* Primary (hero) service card — visually dominant */
.svc-primary-grid{display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}
.svc-primary .svc-card-body{padding:clamp(2rem,4vw,3.5rem)}
.svc-primary h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:.35em}
.svc-primary .svc-lead{font-size:1.25rem;color:var(--muted-2);max-width:62ch;margin-bottom:1.4rem}
.svc-primary .svc-includes-label{font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin:0 0 .7rem}
.svc-primary .svc-includes{grid-template-columns:1fr;margin:0}
.svc-primary-media{background:var(--bg-light)}
.svc-primary-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Other services — secondary, smaller, flatter */
.svc-other-heading{margin-top:3rem;font-size:1.4rem}
.svc-secondary{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.svc-secondary .svc-card{box-shadow:none}
.svc-secondary .svc-card-body{padding:1.6rem}
.svc-secondary h3{margin-bottom:.4em}
.svc-card-body h2{margin-bottom:.5em}
.svc-includes{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.45rem}
.svc-includes li{position:relative;padding-left:1.5rem;font-size:.95rem}
.svc-includes li::before{content:"\2192";position:absolute;left:0;color:var(--violet);font-weight:700}

/* ---------- Before / After slider ---------- */
.ba-slider{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/10;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);user-select:none;background:var(--navy-2)}
.ba-after,.ba-before{position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}
.ba-before{width:50%;border-right:3px solid #fff}
.ba-after img,.ba-before img{position:absolute;top:0;left:0;width:900px;max-width:none;height:100%;object-fit:cover}
.ba-placeholder{display:flex;align-items:center;justify-content:center}
.ba-placeholder span{font-family:var(--serif);font-weight:700;font-size:2rem;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.ba-after-ph{background:linear-gradient(135deg,#3B4FE8,#7B5FD4)}
.ba-before-ph{background:linear-gradient(135deg,#2a2a4f,#43436e)}
.ba-handle{position:absolute;top:0;left:50%;width:3px;height:100%;background:#fff;transform:translateX(-50%);pointer-events:none}
.ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.ba-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}

/* ---------- Map ---------- */
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);line-height:0}
.map-embed iframe{display:block;width:100%}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.gallery-item{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--navy-2);
  border:1px solid var(--line);position:relative}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#2a2a4f,#43436e)}
.gallery-item figcaption{padding:.9rem 1.1rem;font-size:.92rem;color:#D2D2E6;font-weight:500}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem}
.stat{text-align:center;background:var(--bg-light);border:1px solid var(--line-dark);border-radius:var(--radius);padding:1.6rem 1rem}
.stat-num{display:block;font-family:var(--serif);font-weight:700;font-size:2.4rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-label{display:block;margin-top:.5rem;font-size:.9rem;color:var(--muted-2)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2.6rem;align-items:start}
.response-note{background:var(--bg-light);border-left:3px solid var(--violet);padding:.8rem 1rem;
  border-radius:0 8px 8px 0;font-size:.95rem;margin-bottom:1.6rem}
.contact-form-wrap{background:var(--white);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow)}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field[hidden]{display:none}  /* keep the hidden attribute working despite .field's display */
.field label{font-weight:600;font-size:.92rem;color:var(--navy)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;line-height:1.3;padding:.85rem 1.1rem;border:1.5px solid #d8d8e6;
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,95,212,.18)}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);opacity:.7}
/* custom select arrow so the dropdown matches the text inputs */
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center}
/* Yes / No as styled pill options */
.radio-row{display:flex;gap:.8rem;flex-wrap:wrap}
.radio-opt{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;
  padding:.75rem 1.6rem;border:1.5px solid #d8d8e6;border-radius:var(--pill);background:#fff;
  font-weight:500;color:var(--ink);
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.radio-opt input{position:absolute;opacity:0;width:0;height:0}
.radio-opt:hover{border-color:var(--violet)}
.radio-opt:has(input:checked){border-color:var(--violet);background:rgba(123,95,212,.10);color:var(--navy);font-weight:600}
.radio-opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(123,95,212,.18)}
/* full-width primary submit */
.contact-form .btn{width:100%;margin-top:.5rem}
.contact-info{background:var(--navy);color:#fff;border-radius:var(--radius);padding:2rem}
.contact-info .section-title,.contact-info h3{color:#fff}
.contact-info h3{font-family:var(--sans);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin:1.6rem 0 .8rem}
.nap-lg{font-size:1rem;color:#D9D9EC}
.nap-lg strong{color:#fff}
.nap-lg a{color:#B9C0FF}
.hours{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:#D2D2E6;
  border-bottom:1px dashed var(--line);padding-bottom:.45rem}
.info-links{margin-top:1.6rem;font-size:.92rem;color:#D2D2E6}
.info-links a{color:#B9C0FF}

/* ---------- Responsive ---------- */
/* ---------- Chevron marquee (homepage, full-bleed, auto-scroll) ---------- */
.chevron-marquee{--chev-pt:48px;--chev-w:calc(10vw + 43.2px);--chev-adv:calc(var(--chev-w) - var(--chev-pt));
  --chev-copy:calc(12 * var(--chev-adv));width:100%;overflow:hidden}
.chevron-scroll{width:max-content;will-change:transform;animation:chevScroll 42s linear infinite reverse}
.chevron-row{display:flex;height:190px;background:#c7c7d2}
.chev-cell{flex:0 0 var(--chev-w);height:100%;margin-left:calc(var(--chev-pt) * -1);
  filter:drop-shadow(-4px 0 0 #000)}
.chevron{width:100%;height:100%;
  background-color:#d3d3dd;background-position:center;background-size:cover;background-repeat:no-repeat;
  clip-path:polygon(0 0, calc(100% - var(--chev-pt)) 0, 100% 50%, calc(100% - var(--chev-pt)) 100%, 0 100%, var(--chev-pt) 50%)}
.chevron-labelrow{display:flex;align-items:center;background:#000;margin-left:-42px;position:relative}
.chevron-labelrow::before,.chevron-labelrow::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.85);pointer-events:none}
.chevron-labelrow::before{top:9px}
.chevron-labelrow::after{bottom:9px}
.chev-label{flex:0 0 var(--chev-adv);text-align:center;color:#fff;
  font-family:'Bebas Neue',var(--sans);font-weight:400;
  font-size:clamp(.5rem,1.12vw,2rem);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  padding:clamp(1.05rem,1.9vw,1.7rem) .3rem;transform:translateY(.11em);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes chevScroll{from{transform:translateX(0)}to{transform:translateX(calc(var(--chev-copy) * -1))}}
@media (prefers-reduced-motion:reduce){.chevron-scroll{animation:none}}

/* ---------- About page — centered reading block ---------- */
.about-story{padding-top:clamp(1.25rem,3vh,2rem);padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.about-story .container{max-width:65ch;font-size:1.15rem;line-height:1.8}
.about-story h3{font-size:1.6rem;margin-top:2.5rem;margin-bottom:.6rem}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .svc-card{grid-template-columns:1fr}
  .svc-card:nth-child(even) .svc-card-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{min-height:auto}
  .nav-toggle{display:flex;min-height:44px;justify-content:center}
  .main-nav{
    position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--navy);border-bottom:1px solid var(--line);padding:1rem 24px 1.5rem;
    transform:translateY(-130%);transition:transform .3s ease;max-height:calc(100vh - 72px);overflow:auto;
  }
  .main-nav.open{transform:translateY(0)}
  .main-nav a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--line);opacity:1}
  .main-nav .btn-grad{margin-top:.8rem;width:100%}
  .main-nav a[aria-current="page"]{border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-links{gap:.15rem;line-height:1.2}
  .footer-links a{display:inline-block;padding:.9rem 0;line-height:1.2}
  .proof-grid{flex-direction:column}
  .proof-text,.proof-media,.proof-grid.reverse .proof-text,.proof-grid.reverse .proof-media{flex:1 1 auto;max-width:100%;order:0}
  .proof-section .container{padding:0 24px !important}
  .proof-text .section-title{font-size:clamp(1.55rem,5vw,3.25rem)}
  .svc-secondary{grid-template-columns:1fr}
  .svc-primary-grid{grid-template-columns:1fr}
  .svc-primary-media{min-height:240px}
  .chevron-marquee{--chev-w:46vw}
  .chevron-row{height:150px}
  .chev-label{font-size:clamp(1rem,4vw,2rem)}
  .timeline{grid-template-columns:1fr;gap:0;max-width:520px;margin-left:auto;margin-right:auto}
  .tl-step{display:grid;grid-template-columns:76px 1fr;column-gap:1.2rem;text-align:left;padding:0 0 2.4rem}
  .tl-node{margin:0;grid-column:1;grid-row:1 / 3}
  .tl-num{grid-column:2;grid-row:1;margin:.15rem 0 .3rem}
  .tl-body{grid-column:2;grid-row:2;padding-top:0}
  .tl-step:not(:last-child)::after{top:76px;left:38px;width:3px;height:100%;transform:translateX(-50%)}
}
@media (max-width:480px){
  .container{padding:0 18px}
  .trust-row{gap:.8rem}
  .hero-cta .btn{width:100%}
  .hero-clock{position:static;right:auto;bottom:auto;margin:1.75rem 0 clamp(1.5rem,5vw,2.25rem);padding:0 18px;justify-content:flex-start}
  .hero-clock-loc{font-size:.85rem}
  .hero-clock-time{font-size:.82rem;letter-spacing:.22em}
}

/* ============================================================
   PRICING PAGE — premium redesign
   ============================================================ */

/* Eyebrow / kicker above a section title */
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;font-weight:600;color:var(--violet);margin:0 0 .55rem}
.section-dark .kicker{color:#B9C0FF}

/* "What you get" — two-column checklist with gradient check chips */
.check-grid{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:.7rem 2.2rem}
.check-grid li{position:relative;padding-left:2.1rem;font-size:1rem;line-height:1.5}
.check-grid li::before{content:"\2713";position:absolute;left:0;top:.05em;
  width:1.35rem;height:1.35rem;border-radius:50%;background:var(--grad);
  color:#fff;font-size:.78rem;font-weight:700;line-height:1.35rem;text-align:center}

/* Bread & butter — two-column pill (bullets + image) */
.bab-pill{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  background:var(--white);border:1px solid var(--line-dark);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.bab-text{padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column}
.bab-subhead{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--navy);margin:0}
.bab-text .check-grid{grid-template-columns:1fr;margin-top:2.25rem;
  flex:1;display:flex;flex-direction:column;justify-content:space-between}
.bab-media{background:var(--bg-light)}
.bab-media img{display:block;width:100%;height:100%;object-fit:cover;min-height:300px}

/* Pricing cards — the centerpiece */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch;margin-top:.6rem}
.plan-card{position:relative;background:var(--bg-light);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:2.4rem 2rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease}
.plan-card:hover{transform:translateY(-4px)}
a.plan-card{text-decoration:none;color:inherit;cursor:pointer}
/* Pricing section headline — full heading size, widened so it fits one line, extra space below */
.pricing-headline{margin-bottom:clamp(2.5rem,5vw,3.75rem)}
/* Peek-up scroll cue: ONLY the pricing cards are lifted via transform on load so their tops peek at
   the bottom of the screen; the headline stays put. Eases to the real resting position on scroll.
   Transform-only — real section spacing is untouched. JS-driven; no transform for reduced-motion/no-JS. */
.plan-grid{will-change:transform}
.plan-card--featured{background:linear-gradient(180deg,rgba(59,79,232,.06),rgba(123,95,212,.07)),#fff;
  border:2px solid var(--violet);box-shadow:0 22px 48px -18px rgba(59,79,232,.45)}
.plan-price{font-family:var(--serif);color:var(--navy);margin:0 0 .7rem;line-height:1.02;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem}
.plan-amount{font-size:clamp(2.6rem,5.2vw,3.5rem);font-weight:700}
.plan-cadence{font-size:1.1rem;color:var(--muted-2);font-weight:500;font-family:var(--sans)}
.plan-lead{width:100%;display:block;font-family:var(--sans);font-weight:600;
  font-size:1.1rem;color:var(--muted-2);line-height:1.2}
.plan-desc{margin:0;color:var(--ink);font-size:1rem;line-height:1.6}
.plan-list{grid-template-columns:1fr;gap:.6rem;margin:.3rem 0 0}
.plan-list li{font-size:.98rem}
.plan-descriptor{margin:-.4rem 0 .1rem;font-size:.9rem;color:var(--muted-2);line-height:1.4;font-weight:500}

/* Other services — three service cards (reuse the plan-card style) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch;margin-top:clamp(2.75rem,5vw,4rem)}
.svc-name{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--navy);margin:0 0 .15rem;line-height:1.15}
.svc-price{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--navy);margin:0 0 1rem;line-height:1}
/* "Your website is live" section — centered heading + lead, constrained to a shared
   measure. Heading is kept slightly wider than the lead so the lead tucks under it.
   Only horizontal margins are set to auto so the bottom margin (spacing to the cards) is preserved. */
#website-design-build{padding-top:clamp(2.25rem,4.5vw,3.5rem)}
#website-design-build .section-title{text-align:center}
#google-business-profile .section-title{margin-left:auto;margin-right:auto;text-align:center;text-wrap:balance;font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.2}
#google-business-profile .section-lead{font-size:clamp(1.15rem,2vw,1.3rem);line-height:1.5;max-width:610px;margin-left:auto;margin-right:auto;text-align:center}

/* Note below a form + inline "website updates" text link */
.form-note{margin-top:1.4rem;text-align:center;color:var(--muted-2);font-size:.95rem}
/* Conditional "send your photos" callout — subtle on-brand bordered box */
.photo-note{background:rgba(123,95,212,.08);border:1px solid rgba(123,95,212,.32);border-radius:var(--radius-sm);padding:.85rem 1rem;font-size:.95rem;line-height:1.55;color:var(--ink)}
.photo-note a{color:var(--blue);font-weight:600}
.update-cta-link{text-align:center;margin-top:clamp(2rem,4vw,3rem)}
.update-cta-link a{color:var(--blue);font-weight:600;font-size:1.05rem;text-decoration:none}
.update-cta-link a:hover{text-decoration:underline}

/* Reassurance strip under the plan cards */
.plan-cta{justify-content:center;margin-top:clamp(1.6rem,3vw,2.2rem)}
.plan-reassure{text-align:center;max-width:62ch;margin:1.9rem auto 0;
  color:var(--muted-2);font-size:1rem;line-height:1.6}
.plan-reassure::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;
  width:1.3rem;height:1.3rem;border-radius:50%;background:var(--grad);color:#fff;
  font-size:.72rem;font-weight:700;vertical-align:middle;margin-right:.5rem;transform:translateY(-1px)}

/* Hosting cards — supporting polish (scoped so other pages are untouched) */
.host-grid .why-card{position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease}
.host-grid .why-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad);opacity:0;transition:opacity .22s ease}
.host-grid .why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.host-grid .why-card:hover::before{opacity:1}

/* Ownership statement — problem/answer contrast, no card */
.own-statement .container{max-width:900px}
.own-head{text-align:center;margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.own-statement .section-title{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0}
.own-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.own-col{padding:0 clamp(1.4rem,3.5vw,2.6rem)}
.own-col--problem{padding-left:0}
.own-col--answer{padding-right:0;border-left:1px solid var(--line-dark)}
.own-ico{width:2rem;height:2rem;display:block;margin:0 0 .85rem}
.own-ico--problem{color:var(--muted-2)}
.own-col p{margin:0;font-size:1.08rem;line-height:1.7;text-align:left}
.own-col--problem p{color:var(--muted-2)}
.own-col--answer p{color:var(--ink)}
/* Homepage "You risk / We risk": match the We-risk text to the You-risk gray (leaves the pricing page unchanged) */
#see-how .own-col--answer p{color:var(--muted-2)}
.own-intro{margin:.9rem auto 0;max-width:640px;color:var(--muted-2);font-size:1.08rem;line-height:1.7}
.own-divider{border:0;border-top:1px solid var(--line-dark);margin:0 0 clamp(1.6rem,3.5vw,2.6rem)}
.own-col-title{margin:0 0 .5rem;font-size:1.2rem;color:var(--ink)}


/* Mobile: stack cards (featured first) and collapse the checklist */
@media (max-width:760px){
  .plan-grid{grid-template-columns:1fr;transform:none!important;will-change:auto}
  .float-cta{display:none}
  .svc-grid{grid-template-columns:1fr}
  .own-grid{grid-template-columns:1fr}
  .own-col{padding:0}
  .own-col--answer{border-left:0;border-top:1px solid var(--line-dark);padding-top:1.6rem;margin-top:.4rem}
  .check-grid{grid-template-columns:1fr;gap:.7rem}
  .plan-card{padding:2rem 1.5rem}
  .bab-pill{grid-template-columns:1fr}      /* bullets on top, image below */
  .bab-media img{min-height:220px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- 404 error page ---------- */
.error-hero{display:flex;align-items:center;min-height:62vh;padding:clamp(3rem,8vw,5rem) 0}
.error-hero .container{width:100%}
.error-code{font-family:var(--serif);font-weight:600;line-height:1;margin:0 0 .5rem;
  font-size:clamp(5rem,22vw,9.5rem);background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.error-hero h1{margin:0 0 .5rem}
.error-lead{color:#D2D2E6;font-size:1.12rem;line-height:1.6;max-width:46ch;margin:0 auto 2.25rem}