/*
Theme Name: Modern Toronto Locksmith
Theme URI: https://placeofpeaceservices.ca
Author: Call Out Digital
Author URI: https://calloutdigital.com
Description: Custom conversion theme for Modern Toronto Locksmith. Built for Gutenberg HTML-block pages (one block per page) and Contact Form 7. Navy / gold / orange design system, gradient-ready, fully responsive across desktop, iOS and Android, with a hardened mobile nav.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modern-toronto-locksmith
*/

/* =================================================================
   PLACE OF PEACE SERVICES — DESIGN SYSTEM
   Build pages as a single Custom HTML block using the .mtl-* classes
   documented throughout this file. Everything is mobile-first and
   safe for iOS Safari + Android Chrome.
   ================================================================= */

:root{
  /* brand */
  --mtl-ink:#0B2447;          /* deep forest green (dark sections) */
  --mtl-ink-2:#123163;
  --mtl-ink-3:#1C4585;
  --mtl-gold:#F5A623;         /* warm gold accent */
  --mtl-gold-2:#FFC65A;
  --mtl-gold-deep:#C2410C;    /* gold dark enough for text on cream */
  --mtl-sage:#5EA1F0;
  --mtl-cream:#EAF1FA;        /* warm light section */
  --mtl-paper:#F6F9FD;        /* lightest */
  --mtl-white:#FFFFFF;
  /* text */
  --mtl-ink-tx:#0F2440;       /* on light */
  --mtl-muted:#46566F;        /* muted on light */
  --mtl-line:#E0E8F2;         /* light border */
  --mtl-cream-tx:#EAF1FA;     /* on dark */
  --mtl-muted-d:#A7BAD6;      /* muted on dark */
  --mtl-line-d:rgba(255,255,255,.12);
  /* cta */
  --mtl-cta:#F2610F; --mtl-cta-2:#FB8C2A; --mtl-cta-tx:#FFFFFF;
  /* type */
  --mtl-display:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mtl-body:'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* tokens */
  --mtl-radius:16px; --mtl-radius-sm:12px;
  --mtl-shadow:0 2px 8px rgba(16,48,39,.06), 0 18px 44px rgba(16,48,39,.09);
  --mtl-shadow-cta:0 10px 26px rgba(242,97,15,.4);
  --mtl-container:1200px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; font-family:var(--mtl-body); color:var(--mtl-ink-tx); background:var(--mtl-paper); line-height:1.65; -webkit-font-smoothing:antialiased; font-size:17px}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--mtl-ink-3); text-decoration:none}
h1,h2,h3,h4{font-family:var(--mtl-display); line-height:1.1; letter-spacing:-.015em; color:var(--mtl-ink-tx); font-weight:600; margin:0 0 .4em}
p{margin:0 0 1em}
*{-webkit-tap-highlight-color:transparent}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:2px solid var(--mtl-gold); outline-offset:2px; border-radius:6px}

/* ---------- WP alignment + content bleed ---------- */
.mtl-entry{width:100%}
.mtl-entry > *{max-width:100%}
.alignfull{width:100%}
.alignwide{max-width:1320px; margin-left:auto; margin-right:auto}
.mtl-prose{max-width:760px; margin:0 auto; padding:64px 24px}
.mtl-prose img{border-radius:var(--mtl-radius); margin:1.5em 0}

/* =================================================================
   LAYOUT HELPERS  (use these inside your HTML blocks)
   ================================================================= */
.mtl-container{width:100%; max-width:var(--mtl-container); margin:0 auto; padding:0 24px}
.mtl-section{padding:96px 0}
.mtl-section--sm{padding:64px 0}
.mtl-section--cream{background:var(--mtl-cream)}
.mtl-section--white{background:var(--mtl-white)}
.mtl-section--dark{background:var(--mtl-ink); color:var(--mtl-cream-tx)}
.mtl-section--dark h1,.mtl-section--dark h2,.mtl-section--dark h3,.mtl-section--dark h4{color:#fff}
/* gradient backgrounds (the "gradient images" look, done in CSS so they stay crisp) */
.mtl-bg-green{background:radial-gradient(120% 130% at 85% 0%, var(--mtl-ink-3) 0%, var(--mtl-ink-2) 42%, var(--mtl-ink) 100%); color:var(--mtl-cream-tx)}
.mtl-bg-green h1,.mtl-bg-green h2,.mtl-bg-green h3{color:#fff}
.mtl-bg-gold{background:linear-gradient(120% 120% at 80% 0%, var(--mtl-gold-2), var(--mtl-gold)); color:var(--mtl-ink-tx)}
.mtl-bg-cream-gradient{background:linear-gradient(180deg,var(--mtl-paper),var(--mtl-cream))}
/* put a gradient image behind content and keep text readable */
.mtl-media{position:relative; overflow:hidden}
.mtl-media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.mtl-media > .mtl-media__veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,48,39,.55), rgba(16,48,39,.86))}
.mtl-media > .mtl-inner{position:relative; z-index:2}

