/* Professional Systems — brand-faithful recreation
   Brand colors pulled from live site:
   Navy  #282979 | Green #9ccc69 | Grey text | Light bg
   Fonts: Be Vietnam Pro (headings), Manrope (body) */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #282979;
  --navy-dark: #1c1d5c;
  --green: #9ccc69;
  --green-dark: #7cb342;
  --ink: #2c2d3a;
  --grey: #585966;
  --light: #f4f5f9;
  --line: #e7e8f0;
  --white: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 12px rgba(28, 29, 74, 0.06);
  --shadow: 0 14px 34px rgba(40, 41, 121, 0.10);
  --shadow-lg: 0 26px 60px rgba(40, 41, 121, 0.16);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--navy);
  line-height: 1.14;
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.06; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1em; color: var(--grey); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: none; }

img { max-width: 100%; display: block; }

[id] { scroll-margin-top: 110px; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Be Vietnam Pro', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  font-size: .76rem;
  color: var(--green-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--green);
  display: inline-block;
}
.center .eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: .93rem;
  letter-spacing: .01em;
  padding: 15px 34px;
  border-radius: 40px;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-green { background: var(--green); color: var(--navy); box-shadow: 0 10px 24px rgba(124, 179, 66, .30); }
.btn-green:hover { background: var(--green-dark); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 10px 24px rgba(40, 41, 121, .25); }
.btn-navy:hover { background: var(--navy-dark); color: #fff; }
.btn-outline { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline:hover { background: #fff; color: var(--navy); }
.btn-outline-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--navy-dark);
  color: #fff;
  font-size: .87rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  gap: 16px;
}
.topbar a { color: #fff; font-weight: 600; }
.topbar .book-now {
  background: var(--green);
  color: var(--navy);
  padding: 5px 18px;
  border-radius: 30px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
}
.topbar .book-now:hover { background: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}
.nav .logo img { height: 50px; width: auto; }
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  align-items: center;
}
.menu > li { position: relative; }
.menu > li > a {
  display: block;
  padding: 10px 14px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink);
  border-radius: 8px;
}
.menu > li > a:hover { color: var(--navy); background: var(--light); }
.menu > li.has-sub > a::after { content: ' ▾'; font-size: .7em; color: var(--green-dark); }
/* Invisible hover bridge across the gap to the submenu so it doesn't close
   when the cursor moves down from the menu item. */
