* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  background:#050505
}

body {
  margin:0;
  background:#050505;
  color:#f6efe5;
  font-family:Oswald,Arial,sans-serif;
  overflow-x:hidden
}

a {
  color:inherit;
  text-decoration:none
}

.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:86px;
  padding:12px clamp(14px,4vw,56px);
  display:flex;
  align-items:center;
  gap:28px;
  background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.64));
  border-bottom:1px solid rgba(255,92,22,.25);
  backdrop-filter:blur(10px)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content
}

.brand-icon {
  font-size:42px;
  color:#ddd;
  text-shadow:0 0 18px rgba(255,92,22,.4)
}

.brand strong {
  display:block;
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  font-size:28px;
  line-height:.9
}

.brand em {
  display:block;
  font-style:normal;
  color:#ff5a16;
  text-transform:uppercase;
  letter-spacing:6px;
  font-size:12px;
  font-weight:900
}

.nav {
  display:flex;
  gap:26px;
  margin-left:auto;
  text-transform:uppercase;
  font-weight:900;
  font-size:14px;
  letter-spacing:.5px
}

.nav a {
  padding:12px 0;
  border-bottom:2px solid transparent
}

.nav a:hover,.nav a.active {
  color:#ff5a16;
  border-bottom-color:#ff5a16
}

.top-call {
  text-align:right;
  color:#ff5a16;
  font-family:Anton,Impact,sans-serif;
  font-size:30px;
  line-height:1;
  text-shadow:0 0 18px rgba(255,92,22,.45)
}

.top-call small {
  display:block;
  color:#fff;
  text-transform:uppercase;
  font-family:Oswald,Arial,sans-serif;
  font-size:12px;
  font-weight:900
}

.menu-toggle {
  display:none;
  background:#0a0a0a;
  color:#fff;
  border:1px solid rgba(255,92,22,.5);
  font-size:26px;
  padding:4px 10px
}

.hero {
  min-height:850px;
  padding:130px clamp(18px,5vw,80px) 70px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 72% 42%,rgba(255,113,35,.18),transparent 24%),linear-gradient(135deg,#080808 0%,#0d0806 42%,#1a0d06 100%)
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  opacity:.35;
  pointer-events:none
}

.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:center;
  max-width:1500px;
  margin:0 auto
}

.eyebrow {
  text-transform:uppercase;
  color:#ff7a22;
  font-weight:900;
  letter-spacing:4px;
  font-size:14px;
  margin:0 0 18px
}

.hero h1,.section-head h2,.offer h2,.authority-copy h2,.final-cta h2 {
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.5px;
  margin:0
}

.hero h1 {
  font-size:clamp(60px,8vw,126px);
  text-shadow:0 7px 0 rgba(0,0,0,.35)
}

.hero h1 span,.section-head h2 span,.offer h2,.authority-copy h2 span {
  color:#ff5a16
}

.lead {
  font-size:23px;
  line-height:1.32;
  max-width:620px;
  color:#fff;
  margin:26px 0
}

.hero-copy h2 {
  font-size:30px;
  color:#ff5a16;
  text-transform:uppercase;
  margin:0 0 28px
}

.hero-actions {
  display:flex;
  gap:18px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 30px;
  border-radius:9px;
  border:2px solid rgba(255,92,22,.82);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:17px;
  text-align:center
}

.btn:hover {
  transform:translateY(-2px);
  filter:brightness(1.15)
}

.btn-primary {
  background:linear-gradient(180deg,#ff6b1d,#b93408);
  box-shadow:0 0 30px rgba(255,92,22,.35);
  color:#fff
}

.btn-dark {
  background:rgba(0,0,0,.5);
  color:#fff
}

.trust-row {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:38px
}

.trust-row span {
  border:1px solid rgba(255,92,22,.35);
  background:rgba(0,0,0,.35);
  padding:10px 14px;
  text-transform:uppercase;
  font-weight:900;
  font-size:13px
}

.hero-visual {
  position:relative;
  min-height:600px;
  border:1px solid rgba(255,92,22,.35);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 60px rgba(255,92,22,.16),0 30px 70px rgba(0,0,0,.55)
}

.hero-photo {
  background:url('../img/hero-before-after.jpg') center/cover no-repeat
}

.hero-photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18));
  pointer-events:none
}

