:root {
  --navy:#14283D;
  --burgundy:#7A263A;
  --rose:#CFA5AD;
  --mist:#E8EAEC;
  --cream:#FAF9F7;
}
*{box-sizing:border-box}
html{background:var(--cream);color:var(--navy);font-family:Georgia,'Times New Roman',serif}
body{margin:0;min-width:320px;background:var(--cream)}
a{color:inherit;text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:.22em}
main{overflow:hidden;background:var(--cream)}
.hero{position:relative;min-height:570px;padding:35px 5vw 60px;text-align:center;background:
 radial-gradient(circle at 84% 58%,rgba(255,247,225,.95) 0 4%,transparent 4.5%),
 linear-gradient(180deg,rgba(250,249,247,.95) 0%,rgba(250,249,247,.76) 35%,rgba(207,165,173,.18) 78%,rgba(250,249,247,.94) 100%),
 linear-gradient(135deg,#FAF9F7 0%,#E8EAEC 55%,#CFA5AD 125%)}
.hero:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-26px;height:58px;background:var(--cream);border-top:9px solid rgba(207,165,173,.7);border-radius:50% 50% 0 0/100% 100% 0 0}
.foliage{position:absolute;left:-40px;top:-20px;width:310px;height:210px;opacity:.22;background:
 radial-gradient(ellipse at 20% 25%,#7A263A 0 7%,transparent 8%),
 radial-gradient(ellipse at 42% 18%,#7A263A 0 6%,transparent 7%),
 radial-gradient(ellipse at 58% 35%,#7A263A 0 8%,transparent 9%)}
.statement{position:absolute;right:5vw;top:44px;width:260px;text-align:center;color:#B87986;font:italic 24px/1.25 'Brush Script MT','Segoe Script',cursive}
.statement span{display:block;width:145px;margin:18px auto 0;border-top:1px solid var(--rose)}
.brand{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.logo{width:240px;max-width:38vw;height:auto;margin:-8px 0 -32px}
h1{margin:0;color:var(--navy);font-weight:400;font-size:clamp(52px,7vw,94px);letter-spacing:-.035em}
.services{margin:14px auto 0;font-size:clamp(15px,1.5vw,22px);white-space:nowrap}
.services b{padding:0 .28em;color:var(--burgundy)}
.construction{padding:68px 6vw 28px;text-align:center;background:var(--cream)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:22px;color:#B87986;font:600 12px/1.2 Arial,sans-serif;letter-spacing:.42em;text-transform:uppercase}
.eyebrow span{width:230px;border-top:1px solid var(--rose)}
h2{margin:24px auto 8px;max-width:1100px;font-size:clamp(30px,3.6vw,52px);font-weight:600;letter-spacing:-.02em}
.intro{margin:0 auto;max-width:1000px;font-size:clamp(18px,2vw,28px);line-height:1.35}
.ornament{margin:15px auto 9px;color:var(--burgundy);font-size:17px}
.contacts{display:grid;grid-template-columns:repeat(3,1fr);max-width:1180px;margin:18px auto 0}
.contact{position:relative;display:flex;min-height:140px;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 26px;font-size:clamp(18px,1.7vw,25px)}
.contact+.contact:before{content:"";position:absolute;left:0;top:14px;height:104px;border-left:1px solid rgba(207,165,173,.85)}
.icon{display:grid;place-items:center;width:62px;height:62px;margin-bottom:9px;border-radius:50%;background:#F4E6E7;color:var(--burgundy);font:30px/1 Arial,sans-serif}
.contact:first-child .icon{font-size:20px}
.contact strong,.contact a{font-weight:400}
.contact small{margin-top:7px;color:#C17C89;font:600 11px/1.2 Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase}
footer{position:relative;display:grid;grid-template-columns:1.25fr .7fr 1fr;align-items:center;gap:28px;min-height:150px;padding:44px 4vw 30px;color:var(--cream);background:var(--navy);border-top:7px solid var(--rose)}
footer:before{content:"";position:absolute;left:-4%;right:-4%;top:-35px;height:50px;background:var(--cream);border-bottom:7px solid var(--rose);border-radius:0 0 50% 50%/0 0 100% 100%}
.footer-quote{margin:0;font-size:clamp(16px,1.55vw,23px);font-style:italic}
.footer-mark{display:flex;align-items:center;gap:10px;color:var(--rose)}
.footer-mark span{flex:1;border-top:1px solid rgba(207,165,173,.55)}
.footer-right{text-align:center}
.footer-right strong{color:var(--rose);font:600 12px/1.2 Arial,sans-serif;letter-spacing:.34em;text-transform:uppercase}
.footer-right p{margin:7px 0 0;font-size:clamp(14px,1.2vw,18px);font-style:italic}
@media (max-width:900px){
  .hero{min-height:auto;padding:32px 5vw 70px}
  .statement{position:relative;right:auto;top:auto;width:auto;max-width:460px;margin:0 auto 14px;font-size:22px}
  .logo{width:210px;max-width:60vw;margin:-8px 0 -26px}
  .services{max-width:92vw;white-space:normal;line-height:1.7}
  .contacts{grid-template-columns:1fr;gap:20px}
  .contact{min-height:auto;padding:12px 10px 22px}
  .contact+.contact:before{left:15%;right:15%;top:-8px;height:auto;border-left:0;border-top:1px solid rgba(207,165,173,.55)}
  footer{grid-template-columns:1fr;text-align:center;gap:18px;padding-top:58px}
  .footer-mark{max-width:360px;width:100%;margin:0 auto}
}
@media (max-width:520px){
  .hero{padding-left:18px;padding-right:18px}
  h1{font-size:44px}
  .services{font-size:14px}
  .construction{padding:62px 20px 24px}
  .eyebrow{gap:9px;font-size:9px;letter-spacing:.28em}
  .eyebrow span{width:42px}
  h2{font-size:30px}
  .intro{font-size:18px}
  .contact{font-size:19px}
  .footer-quote{font-size:17px}
}