.menu > li.has-sub::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
}
.menu > li.has-sub:hover .submenu { opacity: 1; visibility: visible; }
.submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
}
.submenu a:hover { background: var(--light); color: var(--navy); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg, rgba(20,21,66,.95) 0%, rgba(28,29,92,.78) 48%, rgba(28,29,92,.42) 100%),
    linear-gradient(180deg, rgba(20,21,66,.15), rgba(20,21,66,.35));
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: 104px;
  padding-bottom: 104px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 { color: #fff; max-width: 780px; }
.hero .lead { color: rgba(255,255,255,.9); font-size: 1.16rem; max-width: 600px; margin-top: .4rem; }
.hero .eyebrow { color: #b6e08a; }
.hero .eyebrow::before { background: var(--green); }
.hero .btn { margin-top: 1.8rem; align-self: flex-start; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
.hero-grid .btn { margin-top: 1.8rem; }

/* Quote / estimate card */
.estimate-card {
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  padding: 34px;
  box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--green);
}
.estimate-card h3 { color: var(--navy); margin-bottom: 1.1rem; font-size: 1.5rem; }
.estimate-card label { display:block; font-size:.78rem; font-weight:600; color:var(--grey); margin-bottom:5px; font-family:'Be Vietnam Pro',sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.estimate-card input, .estimate-card select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  margin-bottom: 15px;
  font-family: inherit;
  font-size: .95rem;
  background: #fafbfc;
}
.estimate-card input:focus, .estimate-card select:focus { outline: none; border-color: var(--green); background: #fff; }
.estimate-card .btn { width: 100%; margin-top: 4px; }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.section-light { background: var(--light); }
.section-navy { background: var(--navy); color: #fff; position: relative; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p { color: rgba(255,255,255,.82); }
.section-navy .eyebrow { color: #b6e08a; }

.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto 60px; }
.section-head p { font-size: 1.06rem; }
.section-head.left { margin-left: 0; text-align: left; }

/* Split (image + text) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 18px 28px;
  margin-top: 1.6rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  box-shadow: var(--shadow);
}
.stat-badge b { font-size: 2.6rem; line-height: 1; color: var(--green); }
.stat-badge span { font-weight: 600; font-size: .98rem; max-width: 130px; }

/* Cards grid */
.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card .card-img { height: 200px; background-size: cover; background-position: center; }
.card img.card-img { object-fit: cover; width: 100%; }
.card .card-body { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .97rem; }
.card .btn { margin-top: 1.4rem; align-self: flex-start; }

/* Simple (text-only) card gets a top accent */
.card.plain { border-top: 3px solid var(--green); }

/* Category cards (home services) */
.cat-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.cat-card .cat-img { height:230px; background-size:cover; background-position:center; }
.cat-card .cat-body { padding:36px; display:flex; flex-direction:column; flex:1; }
.cat-card h3 { font-size:1.55rem; }
.cat-card .btn { align-self:flex-start; margin-top:auto; }

/* Featured service tiles (icon grid) */
.svc-tile { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:40px 30px; text-align:center; display:flex; flex-direction:column; }
.svc-tile h3 { margin-bottom:.5rem; }
.svc-tile p { font-size:.96rem; margin-bottom:1.6rem; }
.svc-tile .btn { margin-top:auto; align-self:center; }
.svc-icon { width:104px; height:104px; border-radius:50%; background:rgba(156,204,105,.20); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.svc-icon img { width:58px; height:58px; object-fit:contain; }

/* Trust band */
.trust-band { display:flex; align-items:center; gap:40px; background:var(--navy); color:#fff; border-radius:var(--radius); padding:40px 48px; box-shadow:var(--shadow); }
.trust-band .trust-logo { background:#fff; border-radius:14px; padding:20px 26px; flex-shrink:0; display:flex; align-items:center; }
.trust-band .trust-logo img { height:74px; width:auto; }
.trust-band .eyebrow { color:var(--green); }
.trust-band .eyebrow::before { background:var(--green); }
.trust-band h3 { color:#fff; margin-bottom:.4rem; font-size:1.5rem; }
.trust-band p { color:rgba(255,255,255,.82); margin:0; }
@media (max-width:720px){ .trust-band{ flex-direction:column; text-align:center; padding:34px 26px; } .trust-band .eyebrow{ justify-content:center; } }

/* Topbar hours */
.topbar-hours { color:rgba(255,255,255,.85); font-weight:600; }

/* Service category (big) */
.service-cat {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}
.service-cat::before { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(20,21,66,.96) 8%, rgba(28,29,92,.55) 55%, rgba(28,29,92,.12) 100%); }
.service-cat .inner { position: relative; z-index: 2; padding: 36px; }
.service-cat h3 { color: #fff; font-size: 1.6rem; }
.service-cat p { color: rgba(255,255,255,.9); }
.service-cat .btn { margin-top: 1.2rem; }

/* Feature list */
.feature-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 18px; }
.feature-list li { position: relative; padding-left: 44px; color: var(--grey); }
.feature-list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  background: var(--green); color: var(--navy);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
}
.feature-list b, .feature-list strong { color: var(--navy); font-family:'Be Vietnam Pro',sans-serif; }

/* Stat counters */
.counters { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; margin-top: 8px; }
.counters > div { padding: 20px 10px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.counters .num { font-family: 'Be Vietnam Pro', sans-serif; font-size: 3rem; font-weight: 800; color: var(--green); letter-spacing: -.02em; }
.counters .lbl { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: rgba(255,255,255,.8); }

/* CTA band */
.cta-band { background: var(--green); color: var(--navy); text-align: center; }
.cta-band .eyebrow { color: var(--navy); justify-content: center; }
.cta-band .eyebrow::before { background: var(--navy); }
.cta-band h2 { color: var(--navy); max-width: 900px; margin: 0 auto .8em; }

/* ---------- FAQ ---------- */
.faq-jump { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 52px; }
.faq-jump a {
  background: #fff; color: var(--navy); padding: 11px 24px; border-radius: 30px;
  border: 1.5px solid var(--line);
  font-family:'Be Vietnam Pro',sans-serif; font-weight:600; font-size:.9rem;
}
.faq-jump a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.faq-group { max-width: 840px; margin: 0 auto 60px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h2 { margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
.faq-group > h2::before { content:''; width: 6px; height: 30px; background: var(--green); border-radius: 4px; display:inline-block; }
details.faq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
details.faq[open] { border-color: var(--green); box-shadow: var(--shadow-sm); }
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 58px 20px 24px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  color: var(--navy);
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--green-dark); font-weight: 400; line-height: 1;
}
details.faq[open] summary::after { content: '–'; }
details.faq .answer { padding: 0 24px 24px; }
details.faq .answer p { margin: 0; }
.faq-more { text-align: center; margin-top: 28px; color: var(--grey); }

/* ---------- Core values (careers) ---------- */
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.value {
  background: #fff; border-radius: var(--radius); padding: 34px 30px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  border-top: 3px solid var(--green); text-align: center;
}
.value .vnum { font-family:'Be Vietnam Pro',sans-serif; font-weight:800; color:var(--green); font-size:1.6rem; letter-spacing: .02em; }
.value h3 { margin: 6px 0 0; }
.value p { margin-top: .5rem; font-size: .96rem; }

/* Icon tile row */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gallery-grid .tile {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  padding: 34px 22px; text-align: center; border-top: 3px solid var(--green);
}
.gallery-grid .tile img { width: auto; height: 84px; margin: 0 auto 16px; object-fit: contain; }
.gallery-grid .tile span {
  display: block; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700;
  color: var(--navy); font-size: 1rem;
}

/* HVAC alternating detail rows */
.detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 84px; }
.detail-row:last-child { margin-bottom: 0; }
.detail-row .detail-text h4 { color: var(--green-dark); font-family:'Be Vietnam Pro',sans-serif; margin-bottom: 1rem; }
.detail-row .detail-img { border-radius: var(--radius); min-height: 340px; background-size: cover; background-position: center; box-shadow: var(--shadow); }
.detail-row.rev .detail-text { order: 2; }
.detail-row.rev .detail-img { order: 1; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.site-footer::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,21,58,.97), rgba(20,21,58,.99)); }
.footer-inner { position: relative; z-index: 2; padding: 80px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; }
.site-footer h4 { color: #fff; text-transform: uppercase; letter-spacing:.08em; font-size:.92rem; margin-bottom: 20px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 11px; color: rgba(255,255,255,.7); font-size: .95rem; }
.site-footer a { color: rgba(255,255,255,.75); font-size: .95rem; }
.site-footer a:hover { color: var(--green); }
.footer-logo { background:#fff; padding:14px 16px; border-radius:12px; display:inline-block; margin-bottom:20px; }
.footer-logo img { height: 44px; }
.footer-brand p { color: rgba(255,255,255,.68); font-size:.95rem; }
.footer-bottom {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0;
  text-align: center;
  font-size: .84rem;
  color: rgba(255,255,255,.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .detail-row, .detail-row.rev .detail-text, .detail-row.rev .detail-img { grid-template-columns: 1fr; order: 0; }
  .split { gap: 40px; }
  .detail-row { gap: 36px; margin-bottom: 56px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .counters { grid-template-columns: repeat(2,1fr); }
  .values-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-block; }
  .menu {
    display: none;
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #fff; padding: 12px; gap: 0;
    box-shadow: var(--shadow-lg);
    max-height: 78vh; overflow-y: auto;
  }
  .menu.open { display: flex; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 8px 14px; min-width: auto;
  }
  .menu > li.has-sub > a::after { content: ''; }
  .menu > li.has-sub::before { display: none; }
}
@media (max-width: 620px) {
  section { padding: 60px 0; }
  .hero .container { padding-top: 72px; padding-bottom: 72px; }
  .grid-4, .grid-3, .grid-2, .counters, .values-grid, .footer-grid, .gallery-grid { grid-template-columns: 1fr; }
  .topbar .container { font-size: .76rem; }
  .section-head { margin-bottom: 40px; }
  .detail-row.rev .detail-text { order: 0; }
  .detail-row.rev .detail-img { order: 0; }
}

/* ============ Hero social-proof badge ============ */
.hero-badge { display:flex; align-items:center; gap:16px; margin-top:30px; max-width:430px; }
.hero-badge img { height:90px; width:auto; flex-shrink:0; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.hero-badge span { font-family:'Be Vietnam Pro', sans-serif; font-size:.9rem; line-height:1.35; color:rgba(255,255,255,.85); }
.hero-badge b { display:block; color:#fff; font-weight:700; font-size:1rem; margin-top:2px; }

/* ============ Services hover-accordion ============ */
.svc-accordion { display:flex; flex-direction:column; gap:6px; }
.svc-row { display:flex; gap:6px; height:400px; }
.svc-panel {
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  border-radius:12px; text-decoration:none; display:block; height:100%;
  box-shadow: inset 0 -60px 80px -30px rgba(0,0,0,.28);
  transition: flex-grow 550ms cubic-bezier(.2,.7,.2,1), box-shadow 400ms ease;
}
.svc-panel.navy { --type:#fff; --accent:var(--green); background:var(--navy); color:#fff; border-top:4px solid var(--green); }
.svc-panel.lime { --type:var(--navy); --accent:var(--navy); background:var(--green); color:var(--navy); border-top:4px solid var(--navy); }
.svc-panel:hover, .svc-panel:focus-within { flex-grow:3; box-shadow:0 24px 46px rgba(20,21,58,.30); }
.svc-panel:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

/* Photography slot — set a background-image on .svc-media and the dark scrim
   activates automatically; solid brand fills show while it's empty. */
.svc-media { position:absolute; inset:0; background-size:cover; background-position:center; }
.svc-scrim { position:absolute; inset:0; opacity:0; }
/* Brand-color wash over the photo (lowered opacity so the image reads through),
   stronger toward the bottom where the text sits. Lime needs heavier coverage
   to keep the navy type above 4.5:1. */
.svc-panel.navy .svc-scrim { background:linear-gradient(180deg, rgba(40,41,121,.50) 0%, rgba(40,41,121,.74) 55%, rgba(28,29,92,.90) 100%); }
.svc-panel.lime .svc-scrim { background:linear-gradient(180deg, rgba(156,204,105,.72) 0%, rgba(156,204,105,.87) 55%, rgba(140,190,80,.95) 100%); }
.svc-media[style*="url"] ~ .svc-scrim { opacity:1; }

/* Collapsed: icon above a vertical label, anchored near the bottom */
.svc-collapsed { position:absolute; left:0; right:0; bottom:26px; display:flex; flex-direction:column; align-items:center; gap:18px; transition:opacity 250ms ease; }
.svc-ic { color:var(--accent); display:inline-flex; }
.svc-ic svg { width:24px; height:24px; display:block; }
.svc-label { writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; font-family:'Be Vietnam Pro', sans-serif; font-weight:800; letter-spacing:.14em; font-size:.82rem; color:var(--type); white-space:nowrap; }

/* Expanded content, bottom-left */
.svc-expanded { position:absolute; inset:0; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; opacity:0; pointer-events:none; }
.svc-ic-top { position:absolute; top:28px; left:28px; color:var(--accent); opacity:0; transform:translateY(-6px) scale(1.3); transform-origin:left top; transition:opacity 300ms ease 150ms, transform 300ms ease 150ms; }
.svc-ic-top svg { width:32px; height:32px; }
.svc-expanded h3 { color:var(--type); margin:0 0 .45rem; font-size:1.5rem; }
.svc-expanded p { color:var(--type); opacity:.92; margin:0 0 1rem; max-width:40ch; font-size:1rem; }
.svc-more { font-family:'Be Vietnam Pro', sans-serif; font-weight:700; color:var(--accent); font-size:.95rem; }
.svc-expanded h3, .svc-expanded p, .svc-more { opacity:0; transform:translateY(10px); transition:opacity 300ms ease, transform 300ms ease; }

/* Reveal on hover OR keyboard focus (focus-within = keyboard parity) */
.svc-panel:hover .svc-collapsed, .svc-panel:focus-within .svc-collapsed { opacity:0; }
.svc-panel:hover .svc-expanded, .svc-panel:focus-within .svc-expanded { opacity:1; pointer-events:auto; }
.svc-panel:hover .svc-ic-top, .svc-panel:focus-within .svc-ic-top { opacity:1; transform:translateY(0) scale(1.3); }
.svc-panel:hover .svc-expanded h3, .svc-panel:focus-within .svc-expanded h3,
.svc-panel:hover .svc-expanded p,  .svc-panel:focus-within .svc-expanded p,
.svc-panel:hover .svc-more,        .svc-panel:focus-within .svc-more { opacity:1; transform:none; transition-delay:150ms; }

/* Static stacked fallback — small screens, touch (hover:none), reduced motion */
@media (max-width:900px), (hover:none), (prefers-reduced-motion:reduce) {
  .svc-accordion { gap:8px; }
  .svc-row { flex-direction:column; height:auto; gap:8px; }
  .svc-panel { flex:none !important; min-height:120px; box-shadow:none; transition:none; }
  .svc-collapsed { display:none; }
  .svc-expanded { position:relative; z-index:2; opacity:1; pointer-events:auto; padding:22px 26px 22px 76px; justify-content:center; }
  .svc-ic-top { position:absolute; top:50%; left:24px; transform:translateY(-50%) scale(1.15); opacity:1; transition:none; }
  .svc-expanded h3 { font-size:1.2rem; margin-bottom:.25rem; }
  .svc-expanded p { margin-bottom:.4rem; max-width:64ch; }
  .svc-expanded h3, .svc-expanded p, .svc-more { opacity:1; transform:none; transition:none; }
}