/* Page and section styles. */

/* ---------- Section head (heading left, aside right) ---------- */

.eh-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 34px;
}
.eh-sectionhead > div { max-width: 620px; }
.eh-sectionhead__aside {
  font-size: var(--eh-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--eh-slate);
  max-width: 400px;
  margin: 0;
}
.eh-navy-bg .eh-sectionhead__aside,
.eh-cta .eh-sectionhead__aside { color: var(--eh-on-dark-body); }

@media (max-width: 899px) {
  .eh-sectionhead { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .eh-sectionhead__aside { max-width: none; }
}

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

.eh-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--eh-navy);
  position: relative;
  overflow: hidden;
}
.eh-hero__stripe {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background: repeating-linear-gradient(115deg, var(--eh-orange) 0, var(--eh-orange) 9px, transparent 9px, transparent 42px);
  pointer-events: none;
}
/* The stat strip used to sit at the bottom of this column and carry its own
   spacing. With that gone the copy is centred against the photo instead of
   hanging from the top. */
.eh-hero__copy {
  padding: 66px 56px 66px var(--eh-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  position: relative;
}
.eh-hero__badge {
  align-self: flex-start;
  border: 1px solid rgba(255, 95, 0, 0.55);
  color: var(--eh-on-dark-orange);
  font-size: var(--eh-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
}
.eh-hero h1 { color: var(--eh-white); }
.eh-hero__lead {
  font-size: var(--eh-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--eh-on-dark-body);
  max-width: 560px;
  margin: 0;
}
.eh-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }


.eh-hero__media { position: relative; background: var(--eh-navy-2); min-height: 520px; }
.eh-hero__media .eh-photo { position: absolute; inset: 0; border: 0; }

@media (max-width: 899px) {
  .eh-hero { grid-template-columns: 1fr; }
  .eh-hero__copy { padding: 30px var(--eh-gutter) 34px; gap: 18px; }
  .eh-hero__media { min-height: 260px; order: -1; }
  .eh-hero__actions .eh-btn { flex: 1 1 auto; }
}

/* ---------- Supported systems bar ---------- */

.eh-brandbar { background: var(--eh-mist); }
.eh-brandbar__inner {
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.eh-brandbar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eh-steel);
  line-height: 1.5;
  flex: 0 0 130px;
}
.eh-brandbar__names {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.eh-brandbar__names span {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--eh-slate);
}

@media (max-width: 899px) {
  .eh-brandbar__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .eh-brandbar__label { flex: none; }
  .eh-brandbar__names { gap: 12px 18px; justify-content: flex-start; }
  .eh-brandbar__names span { font-size: 13.5px; }
}

/* ---------- Service cards ---------- */

.eh-card__num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--eh-orange);
}
.eh-ticks { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 7px; }
.eh-ticks li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--eh-slate);
}
.eh-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--eh-orange);
}
.eh-morelink {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eh-orange-deep);
  margin-top: auto;
  padding-top: 14px;
}
.eh-morelink:hover { color: var(--eh-orange); }

/* ---------- Work gallery ---------- */

.eh-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.eh-gallery__item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.eh-gallery__item figcaption { display: flex; flex-direction: column; gap: 4px; }
.eh-gallery__title { font-size: 13.5px; font-weight: 800; color: var(--eh-navy); }
.eh-gallery__note { font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--eh-steel); }

@media (max-width: 979px) { .eh-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 479px) { .eh-gallery { grid-template-columns: 1fr; } }

/* ---------- Founder ---------- */

/* Back to the design's proportion. This was pinned to 340px while the only
   founder photograph available was a 286x490 original that a wider column blew
   up ~1.7x; the 1080x1920 set removed that constraint. */
.eh-founder { display: grid; grid-template-columns: 0.8fr 1fr; gap: 56px; align-items: start; }
.eh-founder__copy { display: flex; flex-direction: column; gap: 18px; }
.eh-founder__copy .eh-rows { margin-top: 6px; }
.eh-founder__cta { align-self: flex-start; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; padding: 16px 26px; }

@media (max-width: 899px) {
  .eh-founder { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Map ---------- */

/* isolation is load-bearing: Leaflet gives its panes z-index 400 and its
   controls 1000. Without a stacking context here those numbers compete with
   the page's own layers and the map paints over the fixed action bar. */
.eh-map { position: relative; isolation: isolate; width: 100%; background: #E6ECF4; overflow: hidden; }
.eh-map__canvas { position: absolute; inset: 0; background: #E6ECF4; }
.eh-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.1) contrast(0.86); }
.eh-map .leaflet-container { background: #E6ECF4; font-family: var(--eh-font); }
.eh-map__tint {
  position: absolute; inset: 0;
  background: #C7D7EA;
  opacity: 0.5;
  pointer-events: none;
  z-index: 400;
  mix-blend-mode: multiply;
}
.eh-map__vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 401;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(1, 32, 78, 0.13) 100%);
}

.eh-map .pin { position: relative; }
.eh-map .pin i {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--eh-orange);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(255, 95, 0, 0.28);
}
.eh-map .pin.base i {
  width: 15px; height: 15px;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(255, 95, 0, 0.3);
}
.eh-map .pin.base::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 95, 0, 0.75);
  animation: eh-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes eh-ping {
  0%        { transform: scale(1);   opacity: .9; }
  80%, 100% { transform: scale(3.6); opacity: 0; }
}
.eh-map .lbl {
  position: absolute; left: 14px; top: -9px;
  white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--eh-navy);
  text-shadow: 0 0 3px #FFFFFF, 0 0 7px #FFFFFF, 0 1px 0 #FFFFFF;
}
.eh-map .pin.base .lbl { left: 17px; font-size: 12.5px; font-weight: 800; color: var(--eh-ink); }

