/* ==========================================================================
   Highmark — Internal page components (v2)
   Loaded after main.css + home.css on every interior page.
   ========================================================================== */

/* ---------- Sticky sidebar fix ----------
   main.css makes EVERY .sidebar-card sticky at the same offset, so two cards
   pin to the same spot and visually merge while scrolling. The whole sidebar
   sticks as one unit instead. */
.sidebar-card { position: static !important; top: auto !important; }

/* ---------- Contact page form ----------
   Scoped styles for the /contact/ request form (.cf-*). Extends the
   existing .btn/token system, no new design language. */
.cf-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .cf-grid.two { grid-template-columns: 1fr 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 0.4rem; }
.cf-field label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text); }
.cf-field .req { color: var(--color-accent); }
.cf-field input, .cf-field select, .cf-field textarea {
  font: inherit; font-size: var(--fs-sm); color: var(--color-text);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem; background: var(--color-bg); width: 100%;
}
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent);
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field input[type="file"] { border-style: dashed; padding: 1.1rem 0.9rem; background: var(--color-bg-alt); }
.findus-block { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.findus-block h3 { margin-bottom: var(--space-2); }
.findus-block p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 0.5rem; }
@media (min-width: 980px) {
  .sidebar { position: sticky; top: 104px; align-self: start; }
}

/* ---------- Page hero ---------- */
.phero {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  background: var(--hm-steel-900);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
}
.phero-media { position: absolute; inset: 0; z-index: -2; }
.phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(13,14,16,0.95) 0%, rgba(13,14,16,0.82) 45%, rgba(13,14,16,0.42) 78%, rgba(13,14,16,0.62) 100%),
    linear-gradient(0deg, rgba(13,14,16,0.85) 0%, transparent 55%);
}
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 78% 25%, black, transparent 72%);
}
.phero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: end; }
@media (min-width: 1000px) { .phero-grid { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-7); } }
.phero h1 {
  font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -0.03em;
  margin-block: var(--space-3) var(--space-4); max-width: 18ch; text-wrap: balance;
}
.phero .lead { color: rgba(255,255,255,0.82); max-width: 58ch; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.phero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

.phero-facts { display: grid; gap: 0.75rem; }
.phero-fact {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: rgba(13,14,16,0.72); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px) saturate(120%);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.phero-fact:hover { background: rgba(13,14,16,0.85); border-color: rgba(226,35,26,0.5); }
.phero-fact svg { flex: none; color: var(--color-accent); margin-top: 2px; }
.phero-fact strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.phero-fact span { display: block; font-size: var(--fs-2xs); color: rgba(255,255,255,0.72); margin-top: 0.2rem; line-height: 1.45; }

/* ---------- Breadcrumbs v2 ---------- */
.crumbs { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.crumbs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 0.9rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.crumbs-row a { color: var(--color-text-muted); }
.crumbs-row a:hover { color: var(--color-accent); }
.crumbs-row .sep { color: var(--hm-gray-300); }
.crumbs-row [aria-current] { color: var(--color-text); font-weight: 700; }

/* ---------- Intro statement ---------- */
.intro { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 960px) { .intro { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; } }
.intro h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.08; text-transform: none; letter-spacing: -0.025em; text-wrap: balance; }
.intro p { color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1.68; }
.intro p + p { margin-top: var(--space-3); }

/* ---------- Capability cards ---------- */
.cap-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
.cap-card {
  background: var(--hm-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med), border-color var(--dur-fast);
}
.cap-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cap-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hm-charcoal); position: relative; }
.cap-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cap-card:hover .cap-media img { transform: scale(1.06); }
.cap-num {
  position: absolute; top: 0.7rem; left: 0.9rem; z-index: 1;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xs);
  color: #fff; letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.cap-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.cap-body h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
.cap-body p { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ---------- Spec strip ---------- */
.spec-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.spec-item { background: var(--hm-white); padding: var(--space-4); }
.spec-item .sn { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); color: var(--color-accent); line-height: 1; display: block; }
.spec-item h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.7rem; }
.spec-item p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 0.35rem; }

/* ---------- Related services ---------- */
.rel-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 700px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rel-grid { grid-template-columns: repeat(4, 1fr); } }
.rel-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--hm-white);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.rel-card:hover { border-color: var(--color-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rel-card h3 { font-size: var(--fs-base); letter-spacing: -0.01em; }
.rel-card p { color: var(--color-text-muted); font-size: var(--fs-sm); flex: 1; }
.rel-card span.go { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); }

/* ---------- FAQ layout on interior pages ---------- */
.faq-split { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) { .faq-split { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); } }

