/* Shared base for Mercer Web Works template previews.
   Each page sets its own brand tokens on :root; everything here reads them.
   Shape rule per page: --r for containers, buttons and inputs; pills only for tags. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
section{padding-block:76px}
.lede{color:var(--muted);max-width:60ch;font-size:1.06rem}
.sec-head{display:grid;gap:10px;margin-bottom:34px;max-width:680px}

/* "starting at" prices: unclear pricing is a top reason people skip a business */
.svc .from{color:var(--fg);font-weight:700;font-size:.95rem}
.price-note{color:var(--muted);font-size:.9rem;margin-top:22px;max-width:70ch}

/* preview banner (not part of the client's site) */
.demo-bar{background:#15232b;color:#e6eeec;font:500 13px/1.4 "Helvetica Neue",Arial,sans-serif;padding-block:9px}
.demo-bar .wrap{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;align-items:center}
.demo-bar a{color:#9fd3d6;font-weight:600;text-decoration:none}
.demo-bar a:hover{text-decoration:underline}
/* the way back and the version switch are buttons, so nobody gets stuck inside a sample site */
.demo-bar .demo-links{display:flex;flex-wrap:wrap;gap:8px}
.demo-bar .demo-links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:6px;border:2px solid #9fd3d6;color:#f4f8f7;font:700 14px/1.2 "Helvetica Neue",Arial,sans-serif;text-decoration:none;white-space:nowrap}
.demo-bar .demo-links a:hover{background:#24394a;text-decoration:none}
.demo-bar .demo-links a.back{background:#9fd3d6;color:#15232b}
.demo-bar .demo-links a.back:hover{background:#c4e7e9}
.demo-bar .demo-links a:focus-visible{outline:2px solid #f4f8f7;outline-offset:2px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--nav-bg,var(--bg));border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px}
.logo{font-family:var(--display);font-weight:800;font-size:1.3rem;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo svg{flex:none}
.nav-links{display:flex;gap:24px;font-size:.93rem;font-weight:500}
.nav-links a{text-decoration:none;opacity:.8}
.nav-links a:hover{opacity:1}
@media (max-width:860px){.nav-links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-family:var(--body);font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:var(--r);border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-strong,var(--fg))}
.btn.sm{padding:9px 16px;font-size:.88rem}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* photo slot: shows the owner where their real photo goes */
.photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--photo-bg);aspect-ratio:var(--ar,4/3);max-width:100%;display:flex;align-items:flex-end}
.photo::before{content:"";position:absolute;inset:0;background:var(--photo-pattern,none);opacity:.55}
.photo span{position:relative;margin:12px;font:600 12px/1.3 "Helvetica Neue",Arial,sans-serif;color:var(--photo-ink,#fff);background:rgba(0,0,0,.38);padding:6px 9px;border-radius:4px}

/* forms */
.form{display:grid;gap:16px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form .row2{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label{font-weight:600;font-size:.9rem}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:var(--fg);background:var(--input-bg,var(--surface));border:1px solid var(--line-strong,var(--line));border-radius:var(--r);padding:11px 12px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field small{color:var(--muted);font-size:.82rem}
.form-note{font-size:.9rem;font-weight:600;padding:10px 12px;border-radius:var(--r);background:var(--note-bg,var(--surface));border:1px solid var(--line)}

/* footer */
.foot{padding-block:40px;font-size:.9rem;border-top:1px solid var(--line)}
.foot .wrap.foot-top{display:grid;grid-template-columns:1fr minmax(0,520px);gap:24px 40px;align-items:start}
.foot .copy{font-size:.82rem;margin-top:22px}
.foot h4{font-size:1rem;margin-bottom:8px}
.foot p,.foot li{color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
@media (max-width:760px){.foot .wrap.foot-top{grid-template-columns:1fr}}

/* sticky call bar on phones (trades) */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--callbar-bg,var(--fg));}
  .callbar a{flex:1}
  body.has-callbar{padding-bottom:74px}
  html:has(body.has-callbar){scroll-padding-bottom:96px}
}
.tnum{font-variant-numeric:tabular-nums}
/* phones: the sticky call bar carries the main action, so the header button steps aside */
@media (max-width:560px){body.has-callbar .nav .btn{display:none}}
.consent{font-size:.84rem;color:var(--muted);max-width:60ch}
.foot{--pol-line:var(--line);--pol-ink:var(--fg);--pol-muted:var(--muted);--pol-bg:var(--surface)}
.footacc{border:1px solid var(--pol-line);border-radius:6px;background:var(--pol-bg,transparent);width:100%;max-width:520px}
.footacc details+details{border-top:1px solid var(--pol-line)}
.footacc summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 18px;cursor:pointer;list-style:none;font-weight:700;font-size:1rem;color:var(--pol-ink)}
.footacc summary::-webkit-details-marker{display:none}
.footacc summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.footacc details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.footacc summary:focus-visible{outline-offset:-3px}
.footacc .acc-body{padding:0 18px 16px;color:var(--pol-muted);font-size:.93rem;line-height:1.55}
.footacc .acc-body p{margin:0;max-width:none;color:var(--pol-muted)}
.footacc .acc-body p+p{margin-top:8px}
.footacc .acc-body a{color:var(--pol-ink);font-weight:600;text-underline-offset:3px}
.footacc ul.pol{list-style:none;margin:0;padding:0 18px 6px;display:block}
.footacc ul.pol li{border-top:1px solid var(--pol-line);max-width:none;color:inherit}
.footacc ul.pol li a,.footacc ul.pol li .pol-item{display:grid;gap:2px;padding:12px 0;text-decoration:none;color:var(--pol-ink)}
.footacc ul.pol li b{font-weight:700;font-size:.95rem}
.footacc ul.pol li a b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.footacc ul.pol li a:hover b{text-decoration-thickness:2px}
.footacc ul.pol li span{color:var(--pol-muted);font-size:.86rem;line-height:1.45}
.footacc ul.pol li a[aria-current] b::after{content:" (this page)";font-weight:400;color:var(--pol-muted)}
.footacc .pol-note{color:var(--pol-muted);font-size:.84rem;padding:0 18px 14px;margin:0}


.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-weight:700}
.skip:focus{top:12px}

/* full-site previews: page links, phone menu, page cards (unused on one-page previews) */
.demo-links{display:flex;gap:6px 18px;flex-wrap:wrap}
.nav-links a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav-end{display:flex;align-items:center;gap:12px}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong,var(--line));border-radius:var(--r);cursor:pointer;font-weight:700;font-size:.9rem;color:var(--fg)}
.mnav summary::-webkit-details-marker{display:none}
.mnav-bars,.mnav-bars::before,.mnav-bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:1px}
.mnav-bars{position:relative}
.mnav-bars::before,.mnav-bars::after{content:"";position:absolute;left:0}
.mnav-bars::before{top:-6px}
.mnav-bars::after{top:6px}
.mnav-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:230px;display:grid;background:var(--surface);border:1px solid var(--line-strong,var(--line));border-radius:var(--r);padding:6px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.mnav-panel a{display:flex;align-items:center;min-height:46px;padding:0 12px;text-decoration:none;font-weight:600;border-radius:var(--r);color:var(--fg)}
.mnav-panel a:hover{background:var(--bg)}
.mnav-panel a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.mnav{display:block}}
.pagecards{border-top:1px solid var(--line)}
.pagecards h2{margin-bottom:22px}
.pagecard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.pagecard{display:grid;gap:6px;align-content:start;padding:20px;border:1px solid var(--line-strong,var(--line));border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--fg)}
.pagecard b{font-family:var(--display);font-size:1.2rem;line-height:1.2}
.pagecard b::after{content:" \2192";color:var(--accent)}
.pagecard span{color:var(--muted);font-size:.92rem}
.pagecard:hover{border-color:var(--accent)}