.eh-map .leaflet-popup-content-wrapper {
  background: var(--eh-navy);
  color: #E8EEF7;
  border-radius: 0;
  border: 1px solid rgba(255, 95, 0, 0.45);
  box-shadow: 0 12px 34px rgba(1, 32, 78, .28);
}
.eh-map .leaflet-popup-tip { background: var(--eh-navy); border: 1px solid rgba(255, 95, 0, 0.45); }
.eh-map .leaflet-popup-content { margin: 11px 14px; font-size: 12px; line-height: 1.5; }
.eh-map .leaflet-popup-content b { display: block; font-size: 13px; letter-spacing: 0.02em; margin-bottom: 3px; }
.eh-map .leaflet-popup-content span { font-size: 10px; font-weight: 700; color: var(--eh-orange); letter-spacing: 0.06em; }
.eh-map .leaflet-control-attribution { background: rgba(255,255,255,.85) !important; color: var(--eh-steel) !important; font-size: 9px !important; }
.eh-map .leaflet-control-attribution a { color: var(--eh-steel) !important; }
.eh-map .leaflet-bar a { background: #FFFFFF; color: var(--eh-navy); border-bottom-color: var(--eh-line); }
.eh-map .leaflet-bar a:hover { background: var(--eh-mist); color: var(--eh-orange-deep); }

@media (max-width: 767px) {
  /* :not() so the homepage's bordered box keeps driving its own height. */
  .eh-map:not(.eh-map--home) { height: 340px !important; }
}

/* ---------- Coverage zones ---------- */

.eh-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.eh-zone {
  border-top: 2px solid var(--eh-navy);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eh-zone__places { font-size: 14px; font-weight: 800; color: var(--eh-navy); line-height: 1.3; }
.eh-zone__desc { font-size: 12px; font-weight: 500; color: var(--eh-steel); }
.eh-zone__dist {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eh-orange-deep);
  margin-top: 4px;
}
.eh-zones__more { margin-top: 22px; }

@media (max-width: 899px) { .eh-zones { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 479px) { .eh-zones { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */

.eh-cta { background: var(--eh-navy); }
.eh-cta__inner {
  padding-top: var(--eh-section-y);
  padding-bottom: var(--eh-section-y);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.eh-cta__heading {
  font-style: italic;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--eh-white);
  margin-bottom: 12px;
}
.eh-cta__text {
  font-size: var(--eh-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--eh-on-dark-body);
  max-width: 520px;
  margin: 0;
}
.eh-cta__actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

@media (max-width: 899px) {
  .eh-cta__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .eh-cta__heading { font-size: 23px; }
  .eh-cta__actions { width: 100%; }
  .eh-cta__actions .eh-btn { flex: 1 1 auto; }
}

/* ---------- Breadcrumb bar ---------- */

/* Navy, not mist. Every page type without exception has a navy hero directly
   after the trail (checked all ten), so a pale band here was a seam between
   the white header and the hero rather than a section of its own — and at
   #F1F4F9 against white it was a ~4% step, paying a complexity cost for
   something barely visible. Navy makes the trail the top of the hero instead
   of a strip above it. If a page is ever built with a light hero, it needs its
   own rule here. */
.eh-crumbs {
  background: var(--eh-navy);
  padding: 0;
  color: var(--eh-on-dark-meta);
  position: relative;
}
/* The hero's diagonal stripe stops at the section boundary, so repeat it here
   or the trail reads as a flat block sitting on a textured one. */
.eh-crumbs::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background: repeating-linear-gradient(115deg, var(--eh-orange) 0, var(--eh-orange) 9px, transparent 9px, transparent 42px);
  pointer-events: none;
}
.eh-crumbs > div { position: relative; }
.eh-crumbs a { color: var(--eh-on-dark-secondary); }
.eh-crumbs a:hover { color: var(--eh-on-dark-orange); }
.eh-crumbs__sep { color: rgba(255, 255, 255, 0.28); }
/* Vertical only. A `padding: 12px 0` shorthand here outranks .eh-pad on the
   same element (0,1,1 vs 0,1,0) and would zero the page gutter, leaving the
   trail flush against the viewport edge. */
.eh-crumbs > div { padding-top: 16px; padding-bottom: 4px; }

/* Inside a splithero the trail sits in the copy column, not in a bar of its
   own. A full-width bar above the hero made the media column start ~39px
   lower than the copy column — with the bar the same navy as the hero, that
   read as a navy gap above the image rather than as a separator. In the copy
   column the media runs the hero's full height and the trail sits where a
   reader expects it: above the eyebrow. */
.eh-splithero .eh-crumbs {
  background: none;
  padding: 0;
  margin-bottom: 18px;
}
.eh-splithero .eh-crumbs::before { display: none; }
.eh-splithero .eh-crumbs > div {
  padding: 0;
  max-width: none;
  width: auto;
}

/* ---------- Full-width page hero (navy) ---------- */

.eh-pagehero { background: var(--eh-navy); position: relative; overflow: hidden; }
.eh-pagehero__stripe {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background: repeating-linear-gradient(115deg, var(--eh-orange) 0, var(--eh-orange) 9px, transparent 9px, transparent 42px);
  pointer-events: none;
}
.eh-pagehero__inner { position: relative; padding-top: 64px; padding-bottom: 66px; }
.eh-pagehero h1 { color: var(--eh-white); max-width: 900px; }
.eh-pagehero__lead {
  font-size: var(--eh-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--eh-on-dark-body);
  max-width: 680px;
  margin: 18px 0 0;
}

@media (max-width: 767px) {
  .eh-pagehero__inner { padding-top: 28px; padding-bottom: 30px; }
}

/* ---------- Split page hero (service pages) ---------- */

/* 1.25fr, not 1.08fr: the hero's height is set by the copy column, so a page
   whose headline takes a third line and whose chips take a second row gets a
   taller hero and a squarer photo than its neighbours. At 1.08fr the copy had
   612px of text width — commercial-maritime's headline needs ~630 and its
   three chips 637, so both wrapped and the hero ran 645px against 563 on
   yacht-electrical. 1.25fr gives 664px and both fit. */
.eh-splithero { display: grid; grid-template-columns: 1.25fr 1fr; background: var(--eh-navy); position: relative; overflow: hidden; }
.eh-splithero__copy { padding: 60px 56px 60px var(--eh-gutter); position: relative; display: flex; flex-direction: column; gap: 20px; }
.eh-splithero h1 { color: var(--eh-white); }
.eh-splithero__lead { font-size: var(--eh-lead); font-weight: 500; line-height: 1.6; color: var(--eh-on-dark-body); max-width: 560px; margin: 0; }
.eh-splithero__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.eh-splithero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* z-index is load-bearing, not decoration. The hero's diagonal stripe is an
   inset:0 absolute child of .eh-splithero, so it spans the media column too.
   Both it and the media are positioned at z-index auto, which means paint
   order follows *order-modified* document order — so the desktop stacking
   (stripe, copy, media) only hid the stripe by luck of DOM order. The moment
   the 899px rule gives the media order:-1 to lift the photo above the copy,
   the media paints first and the stripe lands on top of the photograph as
   orange diagonals. Stating the layer explicitly makes it order-independent. */
.eh-splithero__media { position: relative; z-index: 1; background: var(--eh-navy-2); min-height: 460px; }
.eh-splithero__media .eh-photo { position: absolute; inset: 0; border: 0; }

/* Hero video. Takes the same frame .eh-photo would, so the split hero's
   geometry is identical whether the slot plays or sits still. object-fit
   matches .eh-photo img — the source is 4:3 and the column is not, and cover
   is what keeps the machinery filling the frame at every width. */
/* The poster is repeated here as a background (the element carries it inline,
   from eh_hero_video()) because Safari intermittently paints nothing for a
   video it has not opened — reliably so on back/forward — and the navy then
   shows through as an empty hero. Same URL as the `poster` attribute, so it
   costs one request, and `cover` matches .eh-herovid__el's object-fit so the
   still and the first video frame land in exactly the same place. */
.eh-splithero__media .eh-herovid { position: absolute; inset: 0; overflow: hidden; background: var(--eh-navy-2) center / cover no-repeat; }
.eh-herovid__el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The tint, and the reason for it: this is bright, warm engine-room footage
   butted straight against a navy copy column, and without help the two halves
   read as two different pages. Weighted to the seam — strong where the video
   meets the copy, almost nothing at the outer edge — so it blends the join
   instead of dimming the picture. Drop the ::after rule to remove it. */
.eh-herovid::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 32, 78, 0.60) 0%, rgba(1, 32, 78, 0.15) 34%, rgba(1, 32, 78, 0.05) 100%),
    rgba(1, 32, 78, 0.10);
}

