:root { --navy: #162a46; --rust: #861d0e; --red: #ed372a; --cream: #f0f7e9; --grey: #c7c5be; --gold: #debd38; --brown: #874421; }
* { box-sizing: border-box; }
body { margin: 0px; background: var(--grey); color: var(--navy); font-family: "Trebuchet MS", Arial, sans-serif; }
a { color: inherit; }
section { padding: 64px max(5vw, 24px); }
h1, h2, h3, p { margin: 0px; }
h1, h2, h3 { font-family: Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(64px, 9.8vw, 142px); line-height: 0.92; letter-spacing: -0.045em; color: var(--red); }
h2 { font-size: clamp(44px, 5.5vw, 76px); line-height: 1.1; }
h3 { font-size: clamp(32px, 3.5vw, 48px); margin: 72px 0px 40px; }
.hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6%; align-items: center; min-height: 640px; padding-top: 50px; padding-bottom: 48px; }
.tagline { text-transform: uppercase; color: var(--red); font-size: clamp(21px, 2.5vw, 34px); line-height: 1.2; margin-top: 35px; }
.contact-link { display: inline-block; text-transform: uppercase; text-decoration: none; color: var(--red); font-size: 21px; margin: 40px 0px 26px; }
.hero-image { width: 100%; max-height: 550px; aspect-ratio: 350 / 500; object-fit: cover; border-radius: 50% 50% 0px 0px; }
.contact-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.socials { display: flex; gap: 10px; }
.social { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 50%; color: white; background: rgb(34, 34, 34); font-size: 28px; font-family: Arial; font-weight: bold; }
.social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.instagram { background: linear-gradient(35deg, rgb(245, 191, 72), rgb(212, 49, 137), rgb(123, 77, 197)); }
.facebook { background: rgb(36, 118, 233); }
.youtube { background: rgb(255, 255, 255); color: rgb(233, 46, 34); font-size: 23px; }
.tiktok { background: rgb(8, 8, 8); }
.email { display: inline-flex; gap: 8px; font-size: clamp(14px, 1.65vw, 22px); font-weight: bold; color: var(--brown); text-decoration: none; overflow-wrap: anywhere; }
.navy { background: var(--navy); color: rgb(234, 247, 239); }
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 13%; align-items: center; max-width: 1100px; margin: auto; }
.about-grid > .phone { max-width: 280px; }
.about h2 { margin-bottom: 28px; }
.about p { font-size: clamp(18px, 2vw, 25px); line-height: 1.5; margin-bottom: 12px; }
.phone { position: relative; border: 3px solid rgb(238, 238, 238); border-radius: 35px; background: rgb(8, 8, 8); padding: 10px; aspect-ratio: 9 / 17.5; overflow: hidden; min-width: 0px; }
.phone::before { content: ""; position: absolute; z-index: 2; width: 45%; height: 18px; border-radius: 0px 0px 13px 13px; background: rgb(8, 8, 8); top: 8px; left: 27.5%; pointer-events: none; }
.phone::after { content: ""; position: absolute; z-index: 3; width: 17%; height: 3px; border-radius: 4px; top: 14px; left: 41.5%; background: rgb(68, 68, 68); pointer-events: none; }
.phone img, .phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 23px; }
.center { text-align: center; }
.trusted-title { margin-top: 64px; }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1100px; margin: 36px auto; }
.logos img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: white; border-radius: 30%; padding: 12px; }
.about .more { font-size: 17px; margin-top: 28px; }
.rust { background: var(--rust); color: var(--cream); }
.portfolio > h2, .portfolio > h3, .video-grid, .photo-grid, .testimonials { max-width: 1200px; margin-left: auto; margin-right: auto; }
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 42px 36px; margin-top: 45px; }
.video-card { margin: 0px; min-width: 0px; }
.video-card figcaption { text-align: center; font-size: 16px; line-height: 1.35; margin-top: 18px; }
.pending { display: flex; align-items: center; justify-content: center; background: rgb(51, 16, 12); }
.pending .play { font-size: 50px; color: rgb(204, 184, 174); }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; max-width: 1050px; }
.feedback-title { margin-top: 85px; margin-bottom: 50px; }
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 54px 50px; }
.testimonials blockquote { position: relative; margin: 15px 0px 0px; background: var(--gold); color: rgb(49, 25, 9); border-radius: 100px; padding: 40px 45px; font-size: 18px; line-height: 1.4; text-align: center; }
.testimonials img { position: absolute; width: 88px; height: 88px; object-fit: contain; border-radius: 50%; background: white; right: 8px; top: -35px; padding: 7px; }
.testimonials strong { display: block; padding: 0px 35px; margin-bottom: 12px; }
.testimonials cite { display: block; font-style: normal; font-size: 16px; margin-top: 14px; }
.closing { display: grid; grid-template-columns: 1.7fr 1fr; gap: 7%; align-items: center; background: var(--cream); color: var(--brown); text-align: center; }
.closing h2 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: 800; font-size: clamp(36px, 4.1vw, 58px); margin-bottom: 24px; }
.closing p { font-size: clamp(20px, 2.2vw, 28px); font-weight: bold; line-height: 1.35; margin-bottom: 12px; }
.closing-cta { display: inline-block; font-size: 28px; font-weight: bold; text-decoration: none; margin: 26px 0px; }
.closing .contact-row { justify-content: center; }
.closing > .phone { width: 100%; max-width: 300px; justify-self: center; }
footer { display: flex; justify-content: space-between; padding: 22px 5vw; background: var(--navy); color: var(--cream); font-size: 14px; }
.facebook-phone { padding: 8px; }
.facebook-phone iframe { display: block; width: 100%; height: 100%; border: 0px; border-radius: 23px; }
.facebook-phone::before, .facebook-phone::after { display: none; }
@media (max-width: 800px) {
  section { padding: 45px 24px; }
  .video-grid { gap: 28px 20px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .phone { border-radius: 25px; padding: 7px; }
  .phone img { border-radius: 17px; }
  .testimonials blockquote { padding: 38px 24px; border-radius: 55px; }
}
@media (max-width: 560px) {
  .hero, .about-grid, .closing { grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { font-size: 77px; }
  .hero-image { max-width: 270px; justify-self: center; }
  .about-grid > .phone { max-width: 200px; justify-self: center; grid-row: 2; }
  .video-grid, .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .testimonials { grid-template-columns: 1fr; }
  .closing > .phone { max-width: 220px; }
  .email { font-size: 15px; }
  .facebook-phone iframe { border-radius: 17px; }
}
.social img{width:23px;height:23px;display:block;filter:invert(1)}.youtube img{filter:invert(24%) sepia(89%) saturate(3847%) hue-rotate(351deg) brightness(97%) contrast(95%)}.logos{grid-template-columns:repeat(3,1fr);max-width:1000px}.logos img{border-radius:26%;padding:24px}.hero-image{object-position:50% 40%;aspect-ratio:1/1.18}.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:23px}@media(max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}.logos img{padding:14px}}