/* ---------- Grouped FAQ page ---------- */
.faq-groups { display: grid; gap: var(--space-7); }
.faq-group h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); text-transform: none; letter-spacing: -0.02em;
  margin-bottom: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent); display: inline-block;
}

/* ---------- Prose refinements ---------- */
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); text-transform: none; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--fs-lg); }
.prose p { font-size: var(--fs-base); line-height: 1.7; }

/* ---------- Imported Gutenberg page content ----------
   These rules give the editable blocks from the supplied HTML export the same
   measured spacing, cards and responsive behaviour as the hand-built theme
   components. */
.hmt-page-content > * + * { margin-top: var(--space-6); }
.hmt-page-content .wp-block-group { max-width: 100%; }
.hmt-page-content .wp-block-group > * + * { margin-top: var(--space-3); }
.hmt-page-content .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 760px) { .hmt-page-content .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hmt-page-content .wp-block-column > * + * { margin-top: var(--space-3); }
.hmt-page-content figure { margin: 0; }
.hmt-page-content .wp-block-image img { width: 100%; height: auto; border-radius: var(--radius-md); }
.hmt-page-content figcaption { margin-top: 0.55rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.hmt-page-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hmt-page-content .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .8rem 1.15rem; border-radius: 999px; background: var(--hm-charcoal); color: #fff; font-size: var(--fs-sm); font-weight: 700; }
.hmt-page-content .is-style-outline .wp-block-button__link { background: transparent; color: var(--hm-charcoal); border: 1.5px solid currentColor; }
.hmt-page-content .wp-block-button__link:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.hmt-page-content ul:not(.check), .hmt-page-content ol { margin: var(--space-3) 0; padding-left: 1.3rem; color: var(--color-text-muted); }
.hmt-page-content ul:not(.check) { list-style: disc; }
.hmt-page-content ol { list-style: decimal; }
.hmt-page-content li + li { margin-top: .45rem; }
.hmt-page-content .wp-block-table { overflow-x: auto; margin: var(--space-4) 0; }
.hmt-page-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hmt-page-content th, .hmt-page-content td { padding: .75rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.hmt-page-content th { color: var(--color-text); font-weight: 800; background: var(--color-bg-alt); }
.hmt-page-content blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-bg-alt); font-size: var(--fs-lg); }
.hmt-resource-content { max-width: 760px; margin-inline: auto; }

/* The supplied XML uses Gutenberg comments with a few unbalanced wrappers.
   WordPress correctly renders the editable groups, but they become direct
   children of the content section. Keep those groups in the site grid and
   give them the same rhythm as normal block content. */
body.page main > section:not(.phero) > .wp-block-group,
body.single main > section:not(.phero) > .wp-block-group {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}
body.page main > section:not(.phero) > .container > .wp-block-group,
body.single main > section:not(.phero) > .container > .wp-block-group {
  width: 100%;
}
body.page main > section:not(.phero) > .wp-block-group + .wp-block-group,
body.single main > section:not(.phero) > .wp-block-group + .wp-block-group { margin-top: var(--space-7); }
body.page main > section:not(.phero) > .container > .wp-block-group + .wp-block-group,
body.single main > section:not(.phero) > .container > .wp-block-group + .wp-block-group { margin-top: var(--space-7); }
body.page main > section:not(.phero) > .wp-block-group h2,
body.single main > section:not(.phero) > .wp-block-group h2 { margin-bottom: var(--space-2); }
body.page main > section:not(.phero) > .container > .wp-block-group h2,
body.single main > section:not(.phero) > .container > .wp-block-group h2 { margin-bottom: var(--space-2); }
body.page main > section:not(.phero) > .wp-block-group p,
body.single main > section:not(.phero) > .wp-block-group p { color: var(--color-text-muted); margin-bottom: var(--space-2); line-height: 1.7; }
body.page main > section:not(.phero) > .container > .wp-block-group p,
body.single main > section:not(.phero) > .container > .wp-block-group p { color: var(--color-text-muted); margin-bottom: var(--space-2); line-height: 1.7; }
body.page main > section:not(.phero) > .wp-block-group figure,
body.single main > section:not(.phero) > .wp-block-group figure { margin: var(--space-4) 0; }
body.page main > section:not(.phero) > .container > .wp-block-group figure,
body.single main > section:not(.phero) > .container > .wp-block-group figure { margin: var(--space-4) 0; }
body.page main > section:not(.phero) > .wp-block-group .wp-block-columns,
body.single main > section:not(.phero) > .wp-block-group .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
body.page main > section:not(.phero) > .container > .wp-block-group .wp-block-columns,
body.single main > section:not(.phero) > .container > .wp-block-group .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 760px) {
  body.page main > section:not(.phero) > .wp-block-group .wp-block-columns,
  body.single main > section:not(.phero) > .wp-block-group .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page main > section:not(.phero) > .container > .wp-block-group .wp-block-columns,
  body.single main > section:not(.phero) > .container > .wp-block-group .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The first imported block is a duplicate of the theme hero. Its title, image
   and CTAs have already been promoted into the page hero above. */
body.page main > section:not(.phero) > .container > .wp-block-group:first-child,
body.single main > section:not(.phero) > .container > .wp-block-group:first-child,
.hmt-resource-content > .wp-block-group:first-child { display: none; }

/* ---------- Gallery dashboard ---------- */
/* Type filter: a single scrollable row instead of ragged multi-line wrap --
   stays tidy at any width instead of reflowing into an uneven block. */
.gal-typebar-wrap { position: relative; margin-bottom: var(--space-5); }
.gal-typebar {
  display: flex; gap: 0.55rem; padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.gal-typebar::-webkit-scrollbar { display: none; }
.gal-typebar-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: var(--space-4); width: 40px;
  background: linear-gradient(90deg, transparent, var(--color-bg) 85%);
  pointer-events: none;
}
.gal-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none; scroll-snap-align: start;
  border: 1.5px solid var(--color-border); background: var(--hm-white); color: var(--color-text);
  border-radius: 999px; padding: 0.6rem 1.05rem; min-height: 44px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.gal-pill svg { width: 15px; height: 15px; flex: none; opacity: 0.7; transition: opacity var(--dur-fast); }
.gal-pill:hover { border-color: var(--hm-gray-300); transform: translateY(-1px); }
.gal-pill.is-active { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.gal-pill.is-active svg { opacity: 1; }
.gal-pill .n { opacity: 0.65; font-weight: 500; }

.gal-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .gal-layout { grid-template-columns: 220px 1fr; } }

.gal-side { display: flex; flex-direction: column; gap: 0.2rem; }
@media (min-width: 900px) { .gal-side { position: sticky; top: 104px; } }
.gal-side h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.gal-side-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  background: none; border: none; border-left: 2px solid transparent; text-align: left; width: 100%;
  padding: 0.6rem 0.7rem; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.gal-side-item:hover { background: var(--color-bg-alt); }
.gal-side-item.is-active { background: var(--hm-red-100); color: var(--color-accent-strong); border-left-color: var(--color-accent); }
.gal-side-item .n { font-size: var(--fs-2xs); color: var(--color-text-muted); font-weight: 500; }
.gal-side-item.is-active .n { color: var(--color-accent-strong); }

.gal-count { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* Cards: every card is a flex column so the media block, title and tag row
   sit at fixed, predictable positions no matter how long a title runs --
   this is what keeps a whole row visually level instead of drifting. */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.gal-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gal-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--hm-white); cursor: pointer; text-align: left; padding: 0; text-decoration: none; color: inherit;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med), border-color var(--dur-fast);
}
.gal-card:hover, .gal-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; outline: none; }
.gal-card:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--hm-red-100); }
.gal-card[hidden] { display: none; }
.gal-media {
  flex: none; aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hm-steel-900), var(--hm-charcoal));
}
.gal-media svg { color: rgba(255,255,255,0.28); width: 40px; height: 40px; transition: transform var(--dur-med) var(--ease-out), color var(--dur-med); }
.gal-card:hover .gal-media svg { transform: scale(1.12); color: rgba(255,255,255,0.42); }
.gal-sample-tag {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1;
  background: rgba(19,20,23,0.72); color: rgba(255,255,255,0.85);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.gal-view-hint {
  position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.9rem; font-size: var(--fs-xs); font-weight: 700; color: #fff;
  background: linear-gradient(0deg, rgba(19,20,23,0.85), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.gal-view-hint svg { width: 14px; height: 14px; }
.gal-card:hover .gal-view-hint, .gal-card:focus-visible .gal-view-hint { opacity: 1; transform: translateY(0); }
.gal-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-3) var(--space-4) var(--space-4); }
.gal-body h3 {
  font-size: var(--fs-base); letter-spacing: -0.01em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(var(--fs-base) * 1.3 * 2);
}
.gal-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.gal-tag { font-size: var(--fs-2xs); font-weight: 700; color: var(--color-text-muted); background: var(--color-bg-alt); border-radius: 999px; padding: 0.2rem 0.55rem; }
.gal-empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-text-muted); }
.gal-empty[hidden] { display: none; }

