@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700;1,800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --color-primary:#9B1E1C;
  --color-primary-dark:#7A1614;
  --color-primary-light:#B84744;
  --color-ink:#2A2019;
  --color-ink-soft:#5B4C42;
  --color-bg:#FBF8F3;
  --color-surface:#FFFFFF;
  --color-stone:#F0E9DC;
  --color-border:#E3D8C4;
  --color-gold:#A9824F;
  --color-footer-bg:#1E1611;
  --color-footer-text:#D9CFC2;
  --font-display:'Playfair Display', serif;
  --font-body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.font-display{font-family:var(--font-display);}

h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
}

.tracking-wide-plus{letter-spacing:0.14em;}

/* Section label - small caps kicker */
.kicker{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size:0.75rem;
  color:var(--color-primary);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.9rem 1.9rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:2px;
  transition:all .25s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-primary);
  color:#fff;
  border:1px solid var(--color-primary);
}
.btn-primary:hover{
  background:var(--color-primary-dark);
  border-color:var(--color-primary-dark);
  transform:translateY(-1px);
}
.btn-outline{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.65);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.12);
  border-color:#fff;
}
.btn-ink{
  background:transparent;
  color:var(--color-ink);
  border:1px solid var(--color-ink);
}
.btn-ink:hover{
  background:var(--color-ink);
  color:#fff;
}

/* Nav */
.nav-link{
  position:relative;
  font-weight:500;
  font-size:0.85rem;
  letter-spacing:0.03em;
  color:var(--color-ink);
  padding-bottom:4px;
  white-space:nowrap;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--color-primary);
  transition:width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after{width:100%;}
.nav-link.active{color:var(--color-primary);}

#site-header{
  background:transparent;
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
#site-header.scrolled{
  background:var(--color-bg);
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}

.nav-on-photo{color:#fff;}
#site-header.scrolled .nav-on-photo{color:var(--color-ink);}

.nav-phone{color:#fff;border-color:rgba(255,255,255,0.65);}
#site-header.scrolled .nav-phone{color:var(--color-ink);border-color:var(--color-ink);}
#site-header.scrolled .nav-phone:hover{background:var(--color-ink);color:#fff;}

/* Non-hero pages: header always solid, never transparent */
body.page-solid-header #site-header{background:var(--color-bg);box-shadow:0 1px 0 rgba(0,0,0,0.06);}
body.page-solid-header .nav-on-photo{color:var(--color-ink);}
body.page-solid-header .nav-phone{color:var(--color-ink);border-color:var(--color-ink);}
body.page-solid-header .nav-phone:hover{background:var(--color-ink);color:#fff;}

/* Divider ornament */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
}
.ornament::before,.ornament::after{
  content:'';
  height:1px;
  width:2.5rem;
  background:var(--color-gold);
  opacity:0.6;
}

/* Cards */
.card-elevate{
  transition:transform .35s ease, box-shadow .35s ease;
}
.card-elevate:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -20px rgba(42,32,25,0.35);
}

.img-zoom{overflow:hidden;}
.img-zoom img{transition:transform .6s ease;}
.img-zoom:hover img{transform:scale(1.06);}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .img-zoom img{transition:none;}
  html{scroll-behavior:auto;}
}

/* Mobile nav */
#mobile-nav{
  transition:max-height .35s ease;
  max-height:0;
  overflow:hidden;
}
#mobile-nav.open{max-height:32rem;}

/* Marker dot for service area lists */
.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-primary);
  display:inline-block;
}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

/* Form fields */
.field-label{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-ink-soft);
}
.field-input{
  width:100%;
  border:1px solid var(--color-border);
  background:#fff;
  padding:0.85rem 1rem;
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--color-ink);
  border-radius:2px;
  transition:border-color .2s ease;
}
.field-input:focus{
  border-color:var(--color-primary);
}