@media (max-width: 899px) {
  .eh-splithero { grid-template-columns: 1fr; }
  .eh-splithero__copy { padding: 28px var(--eh-gutter) 30px; gap: 14px; }
  .eh-splithero__media { min-height: 240px; order: -1; }
  .eh-splithero__actions .eh-btn { flex: 1 1 auto; }
  /* Stacked, the media sits above the copy (order:-1), so the seam moves from
     the left edge to the bottom one and the gradient has to follow it. */
  .eh-herovid::after {
    background:
      linear-gradient(0deg, rgba(1, 32, 78, 0.55) 0%, rgba(1, 32, 78, 0.12) 38%, rgba(1, 32, 78, 0.04) 100%),
      rgba(1, 32, 78, 0.10);
  }
}

/* ---------- Spec strip ---------- */

.eh-specstrip { background: var(--eh-mist); }
.eh-specstrip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.eh-spec {
  padding: 22px 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eh-spec:not(:first-child) { padding-left: 24px; border-left: 1px solid var(--eh-line); }
.eh-spec__title { font-size: 15px; font-weight: 800; color: var(--eh-navy); line-height: 1.25; }
.eh-spec__desc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--eh-steel);
  line-height: 1.5;
}

@media (max-width: 899px) {
  .eh-specstrip__inner { grid-template-columns: repeat(2, 1fr); }
  .eh-spec { padding: 14px 12px 16px 0; }
  .eh-spec:nth-child(odd) { padding-left: 0; border-left: 0; }
  .eh-spec:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--eh-line); }
  .eh-spec:nth-child(n+3) { border-top: 1px solid var(--eh-line); }
  .eh-spec__title { font-size: 13px; }
  .eh-spec__desc { font-size: 9px; }
}

/* ---------- Service-area cards (hub) ---------- */

/* Equal rows, so every card is as tall as the tallest. The media column has no
   height of its own — it stretches to whatever the text column needs — and the
   three cards carry a different number of sublist rows, so without this the
   images came out 466, 415 and 364px tall against an identical 514px width.
   Equalising the rows is what makes the images share one ratio; setting a
   ratio on the media itself would leave it floating in the taller cards. */
.eh-areas { display: grid; gap: 24px; grid-auto-rows: 1fr; }
.eh-area {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  border: 1px solid var(--eh-line);
  background: var(--eh-white);
}
.eh-area__media { position: relative; min-height: 320px; }
.eh-area__media .eh-photo { position: absolute; inset: 0; border: 0; }
.eh-area__body { padding: 34px; display: flex; flex-direction: column; gap: 12px; }
.eh-area__title { font-size: 21px; font-weight: 800; color: var(--eh-navy); line-height: 1.2; }
.eh-area__cta { align-self: flex-start; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; padding: 15px 24px; margin-top: 6px; }

.eh-sublist { border-top: 2px solid var(--eh-navy); margin-top: 6px; }
.eh-sublist__item {
  padding: 13px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  color: var(--eh-navy);
  border-bottom: 1px solid var(--eh-line);
  transition: padding-left var(--eh-transition), color var(--eh-transition);
}
.eh-sublist__item:hover { color: var(--eh-orange-deep); padding-left: 4px; }
.eh-sublist__label { font-size: 14px; font-weight: 700; }
.eh-sublist__slug { font-size: 11px; font-weight: 500; color: var(--eh-steel); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 899px) {
  /* Stacked, so equal card heights would hand the surplus to the image row and
     the three would diverge again — the opposite of what it fixes on desktop.
     Here each card is its own height and the media is a flat 200px. */
  .eh-areas { grid-auto-rows: auto; }
  .eh-area { grid-template-columns: 1fr; }
  .eh-area__media { min-height: 200px; }
  .eh-area__body { padding: 18px; }
  .eh-area__title { font-size: 17px; }
  .eh-sublist__slug { display: none; }
}

/* ---------- Standard scope grid ---------- */

.eh-scope__item { border-top: 2px solid var(--eh-navy); padding-top: 16px; }
.eh-scope__title { font-size: 15px; font-weight: 800; color: var(--eh-navy); margin-bottom: 8px; line-height: 1.25; }
.eh-scope__item p { font-size: 13px; line-height: 1.6; color: var(--eh-slate); margin: 0; }

/* ---------- Numbered sections (service pages) ---------- */

.eh-numsec { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; }
/* order: swaps which side the photo sits on, but the track sizes stay put — so
   a flipped section handed its photo the wide 1fr column and came out 100px
   wider than its neighbours. Mirror the tracks with the order. */
.eh-numsec--flip { grid-template-columns: 0.85fr 1fr; }
.eh-numsec--flip .eh-numsec__copy { order: 2; }
.eh-numsec--flip .eh-numsec__media { order: 1; }
.eh-numsec__copy { display: flex; flex-direction: column; gap: 12px; }
.eh-numsec__title { font-size: 24px; font-weight: 800; color: var(--eh-navy); line-height: 1.15; }
/* A ratio, not a fixed height: the column is fluid, so a flat 380px drifted
   from a 1.48 crop at 1440 to a near-square 0.98 at 1024. 16/10 matches the
   source photographs, so the frame is the same shape at every width. */
.eh-numsec__media { position: relative; aspect-ratio: 16 / 10; }
.eh-numsec__media .eh-photo { position: absolute; inset: 0; }
.eh-ticks--two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 24px; }

