/*
Theme Name: Seal Tech (Propretty)
Theme URI: https://sealtech.ca/
Author: Propretty
Author URI: https://propretty.ca/
Description: Clean, fast, SEO-focused custom theme for Seal Tech Inc. Built to work with the Page Editor plugin — uploaded HTML pages render full-width with the header/footer applied automatically, and Yoast owns all meta tags. Includes readable page and blog-post templates.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.6
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: sealtech
*/

/* ============================================================
   Tokens  —  change your brand colour in ONE place: --st-blue
   ============================================================ */
:root{
	--st-ink:#12202e; --st-blue:#14607b; --st-blue-dk:#0f4d63;
	--st-amber:#e8a33d; --st-amber-dk:#c9861f;
	--st-paper:#fff; --st-mist:#f4f6f7; --st-line:#e4e9ec;
	--st-muted:#5c6b74; --st-text:#1d2b36; --st-wrap:1180px;
	--st-font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
	--st-read:760px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--st-paper);color:var(--st-text);font:400 16px/1.65 var(--st-font)}
img{max-width:100%;height:auto}
a{color:var(--st-blue)}
.st-container{max-width:var(--st-wrap);margin:0 auto;padding-left:22px;padding-right:22px}

.st-skip{position:absolute;left:-999px;top:0;background:var(--st-ink);color:#fff;padding:10px 16px;z-index:1000;border-radius:0 0 6px 0}
.st-skip:focus{left:0}

/* ---- utility bar ---- */
.st-util{background:var(--st-ink);color:#c9d3da;font:500 13px/1 var(--st-font)}
.st-util__in{max-width:var(--st-wrap);margin:0 auto;padding:9px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.st-util a{color:#c9d3da;text-decoration:none}
.st-util a:hover{color:#fff}
.st-util__r{display:flex;align-items:center;gap:18px}
.st-util__hours{color:#8fa0ab}
.st-social{display:inline-flex;gap:12px}
.st-social a{display:inline-flex}
.st-social svg{width:16px;height:16px;fill:currentColor;opacity:.8}
.st-social a:hover svg{opacity:1;fill:var(--st-amber)}

/* ---- main header ---- */
.st-header{position:sticky;top:0;z-index:900;background:var(--st-paper);border-bottom:1px solid var(--st-line);transition:box-shadow .2s}
.st-header.is-stuck{box-shadow:0 6px 22px rgba(18,32,46,.10)}
.st-header__in{max-width:var(--st-wrap);margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:24px;transition:padding .2s}
.st-header.is-stuck .st-header__in{padding-top:11px;padding-bottom:11px}
.st-brand{display:flex;align-items:center;flex:0 0 auto}
.st-brand img,.st-brand .custom-logo{max-height:52px;width:auto;display:block;transition:max-height .2s}
.st-header.is-stuck .st-brand img{max-height:44px}
.st-brand__text{font:800 22px/1 var(--st-font);letter-spacing:-.02em;color:var(--st-ink);text-decoration:none}
.st-brand__text b{color:var(--st-blue)}
.st-nav{margin-left:auto}
.st-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.st-nav a{display:block;padding:10px 14px;font:600 15px/1 var(--st-font);color:var(--st-text);text-decoration:none;border-radius:7px}
.st-nav a:hover,.st-nav .current-menu-item>a{color:var(--st-blue);background:var(--st-mist)}
.st-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.st-phone{display:inline-flex;align-items:center;gap:8px;font:800 17px/1 var(--st-font);color:var(--st-ink);text-decoration:none;white-space:nowrap}
.st-phone svg{width:18px;height:18px;fill:var(--st-blue)}
.st-phone:hover{color:var(--st-blue)}
.st-cta{display:inline-flex;align-items:center;gap:8px;background:var(--st-amber);color:#3a2606;font:700 15px/1 var(--st-font);text-decoration:none;padding:13px 20px;border-radius:8px;box-shadow:0 2px 0 var(--st-amber-dk);white-space:nowrap;border:0;cursor:pointer}
.st-cta:hover{background:var(--st-amber-dk);color:#fff}
.st-burger,.st-callbtn{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:8px}
.st-burger svg,.st-callbtn svg{width:26px;height:26px;fill:var(--st-ink)}
.st-burger:hover,.st-callbtn:hover{background:var(--st-mist)}

/* ---- mobile slide-in ---- */
.st-mnav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--st-paper);box-shadow:-14px 0 40px rgba(18,32,46,.22);transform:translateX(100%);transition:transform .28s ease;z-index:950;display:flex;flex-direction:column;padding:20px}
.st-mnav.is-open{transform:translateX(0)}
.st-mnav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.st-mnav__close{background:none;border:0;font-size:30px;line-height:1;color:var(--st-muted);cursor:pointer;padding:4px 10px}
.st-mnav ul{list-style:none;margin:0;padding:0}
.st-mnav a{display:block;padding:14px 6px;font:600 17px/1 var(--st-font);color:var(--st-text);text-decoration:none;border-bottom:1px solid var(--st-line)}
.st-mnav a:hover{color:var(--st-blue)}
.st-mnav .st-cta{margin-top:18px;justify-content:center}
.st-scrim{position:fixed;inset:0;background:rgba(18,32,46,.45);opacity:0;visibility:hidden;transition:.28s;z-index:940}
.st-scrim.is-open{opacity:1;visibility:visible}

/* ---- content areas ---- */
.st-main{min-height:46vh}
.st-managed{}                                   /* uploaded HTML pages: full width, no wrapper */
.st-page{padding:44px 22px 64px}
.st-page__title{font:800 clamp(28px,4vw,40px)/1.15 var(--st-font);letter-spacing:-.02em;color:var(--st-ink);margin:0 0 24px}
.st-crumbs{font-size:13px;color:var(--st-muted);margin-bottom:14px}
.st-crumbs a{color:var(--st-blue);text-decoration:none}

/* blog post */
.st-single{padding:44px 22px 64px}
.st-single__inner{max-width:var(--st-read);margin:0 auto}
.st-single__title{font:800 clamp(26px,4vw,38px)/1.2 var(--st-font);letter-spacing:-.02em;color:var(--st-ink);margin:0 0 12px}
.st-meta{font-size:14px;color:var(--st-muted);margin-bottom:22px}
.st-feat{margin:0 0 28px;border-radius:12px;overflow:hidden}

/* readable prose for pages + posts */
.st-prose{font-size:17px;line-height:1.75;color:#25333d}
.st-prose > *{max-width:var(--st-read)}
.st-managed .st-prose > *{max-width:none}
.st-prose h2{font:700 1.55em/1.25 var(--st-font);color:var(--st-ink);margin:2em 0 .55em;letter-spacing:-.01em}
.st-prose h3{font:700 1.25em/1.3 var(--st-font);color:var(--st-ink);margin:1.6em 0 .5em}
.st-prose p{margin:0 0 1.15em}
.st-prose a{color:var(--st-blue);text-decoration:underline;text-underline-offset:2px}
.st-prose ul,.st-prose ol{margin:0 0 1.2em;padding-left:1.4em}
.st-prose li{margin-bottom:.4em}
.st-prose img{border-radius:10px}
.st-prose blockquote{margin:1.5em 0;padding:.4em 1.2em;border-left:4px solid var(--st-amber);color:#3a4a54;font-style:italic}
.st-prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95em}
.st-prose th,.st-prose td{border:1px solid var(--st-line);padding:10px 12px;text-align:left}
.st-prose th{background:var(--st-mist)}
.st-prose iframe{max-width:100%;border-radius:10px}

/* blog listing */
.st-list{padding:44px 22px 64px}
.st-list__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.st-card{background:var(--st-paper);border:1px solid var(--st-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.st-card:hover{box-shadow:0 12px 30px rgba(18,32,46,.10);transform:translateY(-2px)}
.st-card__thumb{aspect-ratio:16/10;background:var(--st-mist);overflow:hidden}
.st-card__thumb img{width:100%;height:100%;object-fit:cover}
.st-card__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.st-card__title{font:700 18px/1.3 var(--st-font);margin:0}
.st-card__title a{color:var(--st-ink);text-decoration:none}
.st-card__title a:hover{color:var(--st-blue)}
.st-card__meta{font-size:13px;color:var(--st-muted)}
.st-card__ex{font-size:14.5px;color:#48565f;margin:0}
.st-more{margin-top:auto;font:600 14px/1 var(--st-font);color:var(--st-blue);text-decoration:none;padding-top:6px}
.st-pagination{margin:44px auto 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.st-pagination .page-numbers{display:inline-block;padding:9px 14px;border:1px solid var(--st-line);border-radius:8px;color:var(--st-text);text-decoration:none;font-size:14px}
.st-pagination .current{background:var(--st-blue);color:#fff;border-color:var(--st-blue)}

/* 404 */
.st-404{padding:80px 22px;text-align:center}
.st-404 h1{font:800 64px/1 var(--st-font);color:var(--st-blue);margin:0 0 10px}

/* ---- conversion band + footer ---- */
.st-cta-band{background:var(--st-blue);color:#eaf3f6}
.st-cta-band__in{max-width:var(--st-wrap);margin:0 auto;padding:26px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.st-cta-band h2{margin:0;font:800 24px/1.15 var(--st-font);letter-spacing:-.01em;color:#fff}
.st-cta-band p{margin:6px 0 0;color:#bcd6df;font:400 15px/1.4 var(--st-font)}
.st-cta-band__act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.st-cta-band .st-phone{color:#fff}
.st-cta-band .st-phone svg{fill:var(--st-amber)}

.st-foot{background:var(--st-ink);color:#a9b7c1;font:400 14.5px/1.6 var(--st-font)}
.st-foot__grid{max-width:var(--st-wrap);margin:0 auto;padding:52px 22px 34px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.st-foot h3{font:700 12px/1 var(--st-font);letter-spacing:.09em;text-transform:uppercase;color:#6f828f;margin:0 0 16px}
.st-foot a{color:#a9b7c1;text-decoration:none}
.st-foot a:hover{color:var(--st-amber)}
.st-foot ul{list-style:none;margin:0;padding:0}
.st-foot li{margin-bottom:9px}
.st-foot__brand strong{display:block;font:800 20px/1 var(--st-font);color:#fff;letter-spacing:-.02em;margin-bottom:12px}
.st-foot__brand b{color:var(--st-blue)}
.st-foot__nap{margin:14px 0 0;font-style:normal}
.st-foot__nap div{margin-bottom:6px}
.st-foot__nap a{color:#fff;font-weight:600}
.st-foot .st-social{margin-top:16px;display:flex;gap:14px}
.st-foot .st-social svg{width:20px;height:20px;fill:#a9b7c1}
.st-foot .st-social a:hover svg{fill:var(--st-amber)}
.st-hours{margin:0}
.st-hours div{display:flex;justify-content:space-between;max-width:210px;margin-bottom:6px}
.st-hours span:last-child{color:#7f9099}
.st-foot .st-cta{margin-top:18px}
.st-foot__bar{border-top:1px solid #223342}
.st-foot__bar-in{max-width:var(--st-wrap);margin:0 auto;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:#7f9099}
.st-foot__bar a{color:#9fb0ba;text-decoration:none}
.st-foot__bar a:hover{color:var(--st-amber)}
.st-foot__links{display:flex;gap:18px;flex-wrap:wrap}

/* ---- responsive ---- */
@media (max-width:980px){
	.st-list__grid{grid-template-columns:repeat(2,1fr)}
	.st-foot__grid{grid-template-columns:1fr 1fr;gap:32px}
	.st-cta-band__in{justify-content:center;text-align:center}
}
@media (max-width:900px){
	.st-nav,.st-header .st-phone,.st-header .st-cta{display:none}
	.st-burger,.st-callbtn{display:inline-flex}
	.st-header__in{gap:8px;justify-content:space-between}
	.st-brand{margin-right:auto}
}
@media (max-width:600px){
	.st-util__hours,.st-util__l{display:none}
	.st-util__in{justify-content:center}
	.st-brand__text{font-size:19px}
	.st-list__grid{grid-template-columns:1fr}
	.st-foot__grid{grid-template-columns:1fr}
	.st-cta-band h2{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
	*{transition:none!important;scroll-behavior:auto!important}
}

/* ---- service tiles + HomeStars (top of every blog post) ---- */
.st-tiles-wrap{padding:30px 0 6px}
.st-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st-tile{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-decoration:none;background:#26404f center/cover no-repeat;text-align:center}
.st-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,32,46,.12),rgba(18,32,46,.58))}
.st-tile__title,.st-tile__btn{position:relative;z-index:1}
.st-tile__title{font:800 20px/1.15 var(--st-font);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.st-tile__btn{background:#5bb531;color:#fff;font:700 13px/1 var(--st-font);padding:11px 20px;border-radius:22px;box-shadow:0 2px 0 #499227}
.st-tile:hover .st-tile__btn{background:#499227}
.st-homestars{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center;padding:26px 0 8px}
.st-homestars__badges{display:flex;gap:14px}
.st-homestars__badges img{height:104px;width:auto;border-radius:8px}
.st-homestars__text{font:700 22px/1.3 var(--st-font);color:var(--st-blue);margin:0;max-width:520px}
@media (max-width:900px){.st-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.st-tiles{grid-template-columns:1fr}.st-homestars__badges img{height:78px}.st-homestars__text{font-size:18px}}

/* ============ header refresh (v1.0.3) — match original brand look ============ */
:root{--st-navy:#003d76;--st-green:#6abf16;--st-green-dk:#4f9e12;
	/* --f: global font stack for Page Editor page content. Page CSS references
	   var(--f) inside `font:` shorthands; defining it here (rather than only on each
	   page wrapper) keeps those shorthands valid everywhere, including in hero blocks
	   that sit outside the wrapper. Without it the whole shorthand is discarded and
	   headings collapse to inherited body size. */
	--f:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
.st-util{background:var(--st-navy);color:#fff;font:600 15px/1 var(--st-font)}
.st-util__in{justify-content:flex-end;padding:12px 22px}
.st-util a{color:#fff}
.st-util a:hover{color:#dfeaf7}
.st-util__phone{display:inline-flex;align-items:center;gap:9px}
.st-util__phone svg{width:16px;height:16px;fill:#fff}
.st-brand__link{display:inline-flex}
.st-nav ul{display:block}
.st-nav>ul{display:flex;gap:4px;align-items:center}
.st-nav li{position:relative}
.st-nav>ul>li>a{padding:14px 15px;font:700 16px/1 var(--st-font);color:#1a2b3a;background:none;border-radius:0}
.st-nav>ul>li>a:hover,.st-nav>ul>li.current-menu-item>a,.st-nav>ul>li.current-menu-ancestor>a,.st-nav>ul>li:hover>a{color:var(--st-green);background:none}
.st-nav .menu-item-has-children>a::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:currentColor;position:relative;top:-1px;vertical-align:middle}
.st-nav .sub-menu{position:absolute;top:100%;left:0;min-width:242px;background:#fff;border-top:3px solid var(--st-green);box-shadow:0 14px 34px rgba(18,32,46,.16);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(7px);transition:.16s ease;z-index:30}
.st-nav li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.st-nav .sub-menu a{display:block;padding:11px 20px;font:600 15px/1.35 var(--st-font);color:#26333d}
.st-nav .sub-menu a:hover{background:#f2f7ec;color:var(--st-green-dk)}
.st-nav .sub-menu .sub-menu{top:-6px;left:100%;border-top:0;border-left:3px solid var(--st-green)}
.st-nav .sub-menu .menu-item-has-children>a::after{transform:rotate(-90deg);float:right;top:5px}
.st-mnav .sub-menu{padding-left:14px}
.st-mnav .sub-menu a{font-size:15px;padding:11px 6px;color:var(--st-muted)}
@media (max-width:900px){
	.st-nav{display:none}
	.st-burger{display:inline-flex}
	.st-header__in{gap:8px;justify-content:space-between}
	.st-brand{margin-right:auto}
}
@media (max-width:600px){.st-util__in{justify-content:center}.st-util{font-size:13px}}

/* ============ mega menu (v1.0.4) — Services ============ */
.st-has-mega{position:relative}
.st-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:min(880px,88vw);
	background:#fff;border-top:3px solid var(--st-green);border-radius:0 0 12px 12px;box-shadow:0 22px 50px rgba(18,32,46,.20);
	padding:26px 30px 20px;opacity:0;visibility:hidden;transition:.16s ease;z-index:40}
.st-has-mega:hover .st-mega,.st-has-mega:focus-within .st-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.st-mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.st-mega__col h3{font:700 12px/1.3 var(--st-font);letter-spacing:.05em;text-transform:uppercase;color:var(--st-green-dk);margin:0 0 12px}
.st-mega__col ul{list-style:none;margin:0;padding:0}
.st-mega__col li{margin-bottom:2px}
.st-mega__col a{display:block;padding:7px 0;font:600 14.5px/1.3 var(--st-font);color:var(--st-text);text-decoration:none;border-bottom:1px solid transparent}
.st-mega__col a:hover{color:var(--st-green-dk)}
.st-mega__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--st-line);flex-wrap:wrap}
.st-mega__bottom>a:first-child{font:700 14px/1 var(--st-font);color:var(--st-navy);text-decoration:none}
.st-mega__bottom>a:first-child:hover{color:var(--st-green-dk)}
.st-mega .st-cta{padding:10px 20px;font-size:14px}

/* mobile accordion for Services */
.st-mnav__acc{border-bottom:1px solid var(--st-line)}
.st-mnav__acc summary{padding:14px 6px;font:600 17px/1 var(--st-font);color:var(--st-text);cursor:pointer;list-style:none}
.st-mnav__acc summary::-webkit-details-marker{display:none}
.st-mnav__acc summary::after{content:" \25BE";float:right;color:var(--st-muted)}
.st-mnav__acc[open] summary::after{content:" \25B4"}
.st-mnav__acc a{display:block;padding:9px 6px 9px 16px;font:500 14.5px/1.3 var(--st-font);color:var(--st-text);text-decoration:none;border:0}
.st-mnav__acc a:hover{color:var(--st-green-dk)}
.st-mnav__group{margin:12px 0 2px 6px;font:700 11px/1 var(--st-font);letter-spacing:.05em;text-transform:uppercase;color:var(--st-muted)}
.st-mnav__viewall{margin-top:8px!important;font-weight:700!important;color:var(--st-green-dk)!important}

@media(max-width:1100px){
	.st-mega__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
	.st-mega{display:none} /* mobile uses the accordion instead */
}

/* ============================================================
   HERO HEADING SIZE — ONE PLACE TO TUNE, APPLIES TO EVERY PAGE
   ============================================================
   This overrides the per-page hero <h1> sizes, so you never have to
   re-upload page files just to change heading size. Edit here only.

   clamp(MIN, FLUID, MAX):
     MIN  (28px) = the floor  -> this is your MOBILE size
     FLUID(4.5vw)= 4.5% of window width, used in the middle range
     MAX  (48px) = the ceiling -> this is your DESKTOP size

   With these numbers: under ~622px wide it sits at a flat 28px,
   over ~1067px wide it sits at a flat 48px, and it scales between.
   Want mobile smaller? Lower the 28px. Desktop smaller? Lower the 48px.

   Uses longhand (not the `font:` shorthand) on purpose, so it changes
   only size/weight/line-height and leaves each page's font family alone.

   The last selector is the HOME page slider heading. Delete it from this
   list if you'd rather the home hero stay larger than the other pages.
   ============================================================ */
body [class*="-hero"] h1,
body .st-slider__cap h1{
	font-size:clamp(28px,4.5vw,48px);
	font-weight:700;
	line-height:1.15;
}

/* ============================================================
   "ASK A QUESTION" FORM  (markup can be pasted into any page;
   all styling lives here so the page HTML stays tiny)
   ============================================================ */
.st-ask{background:#12202e;padding:26px 22px}
.st-ask__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.st-ask__lead h2{margin:0 0 6px;font:800 22px/1.2 var(--f,var(--st-font));color:#fff;letter-spacing:-.01em}
.st-ask__lead p{margin:0;font:500 14px/1.5 var(--f,var(--st-font));color:#a9b7c1}
.st-ask__form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st-ask__form input,.st-ask__form textarea{width:100%;border:1px solid #2b3d4d;background:#1b2c3b;color:#fff;border-radius:7px;padding:12px 14px;font:500 15px/1.3 var(--f,var(--st-font))}
.st-ask__form input::placeholder,.st-ask__form textarea::placeholder{color:#7e8f9c}
.st-ask__form input:focus,.st-ask__form textarea:focus{outline:2px solid var(--st-green,#6abf16);outline-offset:1px;background:#22364a}
.st-ask__form textarea{grid-column:1/-1;resize:vertical;min-height:64px}
.st-ask__row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.st-ask__note{font:500 12.5px/1.4 var(--f,var(--st-font));color:#7e8f9c;margin:0}
.st-ask__btn{background:var(--st-green,#6abf16);color:#fff;border:0;cursor:pointer;font:700 15px/1 var(--f,var(--st-font));padding:13px 30px;border-radius:8px;box-shadow:0 2px 0 var(--st-green-dk,#4f9e12)}
.st-ask__btn:hover{background:var(--st-green-dk,#4f9e12)}
/* honeypot — hidden from people, visible to bots. Not display:none (some bots skip that). */
.st-ask__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.st-ask__msg{grid-column:1/-1;margin:0;padding:12px 16px;border-radius:8px;font:600 14.5px/1.45 var(--f,var(--st-font));display:none}
.st-ask__msg.is-on{display:block}
.st-ask__msg--ok{background:#1f3d21;color:#c9f0c0;border:1px solid #2f6b33}
.st-ask__msg--err{background:#3d1f1f;color:#f0c9c9;border:1px solid #6b2f2f}
@media(max-width:900px){
	.st-ask__in{grid-template-columns:1fr;gap:16px}
	.st-ask__form{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
	.st-ask__form{grid-template-columns:1fr}
	.st-ask__btn{width:100%}
}