/* ==========================================================================
   Bremesgraf Enterprise - page sections, catalogue and product detail.
   Loaded after style.css, which owns the tokens every rule here refers to.

   Part A styles the classes used by the imported block content, so the pages
   stay editable in WordPress. Part B and C style the catalogue and product
   templates, which are theme-owned so that twenty-four product pages cannot
   drift apart from each other.
   ========================================================================== */

/* ==========================================================================
   A. Block content sections
   ========================================================================== */

.enterprise-page .entry-content > * { max-width: none; }

/* Section eyebrows: a mono label with a rule, on every page.
 *
 * The rule is the device; the label is the content.
 */
.enterprise-hero > .wp-block-cover__inner-container > .eyebrow,
.enterprise-section .enterprise-container > .eyebrow {
  display: flex; align-items: center; gap: 16px;
}
.enterprise-hero > .wp-block-cover__inner-container > .eyebrow::after,
.enterprise-section .enterprise-container > .eyebrow::after {
  content: ""; flex: none; width: 44px; height: 1px; background: currentColor; opacity: .45;
}

/* Numbered sections are for the homepage only.
 *
 * Six sections numbered 01 to 06 read as a deliberate spine. The inner pages do
 * not work that way: Services runs to fifteen sections, so numbering them turned
 * "Consultancy" and "System Design" into steps 04 and 05 of a procedure, when
 * they are services a client buys individually, in any order or on their own.
 * The only numbers left on those pages are the delivery bands, where the
 * sequence is real - Consult, Design, Supply, Install - and now means something
 * because nothing else competes with it.
 */
/*
 * The homepage eyebrows used to be numbered 01 to 05 by a CSS counter. Removed
 * at the team's request: a reader does not need to be told which section they
 * are in, and the number set the expectation of a sequence to work through. The
 * keyline after the label carries the same emphasis without the counting.
 */

/* --- Hero ---------------------------------------------------------------- */