/* Home page: Who / Where / What boxes */
.home-box{
  background:rgba(20,14,10,0.31);
  -webkit-backdrop-filter:blur(1.5px);
  backdrop-filter:blur(1.5px);
  border:1px solid rgba(255,255,255,0.35);
  padding:2.25rem 2rem;
  box-shadow:0 0 0 2px var(--color-primary);
  transition:background-color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.home-box:hover,
.home-box:focus-within{
  background:var(--color-primary);
  border-color:var(--color-primary);
  transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--color-primary), 0 24px 48px -20px rgba(0,0,0,0.55);
}
@media (min-width:1024px){ .home-box{padding:2.75rem 2.5rem;} }
.home-link{
  display:inline-block;
  color:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, transform .2s ease;
}
.home-link:hover{border-bottom-color:#fff;transform:translateX(4px);}

/* In-page anchor targets sit below the fixed header */
.anchor{scroll-margin-top:8.5rem;}

/* Home page only: larger logo + taller header until the page is scrolled */
#site-header.home-header .header-row{height:10rem;transition:height .35s ease;}
#site-header.home-header #header-logo{height:125px;transition:height .35s ease;}
#site-header.home-header.scrolled .header-row{height:7rem;}
#site-header.home-header.scrolled #header-logo{height:95px;}
@media (min-width:1024px){
  #site-header.home-header .header-row{height:13rem;}
  #site-header.home-header #header-logo{height:180px;}
  #site-header.home-header.scrolled .header-row{height:8rem;}
  #site-header.home-header.scrolled #header-logo{height:95px;}
}

/* "Choose ..." rotating phrase on the Who / Where / What landing pages */
.rotator{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.3em;}
.rotator-window{display:inline-grid;overflow:hidden;line-height:1.3;padding-bottom:.08em;}
.rotator-item{
  grid-area:1/1;
  text-align:left;
  white-space:nowrap;
  opacity:0;
  transform:translateY(100%);
  transition:opacity .7s ease, transform .7s ease;
}
.rotator-item.is-active{opacity:1;transform:translateY(0);}
.rotator-item.is-leaving{opacity:0;transform:translateY(-100%);}
@media (prefers-reduced-motion: reduce){
  .rotator-item{transition:none;}
}

/* Where page map labels */
.map-label{font-family:var(--font-body);font-size:5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--color-ink);}