.before-badge,.after-badge {
  position:absolute;
  z-index:3;
  bottom:22px;
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  font-size:38px;
  letter-spacing:.5px;
  text-shadow:0 4px 15px rgba(0,0,0,.85)
}

.before-badge {
  left:25px
}

.after-badge {
  right:25px
}

.split-fire {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:10px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,#ff5a16,#ffe2b6,#ff5a16,transparent);
  box-shadow:0 0 22px #ff5a16,0 0 60px rgba(255,92,22,.75);
  z-index:2
}

.warning,.proof,.commercial {
  padding:82px clamp(18px,5vw,80px);
  background:#080808;
  position:relative
}

.warning {
  background:radial-gradient(circle at center,rgba(255,92,22,.11),transparent 35%),#070707
}

.section-head {
  text-align:center;
  max-width:980px;
  margin:0 auto 42px
}

.section-head h2 {
  font-size:clamp(40px,6vw,76px)
}

.section-head p {
  font-size:23px;
  line-height:1.32;
  color:#e8ded3
}

.cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1380px;
  margin:0 auto
}

.cards article {
  border:1px solid rgba(255,92,22,.4);
  background:linear-gradient(180deg,#1a1511,#080808);
  padding:32px 24px;
  min-height:250px;
  box-shadow:inset 0 0 35px rgba(255,92,22,.07)
}

.card-icon {
  font-size:42px;
  color:#ff5a16
}

.cards h3,.proof h3 {
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  font-size:34px;
  margin:18px 0 12px
}

.cards p,.proof p {
  font-size:20px;
  line-height:1.28;
  color:#eee
}

.proof {
  background:linear-gradient(180deg,#050505,#0c0908)
}

.proof-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1380px;
  margin:0 auto
}

.before-after {
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  overflow:hidden
}

.ba-image {
  height:330px;
  position:relative;
  background-size:cover;
  background-position:center;
  overflow:hidden
}

.ba-image:before {
  content:"";
  position:absolute;
  inset:0 50% 0 0;
  background:rgba(0,0,0,.45);
  backdrop-filter:grayscale(1) contrast(1.3)
}

.ba-image:after {
  content:"";
  position:absolute;
  inset:0 0 0 50%;
  background:rgba(255,255,255,.12)
}

.driveway {
  background:linear-gradient(135deg,#161616 0 50%,#bda98d 50%)
}

.walkway {
  background:linear-gradient(135deg,#1b1710 0 50%,#8f8067 50%)
}

.siding {
  background:linear-gradient(135deg,#21201b 0 50%,#afa890 50%)
}

.divider {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  background:#fff;
  box-shadow:0 0 18px #fff
}

.divider:after {
  content:"◀▶";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
  color:#555;
  display:grid;
  place-items:center;
  font-weight:900
}

.label {
  position:absolute;
  top:18px;
  z-index:2;
  text-transform:uppercase;
  font-weight:900;
  background:rgba(0,0,0,.7);
  padding:6px 12px;
  border-radius:999px
}

.label.before {
  left:18px
}

.label.after {
  right:18px
}

.before-after h3,.before-after p {
  padding:0 24px
}

.before-after p {
  padding-bottom:22px
}

.offer {
  padding:76px clamp(18px,5vw,80px);
  background:radial-gradient(circle at 20% 50%,rgba(255,92,22,.16),transparent 30%),#090909
}

.offer-box {
  max-width:1400px;
  margin:0 auto;
  border:2px solid rgba(255,92,22,.75);
  border-radius:16px;
  background:linear-gradient(135deg,#17120f,#050505);
  box-shadow:0 0 50px rgba(255,92,22,.18),inset 0 0 55px rgba(255,92,22,.08);
  padding:42px;
  display:grid;
  grid-template-columns:1.15fr .9fr 1fr;
  gap:34px;
  align-items:center
}

.offer h2 {
  font-size:clamp(54px,7vw,108px)
}

.offer p,.offer li {
  font-size:22px;
  line-height:1.3
}

.offer ul {
  margin:0;
  padding-left:24px
}

.offer li {
  margin:10px 0
}

.offer-action strong {
  display:block;
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  font-size:40px;
  color:#ff5a16;
  line-height:1;
  margin-bottom:24px
}

.authority {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:560px;
  background:#050505
}

.authority-art {
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28)),url('../img/authority-left.jpg') center/cover no-repeat;
  min-height:560px
}

.authority-copy {
  position:relative;
  padding:76px clamp(22px,5vw,80px);
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.58)),url('../img/authority-right-building.jpg') center/cover no-repeat;
  overflow:hidden
}

.authority-copy:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(255,92,22,.13),transparent 28%);
  pointer-events:none
}