@media (max-width: 899px) {
  .eh-numsec,
  .eh-numsec--flip { grid-template-columns: 1fr; gap: 20px; }
  .eh-numsec--flip .eh-numsec__copy,
  .eh-numsec--flip .eh-numsec__media { order: 0; }
  .eh-numsec__title { font-size: 19px; }
  .eh-ticks--two { grid-template-columns: 1fr; }
}

/* ---------- Distinguishing block (navy) ---------- */

.eh-distinguish { background: var(--eh-navy); }
.eh-distinguish .eh-eyebrow { color: var(--eh-on-dark-orange); }
.eh-distinguish__title { color: var(--eh-white); font-size: var(--eh-h2); }
.eh-distinguish__intro {
  font-size: var(--eh-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--eh-on-dark-body);
  max-width: 680px;
  margin: 14px 0 0;
}
.eh-steps { display: grid; gap: 24px; margin-top: 34px; }
.eh-steps--4 { grid-template-columns: repeat(4, 1fr); }
.eh-steps--3 { grid-template-columns: repeat(3, 1fr); }
.eh-step { border-top: 2px solid var(--eh-orange); padding-top: 14px; }
.eh-step__n {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eh-on-dark-orange);
  margin-bottom: 8px;
}
.eh-step__title { font-size: 15px; font-weight: 800; color: var(--eh-white); margin-bottom: 7px; line-height: 1.25; }
.eh-step p { font-size: 13px; line-height: 1.6; color: var(--eh-on-dark-body); margin: 0; }

@media (max-width: 899px) {
  .eh-steps--4, .eh-steps--3 { grid-template-columns: 1fr; gap: 16px; }
  .eh-steps { margin-top: 22px; }
}

/* ---------- Sub-page cards ---------- */

.eh-subcard__slug {
  font-size: 11px;
  font-weight: 500;
  color: var(--eh-steel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
a.eh-subcard { color: inherit; }
a.eh-subcard p { color: var(--eh-slate); }

/* ---------- Typical callouts ---------- */

.eh-callouts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  border-top: 2px solid var(--eh-navy);
}
.eh-callouts li {
  padding: 14px 0;
  border-bottom: 1px solid var(--eh-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--eh-navy);
}

@media (max-width: 767px) {
  .eh-callouts { grid-template-columns: 1fr; gap: 0; }
  .eh-callouts li { font-size: 13px; padding: 12px 0; }
}

/* ---------- Scheduled inspection block (service area pages) ----------
   Sits directly under .eh-callouts, which is a two-column list of bordered
   rows. A second list of bordered rows there would have read as more of the
   same section, the way Related notes did under the FAQ — so this is a tinted
   panel with a copy column beside the list, structurally different at a
   glance rather than only different in wording. */

.eh-inspection__box {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 40px;
  background: var(--eh-mist);
  border-left: 3px solid var(--eh-orange);
  padding: 36px 40px;
}
.eh-inspection__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eh-orange);
  margin-bottom: 10px;
}
.eh-inspection__title { font-size: 26px; font-weight: 800; color: var(--eh-navy); line-height: 1.15; margin: 0 0 12px; }
.eh-inspection__lead { font-size: 15px; line-height: 1.65; color: var(--eh-slate); margin: 0; }
.eh-inspection__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--eh-slate);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--eh-line);
}
.eh-inspection__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.eh-inspection__list li { display: flex; flex-direction: column; gap: 3px; }
.eh-inspection__list strong { font-size: 14px; font-weight: 800; color: var(--eh-navy); }
.eh-inspection__list span { font-size: 13px; line-height: 1.55; color: var(--eh-slate); }

@media (max-width: 899px) {
  .eh-inspection__box { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .eh-inspection__title { font-size: 21px; }
}

/* The hub's compact version. Deliberately not the mist panel above: the
   services hub already has one mist section directly below this, and two
   tinted bands in a row read as one confused block. */
.eh-inspectband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 2px solid var(--eh-navy);
  border-bottom: 1px solid var(--eh-line);
  padding: 26px 0;
}
.eh-inspectband__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eh-orange);
  margin-bottom: 8px;
}
.eh-inspectband__title { font-size: 22px; font-weight: 800; color: var(--eh-navy); line-height: 1.2; margin: 0 0 8px; }
.eh-inspectband__lead { font-size: 14px; line-height: 1.6; color: var(--eh-slate); margin: 0; max-width: 62ch; }
.eh-inspectband__link {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eh-orange);
  text-decoration: none;
}
.eh-inspectband__link:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .eh-inspectband { flex-direction: column; align-items: flex-start; gap: 16px; }
  .eh-inspectband__title { font-size: 19px; }
}

/* ---------- Two-column layout (articles, service sub-pages) ---------- */

.eh-twocol { display: grid; grid-template-columns: minmax(0, 820px) 1fr; gap: 56px; align-items: start; }
.eh-twocol__main > * + * { margin-top: 20px; }
.eh-twocol__main h2 { font-size: var(--eh-h3); margin-top: 34px; scroll-margin-top: 20px; }
.eh-twocol__main h3 { font-size: 17px; margin-top: 24px; }
.eh-twocol__main p { line-height: 1.75; }
.eh-twocol__figure { margin-top: 28px; }

.eh-twocol__side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }

.eh-sidecard { border: 1px solid var(--eh-line); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.eh-sidecard__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eh-steel);
}
.eh-sidecard__label--spaced { margin-top: 10px; }
.eh-sidecard__link { font-size: 14px; font-weight: 800; color: var(--eh-navy); }
.eh-sidecard__link:hover { color: var(--eh-orange-deep); }
.eh-sidecard__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.eh-sidecard__list a { font-size: 13px; font-weight: 600; color: var(--eh-slate); }
.eh-sidecard__list a:hover { color: var(--eh-orange-deep); }

.eh-sidecard--navy { background: var(--eh-navy); border-color: var(--eh-navy); }
.eh-sidecard--navy .eh-sidecard__label { color: var(--eh-on-dark-orange); }
.eh-sidecard--navy p { font-size: 13px; line-height: 1.6; color: var(--eh-on-dark-body); margin: 0; }
.eh-sidecard--navy .eh-btn { text-align: center; font-size: 12.5px; padding: 14px 18px; }

@media (max-width: 979px) {
  .eh-twocol { grid-template-columns: 1fr; gap: 28px; }
  .eh-twocol__side { position: static; }
}

/* ---------- Editor prose ---------- */

.eh-prose > * + * { margin-top: 18px; }
.eh-prose ul, .eh-prose ol { padding-left: 1.2em; }
.eh-prose li { margin-bottom: 7px; }

