/* ==========================================================================
Mapovis — site-wide modern stylesheet
Direction 1a "Airy Editorial", built from the Claude Design handover
("Mapovis website style refresh"). Design-system tokens inlined as real CSS.
Used by every restyled page: index, video, demo, features(+subpages),
faq, contact, patent.
========================================================================== */
/* ---- Fonts ----
Loaded via in each page's (with preconnect) for
faster discovery than an @import chain. Keep that in sync with these families. */
:root{
/* Brand blues */
--blue-primary:#6FB1E2;
--blue-action:#169FE6;
--blue-100:#D9EFFB;
--blue-200:#B3DFF7;
/* Neutrals */
--charcoal:#505050;
--silver:#A0A0A0;
--cloud:#F2F2F2;
--white:#FFFFFF;
--ink-900:#333333;
--border-gray:#E0E0E0;
/* Semantic aliases */
--text-heading:var(--ink-900);
--text-body:var(--charcoal);
--text-secondary:var(--silver);
--brand-cta:var(--blue-action);
--border-default:var(--border-gray);
--danger:#C0392B;
--success:#3FA168;
/* Category accents (Who Are You / feature media) */
--cat-dm-bg:#F4E7CE; --cat-dm-fg:#B8863C;
--cat-ls-bg:#CFE7E4; --cat-ls-fg:#2F8A80;
--cat-mk-bg:#CFE3EE; --cat-mk-fg:#3D7DAD;
--cat-dg-bg:#D8DEEE; --cat-dg-fg:#4D5C93;
/* Fonts */
--font-display:'Poppins','Segoe UI',system-ui,sans-serif;
--font-body:'Open Sans','Segoe UI',system-ui,sans-serif;
/* Type scale */
--text-h2:600 26px/1.25 var(--font-display);
--text-h3:600 21px/1.3 var(--font-display);
--text-h4:600 17px/1.35 var(--font-display);
--text-body-lg:400 17px/1.6 var(--font-body);
--text-body-md:400 15px/1.6 var(--font-body);
--text-body-sm:400 13px/1.5 var(--font-body);
--text-caption:400 12px/1.4 var(--font-body);
--text-eyebrow:700 13px/1.2 var(--font-display);
/* Radius / shadow / motion */
--radius-sm:4px;
--radius-md:6px;
--radius-lg:10px;
--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(50,50,50,.06);
--shadow-card:0 2px 8px rgba(50,50,50,.08);
--shadow-raised:0 8px 24px rgba(50,50,50,.12);
--ease-standard:cubic-bezier(0.4,0,0.2,1);
--duration-fast:120ms;
--duration-default:180ms;
--page-max:1200px;
}
/* ---- Reset / base ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;background:var(--white);color:var(--text-body);
font-family:var(--font-body);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4,p{margin:0;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(22,159,230,.28)}50%{box-shadow:0 0 0 10px rgba(22,159,230,0)}}
.m-wrap{max-width:var(--page-max);margin:0 auto;}
.m-section{max-width:var(--page-max);margin:0 auto;padding:8px 40px 0;}
/* ---- Buttons / inputs ---- */
.m-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:600 15px/1 var(--font-body);border:1px solid transparent;
border-radius:var(--radius-md);cursor:pointer;text-decoration:none;
background:var(--brand-cta);color:var(--white);padding:0 22px;height:50px;
transition:background var(--duration-default) var(--ease-standard),
transform var(--duration-default) var(--ease-standard);
}
.m-btn:hover{background:#1289c7;transform:translateY(-1px);}
.m-btn:active{transform:translateY(0);}
.m-btn--sm{height:44px;padding:0 18px;}
.m-btn--block{width:100%;}
.m-btn--secondary{
background:var(--white);color:var(--brand-cta);border-color:var(--brand-cta);
}
.m-btn--secondary:hover{background:var(--blue-100);}
.m-input{
width:100%;height:44px;border:1px solid var(--border-default);
border-radius:var(--radius-md);padding:0 14px;font:var(--text-body-md);
color:var(--text-body);background:var(--white);
transition:border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.m-input:focus{outline:none;border-color:var(--brand-cta);box-shadow:0 0 0 3px rgba(22,159,230,.18);}
/* ---- Enquiry forms (contact + pricing) ---- */
.m-eform{display:flex;flex-direction:column;gap:18px;max-width:560px;}
.m-eform__row{display:flex;gap:16px;}
.m-eform__row .m-eform__group{flex:1;}
.m-eform__group{display:flex;flex-direction:column;gap:6px;}
.m-label{font:600 13px/1.3 var(--font-display);color:var(--text-heading);}
.m-label .m-req{color:var(--danger);margin-left:2px;}
textarea.m-input{height:auto;min-height:140px;padding:12px 14px;line-height:1.55;resize:vertical;font-family:var(--font-body);}
.m-input.is-invalid{border-color:var(--danger);}
.m-input.is-invalid:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.15);}
/* Pristine validation error state (errorClass added to .m-eform__group). */
.m-eform__group.has-error .m-input{border-color:var(--danger);}
.m-eform__group.has-error .m-input:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.15);}
.m-eform__err{font:var(--text-caption);color:var(--danger);}
.m-eform__err:empty{display:none;}
.m-eform__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.m-eform__status{display:none;border-radius:var(--radius-md);padding:12px 16px;font:var(--text-body-md);}
.m-eform__status.is-error{display:block;background:#FDECEA;color:#9B2C22;border:1px solid #F3C0BA;}
.m-eform__actions{display:flex;align-items:center;gap:14px;margin-top:2px;}
.m-eform__actions .m-btn[disabled]{opacity:.6;cursor:default;transform:none;}
@media (max-width:560px){.m-eform__row{flex-direction:column;gap:18px;}}
/* ---- Header / nav ---- */
.m-header{
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:18px 40px;background:var(--white);border-bottom:1px solid var(--border-default);
position:sticky;top:0;z-index:50;
}
.m-logo{display:flex;align-items:center;}
.m-logo img{height:36px;display:block;}
.m-nav{display:flex;gap:34px;}
.m-nav a{
font:var(--text-body-md);color:var(--text-secondary);text-decoration:none;
padding-bottom:6px;border-bottom:2px solid transparent;
transition:color var(--duration-fast) var(--ease-standard);
}
.m-nav a:hover{color:var(--text-heading);}
.m-nav a.current{color:var(--text-heading);font-weight:600;border-bottom-color:var(--brand-cta);}
.m-navtoggle{display:none;border:0;background:none;cursor:pointer;color:var(--text-heading);padding:6px;}
/* ---- Interior page header ---- */
.m-pagehead{
position:relative;overflow:hidden;padding:72px 40px 56px;
background:radial-gradient(480px 360px at 15% 15%, var(--blue-100), transparent 60%), var(--white);
}
.m-pagehead__inner{max-width:var(--page-max);margin:0 auto;animation:fadeUp .6s var(--ease-standard) both;}
.m-eyebrow{font:var(--text-eyebrow);letter-spacing:.14em;color:var(--brand-cta);}
.m-pagehead .m-eyebrow{display:block;margin-bottom:14px;}
.m-pagehead h1{font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1.15;color:var(--ink-900);margin-bottom:12px;}
.m-pagehead__sub{font:var(--text-body-lg);color:var(--text-body);max-width:580px;}
/* Contact page: tighter page-head. Desktop only — mobile keeps the responsive padding below. */
@media (min-width:561px){
.m-pagehead--contact{padding:72px 40px 35px;}
}
/* ---- Hero (home) ---- */
.m-hero{
padding:90px 40px 100px;
background:
radial-gradient(560px 420px at 12% 18%, var(--blue-100), transparent 60%),
radial-gradient(520px 400px at 92% 88%, var(--blue-200), transparent 55%),
var(--white);
}
.m-hero__inner{max-width:var(--page-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:56px;}
.m-hero__copy{max-width:460px;animation:fadeUp .7s var(--ease-standard) both;}
.m-hero .m-eyebrow{display:inline-block;background:var(--blue-100);padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:22px;}
.m-hero h1{font-family:var(--font-display);font-weight:700;font-size:54px;line-height:1.08;color:var(--ink-900);margin-bottom:20px;}
.m-hero__lead{font:var(--text-body-lg);color:var(--text-body);margin-bottom:32px;max-width:380px;}
.m-hero__media{animation:fadeUp .8s .1s var(--ease-standard) both;flex-shrink:0;}
.m-videoframe{background:var(--white);border-radius:20px;box-shadow:var(--shadow-raised);padding:16px;}
.m-video{
width:400px;max-width:100%;aspect-ratio:5/3;border-radius:14px;background:var(--ink-900);
position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;
}
.m-video::before{
content:"";position:absolute;inset:0;
background:url("../images/logo-only-white-transperant.png") center/44% no-repeat;
opacity:.14;pointer-events:none;
}
.m-video__play{
position:relative;z-index:1;
width:66px;height:66px;border-radius:50%;background:var(--white);
display:flex;align-items:center;justify-content:center;
animation:pulseRing 2.6s ease-in-out infinite;
transition:transform var(--duration-default) var(--ease-standard);
}
.m-video:hover .m-video__play{transform:scale(1.07);}
.m-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px;}
/* ---- Video lightbox (modal player with full Vimeo controls) ---- */
.m-lightbox{
position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
padding:24px;background:rgba(15,20,25,.86);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.m-lightbox.open{display:flex;animation:fadeIn .18s var(--ease-standard);}
.m-lightbox__stage{
position:relative;width:min(1152px,94vw);aspect-ratio:16/9;background:#000;
border-radius:12px;overflow:hidden;box-shadow:var(--shadow-raised);
}
.m-lightbox__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.m-lightbox__close{
position:absolute;top:18px;right:22px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;
cursor:pointer;background:rgba(255,255,255,.14);color:#fff;
display:flex;align-items:center;justify-content:center;
transition:background var(--duration-fast) var(--ease-standard);
}
.m-lightbox__close:hover{background:rgba(255,255,255,.28);}
.m-lightbox__close svg{width:22px;height:22px;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ---- Feature row (home + features) ---- */
.m-features{padding:64px 40px;}
.m-features__inner{max-width:var(--page-max);margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:56px;}
.m-feature{display:flex;gap:18px;max-width:320px;text-decoration:none;}
.m-feature__icon{
width:64px;height:64px;border-radius:50%;flex-shrink:0;background:var(--blue-100);color:var(--brand-cta);
display:flex;align-items:center;justify-content:center;
transition:transform var(--duration-default) var(--ease-standard), background var(--duration-default) var(--ease-standard);
}
.m-feature:hover .m-feature__icon{transform:scale(1.08);background:var(--blue-200);}
.m-feature__title{font:var(--text-h4);color:var(--text-heading);margin-bottom:6px;}
.m-feature__desc{font:var(--text-body-sm);color:var(--text-secondary);}
/* ---- Who Are You tiles ---- */
.m-who{padding:8px 40px 80px;}
.m-who__inner{max-width:var(--page-max);margin:0 auto;}
.m-who__head{border-top:1px solid var(--border-default);padding-top:28px;margin-bottom:28px;}
.m-who__head h2{font:var(--text-h2);color:var(--text-heading);}
.m-who__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.m-tile{
text-decoration:none;border-radius:16px;overflow:hidden;display:block;background:var(--white);
border:1px solid var(--border-default);
transition:transform var(--duration-default) var(--ease-standard), box-shadow var(--duration-default) var(--ease-standard);
}
.m-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised);}
.m-tile__img{height:170px;width:100%;object-fit:cover;display:block;}
.m-tile__icon{height:150px;display:flex;align-items:center;justify-content:center;}
.m-tile__label{padding:14px 16px;font:var(--text-body-md);font-weight:600;color:var(--brand-cta);}
/* ---- Split content (features intro, patent, contact) ---- */
.m-split{max-width:var(--page-max);margin:0 auto;padding:8px 40px 0;display:flex;gap:56px;align-items:flex-start;}
.m-split__main{flex:1.6;}
.m-split__side{flex:1;min-width:280px;}
.m-prose h2{font:var(--text-h2);color:var(--text-heading);margin-bottom:20px;}
.m-prose p{font:var(--text-body-md);color:var(--text-body);margin-bottom:18px;}
.m-prose p:last-child{margin-bottom:0;}
.m-prose a{color:var(--brand-cta);}
/* Advantages checklist */
.m-checklist{display:flex;flex-direction:column;gap:14px;}
.m-checklist__item{display:flex;align-items:flex-start;gap:10px;font:var(--text-body-md);color:var(--text-body);}
.m-checklist__item svg{width:17px;height:17px;color:var(--brand-cta);margin-top:3px;flex-shrink:0;}
/* ---- Notice bar ---- */
.m-notice{
max-width:var(--page-max);margin:0 auto;padding:64px 40px 0;
}
.m-notice__inner{
display:flex;flex-direction:column;gap:12px;background:var(--blue-100);
border-radius:var(--radius-md);padding:16px 22px;
}
.m-notice__row{display:flex;align-items:center;gap:12px;}
.m-notice__row svg{width:18px;height:18px;color:var(--brand-cta);flex-shrink:0;}
.m-notice__row p{font:var(--text-body-md);color:var(--text-body);}
.m-notice__row a{color:var(--brand-cta);font-weight:600;text-decoration:none;}
/* ---- Demo cards ---- */
.m-demogrid{max-width:var(--page-max);margin:0 auto;padding:8px 40px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.m-democard{
text-decoration:none;border-radius:16px;overflow:hidden;display:block;background:var(--white);
border:1px solid var(--border-default);
transition:transform var(--duration-default) var(--ease-standard), box-shadow var(--duration-default) var(--ease-standard);
}
.m-democard:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised);}
.m-democard__icon{height:170px;display:flex;align-items:center;justify-content:center;}
.m-democard__foot{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.m-democard__foot span{font:var(--text-body-md);font-weight:600;color:var(--text-heading);}
.m-democard__foot svg{width:18px;height:18px;color:var(--brand-cta);flex-shrink:0;}
/* ---- Video page ---- */
.m-videopage{max-width:var(--page-max);margin:0 auto;padding:26px 40px 80px;display:flex;gap:48px;align-items:flex-start;}
.m-videopage__player{flex:1.7;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised);background:var(--cloud);}
.m-videoposter{position:relative;aspect-ratio:16/9;background:var(--ink-900) url("../images/video-poster.jpg") center/cover no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.m-videopage__side{flex:1;min-width:300px;background:var(--cloud);border-radius:var(--radius-lg);padding:32px;}
.m-card-title{font:var(--text-h4);color:var(--text-heading);margin-bottom:16px;}
.m-form-col{display:flex;flex-direction:column;gap:12px;}
/* ---- Contact page ---- */
.m-map{
max-width:var(--page-max);margin:0 auto;padding:16px 40px 40px;
}
.m-map__inner{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-default);height:354px;background:var(--cloud);}
.m-map__inner iframe{width:100%;height:100%;border:0;display:block;}
.m-contact-info div{font:var(--text-body-sm);color:var(--text-body);}
.m-contact-info .m-ci-row{display:flex;align-items:center;gap:10px;margin-top:2px;}
.m-contact-info .m-ci-row svg{width:15px;height:15px;color:var(--brand-cta);}
.m-contact-info a{color:inherit;text-decoration:none;}
.m-contact-info a:hover{color:var(--brand-cta);}
/* ---- Patent certificate card ---- */
.m-cert{
width:280px;height:396px;border-radius:var(--radius-md);border:1px solid var(--border-default);
background:var(--cloud);box-shadow:var(--shadow-card);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
transition:transform var(--duration-default) var(--ease-standard);text-decoration:none;
}
.m-cert:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised);}
.m-cert i{width:44px;height:44px;color:var(--brand-cta);}
.m-cert span{font:var(--text-body-sm);color:var(--text-secondary);}
/* ---- Feature detail body ---- */
.m-article{
max-width:var(--page-max);margin:0 auto;padding:56px 40px 0;
display:flex;align-items:flex-start;gap:48px;
}
.m-article--reverse{flex-direction:row-reverse;}
.m-article__media{
flex:0 0 340px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
}
.m-article__media svg{width:64px;height:64px;}
.m-article__body{flex:1;}
.m-article__body h2{font:var(--text-h2);color:var(--text-heading);margin-bottom:16px;}
.m-article__body p{font:var(--text-body-md);color:var(--text-body);margin-bottom:16px;}
.m-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.m-pill{
display:flex;align-items:center;gap:7px;background:var(--blue-100);color:var(--text-heading);
font:var(--text-body-sm);font-weight:600;padding:8px 14px;border-radius:var(--radius-pill);
}
.m-pill svg{width:14px;height:14px;color:var(--brand-cta);}
.m-noticegrid-sec{max-width:var(--page-max);margin:0 auto;padding:80px 40px 0;}
.m-noticegrid-sec__head{border-top:1px solid var(--border-default);padding-top:28px;margin-bottom:36px;}
.m-noticegrid-sec__head h2{font:var(--text-h2);color:var(--text-heading);}
.m-noticegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;}
.m-noticebox{transition:transform var(--duration-default) var(--ease-standard);}
.m-noticebox:hover{transform:translateY(-3px);}
.m-noticebox__icon{
width:52px;height:52px;border-radius:50%;background:var(--blue-100);color:var(--brand-cta);
display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.m-noticebox__icon svg{width:22px;height:22px;}
.m-noticebox__title{font:var(--text-h4);color:var(--text-heading);margin-bottom:8px;}
.m-noticebox__body{font:var(--text-body-sm);color:var(--text-secondary);}
/* ---- FAQ ---- */
.m-faq-quick{max-width:var(--page-max);margin:0 auto;padding:48px 40px 56px;}
.m-faq-quick__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.m-faq-quick .m-tile__icon{height:110px;}
.m-faq-quick .m-tile__icon i{width:44px;height:44px;}
.m-faq-quick .m-tile__label{font:var(--text-body-sm);font-weight:600;color:var(--brand-cta);padding:12px 14px;}
.m-faqgroup{max-width:var(--page-max);margin:0 auto;padding:48px 40px 56px;border-top:1px solid var(--border-default);scroll-margin-top:84px;}
.m-faqgroup h2{font:var(--text-h2);color:var(--text-heading);margin-bottom:24px;}
.m-faqgroup__row{display:flex;gap:48px;align-items:flex-start;}
.m-acc{flex:1;display:flex;flex-direction:column;gap:10px;}
.m-acc__item{
border-radius:var(--radius-md);background:#F4F5F6;padding:0 20px;
transition:background .35s var(--ease-standard), box-shadow .35s var(--ease-standard);
}
.m-acc__item[open]{background:linear-gradient(135deg,#E4F1FB 0%,#FAFCFE 85%);box-shadow:var(--shadow-card);}
.m-acc__item summary{
display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;cursor:pointer;
list-style:none;font:var(--text-body-lg);font-weight:600;color:var(--text-heading);
}
.m-acc__item summary::-webkit-details-marker{display:none;}
.m-acc__item summary::after{
content:"";flex-shrink:0;width:10px;height:10px;border-right:2px solid var(--brand-cta);
border-bottom:2px solid var(--brand-cta);transform:rotate(45deg);
transition:transform var(--duration-default) var(--ease-standard);
}
.m-acc__item[open] summary::after{transform:rotate(-135deg);}
.m-acc__item p{margin:0 0 20px;font:var(--text-body-md);color:var(--text-body);max-width:640px;}
.m-faq-side{
flex:0 0 260px;display:block;background:var(--cloud);border-radius:var(--radius-lg);padding:26px;
text-decoration:none;transition:transform var(--duration-default) var(--ease-standard);
}
.m-faq-side:hover{transform:translateY(-3px);}
.m-faq-side__icon{
width:44px;height:44px;border-radius:50%;background:var(--blue-100);color:var(--brand-cta);
display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.m-faq-side__title{font:var(--text-h4);color:var(--text-heading);margin-bottom:8px;}
.m-faq-side__body{font:var(--text-body-sm);color:var(--text-secondary);}
/* ---- Footer ---- */
.m-footer{background:var(--cloud);padding:52px 40px 32px;}
.m-footer__inner{max-width:var(--page-max);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:48px;}
.m-footer h3{font:var(--text-h4);color:var(--text-heading);margin-bottom:16px;}
.m-contact{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0;}
.m-contact li{display:flex;align-items:center;gap:10px;font:var(--text-body-sm);color:var(--text-body);}
.m-contact a{color:var(--text-body);text-decoration:none;}
.m-contact a:hover{color:var(--brand-cta);}
.m-pricing{min-width:320px;}
.m-pricing__form{display:flex;gap:10px;align-items:flex-end;}
.m-pricing__form .m-field{flex:1;}
.m-footer__bar{
max-width:var(--page-max);margin:32px auto 0;padding-top:20px;border-top:1px solid var(--border-default);
display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font:var(--text-caption);color:var(--text-secondary);
}
.m-footer__bar a{color:var(--brand-cta);text-decoration:none;}
/* ---- Flow pages (moreinformation / thank-you) ---- */
.m-success__title{display:flex;align-items:center;gap:12px;font:var(--text-h2);color:var(--text-heading);margin-bottom:16px;}
.m-success__title svg{color:#3FA168;flex-shrink:0;width:28px;height:28px;}
.m-flow-img{max-width:100%;border-radius:var(--radius-lg);display:block;margin:0 auto;}
/* Hatchbuck jotform (moreinformation_video.php) restyled to match */
#hb-form label{display:block;font:var(--text-body-sm);font-weight:600;color:var(--text-heading);margin:0 0 6px;}
#hb-form input{
display:block;width:100%;max-width:440px;height:44px;border:1px solid var(--border-default);
border-radius:var(--radius-md);padding:0 14px;margin:0 0 16px;font:var(--text-body-md);
color:var(--text-body);background:var(--white);
transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
#hb-form input:focus{outline:none;border-color:var(--brand-cta);box-shadow:0 0 0 3px rgba(22,159,230,.18);}
.form-submit-button{
display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 22px;
border:0!important;border-radius:var(--radius-md);background:var(--brand-cta)!important;
color:var(--white)!important;font:600 15px/1 var(--font-body);cursor:pointer;
box-shadow:none!important;text-shadow:none!important;
transition:background var(--duration-default) var(--ease-standard);
}
.form-submit-button:hover{background:#1289c7!important;}
/* ---- Responsive ---- */
@media (max-width:900px){
.m-navtoggle{display:inline-flex;}
.m-header{position:relative;}
.m-nav{
display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
background:var(--white);border-bottom:1px solid var(--border-default);padding:8px 40px 16px;
}
.m-nav.open{display:flex;}
.m-nav a{padding:12px 0;border-bottom:1px solid var(--border-default);}
.m-nav a.current{border-bottom-color:var(--border-default);}
.m-hero__inner{flex-direction:column;text-align:center;align-items:center;}
.m-hero__copy{max-width:560px;}
.m-hero__lead{max-width:none;}
.m-hero h1{font-size:40px;}
.m-who__grid,.m-faq-quick__grid,.m-noticegrid{grid-template-columns:repeat(2,1fr);}
.m-demogrid{grid-template-columns:repeat(2,1fr);}
.m-split,.m-videopage,.m-article,.m-article--reverse,.m-faqgroup__row{flex-direction:column;}
/* Stacked columns fill the width (else align-items:flex-start shrinks them). */
.m-split,.m-videopage{align-items:stretch;}
.m-article__media{flex-basis:auto;width:100%;height:220px;}
.m-faq-side{flex-basis:auto;width:100%;}
.m-pagehead h1{font-size:34px;}
}
@media (max-width:560px){
.m-header{padding:16px 20px;}
.m-hero{padding:56px 20px 64px;}
.m-hero h1{font-size:32px;}
.m-pagehead{padding:48px 20px 40px;}
.m-section,.m-split,.m-notice,.m-demogrid,.m-videopage,.m-map,.m-article,.m-noticegrid-sec,.m-faq-quick,.m-faqgroup{padding-left:20px;padding-right:20px;}
.m-features,.m-who,.m-footer{padding-left:20px;padding-right:20px;}
.m-features__inner{gap:32px;}
.m-feature{max-width:none;}
.m-video{width:100%;}
.m-who__grid,.m-faq-quick__grid,.m-noticegrid,.m-demogrid{grid-template-columns:1fr;}
.m-pricing{min-width:0;width:100%;}
}
/* More-information page: custom page-head padding (desktop + mobile). Placed last
so it overrides both the base .m-pagehead and the responsive override above. */
@media (min-width:561px){ .m-pagehead--moreinfo{padding:72px 40px 30px;} }
@media (max-width:560px){ .m-pagehead--moreinfo{padding:48px 20px 10px;} }
/* Utility: hide an element on mobile (phones). !important so it wins over
higher-specificity display rules (e.g. .m-hero .m-eyebrow). */
@media (max-width:560px){ .m-hide-mobile{display:none !important;} }
/* features.html mobile spacing: breathing room above the intro heading,
and less dead space above the "Make an appointment" notice. */
@media (max-width:560px){
.m-split--intro-mobile{padding-top:32px;}
.m-notice--tight-mobile{padding-top:0;}
}