.authority-copy>* {
  position:relative;
  z-index:2
}

.authority-copy h2 {
  font-size:clamp(44px,5vw,82px)
}

.authority-copy p {
  font-size:24px;
  line-height:1.32
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:30px
}

.stats span {
  border:1px solid rgba(255,92,22,.35);
  background:rgba(0,0,0,.34);
  padding:20px;
  text-align:center;
  text-transform:uppercase
}

.stats strong {
  display:block;
  color:#ff5a16;
  font-family:Anton,Impact,sans-serif;
  font-size:30px
}

.commercial {
  background:#070707
}

.commercial-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  max-width:1320px;
  margin:0 auto
}

.commercial-grid a {
  min-height:120px;
  border:1px solid rgba(255,92,22,.38);
  background:linear-gradient(180deg,#151515,#080808);
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  text-transform:uppercase;
  font-weight:900
}

.commercial-grid a:before {
  content:"▣";
  display:block;
  color:#ff5a16;
  font-size:28px
}

.final-cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  padding:76px clamp(18px,6vw,100px);
  background:linear-gradient(135deg,#100a07,#030303);
  border-top:1px solid rgba(255,92,22,.4)
}

.final-cta h2 {
  font-size:clamp(40px,5vw,76px)
}

.final-cta p {
  font-size:23px
}

.contact-actions {
  text-align:right
}

.phone-big {
  display:block;
  font-family:Anton,Impact,sans-serif;
  font-size:64px;
  color:#fff;
  margin-bottom:20px
}

.email-link {
  display:block;
  margin-top:16px;
  color:#ffb17d;
  font-size:20px
}

.footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:28px clamp(18px,5vw,70px);
  background:#020202;
  color:#d7d0c8
}

.footer strong {
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  font-size:26px;
  color:#fff
}