/* ---------- About: instrument inventory ---------- */

.eh-inventory__intro { max-width: 720px; margin-bottom: 28px; }
.eh-inventory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.eh-inventory__item { border-top: 2px solid var(--eh-navy); padding-top: 14px; }
.eh-inventory__title { font-size: 14.5px; font-weight: 800; color: var(--eh-navy); margin-bottom: 7px; line-height: 1.3; }
.eh-inventory__item p { font-size: 12.5px; line-height: 1.6; color: var(--eh-slate); margin: 0; }
.eh-inventory__figure { margin-top: 34px; }

@media (max-width: 979px) { .eh-inventory { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 479px) { .eh-inventory { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */

.eh-contact { display: grid; grid-template-columns: 0.72fr 1fr; gap: 48px; align-items: start; }

.eh-contact__side { background: var(--eh-mist); padding: 32px; }
.eh-contact__rows { margin-top: 6px; }
.eh-contact__rows .eh-row { grid-template-columns: 110px 1fr; gap: 16px; }
.eh-contact__actions { display: grid; gap: 10px; margin-top: 24px; }
.eh-contact__actions .eh-btn { text-align: center; }

.eh-checklist { margin-top: 28px; border-top: 1px solid var(--eh-line); padding-top: 20px; }
.eh-checklist__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eh-steel);
  margin-bottom: 12px;
}

.eh-form__intro { font-size: 13px; color: var(--eh-steel); margin: 0 0 22px; }
.eh-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.eh-field--wide { grid-column: 1 / -1; }
.eh-field__hint { font-size: 11px; color: var(--eh-steel); }
.eh-input--file { padding: 10px 12px; font-size: 12.5px; }

.eh-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; }
.eh-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--eh-orange); flex: 0 0 auto; }
.eh-consent label { font-size: 12.5px; line-height: 1.6; color: var(--eh-slate); }

.eh-form__submit { display: flex; align-items: center; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.eh-form__note { font-size: 11.5px; color: var(--eh-steel); }

.eh-formnotice { padding: 18px 20px; border-left: 4px solid var(--eh-orange); background: var(--eh-mist); font-size: 13.5px; line-height: 1.6; }
.eh-formnotice strong { display: block; color: var(--eh-navy); margin-bottom: 4px; font-weight: 800; }
.eh-formnotice--error { border-left-color: var(--eh-orange-deep); color: var(--eh-orange-deep); font-weight: 600; margin-bottom: 20px; }

@media (max-width: 979px) {
  .eh-contact { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
  .eh-contact__side { padding: 18px; }
  .eh-form__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Locations index ---------- */

.eh-map--full { margin: 0; }
.eh-zonecard__marinas { font-size: 12px; font-weight: 600; color: var(--eh-steel); line-height: 1.55; margin: 0; }
.eh-zonecard__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--eh-line);
}
.eh-zonecard__dist {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eh-navy);
}
.eh-zonecard .eh-morelink { margin-top: 0; padding-top: 0; }

/* ---------- Berth list ---------- */

.eh-berths { border-top: 2px solid var(--eh-navy); }
.eh-berth {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--eh-line);
}
.eh-berth__main { display: flex; flex-direction: column; gap: 3px; }
.eh-berth__name { font-size: 15px; font-weight: 800; color: var(--eh-navy); }
.eh-berth__desc { font-size: 12.5px; font-weight: 500; color: var(--eh-steel); line-height: 1.55; }
.eh-berth__dist {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eh-orange-deep);
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .eh-berth { flex-direction: column; gap: 6px; padding: 13px 0; }
  .eh-berth__name { font-size: 13.5px; }
}

/* ---------- Article listing ---------- */

.eh-chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.eh-filterchip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--eh-line);
  color: var(--eh-navy);
  background: var(--eh-white);
  transition: background-color var(--eh-transition), color var(--eh-transition), border-color var(--eh-transition);
}
.eh-filterchip:hover { border-color: var(--eh-navy); color: var(--eh-navy); }
.eh-filterchip.is-active { background: var(--eh-navy); border-color: var(--eh-navy); color: var(--eh-white); }

.eh-article__meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eh-steel);
}
.eh-article .eh-card__title a { color: var(--eh-navy); }
.eh-article .eh-card__title a:hover { color: var(--eh-orange-deep); }
.eh-article__media { display: block; line-height: 0; }
.eh-article__media img { width: 100%; height: auto; display: block; }

.eh-equipment { margin-top: 64px; border-top: 1px solid var(--eh-line); padding-top: 44px; }
.eh-equipment__intro { max-width: 720px; margin: 0 0 28px; }
.eh-equipment__item { border-top: 2px solid var(--eh-navy); padding-top: 14px; }
.eh-equipment__brand { font-size: 14.5px; font-weight: 800; color: var(--eh-navy); margin-bottom: 6px; }
.eh-equipment__item p { font-size: 12px; line-height: 1.6; color: var(--eh-steel); margin: 0; }

.pagination, .nav-links { display: flex; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.pagination .page-numbers, .nav-links .page-numbers {
  padding: 10px 14px;
  border: 1px solid var(--eh-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--eh-navy);
}
.pagination .page-numbers.current, .nav-links .page-numbers.current {
  background: var(--eh-navy); color: var(--eh-white); border-color: var(--eh-navy);
}

/* ---------- Article ---------- */

.eh-post__head { display: flex; flex-direction: column; gap: 14px; }
.eh-post__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eh-post__metatext {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eh-steel);
}
.eh-post__lead { font-size: var(--eh-lead); font-weight: 500; line-height: 1.65; color: var(--eh-slate); margin: 0; }
.eh-post__lead-image { margin-top: 8px; }
.eh-post__lead-image img { width: 100%; height: auto; display: block; }
.eh-post__body { margin-top: 28px; }
.eh-post__body h2 { margin-top: 38px; }
.eh-post__body table { margin: 8px 0; }

.eh-summary {
  margin-top: 34px;
  border-left: 4px solid var(--eh-orange);
  background: var(--eh-mist);
  padding: 22px 24px;
}
.eh-summary__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eh-orange-deep);
  margin-bottom: 8px;
}
.eh-summary p { font-size: 14px; line-height: 1.7; color: var(--eh-navy); font-weight: 600; margin: 0; }

.eh-toc .eh-sidecard__list a { font-size: 12.5px; }
.eh-sidecard__servicetitle { font-size: 15px; font-weight: 800; color: var(--eh-white); line-height: 1.25; }

/* ---------- Legal documents ---------- */

