/* Theme Name: InflateM8 — Happy Adventure Palette Replacement stylesheet for the existing InflateM8 WordPress theme. */ :root {
  --navy:#03517f;
  --dark:#023753;
  --blue:#03517f;
  --orange:#fe7a01;
  --cream:#fff5e8;
  --aqua:#d9f4f1;
  --muted:#527486;
  --border:rgba(3,81,127,.15);
  --shadow:0 16px 40px rgba(3,81,127,.11);
  --max:1180px;
  --m8-navy:var(--navy);
  --m8-dark:var(--dark);
  --m8-blue:var(--blue);
  --m8-orange:var(--orange);
  --m8-cream:var(--cream);
  --m8-aqua:var(--aqua);
  --m8-muted:var(--muted);
  --m8-border:var(--border);
  --m8-shadow:var(--shadow);
--m8-max:var(--max)}

* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
  margin:0;
  background:var(--cream);
  color:#07344d;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
line-height:1.65}

img {
  max-width:100%;
height:auto}

a {
  color:var(--navy);
text-underline-offset:3px}

a:hover {
color:var(--orange)}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,245,232,.95);
  backdrop-filter:blur(14px);
border-bottom:2px solid rgba(254,122,1,.22)}

.site-header__inner {
  max-width:var(--max);
  margin:auto;
  padding:15px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
gap:24px}

.site-brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-weight:950;
letter-spacing:-.03em}

.site-brand__mark {
  width:40px;
  height:40px;
  background-image: url("/wp-content/uploads/2026/09/Puffie-40.png");
  border-radius:30%;
  background-color:var(--blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:950;
  box-shadow:0 5px 0 rgba(3,81,127,.16);
}

.site-brand__name {
  font-size:21px;
color:var(--navy)}

.site-nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
gap:24px}

.site-nav a {
  text-decoration:none;
  font-weight:850;
font-size:15px}

.site-nav a:hover {
color:var(--orange)}

.nav-toggle {
  display:none;
  border:0;
  background:var(--orange);
  color:#fff;
  border-radius:999px;
  padding:10px 16px;
font-weight:900}

.site-main {
min-height:60vh}

.entry-content>* {
  max-width:var(--max);
  margin-left:auto;
margin-right:auto}

.entry-content>.alignwide {
max-width:1280px}

.entry-content>.alignfull {
max-width:none}

.wp-block-group.is-style-m8-section {
padding:82px 24px}

.wp-block-group.is-style-m8-section>.wp-block-group__inner-container {
  max-width:var(--max);
margin:auto}