.sticky-text {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:200;
  background:linear-gradient(180deg,#ff6b1d,#b93408);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:17px 26px;
  text-transform:uppercase;
  font-weight:900;
  box-shadow:0 0 30px rgba(255,92,22,.45)
}

@media(max-width:1100px) {
.nav {
  position:fixed;
  left:0;
  right:0;
  top:86px;
  display:none;
  flex-direction:column;
  background:#050505;
  padding:22px;
  border-bottom:1px solid rgba(255,92,22,.3)
}

.nav.open {
  display:flex
}

.menu-toggle {
  display:block;
  margin-left:auto
}

.top-call {
  font-size:24px
}

.hero-grid,.authority,.final-cta {
  grid-template-columns:1fr;
  display:grid
}

.hero-visual {
  min-height:480px
}

.cards {
  grid-template-columns:repeat(2,1fr)
}

.proof-grid {
  grid-template-columns:1fr
}

.offer-box {
  grid-template-columns:1fr
}

.commercial-grid {
  grid-template-columns:repeat(3,1fr)
}

.contact-actions {
  text-align:left
}

.authority-art {
  min-height:380px
}

}

@media(max-width:720px) {
.site-header {
  height:74px;
  padding:8px 12px
}

.brand-icon {
  font-size:30px
}

.brand strong {
  font-size:22px
}

.brand em {
  font-size:10px
}

.top-call small {
  display:none
}

.top-call {
  font-size:18px
}

.nav {
  top:74px
}

.hero {
  padding:105px 16px 46px;
  min-height:auto
}

.hero-grid {
  gap:30px
}

.hero h1 {
  font-size:56px
}

.lead {
  font-size:20px
}

.hero-copy h2 {
  font-size:23px
}

.btn {
  width:100%
}

.trust-row span {
  flex:1 1 46%;
  text-align:center
}

.hero-visual {
  min-height:360px
}

.before-badge,.after-badge {
  font-size:28px
}

.warning,.proof,.commercial,.offer {
  padding:54px 16px
}

.section-head h2 {
  font-size:38px
}

.section-head p {
  font-size:20px
}

.cards {
  grid-template-columns:1fr
}

.cards article {
  min-height:auto
}

.commercial-grid {
  grid-template-columns:1fr 1fr
}

.authority-copy {
  padding:54px 18px
}

.authority-copy h2 {
  font-size:44px
}

.stats {
  grid-template-columns:1fr
}

.final-cta {
  padding:54px 18px
}

.phone-big {
  font-size:42px
}

.footer {
  display:grid;
  text-align:center;
  padding-bottom:96px
}

.sticky-text {
  left:12px;
  right:12px;
  text-align:center;
  display:flex;
  justify-content:center
}

}

@media(max-width:430px) {
.hero h1 {
  font-size:48px
}

.commercial-grid {
  grid-template-columns:1fr
}

.trust-row span {
  flex:1 1 100%
}

.section-head h2 {
  font-size:34px
}

}

/* =========================================================
   BOSS WASH AUTHORITY — FINAL OFFER BACKGROUND FIX
   Image required at: assets/img/offer-bg.jpg
   ========================================================= */

section.offer#offer {
  position: relative !important;
  padding: 90px clamp(18px, 5vw, 80px) !important;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.38), rgba(0,0,0,.72)),
    url("../img/offer-bg.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

section.offer#offer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,92,22,.22), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.48)) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

section.offer#offer .offer-box {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  border: 2px solid rgba(255, 92, 22, .9) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.56), rgba(0,0,0,.84)) !important;
  box-shadow:
    0 0 60px rgba(255, 92, 22, .28),
    inset 0 0 70px rgba(255, 92, 22, .10) !important;
  backdrop-filter: blur(1.5px) !important;
  padding: 46px !important;
  display: grid !important;
  grid-template-columns: 1.15fr .9fr 1fr !important;
  gap: 34px !important;
  align-items: center !important;
}

section.offer#offer .offer-box h2 {
  font-size: clamp(58px, 7vw, 110px) !important;
  line-height: .92 !important;
  margin: 0 !important;
  color: #ff5a16 !important;
  text-shadow: 0 0 18px rgba(255, 92, 22, .25), 0 5px 0 rgba(0,0,0,.45) !important;
}

section.offer#offer .offer-box p,
section.offer#offer .offer-box li,
section.offer#offer .offer-action strong {
  text-shadow: 0 4px 14px rgba(0,0,0,.95) !important;
}

section.offer#offer .offer-action strong {
  display: block !important;
  font-size: 42px !important;
  line-height: .95 !important;
  color: #ff5a16 !important;
  margin-bottom: 22px !important;
  text-transform: uppercase !important;
}

@media (max-width: 1100px) {
  section.offer#offer .offer-box {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  section.offer#offer {
    padding: 58px 16px !important;
    background-position: center center !important;
  }

  section.offer#offer .offer-box {
    padding: 26px !important;
  }

  section.offer#offer .offer-box h2 {
    font-size: 58px !important;
  }
}


/* =========================================================
   BOSS WASH AUTHORITY — PROOF / BEFORE-AFTER IMAGE UPDATE
   Images required inside: assets/img/
   ========================================================= */

.proof-grid {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  max-width: 1680px;
}

.before-after {
  border: 1px solid rgba(255, 255, 255, .12);
  background: #070707;
  box-shadow: 0 0 32px rgba(0,0,0,.45);
}

