/* General Power — v6: ALEMCO-inspired design language.
   Adopts the reference site's structural + typographic system:
     · pill buttons
     · lighter, airier display type
     · generous section whitespace
     · thin-bordered cards with minimal shadow
     · thin-outline circular icons
     · centred hero
     · light footer
   Brand colours stay GP's own (logo-derived blue + red) — the reference's
   maroon would clash with the bright red in the General Power mark.
   Loaded LAST so it wins over v2–v5. */

/* ============================================================
   TYPOGRAPHY — lighter, more open
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }

h1, .hero__title, .page-hero h1 {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
h2 {
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.12;
  font-size: clamp(1.6rem, 1.9vw + .9rem, 2.5rem);
}
h3 { font-weight: 600; letter-spacing: -0.015em; }

.hero__sub, .page-hero p, .section-head p {
  font-weight: 300;
  line-height: 1.65;
}
.section-head p { font-size: clamp(.95rem, .35vw + .85rem, 1.075rem); }
.hero__sub { font-size: clamp(.95rem, .45vw + .85rem, 1.15rem); }
.page-hero h1 { font-size: clamp(1.7rem, 2.4vw + .9rem, 3rem); line-height: 1.12; }
.page-hero p { font-size: clamp(.95rem, .35vw + .85rem, 1.075rem); }

/* Micro-label with rules either side, as on the reference hero */
.eyebrow {
  gap: .9rem;
  letter-spacing: .22em;
  font-weight: 500;
}
.eyebrow::before { width: 46px; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: ""; display: inline-block; width: 46px; height: 1px; background: currentColor;
}
.hero__eyebrow { letter-spacing: .24em; font-weight: 500; }
.hero__eyebrow::after {
  content: ""; display: inline-block; width: 46px; height: 1px; background: currentColor;
}

/* ============================================================
   BUTTONS — pill
   ============================================================ */
.btn {
  border-radius: 999px;
  letter-spacing: .16em;
  font-weight: 600;
  padding: 15px 34px;
}
.btn-lg { padding: 19px 44px; letter-spacing: .18em; }
.btn-sm { padding: 11px 24px; letter-spacing: .14em; }
.btn-ghost { border-radius: 0; padding-left: 0; padding-right: 0; letter-spacing: .16em; }

.filter-pill, .tag, .search-chip { border-radius: 999px; }
.filter-pill { padding: 11px 24px; letter-spacing: .14em; }
.tag { padding: 8px 18px; letter-spacing: .1em; }

/* ============================================================
   SPACING — more air between sections
   ============================================================ */
.section { padding: clamp(4.5rem, 10vw, 9rem) 0; }
.section--tight { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-head { margin-bottom: clamp(3rem, 5vw, 4.5rem); }

/* ============================================================
   CARDS — thin border, airy, minimal shadow
   ============================================================ */
.card, .cap-card, .prod-block, .stat-tile, .iso-card, .value-card,
.project-card, .tech-grid__item, .tech-slide__item {
  border-radius: 10px;
}
.cap-card, .prod-block, .stat-tile, .project-card {
  border-color: rgba(10,22,40,.10);
  box-shadow: none;
}
.cap-card:hover, .prod-block:hover, .stat-tile:hover, .project-card:hover {
  box-shadow: 0 18px 44px -22px rgba(10,22,40,.22);
  border-color: rgba(10,22,40,.18);
}
.cap-card--media .cap-card__media,
.project-card__media,
.cap-card--media { border-radius: 10px; }
.cap-card--media .cap-card__media { border-radius: 10px 10px 0 0; }
.project-card__media { border-radius: 10px 10px 0 0; }
.cap-card--media .cap-card__body { padding: var(--space-8) var(--space-7, 1.75rem) var(--space-8); }
.cap-card { padding: var(--space-10) var(--space-8); }
.prod-block__head { padding: var(--space-8) var(--space-8) var(--space-5); }
.prod-block__list { padding: var(--space-5) var(--space-8) var(--space-8); }
.prod-block__foot { padding: 0 var(--space-8) var(--space-8); }

.industry-card { border-radius: 10px; }
.photo-card { border-radius: 10px; }
.leader-card--text { border-radius: 10px; }

/* Numbered label above card titles — quieter, letterspaced */
.cap-card__num, .photo-card__num, .prod-block__num, .value-card__num {
  letter-spacing: .2em;
  font-weight: 600;
}

/* ============================================================
   CIRCULAR OUTLINE ICONS (reference's signature device)
   ============================================================ */
#values .value-card {
  align-items: flex-start;
  padding: var(--space-10) var(--space-8);
}
#values .value-card__icon {
  width: 86px; height: 86px;
  padding: 22px;
  border: 1px solid rgba(10,22,40,.14);
  border-radius: 50%;
  box-sizing: border-box;
  margin-bottom: var(--space-6);
  transition: border-color 340ms var(--ease-out), transform 340ms var(--ease-out);
}
#values .value-card:hover .value-card__icon {
  border-color: var(--brand-red);
  transform: scale(1.04);
}

/* ============================================================
   HERO — centred, as on the reference
   ============================================================ */
