
/* Unified FIELDLINE CAD design system across homepage and service pages. */
:root{--ink:#071c2a;--navy:#0b1928;--teal:#37d3ba;--text:#f5fbff;--muted:#c5d9e3}
html{scroll-behavior:smooth}body{background-color:#071d2b!important;color:var(--text)!important}
.site-header{position:relative!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;padding:18px max(5vw,22px)!important;background:rgba(7,23,36,.94)!important;border-bottom:1px solid rgba(205,240,250,.18)!important;overflow:visible!important}
.brand{font-weight:800!important;font-size:clamp(19px,2.1vw,25px)!important;letter-spacing:1.5px!important;color:#fff!important;text-decoration:none!important;white-space:nowrap}.brand span{color:var(--teal)}
.site-nav{display:flex!important;align-items:center!important;gap:clamp(12px,2vw,25px)!important;flex-wrap:wrap!important}.site-nav a,.site-nav summary{color:#e5f5fa!important;font-size:14px!important;font-weight:600!important;text-decoration:none!important;cursor:pointer!important;margin:0!important}.site-nav a:hover,.site-nav summary:hover{color:var(--teal)!important}.service-menu{position:relative}.service-menu summary{list-style:none}.service-menu summary::-webkit-details-marker{display:none}.menu-panel{position:absolute;top:calc(100% + 14px);left:-18px;min-width:235px;padding:9px;background:#0b2435;border:1px solid rgba(158,220,231,.32);border-radius:10px;box-shadow:0 14px 35px #0007;display:grid;gap:3px;z-index:150}.menu-panel a{padding:11px 12px!important;border-radius:6px}.menu-panel a:hover{background:#173e4d}.header-cta{background:var(--teal)!important;color:#082133!important;text-decoration:none!important;font-weight:800!important;padding:12px 17px!important;border-radius:6px!important;white-space:nowrap;font-size:13px}
.site-footer{background:#061824!important;color:#d6e6ed!important;padding:55px max(5vw,22px) 24px!important;border-top:1px solid rgba(195,233,241,.2)!important;position:relative!important;z-index:2!important}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.25fr;gap:45px;max-width:1240px;margin:0 auto 40px}.site-footer h3{font-size:14px;text-transform:uppercase;letter-spacing:1.4px;color:var(--teal);margin:0 0 16px}.site-footer p{font-size:15px;line-height:1.7;color:#c4d5df;max-width:350px}.site-footer a:not(.brand){display:block;color:#dceaf1!important;text-decoration:none!important;font-size:14px;margin:0 0 12px}.site-footer a:hover{color:var(--teal)!important}.footer-bottom{border-top:1px solid #ffffff26;padding-top:20px;max-width:1240px;margin:auto;color:#a7bfcc;font-size:12px;line-height:1.6}
/* The bottom of the homepage must stay navy, not white. */
#faq,#drafting-service-pages{background:transparent!important;color:#f4fbff!important}#faq p,#drafting-service-pages p{color:#d5e3ea!important}#faq .card,#drafting-service-pages .card{background:rgba(225,241,248,.13)!important;color:#f4fbff!important;border:1px solid rgba(235,250,255,.27)!important;backdrop-filter:blur(14px)}
/* Service pages use the same navy, softened survey-drawing backdrop as home. */
body.service-page{min-height:100vh;background:#071d2b url('/survey-drawing-background.jpg') center center / cover fixed no-repeat!important}body.service-page:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,19,30,.86),rgba(5,19,30,.70) 70%,rgba(5,19,30,.62));z-index:0}body.service-page>*{position:relative;z-index:1}body.service-page main{max-width:1160px!important;margin:0 auto!important;padding:75px max(5vw,22px) 90px!important;color:#f4fbff!important;background:transparent!important}body.service-page h1{font-size:clamp(38px,5vw,65px)!important;line-height:1.1!important;color:#fff!important}body.service-page h2{color:#fff!important;margin-top:55px!important}body.service-page p,body.service-page .intro{color:#dcebf1!important;line-height:1.75!important}body.service-page .eyebrow{color:var(--teal)!important}body.service-page .cards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(235px,1fr))!important;gap:20px!important}body.service-page .card,body.service-page .note{background:rgba(225,241,248,.12)!important;border:1px solid rgba(235,250,255,.25)!important;border-radius:10px!important;color:#f5fbff!important;backdrop-filter:blur(14px);box-shadow:0 12px 30px #0002}body.service-page .card p,body.service-page .note{color:#e2edf2!important}body.service-page main a{color:var(--teal)}body.service-page .button{background:var(--teal)!important;color:#092334!important;border-radius:6px!important;padding:15px 23px!important;font-weight:700!important;display:inline-block!important;text-decoration:none!important}body.service-page main nav{display:flex;gap:12px;flex-wrap:wrap}body.service-page main nav a{border:1px solid #8cbac25c;padding:12px;border-radius:6px;background:#092b3ab5;text-decoration:none}
@media(max-width:850px){.site-header{flex-wrap:wrap!important}.site-nav{order:3;width:100%;justify-content:flex-start}.header-cta{margin-left:auto}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:550px){.site-nav{gap:13px!important}.site-nav a,.site-nav summary{font-size:12px!important}.header-cta{font-size:11px;padding:10px!important}.footer-grid{grid-template-columns:1fr}.menu-panel{left:0;min-width:220px}.site-header{padding:15px 18px!important}}



/* FIELDLINE CAD unified layout system: all pages share the same components. */
:root {
  --site-gutter:clamp(22px,5vw,76px);
  --section-space:72px;
  --card-gap:24px;
  --card-padding:28px;
  --heading-space:24px;
  --header-bg:rgba(7,23,36,.96);
  --menu-bg:#0b2435;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#0a2635!important}
/* Preserve the exact opaque header treatment from the homepage. */
.site-header,body.service-page .site-header {
  background:var(--header-bg)!important;
  padding:18px var(--site-gutter)!important;
  min-height:76px!important;
  border-bottom:1px solid rgba(205,240,250,.18)!important;
  position:relative!important;
  z-index:1000!important;
  isolation:isolate;
}
/* Solid dropdown on every page, including when opened via keyboard/touch. */
.site-header .service-menu{position:relative!important;z-index:1001!important}
.site-header .service-menu .menu-panel,
body.service-page .site-header .service-menu .menu-panel {
  background:var(--menu-bg)!important;
  background-color:#0b2435!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 16px 36px rgba(0,0,0,.55)!important;
  border:1px solid rgba(158,220,231,.32)!important;
  z-index:1002!important;
}
.site-header .menu-panel a {background:transparent!important;opacity:1!important}
.site-header .menu-panel a:hover,.site-header .menu-panel a:focus-visible{background:#173e4d!important}
/* One shared vertical rhythm for the homepage and all service pages. */
body:not(.service-page)>section {
  padding-top:var(--section-space)!important;
  padding-bottom:var(--section-space)!important;
}
body:not(.service-page)>section.hero {
  padding-top:88px!important;
  padding-bottom:88px!important;
}
body:not(.service-page)>section#drafting-service-pages{padding-top:var(--section-space)!important;padding-bottom:var(--section-space)!important}
body:not(.service-page) .grid,
body:not(.service-page) .cards {gap:var(--card-gap)!important;margin-top:var(--heading-space)!important;margin-bottom:var(--heading-space)!important}
body:not(.service-page) .card {padding:var(--card-padding)!important}
body:not(.service-page)>section h2 {margin-top:0!important;margin-bottom:var(--heading-space)!important}
body.service-page main {
  max-width:1160px!important;
  padding:var(--section-space) var(--site-gutter)!important;
  margin:0 auto!important;
  background:transparent!important;
}
body.service-page main h1{margin-top:12px!important;margin-bottom:var(--heading-space)!important}
body.service-page main h2{margin-top:var(--section-space)!important;margin-bottom:var(--heading-space)!important}
body.service-page main .cards{gap:var(--card-gap)!important;margin-top:var(--heading-space)!important;margin-bottom:var(--heading-space)!important}
body.service-page main .card{padding:var(--card-padding)!important}
body.service-page main .card h3{margin-top:0!important;margin-bottom:12px!important}
body.service-page main .note{margin-top:var(--heading-space)!important;padding:var(--card-padding)!important}
body.service-page main .button{margin-top:var(--heading-space)!important;margin-bottom:var(--heading-space)!important}
body.service-page main nav{margin-top:var(--heading-space)!important;margin-bottom:0!important;gap:var(--card-gap)!important}
.site-footer,body.service-page .site-footer {
  background:#061824!important;
  padding:56px var(--site-gutter) 24px!important;
  border-top:1px solid rgba(195,233,241,.2)!important;
  position:relative!important;
  z-index:10!important;
}
.footer-grid{gap:var(--card-gap)!important;margin-bottom:40px!important}
/* Keep the service-page decorative background below real content, header and menu. */
body.service-page{background:#0a2635!important;position:relative!important;isolation:isolate!important}
body.service-page::before{
  content:''!important;position:fixed!important;inset:-32px!important;
  background:url('/survey-drawing-background.jpg') center center / cover no-repeat!important;
  filter:blur(10px) brightness(1.10)!important;
  transform:scale(1.035)!important;
  opacity:1!important;pointer-events:none!important;z-index:-2!important;
}
body.service-page::after{
  content:''!important;position:fixed!important;inset:0!important;
  background:linear-gradient(90deg,rgba(5,19,30,.77),rgba(5,19,30,.55) 65%,rgba(5,19,30,.40))!important;
  pointer-events:none!important;z-index:-1!important;
}
body.service-page>*{position:relative!important;z-index:1!important}
body.service-page>.site-header{z-index:1000!important}
body.service-page>.site-footer{z-index:10!important}
@media(max-width:850px){:root{--section-space:56px;--card-gap:20px;--card-padding:24px}}
@media(max-width:550px){
  :root{--section-space:44px;--card-gap:18px;--card-padding:22px}
  .site-header,body.service-page .site-header{padding:15px 18px!important}
  body:not(.service-page)>section.hero{padding-top:60px!important;padding-bottom:60px!important}
  body.service-page::before{background-position:57% center!important}
  .site-footer,body.service-page .site-footer{padding-top:44px!important}
}

/* FINAL UNIFIED PRESENTATION: service-page backdrop is the reference on every page. */
:root{--unified-header-height:76px;--unified-content-width:1240px;--unified-font:Arial,Helvetica,sans-serif}
html{font-size:16px!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
body,body.service-page{margin:0!important;font-family:var(--unified-font)!important;font-size:16px!important;line-height:1.6!important;background:#0a2635!important;position:relative!important;isolation:isolate!important}
body::before,body.service-page::before{
 content:""!important;position:fixed!important;inset:-32px!important;top:-32px!important;left:-32px!important;right:-32px!important;bottom:-32px!important;
 width:auto!important;height:auto!important;background-image:url('/survey-drawing-background.jpg')!important;
 background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;
 background-attachment:scroll!important;filter:blur(10px) brightness(1.10)!important;
 opacity:1!important;transform:scale(1.035)!important;will-change:auto!important;pointer-events:none!important;z-index:-2!important
}
body::after,body.service-page::after{
 content:""!important;position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
 width:auto!important;height:auto!important;background:linear-gradient(90deg,rgba(5,19,30,.77),rgba(5,19,30,.55) 65%,rgba(5,19,30,.40))!important;
 opacity:1!important;pointer-events:none!important;z-index:-1!important
}
body > .site-header,body.service-page > .site-header{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 min-height:var(--unified-header-height)!important;height:auto!important;
 padding:18px var(--site-gutter)!important;gap:20px!important;
 background:rgba(7,23,36,.96)!important;border-bottom:1px solid rgba(205,240,250,.18)!important;
 box-shadow:none!important;position:relative!important;z-index:1000!important;isolation:isolate!important;
 font-size:16px!important;line-height:1.4!important
}
.site-header .brand{font-size:clamp(19px,2.1vw,25px)!important;line-height:1.3!important;font-weight:800!important}
.site-header .site-nav{font-size:14px!important;line-height:1.4!important}
.site-header .site-nav a,.site-header .site-nav summary{font-size:14px!important;line-height:1.4!important}
.site-header .header-cta{font-size:13px!important;line-height:1.4!important;padding:12px 17px!important}
.site-header .service-menu .menu-panel{background:#0b2435!important;opacity:1!important;z-index:1002!important}
body > .site-footer,body.service-page > .site-footer{background:#061824!important;position:relative!important;z-index:10!important}
body > .site-header,body > main,body > section,body > .site-footer{position:relative!important}
body > section{z-index:1!important}
body > main{z-index:1!important}
/* Disable extra section-level background layers; only the body layers paint the backdrop. */
body:not(.service-page) .hero::before,body:not(.service-page) .hero::after,
body:not(.service-page) #services::before,body:not(.service-page) #services::after,
body:not(.service-page) #process::before,body:not(.service-page) #process::after,
body:not(.service-page) #contact::before,body:not(.service-page) #contact::after{content:none!important;background:none!important}
@media(max-width:850px){body > .site-header,body.service-page > .site-header{flex-wrap:wrap!important}}
@media(max-width:550px){body > .site-header,body.service-page > .site-header{padding:15px 18px!important;gap:12px!important}
.site-header .site-nav a,.site-header .site-nav summary{font-size:12px!important}
.site-header .header-cta{font-size:11px!important;padding:10px!important}
body::before,body.service-page::before{background-position:57% center!important}}