.ba-image {
  height: 360px !important;
  background-size: cover !important;
  background-position: center center !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Kill old fake half/half overlays now that the images already contain the full before/after design */
.ba-image::before,
.ba-image::after {
  display: none !important;
}

/* Use the uploaded final images by card position — no index.php edit needed */
.proof-grid .before-after:nth-child(1) .ba-image {
  background-image: url("../img/proof-driveways.jpg") !important;
}

.proof-grid .before-after:nth-child(2) .ba-image {
  background-image: url("../img/proof-walkways.jpg") !important;
}

.proof-grid .before-after:nth-child(3) .ba-image {
  background-image: url("../img/proof-softwash.jpg") !important;
}

.proof-grid .before-after:nth-child(4) .ba-image {
  background-image: url("../img/proof-patios.jpg") !important;
}

.proof-grid .before-after:nth-child(5) .ba-image {
  background-image: url("../img/proof-commercial.jpg") !important;
}

/* Hide coded labels/divider because the image already has them baked in */
.proof-grid .label,
.proof-grid .divider {
  display: none !important;
}

.before-after h3 {
  margin-top: 22px;
}

.before-after p {
  min-height: 82px;
}

@media (max-width: 1500px) {
  .proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ba-image {
    height: 330px !important;
  }
}

@media (max-width: 620px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .ba-image {
    height: 320px !important;
  }
}


/* =========================================================
   BOSS WASH AUTHORITY — WARNING CARD BACKGROUND IMAGE UPDATE
   Images required inside: assets/img/
   ========================================================= */

.warning .cards article {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  padding: 42px 28px;
  border: 1px solid rgba(255, 92, 22, .52);
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 0 30px rgba(0,0,0,.55),
    inset 0 0 60px rgba(255,92,22,.08);
}

.warning .cards article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.72)),
    linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.36));
  z-index: 0;
  pointer-events: none;
}

.warning .cards article::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,92,22,.20), transparent 28%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.48));
  z-index: 1;
  pointer-events: none;
}

.warning .cards article > * {
  position: relative;
  z-index: 2;
}

.warning .cards article:nth-child(1) {
  background-image: url("../img/warning-mold.jpg") !important;
}

.warning .cards article:nth-child(2) {
  background-image: url("../img/warning-algae.jpg") !important;
}

.warning .cards article:nth-child(3) {
  background-image: url("../img/warning-oil.jpg") !important;
}

.warning .cards article:nth-child(4) {
  background-image: url("../img/warning-grime.jpg") !important;
}

.warning .card-icon {
  color: #ff5a16;
  text-shadow: 0 0 18px rgba(255,92,22,.55);
}

.warning .cards h3 {
  color: #fff;
  text-shadow:
    0 4px 18px rgba(0,0,0,.96),
    0 0 18px rgba(255,92,22,.18);
}

.warning .cards p {
  color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,.98);
  font-weight: 700;
}

@media (max-width: 720px) {
  .warning .cards article {
    min-height: 285px;
    padding: 34px 24px;
  }
}


/* =========================================================
   BOSS WASH AUTHORITY — REAL HEADER LOGO IMAGE UPDATE
   Image required inside: assets/img/bosswash-logo.png
   Replace old text/crown brand with real transparent logo.
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  min-width: 250px;
  height: 64px;
  gap: 0;
}

.brand-logo {
  display: block;
  width: 245px;
  max-width: 26vw;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(255, 92, 22, .18))
    drop-shadow(0 4px 10px rgba(0,0,0,.70));
}

.brand-icon,
.brand strong,
.brand em {
  display: none !important;
}

@media (max-width: 1100px) {
  .brand {
    min-width: 210px;
  }

  .brand-logo {
    width: 210px;
    max-width: 34vw;
  }
}

@media (max-width: 720px) {
  .site-header {
    height: 74px;
  }

  .brand {
    min-width: 170px;
    height: 54px;
  }

  .brand-logo {
    width: 170px;
    max-width: 48vw;
  }
}

@media (max-width: 430px) {
  .brand {
    min-width: 145px;
  }

  .brand-logo {
    width: 145px;
    max-width: 46vw;
  }
}