.wp-block-group.is-style-m8-hero {
  max-width:none;
  padding:92px 24px 86px;
  background:radial-gradient(circle at 88% 15%,rgba(254,122,1,.32),transparent 23%),radial-gradient(circle at 8% 90%,rgba(217,244,241,.18),transparent 25%),linear-gradient(135deg,#03517f 0%,#023753 100%);
  color:#fff;
  position:relative;
overflow:hidden}

.wp-block-group.is-style-m8-hero>.wp-block-group__inner-container {
  max-width:var(--max);
margin:auto}

.wp-block-group.is-style-m8-dark {
  max-width:none;
  padding:82px 24px;
  background:var(--navy);
  color:#fff;
  position:relative;
overflow:hidden}

.wp-block-group.is-style-m8-dark>.wp-block-group__inner-container {
  max-width:var(--max);
margin:auto}

.wp-block-group.is-style-m8-card {
  background:#fffdf9;
  border:2px solid rgba(3,81,127,.09);
  border-radius:26px;
  padding:30px;
  box-shadow:var(--shadow);
transition:transform .18s ease,box-shadow .18s ease}

.wp-block-group.is-style-m8-card:hover {
  transform:translateY(-3px);
box-shadow:0 20px 42px rgba(3,81,127,.15)}

h1,h2,h3,h4 {
  line-height:1.08;
  letter-spacing:-.04em;
  margin-top:0;
color:var(--navy)}

h1 {
  font-size:clamp(46px,7vw,86px);
font-weight:950}

h2 {
  font-size:clamp(35px,5vw,57px);
font-weight:950}

h3 {
  font-size:clamp(24px,3vw,33px);
font-weight:900}

p {
margin-top:0}

.is-style-m8-hero h1,.is-style-m8-hero h2,.is-style-m8-hero h3,.is-style-m8-dark h1,.is-style-m8-dark h2,.is-style-m8-dark h3 {
color:#fff}

.m8-eyebrow {
  color:var(--orange);
  font-size:13px;
  font-weight:950;
  letter-spacing:.13em;
text-transform:uppercase}

.is-style-m8-hero .m8-eyebrow,.is-style-m8-dark .m8-eyebrow {
color:#ffb66e}

.m8-lede {
  font-size:clamp(18px,2.1vw,23px);
max-width:720px}

.m8-grid-2,.m8-grid-3,.m8-grid-4 {
  display:grid;
gap:24px}

.m8-grid-2 {
grid-template-columns:repeat(2,minmax(0,1fr))}

.m8-grid-3 {
grid-template-columns:repeat(3,minmax(0,1fr))}

.m8-grid-4 {
grid-template-columns:repeat(4,minmax(0,1fr))}

.m8-gap-lg {
gap:34px}

.m8-number {
  width:48px;
  height:48px;
  border-radius:16px;
  background:var(--orange);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:950;
  margin-bottom:18px;
transform:rotate(-4deg)}

.m8-hero-layout {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:60px;
align-items:center}

.m8-hero-visual {
  /*min-height:390px;*/
  max-width: 300px;
  border-radius:34px;
  border:2px solid rgba(255,255,255,.2);
  background:radial-gradient(circle at 70% 20%,rgba(254,122,1,.24),transparent 35%),rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  position:relative;
  align-self: center;
overflow:hidden}

.m8-gauge {
  width:270px;
  height:270px;
  border-radius:50%;
  border:16px solid var(--orange);
  display:grid;
  place-items:center;
  background:#fff5e8;
  color:var(--navy);
box-shadow:inset 0 0 0 8px rgba(3,81,127,.08),0 20px 50px rgba(0,0,0,.18)}

.m8-gauge__value {
text-align:center}

.m8-gauge__value strong {
  display:block;
  font-size:56px;
  line-height:1;
font-weight:950}

.m8-gauge__value span {
  color:var(--navy);
font-weight:950}

.m8-phone {
  position:absolute;
  right:8%;
  bottom:7%;
  width:150px;
  height:265px;
  border:7px solid #082f46;
  border-radius:25px;
  background:#fff;
  color:var(--navy);
  padding:26px 14px 15px;
box-shadow:0 20px 45px rgba(0,0,0,.25)}

.m8-phone strong {
  font-size:31px;
color:var(--orange)}

.m8-phone small {
  display:block;
color:#527486}

.m8-button-row {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
margin-top:28px}

.wp-block-button__link {
  border-radius:999px!important;
  padding:14px 23px!important;
  font-weight:950!important;
  text-decoration:none!important;
transition:transform .15s ease,box-shadow .15s ease}

.wp-block-button__link:hover {
  transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.15)}

.is-style-m8-primary .wp-block-button__link {
  background:var(--orange);
color:#fff}

.is-style-m8-primary .wp-block-button__link:hover {
  background:#e96d00;
color:#fff}

.is-style-m8-secondary .wp-block-button__link {
  background:transparent;
  color:inherit;
border:2px solid currentColor}

.m8-pill {
  display:inline-block;
  background:#ffead5;
  color:#a64d00;
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
font-weight:950}

.m8-stat {
  font-size:52px;
  font-weight:950;
  line-height:1;
  color:var(--orange);
margin-bottom:8px}

.m8-note {
  border-left:5px solid var(--orange);
  padding:17px 20px;
  background:#fff0dd;
  border-radius:0 14px 14px 0;
color:#07344d}

.m8-faq .wp-block-details {
  background:#fffdf9;
  border:2px solid rgba(3,81,127,.1);
  border-radius:16px;
  padding:18px 20px;
margin:12px 0}

.m8-faq summary {
  font-weight:900;
  cursor:pointer;
color:var(--navy)}

.m8-muted {
color:var(--muted)}

.site-footer {
  background:var(--dark);
  color:#fff;
padding:55px 24px 25px}

.site-footer__inner {
  max-width:var(--max);
margin:auto}

.site-footer__grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
gap:40px}

.site-footer a {
  color:#fff;
text-decoration:none}

.site-footer a:hover {
color:#ffb66e}

.site-footer .site-brand__name {
color:#fff}

.site-footer__bottom {
  margin-top:45px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#c0d5df;
font-size:14px}

.site-footer ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
gap:8px}

.page-title {
  max-width:var(--max);
  margin:0 auto;
padding:70px 24px 15px}

.page-content {
padding:0 24px 80px}

.page-content>* {
  max-width:var(--max);
  margin-left:auto;
margin-right:auto}

input,textarea,select {
  width:100%;
  padding:13px 15px;
  border:2px solid rgba(3,81,127,.18);
  border-radius:14px;
  background:#fff;
font:inherit}

input:focus,textarea:focus,select:focus {
  outline:3px solid rgba(254,122,1,.28);
border-color:var(--orange)}

@media(max-width:900px) {
  .site-nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    background:var(--cream);
    padding:20px 24px;
  border-bottom:2px solid rgba(254,122,1,.22)}

  .site-nav.is-open {
  display:block}

  .site-nav ul {
    display:grid;
  gap:15px}

  .nav-toggle {
  display:block}

  .m8-hero-layout,.m8-grid-2,.m8-grid-3,.m8-grid-4 {
  grid-template-columns:1fr}

  .m8-hero-layout {
  gap:35px}

  .m8-hero-visual {
  min-height:330px}

}

@media(max-width:560px) {
  body {
  font-size:16px}

  .wp-block-group.is-style-m8-section,.wp-block-group.is-style-m8-dark {
  padding:60px 20px}

  .wp-block-group.is-style-m8-hero {
  padding:64px 20px}

  .site-header__inner {
  padding:12px 18px}

  .page-title {
  padding:50px 20px 10px}

  .page-content {
  padding:0 20px 60px}

  .m8-phone {
    width:125px;
  height:225px}

  .m8-gauge {
    width:220px;
  height:220px}

  .m8-gauge__value strong {
  font-size:44px}

  .site-footer {
    padding-left:20px;
  padding-right:20px}

  .site-footer__grid {
  grid-template-columns:1fr}

}