/* Photo fades into the map beside it (same side-by-side layout on every screen size) */
.blend-photo{
  -webkit-mask-image:linear-gradient(to right,#000 55%,transparent);
  mask-image:linear-gradient(to right,#000 55%,transparent);
}

/* Sky blue and grass green from the photo carry behind the map, fading out to the right */
.blend-backdrop{
  background:linear-gradient(to bottom,#1b8eff 0%,#6ab4ff 32%,#bcd6ea 55%,#98a868 76%,#6a8334 100%);
  -webkit-mask-image:linear-gradient(to right,#000 35%,transparent 100%);
  mask-image:linear-gradient(to right,#000 35%,transparent 100%);
}

/* "we are / we build / we offer" tucks under the first V of the W */
.home-box .box-sub{margin-left:0.75rem;}
@media (min-width:1024px){ .home-box .box-sub{margin-left:0.95rem;} }

/* red divider under the box headings (turns white when the box fills red on hover) */
.home-box .box-rule{height:2px;width:3.5rem;background:var(--color-primary);transition:background-color .35s ease;}
.home-box:hover .box-rule,.home-box:focus-within .box-rule{background:#fff;}

/* Lot rows: one line per region; hover the left/right edge (or swipe/scroll) to move along it */
.hscroll-wrap{position:relative;}
.hscroll{scrollbar-width:none;-ms-overflow-style:none;}
.hscroll::-webkit-scrollbar{display:none;}
.hscroll-wrap::before,.hscroll-wrap::after{
  content:'';position:absolute;top:0;bottom:1rem;width:5rem;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.hscroll-wrap::before{left:0;background:linear-gradient(to right,var(--hs-bg,#FBF8F3),transparent);}
.hscroll-wrap::after{right:0;background:linear-gradient(to left,var(--hs-bg,#FBF8F3),transparent);}
.hscroll-wrap.can-left::before,.hscroll-wrap.can-right::after{opacity:1;}
.hscroll-wrap .hs-arrow{
  position:absolute;top:50%;z-index:3;width:2.5rem;height:2.5rem;margin-top:-1.5rem;border-radius:9999px;
  background:var(--color-primary);color:#fff;display:none;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.hscroll-wrap.can-right .hs-arrow.right{display:flex;right:.5rem;}
.hscroll-wrap.can-left .hs-arrow.left{display:flex;left:.5rem;}

/* Home slogan above the three boxes: italic white that pops straight off the photo, with a faint red glow */
.hero-slogan{
  position:relative;
  font-family:var(--font-display);
  padding:.4rem 0;
}
/* OPTION 1: bold italic capitals */
.hero-slogan.slogan-opt1{
  font-style:italic;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  -webkit-text-stroke:2px rgba(20,12,10,.95);
  paint-order:stroke fill;
  text-shadow:0 2px 3px rgba(0,0,0,.8),0 5px 16px rgba(0,0,0,.5),0 0 28px rgba(155,30,28,.3);
}
/* OPTION 2: exactly the Who / What / Where heading font (Playfair Display, regular, upright, mixed case) */
.hero-slogan.slogan-opt2{
  font-style:normal;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  -webkit-text-stroke:1.5px rgba(14,10,8,.7);
  paint-order:stroke fill;
  text-shadow:0 2px 3px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.5),0 0 26px rgba(155,30,28,.3);
}
.hero-slogan::before{
  content:'';
  position:absolute;
  left:-10%;right:-10%;top:-70%;bottom:-70%;
  z-index:-1;
  /* a single smooth gradient of shade (no blur, no mask): it simply fades to nothing, so there are no edges at all */
  background:radial-gradient(ellipse closest-side at center,rgba(16,11,9,.52) 0%,rgba(16,11,9,.44) 40%,rgba(16,11,9,.26) 66%,rgba(16,11,9,.08) 86%,rgba(16,11,9,0) 100%);
  pointer-events:none;
}
.hero-slogan .slogan-dot{color:#F04A42;font-style:normal;font-weight:900;font-size:1.3em;line-height:0;margin-left:.03em;-webkit-text-stroke:1.5px rgba(25,18,14,.85);paint-order:stroke fill;text-shadow:0 2px 10px rgba(0,0,0,.5);}
/* OPTION 3: matches the "RED WOLFE" lettering in the logo (bold serif capitals, upright) */
.hero-slogan.slogan-opt3{
  font-family:'Source Serif 4','Playfair Display',Georgia,serif;
  font-style:normal;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  -webkit-text-stroke:1.5px rgba(14,10,8,.85);
  paint-order:stroke fill;
  text-shadow:0 2px 3px rgba(0,0,0,.75),0 4px 16px rgba(0,0,0,.5),0 0 26px rgba(155,30,28,.3);
}
/* Slogan size: fills the width of the three boxes (about 5% wider); text is ~26.4x its font size wide */
.hero-slogan{font-size:1.9rem;}
@media (min-width:640px){ .hero-slogan{font-size:2.25rem;} }
@media (min-width:768px){ .hero-slogan{white-space:nowrap;} .slogan-opt1{font-size:calc((min(100vw,1280px) - 3rem - 15px) * 1.05 / 36.89);} .slogan-opt2{font-size:calc((min(100vw,1280px) - 3rem - 15px) * 1.05 / 26.19);} .slogan-opt3{font-size:calc((min(100vw,1280px) - 3rem - 15px) * 1.05 / 34.53);} }
@media (min-width:1024px){ .slogan-opt1{font-size:calc((min(100vw,1280px) - 5rem - 15px) * 1.05 / 36.89);} .slogan-opt2{font-size:calc((min(100vw,1280px) - 5rem - 15px) * 1.05 / 26.19);} .slogan-opt3{font-size:calc((min(100vw,1280px) - 5rem - 15px) * 1.05 / 34.53);} }
@media (min-width:768px){ .hero-slogan{display:flex;justify-content:center;align-items:baseline;} }

/* Where page: whole region is one clickable card */
.region-card h2{transition:color .2s ease;}
.region-card:hover h2,.region-card:focus-visible h2{color:var(--color-primary-dark);}
.region-card:hover{border-top-color:var(--color-primary-dark);}

/* Home hero photo: full-bleed photograph; the crop keeps the roof peaks and the whole front of the house in view; only plain sky/driveway is trimmed */
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 36%;display:block;}


/* Inner pages: the page title now lives in the header next to the logo, so the content just clears the header */
.inner-main{padding-top:10.5rem;}
@media (min-width:1024px){ .inner-main{padding-top:13.5rem;} }
.header-title .rotator{justify-content:center;}
@media (max-width:767px){ .header-title{padding-left:.75rem;} #site-header.home-header #header-logo{height:96px;} #site-header.home-header .header-row{height:8rem;} }
@media (min-width:768px){ .header-title{margin-top:.9rem;} }

/* keep the white box text readable now that the photo shows through the boxes */
.home-box a,.home-box p{text-shadow:0 1px 1px rgba(0,0,0,.55),0 3px 5px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.55);}
.home-box:hover a,.home-box:hover p,.home-box:focus-within a,.home-box:focus-within p{text-shadow:none;}

/* Home boxes: slightly larger, bolder links that "lift" off the page with a layered drop shadow (no backing) */
.home-box .home-link{font-size:1.28rem;font-weight:500;line-height:1.3;}
.home-box .kicker{font-size:.84rem;font-weight:700;}
.hero-slogan .slogan-text{display:inline;}

/* Home hero, desktop: the slogan and boxes stay centred in the screen. The photo is zoomed in a little (5%) and pinned from the
   bottom, so the lower part of the garage doors shows beneath the boxes with only a little driveway under them.
   (Phones and tablets keep the full-screen crop above.) */
@media (min-width:1024px){
  .hero-section{
    --s:max(100vh,840px);                                      /* height of the hero */
    --wi:max(105vw, calc((var(--s) - 80px) / 0.516));          /* picture width: 5% zoom, more only if the window is tall and narrow */
    min-height:var(--s) !important;
    overflow:hidden;
  }
  .hero-section .hero-photo{
    position:absolute;max-width:none;object-fit:fill;
    width:var(--wi);height:auto;
    left:50%;transform:translateX(-50%);
    top:calc(var(--s) - 80px - var(--wi) * 0.516);             /* bottom of the garage doors sits 80px above the bottom edge */
  }
}