.enterprise-hero {
  padding: 0 !important;
  min-height: 680px !important;
  align-items: stretch;
}
.enterprise-hero .wp-block-cover__background {
  background: linear-gradient(90deg, var(--bg-navy-deep) 0%, rgba(7, 28, 39, .92) 38%, rgba(7, 28, 39, .38) 78%, rgba(7, 28, 39, .16) 100%) !important;
  opacity: 1 !important;
}
.enterprise-hero .wp-block-cover__inner-container {
  width: min(var(--bg-max), calc(100% - 2 * var(--bg-gutter)));
  max-width: none;
  margin-inline: auto;
  padding-block: var(--bg-space-standard);
  display: flex; flex-direction: column; justify-content: center;
}
.enterprise-hero h1 { color: #fff; max-width: 15ch; margin: 26px 0 26px; }
.enterprise-hero .eyebrow { color: var(--bg-cyan); }
.hero-description { color: #cfdee6; max-width: 56ch; font-size: 1.1875rem; line-height: 1.65; margin-bottom: 12px; }
.enterprise-hero .wp-block-buttons { margin-top: 26px; gap: 14px; }
.enterprise-hero .wp-block-button__link { background: var(--bg-citron); color: var(--bg-navy); }
.enterprise-hero .wp-block-button__link:hover { background: #cbe37f; color: var(--bg-navy); }
.enterprise-hero .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border: 1px solid #52707f; }

/* Credential strip pinned to the foot of the hero.
 *
 * margin-top:auto drops it to the bottom edge whenever the hero has slack. When
 * it does not - a long headline, a translated string, a short viewport - auto
 * collapses to zero and the rule lands on the call to action. The floor below
 * keeps clear air above the rule in that case. It is scoped with :has() so the
 * heroes on Company, Solutions and Sectors, which carry no credential strip,
 * keep their own spacing; browsers without :has() simply fall back to auto.
 */
.hero-credentials {
  margin-top: auto; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.enterprise-hero .wp-block-cover__inner-container:has(> .hero-credentials) > :nth-last-child(2) {
  margin-bottom: 48px;
}
.hero-credentials .wp-block-columns { gap: 44px; margin: 0; }
.credential-label {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bg-on-navy-faint); margin: 0 0 5px;
}
.credential-value { font-size: 0.9375rem; color: #dce8ee; margin: 0; }

/*
 * Catalogue is the only one of the three credentials that goes anywhere. As an
 * ordinary link it took the page's teal, which against a dimmed photograph is
 * barely legible - so it takes the ground's own cyan instead, with a rule under
 * it and the same drawn arrow the rest of the site uses for an outbound step.
 * Read as an action beside two plain statements of fact, not as decoration.
 */
.credential-value a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bg-cyan); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(101, 216, 226, .5); padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}
.credential-value a::after {
  content: ""; width: 12px; height: 12px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center/contain no-repeat;
          mask: var(--arrow) center/contain no-repeat;
}
.credential-value a:hover { color: #fff; border-bottom-color: #fff; }

/* Scroll cue.
 *
 * It sits in the hero's right margin, clear of both the headline column and the
 * credential strip along the foot - there is no room for it under the buttons
 * without it reading as a fourth thing to click. It is a real link to the first
 * section, so it works from the keyboard and does something on a click, and it
 * is hidden on phones, where nobody needs to be told a page scrolls.
 */
.enterprise-hero { position: relative; }
.hero-scroll {
  position: absolute; right: calc(var(--bg-gutter) - 10px); top: 50%;
  transform: translateY(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-decoration: none; color: var(--bg-on-navy-faint);
  transition: color .2s ease;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll-label {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll-track {
  position: relative; width: 1px; height: 72px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.hero-scroll-track::after {
  content: ""; position: absolute; left: 0; top: -26px;
  width: 1px; height: 26px; background: var(--bg-cyan);
  animation: bg-scroll-cue 2.4s cubic-bezier(.6, 0, .35, 1) infinite;
}
@keyframes bg-scroll-cue {
  0%       { transform: translateY(0); }
  55%, 100% { transform: translateY(98px); }
}
@media (max-width: 900px) { .hero-scroll { display: none; } }

/* --- Sector strip -------------------------------------------------------- */

.sector-strip { background: var(--bg-navy); padding: 0; }
.sector-strip .wp-block-columns {
  width: min(var(--bg-max), calc(100% - 2 * var(--bg-gutter)));
  margin-inline: auto; gap: 1px; background: rgba(255, 255, 255, .1);
}
.sector-strip .wp-block-column {
  background: var(--bg-navy); padding: 22px 18px 22px 22px;
  display: flex; align-items: center;
}
.sector-strip .wp-block-column:first-child { padding-left: 0; }
/* "Industrial & Critical Infrastructure" is the one label that wraps; balanced
   wrapping splits it evenly rather than leaving one word on line two. */
.sector-item { font-size: 0.875rem; line-height: 1.45; color: #b9cdd6; margin: 0; text-wrap: balance; }

/* --- Section bands that carry a photograph --------------------------------
 *
 * A Cover block rather than a CSS background, so the picture stays swappable
 * from the block toolbar. Same treatment as the hero: the photograph sits under
 * a navy wash weighted to the side the type is on, so the copy keeps its
 * contrast wherever the image is light.
 */
.enterprise-section.wp-block-cover {
  padding: var(--bg-space-generous) 0 !important;
  min-height: 0 !important;
  align-items: stretch;
}
.enterprise-section.wp-block-cover > .wp-block-cover__inner-container {
  width: 100%; max-width: none; padding: 0;
}
.process-photo .wp-block-cover__background {
  background: linear-gradient(90deg, var(--bg-navy) 0%, rgba(10, 38, 53, .94) 52%, rgba(10, 38, 53, .58) 100%) !important;
  opacity: 1 !important;
}
.cta-photo .wp-block-cover__background {
  background: linear-gradient(90deg, var(--bg-navy-deep) 0%, rgba(7, 28, 39, .92) 48%, rgba(7, 28, 39, .42) 100%) !important;
  opacity: 1 !important;
}
/* The closing band is citron everywhere else; on a photograph it inverts.
   Qualified with .enterprise-cta so these win over the citron rules further
   down the file, which carry the same specificity and would otherwise leave
   dark ink on a dark photograph. */
.enterprise-cta.cta-photo h2 { color: #fff; }
.enterprise-cta.cta-photo .eyebrow { color: var(--bg-cyan); }
.enterprise-cta.cta-photo p:not(.eyebrow),
.enterprise-cta.cta-photo .enterprise-container > p:not(.eyebrow) { color: var(--bg-on-navy); }
.enterprise-cta.cta-photo .wp-block-button__link { background: var(--bg-citron); color: var(--bg-navy); }
.enterprise-cta.cta-photo .wp-block-button__link:hover { background: #cbe37f; color: var(--bg-navy); }

/* --- Generic section shell ----------------------------------------------- */

.enterprise-section { padding: var(--bg-space-generous) 0; }
.enterprise-container { width: min(var(--bg-max), calc(100% - 2 * var(--bg-gutter))); margin-inline: auto; }
.enterprise-section h2 { margin: 18px 0 22px; max-width: 22ch; }
.enterprise-section .enterprise-container > p:not(.eyebrow) { max-width: var(--bg-measure); line-height: 1.8; color: var(--bg-muted); }
.enterprise-section .wp-block-columns { gap: 64px; align-items: center; margin: 0; }

/* --- Capability lists ------------------------------------------------------
 *
 * Services and Sectors carry 23 of these: a heading like "Consultancy can
 * include" followed by six to eight short labels - "Operator Training",
 * "Solution Architecture". Nothing in either page runs past 35 characters, so
 * as a single column of default bullets each one stretched two words across
 * 1240px, which is what made the pages read like a word-processor document.
 *
 * Flowing them into columns of ruled rows turns the same content into a
 * specification of what is included. Multi-column rather than grid, so the
 * items read down each column in order rather than across the page.
 */
.enterprise-section .enterprise-container > ul {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  columns: 280px;
  column-gap: 48px;
}
.enterprise-section .enterprise-container > ul > li,
.enterprise-section .wp-block-column > ul > li,
.catalog-card ul:not(.card-chips) > li {
  position: relative;
  break-inside: avoid;
  margin: 0;
  padding: 12px 0 12px 24px;
  border-top: 1px solid var(--bg-line);
  font-size: 0.96875rem;
  line-height: 1.55;
  color: var(--bg-ink-soft);
}
.enterprise-section .enterprise-container > ul > li::before,
.enterprise-section .wp-block-column > ul > li::before,
.catalog-card ul:not(.card-chips) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 11px;
  height: 1px;
  background: var(--bg-teal);
}
/* Inside a card or a split column there is no room to flow into columns. */
.enterprise-section .wp-block-column > ul,
.catalog-card ul:not(.card-chips) {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

/* The same list on the navy process band and the citron closing band. */
.process-section .enterprise-container > ul > li { border-top-color: var(--bg-line-dark); color: var(--bg-on-navy-soft); }
.process-section .enterprise-container > ul > li::before { background: var(--bg-cyan); }
.enterprise-cta .enterprise-container > ul > li { border-top-color: rgba(21, 46, 60, .22); color: var(--bg-ink-soft); }
.enterprise-cta .enterprise-container > ul > li::before { background: var(--bg-citron-ink); }

/* --- Capability cards ---------------------------------------------------- */

.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
/* The grid is a Group block, so WordPress adds a block-gap margin to every
   child after the first. In a grid that pushes cards 2..n down by that margin
   and breaks the row's alignment; the gap property already does the spacing. */
.catalog-grid > * { margin-block: 0 !important; }
.catalog-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.capabilities-section .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.catalog-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--bg-line); padding: 26px;
  transition: border-color .18s ease, transform .18s ease;
}
.catalog-card:hover { border-color: var(--bg-teal); transform: translateY(-3px); }

/* Content-authored cards carry an Image block as their first element; pull it
   out to the card edges rather than asking editors to nest another group. */
.catalog-card > .wp-block-image { margin: -26px -26px 18px; }
.catalog-card > .wp-block-image img { display: block; width: 100%; height: 208px; object-fit: cover; }

/* The capability cards carried 01-04 above their headings. Removed with the
   numbering elsewhere on the homepage, and nothing else uses the class. */
.catalog-card h3 { margin: 0 0 14px; }
.catalog-card h3 a { color: var(--bg-navy); text-decoration: none; }
.catalog-card h3 a:hover { color: var(--bg-teal); }
.catalog-card p { font-size: 0.96875rem; line-height: 1.7; color: var(--bg-muted); }
.catalog-card .card-link { margin-top: auto; padding-top: 18px; font-size: 0.875rem; font-weight: 600; margin-bottom: 0; }
.catalog-card .card-link a { text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }

/* --- Featured systems (shortcode-driven) --------------------------------- */

.featured-section { background: var(--bg-mist); border-top: 1px solid var(--bg-line); }
.featured-section .wp-block-buttons { margin-top: 34px; }
.featured-section .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--bg-navy); border: 1px solid var(--bg-navy);
}
.featured-section .is-style-outline .wp-block-button__link:hover { background: var(--bg-navy); color: #fff; }

/* --- Services grid ---------------------------------------------------------
 *
 * Nine services that were nine full-page sections. Each card carries the whole
 * of that service's copy - photograph, icon, name, strapline, description and
 * its own "can include" list - so nothing was lost in the restructure; what
 * changed is that a reader can see all nine at once and compare them.
 */
.services-section { background: var(--bg-mist); border-top: 1px solid var(--bg-line); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 46px;
}
.service-grid > * { margin-block: 0 !important; }

.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bg-line);
  transition: border-color .18s ease, transform .18s ease;
}
.service-card:hover { border-color: var(--bg-teal); transform: translateY(-3px); }
.service-card > .wp-block-image { margin: 0; }
.service-card > .wp-block-image img { display: block; width: 100%; height: 190px; object-fit: cover; }
.service-card-body { display: flex; flex-direction: column; padding: 26px 26px 28px; flex-grow: 1; }
.service-card-body > * { margin-block: 0 !important; }
.service-card h3 { font-size: 1.375rem; line-height: 1.22; color: var(--bg-navy); margin: 0 0 8px !important; }
.service-lead {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bg-teal);
  margin: 0 0 16px !important; line-height: 1.5;
}
.service-card-body p:not(.service-lead):not(.service-list-title) {
  font-size: 0.9375rem; line-height: 1.7; color: var(--bg-muted); margin: 0 0 14px !important;
}
.service-list-title {
  font-family: var(--bg-font-mono); font-size: 0.65625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bg-muted);
  margin: 10px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--bg-line);
}
.service-card-body ul { list-style: none; padding: 0; margin: 6px 0 0 !important; }
.service-card-body ul > li {
  position: relative; padding: 8px 0 8px 22px; margin: 0;
  font-size: 0.875rem; line-height: 1.5; color: var(--bg-ink-soft);
}
.service-card-body ul > li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 10px; height: 1px; background: var(--bg-teal);
}

/* Solution cards carry a link out to the detail page. As with the catalogue,
   the anchor is stretched over the card so the whole tile is the target. */
.solution-card { position: relative; }
.solution-card .card-link { margin: auto 0 0 !important; padding-top: 18px; }
.solution-card .card-link a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.solution-card .card-link a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.solution-card:focus-within { outline: 3px solid var(--bg-teal); outline-offset: 3px; }
.solution-card .card-link a:focus-visible { outline: none; }
/* The arrow is a content character here, so it is masked to a drawn stroke the
   same way the template-rendered ones are. */
.solution-card .card-link a::before {
  content: ""; order: 2;
  width: 12px; height: 12px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center/contain no-repeat;
          mask: var(--arrow) center/contain no-repeat;
}

/* --- Solutions: capability strip -------------------------------------------
 *
 * Eight to ten capability labels under the overview. Too many for cards, too
 * few words for a list: a ruled row of small icons reads as a contents page for
 * the solution, which is what it is.
 */
/* Seven to ten items depending on the page. A grid with a fixed minimum track
   strands the last one on a row of its own whenever the count does not divide
   evenly, so this is a centred flex row: the items share the width, keep to one
   line on desktop at any count in that range, and wrap centred below it. */
.capability-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 12px;
  margin-top: 48px;
}
/* The strip is a Group block, so WordPress gives every cell after the first a
   block-gap margin. In a grid that dropped cells 2..n and left the first icon
   floating above the row. */