.eh-doc .eh-twocol__main h2 { display: flex; gap: 10px; align-items: baseline; margin-top: 44px; }
.eh-doc .eh-twocol__main h2:first-child { margin-top: 0; }
.eh-doc__num { color: var(--eh-orange); font-size: 15px; font-weight: 800; }
.eh-doc .eh-rows { margin-top: 16px; }
.eh-doc .eh-table-scroll { margin-top: 16px; }
.eh-doc__version { font-size: 12px; line-height: 1.6; color: var(--eh-steel); margin: 0; }

.eh-doc__toc { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
.eh-doc__toc li { font-size: 12.5px; color: var(--eh-steel); }
.eh-doc__toc a { font-weight: 600; color: var(--eh-slate); }
.eh-doc__toc a:hover { color: var(--eh-orange-deep); }

/* Unfilled legal placeholders. Deliberately conspicuous — the page must not
   launch with brackets visible, and a muted style would let them slip through. */
.eh-todo {
  background: rgba(255, 95, 0, 0.1);
  border-bottom: 1px dashed var(--eh-orange-deep);
  color: var(--eh-orange-deep);
  font-weight: 600;
  padding: 1px 4px;
}

.eh-authority {
  border-left: 4px solid var(--eh-navy);
  background: var(--eh-mist);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
.eh-authority strong { font-size: 14px; color: var(--eh-navy); font-weight: 800; }
.eh-authority span { font-size: 13px; color: var(--eh-slate); }

/* ---------- Homepage: map beside the coverage rows ---------- */
/* Design is grid 1.7fr / 1fr — map left in a bordered box, coverage as rows
   on the right. The rows double as the map's text alternative, so they stay
   visible at every breakpoint. */

.eh-mapsplit {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.eh-mapsplit__map {
  position: relative;
  height: 520px;
  border: 1px solid var(--eh-line);
  background: var(--eh-white);
}
/* eh_map() sets its own height inline; fill the bordered box instead. */
.eh-mapsplit__map .eh-map { height: 100% !important; }

.eh-mapsplit__zones { display: flex; flex-direction: column; }
.eh-zonerow {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--eh-line);
}
.eh-zonerow__name { display: block; font-size: 14px; font-weight: 700; color: var(--eh-navy); line-height: 1.3; }
.eh-zonerow__sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--eh-steel); margin-top: 3px; }
.eh-zonerow__dist {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eh-slate);
  white-space: nowrap;
  flex: 0 0 auto;
}
.eh-zonerow--base .eh-zonerow__dist { color: var(--eh-orange-deep); }
.eh-mapsplit__more { margin-top: 18px; padding-top: 0; }

@media (max-width: 899px) {
  .eh-mapsplit { grid-template-columns: 1fr; gap: 16px; }
  .eh-mapsplit__map { height: 340px; }
}

/* City links nested inside a coverage-zone card on the locations index. */
.eh-zonecard__cities { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.eh-citylink {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--eh-orange-deep);
  transition: color var(--eh-transition);
}
.eh-citylink:hover { color: var(--eh-orange); }
.eh-zonecard__foot { justify-content: flex-end; }

/* eh_section_head() used on its own — not wrapped in .eh-sectionhead — emitted
   an eyebrow and an h2 with no trailing space, because the base reset sets
   h2 { margin: 0 }. The heading then sat hard against the grid below it
   (visible on the locations index). Only direct children are targeted, so the
   two-column heading rows and the CTA headline are unaffected. */
.eh-pad > h2 { margin-bottom: 34px; }
@media (max-width: 899px) { .eh-pad > h2 { margin-bottom: 22px; } }

/* ---------- Certification & standards (TRIAL) ---------- */
/* Added 3 Aug 2026 — see the header of parts/credentials.php. Delete this
   whole block along with the part if the trial is rejected. */

.eh-credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 30px;
}
.eh-credential {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  padding: 24px;
}
/* The two marks are supplied at different optical weights; a fixed box with
   contain keeps them on one baseline without rescaling either. */
.eh-credential__mark {
  height: 56px;
  display: flex;
  align-items: center;
}
.eh-credential__mark img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.eh-credential__name {
  font-size: 15px;
  line-height: 1.35;
  margin: 0 0 8px;
}
.eh-credential__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--eh-slate);
  margin: 0;
}

@media (max-width: 899px) {
  .eh-credentials { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .eh-credential { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .eh-credential__mark { height: 44px; }
}
/* Interim wordmark, standing in until the client supplies the official SIGTTO
   artwork. Deliberately set in the site's own display face rather than an
   imitation of SIGTTO's serif — a hand-drawn near-copy of someone else's mark
   is worse than either a plain typographic stand-in or the real file. */
.eh-credential__mark--word {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1;
  color: var(--eh-navy);
}

/* ---------- Marina infrastructure grid + local FAQ ---------- */

.eh-marinagrid__intro { max-width: 760px; margin-bottom: 26px; }
.eh-marinagrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.eh-marinacard { background: var(--eh-white); border: 1px solid var(--eh-line); padding: 22px; }
.eh-marinacard__name { font-size: 16px; font-weight: 800; color: var(--eh-navy); line-height: 1.3; }
.eh-marinacard__qualifier { font-size: 12px; font-weight: 500; color: var(--eh-steel); margin: 5px 0 0; }
/* Label above value, never beside it.
   This was a two-column grid, `auto minmax(0, 1fr)` — so the first column
   sized to the WIDEST label in the card and every value in that card lost the
   width. One long label was enough to do it, and which label is long depends
   entirely on the language: "Max LOA" becomes "Najveća duljina preko svega" in
   Croatian and "Max. Länge über alles" in German, so the Croatian cards were
   squeezed hardest while the English ones looked fine. The values are
   sentences — operator names, access conditions, published amperage ranges —
   and they are what the reader came for.
   Stacked, there is no second column for a label to steal, so the layout holds
   in any language and at any card width. Client, 19 Aug 2026. */
.eh-marinacard__specs { margin: 14px 0 0; }
.eh-marinacard__specs dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--eh-steel);
  /* The gap between one pair and the next. Set on dt rather than as a grid
     row-gap so it can differ from the 3px between a label and its own value —
     that difference is what groups the two lines into one row visually. */
  margin-top: 13px;
}
.eh-marinacard__specs dt:first-child { margin-top: 0; }
.eh-marinacard__specs dd { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--eh-slate); }
.eh-marinacard__none { margin: 14px 0 0; font-size: 12.5px; color: var(--eh-steel); }

/* Inline figure in article prose. Articles carried no inline imagery until
   the thermal infographic — photo slots covered it — so this is the first
   rule for one. Full-bleed to the prose column; the asset is 2800px wide so
   it stays sharp on a 2x display. */
