/* OAK Digital Group concept demos: the mock websites shown inside the before/after frames.
   Every business is fictional. Each After site has its own palette, type and layout.
   All sizes are in em: a desktop site is designed at 1200 wide (1em = 16px), a phone site at 390 wide (1em = 16px).
   Fonts: Lora (Northline, Harbour Street), Poppins (Maple Grove), Inter. All SIL OFL, see fonts/LICENSE.txt. */

@font-face{font-family:"NL Serif";src:url(fonts/lora-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"HS Serif";src:url(fonts/lora-italic-500.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"MG Display";src:url(fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

.site .ic{flex:none;width:1.2em;height:1.2em}
:where(.site) img{display:block;max-width:none}
:where(.site) ul{list-style:none;margin:0;padding:0}
:where(.site) p{margin:0}

/* ================= BEFORE: three dated fixed-width sites (late 2000s / early 2010s), one build per business ================= */
.s-before{overflow:hidden;line-height:1.4}
.s-before img{display:block;width:100%;height:auto}
.s-before u{color:inherit}
.s-before h1,.s-before h2,.s-before h3,.s-before h4{margin:0;font-weight:700}
.s-before table{border-collapse:collapse;width:100%}
.ob-wrap{width:60em;margin:0 auto}
/* phone: the same desktop page, zoomed out to fit, as a non-mobile site loads on a phone */
.s-before.b-ph{--bz:2;font-size:calc(100cqw / 61 * var(--bz));padding-top:calc(3.5em / var(--bz));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* a non-responsive desktop page on a phone after a pinch-zoom: same layout, read by panning; nothing reflows */
.ob-northline.b-ph{--bz:2.3}.ob-maple.b-ph{--bz:2.1}

/* Northline 2011: grey page, blue banner, grey tabs, left sidebar, Verdana */
.ob-northline{background:#c9ccd1 linear-gradient(#aeb3ba,#c9ccd1 18em) no-repeat;font-family:Verdana,"DejaVu Sans",Geneva,sans-serif;line-height:1.5;color:#222}
.ob-el>*{font-size:.8125em}
.ob-el{background:#fff;border:1px solid #8a8f97;box-shadow:0 0 .6em rgba(0,0,0,.25)}
.el-head{display:flex;justify-content:space-between;align-items:center;padding:1.1em 1.4em;background:linear-gradient(#21497f,#0f2b52);border-bottom:.25em solid #f2c200;color:#fff}
.el-logo{display:grid;grid-template-columns:auto 1fr;column-gap:.4em;align-items:center}
.el-bolt{grid-row:span 2;font-size:2.6em;color:#f2c200;line-height:1}
.el-logo b{font:italic 900 2em/1 "Arial Black",Arial,sans-serif;letter-spacing:-.02em;text-shadow:.06em .06em 0 #000}
.el-logo small{font:bold .95em Arial,sans-serif;color:#f2c200}
.el-call{text-align:right;font:bold 1em Arial,sans-serif}
.el-call b{display:block;font-size:2em;color:#f2c200;line-height:1.1}
.el-call small{font-weight:normal;font-size:.85em;color:#cfdbec}
.el-tabs{display:flex;gap:.2em;padding:.5em .8em 0;background:#e3e5e8;border-bottom:1px solid #8a8f97}
.el-tabs span{padding:.45em 1em;background:linear-gradient(#f5f5f5,#cfd2d6);border:1px solid #9aa0a8;border-bottom:0;font-weight:bold;font-size:.95em;color:#123a6b;border-radius:.3em .3em 0 0}
.el-tabs .on{background:#fff;position:relative;top:1px}
.el-body{display:grid;grid-template-columns:14em 1fr;gap:1.2em;padding:1.1em}
.el-box{border:1px solid #9aa0a8;background:#f2f3f5;margin-bottom:.9em}
.el-box h4{background:#0f2b52;color:#fff;padding:.35em .6em;font-size:1em}
.el-box ul{list-style:square!important;padding:.5em .6em .6em 1.9em!important}
.el-box li{color:#0b3d91;text-decoration:underline;font-size:.92em;margin:.15em 0}
.el-badge{border:2px solid #2b7a2b;background:#eef7ea;padding:.6em;text-align:center;font-size:.85em;margin-bottom:.9em}
.el-badge b{display:block;font-size:1.25em;color:#2b7a2b}
.el-free{text-align:center;padding:.6em;background:#fff8d6;border-color:#d9b100;font-size:.9em}
.el-free b{display:block;color:#c00;font-size:1.3em}
.el-main h1{font:bold 1.6em Arial,sans-serif;color:#0f2b52;border-bottom:1px dotted #999;padding-bottom:.2em;margin-bottom:.5em}
.el-main h2{font:bold 1.2em Arial,sans-serif;color:#0f2b52;margin:.6em 0 .2em}
.el-main p{margin:0 0 .7em}
.el-pics{display:flex;gap:1em;margin:.3em 0 .5em}
.el-pics figure{margin:0;width:15em;border:1px solid #999;padding:.25em;background:#fff}
.el-pics figcaption{font-size:.8em;text-align:center;color:#555;padding-top:.2em}
.el-why{list-style:disc!important;padding-left:1.6em!important;margin-bottom:.6em!important}
.el-foot{text-align:center;font-size:.8em;color:#555;padding:.8em;background:#e3e5e8;border-top:1px solid #8a8f97;line-height:1.7}
.el-foot u{color:#0b3d91}

/* Harbour Street 2010: dark brown page, centred serif header, PDF menus, Georgia/Times */
.ob-harbour{background:#1a120d;font-family:Georgia,"Times New Roman",serif;line-height:1.5;color:#e6d8bd}
.ob-hs>*{font-size:.9375em}
.ob-hs{width:56em;background:#2a1c14;border-left:1px solid #5c4532;border-right:1px solid #5c4532;padding:0 0 1em}
.hs0-head{text-align:center;padding:1.4em 0 .6em}
.hs0-head b{display:block;font:italic normal 3em/1.1 "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;color:#d9b56e;text-shadow:0 .05em .1em #000}
.hs0-head small{font-style:italic;color:#bfa77c}
.hs0-nav{text-align:center;padding:.5em;border-top:1px solid #5c4532;border-bottom:1px solid #5c4532;font-size:.9em;letter-spacing:.04em;color:#d9b56e;background:#21160f}
.hs0-hero{width:55.5em!important;margin:1.2em auto;border:.3em solid #4a3526;height:17em!important;object-fit:cover}
.hs0-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:2em;padding:0 2em}
.ob-hs h3{font:italic normal 1.5em Georgia,serif;color:#d9b56e;border-bottom:1px solid #5c4532;margin-bottom:.5em;padding-bottom:.15em}
.ob-hs p{margin:0 0 .7em}
.hs0-pdf{display:flex;align-items:center;gap:.5em}
.hs0-pdf u{color:#9cc0ff}
.hs0-pdf span{font:bold .65em Arial,sans-serif;background:#c8261b;color:#fff;padding:.15em .35em;border-radius:.15em}
.hs0-sm{font-size:.8em;color:#a89273}
.ob-hs table td{padding:.25em 0;border-bottom:1px dotted #5c4532}
.ob-hs table td+td{text-align:right}
.hs0-res{margin-top:.9em!important;text-align:center;border:1px solid #d9b56e;padding:.5em}
.hs0-res b{display:block;font-size:1.5em;color:#d9b56e}
.hs0-from{margin:1em 2em .6em!important}
.hs0-pics{display:flex;gap:1.2em;padding:0 2em}
.hs0-pics figure{margin:0;width:13em;background:#fff;padding:.4em .4em 0;transform:rotate(-1.2deg)}
.hs0-pics figure+figure{transform:rotate(1deg)}
.hs0-pics img{height:9.5em!important;object-fit:cover}
.hs0-crop{object-position:20% 60%}
.hs0-pics figcaption{font:italic .85em Georgia,serif;color:#333;text-align:center;padding:.3em 0}
.hs0-foot{text-align:center;font-size:.8em;color:#a89273;margin-top:1.4em;border-top:1px solid #5c4532;padding-top:.8em}

/* Maple Grove 2012: light blue page, boxy white panels, navy bar, stock smile, Tahoma */
.ob-maple{background:#bcd7ee linear-gradient(#e9f3fb,#bcd7ee 30em) no-repeat;font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;line-height:1.5;color:#2d3e50}
.ob-mg>*{font-size:.8125em}
.ob-mg{background:#fff;border:1px solid #9cbbd6;margin-top:1em}
.mg0-head{display:flex;justify-content:space-between;align-items:center;padding:1em 1.4em}
.mg0-logo b{display:block;font:bold 2em Tahoma,sans-serif;color:#1d5c96;letter-spacing:-.02em}
.mg0-logo small{color:#6b8299;font-size:.95em}
.mg0-ph{text-align:right;color:#6b8299}
.mg0-ph b{display:block;font-size:1.6em;color:#1d5c96}
.mg0-nav{display:flex;background:linear-gradient(#3f7fbf,#1d5c96);border-top:1px solid #7fb1e0}
.mg0-nav span{flex:1;text-align:center;color:#fff;font-weight:bold;padding:.55em 0;border-right:1px solid #5b95cf;font-size:.95em}
.mg0-ban{display:flex;align-items:center;background:#dcecf8;border-bottom:1px solid #9cbbd6;height:14em;overflow:hidden}
.mg0-ban div{flex:1;padding:0 2em}
.mg0-ban h2{font:bold 1.9em/1.2 Tahoma,sans-serif;color:#1d5c96}
.mg0-ban p{color:#4f7aa3;font-style:italic;margin-top:.4em}
.mg0-ban img{width:18.7em!important;flex:none}
.mg0-main{display:grid;grid-template-columns:1fr 17em;gap:1.4em;padding:1.2em 1.4em}
.mg0-txt h1{font:bold 1.45em Tahoma,sans-serif;color:#1d5c96;margin-bottom:.5em}
.mg0-txt p{margin:0 0 .8em}
.mg0-box{background:#f0f0f0;border:1px solid #cfcfcf;margin-bottom:.8em}
.mg0-box h4{background:#dcdcdc;color:#1d5c96;font-size:1em;padding:.3em .6em;border-bottom:1px solid #cfcfcf}
.mg0-box p,.mg0-box table{padding:.5em .6em;font-size:.92em}
.mg0-box p{margin:0}
.mg0-box u{color:#1d5c96}
.mg0-box td{padding:.1em .6em}
.mg0-foot{text-align:center;font-size:.8em;color:#6b8299;padding:.8em;border-top:1px solid #9cbbd6;background:#f4f8fc}

/* ================= NORTHLINE ELECTRICAL: warm paper, midnight blue, lamp amber, Lora ================= */
.nl,.nlp{--ink:#0e2036;--paper:#f7f1e5;--lamp:#f4a93c;--blue:#2c4a70;--mist:#e8decb;--soft:#33465e;
 background:var(--paper);color:var(--ink);font-family:var(--f-text)}
.nl{display:flex;flex-direction:column;line-height:1.4}
.nl-mark{width:2.1em;height:2.1em;flex:none}
.nl-logo{display:flex;align-items:center;gap:.7em}
.nl-wm{display:grid;line-height:1}
.nl-wm b{font:600 1.5em/1 "NL Serif",Georgia,"Times New Roman",serif;letter-spacing:-.012em}
.nl-wm small{margin-top:.35em;font-size:.82em;font-weight:600;letter-spacing:.07em;color:var(--blue)}
.nl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.9em 1.65em;border-radius:99em;background:var(--lamp);color:var(--ink);font-weight:600;font-size:1.04em;line-height:1.1;box-shadow:0 .6em 1.3em -.5em rgba(244,169,60,.85);white-space:nowrap}
.nl-btn.navy{background:var(--ink);color:var(--paper);box-shadow:none}
.nl-btn.sm{padding:.7em 1.3em;font-size:.95em}
.nl-btn.ghost{background:transparent;box-shadow:inset 0 0 0 .13em var(--ink)}
.nl-nav{flex:none;display:flex;align-items:center;gap:2.4em;height:4.5em;padding:0 3em;position:relative;z-index:3}
.nl-logo{margin-right:auto}
.nl-links{display:flex;gap:2.1em;font-weight:500;font-size:.98em}
.nl-phone{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:.98em}
.nl-phone .ic{color:var(--blue)}
.nl-hero{position:relative;flex:1;min-height:0;display:flex;align-items:center}
.nl-copy{position:relative;z-index:2;max-width:31em;padding:0 0 .6em 3em}
.nl-kicker{display:flex;align-items:center;gap:.65em;margin:0 0 1.15em!important;font-weight:600;font-size:.98em;color:var(--blue)}
.nl-kicker i{width:.62em;height:.62em;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 .3em rgba(244,169,60,.28)}
.nl-h{font:600 3.35em/1.05 "NL Serif",Georgia,"Times New Roman",serif;letter-spacing:-.022em;margin:0 0 .45em;text-wrap:balance}
.nl-p{font-size:1.14em;line-height:1.55;color:var(--soft);max-width:25em;margin:0 0 1.5em!important}
.nl-cta{display:flex;gap:.85em;width:max-content;margin-bottom:1.7em}
.nl-cta .ic{color:var(--ink)}
.nl-trust{display:flex;flex-wrap:wrap;gap:.7em 1.6em;font-size:.93em;font-weight:600}
.nl-trust li{display:flex;align-items:center;gap:.5em}
.nl-trust .ic{color:var(--blue);width:1.35em;height:1.35em}
.nl-media{position:absolute;right:0;top:0;bottom:0;width:50%;border-radius:9.5em 0 0 0;overflow:hidden;background:#0c1a33}
.nl-house{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 60%}
.nl-inset{position:absolute;left:calc(50% - 2.3em);bottom:2.3em;width:10.6em;aspect-ratio:4/5;border-radius:1.1em;overflow:hidden;border:.34em solid var(--paper);box-shadow:0 1.5em 2.8em -.9em rgba(14,32,54,.6);z-index:3;background:#0c1a33}
.nl-inset img{width:100%;height:100%;object-fit:cover}
.nl-seal{position:absolute;right:2.4em;top:2.2em;z-index:3;width:6.3em;height:6.3em;border-radius:50%;display:grid;place-items:center;background:var(--lamp);color:var(--ink);text-align:center;transform:rotate(-9deg);box-shadow:0 1em 2em -.6em rgba(0,0,0,.55)}
.nl-seal::before{content:"";position:absolute;inset:.42em;border-radius:50%;border:.1em dashed rgba(14,32,54,.5)}
.nl-seal span{font:600 1.02em/1.15 "NL Serif",Georgia,serif;max-width:4.6em}
.nl-svc{flex:none;background:var(--ink);color:var(--paper);padding:1.4em 3em 1em}
.nl-svc ul{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4em}
.nl-svc li{display:grid;grid-template-columns:2.3em 1fr;column-gap:.8em;align-items:center}
.nl-svc li .ic{grid-row:1/3;width:2.3em;height:2.3em;padding:.5em;border-radius:.7em;background:rgba(244,169,60,.14);color:var(--lamp)}
.nl-svc b{font-size:.98em;line-height:1.2}
.nl-svc li span{font-size:.8em;line-height:1.3;opacity:.72}
.nl-svc p{margin-top:.95em!important;padding-top:.7em;border-top:1px solid rgba(247,241,229,.16);font-size:.86em;opacity:.78}

/* Northline on a phone */
/* phone mocks: 390-wide design, 1em = 16px at 390 */
.site.s-phone{font-size:4.1026cqw;line-height:1.35;display:flex;flex-direction:column}
.nlp{display:flex;flex-direction:column;padding:0!important}
.nlp-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:2.7em 1.2em 0;color:#fff}
.nlp .nl-mark{width:1.9em;height:1.9em}
.nlp .nl-wm b{font-size:1.28em;color:#fff}.nlp .nl-wm small{color:#cdd8e8}
.nlp-menu{display:block;padding:.55em .65em;border-radius:.8em;background:rgba(6,14,26,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nlp-menu b{display:block;width:1.3em;height:.15em;margin:.27em 0;border-radius:2px;background:#fff}
.nlp-pic{position:relative;flex:none;height:17.6em;overflow:hidden;background:#0c1a33}
.nlp-pic .nl-house{object-position:50% 70%;transform:scale(1.34);transform-origin:50% 68%}
.nlp-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.5),transparent 34%)}
.nlp-chip{position:absolute;left:1em;bottom:2.6em;z-index:3;display:flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:99em;background:rgba(6,14,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:.78em}
.nlp-chip .ic{color:var(--lamp)}
.nlp-sheet{position:relative;z-index:2;flex:1;margin-top:-1.7em;background:var(--paper);border-radius:1.7em 1.7em 0 0;padding:1.45em 1.3em 0}
.nlp .nl-kicker{font-size:.8em;margin-bottom:.7em!important}
.nlp-h{font:600 1.78em/1.08 "NL Serif",Georgia,serif;letter-spacing:-.02em;margin:0 0 .45em;text-wrap:balance}
.nlp-p{font-size:.92em;line-height:1.45;color:var(--soft);margin:0 0 1em!important}
.nlp-cta .nl-btn{display:flex;width:100%;padding:1em;font-size:1.02em}
.nlp-trust{display:flex;gap:.4em;margin:.95em 0 .9em}
.nlp-trust li{flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;padding:.5em .2em;border-radius:99em;background:var(--mist);font-size:.76em;font-weight:600;white-space:nowrap}
.nlp-trust .ic{color:var(--blue);width:1.3em;height:1.3em}
.nlp-svc{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.nlp-svc li{display:flex;align-items:center;gap:.55em;padding:.7em .75em;border-radius:.8em;background:#fff;box-shadow:inset 0 0 0 1px rgba(14,32,54,.1);font-size:.8em;font-weight:600;line-height:1.2}
.nlp-svc li:last-child{grid-column:1/-1}
.nlp-svc .ic{color:var(--blue);width:1.55em;height:1.55em}
.nlp-bar{position:absolute;left:.8em;right:.8em;bottom:.8em;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:.5em .55em .5em .6em;border-radius:1.1em;background:var(--ink);color:#fff;box-shadow:0 .7em 1.6em rgba(6,14,26,.5)}
.nlp-call{display:flex;align-items:center;gap:.65em;font-weight:600;font-size:.95em}
.nlp-call .ic{width:2.25em;height:2.25em;padding:.55em;border-radius:50%;background:var(--lamp);color:var(--ink)}
.nlp-q{padding:.75em 1.3em;border-radius:.8em;background:rgba(255,255,255,.14);font-weight:600;font-size:.9em}

/* ================= HARBOUR STREET KITCHEN: charcoal, ember, cream, Lora italic ================= */
.hs,.hsp{--bg:#140d0a;--cream:#f4e9d8;--ember:#ef6e2d;--brass:#d9a85f;--mute:#c9b9a2;--line:rgba(244,233,216,.16);
 background:var(--bg);color:var(--cream);font-family:var(--f-text)}
.hs{display:flex;flex-direction:column;line-height:1.4}
.hs-serif,.hs-h,.hsp-h,.hs-logo b,.hs-menu b,.hsp-menu b,.hs-mh{font-family:"HS Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500}
.hs-nav{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:4.5em;padding:0 3em;border-bottom:1px solid var(--line)}
.hs-side{display:flex;gap:2.2em;font-size:.98em;font-weight:500;color:var(--mute)}
.hs-side.r{justify-content:flex-end;align-items:center}
.hs-logo{display:flex;align-items:center;gap:.55em}
.hs-logo .ic{color:var(--ember);width:1.5em;height:1.5em}
.hs-logo b{font-size:1.65em;line-height:1}
.hs-logo small{font-size:.82em;font-weight:600;letter-spacing:.07em;color:var(--brass);align-self:flex-end;margin-bottom:.2em}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;padding:.9em 1.7em;border-radius:.4em;background:var(--ember);color:#1a0c06;font-weight:700;font-size:1.02em;line-height:1.1;white-space:nowrap}
.hs-btn.sm{padding:.6em 1.2em;font-size:.93em}
.hs-btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 .13em rgba(244,233,216,.4)}
.hs-hero{position:relative;flex:1;min-height:0;display:flex;align-items:stretch;justify-content:space-between;overflow:hidden}
.hs-copy{align-self:center;max-width:44em;padding:0 0 .6em 3em}
.hs-kicker{margin:0 0 1em!important;font-weight:600;font-size:.98em;color:var(--ember)}
.hs-h{font-size:4.4em;line-height:1.02;letter-spacing:-.02em;margin:0 0 .4em;max-width:10.6em;text-wrap:balance}
.hs-p{font-size:1.15em;line-height:1.55;color:var(--mute);max-width:24em;margin:0 0 1.5em!important}
.hs-cta{display:flex;gap:.85em;width:max-content;margin-bottom:1.7em}
.hs-info{display:flex;gap:2.2em;font-size:.88em;line-height:1.35;color:var(--mute)}
.hs-info li{display:flex;gap:.7em;align-items:flex-start}
.hs-info .ic{color:var(--brass);width:1.5em;height:1.5em;margin-top:.1em}
.hs-arch{align-self:flex-end;margin-right:3.2em;width:21.5em;height:calc(100% - 1.6em);border-radius:10.75em 10.75em 0 0;overflow:hidden;box-shadow:0 0 0 .22em rgba(217,168,95,.55),0 0 7em rgba(239,110,45,.25);background:#2a1008}
.hs-oven{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hs-menu{flex:none;display:grid;grid-template-columns:auto repeat(3,1fr);gap:2.4em;align-items:center;padding:1.35em 3em 1.4em;background:#1c120d;border-top:1px solid rgba(217,168,95,.4)}
.hs-mh{margin:0;font-size:1.5em;color:var(--brass);line-height:1.1;padding-right:1.8em;border-right:1px solid var(--line)}
.hs-menu ul{display:contents}
.hs-menu li{display:grid;gap:.25em}
.hs-menu b{font-size:1.38em;line-height:1.1}
.hs-menu li span{font-size:.86em;color:var(--mute)}

/* Harbour Street on a phone */
.hsp{display:flex;flex-direction:column;padding:0!important}
.hsp-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:2.8em 1.3em .9em}
.hsp .hs-logo b{font-size:1.28em}.hsp .hs-logo small{font-size:.72em}
.hsp .nlp-menu{background:rgba(244,233,216,.1)}
.hsp-pic{position:relative;flex:none;height:16.6em;overflow:hidden;background:#2a1008}
.hsp-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,13,10,.62),rgba(20,13,10,0) 38%,rgba(20,13,10,.15) 62%,#140d0a)}
.hsp-pic .hs-oven{object-position:50% 68%}
.hsp-body{position:relative;z-index:1;flex:1;padding:0 1.3em;margin-top:-1.4em}
.hsp .hs-kicker{font-size:.82em;margin-bottom:.55em!important}
.hsp-h{font-size:2.35em;line-height:1.04;letter-spacing:-.02em;margin:0 0 .35em;text-wrap:balance}
.hsp-p{font-size:.92em;color:var(--mute);margin:0 0 1em!important}
.hsp-cta{display:flex;gap:.55em;margin-bottom:1.1em}
.hsp-cta .hs-btn{flex:1;padding:.95em .6em;font-size:.98em}
.hsp-cta .hs-btn.ghost{flex:0 0 28%}
.hsp-info{display:grid;gap:.45em;font-size:.8em;color:var(--mute);margin-bottom:1em}
.hsp-info li{display:flex;align-items:center;gap:.6em}.hsp-info .ic{color:var(--brass)}
.hsp-menu{display:grid;gap:.1em;border-top:1px solid var(--line)}
.hsp-menu li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.62em 0;border-bottom:1px solid var(--line)}
.hsp-menu b{font-size:1.12em;line-height:1.1;white-space:nowrap}
.hsp-menu span{font-size:.7em;color:var(--mute);text-align:right;line-height:1.25}
.hsp-bar{position:absolute;left:.8em;right:.8em;bottom:.8em;z-index:5;display:flex;align-items:center;justify-content:space-around;padding:.95em .6em;border-radius:1em;background:var(--ember);color:#1a0c06;font-weight:700;box-shadow:0 .7em 1.6em rgba(0,0,0,.5)}
.hsp-bar i{width:1px;align-self:stretch;background:rgba(26,12,6,.35)}
.hsp-bar span{margin-left:-.5em}

/* ================= MAPLE GROVE DENTAL: air, sky, mint, coral, Poppins ================= */
.mg,.mgp{--ink:#12324a;--bg:#f3f9fc;--coral:#ff7a59;--coral-d:#e8603e;--mint:#cdeee3;--sky:#d9ebf8;--mute:#47647a;--line:rgba(18,50,74,.13);--green:#1f9d78;
 background:var(--bg);color:var(--ink);font-family:var(--f-text)}
.mg{display:flex;flex-direction:column;line-height:1.4}
.mg-logo,.mg-h,.mgp-h,.mg-book b{font-family:"MG Display","Poppins",system-ui,sans-serif;font-weight:500}
.mg-nav{flex:none;display:flex;align-items:center;gap:2.4em;height:4.5em;padding:0 3em;background:#fff;border-bottom:1px solid var(--line)}
.mg-logo{display:flex;align-items:center;gap:.65em;margin-right:auto;font-size:1.32em;letter-spacing:-.01em;line-height:1}
.mg-logo i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--mint);color:#0c6b55}
.mg-logo i .ic{width:1.15em;height:1.15em}
.mg-logo small{font:inherit;font-size:1em;color:var(--mute);margin-left:-.35em}
.mg-links{display:flex;gap:2.1em;font-size:.97em;font-weight:500;color:var(--mute)}
.mg-phone{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:.97em}.mg-phone .ic{color:var(--coral-d)}
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.9em 1.7em;border-radius:99em;background:var(--coral);color:#fff;font-weight:600;font-size:1.03em;line-height:1.1;white-space:nowrap;box-shadow:0 .7em 1.4em -.6em rgba(255,122,89,.9)}
.mg-btn.sm{padding:.72em 1.2em;font-size:.88em;box-shadow:none}
.mg-btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 .13em rgba(18,50,74,.2)}
.mg-hero{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:2em;align-items:center;padding:1.6em 3em 1.4em}
.mg-pill{display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1em!important;padding:.45em 1em;border-radius:99em;background:var(--mint);color:#0c5f4b;font-weight:600;font-size:.92em}
.mg-pill i{width:.6em;height:.6em;border-radius:50%;background:var(--green);box-shadow:0 0 0 .25em rgba(31,157,120,.25)}
.mg-h{font-size:3.15em;line-height:1.1;letter-spacing:-.025em;margin:0 0 .45em;text-wrap:balance;max-width:11.5em}
.mg-p{font-size:1.14em;line-height:1.6;color:var(--mute);max-width:25em;margin:0 0 1.5em!important}
.mg-cta{display:flex;gap:.85em;width:max-content;margin-bottom:1.6em}
.mg-cta .ic{color:var(--coral-d)}
.mg-trust{display:flex;flex-wrap:wrap;gap:.6em 1.5em;font-size:.9em;font-weight:600;color:var(--ink)}
.mg-trust li{display:flex;align-items:center;gap:.5em}.mg-trust .ic{color:var(--green);width:1.3em;height:1.3em}
.mg-art{position:relative;align-self:stretch;border-radius:2em;overflow:visible}
.mg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;border-radius:2em}
.mg-book{position:absolute;left:-2.6em;bottom:2.2em;width:15.5em;padding:1.1em 1.2em 1.2em;border-radius:1.3em;background:#fff;box-shadow:0 1.6em 3em -1em rgba(18,50,74,.45),0 0 0 1px var(--line);display:grid;gap:.7em}
.mg-book b{font-size:1.1em}
.mg-days,.mg-slots{display:flex;gap:.45em}
.mg-days span,.mg-slots span{flex:1;padding:.55em 0;border-radius:.7em;background:var(--bg);text-align:center;font-size:.82em;font-weight:600;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
.mg-days .on,.mg-slots .on{background:var(--ink);color:#fff;box-shadow:none}
.mg-book .mg-btn{width:100%}
.mg-svc{flex:none;background:#fff;border-top:1px solid var(--line);padding:1.15em 3em}
.mg-svc ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em}
.mg-svc li{display:flex;align-items:center;gap:.8em;font-weight:600;font-size:.98em}
.mg-svc i,.mgp-svc i{display:grid;place-items:center;flex:none;width:2.7em;height:2.7em;border-radius:50%}
.mg-svc li:nth-child(1) i,.mgp-svc li:nth-child(1) i{background:var(--mint);color:#0c6b55}
.mg-svc li:nth-child(2) i,.mgp-svc li:nth-child(2) i{background:var(--sky);color:#25598c}
.mg-svc li:nth-child(3) i,.mgp-svc li:nth-child(3) i{background:#fff0d2;color:#9a6a05}
.mg-svc li:nth-child(4) i,.mgp-svc li:nth-child(4) i{background:#ffe1d9;color:#b8432a}
.mg-svc i .ic,.mgp-svc i .ic{width:1.35em;height:1.35em}

/* Maple Grove on a phone */
.mgp{display:flex;flex-direction:column;padding:0!important}
.mgp-top{flex:none;display:flex;justify-content:space-between;align-items:center;padding:2.8em 1.2em .6em}
.mgp .mg-logo{font-size:1.1em}
.mgp .nlp-menu{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}.mgp .nlp-menu b{background:var(--ink)}
.mgp-body{flex:none;padding:.5em 1.3em 0}
.mgp .mg-pill{font-size:.78em;margin-bottom:.8em!important}
.mgp-h{font-size:1.85em;line-height:1.12;letter-spacing:-.025em;margin:0 0 .4em;text-wrap:balance}
.mgp-p{font-size:.9em;line-height:1.5;color:var(--mute);margin:0 0 .95em!important}
.mgp-cta .mg-btn{display:flex;width:100%;padding:1em;font-size:1.02em}
.mgp-art{position:relative;flex:none;height:13.2em;margin:1.1em 1.3em 0;border-radius:1.4em;overflow:hidden}
.mgp-art .mg-img{border-radius:0;object-position:50% 52%}
.mgp-art .mg-book{left:.8em;right:.8em;bottom:.8em;width:auto;padding:.8em .9em;gap:.55em}
.mgp-art .mg-book b{font-size:.92em}
.mgp-trust{display:flex;gap:.45em;margin:.9em 1.3em 0}
.mgp-trust li{flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;padding:.5em .3em;border-radius:99em;background:var(--mint);color:#0c5f4b;font-size:.76em;font-weight:600;white-space:nowrap}
.mgp-trust .ic{width:1.25em;height:1.25em}
.mgp-svc{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.7em 1.3em 0}
.mgp-svc li{display:flex;align-items:center;gap:.55em;padding:.55em .6em;border-radius:.9em;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.74em;font-weight:600;line-height:1.2}
.mgp-svc i{width:2.4em;height:2.4em}
.mgp-bar{position:absolute;left:.8em;right:.8em;bottom:.8em;z-index:5;display:flex;gap:.55em;padding:.5em;border-radius:1.1em;background:#fff;box-shadow:0 .7em 1.6em rgba(18,50,74,.28),0 0 0 1px var(--line)}
.mgp-bar .mg-btn{flex:1;padding:.9em .5em;font-size:.98em;box-shadow:none}
.mgp-bar .mg-btn.call{flex:0 0 32%;background:var(--ink)}