.capability-strip > * { margin-block: 0 !important; min-width: 0; }

/* No dividers and no cell boxes: a ruled grid around nine two-word labels reads
   as a table of empty cells. The rhythm comes from the tinted icon square
   instead, which is the same square geometry as the rest of the brand. */
.capability {
  flex: 1 1 92px;
  max-width: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  text-align: center;
}
.cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: none;
  background: var(--bg-chip);
  color: var(--bg-teal-dark);
  transition: background-color .18s ease, color .18s ease;
}
.capability:hover .cap-icon { background: var(--bg-teal); color: #fff; }
.capability-label {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bg-ink);
  margin: 0 !important;
  text-wrap: balance;
}

/* --- About ------------------------------------------------------------------
 *
 * The hero is the shared dark cover, so nothing here overrides it. What is left
 * is the page's own furniture: the story split, the two strips, the numbered
 * reasons and the mission/vision pair.
 */
/* Our story: a heading column beside its prose. */
.about-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 56px; align-items: start; }
.about-split > * { margin-block: 0 !important; min-width: 0; }
.about-split-head h2 { margin: 16px 0 0; max-width: 16ch; }
.about-split-body p { line-height: 1.85; color: var(--bg-ink-soft); max-width: var(--bg-measure); }
.about-split-body p + p { margin-top: 1.3em; }

.about-industries { background: var(--bg-mist); border-block: 1px solid var(--bg-line); }
.about-industries-note {
  margin-top: 40px !important; max-width: var(--bg-measure);
  color: var(--bg-muted); line-height: 1.8;
}

/* --- About: the capability register and the industry roster -----------------
 *
 * The shared .capability-strip is built for the seven to ten labels a Solutions
 * page carries. About asks it to hold fifteen capabilities and ten industries,
 * and a centred flex row at those counts strands the last three items alone in
 * the middle of an empty row. Worse, the two sections then read as one repeated
 * field of tinted squares with a hole in it, when they are answering two
 * different questions - what we make, and who we serve.
 *
 * So About gets two treatments that are deliberately unlike each other. The
 * capabilities become a ruled three-column register, which is how the rest of
 * this site already sets a list of specifications. The industries become a
 * roster of bordered cells. Both are left-aligned, so a short last row is the
 * end of a list rather than a gap, at any number of items.
 *
 * The tinted icon square is dropped in both. It is the right device for eight
 * of them on a Solutions page; at twenty-five it becomes wallpaper, and it was
 * the reason the labels underneath had to be small enough to wrap to three
 * lines. The structure is carried by the rules and the borders instead, and the
 * labels get the size they should have had.
 */

/* Fifteen items over three columns fill five rows exactly. The rules are drawn
   per cell with no column gap, so they join into continuous lines across the
   width and any other count still closes cleanly on the strip's own rule. */
.about-capabilities .capability-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 44px;
  border-bottom: 1px solid var(--bg-line);
}
.about-capabilities .capability {
  flex: none;
  max-width: none;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 19px clamp(20px, 2.6vw, 40px) 19px 0;
  border-top: 1px solid var(--bg-line);
}

/* Ten industries in five columns: two full rows, no remainder. Cells sized to
   their own labels would wrap 4-5-1 and leave the tenth sitting alone, which is
   the fault this section had in the first place. The teal left edge is the same
   marker the related tiles and the enquiry rail use. */
.about-industries .capability-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}
.about-industries .capability {
  flex: none;
  max-width: none;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 15px 18px;
  background: var(--bg-paper);
  border: 1px solid var(--bg-line);
  border-left: 3px solid var(--bg-teal);
}

/* Icon, unboxed. The shared rule fills and inverts the square on hover; there
   is no square here and nothing on either strip is a link, so it is cancelled
   rather than left to flash a background that promises a click. */
.about-capabilities .cap-icon,
.about-industries .cap-icon,
.about-capabilities .capability:hover .cap-icon,
.about-industries .capability:hover .cap-icon {
  width: auto; height: auto; padding: 0;
  background: none; color: var(--bg-teal);
}
.about-capabilities .cap-icon svg { width: 24px; height: 24px; }
.about-industries .cap-icon svg { width: 21px; height: 21px; }

.about-capabilities .capability-label,
.about-industries .capability-label {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--bg-ink);
  text-align: left;
  text-wrap: pretty;
}

/* Why choose us: the document gives seven claims and no sub-copy, so they are
   numbered rows rather than cards with empty bodies. */
.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 44px; }
.reason-grid > * { margin-block: 0 !important; min-width: 0; }
.reason-row {
  display: flex; align-items: baseline; gap: 18px;
  padding: 20px 0; border-top: 1px solid var(--bg-line);
}
.reason-number {
  font-family: var(--bg-font-mono); font-size: 1rem; font-weight: 600;
  color: var(--bg-teal); margin: 0 !important; flex: none; min-width: 28px;
}
.reason-text { font-size: 1rem; line-height: 1.6; color: var(--bg-ink); margin: 0 !important; }

/* Mission and vision. */
.purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.purpose-grid > * { margin-block: 0 !important; min-width: 0; }
.purpose-card {
  background: var(--bg-mist-2); border-top: 3px solid var(--bg-teal);
  padding: 34px 34px 36px;
}
.purpose-card h3 { font-size: var(--bg-fs-sub); line-height: 1.15; color: var(--bg-navy); margin: 0 0 16px; }
.purpose-card p { font-size: 1.0625rem; line-height: 1.8; color: var(--bg-ink-soft); margin: 0; }

/* --- Contact ---------------------------------------------------------------
 *
 * The form and the office details side by side: the form is the page's job, the
 * cards answer "who do I call instead". Below 1000px the cards go first, so a
 * phone user reaching for a number does not scroll past the whole form.
 */
