/* OXMOOR | Shared hero mechanical monogram + matched repair/residential page context
   This stylesheet is deliberately loaded after each page's legacy inline styles.
   One set of motif sizing/color rules; no JavaScript and no changes to forms. */

/* Ink pattern: a single transparent 6-motif SVG shared with the homepage. */
.repairHero,
.residentialHero,
.opHero,
.estimateHero { position:relative; isolation:isolate; overflow:hidden; }
.repairHero::before,
.residentialHero::before,
.opHero::before,
.estimateHero::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("oxmoor-mechanical-monogram.svg?v=4");
  background-repeat:repeat; background-size:308px 390px; background-position:16px 10px;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.65) 45%,#000 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.65) 45%,#000 100%);
}
.repairHero>.wrap,
.residentialHero>.wrap,
.opHero>.wrap,
.estimateHero>.wrap { position:relative; z-index:1; }

/* Cream quote-choice hero stays cream; slightly darken its vector ink for contrast. */
.estimateHero::before { opacity:.38; filter:brightness(.58) saturate(.75); }

/* The commercial page retains its seven rotating hero photographs.
   Pattern lives behind its copy inside the existing darkened text zone,
   not over the photographic presentation. */
.hero-inner { isolation:isolate; }
.hero-inner::before {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("oxmoor-mechanical-monogram.svg?v=4") 14px 8px/308px 390px repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.45) 52%,transparent 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.45) 52%,transparent 100%);
}
.hero-inner>.hero-copy { position:relative;z-index:1; }

/* One truly shared "YOU'RE VIEWING" component for Repair & Residential,
   replacing previous mismatched padding, weight and visibility rules. */
.pageContext.repairPageContext,
.pageContext.residentialPageContext {
  box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:3px;min-height:60px;padding:7px 12px;
  margin:0;
  border-left:3px solid #7a2638;border-radius:0 4px 4px 0;
  background:#f1f4f6;color:#071a2c;white-space:nowrap;
}
.pageContext .pageContextEyebrow {
  display:block;font-size:.56rem;font-weight:800;letter-spacing:.1em;line-height:1.15;
  color:#677784;
}
.pageContext strong { display:block;font-size:.76rem;font-weight:800;letter-spacing:.02em;line-height:1.18; }
.pageContext.residentialPageContext strong span { display:block; }

/* Match the Residential header's nav proportions to Repair rather than
   mixing a grid header with a flex header. Keep the established Oxmoor logo. */
.nav:has(.residentialPageContext) {
  display:flex;align-items:center;justify-content:space-between;
  gap:22px;min-height:82px;height:82px;
}
.nav:has(.residentialPageContext) .links { margin-left:auto; }
.nav:has(.residentialPageContext) .nav-actions { display:flex;align-items:center;gap:9px; }
.nav:has(.residentialPageContext) .phone {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 17px;
  color:#fff;background:#071a2c;border:1px solid #071a2c;
  font-size:.8rem;font-weight:800;text-decoration:none;border-radius:4px;
}
.nav:has(.residentialPageContext) .menu {
  display:none;margin-left:auto;flex:0 0 44px;
  width:44px;height:44px;border:1px solid #dfe4e7;
  background:#fff;border-radius:4px;font-size:1.15rem;line-height:1;
}

@media(max-width:1120px) {
  .nav:has(.residentialPageContext) .links {display:none;}
  .nav:has(.residentialPageContext) .phone {display:none;}
  .nav:has(.residentialPageContext) .nav-actions {margin-left:auto;}
  .nav:has(.residentialPageContext) .menu {display:block;}
}
@media(max-width:900px) {
  .repairHero::before,.residentialHero::before,.opHero::before,.estimateHero::before {
    background-size:244px 309px;opacity:.67;
  }
  .hero-inner::before {background-size:244px 309px;opacity:.60;}
  .nav:has(.residentialPageContext) {min-height:76px;height:76px;gap:10px;}
}
@media(max-width:650px) {
  .repairHero::before,.residentialHero::before,.opHero::before,.estimateHero::before {
    background-size:195px 247px;background-position:8px 8px;opacity:.77;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.74) 55%,#000 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.74) 55%,#000 100%);
  }
  .estimateHero::before {opacity:.47;}
  .hero-inner::before {
    background-size:195px 247px;background-position:8px 8px;opacity:.75;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.48),#000);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.48),#000);
  }
  .pageContext.repairPageContext,.pageContext.residentialPageContext {
    min-height:54px;padding:6px 9px;gap:3px;
  }
  .pageContext .pageContextEyebrow {display:block;font-size:.50rem;}
  .pageContext strong {font-size:.66rem;line-height:1.16;}
  .nav:has(.residentialPageContext) {min-height:70px;height:70px;gap:10px;}
}
@media(max-width:375px) {
  .pageContext.repairPageContext,.pageContext.residentialPageContext {padding:6px 7px;}
  .pageContext strong {font-size:.62rem;}
  .nav:has(.residentialPageContext) {gap:7px;}
  .nav:has(.residentialPageContext) .siteBrand {width:137px;flex:0 0 137px;}
  .nav:has(.residentialPageContext) .nav-actions {gap:5px;}
  .nav:has(.residentialPageContext) .menu {width:40px;height:40px;flex-basis:40px;}
}
@media(max-width:350px) {
  .pageContext .pageContextEyebrow {display:none;}
  .nav:has(.residentialPageContext) .siteBrand {width:116px;flex-basis:116px;}
  .nav:has(.residentialPageContext) .menu {width:38px;height:38px;flex-basis:38px;}
}