/* Upstate Mobile Imaging */
:root {
  --navy:    #1C3557;
  --navy2:   #142844;
  --teal:    #14B8A6;
  --teal2:   #0F9488;
  --grey:    #F5F7F9;
  --line:    #E3E8ED;
  --text:    #1A1A1A;
  --muted:   #5A5A5A;
  --white:   #ffffff;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 1.02rem;
}
h1,h2,h3,h4 { font-family: 'Montserrat', sans-serif; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 5%; }

/* ── top bar ── */
.topbar {
  background: var(--navy2);
  color: rgba(255,255,255,0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:40px; flex-wrap:wrap; }
.topbar-left { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.topbar a:hover { color: var(--teal); }
.topbar strong { color: var(--teal); font-weight:700; }
@media (max-width:700px){ .topbar-right{ display:none; } .topbar .wrap{ min-height:36px; } .topbar-left{ gap:16px; font-size:0.74rem; } }

/* ── nav ── */
nav.main {
  background: var(--white);
  border-bottom: 3px solid var(--teal);
  position: sticky; top:0; z-index:100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
nav.main .wrap { display:flex; align-items:center; justify-content:space-between; height:92px; gap:20px; }
.logo img { height:60px; width:auto; }
.navlinks { display:flex; align-items:center; gap:28px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.86rem; letter-spacing:0.03em; text-transform:uppercase; }
.navlinks > a { padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.navlinks > a:hover, .navlinks > a.on { border-color: var(--teal); color: var(--navy); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.82rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 28px; border-radius:4px; border:2px solid transparent; cursor:pointer;
  min-height:46px; text-align:center;
}
.btn svg { width:17px; height:17px; fill:currentColor; flex-shrink:0; }
.btn-teal   { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal2); }
.btn-navy   { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy2); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover { background:var(--navy); color:#fff; }
.btn-white  { border-color:#fff; color:#fff; }
.btn-white:hover { background:#fff; color:var(--navy); }
.navlinks .btn { padding:12px 20px; }

.burger { display:none; background:none; border:0; cursor:pointer; padding:10px; }
.burger span { display:block; width:26px; height:3px; background:var(--navy); margin:5px 0; border-radius:2px; }
@media (max-width:1050px){
  .burger { display:block; }
  .navlinks {
    display:none; position:absolute; top:92px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:6px 5% 22px;
    border-bottom:3px solid var(--teal); box-shadow:0 12px 20px rgba(0,0,0,0.1);
  }
  .navlinks.open { display:flex; }
  .navlinks > a { padding:15px 2px; border-bottom:1px solid var(--line); }
  .navlinks .btn { margin-top:14px; }
  .logo img { height:52px; }
  nav.main .wrap { height:80px; }
  .navlinks { top:80px; }
}

/* ── hero ── */
.hero { position:relative; overflow:hidden; background:var(--navy2); }
.hero-bg { position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:right center; opacity:0.92; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,40,68,0.97) 0%, rgba(20,40,68,0.91) 34%, rgba(20,40,68,0.62) 58%, rgba(20,40,68,0.14) 100%);
}
.hero .wrap { position:relative; z-index:2; padding-top:74px; padding-bottom:74px; max-width:1200px; }
.hero-kicker { font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1.5rem,2.6vw,2.4rem); color:#fff; text-transform:uppercase; letter-spacing:-0.01em; line-height:1.1; }
.hero-headline { font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(2.2rem,4.6vw,4.4rem); color:var(--teal); text-transform:uppercase; letter-spacing:-0.03em; line-height:1.0; margin:6px 0 40px; }
.hero-points { display:flex; flex-direction:column; gap:26px; margin-bottom:40px; max-width:900px; }
.hero-point { display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.22); }
.hero-points .hero-point:last-child { border-bottom:none; padding-bottom:0; }
.hero-point strong { font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.25rem,1.9vw,1.8rem); color:var(--teal); text-transform:uppercase; letter-spacing:-0.02em; line-height:1.1; }
.hero-point .lead { display:block; color:#fff; font-weight:600; font-size:clamp(1.05rem,1.4vw,1.32rem); }
.hero-point .sup { display:block; color:rgba(255,255,255,0.82); font-size:0.98rem; margin-top:5px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-actions .btn { padding:17px 32px; font-size:0.88rem; }
.hero-trust { margin-top:34px; color:#fff; font-weight:600; font-size:0.98rem; }
@media (max-width:900px){
  .hero-bg { background-size:cover; background-position:center top; opacity:0.3; }
  .hero::before { background:linear-gradient(180deg, rgba(20,40,68,0.94), rgba(20,40,68,0.88) 60%, rgba(20,40,68,0.8)); }
  .hero .wrap { padding-top:48px; padding-bottom:52px; }
  .hero-point { grid-template-columns:1fr; gap:8px; }
  .hero-actions .btn { width:100%; }
}

/* ── page banner (interior) ── */
.banner { background:var(--navy2); position:relative; overflow:hidden; }
.banner-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.28; }
.banner .wrap { position:relative; z-index:2; padding:56px 5%; }
.banner h1 { color:#fff; font-size:clamp(1.9rem,3.6vw,3rem); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; }
.banner h1 span { color:var(--teal); }
.banner p { color:rgba(255,255,255,0.88); max-width:64ch; margin-top:14px; font-size:1.08rem; }

/* ── sections ── */
.sec { padding:76px 0; }
.sec-grey { background:var(--grey); }
.sec-navy { background:var(--navy); color:#fff; }
.sec-navy p { color:rgba(255,255,255,0.87); }
.sec h2 { font-size:clamp(1.6rem,2.9vw,2.35rem); font-weight:800; color:var(--navy); margin-bottom:20px; }
.sec-navy h2 { color:#fff; }
.sec h2 .accent { color:var(--teal); }
.sec p { max-width:78ch; margin-bottom:18px; color:var(--muted); }
.sec-navy p { color:rgba(255,255,255,0.87); }
.sec p strong { color:var(--navy); }
.sec-navy p strong { color:var(--teal); }
.center { text-align:center; }
.center p { margin-left:auto; margin-right:auto; }
@media (max-width:820px){ .sec { padding:54px 0; } }

/* two-column intro with photo */
.split { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:stretch; }
.split img { width:100%; border-radius:6px; }
@media (max-width:900px){ .split { grid-template-columns:1fr; gap:30px; } }

/* ── services: icon + heading + prose, NO boxes ── */
.svcs { display:grid; grid-template-columns:repeat(3,1fr); gap:52px; margin-top:44px; }
@media (max-width:900px){ .svcs { grid-template-columns:1fr; gap:42px; } }
.svc { text-align:center; }
.svc .ico { width:74px; height:74px; margin:0 auto 20px; color:var(--teal); }
.svc .ico svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.6; }
.svc h3 { font-size:1.32rem; font-weight:700; color:var(--navy); margin-bottom:12px; }
.svc h3 a:hover { color:var(--teal); }
.svc p { color:var(--muted); margin-bottom:16px; }
.svc .more { font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal); }
.svc .more:hover { color:var(--teal2); }

/* ── plain checklists ── */
.list { list-style:none; margin:22px 0; display:grid; gap:13px; max-width:74ch; }
.list li { padding-left:30px; position:relative; color:var(--muted); }
.sec-navy .list li { color:rgba(255,255,255,0.88); }
.list li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--teal); font-weight:700; }
.list li strong { color:var(--navy); }
.sec-navy .list li strong { color:#fff; }

/* ── who we serve ── */
.who { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:42px; }
@media (max-width:900px){ .who { grid-template-columns:1fr; } }
.who-item img { width:100%; height:220px; object-fit:cover; border-radius:6px; }
.who-item h3 { font-size:1.15rem; font-weight:700; color:var(--navy); margin:16px 0 8px; }
.who-item p { font-size:0.97rem; }

/* ── service area list (plain columns, no boxes) ── */
.areas { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:36px; }
@media (max-width:900px){ .areas { grid-template-columns:repeat(2,1fr); gap:26px; } }
@media (max-width:520px){ .areas { grid-template-columns:1fr; } }
.area h3 { font-size:1.06rem; font-weight:700; color:var(--navy); padding-bottom:9px; margin-bottom:12px; border-bottom:2px solid var(--teal); }
.area ul { list-style:none; display:grid; gap:6px; }
.area li { color:var(--muted); font-size:0.96rem; }

/* ── credentials strip ── */
.creds { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; margin-top:36px; }
@media (max-width:900px){ .creds { grid-template-columns:1fr; gap:28px; } }
.cred h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:9px; }
.sec-navy .cred h3 { color:var(--teal); }
.cred p { font-size:0.97rem; margin:0; }

/* ── CTA band ── */
.cta { background:var(--navy); color:#fff; }
.cta .wrap { padding:60px 5%; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta h2 { color:#fff; font-size:clamp(1.4rem,2.5vw,2rem); font-weight:800; margin:0; }
.cta p { color:rgba(255,255,255,0.82); margin:8px 0 0; max-width:52ch; }
.cta-btns { display:flex; gap:13px; flex-wrap:wrap; }

/* ── recruiting ── */
.recruit { background:var(--grey); border-left:5px solid var(--teal); padding:34px 34px; margin-top:44px; }
.recruit h3 { font-size:1.22rem; color:var(--navy); font-weight:700; margin-bottom:10px; }
.recruit p { margin-bottom:18px; }

/* ── form ── */
.formwrap { display:grid; grid-template-columns:1.25fr 0.75fr; gap:48px; align-items:start; }
@media (max-width:900px){ .formwrap { grid-template-columns:1fr; gap:34px; } }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fgrid .full { grid-column:1/-1; }
@media (max-width:640px){ .fgrid { grid-template-columns:1fr; } }
label { display:block; font-family:'Montserrat',sans-serif; font-weight:600; font-size:0.84rem; margin-bottom:6px; color:var(--navy); }
input,select,textarea { width:100%; font:inherit; padding:13px 14px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--text); min-height:48px; }
textarea { min-height:140px; resize:vertical; }
input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible { outline:3px solid rgba(20,184,166,0.5); outline-offset:1px; }
.fnote { font-size:0.87rem; color:var(--muted); margin-top:14px; }
.fstatus { margin-top:16px; font-weight:600; display:none; }
.fstatus.ok { display:block; color:#0F7A3D; }
.fstatus.err { display:block; color:#B3261E; }
.sidebox { border-left:4px solid var(--teal); padding:6px 0 6px 22px; margin-bottom:34px; }
.sidebox h3 { font-family:'Montserrat',sans-serif; font-size:0.82rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; }
.sidebox p { font-size:1.34rem; font-weight:700; color:var(--navy); margin:0; line-height:1.35; }
.sidebox p a:hover { color:var(--teal); }
.sidebox small { display:block; color:var(--muted); font-weight:400; font-size:0.93rem; margin-top:5px; }

/* ── footer ── */
footer { background:var(--navy2); color:rgba(255,255,255,0.78); font-size:0.96rem; }
footer .wrap { padding:54px 5% 28px; }
.fgrid3 { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; }
@media (max-width:820px){ .fgrid3 { grid-template-columns:1fr; gap:30px; } }
footer .flogo img { height:70px; margin-bottom:18px; }
footer h4 { font-family:'Montserrat',sans-serif; font-size:0.84rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--teal); margin-bottom:15px; font-weight:700; }
footer ul { list-style:none; display:grid; gap:9px; }
footer a:hover { color:var(--teal); }
.fbase { border-top:1px solid rgba(255,255,255,0.13); margin-top:42px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:0.85rem; color:rgba(255,255,255,0.5); }

/* ── photo banner ────────────────────────────────────────────────────────
   The default banner sits at 0.28 opacity, which turns a photograph to mud.
   A photo needs to be visible, so it runs brighter with a navy gradient
   laid over it — heaviest on the left, where the heading sits — so white
   text stays readable without hiding the skyline.
   ---------------------------------------------------------------------- */
.banner-bg.photo {
  opacity: 0.72;
  /* the vertical slice of the photo you see. lower % = more sky,
     higher % = more trees. 32% frames the towers and the Capitol. */
  background-position: center 32%;
}
.banner.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(20, 40, 68, 0.94) 0%,
    rgba(20, 40, 68, 0.80) 34%,
    rgba(20, 40, 68, 0.42) 68%,
    rgba(20, 40, 68, 0.22) 100%
  );
}
.banner.has-photo .wrap { position: relative; z-index: 2; }

/* Images in a two-column split must scale with their width. Without this the
   height attribute on the <img> wins and the picture renders at that literal
   pixel height, stretched. */
.split img { height: auto; display: block; }

/* Plain bullets instead of the teal checkmarks, for lists that are simply
   enumerating things rather than claiming them. */
.list.bullets { list-style: disc; padding-left: 1.15em; }
.list.bullets li { padding-left: 0; }
.list.bullets li::before { content: none; }
.list.bullets li::marker { color: var(--teal); }

/* ── call-to-action in the page banner ───────────────────────────────────
   A tel: link, so it dials on a phone, opens FaceTime on a Mac, and
   prompts on Windows. Sits beside the heading on desktop, full width
   underneath it on a phone.
   ---------------------------------------------------------------------- */
.banner .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}
.banner-text { flex: 1 1 440px; min-width: 0; }

.banner-cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 30px;
  border-radius: 10px;
  background: rgba(10, 26, 46, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1.5px solid rgba(20, 184, 166, 0.55);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.banner-cta:hover,
.banner-cta:focus-visible {
  background: rgba(10, 26, 46, 0.72);
  border-color: var(--teal);
  transform: translateY(-2px);
}

.banner-cta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
}
.banner-cta-top svg { width: 15px; height: 15px; fill: var(--teal); flex-shrink: 0; }
.banner-cta-number {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .banner .wrap { gap: 22px; }
  .banner-cta { width: 100%; align-items: center; padding: 18px 20px; }
}

/* ── homebound panel ─────────────────────────────────────────────────────
   Deliberately unlike the sideboxes and unlike the navy CTA: a tinted,
   rounded card with an icon, so a second audience reads as a second thing
   rather than another line of contact details.
   ---------------------------------------------------------------------- */
.homecall {
  margin-top: 16px;
  padding: 28px 28px 30px;
  border: 1px solid rgba(20, 184, 166, 0.38);
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.06);
}
.homecall-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--teal);
  margin-bottom: 16px;
}
.homecall-icon svg { width: 24px; height: 24px; fill: #fff; }
.homecall h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.homecall p { color: var(--muted); margin: 0; font-size: 1.04rem; line-height: 1.68; }



/* Photo fills its column to the same height as the text beside it. Without
   this the image keeps its own 16:9 shape and floats short of the text,
   leaving dead space above and below. object-fit keeps it undistorted —
   it crops rather than stretches. */
.split img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-height: 300px;
}
@media (max-width: 900px) {
  /* stacked on narrow screens, so let it find its natural height again */
  .split img { height: auto; min-height: 0; }
}

/* On a phone the green Call Now button in the header is enough, so the
   banner call box is hidden on the service pages. Kept on Contact, where
   calling is the point of the page. Desktop is unaffected — the box shows
   at every width above 768px. */
@media (max-width: 768px) {
  .banner-cta.hide-sm { display: none; }
}