.enterprise-hero-short { min-height: 380px !important; }
.contact-section { background: var(--bg-mist); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.contact-layout > * { margin-block: 0 !important; min-width: 0; }
.contact-form-card {
  background: #fff;
  border: 1px solid var(--bg-line);
  padding: 38px 38px 42px;
}
.contact-form-card h2 { font-size: var(--bg-fs-sub); margin: 14px 0 14px; max-width: 20ch; }
.contact-form-card > p { color: var(--bg-muted); max-width: 56ch; }
.contact-form-card .bg-form { margin-top: 30px; max-width: none; }

.contact-aside { display: flex; flex-direction: column; gap: 20px; }
.contact-card {
  background: #fff;
  border: 1px solid var(--bg-line);
  border-top: 3px solid var(--bg-teal);
  padding: 26px 26px 28px;
}
.contact-card h3 { font-size: 1.25rem; line-height: 1.2; color: var(--bg-navy); margin: 0; }
.contact-role {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bg-teal);
  margin: 8px 0 18px;
}
.contact-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-line {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--bg-line);
  font-size: 0.90625rem; line-height: 1.6; color: var(--bg-ink-soft);
}
.contact-line:first-child { border-top: 0; padding-top: 0; }
.contact-icon { color: var(--bg-teal); flex: none; display: inline-flex; margin-top: 3px; }
.contact-key {
  font-family: var(--bg-font-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--bg-muted); margin-right: 4px;
}
.contact-line a { color: var(--bg-ink-soft); text-decoration: none; }
.contact-line a:hover { color: var(--bg-teal); text-decoration: underline; }

.contact-card-dark {
  background: var(--bg-navy); border-color: var(--bg-navy); border-top-color: var(--bg-cyan);
}
.contact-card-dark h3 { color: #fff; }
.contact-card-dark p { color: var(--bg-on-navy); font-size: 0.90625rem; line-height: 1.7; margin: 16px 0 0; }

.contact-card-note { background: var(--bg-mist-2); border-top-color: var(--bg-line); }
.contact-card-note p { font-size: 0.875rem; line-height: 1.7; color: var(--bg-muted); margin: 14px 0 0; }

/* --- Sectors ---------------------------------------------------------------
 *
 * Ten sectors, each with its photograph and its list of relevant capabilities.
 * Four across rather than the mockup's five: the cards here carry seven to ten
 * capabilities each, and at a fifth of the width those lists become a column of
 * broken words.
 */
.sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sector-card > .wp-block-image img { height: 158px; }
.sector-card .service-card-body { padding: 22px 22px 24px; }
.sector-card h3 { font-size: 1.1875rem; line-height: 1.25; }
.sector-card .service-lead {
  font-family: var(--bg-font-body); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1.45;
  color: var(--bg-teal-dark); margin: 0 0 14px !important;
}
.sector-card .service-card-body p:not(.service-lead):not(.service-list-title):not(.card-link) {
  font-size: 0.875rem; line-height: 1.65;
}
.sector-card .service-card-body ul > li { font-size: 0.8125rem; padding: 6px 0 6px 20px; }
.sector-card .service-card-body ul > li::before { top: 14px; width: 9px; }
.sector-card .card-link { margin: auto 0 0 !important; padding-top: 16px; }
.sector-card .card-link a { font-size: 0.8125rem; font-weight: 600; text-decoration: none; }

/* --- Sectors: one portfolio, grouped by family ---------------------------- */

.portfolio-section { background: var(--bg-mist); border-top: 1px solid var(--bg-line); }
.portfolio-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px; margin-top: 44px;
}
.portfolio-grid > * { margin-block: 0 !important; min-width: 0; }
.portfolio-column { display: flex; flex-direction: column; }
.portfolio-heading {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bg-teal);
  margin: 0 0 6px !important; padding-bottom: 14px; border-bottom: 2px solid var(--bg-teal);
}
.portfolio-column ul { list-style: none; padding: 0; margin: 0 !important; }
.portfolio-column ul > li {
  position: relative; padding: 12px 0 12px 20px; margin: 0;
  border-bottom: 1px solid var(--bg-line);
  font-size: 0.90625rem; line-height: 1.5; color: var(--bg-ink-soft);
}
.portfolio-column ul > li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 9px; height: 1px; background: var(--bg-teal);
}

/* --- Solutions: the ecosystem band ------------------------------------------
 *
 * Five zones of a site, numbered in the order a vehicle or a passenger meets
 * them, over a photograph of that environment. The cards are translucent so the
 * place stays visible behind the structure being described.
 */