/* Related-projects strip embedded on service/industry pages */
.gal-rel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); }
.gal-rel-viewall { font-size: var(--fs-sm); font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.gal-rel-viewall:hover { text-decoration: underline; }

/* Lightbox */
.gal-lightbox {
  position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: rgba(13,14,16,0.88); backdrop-filter: blur(4px);
}
.gal-lightbox[hidden] { display: none; }
.gal-lb-wrap { max-width: 620px; width: 100%; }
.gal-lb-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
/* Close sits above the card, outside the image entirely -- never overlaps
   the photo or the next/prev controls. */
.gal-lb-close {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast);
}
.gal-lb-close:hover { background: var(--color-accent); transform: scale(1.06); }
.gal-lb-box { background: var(--hm-white); border-radius: var(--radius-md); width: 100%; overflow: hidden; box-shadow: var(--shadow-lg); }
.gal-lb-media {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hm-steel-900), var(--hm-charcoal)); position: relative;
}
.gal-lb-media svg { color: rgba(255,255,255,0.28); width: 64px; height: 64px; }
.gal-lb-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.gal-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(19,20,23,0.55); border: none; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast);
}
.gal-lb-nav:hover { background: rgba(19,20,23,0.85); }
.gal-lb-nav:active { transform: translateY(-50%) scale(0.92); }
.gal-lb-prev { left: 0.7rem; }
.gal-lb-next { right: 0.7rem; }
.gal-lb-nav[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.gal-lb-position { font-size: var(--fs-2xs); font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.03em; margin-top: 0.5rem; }

/* ---------- Capability cards -> clickable, with a themed media header ----------
   Same visual language as the gallery cards (dark gradient header + big icon)
   so this pattern reads as one system across the site, not a one-off. */
.spec-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.spec-card {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: var(--hm-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.spec-card:hover, .spec-card:focus-visible { border-color: transparent; transform: translateY(-6px); box-shadow: var(--shadow-lg); outline: none; }
.spec-card-media {
  flex: none; position: relative; height: 92px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hm-steel-900), var(--hm-charcoal));
}
.spec-card-media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--color-accent), transparent 70%);
  opacity: 0; transition: opacity var(--dur-med);
}
.spec-card:hover .spec-card-media::before, .spec-card:focus-visible .spec-card-media::before { opacity: 0.55; }
.spec-card-media svg {
  position: relative; z-index: 1; width: 34px; height: 34px; color: rgba(255,255,255,0.85);
  transition: transform var(--dur-med) var(--ease-out);
}
.spec-card:hover .spec-card-media svg, .spec-card:focus-visible .spec-card-media svg { transform: scale(1.15); }
.spec-card-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-4); }
.spec-card-body h4 { font-size: var(--fs-base); letter-spacing: -0.005em; }
.spec-card-body p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 0.4rem; flex: 1; }
.spec-card-cta {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.8rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em; color: var(--color-accent);
  opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.spec-card-cta svg { width: 13px; height: 13px; }
.spec-card:hover .spec-card-cta, .spec-card:focus-visible .spec-card-cta { opacity: 1; transform: translateX(0); }
.prose img { border-radius: var(--radius-md); }
/* Native estimate form status feedback. */
.hmt-form-notice{padding:.85rem 1rem;border-radius:4px;margin:0 0 1rem;font-weight:600}.hmt-form-notice--success{background:#e8f5ee;color:#125c32}.hmt-form-notice--error{background:#fff0ef;color:#9f1c17}

/* Reference service-page sections */
.section-cream { background: var(--color-bg-alt); }
.sec-head2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-5); align-items: end; }
.sec-aside { max-width: 44ch; color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1.6; }
@media (min-width: 860px) { .sec-head2 { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); } }
.split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.split-media { overflow: hidden; border-radius: var(--radius-md); }
.split-media img { width: 100%; min-height: 320px; object-fit: cover; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.link-underline { display: inline-flex; gap: .5rem; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: 800; color: var(--color-text); border-bottom: 2px solid var(--color-accent); padding-bottom: .3rem; }
.link-underline:hover { color: var(--color-accent); }
.faq-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .faq-split { grid-template-columns: .8fr 1.2fr; gap: var(--space-8); } }