@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
  --cream:#F7F7F4;
  --gray:#6B6D70;
  --black:#040404;
  --orange:#FF8C0A;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:#303238;
  font-family:"Palatino Linotype",Palatino,"Book Antiqua",serif;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(calc(100% - 7rem),var(--max));margin-inline:auto}
.site-header{background:var(--cream);padding:22px 0 16px}
.nav{min-height:118px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav-links{display:flex;gap:42px;font-size:1rem}
.nav-links a{text-decoration:none}
.brand img{width:145px;height:105px;object-fit:contain}
.book-btn{
  justify-self:end;background:#2d3033;color:#fff;text-decoration:none;
  font-family:Anton,Impact,sans-serif;text-transform:uppercase;
  padding:17px 34px;border-radius:999px;letter-spacing:.01em
}
.hero-image{
  position:relative;min-height:650px;background:url("assets/hero.webp") center center/cover no-repeat;
  overflow:hidden;
}
.hero-shade{position:absolute;inset:0;background:rgba(107,109,112,.22);mix-blend-mode:multiply}
h1,h2,h3,h4,.service-card,.primary-btn,.contact-value{
  font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;margin-top:0
}
.hero h1{
  position:relative;z-index:1;margin:0;text-align:center;color:var(--cream);
  padding:100px 30px 0;font-size:clamp(2.5rem,5vw,4rem);line-height:1.2;
}
.section{padding:105px 0}
.services{text-align:center}
.services h2,.why h2,.contact h2{font-size:clamp(2.3rem,4vw,2.8rem);line-height:1.05;margin-bottom:12px}
.speed-line{height:42px;position:relative;margin:0 auto 22px;max-width:1300px;overflow:hidden}
.speed-line:before,.speed-line:after{
  content:"";position:absolute;left:1%;right:1%;height:11px;top:14px;transform:skewX(-28deg);
}
.speed-line:before{background:#414348;top:22px;left:7%;right:0}
.speed-line:after{background:var(--orange);right:6%}
.section-intro{font-size:1.4rem;line-height:1em;margin:20px 0 48px}
.service-grid{
  max-width:930px;margin:0 auto 52px;display:flex;flex-wrap:wrap;justify-content:center;gap:36px 90px
}
.service-card{
  width:205px;min-height:100px;position:relative;display:grid;place-items:center;text-decoration:none;
  border:4px solid #4b4e52;border-radius:15px;overflow:hidden;font-size:1.6rem;line-height:1.05;
  box-shadow:0 2px 2px rgba(0,0,0,.12)
}
.service-card:before{
  content:"";position:absolute;inset:0;background:url("assets/water.webp") center 88%/cover no-repeat;opacity:.65
}
.service-card span{position:relative;z-index:1}
.primary-btn{
  display:inline-block;min-width:310px;text-align:center;text-decoration:none;background:#3c4147;color:#fff;
  border-radius:999px;padding:18px 36px;font-size:.95rem
}
.why{padding-top:70px}
.why>h2{text-align:center;margin-bottom:32px}
.why>h4{text-align:center;font-size:1.6rem;line-height:1.05;margin-bottom:78px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:70px 65px}
.why-grid h3{font-size:2.2rem;line-height:1.1;margin-bottom:26px}
.why-grid p{font-size:1rem;line-height:1em;margin:0;max-width:390px}
.contact{padding:70px 0 90px}
.contact-photo{
  min-height:620px;padding:40px 80px 55px;border-radius:15px;overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),url("assets/contact-lake.webp") center/cover no-repeat;
  opacity:.90
}
.contact h2{text-align:center;color:#202327;margin-bottom:35px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 150px;align-items:center}
.glass-card{
  min-height:155px;background:rgba(247,247,244,.68);border-radius:15px;padding:28px 30px;text-align:center;
  display:flex;flex-direction:column;justify-content:center
}
.glass-card h4{font-size:1.6rem;margin-bottom:22px}
.glass-card a,.contact-value{font-size:1.55rem;text-decoration:none;font-family:Anton,Impact,sans-serif;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.contact-tag{text-align:center}
.contact-tag h3{font-size:2.2rem;line-height:1.15;margin:0 0 28px}
.footer{position:relative;overflow:hidden;padding:45px 0 40px;background:#bfc5c6}
.footer-water{
  position:absolute;inset:0;background:url("assets/water.webp") center 80%/cover no-repeat;opacity:.22
}
.footer:after{content:"";position:absolute;inset:0;background:rgba(107,109,112,.50)}
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:45px;align-items:center}
.footer-brand{display:grid;grid-template-columns:150px 1fr;gap:25px;align-items:end}
.footer-brand img{width:150px}
.footer h3{font-size:2.2rem;line-height:1.1;margin-bottom:24px}
.footer h4{font-size:1.6rem;line-height:1.1;margin-bottom:6px}
.footer p{font-size:1rem;line-height:1.15;margin:7px 0}
.footer-center{text-align:center}
.footer-contact{text-align:center}
.footer a{text-underline-offset:4px}

@media (max-width:900px){
  .wrap{width:min(calc(100% - 2rem),var(--max))}
  .nav{grid-template-columns:1fr auto;min-height:90px}
  .brand{grid-row:1;grid-column:1}.brand img{width:110px;height:80px}
  .nav-links{grid-row:2;grid-column:1/-1;justify-content:center;gap:25px}
  .book-btn{grid-row:1;grid-column:2;padding:13px 22px}
  .hero-image{min-height:500px;background-position:56% center}
  .hero h1{padding-top:55px}
  .section{padding:75px 0}
  .why-grid{grid-template-columns:1fr 1fr;gap:50px 35px}
  .contact-photo{padding:35px 25px}
  .contact-grid{gap:24px}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand{grid-template-columns:1fr;justify-items:center}
}
@media (max-width:600px){
  .nav-links{font-size:.9rem}
  .hero-image{min-height:430px}
  .hero h1{font-size:2.45rem;padding:40px 18px 0}
  .service-grid{gap:22px}
  .service-card{width:min(100%,260px)}
  .why-grid,.contact-grid{grid-template-columns:1fr}
  .why>h4{margin-bottom:50px}
  .why-grid h3{font-size:1.8rem;margin-bottom:14px}
  .contact-photo{min-height:auto}
  .contact h2{font-size:2.25rem}
  .contact-tag{padding:20px 0}
  .primary-btn{min-width:0;width:min(100%,310px)}
}