.ecosystem-section .zone-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.ecosystem-section .zone-grid > * { margin-block: 0 !important; }
.zone-card {
  background: rgba(7, 28, 39, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  border-top: 2px solid var(--bg-cyan);
  padding: 22px 20px 24px;
  backdrop-filter: blur(2px);
}
.zone-number {
  font-family: var(--bg-font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: .12em; color: var(--bg-cyan); margin: 0 0 10px !important;
}
.zone-card h3 { font-size: 1.0625rem; line-height: 1.25; color: #fff; margin: 0 0 14px !important; }
.zone-card ul { list-style: none; padding: 0; margin: 0 !important; }
.zone-card ul > li {
  position: relative; padding: 6px 0 6px 15px; margin: 0;
  font-size: 0.8125rem; line-height: 1.5; color: var(--bg-on-navy);
}
.zone-card ul > li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 7px; height: 1px; background: var(--bg-cyan);
}
.ecosystem-section h2 { color: #fff; }
.ecosystem-section .eyebrow { color: var(--bg-cyan); }
.ecosystem-section .enterprise-container > p:not(.eyebrow) { color: var(--bg-on-navy); }

/* --- Solutions: related products ------------------------------------------- */

.related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px; margin-top: 40px;
}
/* Grid items default to min-width:auto, so a long unbroken title - "Perimeter
   Intrusion Detection Systems - PIDS" - pushes the track wider than its share
   and the whole page scrolls sideways. Every grid item here is allowed to
   shrink and wrap instead. */
.related-grid > *,
.capability-strip > *,
.zone-grid > *,
.service-grid > *,
.catalog-grid > * { min-width: 0; }
.related-tile h3, .zone-card h3, .capability-label { overflow-wrap: break-word; }
.related-grid > * { margin-block: 0 !important; }
.related-tile {
  position: relative;
  background: #fff; border: 1px solid var(--bg-line);
  border-top: 3px solid var(--bg-teal);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s ease, transform .18s ease;
}
.related-tile:hover { transform: translateY(-3px); }
.related-tile h3 { font-size: 1.0625rem; line-height: 1.28; color: var(--bg-navy); margin: 0 !important; }
.related-tile .card-link { margin: auto 0 0 !important; font-size: 0.84375rem; font-weight: 600; }
.related-tile .card-link a { text-decoration: none; }
.related-tile .card-link a::after { content: ""; position: absolute; inset: 0; }

/* --- Solutions: area cards ------------------------------------------------- */

/* On Services the strapline is two or three words, so the mono-uppercase
   treatment suits it. The solution areas carry a real sentence of forty to
   sixty characters - "Detect microscopic traces of high-risk substances" -
   which set in uppercase mono reads as shouting and wraps badly. Same colour
   and role, ordinary sentence case. */
.solution-area-card .service-lead {
  font-family: var(--bg-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--bg-teal-dark);
  margin: 0 0 16px !important;
}
.solution-area-card .card-link { margin: auto 0 0 !important; padding-top: 16px; }
.solution-area-card .card-link a {
  font-size: 0.84375rem; font-weight: 600; text-decoration: none;
}

/* --- Why Bremesgraf ---------------------------------------------------------
 *
 * Six short claims. Without an icon each, what separates them is a rule and a
 * teal keyline above the heading, which is the same device the capability lists
 * use - so the row reads as part of the same system rather than as cards.
 */
.why-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-top: 44px; }
.why-grid > .catalog-card {
  background: transparent; border: 0; border-left: 1px solid var(--bg-line);
  padding: 0 26px; transform: none;
}
.why-grid > .catalog-card:first-child { border-left: 0; padding-left: 0; }
.why-grid > .catalog-card:hover { transform: none; border-color: var(--bg-line); }
.why-grid h3 {
  font-size: 1.0625rem; line-height: 1.3; color: var(--bg-navy);
  margin: 0 0 12px !important; padding-top: 20px; border-top: 2px solid var(--bg-teal);
}
.why-grid p { font-size: 0.875rem; line-height: 1.6; color: var(--bg-muted); }

/* --- Split section ------------------------------------------------------- */

.enterprise-split { background: var(--bg-mist); }
.enterprise-split figure { margin: 0; }
.enterprise-split img { width: 100%; height: 420px; object-fit: cover; display: block; }

/* --- Process band -------------------------------------------------------- */

.process-section { background: var(--bg-navy); color: var(--bg-on-navy); }
.process-section h2, .process-section h3 { color: #fff; }
.process-section .eyebrow { color: var(--bg-cyan); }
.process-section .enterprise-container > p:not(.eyebrow) { color: var(--bg-on-navy-soft); }

/*
 * The action that closes a section.
 *
 * Left as an ordinary button block it lands under the first column of the grid
 * above it, at the width of its own label, touching nothing - so it reads as
 * something belonging to that one card rather than to the section. A rule the
 * full width of the container closes the set of cards, and the button centred
 * beneath it reads as the section's own next step. Kept after the grid in the
 * markup as well as on screen, so what a reader tabs to matches what they see.
 */
.process-section .enterprise-container > .wp-block-buttons,
.featured-section .enterprise-container > .wp-block-buttons {
  margin-top: 52px !important;
  padding-top: 34px;
  border-top: 1px solid var(--bg-line-dark);
  justify-content: center;
}
.featured-section .enterprise-container > .wp-block-buttons { border-top-color: var(--bg-line); }

.delivery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 48px; }
.delivery-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.delivery-step { border-top: 1px solid var(--bg-line-dark); padding-top: 24px; text-align: center; }
.delivery-grid > .delivery-step { margin-block: 0 !important; align-self: stretch; }
.step-number { font-family: var(--bg-font-mono); font-size: 1.875rem; font-weight: 500; color: var(--bg-cyan); margin: 0 0 18px !important; }
.delivery-step h3 { font-size: 1.625rem; margin: 12px 0 !important; }
.delivery-step p:last-child { font-size: 1rem; line-height: 1.75; color: var(--bg-on-navy-soft); }

/* A lifecycle read as a line ------------------------------------------------
 *
 * Three commitments are a set and stay a set (.delivery-grid-3 on the
 * homepage). Seven or eight stages are a sequence, and a sequence should look
 * like one: numbered markers on a connecting rule, running left to right.
 */
.delivery-grid:not(.delivery-grid-3) {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 34px 0;
  margin-top: 54px;
}
.delivery-grid:not(.delivery-grid-3) > .delivery-step {
  position: relative;
  border-top: 0;
  padding: 0 12px;
}
/* Centred markers, so the rule has to run the full width of the cell and pass
   behind the square rather than start at its right edge. The square is opaque
   and sits above it, which is what breaks the line into segments; the first and
   last cells stop their half so the sequence does not trail off the ends. */
.delivery-grid:not(.delivery-grid-3) > .delivery-step::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 22px;
  height: 1px; background: var(--bg-line-dark);
}
.delivery-grid:not(.delivery-grid-3) > .delivery-step:first-child::before { left: 50%; }
.delivery-grid:not(.delivery-grid-3) > .delivery-step:last-child::before { right: 50%; }
.delivery-grid:not(.delivery-grid-3) .step-number {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--bg-navy);
  border: 1px solid var(--bg-line-dark);
  font-size: 0.875rem !important;
  color: var(--bg-cyan);
  margin: 0 auto 20px !important;
}
.delivery-grid:not(.delivery-grid-3) .delivery-step h3 {
  font-size: 1.0625rem; line-height: 1.3; margin: 0 0 8px !important;
}
.delivery-grid:not(.delivery-grid-3) .delivery-step p:last-child {
  font-size: 0.8125rem; line-height: 1.6;
}

/* --- Closing band on citron ---------------------------------------------- */

.enterprise-cta { background: var(--bg-citron); color: var(--bg-ink); padding: var(--bg-space-standard) 0; }
.enterprise-cta .eyebrow { color: var(--bg-citron-ink); }
.enterprise-cta h2, .enterprise-cta p { color: var(--bg-ink); }
.enterprise-cta .enterprise-container > p:not(.eyebrow) { color: var(--bg-ink-soft); max-width: var(--bg-measure); }
.enterprise-cta .wp-block-buttons { margin-top: 26px; }
.enterprise-cta .wp-block-button__link { background: var(--bg-navy); color: #fff; }
.enterprise-cta .wp-block-button__link:hover { background: var(--bg-navy-deep); }

/* ==========================================================================
   Motion
   ==========================================================================
 *
 * Four things move, and nothing else: the hero as the page loads, a section as
 * it arrives, the things you point at, and the header once you have left the
 * top. Distances are 8-16px and durations 180-700ms, because this is a
 * catalogue of inspection equipment and not a showreel.
 *
 * Everything here is off under prefers-reduced-motion, at the foot of the file.
 * The reveal is the only part that hides anything, and only navigation.js ever
 * applies .will-reveal - so with JavaScript off, an old browser, or a
 * reduced-motion setting, the class is never added and the page is simply
 * there. Nothing depends on an animation to become readable.
 */

/* --- Page load: the hero, once ------------------------------------------- */

@keyframes bg-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.enterprise-hero > .wp-block-cover__inner-container > * {
  animation: bg-rise .72s cubic-bezier(.22, .61, .36, 1) both;
}
.enterprise-hero > .wp-block-cover__inner-container > :nth-child(1) { animation-delay: .06s; }
.enterprise-hero > .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .13s; }
.enterprise-hero > .wp-block-cover__inner-container > :nth-child(3) { animation-delay: .20s; }
.enterprise-hero > .wp-block-cover__inner-container > :nth-child(4) { animation-delay: .27s; }
.enterprise-hero > .wp-block-cover__inner-container > :nth-child(5) { animation-delay: .34s; }
.enterprise-hero > .wp-block-cover__inner-container > :nth-child(6) { animation-delay: .41s; }
/* The cue is absolutely positioned and already centred by a transform; letting
   the rise animation drive transform as well would drop it half a hero. The
   selector has to out-specify the blanket rule above, not just follow it. */
.enterprise-hero > .wp-block-cover__inner-container > .hero-scroll {
  animation: bg-fade .7s ease .85s both;
}
@keyframes bg-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Arrival: a section fades, its contents rise in order ----------------- */