/* grids */
.mtl-grid{display:grid; gap:24px}
.mtl-grid-2{grid-template-columns:repeat(2,1fr)}
.mtl-grid-3{grid-template-columns:repeat(3,1fr)}
.mtl-grid-4{grid-template-columns:repeat(4,1fr)}
.mtl-split{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.mtl-center{text-align:center}
.mtl-mx{margin-left:auto; margin-right:auto}

/* =================================================================
   TYPOGRAPHY HELPERS
   ================================================================= */
.mtl-eyebrow{font-family:var(--mtl-body); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--mtl-gold-deep); margin-bottom:14px; display:block}
.mtl-section--dark .mtl-eyebrow,.mtl-bg-green .mtl-eyebrow{color:var(--mtl-gold-2)}
.mtl-h1{font-size:clamp(38px,6vw,68px); font-weight:600; line-height:1.04; letter-spacing:-.02em; margin:0 0 18px}
.mtl-h2{font-size:clamp(30px,4.4vw,46px); font-weight:600; margin:0 0 16px}
.mtl-h3{font-size:clamp(20px,2.4vw,26px); font-weight:600; margin:0 0 10px}
.mtl-lead{font-size:clamp(17px,2.2vw,20px); color:var(--mtl-muted); max-width:640px}
.mtl-section--dark .mtl-lead,.mtl-bg-green .mtl-lead{color:var(--mtl-muted-d)}
.mtl-gold-text{color:var(--mtl-gold)}
.mtl-headline-accent{background:linear-gradient(92deg,var(--mtl-gold-2),var(--mtl-gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.mtl-sec-head{max-width:680px; margin:0 auto 48px}
.mtl-sec-head.mtl-center{text-align:center}
.mtl-sec-head .mtl-h2::after{content:""; display:block; width:54px; height:4px; border-radius:3px; background:linear-gradient(90deg,var(--mtl-gold-2),var(--mtl-gold)); margin:18px 0 0}
.mtl-sec-head.mtl-center .mtl-h2::after{margin-left:auto; margin-right:auto}

/* =================================================================
   BUTTONS
   ================================================================= */
.mtl-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--mtl-body);
  font-weight:700; font-size:16px; line-height:1; padding:16px 28px; border-radius:12px; border:2px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s; min-height:52px}
.mtl-btn:hover{transform:translateY(-2px)}
.mtl-btn--primary{background:linear-gradient(120deg,var(--mtl-cta-2),var(--mtl-cta)); color:var(--mtl-cta-tx); box-shadow:var(--mtl-shadow-cta)}
.mtl-btn--primary:hover{box-shadow:0 14px 32px rgba(242,97,15,.5)}
.mtl-btn--dark{background:var(--mtl-ink); color:#fff}
.mtl-btn--dark:hover{background:var(--mtl-ink-2)}
.mtl-btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.mtl-btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.mtl-btn--outline{background:transparent; color:var(--mtl-ink-3); border-color:var(--mtl-line)}
.mtl-btn--outline:hover{border-color:var(--mtl-gold); color:var(--mtl-gold-deep)}
.mtl-btn-row{display:flex; flex-wrap:wrap; gap:14px}

/* =================================================================
   COMPONENTS: cards / stats / steps / compare / faq / chips
   ================================================================= */
.mtl-card{background:var(--mtl-white); border:1px solid var(--mtl-line); border-radius:var(--mtl-radius); padding:30px; box-shadow:var(--mtl-shadow); transition:transform .2s ease, box-shadow .2s ease}
.mtl-card:hover{transform:translateY(-5px); box-shadow:0 22px 54px rgba(16,48,39,.14)}
.mtl-card__ico{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,var(--mtl-gold-2),var(--mtl-gold)); color:var(--mtl-ink); font-size:24px}
.mtl-card h3{margin-bottom:10px}
.mtl-card p{color:var(--mtl-muted); margin-bottom:0}
.mtl-card__link{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; color:var(--mtl-gold-deep)}

.mtl-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.mtl-stat b{display:block; font-family:var(--mtl-display); font-weight:600; font-size:clamp(34px,5vw,52px); line-height:1; color:var(--mtl-gold)}
.mtl-stat span{display:block; margin-top:8px; font-size:14px; color:var(--mtl-muted)}
.mtl-section--dark .mtl-stat span,.mtl-bg-green .mtl-stat span{color:var(--mtl-muted-d)}

.mtl-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.mtl-step__n{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:var(--mtl-display); font-weight:600;
  background:linear-gradient(135deg,var(--mtl-gold-2),var(--mtl-gold)); color:var(--mtl-ink); margin-bottom:14px}
.mtl-step h4{font-size:18px; margin-bottom:6px}
.mtl-step p{color:var(--mtl-muted); font-size:15px; margin:0}

.mtl-compare{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.mtl-compare__col{border-radius:var(--mtl-radius); padding:30px; border:1px solid var(--mtl-line); background:var(--mtl-white)}
.mtl-compare__col--win{background:var(--mtl-ink); color:var(--mtl-cream-tx); border-color:var(--mtl-ink)}
.mtl-compare__col h4{margin-bottom:18px}
.mtl-compare__col--win h4{color:#fff}
.mtl-compare__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.mtl-compare__col li{display:flex; gap:11px; align-items:flex-start; font-size:15px}
.mtl-compare__col li::before{content:"\2717"; color:#B4543E; font-weight:700; flex:none}
.mtl-compare__col--win li::before{content:"\2713"; color:var(--mtl-gold-2)}

.mtl-faq{max-width:780px; margin:0 auto}
.mtl-faq details{background:var(--mtl-white); border:1px solid var(--mtl-line); border-radius:var(--mtl-radius-sm); margin-bottom:13px; overflow:hidden}
.mtl-faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--mtl-display); font-weight:600; font-size:18px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:58px}
.mtl-faq summary::-webkit-details-marker{display:none}
.mtl-faq summary::after{content:"+"; font-family:var(--mtl-body); color:var(--mtl-gold-deep); font-size:24px; line-height:1; flex:none; transition:transform .2s}
.mtl-faq details[open] summary::after{transform:rotate(45deg)}
.mtl-faq .mtl-faq__a{padding:0 24px 22px; color:var(--mtl-muted)}

.mtl-chips{display:flex; flex-wrap:wrap; gap:10px}
.mtl-chip{font-weight:600; font-size:14px; padding:9px 16px; border-radius:999px; background:var(--mtl-white); border:1px solid var(--mtl-line)}
.mtl-section--dark .mtl-chip,.mtl-bg-green .mtl-chip{background:rgba(255,255,255,.07); border-color:var(--mtl-line-d); color:var(--mtl-cream-tx)}

/* trust marquee (top of header) */
.mtl-marquee{background:var(--mtl-ink); color:var(--mtl-cream-tx); overflow:hidden; border-bottom:1px solid var(--mtl-line-d)}
.mtl-marquee__track{display:flex; gap:0; white-space:nowrap; width:max-content; animation:mtl-marquee 32s linear infinite}
.mtl-marquee span{padding:9px 26px; font-size:13px; letter-spacing:.02em; position:relative}
.mtl-marquee span::before{content:"\2726"; color:var(--mtl-gold-2); margin-right:10px}
@keyframes mtl-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* =================================================================
   HEADER / NAV
   ================================================================= */
.mtl-topbar{background:var(--mtl-ink-2); color:var(--mtl-cream-tx); font-size:13.5px}
.mtl-topbar .mtl-container{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; padding-top:6px; padding-bottom:6px}
.mtl-topbar a{color:var(--mtl-gold-2); font-weight:600}
.mtl-topbar__r{display:flex; gap:20px; align-items:center}

.mtl-header{position:sticky; top:0; z-index:200; background:rgba(246,249,253,.9); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--mtl-line)}
.mtl-header__bar{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:78px}
.mtl-brand{display:flex; align-items:center; gap:12px; flex:none}
.mtl-brand img{max-height:52px; width:auto}
.mtl-brand__txt{font-family:var(--mtl-display); font-weight:600; font-size:21px; color:var(--mtl-ink); line-height:1.05; letter-spacing:-.01em}
.mtl-brand__txt small{display:block; font-family:var(--mtl-body); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mtl-gold-deep)}