.page-home .hero { text-align: center; }
.page-home .hero__inner { max-width: 1000px; margin: 0 auto; }
.page-home .hero__eyebrow { justify-content: center; }
.page-home .hero__sub { margin-left: auto; margin-right: auto; text-align: center; }
.page-home .hero__ctas { justify-content: center; }
.page-home .hero__title {
  font-size: clamp(1.85rem, 2.9vw + .95rem, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .page-home .hero { text-align: left; }
  .page-home .hero__eyebrow { justify-content: flex-start; }
  .page-home .hero__sub { text-align: left; }
  .page-home .hero__ctas { justify-content: flex-start; }
}

/* Interior page heroes keep left alignment but gain air */
.page-hero { padding: 200px 0 120px; }

/* ============================================================
   LIGHT FOOTER (reference footer is light, not dark)
   ============================================================ */
.site-footer {
  background: var(--paper);
  color: var(--charcoal);
  border-top: 1px solid var(--border);
}
.site-footer::before { display: none; }
.footer-tag { border-bottom-color: var(--border); }
.footer-tag h2 { color: var(--ink); font-weight: 500; }
.footer-tag p { color: var(--text-muted); }
.footer-col h5 { color: var(--steel); letter-spacing: .2em; }
.footer-col p, .footer-col a { color: var(--charcoal); }
.footer-col ul a { color: var(--text-muted); }
.footer-col ul a:hover { color: var(--brand-blue); }
.footer-col address { color: var(--text-muted); }
.footer-col address strong { color: var(--ink); }
.footer-bar {
  border-top-color: var(--border);
  color: var(--text-muted);
}
.footer-bar__links a { color: var(--text-muted); }
.footer-bar__links a:hover { color: var(--brand-blue); }
.social-btn {
  border-color: rgba(10,22,40,.16);
  color: var(--charcoal);
  border-radius: 999px;
  width: 44px; height: 44px;
}
.social-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.site-footer .footer-logo span { color: var(--ink); }

/* ============================================================
   NAV — a touch more air
   ============================================================ */
.site-nav__links { gap: var(--space-6); }
.site-nav__links a, .nav-trigger { letter-spacing: .14em; font-weight: 500; }
.nav-search { border-radius: 999px; }

/* ============================================================
   SECTION DIVIDER RULES
   ============================================================ */
.rule-red { height: 2px; width: 56px; }

/* ============================================================
   FORMS — match the softer geometry
   ============================================================ */
.form-field input, .form-field textarea, .form-field select { border-radius: 8px; }
.search-overlay input[type="search"] { border-radius: 0; }

/* ============================================================
   REDUCED MOTION passthrough (nothing new added here)
   ============================================================ */

/* ============================================================
   LIGHT FOOTER — contrast corrections
   The original footer markup carries inline white text colours from the
   dark treatment, which are invisible on the light background. Inline
   styles can only be beaten with !important, hence the overrides.
   All values below clear WCAG AA (>= 4.5:1 on --paper #F5F7FA).
   ============================================================ */
.site-footer .footer-col p,
.site-footer .footer-tag p,
.site-footer .footer-col address,
.site-footer .footer-bar,
.site-footer .footer-bar div {
  color: var(--slate) !important;          /* #475569 -> ~7.0:1 */
}
.site-footer .footer-col ul a,
.site-footer .footer-bar__links a {
  color: var(--slate) !important;
}
.site-footer .footer-col ul a:hover,
.site-footer .footer-bar__links a:hover {
  color: var(--brand-blue) !important;
}
.site-footer .footer-col h5 {
  color: var(--charcoal) !important;       /* #374151 -> ~9.6:1 */
}
.site-footer .footer-col address strong,
.site-footer .footer-tag h2 {
  color: var(--ink) !important;
}
.site-footer .footer-col address a,
.site-footer .footer-col > p > a {
  color: var(--brand-blue) !important;
}
.site-footer .social-btn {
  color: var(--charcoal) !important;
  border-color: rgba(10,22,40,.18) !important;
}
.site-footer .social-btn:hover {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
/* logo chip no longer needs a white plate on a light footer */
.site-footer img[src$="logo.png"] { background: transparent; padding: 0; }

/* Small pill buttons must still clear the 44px minimum touch target */
.btn-sm { padding: 15px 26px; min-height: 44px; }

/* ============================================================
   DASH-BULLET LISTS — tighter row rhythm
   The product-category and service spec lists ran too open: a 43px
   row pitch on 14px/21.7px text left the dash marker floating away
   from its label. Halving the vertical padding brings the pitch to
   ~30px so each row reads as one unit. The ::before dash is
   absolutely positioned, so its `top` has to move with the padding
   or the marker drops below its own text.
   These are plain <li> text, not links, so the 44px touch minimum
   does not apply.
   ============================================================ */
/* The real spread came from stretching, not padding: this list is a grid
   with flex:1 inside equal-height cards, so a 5-item list in a row whose
   tallest card has 10 items had its rows pulled apart to fill the gap.
   align-content:start packs the rows at their natural pitch and lets the
   slack collect below, where the Request-pricing button already sits. */
.prod-block__list { gap: 0; align-content: start; }
.prod-block__list li { padding-top: 4px; padding-bottom: 4px; }
.prod-block__list li::before { top: 15px; }

.svc-block ul li { padding-top: 4px; padding-bottom: 4px; }
.svc-block ul li::before { top: 15px; }

/* ============================================================
   EQUIPMENT SLIDE — continuous right-to-left marquee
   Same mechanics as .tech-slide: the track holds exactly two identical
   halves and animates 0 -> -50%, so the wrap lands on a matching frame
   and reads as endless. motion.js clones the authored group until one
   half exceeds the viewport, so it never runs dry on wide screens.
   Tiles keep their own aspect ratio — fixed height, automatic width —
   because the source drawings range from portrait matrices to very wide
   general-arrangement views and cropping them to a common box would cut
   off dimension lines.
   ============================================================ */
.gp-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--space-2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gp-slide__track {
  display: flex;
  width: max-content;
  animation: gpSlide 78s linear infinite;
  will-change: transform;
}
/* Runs through hover — the tiles hold no links or copy to stop and read,
   so pausing only made the strip feel broken when the pointer crossed it. */
.gp-slide__group { display: flex; align-items: center; flex: 0 0 auto; }

.gp-slide__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  margin: 0 var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
/* No per-tile hover: with the track never pausing, tiles slide under a
   still cursor and the state would strobe on and off across the row. */
.gp-slide__item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

@keyframes gpSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Direction toggle. Reversing the same keyframes rather than swapping in a
   second animation keeps one timeline, so slide.js can re-anchor currentTime
   and flip without the strip jumping. */
.gp-slide--ltr .gp-slide__track { animation-direction: reverse; }

/* Click-to-zoom affordance on the strip */
.gp-slide__item { cursor: zoom-in; }
.gp-slide__item:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

/* The lightbox was sized for certificates (760px / 68vh). These are
   dimensioned drawings — the numbers are the point of opening them — so give
   the viewer as much of the screen as it can take. */
/* <figure> keeps the UA default margin: 16px 40px — 80px of width thrown
   away on every screen, which on a phone was a third of the drawing. */
.lightbox__figure { margin: 0; max-width: min(1180px, 94vw); }
.lightbox img { max-height: 82vh; }

/* ---- zoomed view: drawing left, category panel right ----
   The split class is added by slide.js only when the tile carries a category,
   so certificates and any other lightbox target keep the plain centred layout. */
.lightbox__figure--split { max-width: min(1320px, 95vw); text-align: left; }
@media (min-width: 900px) {
  .lightbox__figure--split {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(272px, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(1.75rem, 3vw, 3rem);
  }
  .lightbox__figure--split img { grid-column: 1; grid-row: 1; max-height: 76vh; }
  .lightbox__figure--split figcaption { grid-column: 1; grid-row: 2; }
  .lightbox__figure--split .lb-info { grid-column: 2; grid-row: 1 / span 2; }
}

.lb-info { color: #fff; }
.lb-info__eyebrow {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: var(--space-3);
}
.lb-info__tagline {
  font-size: clamp(1.1rem, 1.1vw + .85rem, 1.45rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.22;
  color: #fff;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.lb-info ul { list-style: none; margin: 0; padding: 0; }
.lb-info li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}
.lb-info li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 9px; height: 1px;
  background: var(--brand-red);
}

@media (max-width: 899px) {
  /* stacked: the drawing is the reason the panel opened, so it stays on top */
  .lb-info { margin-top: var(--space-6); text-align: left; }
  .lightbox { overflow-y: auto; }
  .lightbox__figure--split img { max-height: 48vh; }
}
@media (max-width: 640px) {
  /* On a phone the drawing is already tight, so claw back every pixel the
     chrome was taking: the modal's own gutter and the white plate around
     the image both come down. */
  .lightbox { padding: 64px 12px 20px; }
  .lightbox__figure { max-width: 100%; }
  .lightbox img { max-height: 74vh; padding: 12px; }
}

.gp-slide__controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-6);
}
.gp-slide__dir {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(10,22,40,.16);
  border-radius: 999px;
  color: var(--slate);
  cursor: pointer;
  transition: color 260ms var(--ease-out), border-color 260ms var(--ease-out), background 260ms var(--ease-out);
}
.gp-slide__dir svg { width: 17px; height: 17px; }
.gp-slide__dir:hover { color: var(--ink); border-color: rgba(10,22,40,.34); }
.gp-slide__dir:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
.gp-slide__dir[aria-pressed="true"] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  /* the strip is a static grid here, so a direction control means nothing */
  .gp-slide__controls { display: none; }
}

@media (max-width: 640px) {
  .gp-slide__item { height: 150px; margin: 0 8px; padding: var(--space-4); }
  .gp-slide__track { animation-duration: 52s; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-slide { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .gp-slide__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .gp-slide__group { flex-wrap: wrap; justify-content: center; }
  .gp-slide__group:nth-child(2) { display: none; }
  .gp-slide__item { margin: 6px; }
}