.will-reveal { opacity: 0; transition: opacity .55s ease; }
.will-reveal.is-revealed { opacity: 1; }

.will-reveal .catalog-card,
.will-reveal .service-card,
.will-reveal .delivery-step,
.will-reveal .related-tile,
.will-reveal .zone-card,
.will-reveal .purpose-card,
.will-reveal .capability,
.will-reveal .sector-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.will-reveal.is-revealed .catalog-card,
.will-reveal.is-revealed .service-card,
.will-reveal.is-revealed .delivery-step,
.will-reveal.is-revealed .related-tile,
.will-reveal.is-revealed .zone-card,
.will-reveal.is-revealed .purpose-card,
.will-reveal.is-revealed .capability,
.will-reveal.is-revealed .sector-item { opacity: 1; transform: none; }

/* The stagger. Twelve steps at 55ms is the longest run on the site - the
   sectors strip - and finishes inside 0.7s. Anything past the twelfth arrives
   with it rather than trailing off. */
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(1) { transition-delay: .04s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(2) { transition-delay: .09s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(3) { transition-delay: .14s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(4) { transition-delay: .19s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(5) { transition-delay: .24s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(6) { transition-delay: .29s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(7) { transition-delay: .34s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(8) { transition-delay: .39s; }
.will-reveal.is-revealed :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item):nth-child(n+9) { transition-delay: .44s; }

/* --- Pointer: what you can act on says so --------------------------------- */

/* The photograph inside a card frame drifts in a touch on hover. The frame
   clips it, so nothing outside the card moves. */
.catalog-card > .wp-block-image,
.service-card > .wp-block-image { overflow: hidden; }
.catalog-card > .wp-block-image img,
.service-card > .wp-block-image img {
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.catalog-card:hover > .wp-block-image img,
.service-card:hover > .wp-block-image img { transform: scale(1.045); }

.catalog-card, .service-card, .related-tile, .zone-card, .purpose-card {
  transition: border-color .22s ease, transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
.catalog-card:hover, .service-card:hover, .related-tile:hover, .zone-card:hover {
  box-shadow: 0 14px 34px rgba(10, 38, 53, .10);
}
.service-card:hover, .related-tile:hover, .zone-card:hover { transform: translateY(-3px); }

/* The arrow leans in the direction it will take you. */
.card-link a .arrow, .card-link a span[aria-hidden],
.wp-block-button__link span[aria-hidden],
.header-cta svg, .header-cta span[aria-hidden] {
  display: inline-block;
  transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.card-link a:hover span[aria-hidden],
.wp-block-button__link:hover span[aria-hidden],
.header-cta:hover svg, .header-cta:hover span[aria-hidden] { transform: translate(3px, -3px); }

.wp-block-button__link, .button, .header-cta {
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.wp-block-button__link:active, .button:active, .header-cta:active { transform: translateY(1px); }

/* A drop-down should open, not appear. */
.primary-nav .sub-menu, .mega-panel { transform-origin: top center; }
@media (min-width: 901px) {
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu,
  .primary-nav li:hover > .mega-panel,
  .primary-nav li:focus-within > .mega-panel { animation: bg-drop .2s ease both; }
  @keyframes bg-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* The register rows and roster cells on Company answer to the pointer too, so
   the eye can hold its place across twenty-five of them. */
.about-capabilities .capability,
.about-industries .capability { transition: background-color .2s ease, border-color .2s ease; }
.about-capabilities .capability:hover { background: var(--bg-mist-2); }
.about-industries .capability:hover { border-color: var(--bg-teal); }

/* --- The header, once you have left the top ------------------------------- */

.site-header { transition: box-shadow .25s ease, border-color .25s ease; }
.site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(10, 38, 53, .10);
  border-bottom-color: transparent;
}

/* Nothing that has not been revealed yet may be missing from a printout. */
@media print {
  .will-reveal, .will-reveal * { opacity: 1 !important; transform: none !important; }
}

/* --- Off, when the reader has asked for it -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enterprise-hero > .wp-block-cover__inner-container > *,
  .hero-scroll { animation: none; }
  .hero-scroll-track::after { animation: none; transform: translateY(24px); }
  .will-reveal, .will-reveal.is-revealed,
  .will-reveal :is(.catalog-card, .service-card, .delivery-step, .related-tile, .zone-card, .purpose-card, .capability, .sector-item) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .catalog-card:hover > .wp-block-image img,
  .service-card:hover > .wp-block-image img,
  .service-card:hover, .related-tile:hover, .zone-card:hover { transform: none; }
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu,
  .primary-nav li:hover > .mega-panel,
  .primary-nav li:focus-within > .mega-panel { animation: none; }
}

@media (min-width: 1050px) {
  .enterprise-cta .enterprise-container { position: relative; }
  .enterprise-cta h2 { max-width: 20ch; }
  .enterprise-cta .wp-block-buttons { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-40%); }
}

/* Components that reuse .eyebrow inside a section are not part of the sequence. */
.catalog-card .eyebrow::before, .catalog-card .eyebrow::after,
.project-sidebar .eyebrow::before, .project-sidebar .eyebrow::after,
.page-heading .eyebrow::before, .page-heading .eyebrow::after { content: none; }

/* ==========================================================================
   B. Catalogue templates
   ========================================================================== */

.page-heading-catalog { padding-bottom: calc(var(--bg-space-compact) + 16px); }
.page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; }
.page-heading-title { display: flex; flex-direction: column; gap: 16px; }
.page-heading-title h1 { margin: 0; max-width: 18ch; }
.page-heading-intro { max-width: 46ch; font-size: 1.03125rem; line-height: 1.75; color: var(--bg-on-navy-soft); margin: 0 0 8px; }

/* Sticky under the sticky header, not behind it. */
.catalog-filter { border-bottom: 1px solid var(--bg-line); background: #fff; position: sticky; top: 96px; z-index: 40; }
.admin-bar .catalog-filter { top: 128px; }
.catalog-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 74px; padding-block: 12px; }
.catalog-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 8px 14px; border: 1px solid var(--bg-line); background: #fff;
  color: var(--bg-ink); font-size: 0.84375rem; text-decoration: none;
}
.filter-chip:hover { border-color: var(--bg-teal); color: var(--bg-teal); }
.filter-chip.is-current { background: var(--bg-navy); border-color: var(--bg-navy); color: #fff; }
.filter-count { font-family: var(--bg-font-mono); color: var(--bg-muted); }
.filter-chip.is-current .filter-count { color: rgba(255, 255, 255, .72); }
.catalog-filter-status {
  font-family: var(--bg-font-mono); font-size: 0.75rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bg-muted); margin: 0; white-space: nowrap;
}

.catalog-body { padding: var(--bg-space-standard) 0; display: flex; flex-direction: column; gap: 56px; }
.catalog-group { display: flex; flex-direction: column; gap: 26px; }
.catalog-group-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--bg-line); padding-bottom: 16px; }
.catalog-group-head h2 { font-size: 1.875rem; line-height: 1.2; }
.catalog-group-sub {
  font-family: var(--bg-font-mono); font-size: 0.75rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--bg-muted); margin: 0;
}
.catalog-group .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }

/* Product and service cards built by the theme: media panel plus a padded body,
   so the picture reaches the card edge without negative margins. */
.catalog-card.product-card, .catalog-card.service-card { padding: 0; }
.card-media {
  background: var(--bg-plinth); height: 168px; display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
}
.product-card .card-media img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.service-card .card-media { padding: 0; }
.service-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-empty {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bg-muted);
}
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; flex-grow: 1; border-top: 1px solid var(--bg-line); }
.card-kicker {
  font-family: var(--bg-font-mono); font-size: 0.65625rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bg-muted);
}
.card-title { font-family: var(--bg-font-mono); font-size: var(--bg-fs-model); line-height: 1.2; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.card-blurb { font-size: 0.90625rem; line-height: 1.6; color: var(--bg-muted); margin: 0; }
.card-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 12px 0 0; }
.card-chips li { font-family: var(--bg-font-mono); font-size: 0.6875rem; color: var(--bg-teal-dark); background: var(--bg-chip); padding: 5px 8px; }
.card-body .card-link {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding-top: 12px;
  font-size: 0.84375rem; font-weight: 600; text-decoration: none;
  position: relative; z-index: 2;
}

/* The whole card is the target. The title keeps the accessible name and stays
   the only link in the tab order; the overlay gives it a card-sized hit area,
   which is what makes these usable on a phone. */
.catalog-card.product-card, .catalog-card.service-card, .mini-card { position: relative; }
.card-title a::after, .mini-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.catalog-card.product-card:focus-within, .catalog-card.service-card:focus-within,
.mini-card:focus-within { outline: 3px solid var(--bg-teal); outline-offset: 3px; }
.card-title a:focus-visible, .mini-body h3 a:focus-visible { outline: none; }

/* ==========================================================================
   C. Product detail
   ========================================================================== */

.detail-hero { background: var(--bg-navy); color: var(--bg-on-navy); padding: var(--bg-space-compact) 0 calc(var(--bg-space-compact) + 8px); }
.detail-hero .breadcrumbs { color: var(--bg-on-navy-faint); margin-bottom: 34px; }
.detail-hero .breadcrumbs [aria-current="page"] { color: #fff; }
.detail-hero .breadcrumbs a:hover { color: var(--bg-cyan); }
.detail-hero .eyebrow { color: var(--bg-cyan); display: flex; align-items: center; gap: 16px; }
.detail-hero .eyebrow::after { content: ""; flex: none; width: 44px; height: 1px; background: currentColor; opacity: .45; }

.detail-hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 64px; align-items: center; }
.detail-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.detail-title { font-family: var(--bg-font-mono); font-size: clamp(2.25rem, 4.2vw, 4.125rem); line-height: 1.04; letter-spacing: -0.02em; font-weight: 600; color: #fff; margin: 0; }
.detail-summary { font-size: 1.1875rem; line-height: 1.65; color: #bed2dc; max-width: 54ch; margin: 0; }

.detail-sectors { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.detail-sectors li { font-size: 0.8125rem; }
.detail-sectors a { display: inline-block; border: 1px solid #3d6072; padding: 8px 13px; color: #cfe6ec; text-decoration: none; }
.detail-sectors a:hover { color: #fff; border-color: var(--bg-cyan); }

.detail-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

.detail-visual { margin: 0; background: var(--bg-plinth); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.detail-visual img { width: 100%; height: 320px; object-fit: contain; }
.detail-visual figcaption {
  font-family: var(--bg-font-mono); font-size: 0.65625rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bg-muted);
  border-top: 1px solid #d5e0e6; padding-top: 15px;
}

/* Headline figures, lifted above the fold because they are what a buyer
   compares first. Same source as the chips on the catalogue card. */
.key-figures { background: var(--bg-mist); border-bottom: 1px solid var(--bg-line); }
.key-figures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 0; background: var(--bg-line); }
.key-figure { background: var(--bg-mist); padding: 26px 0 26px 28px; display: flex; flex-direction: column; gap: 7px; }
.key-figure:first-child { padding-left: 0; }
.key-figure dt {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bg-muted);
}
.key-figure dd { font-family: var(--bg-font-mono); font-size: 1.375rem; line-height: 1.25; color: var(--bg-navy); margin: 0; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; padding: var(--bg-space-standard) 0; }
.detail-content { min-width: 0; }
.detail-content > :not(.alignfull) { max-width: 100%; margin-inline: 0; }
.detail-content h2 { font-size: var(--bg-fs-sub); line-height: 1.15; margin: 44px 0 20px; }
.detail-content h2:first-child { margin-top: 0; }
.detail-content p { line-height: 1.8; max-width: var(--bg-measure); }
.detail-content ul { padding: 22px 24px 22px 42px; background: var(--bg-mist-2); }
.detail-content li { padding: 5px 0; }
.detail-content img { max-height: 430px; width: auto; max-width: 100%; object-fit: contain; }

/* Specification tables ------------------------------------------------------
 *
 * A specification is a reference list, not a spreadsheet. WordPress core draws
 * a 1px box around every cell of a table block, which is what makes an imported
 * specification read like a word-processor document; the reset below replaces
 * that grid with rules between rows only.
 *
 * The imported tables carry no header row, so the first cell of each row is the
 * label. Labels are set in the body face and muted, values in the monospace at
 * a shared baseline, so figures line up down the column and can be compared by
 * eye between one model and the next.
 */
.detail-content .wp-block-table { margin: 0 0 2em; }
.detail-content .wp-block-table table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
}
.detail-content .wp-block-table td,
.detail-content .wp-block-table th {
  border: 0;
  border-top: 1px solid var(--bg-line);
  padding: 16px 0;
  vertical-align: baseline;
  text-align: left;
  overflow-wrap: break-word;
}
.detail-content .wp-block-table tr:first-child td,
.detail-content .wp-block-table tr:first-child th { border-top: 0; padding-top: 0; }
.detail-content .wp-block-table tr:last-child td,
.detail-content .wp-block-table tr:last-child th { border-bottom: 1px solid var(--bg-line); }

.detail-content .wp-block-table td:first-child,
.detail-content .wp-block-table th:first-child {
  width: 38%;
  padding-right: 32px;
  font-family: var(--bg-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bg-muted);
}
.detail-content .wp-block-table td:first-child + td,
.detail-content .wp-block-table th:first-child + td {
  font-family: var(--bg-font-mono);
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--bg-ink);
}
/* A table an editor gives a real header row to still reads as one. */
.detail-content .wp-block-table thead th {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bg-muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--bg-line);
}
.detail-content .wp-block-table figcaption {
  font-size: 0.84375rem; color: var(--bg-muted); margin-top: 14px;
}

.project-sidebar { position: sticky; top: 120px; padding: 28px; background: var(--bg-mist-2); border-top: 3px solid var(--bg-teal); display: flex; flex-direction: column; gap: 20px; }
.project-sidebar h2 { font-size: 1.625rem; line-height: 1.14; margin: 0; max-width: 14ch; text-wrap: balance; }
.project-sidebar p { font-size: var(--bg-fs-meta); line-height: 1.7; color: var(--bg-muted); margin: 0; }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { font-size: 0.875rem; line-height: 1.6; color: var(--bg-ink-soft); padding: 13px 0; border-top: 1px solid #d3e0e6; }
.sidebar-list li:last-child { border-bottom: 1px solid #d3e0e6; }
.sidebar-direct { border-top: 1px solid #d3e0e6; padding-top: 18px; }
.sidebar-direct p { color: var(--bg-ink); }
.sidebar-label { font-family: var(--bg-font-mono); font-size: 0.65625rem !important; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--bg-muted) !important; margin-bottom: 6px !important; }

.related-content { border-top: 1px solid var(--bg-line); padding-top: 26px; margin-top: 48px; }
.related-content h2 { font-size: 1.5rem; margin: 0 0 18px; }
.related-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--bg-mist); padding: 16px 20px; text-decoration: none; font-size: 0.96875rem; }
.related-links a:hover { background: var(--bg-chip); }

.related-systems { background: var(--bg-mist); border-top: 1px solid var(--bg-line); padding: var(--bg-space-standard) 0; }
.related-systems-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.related-systems-head h2 { font-size: 1.875rem; line-height: 1.2; }
.related-systems-sub { font-family: var(--bg-font-mono); font-size: 0.75rem; letter-spacing: .11em; text-transform: uppercase; color: var(--bg-muted); margin: 0; }
.related-systems-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mini-card { display: flex; gap: 20px; background: #fff; border: 1px solid var(--bg-line); padding: 18px; }
.mini-media { background: var(--bg-plinth); width: 124px; height: 94px; flex: none; display: flex; align-items: center; justify-content: center; padding: 9px; }
.mini-media img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.mini-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mini-body h3 { font-family: var(--bg-font-mono); font-size: 1.125rem; margin: 0; }
.mini-body h3 a { color: var(--bg-navy); text-decoration: none; }
.mini-body h3 a:hover { color: var(--bg-teal); }
.mini-body p { font-size: 0.875rem; line-height: 1.55; color: var(--bg-muted); margin: 0; }

.closing-cta { background: var(--bg-citron); padding: var(--bg-space-standard) 0; }
.closing-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 56px; }
.closing-cta-copy { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.closing-cta h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); color: var(--bg-ink); }
.closing-cta p { font-size: var(--bg-fs-body); line-height: 1.7; color: var(--bg-ink-soft); max-width: 64ch; margin: 0; }
.closing-cta .button { background: var(--bg-navy); color: #fff; white-space: nowrap; }
.closing-cta .button:hover { background: var(--bg-navy-deep); }

/* ==========================================================================
   D. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecosystem-section .zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cards above the form: a visitor after a phone number should not have to
     scroll past every field to reach it. */
  .about-split { grid-template-columns: 1fr; gap: 34px; }
  .about-capabilities .capability-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-industries .capability-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form-card { padding: 30px 28px 34px; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 0; }
  .why-grid > .catalog-card:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .capabilities-section .catalog-grid,
  .catalog-group .catalog-grid,
  .catalog-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .related-systems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enterprise-section .wp-block-columns { gap: 36px; }
}