.mtl-nav{display:flex; align-items:center; gap:4px}
.mtl-nav a{font-weight:600; font-size:15.5px; color:var(--mtl-ink-tx); padding:10px 15px; border-radius:9px; transition:background .15s,color .15s}
.mtl-nav a:hover{background:rgba(16,48,39,.06)}
.mtl-nav .current-menu-item > a,.mtl-nav .current_page_item > a{color:var(--mtl-gold-deep)}
.mtl-nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px}
.mtl-nav li{position:relative}
/* dropdowns */
.mtl-nav .sub-menu{display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:210px; background:#fff; border:1px solid var(--mtl-line);
  border-radius:12px; box-shadow:var(--mtl-shadow); padding:8px; flex-direction:column; z-index:50}
.mtl-nav li:hover > .sub-menu{display:flex}
.mtl-nav .sub-menu a{display:block}

.mtl-header__cta{display:flex; align-items:center; gap:14px; flex:none}
.mtl-header__phone{font-family:var(--mtl-display); font-weight:600; font-size:17px; color:var(--mtl-ink); white-space:nowrap}
.mtl-burger{display:none; width:48px; height:48px; align-items:center; justify-content:center; border:1px solid var(--mtl-line);
  background:#fff; border-radius:11px; cursor:pointer; flex:none}
.mtl-burger span{position:relative; width:22px; height:2px; background:var(--mtl-ink); border-radius:2px; transition:transform .2s, opacity .2s}
.mtl-burger span::before,.mtl-burger span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--mtl-ink); border-radius:2px; transition:transform .2s, top .2s}
.mtl-burger span::before{top:-7px} .mtl-burger span::after{top:7px}
body.mtl-menu-open .mtl-burger span{background:transparent}
body.mtl-menu-open .mtl-burger span::before{top:0; transform:rotate(45deg)}
body.mtl-menu-open .mtl-burger span::after{top:0; transform:rotate(-45deg)}