.eh-prose .eh-figure { margin: 30px 0; }
.eh-prose .eh-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--eh-line);
}
.eh-prose .eh-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--eh-steel);
}

/* Article FAQ. Sits inside the post column, so it takes its own spacing
   rather than .eh-section's full-width padding. */
.eh-post__faq { margin-top: 40px; }
.eh-post__faqhead { font-size: var(--eh-h3); margin-bottom: 16px; }

.eh-faq { border-top: 2px solid var(--eh-navy); max-width: 860px; }
.eh-faq__item { border-bottom: 1px solid var(--eh-line); }
.eh-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 17px 34px 17px 0;
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: var(--eh-navy);
}
.eh-faq__q::-webkit-details-marker { display: none; }
/* A plus that becomes a minus — no icon font, no JS. */
.eh-faq__q::after,
.eh-faq__q::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--eh-orange);
  transition: transform var(--eh-transition), opacity var(--eh-transition);
}
.eh-faq__q::before { width: 13px; height: 2px; margin-top: -1px; }
.eh-faq__q::after { width: 2px; height: 13px; margin-top: -6.5px; right: 9.5px; }
.eh-faq__item[open] .eh-faq__q::after { transform: rotate(90deg); opacity: 0; }
.eh-faq__q:hover { color: var(--eh-orange-deep); }
.eh-faq__a { padding: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--eh-slate); max-width: 70ch; }

@media (max-width: 979px) { .eh-marinagrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
  .eh-marinagrid { grid-template-columns: 1fr; gap: 14px; }
  .eh-marinacard { padding: 18px; }
  .eh-faq__q { font-size: 14px; }
}

/* Animated by assets/js/faq.js, which sets an explicit height mid-transition. */
.eh-faq__a { will-change: height; }
@media (prefers-reduced-motion: reduce) {
  .eh-faq__a { transition: none !important; }
}

/* ---------- Map: active pin + popup link ---------- */

.eh-map .pin.active i {
  width: 15px; height: 15px;
  background: var(--eh-navy);
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(1, 32, 78, 0.35);
}
.eh-map .pin.active .lbl { left: 17px; font-size: 12.5px; font-weight: 800; color: var(--eh-navy); }
/* Base wins over active. On the Pula page all three Pula-area pins are the
   current city, and the home base has to stay the most prominent thing on the
   map — it is the only pin that means something different from the rest. */
.eh-map .pin.base.active i {
  background: var(--eh-orange);
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(255, 95, 0, 0.3);
}
.eh-map .pin.base.active .lbl { color: var(--eh-ink); }
.eh-map__link,
.eh-map__here {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eh-map__link { color: var(--eh-on-dark-orange); }
.eh-map__link:hover { color: var(--eh-white); text-decoration: underline; }
.eh-map__here { color: var(--eh-on-dark-secondary); font-style: normal; }

/* ---------- Nearby locations ---------- */

.eh-nearby__intro { max-width: 720px; margin-bottom: 24px; }
.eh-nearby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.eh-nearby__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  padding: 15px 18px;
  transition: border-color var(--eh-transition), transform var(--eh-transition);
}
.eh-nearby__link:hover { border-color: var(--eh-orange); transform: translateY(-2px); }
.eh-nearby__city { font-size: 14.5px; font-weight: 800; color: var(--eh-navy); }
.eh-nearby__link:hover .eh-nearby__city { color: var(--eh-orange-deep); }
.eh-nearby__note { font-size: 11.5px; font-weight: 500; color: var(--eh-steel); }

@media (max-width: 979px) { .eh-nearby { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519px) { .eh-nearby { grid-template-columns: 1fr; gap: 8px; } }

/* Popups are offset well to the left of their pin (see assets/js/map.js) so
   they open over open water rather than over the cities stacked above. The
   default tip is hidden — it would point at nothing — and replaced with a
   leader line back to the pin, so the box is still visibly attached to the
   dot it describes.

   The leader's length and angle are measured in JS when the popup opens, not
   derived from the offset — Leaflet adds its own bottom margin and tip height,
   so the offset alone gives the wrong answer. */
.eh-map .leaflet-popup-tip-container { display: none; }
.eh-map .leaflet-popup-content-wrapper { position: relative; }
.eh-map .leaflet-popup-content-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  /* Length and angle are measured and set by assets/js/map.js on popupopen —
     see the note there. The fallbacks only matter for the frame before the
     handler runs. */
  width: var(--eh-leader-len, 0px);
  height: 0;
  border-top: 1px dashed rgba(255, 95, 0, 0.85);
  transform-origin: 0 0;
  transform: rotate(var(--eh-leader-angle, 0deg));
  pointer-events: none;
  /* Behind the popup's own background, so the leader is only visible where it
     leaves the box. Without this it draws straight across the text. */
  z-index: -1;
}

/* Below 700px the popup uses Leaflet's default placement above the pin, so the
   tip is meaningful again and the leader would point nowhere. Mirrors the
   breakpoint in assets/js/map.js. */
@media (max-width: 699px) {
  .eh-map .leaflet-popup-tip-container { display: block; }
  .eh-map .leaflet-popup-content-wrapper::after { display: none; }
}
.eh-map .eh-map__drive {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--eh-on-dark-secondary);
}

/* ---------- Sub-service page, long-form version ---------- */
/* Only renders where inc/content/service-subs.php has data for the slug —
   currently dc-systems-charging alone. See that file's header. */

.eh-subhero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.eh-subhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.eh-scopegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.eh-scopegrid__item { border-top: 2px solid var(--eh-navy); padding-top: 14px; }
/* An odd number of scope items leaves the last one alone on its row, which
   reads as a card that lost its pair. Spanning it makes the shape deliberate.
   This exists so nobody solves an odd count by writing a filler card: on
   13 Aug 2026 three pages were padded to an even six-plus-two, and two of the
   four added cards restated a card already on the same page. Content decides
   the count; the grid accommodates it. */
.eh-scopegrid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.eh-scopegrid__title { font-size: 15px; font-weight: 800; color: var(--eh-navy); margin: 0 0 6px; line-height: 1.3; }
.eh-scopegrid__item p { font-size: 13.5px; line-height: 1.6; color: var(--eh-slate); margin: 0; }

.eh-seq { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.eh-seq th, .eh-seq td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--eh-line); }
.eh-seq thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eh-steel);
  border-bottom: 2px solid var(--eh-navy);
  padding-bottom: 10px;
}
.eh-seq__n { width: 44px; font-weight: 800; color: var(--eh-orange); font-size: 12px; }
.eh-seq__stage { width: 190px; font-weight: 800; color: var(--eh-navy); }
.eh-seq td:last-child { color: var(--eh-slate); line-height: 1.6; }