@media (max-width: 900px) {
  .enterprise-hero { min-height: 540px !important; }
  .enterprise-hero .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(7, 28, 39, .58) 0%, rgba(7, 28, 39, .92) 62%, var(--bg-navy-deep) 100%) !important;
  }
  .hero-credentials .wp-block-columns { gap: 20px; }
  .sector-strip .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; background: transparent; }
  .sector-strip .wp-block-column { padding: 10px 0; }
  .about-industries .capability-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading-row { display: block; }
  .page-heading-intro { margin-top: 20px; max-width: none; }
  .detail-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-layout { grid-template-columns: 1fr; gap: 44px; }
  .project-sidebar { position: static; }
  .catalog-filter { position: static; }
}

@media (max-width: 700px) {
  .service-grid { grid-template-columns: 1fr; }
  .ecosystem-section .zone-grid { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: 1fr; }
  .reason-grid, .purpose-grid { grid-template-columns: 1fr; }
  .purpose-card { padding: 26px 24px 28px; }
  .contact-aside { grid-template-columns: 1fr; }
  .contact-form-card { padding: 24px 20px 28px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 24px; }
  .capability-strip { gap: 26px 10px; }
  /* Capped rather than free-growing: without this a last row holding one item
     stretches it to the full width, twice the size of everything above it. */
  .capability { flex: 1 1 88px; max-width: 32%; }
  .cap-icon { width: 50px; height: 50px; }
  /* One column each: the register's rules become a single stack of rows, and
     every industry cell takes the full width rather than leaving a ragged
     right edge of differently-sized boxes on a phone. */
  .about-capabilities .capability-strip { grid-template-columns: 1fr; }
  .about-capabilities .capability { padding-right: 0; }
  .about-industries .capability-strip { grid-template-columns: 1fr; gap: 10px; }
  .related-grid { grid-template-columns: 1fr; }
  .service-card > .wp-block-image img { height: 168px; }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .why-grid > .catalog-card {
    border-left: 0; border-top: 1px solid var(--bg-line);
    padding: 24px 0 0; margin-top: 24px;
  }
  .why-grid > .catalog-card:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
  /* The connecting rule only reads horizontally; stacked, the markers stand alone. */
  .delivery-grid:not(.delivery-grid-3) > .delivery-step::before { content: none; }
  .delivery-grid:not(.delivery-grid-3) { gap: 26px 0; }
  .catalog-grid, .catalog-grid-4,
  .capabilities-section .catalog-grid,
  .catalog-group .catalog-grid { grid-template-columns: 1fr; }
  .delivery-grid, .delivery-grid-3 { grid-template-columns: 1fr; gap: 26px; }
  .related-systems-grid, .related-links { grid-template-columns: 1fr; }
  .enterprise-split img { height: 280px; }
  .catalog-filter-status { display: none; }
  .closing-cta-row { display: block; }
  .closing-cta .button { margin-top: 24px; width: 100%; }
  .detail-visual img { height: 240px; }
  .key-figure, .key-figure:first-child { padding: 20px 0; }
  .key-figures-grid { grid-template-columns: 1fr 1fr; }
  /* Two columns will not fit, so each row becomes a label above its value.
     The rule moves to the top of the label, which keeps the pairs grouped. */
  .detail-content .wp-block-table table,
  .detail-content .wp-block-table tbody,
  .detail-content .wp-block-table tr,
  .detail-content .wp-block-table td,
  .detail-content .wp-block-table th { display: block; width: auto; }
  .detail-content .wp-block-table td:first-child,
  .detail-content .wp-block-table th:first-child {
    width: auto; padding: 16px 0 2px; border-top: 1px solid var(--bg-line);
  }
  .detail-content .wp-block-table td:first-child + td,
  .detail-content .wp-block-table th:first-child + td { border-top: 0; padding-top: 0; }
  .detail-content .wp-block-table tr:first-child td:first-child { padding-top: 0; }
  .detail-content .wp-block-table tr:last-child td:last-child { border-bottom: 1px solid var(--bg-line); padding-bottom: 16px; }
  .mini-card { flex-direction: column; }
  .mini-media { width: 100%; height: 140px; }
  .enterprise-section .wp-block-columns { display: block; }
  .enterprise-section .wp-block-column + .wp-block-column { margin-top: 28px; }

  /* Touch targets. On a phone every link a thumb has to find gets at least 44px
     of height, which is what the inline links in cards, the footer columns and
     the enquiry rail are short of by default. */
  .card-body .card-link,
  .catalog-card .card-link a { min-height: 44px; padding-top: 14px; }
  .footer-list a,
  .footer-lines a,
  .sidebar-direct a { display: inline-flex; align-items: center; min-height: 44px; }
  .detail-sectors a { padding: 12px 16px; }
  .mega-column a,
  .primary-nav .sub-menu a { display: block; padding-block: 12px; }
}