.mtl-nav-backdrop{position:fixed; inset:0; background:rgba(16,48,39,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .22s ease; z-index:190}
body.mtl-menu-open .mtl-nav-backdrop{opacity:1; visibility:visible}

/* =================================================================
   FOOTER
   ================================================================= */
.mtl-footer{background:var(--mtl-ink); color:var(--mtl-muted-d); padding:66px 0 28px}
.mtl-footer a{color:var(--mtl-muted-d)} .mtl-footer a:hover{color:var(--mtl-gold-2)}
.mtl-footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:42px; padding-bottom:42px; border-bottom:1px solid var(--mtl-line-d)}
.mtl-footer__brand img{max-height:54px; margin-bottom:14px}
.mtl-footer__brand .mtl-brand__txt{color:#fff}
.mtl-footer p{font-size:14.5px; max-width:300px}
.mtl-footer h5{font-family:var(--mtl-display); color:#fff; font-size:15px; margin:0 0 16px}
.mtl-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.mtl-footer ul a{font-size:14.5px}
.mtl-footer__call{font-family:var(--mtl-display); font-weight:600; font-size:22px; color:#fff; margin-bottom:8px; display:inline-block}
.mtl-footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:24px; font-size:13px}

/* sticky mobile call bar */
.mtl-callbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:180; background:linear-gradient(120deg,var(--mtl-cta-2),var(--mtl-cta));
  padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -6px 22px rgba(16,48,39,.26)}
.mtl-callbar a{display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-family:var(--mtl-display); font-weight:600; font-size:17px; min-height:28px}

/* =================================================================
   CONTACT FORM 7
   ================================================================= */
.wpcf7{max-width:620px; margin:0 auto}
.wpcf7-form{background:#fff; border:1px solid var(--mtl-line); border-radius:var(--mtl-radius); padding:30px; box-shadow:var(--mtl-shadow)}
.mtl-section--dark .wpcf7-form,.mtl-bg-green .wpcf7-form{background:rgba(255,255,255,.06); border-color:var(--mtl-line-d)}
.wpcf7-form p{margin:0 0 16px}
.wpcf7-form label{display:block; font-family:var(--mtl-display); font-weight:600; font-size:14px; margin-bottom:7px}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form input[type=url],
.wpcf7-form input[type=number],.wpcf7-form input[type=date],.wpcf7-form select,.wpcf7-form textarea{
  width:100%; font-family:var(--mtl-body); font-size:16px; padding:13px 15px; border:1.5px solid var(--mtl-line);
  border-radius:11px; background:var(--mtl-paper); color:var(--mtl-ink-tx); transition:border-color .15s, box-shadow .15s}
.wpcf7-form textarea{min-height:120px; resize:vertical}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{outline:none; border-color:var(--mtl-gold);
  box-shadow:0 0 0 4px rgba(203,162,88,.18); background:#fff}
.wpcf7-form .wpcf7-submit{width:100%; background:linear-gradient(120deg,var(--mtl-cta-2),var(--mtl-cta)); color:var(--mtl-cta-tx);
  font-family:var(--mtl-body); font-weight:700; font-size:16px; border:none; border-radius:12px; padding:16px 24px; min-height:54px;
  cursor:pointer; box-shadow:var(--mtl-shadow-cta); transition:transform .16s, box-shadow .16s}
.wpcf7-form .wpcf7-submit:hover{transform:translateY(-2px)}
.wpcf7-form .wpcf7-spinner{margin:14px auto 0; display:block}
.wpcf7 .wpcf7-response-output{border-radius:11px; margin:18px 0 0; padding:13px 16px; font-size:14.5px}

/* =================================================================
   RESPONSIVE — desktop / tablet / iOS / Android
   ================================================================= */
.mtl-brand{align-items:center; gap:11px}
.mtl-brand__img{height:46px; width:auto; flex:none}
.mtl-brand__txt{font-weight:800; font-size:19px; letter-spacing:.02em}
.mtl-brand__txt small{color:#B47A12; font-size:10px}
@media (max-width:380px){ .mtl-brand__txt{display:none} }

@media (max-width:1024px){
  .mtl-stats,.mtl-steps{grid-template-columns:repeat(2,1fr)}
  .mtl-grid-3,.mtl-grid-4{grid-template-columns:repeat(2,1fr)}
  .mtl-split,.mtl-compare{grid-template-columns:1fr; gap:34px}
  .mtl-footer__grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:860px){
  /* mobile nav becomes a fixed panel */
  .mtl-burger{display:inline-flex}
  .mtl-header__phone{display:none}
  .mtl-nav{position:fixed; top:0; right:0; height:100dvh; width:min(86vw,360px);
    flex-direction:column; align-items:stretch; gap:0; background:var(--mtl-ink); padding:88px 18px calc(24px + env(safe-area-inset-bottom));
    transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:195; overflow-y:auto; box-shadow:-18px 0 50px rgba(0,0,0,.4)}
  body.mtl-menu-open .mtl-nav{transform:translateX(0)}
  .mtl-nav ul{flex-direction:column; align-items:stretch; gap:2px; width:100%}
  .mtl-nav a{color:var(--mtl-cream-tx); font-size:18px; padding:15px 16px; border-radius:10px}
  .mtl-nav a:hover{background:rgba(255,255,255,.07)}
  .mtl-nav .sub-menu{display:flex; position:static; background:transparent; border:none; box-shadow:none; padding:0 0 0 14px}
  .mtl-nav .sub-menu a{color:var(--mtl-muted-d); font-size:16px; padding:11px 16px}
  .mtl-header__cta .mtl-btn{display:none}     /* call bar covers conversion on mobile */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mtl-callbar{display:block}
}
@media (max-width:680px){
  .mtl-section{padding:64px 0}
  .mtl-section--sm{padding:48px 0}
  .mtl-container{padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right))}
  .mtl-grid-2,.mtl-grid-3,.mtl-grid-4,.mtl-stats,.mtl-steps{grid-template-columns:1fr}
  .mtl-footer__grid{grid-template-columns:1fr}
  .mtl-btn-row .mtl-btn{width:100%}
  .mtl-header__bar{min-height:66px}
  .mtl-topbar{display:none}
}
@media (hover:none){
  .mtl-card:hover,.mtl-btn:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto!important}
  .mtl-nav{transition:none}
}