/* Solve My Website — shared site styles (header, footer, shared primitives). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@view-transition{navigation:auto}
:root{
  --navy:#16243D; --navy-deep:#0F1826; --navy-line:#243352;
  --orange:#FF6B1A; --orange-hover:#E55C0F;
  --bg:#FAFAF7; --card-bg:#F5F0EB; --ink:#20242B;
  --green:#1F8A4C; --green-bright:#4ADC8A; --wa-green:#25D366;
  --line:#D9D7D2; --muted:#5F5E5A; --meta:#8B8885;
  --nav-dim:#B8C2D4; --nav-faint:#9BA8C0;
  --display:"Plus Jakarta Sans",-apple-system,sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;padding-top:68px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--navy);line-height:1.1;letter-spacing:-.03em}
p{margin:0}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";flex:none;width:22px;height:1.5px;background:var(--orange)}
.on-dark .eyebrow{color:var(--nav-faint)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--navy),0 0 0 5px var(--orange)}
.on-dark a:focus-visible,.on-dark button:focus-visible{box-shadow:0 0 0 2px var(--orange),0 0 0 5px #FFFFFF}

/* nav: fixed 68px, backdrop blur, transparent variant for homepage hero */
.hdr{position:fixed;top:0;left:0;right:0;z-index:30;height:68px;background:rgba(22,36,61,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);transition:background .25s,border-color .25s}
.hdr--hero{background:transparent;border-bottom-color:transparent}
.hdr--hero.solid{background:rgba(22,36,61,0.97);border-bottom-color:rgba(255,255,255,0.06)}
.hdr .bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.brand{display:inline-flex;align-items:center}
.brand img{height:20px;width:auto}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--nav-dim);font-size:.84rem;font-weight:500;white-space:nowrap;transition:.18s}
.nav a:hover,.nav a.here{color:#FFFFFF}
.nav a.here{font-weight:700;border-bottom:2px solid var(--orange);padding-bottom:2px}
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;background:var(--orange);color:var(--navy);font-family:var(--display);font-weight:700;font-size:.84rem;transition:.18s;box-shadow:0 4px 16px rgba(255,107,26,.3)}
.cta:hover{background:var(--orange-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,107,26,.4)}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;cursor:pointer;place-items:center;padding:0}
.menu-btn span{position:relative;display:block;width:22px;height:2px;background:#FFFFFF;transition:.2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#FFFFFF;transition:.2s}
.menu-btn span::before{top:-7px}
.menu-btn span::after{top:7px}
.hdr.open .menu-btn span{background:transparent}
.hdr.open .menu-btn span::before{top:0;transform:rotate(45deg)}
.hdr.open .menu-btn span::after{top:0;transform:rotate(-45deg)}
.mnav{display:none;background:rgba(22,36,61,0.98);border-top:1px solid var(--navy-line)}
.hdr.open .mnav{display:block}
.mnav a{display:flex;align-items:center;min-height:52px;padding:0 clamp(16px,4vw,40px);color:var(--nav-dim);font-family:var(--display);font-weight:600;font-size:.96rem;border-bottom:1px solid var(--navy-line);transition:.15s}
.mnav a:hover,.mnav a.here{color:#FFFFFF}
.mnav a.mnav-cta{background:var(--orange);color:var(--navy);border-bottom:0;font-weight:700}
@media(max-width:880px){
  .nav{display:none}
  .hdr .cta{display:none}
  .menu-btn{display:grid}
}

/* shared section primitives */
section.band{padding:clamp(64px,8vw,96px) clamp(16px,4vw,60px)}
.wrap{max-width:1280px;margin:0 auto}
.head{display:grid;grid-template-columns:.85fr 1.5fr;gap:clamp(22px,6vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,68px)}
.head h2{font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.06;font-weight:800;letter-spacing:-.035em}
.head.narrow{grid-template-columns:1fr;max-width:860px}
@media(max-width:880px){.head{grid-template-columns:1fr}}

/* page hero (subpages) — 128px top clears the fixed nav */
.pagehero{background:var(--navy);color:#FFFFFF;padding:128px clamp(16px,4vw,60px) 72px}
.pagehero .in{max-width:1280px;margin:0 auto}
.pagehero h1{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#FFFFFF;max-width:26ch}
.pagehero p{margin-top:18px;font-size:1.06rem;color:rgba(255,255,255,.82);max-width:56ch;line-height:1.6}

/* end-of-page CTA band — orange bg, navy button (deliberate inversion) */
.endcta{background:var(--orange);padding:clamp(56px,7vw,96px) clamp(16px,4vw,60px);text-align:center}
.endcta h2{color:#FFFFFF;font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.035em;text-shadow:0 1px 3px rgba(0,0,0,.12)}
.endcta p{margin:14px auto 28px;color:rgba(255,255,255,.88);max-width:52ch;font-size:1.06rem}
.endcta a{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 32px;border-radius:10px;background:var(--navy);color:#FFFFFF;font-family:var(--display);font-weight:700;font-size:1rem;transition:.18s}
.endcta a:hover{transform:translateY(-1px);background:#1e304f}

/* url form */
.urlform{width:100%;max-width:660px}
.urlform label{display:block;margin-bottom:9px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.urlform input{min-width:0;min-height:60px;border:2px solid rgba(255,255,255,.18);border-radius:10px;padding:0 20px;background:#FFFFFF;color:var(--ink);outline:none;font-size:1rem;transition:.18s}
.urlform input:focus{border-color:var(--orange)}
.urlform input.bad{border-color:#C0392B}
.urlform button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:150px;min-height:60px;border:0;border-radius:10px;padding:0 24px;background:var(--orange);color:var(--navy);font-family:var(--display);font-weight:700;font-size:.95rem;cursor:pointer;transition:.18s;box-shadow:0 4px 20px rgba(255,107,26,.3)}
.urlform button:hover{background:var(--orange-hover);transform:translateY(-1px);box-shadow:0 8px 28px rgba(255,107,26,.4)}
.urlform button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.note{min-height:22px;margin-top:13px;font-size:.94rem;color:rgba(255,255,255,.68)}

.briefcta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;min-height:56px;border-radius:10px;background:var(--orange);color:var(--navy);font-family:var(--display);font-weight:700;font-size:1rem;transition:.16s;box-shadow:0 4px 20px rgba(255,107,26,.3)}
.briefcta:hover{background:var(--orange-hover);transform:translateY(-1px)}
.briefcta span{transition:.16s}
.briefcta:hover span{transform:translateX(3px)}

/* browser-chrome frame */
.chrome{border:1px solid var(--line);border-radius:14px;background:#FFFFFF;overflow:hidden;box-shadow:0 24px 60px rgba(22,36,61,.12);transition:transform .2s ease,box-shadow .2s ease}
.chrome-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#EEF0F4;border-bottom:1px solid var(--line)}
.chrome-bar i{flex:none;width:10px;height:10px;border-radius:50%}
.chrome-bar i:nth-child(1){background:#F2998E}.chrome-bar i:nth-child(2){background:#F2CE8E}.chrome-bar i:nth-child(3){background:#9ED4A9}
.curl{flex:1;min-width:0;margin-left:8px;padding:4px 12px;border-radius:6px;background:#FFFFFF;border:1px solid var(--line);font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* contact icons */
.cicon{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange);color:var(--navy)}
.cicon.wa{background:var(--wa-green);color:#FFFFFF}
.cicon svg{width:15px;height:15px;display:block;fill:currentColor}
.foot .cicon{width:20px;height:20px}
.foot .cicon svg{width:11px;height:11px}

/* footer */
.foot{background:var(--navy-deep);color:var(--nav-dim);padding:clamp(36px,5vw,56px) clamp(16px,4vw,60px) 26px;border-top:1px solid var(--navy-line)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,60px);max-width:1280px;margin:0 auto;padding-bottom:30px;border-bottom:1px solid var(--navy-line)}
@media(max-width:880px){.foot-top{grid-template-columns:1fr;gap:32px}}
.foot-brand img{height:18px;width:auto}
.foot-brand .tag-line{margin-top:14px;font-family:var(--display);font-weight:700;color:#FFFFFF}
.foot-brand p{margin-top:8px;font-size:.94rem;line-height:1.6;max-width:38ch;color:var(--nav-dim)}
.foot-col h4{margin:0 0 14px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.foot-col a{display:flex;align-items:center;gap:9px;padding:5px 0;color:var(--nav-dim);font-size:.92rem;transition:.15s}
.foot-col a:hover{color:#FFFFFF}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;max-width:1280px;margin:22px auto 0;font-size:.84rem;color:var(--nav-faint)}
.foot-legal{display:flex;gap:20px}
.foot-legal a:hover{color:#FFFFFF}

/* scroll reveals */
[data-rev]{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
[data-rev].in{opacity:1;transform:none}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out var(--reveal-delay,0ms),transform .5s ease-out var(--reveal-delay,0ms)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-rev],.reveal{opacity:1;transform:none;transition:none}
}

/* sticky mobile CTA bar */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:8px 18px calc(8px + env(safe-area-inset-bottom));background:var(--orange);color:var(--navy);font-family:var(--display);font-weight:800;font-size:1rem;box-shadow:0 -10px 30px rgba(22,36,61,.25);transform:translateY(102%);transition:transform .35s ease}
@media(max-width:700px){.sticky-cta{display:flex}}
.sticky-cta.on{transform:none}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
@media(max-width:700px){body.cta-bar-on .smws-assist-bubble{bottom:88px!important}}