.eh-coverage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.eh-coverage__group { border-left: 2px solid var(--eh-orange); padding-left: 14px; display: flex; flex-direction: column; gap: 5px; }
.eh-coverage__country {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eh-steel);
}
.eh-coverage__places { font-size: 13.5px; font-weight: 600; color: var(--eh-navy); line-height: 1.5; }

.eh-sidecard__equip { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.eh-sidecard__equip li { display: flex; flex-direction: column; gap: 2px; }
.eh-sidecard__brand { font-size: 13px; font-weight: 800; color: var(--eh-navy); }
.eh-sidecard__detail { font-size: 11.5px; font-weight: 500; color: var(--eh-steel); line-height: 1.5; }

/* The sub-service sidebar sticks, same as the article template's.
   That only became workable once Related notes moved into the main column: at
   980-1140px the column was taller than the viewport, and a sticky element
   taller than the viewport pins at top:24px immediately and never scrolls, so
   the WhatsApp CTA sat off-screen for the whole page. At 863px it fits any
   viewport ~890px and up. Below that the foot of the Equipment card is
   clipped while pinned — trim a card or move one into the main column before
   adding anything back to this sidebar. */

@media (max-width: 979px) {
  .eh-scopegrid { grid-template-columns: 1fr; gap: 16px; }
  .eh-coverage { grid-template-columns: 1fr; }
  .eh-notes { grid-template-columns: 1fr; }
}
/* Related notes, at the end of the main column rather than in the sidebar —
   "further reading" belongs after the reading.
   Deliberately a three-up card grid, not a stacked list: the FAQ directly
   above is a stack of full-width bordered rows, and a list of bordered rows
   under it read as more of the same. A grid, the orange article-type label
   and an excerpt make these unmistakably articles. */
.eh-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.eh-note {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--eh-mist);
  border-top: 2px solid var(--eh-navy);
  padding: 16px 16px 18px;
  transition: background-color var(--eh-transition), border-color var(--eh-transition);
}
.eh-note:hover { background: var(--eh-white); border-top-color: var(--eh-orange); }
.eh-note__type {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eh-orange);
}
.eh-note__title { font-size: 14px; font-weight: 800; color: var(--eh-navy); line-height: 1.35; }
.eh-note:hover .eh-note__title { color: var(--eh-orange-deep); }
.eh-note__excerpt { font-size: 12px; font-weight: 500; line-height: 1.55; color: var(--eh-steel); }
.eh-note__go {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eh-orange-deep);
}

@media (max-width: 767px) {
  .eh-seq__stage { width: auto; }
  .eh-subhero__actions .eh-btn { flex: 1 1 auto; }
}

/* Related sub-services. Cross-links between siblings; the detail lives on the
   linked page, never restated here. */
.eh-relgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.eh-relcard {
  display: block; padding: 22px 24px; background: var(--eh-white);
  border: 1px solid var(--eh-line); border-left: 4px solid var(--eh-orange);
  transition: border-color var(--eh-transition);
}
.eh-relcard:hover { border-left-color: var(--eh-orange-deep); }
.eh-relcard__title { display: block; color: var(--eh-navy); font-size: 16px; margin-bottom: 6px; }
.eh-relcard__desc { display: block; font-size: 13.5px; line-height: 1.6; color: var(--eh-slate); }

/* ---------- Price list (page-pricing.php) ---------- */
/* .eh-hero__badge carries align-self:flex-start, which is inert here: the page
   hero's inner is a block, not the flex column the home hero gives it, so the
   pill stretched the full width of the shell and read as a banner. */
.eh-pagehero .eh-hero__badge { display: inline-block; margin-bottom: 18px; }

/* The two price tables share ONE scale and one set of paddings.
   They were built separately from the design, which sizes them differently and
   sets the standard rate at 17px — on the page that read as two unrelated
   tables with an oversized number in the first. Client call, 17 Aug 2026: keep
   them uniform and compact. Colour still carries the hierarchy, which is the
   part of the design worth keeping — the standard hourly rate is orange, every
   other figure is navy — so the rate a reader wants is found by hue rather than
   by being shouted at in a larger size.

   Numeric columns right-align, headers included, so each figure sits under its
   own heading. Header qualifiers ("Mon–Fri 08:00–17:00", "+50%", "+100%") are
   plain white at header size: part of the label, not an annotation on it. */
.eh-table .eh-num { text-align: right; }

.eh-rates,
.eh-travel { border: 1px solid var(--eh-line); }
.eh-rates th, .eh-rates td,
.eh-travel th, .eh-travel td { padding: 10px 14px; }
.eh-rates th + th,
.eh-travel th + th { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.eh-rates td + td,
.eh-travel td + td { border-left: 1px solid var(--eh-line); }
.eh-rates td,
.eh-travel td { vertical-align: top; }

/* Row label: service, or zone. */
.eh-rates__name,
.eh-travel__zone { font-weight: 800; color: var(--eh-navy); font-size: 13.5px; line-height: 1.3; }
.eh-rates__name { display: block; }
.eh-travel__zone { white-space: nowrap; }

/* Secondary text: what the rate covers, or which marinas the zone holds.
   --eh-slate, not the design's #6E819B — that value measures 3.98:1 on white
   and the theme rejected it for text. See tokens.css. */
.eh-rates__desc,
.eh-travel__marinas { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--eh-slate); }
.eh-rates__desc { display: block; margin-top: 4px; max-width: 46ch; }

/* Figures. One size across both tables; hue, not scale, marks the standard rate. */
.eh-rates__price,
.eh-travel__charge {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  /* Without this, €157.50 sits a pixel out from €135 above it. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eh-rates__price { color: var(--eh-orange-deep); }
.eh-rates__price--sub,
.eh-travel__charge { color: var(--eh-navy); }

.eh-rates__unit { font-size: 10.5px; font-weight: 600; color: var(--eh-steel); white-space: nowrap; }
.eh-travel__dist { font-size: 12px; font-weight: 600; color: var(--eh-steel); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Small print: VAT line, the zone footnote, the owner-supplied caveat. */
.eh-rates__vat { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--eh-steel); }

/* Cost drivers beside scope. Collapses before the tables do — two lists of
   short items read fine stacked, a four-column money table does not. */
.eh-pricecols { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }

@media (max-width: 899px) {
  .eh-pricecols { grid-template-columns: 1fr; gap: 34px; }
  .eh-rates__desc { max-width: none; }
  .eh-rates th, .eh-rates td,
  .eh-travel th, .eh-travel td { padding: 9px 12px; }
}