/* ==========================================================================
   pages/site.css: Al Safwan Marine additions to the Swiss Editorial system:
   logo, the orange accent, content-body extras for migrated WordPress HTML,
   section indexes (services, products, partners, countries, projects) and
   the contact page. Loads last (pages/* sort after 0*.css).
   ========================================================================== */

/* ---------- Brand ---------------------------------------------------------- */
.brand { gap: 0; }
.brand img { display: block; width: auto; height: 38px; }
.app-sidebar .brand img { height: 28px; }

/* ---------- Accent -------------------------------------------------------- */
.btn--accent { background: var(--accent-ink); color: var(--on-accent); }
.btn--accent:hover { background: color-mix(in srgb, var(--accent-ink) 85%, var(--ink)); }
.accent { color: var(--accent-ink); }
.kicker-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; background: var(--accent); vertical-align: 0.1em; }
.site-header { border-bottom: 1px solid transparent; }
.footer-statement strong { color: var(--ink); }
.statement .accent, .row__big .accent { color: var(--accent); }
.story:hover .story__title a, .company:hover .company__name a { color: var(--accent-ink); }
.index__list a:hover, .index__list a:focus-visible { color: var(--accent-ink); }
.link-accent { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mobile-nav__links a[aria-current="page"] { color: var(--accent-ink); }

/* Header phone (desktop) */
.nav__phone { font-variant-numeric: tabular-nums; }
@media (max-width: 87.99rem) { .nav__phone { display: none !important; } }

/* ---------- Migrated WordPress content inside .article-prose ------------ */
.article-prose h3 { margin-block-start: 1.6em; font-size: var(--t-m); line-height: 1.3; }
.article-prose h4, .article-prose h5, .article-prose h6 { margin-block-start: 1.4em; font-size: var(--t-body); }
.article-prose h3 + *, .article-prose h4 + * { margin-block-start: 0.5em; }
.article-prose img { border-radius: var(--radius); background: var(--field); height: auto; }
/* Content images keep their real size (never stretched past it, which blurs small product shots) */
.article-prose img { width: auto; max-width: 100%; max-height: 30rem; object-fit: contain; }
.article-prose a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.article-prose a:not([class]):hover { color: var(--accent-ink); }
.article-prose ul, .article-prose ol { padding-inline-start: 1.2em; }
.article-prose li + li { margin-block-start: 0.35em; }
.article-prose li::marker { color: var(--accent); }
.article-prose blockquote { padding-inline-start: 1em; border-inline-start: 2px solid var(--accent); }
.article-prose .table-scroll { overflow-x: auto; border-top: 1px solid var(--ink); }
.article-prose table { width: 100%; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.article-prose th, .article-prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; }
.article-prose th { font-weight: 500; }
.article-prose .embed { position: relative; aspect-ratio: 16 / 9; }
.article-prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.article-prose iframe { max-width: 100%; border: 0; }
.article-prose > p:first-child:has(img) { font-size: inherit; }
/* Galleries: runs of images in one paragraph */
.article-prose p:has(> img + img), .article-prose p:has(> a > img + br), .article-prose p:has(> a + a > img) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--s-3); }
.article-prose p:has(> img + img) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Photo gallery (project reports) ------------------------------ */
.gallery { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--col-gap); }
.gallery a { display: block; overflow: hidden; border-radius: var(--radius); background: var(--field); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 900ms var(--ease); }
.gallery a:hover img { transform: scale(1.03); }
@media (max-width: 63.99rem) { .gallery { grid-column: 1 / -1; } }

/* ---------- Tiles: products, partners, projects -------------------------- */
.tiles { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-7) var(--col-gap); }
.tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.tile { position: relative; display: grid; align-content: start; gap: var(--s-3); }
.tile__media { overflow: hidden; border-radius: var(--radius); background: var(--field); }
.tile__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 900ms var(--ease); }
.tile--contain .tile__media img { object-fit: contain; padding: 8%; background: #fff; }
.tile__media--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--grey); font-size: var(--t-xl); font-weight: 500; }
.tile:hover .tile__media img { transform: scale(1.03); }
.tile__title { font-size: var(--t-m); line-height: 1.25; font-weight: 500; letter-spacing: var(--track-head); text-wrap: balance; }
.tile__title a::after { content: ""; position: absolute; inset: 0; }
.tile:hover .tile__title a { color: var(--accent-ink); }
.tile__meta { font-size: var(--t-s); color: var(--grey-text); }
.tile__text { color: var(--grey-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 63.99rem) { .tiles { grid-column: 1 / -1; } }

/* ---------- Service hubs: hairline list with children -------------------- */
.hubs { grid-column: 3 / -1; }
.hub { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--rule); }
.hub:last-child { border-bottom: 1px solid var(--rule); }
.hub__head { grid-column: 1 / span 4; }
.hub__title { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.hub__title a:hover { color: var(--accent-ink); }
.hub__text { margin-block-start: var(--s-3); max-width: 30em; color: var(--grey-text); }
.hub__children { grid-column: 5 / span 4; columns: 2; column-gap: var(--col-gap); font-size: var(--t-s); }
.hub__children li { break-inside: avoid; padding-block: 3px; }
.hub__children a { color: var(--grey-text); }
.hub__children a:hover { color: var(--ink); }
.hub__media { grid-column: 9 / -1; }
.hub__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 63.99rem) {
  .hubs { grid-column: 1 / -1; }
  .hub { grid-template-columns: 1fr; }
  .hub__head, .hub__children, .hub__media { grid-column: 1; }
  .hub__media { order: -1; }
  .hub__children { columns: 1; }
}

/* ---------- Plain link columns (countries, other services) --------------- */
.link-columns { grid-column: 3 / -1; columns: 4 12rem; column-gap: var(--col-gap); }
.link-columns li { break-inside: avoid; }
.link-columns a { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--rule); transition: color 200ms var(--ease); }
.link-columns a:hover { color: var(--accent-ink); }
.link-columns__letter { display: block; padding-block: var(--s-4) var(--s-1); font-size: var(--t-s); color: var(--accent-ink); break-after: avoid; }
@media (max-width: 63.99rem) { .link-columns { grid-column: 1 / -1; } }

/* ---------- Facts & approvals -------------------------------------------- */
.facts { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.facts li { padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
.facts b { display: block; font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.facts b::after { content: ""; display: block; width: 24px; height: 2px; margin-block: var(--s-3); background: var(--accent); }
.facts span { color: var(--grey-text); }
@media (max-width: 63.99rem) { .facts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Entry page extras -------------------------------------------- */
.entry-aside__cta { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); }
.entry-aside__cta p { color: var(--grey-text); font-size: var(--t-s); }
.entry-aside__cta .btn { width: 100%; }
.entry-topics { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin-block-start: var(--s-7); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.entry-topics a { color: var(--ink); }
.entry-topics a:hover { color: var(--accent-ink); }
.article-byline a:hover { color: var(--accent-ink); }

/* ---------- Contact CTA band (footer of content pages) ------------------- */
.cta-band { margin-block-start: var(--s-8); }
.cta-band__actions { margin-block-start: var(--s-7); }

/* ---------- Contact page -------------------------------------------------- */
.contact-lines { border-top: 1px solid var(--rule); }
.contact-lines > div { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.contact-lines dt { font-size: var(--t-s); color: var(--grey-text); }
.contact-lines dd { margin-block-start: 4px; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.contact-lines dd a:hover { color: var(--accent-ink); }
.contact-lines address { font-style: normal; font-size: var(--t-body); font-weight: 400; letter-spacing: var(--track-body); }
.map-frame { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); filter: grayscale(0.3) var(--img-filter); }

/* ---------- Topic line on listing pages ---------------------------------- */
.topic-line a[aria-current="page"] { color: var(--ink); }

/* ---------- Search -------------------------------------------------------- */
.search-form { grid-column: 3 / span 8; display: flex; align-items: flex-end; gap: var(--s-4); border-bottom: 1px solid var(--ink); }
.search-form input { flex: 1; min-width: 0; min-height: 56px; padding: 0 0 8px; border: 0; background: none; outline: none; font-size: var(--t-l); font-weight: 500; letter-spacing: var(--track-head); }
.search-form button { min-height: 56px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 63.99rem) { .search-form { grid-column: 1 / -1; } }
.results { grid-column: 3 / -1; }
@media (max-width: 63.99rem) { .results { grid-column: 1 / -1; } }

/* ---------- Home ---------------------------------------------------------- */
.home-hero-actions { grid-column: 1 / -1; margin-block-start: clamp(40px, 5vw, 72px); }
.ports-line { grid-column: 3 / span 9; font-size: var(--t-l); line-height: 1.35; font-weight: 500; letter-spacing: var(--track-head); color: var(--grey); text-wrap: pretty; }
.ports-line b { font-weight: 500; color: var(--ink); }
@media (max-width: 63.99rem) { .ports-line { grid-column: 1 / -1; } }

/* ---------- Admin additions ---------------------------------------------- */
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; min-height: 28rem; }
.admin-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6); }
.admin-filters .field { min-width: 12rem; }
.admin-preview img { max-width: 240px; border-radius: var(--radius); }

/* Spacing helpers used on the home page */
.facts--spaced { margin-block-start: var(--s-8); }
.row__main--spaced { margin-block-end: var(--s-7); }
.row__head--spaced { margin-block-end: var(--s-5); }
.journal-list--flush { padding: 0; }
.facts--admin { grid-column: auto; }

/* WordPress/Elementor card lists (ul > li > img + heading) become a card grid */
.article-prose ul:has(> li > img) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s-6) var(--col-gap); padding: 0; list-style: none; }
.article-prose ul:has(> li > img) > li { position: relative; margin: 0; }
.article-prose ul:has(> li > img) > li::marker { content: none; }
.article-prose ul:has(> li > img) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-prose ul:has(> li > img) :is(h2, h3, h4) { margin-block-start: var(--s-3); font-size: var(--t-body); line-height: 1.3; }
.article-prose ul:has(> li > img) a::after { content: ""; position: absolute; inset: 0; }
.article-prose ul:has(> li > img) a { text-decoration: none; }
.article-prose ul:has(> li > img) li:hover a { color: var(--accent-ink); }
/* Elementor eyebrow labels (h5/h6 above a heading) and oversized portrait photos */
.article-prose h5, .article-prose h6 { font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--accent-ink); }
.article-prose h5 + h2, .article-prose h6 + h2 { margin-block-start: 0.3em; }


/* Runs of consecutive images grouped by EntriesHelper#group_image_runs */
.article-prose .img-run { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--s-3); }
.article-prose .img-run img { width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; padding: 6%; background: #fff; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.06); }
.article-prose .img-run--logos { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s-4); }
.article-prose .img-run--logos img { aspect-ratio: 3 / 2; object-fit: contain; padding: 10%; background: #fff; border-radius: var(--radius); }
.footer-col li a { overflow-wrap: anywhere; }

/* FAQ accordions carried over from WordPress (<details>) */
.article-prose details { border-top: 1px solid var(--rule); padding-block: var(--s-3); }
.article-prose details:last-of-type { border-bottom: 1px solid var(--rule); }
.article-prose summary { cursor: pointer; font-weight: 500; }
.article-prose details[open] summary { margin-block-end: var(--s-2); }

.facts--text h3 { margin-block-end: var(--s-2); }
.facts--text h3 a:hover { color: var(--accent-ink); }

/* Customer logo wall (home) */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--col-gap); }
.logo-wall li { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: var(--s-4); border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.logo-wall img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.logo-wall li:hover img { filter: none; opacity: 1; }
@media (min-width: 64rem) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ==========================================================================
   Header: menu with dropdowns (mirrors the WordPress menu)
   ========================================================================== */

.site-header { border-bottom: 0; background: #fff; }
.site-header__inner { min-height: 84px; padding-block: var(--s-4) var(--s-3); }
.nav { gap: var(--s-5); }
.nav__list { display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }

/* Links: ink text; the current section gets a short orange underline, hover grows it */
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 12px; font-weight: 500; letter-spacing: var(--track-head); color: var(--ink); }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav__item--menu .nav__link::after { right: 28px; }
.nav__link:hover::after, .nav__item:focus-within > .nav__link::after, .nav__item:hover > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__chevron { color: var(--grey-text); transition: transform var(--dur) var(--ease); }
.nav__item:hover .nav__chevron, .nav__item:focus-within .nav__chevron { transform: rotate(180deg); }
.nav__cta { margin-inline-start: var(--s-3); }
.nav__search { margin-inline-start: var(--s-2); }

/* Dropdown: a quiet white card; opens on hover and on keyboard focus (focus-within), no JS */
.nav__menu {
  position: absolute; top: 100%; left: 0; z-index: 50;
  display: flex; gap: var(--s-5); min-width: 17rem; margin-top: 10px; padding: 10px;
  background: #fff; border: 1px solid rgb(17 17 17 / 0.07); border-radius: 12px;
  box-shadow: 0 1px 2px rgb(17 17 17 / 0.04), 0 16px 40px rgb(17 17 17 / 0.10);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s 180ms;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__menu--cols { min-width: 36rem; }
.nav__menu--cols ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
.nav__menu--cols .nav__group { width: 100%; }
.nav__group { min-width: 15rem; }
.nav__group ul { margin: 0; padding: 0; list-style: none; }
.nav__group-title { padding: 6px 12px 4px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-text); }
.nav__group a { display: grid; gap: 1px; padding: 9px 12px; border-radius: 8px; line-height: 1.3; color: var(--ink); transition: background-color 150ms var(--ease); }
.nav__group a small { font-size: 12.5px; color: var(--grey-text); }
.nav__group a:hover, .nav__group a:focus-visible { background: #f5f5f4; }
.nav__group .nav__all { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 0; padding: 11px 12px 5px; border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.nav__all::after { content: "→"; color: var(--accent); transition: transform var(--dur) var(--ease); }
.nav__all:hover { color: var(--ink); }
.nav__all:hover::after { transform: translateX(3px); }
.nav__item--menu:nth-last-child(-n+3) .nav__menu { left: auto; right: 0; }
@media (max-width: 79.99rem) { .nav__link { padding-inline: 8px; } .nav__cta { display: none; } }
@media (max-width: 63.99rem) { .nav { display: none; } }

/* Mobile menu groups */
.mobile-nav__group summary { list-style: none; cursor: pointer; padding-block: 4px; }
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group summary::after { content: " +"; color: var(--accent); }
.mobile-nav__group[open] summary::after { content: " –"; }
.mobile-nav__group ul { margin: 0 0 var(--s-4); padding: 0 0 0 var(--s-4); list-style: none; font-size: var(--t-m); letter-spacing: var(--track-head); }
.mobile-nav__group ul a { color: var(--grey-text); padding-block: 6px; }

/* ==========================================================================
   Orange as the primary colour
   ========================================================================== */
.btn--accent { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.btn--accent:hover { background: var(--accent-dark); }
.btn--ink, .btn--primary { background: var(--ink); }
.kicker-dot, .masthead__kicker, .article-head__kicker, .row__label { color: var(--accent); font-weight: 500; }
.masthead__kicker .muted, .article-head__kicker .muted { color: var(--grey-text); font-weight: 400; }
.kicker-dot::before { background: var(--accent); }
.crumbs a:hover { color: var(--accent); }
.more { color: var(--accent); font-weight: 500; }
.more:hover { color: var(--accent-dark); }

/* Full-bleed orange call-to-action band */
.cta-band { margin-block-start: var(--s-9); background: var(--accent); color: var(--on-accent); }
.cta-band .row { border-top: 0; padding-block: var(--s-9); }
.cta-band .row__label, .cta-band .row__big .grey { color: rgb(255 255 255 / 0.82); }
.cta-band .row__big { color: #fff; }
.cta-band .points { border-color: rgb(255 255 255 / 0.35); }
.cta-band .points li { border-color: rgb(255 255 255 / 0.35); }
.cta-band .points li span { color: #fff; font-weight: 500; }
.cta-band .btn--accent { background: #fff; color: var(--accent-dark); }
.cta-band .btn--accent:hover { background: var(--ink); color: #fff; }
.cta-band .btn:not(.btn--accent) { background: rgb(255 255 255 / 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.cta-band .btn:not(.btn--accent):hover { background: rgb(255 255 255 / 0.24); }
.site-footer { border-top: 0; }

/* Orange stats band on the home page */
.glance-band { background: var(--accent); color: #fff; margin-block-start: var(--s-8); }
.glance-band .row { border-top: 0; }
.glance-band .row__label { color: rgb(255 255 255 / 0.82); }
.glance-band .stats-line { color: rgb(255 255 255 / 0.78); }
.glance-band .stats-line b, .glance-band .stats-line__end { color: #fff; }

/* Footer: five equal columns now the theme switcher is gone */
@media (min-width: 64rem) { .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-col { grid-column: auto; } }
.footer-col h2 { color: var(--accent); font-weight: 500; }

.nav .nav__cta, .nav .nav__cta:hover { color: var(--on-accent); }

/* Class approval logos above the footer (as on the WordPress site), spread across the page */
.approvals-strip { border-bottom: 1px solid var(--rule); background: #fff; }
.approvals-strip .approvals-strip__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-6); margin: 0; padding: var(--s-9) 0 var(--s-8); list-style: none; }
.approvals-strip__logos li { display: grid; place-items: center; }
.approvals-strip__logos img { max-height: 56px; width: auto; max-width: 140px; object-fit: contain; }
.approvals-strip__logos img[alt="Bureau Veritas"], .approvals-strip__logos img[alt="ABS Service Supplier"] { max-height: 76px; }
@media (max-width: 63.99rem) {
  .approvals-strip .approvals-strip__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); padding-block: var(--s-8) var(--s-7); }
}
.nav > a.nav__cta[aria-current="page"] { color: var(--on-accent); background: var(--accent-dark); }

/* Footer contact line (formerly the orange top bar) */
.footer-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-block-start: var(--s-8); padding-block: var(--s-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.footer-contact__note { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.footer-contact__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.footer-contact__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; }
.footer-contact__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.footer-contact__links a:hover { color: var(--accent); }
.footer-contact__links .icon { width: 18px; height: 18px; color: var(--accent); }
.footer-contact + .footer-cols { margin-block-start: var(--s-8); }
@media (max-width: 47.99rem) { .footer-contact__links { flex-direction: column; gap: 0; } }

/* Exactly four across on desktop (home: recent work, insights) */
@media (min-width: 64rem) { .tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   No grey divider lines on the public site. Every hairline in the theme is
   drawn with --rule, so clearing it here removes them all while keeping the
   spacing. The admin layout (tables) keeps its lines. Data tables inside page
   content keep cell borders, which they need to stay readable.
   ========================================================================== */
.site { --rule: transparent; }
.site .article-prose th, .site .article-prose td { border-bottom-color: #e6e6e6; }
.site .article-prose .table-scroll { border-top-color: #e6e6e6; }
.site .logo-wall li { box-shadow: none; }
.site .cta-band .points, .site .cta-band .points li { border: 0; }

/* Home hero slideshow (slideshow_controller.js) */
.slideshow { position: relative; overflow: hidden; aspect-ratio: 16 / 7; border-radius: var(--radius); background: var(--field); }
.slideshow__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease); }
.slideshow__slide.is-active { opacity: 1; }
.slideshow__dots { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgb(17 17 17 / 0.35); backdrop-filter: blur(6px); }
.slideshow__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.55); transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.slideshow__dot.is-active { width: 22px; border-radius: 4px; background: #fff; }
.slideshow__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 47.99rem) { .slideshow { aspect-ratio: 4 / 3; } }

/* Image + short label runs (e.g. hose types) grouped by EntriesHelper#group_image_runs */
.article-prose .img-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s-5) var(--s-4); margin-block: 1.5em; }
.article-prose .img-card { display: grid; align-content: start; gap: var(--s-2); margin: 0; }
.article-prose .img-card img { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; padding: 8%; background: #fff; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.06); }
.article-prose .img-card :is(h2, h3, h4, h5, h6) { margin: 0; font-size: var(--t-body); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-body); color: var(--ink); }
.article-prose .img-run img, .article-prose .img-run--logos img { max-height: none; }

/* ==========================================================================
   Spacing pass. The Swiss Editorial rhythm assumed hairlines between sections;
   without them the large gaps read as empty. One consistent, tighter scale:
   section = 40–72px top/bottom, page heads = 32–64px, hero = 40–72px.
   ========================================================================== */
.site { --row-end: clamp(40px, 4.5vw, 72px); }
.site .row { padding-block: clamp(32px, 3.5vw, 56px) var(--row-end); }
.site .row--flush { padding-block-end: var(--s-5); }
.site .row--tight { padding-block-end: var(--s-7); }
.site .row--open { padding-block-start: var(--s-7); }
.site .crumbs ol { padding-block-start: var(--s-5); }

.site .hero { padding-block: clamp(40px, 5vw, 72px) clamp(32px, 3.5vw, 56px); }
.site .home-hero-actions { margin-block-start: clamp(24px, 3vw, 40px); }
.site .glance-band { margin-block-start: var(--s-7); }
.site .glance-band .row { padding-block: clamp(40px, 4vw, 64px); }
.site .facts--spaced { margin-block-start: var(--s-7); }
.site .row__main--spaced { margin-block-end: var(--s-6); }

.site .masthead, .site .article-head { row-gap: var(--s-5); padding-block: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 40px); }
.site .article-figure { margin-block-end: var(--s-7); }
.site .article-body { row-gap: var(--s-6); padding-block-end: var(--row-end); }
.site .article-body--plain { padding-block-start: var(--s-5); }
.site .journal-list { padding-block-end: var(--row-end); }
.site .story { padding-block: var(--s-6); }
.site .article-related__head { margin-block-end: var(--s-5); }

.site .cta-band { margin-block-start: var(--s-7); }
.site .cta-band .row { padding-block: clamp(48px, 5vw, 80px); }
.site .cta-band__actions { margin-block-start: var(--s-6); }
.site .approvals-strip .approvals-strip__logos { padding-block: var(--s-8) var(--s-7); }

.site .site-footer { padding-block: var(--s-8) var(--s-5); }
.site .footer-contact { margin-block-start: var(--s-7); }
.site .footer-contact + .footer-cols { margin-block-start: var(--s-7); }
.site .footer-bottom { margin-block-start: var(--s-8); }

@media (max-width: 47.99rem) {
  .site .row { padding-block: var(--s-6) var(--s-7); }
  .site .hero { padding-block: var(--s-6) var(--s-5); }
}
/* Footer statement: a closing line, not a second hero */
.site .footer-statement { grid-column: 1 / span 8; font-size: var(--t-l); line-height: 1.3; letter-spacing: var(--track-head); }
@media (max-width: 63.99rem) { .site .footer-statement { grid-column: 1 / -1; } }

/* Footer social logos: grey, brand colour on hover */
.social { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.social__link { display: grid; place-items: center; width: 44px; height: 44px; color: #9a9a9a; background: none; transition: color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease); }
.social__icon { width: 22px; height: 22px; }
.social li:first-child .social__link { margin-inline-start: -11px; } /* icon edge lines up with the heading */
.social__link:hover, .social__link:focus-visible { transform: translateY(-2px); }
.social__link--linkedin:hover, .social__link--linkedin:focus-visible { color: #0a66c2; }
.social__link--facebook:hover, .social__link--facebook:focus-visible { color: #0866ff; }
.social__link--instagram:hover, .social__link--instagram:focus-visible { color: #e1306c; }
.social__link--x:hover, .social__link--x:focus-visible { color: #000; }

/* Careers: job list */
.jobs { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.job { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3) var(--s-6); padding: var(--s-5) var(--s-5); border-radius: 12px; background: #f7f7f6; transition: background-color 200ms var(--ease); }
.job:hover { background: var(--accent-soft); }
.job__title { font-size: var(--t-m); line-height: 1.3; }
.job__title a::after { content: ""; position: absolute; inset: 0; }
.job__summary { margin-block-start: 4px; color: var(--grey-text); }
.job__meta { font-size: var(--t-s); color: var(--grey-text); white-space: nowrap; }
.job__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; white-space: nowrap; }
@media (max-width: 47.99rem) { .job { grid-template-columns: 1fr; } .job__meta { white-space: normal; } }

/* Admin → Site content editor */
.content-field { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.content-rows { display: grid; gap: var(--s-3); }
.content-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; padding: var(--s-4); border-radius: 10px; background: #f7f7f6; }
.content-row__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3) var(--s-4); }
.content-row__remove { font-size: var(--t-s); color: var(--grey-text); }
.content-row .form-grid { grid-column: 1; }
.content-image { display: grid; gap: var(--s-2); }
.content-image__preview { max-height: 72px; max-width: 200px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }

/* About page */
.about-hero { margin: 0; }
.about-hero img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 47.99rem) { .about-hero img { aspect-ratio: 4 / 3; } }
.about-text { margin-block-start: var(--s-5); max-width: 38em; color: var(--grey-text); }
.about-text p + p { margin-block-start: 1em; }
.about-numbers { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); margin: 0; padding: 0; list-style: none; }
.about-numbers b { display: block; font-size: var(--t-hero); line-height: 1; font-weight: 500; letter-spacing: var(--track-display); color: #fff; font-variant-numeric: tabular-nums; }
.about-numbers span { display: block; margin-block-start: var(--s-2); color: rgb(255 255 255 / 0.82); }
.about-why { display: grid; gap: var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.about-why li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
.about-why__n { font-size: var(--t-s); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 0.3em; }
.about-why p { margin-block-start: var(--s-2); max-width: 36em; color: var(--grey-text); }
.about-photos { display: grid; gap: var(--col-gap); align-content: start; }
.about-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.about-ports { columns: 3 14rem; column-gap: var(--col-gap); margin: 0; padding: 0; list-style: none; }
.about-ports li { break-inside: avoid; display: flex; align-items: center; gap: 10px; padding-block: 7px; }
.about-ports li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 63.99rem) {
  .about-numbers { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-photos { grid-template-columns: 1fr 1fr; }
}

/* Entry lead image: natural proportions (graphics with text must not be cropped) */
.entry-hero { margin: 0; }
.entry-hero img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: var(--radius); }
.entry-hero--inline { margin-block-end: var(--s-5); }
.entry-hero--inline img { width: auto; max-width: 100%; max-height: 34rem; }

/* Page-builder button runs ("Request a quote", "View products") as a real button row */
.article-prose p.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.article-prose p.actions a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius); background: #f4f4f3; color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-s); }
.article-prose p.actions a:first-child { background: var(--accent); color: #fff; }
.article-prose p.actions a:hover { background: var(--accent-dark); color: #fff; }

/* Long unbroken strings (codes, run-together city lists) never push the page sideways */
.article-prose { overflow-wrap: anywhere; }
.approvals-strip__logos img { max-width: 100%; }

/* Mobile: a sticky "Get a quote" bar on content pages (the aside panel sits far below the text) */
.quote-bar { display: none; }
@media (max-width: 63.99rem) {
  .quote-bar { position: sticky; bottom: 0; z-index: 30; display: flex; gap: var(--s-2); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.96); box-shadow: 0 -6px 20px rgb(17 17 17 / 0.08); backdrop-filter: blur(8px); }
  .quote-bar .btn { flex: 1; min-height: 46px; }
}

/* Product sheet (product pages with little or no text) */
.product-sheet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); align-items: start; padding-block: clamp(24px, 3vw, 48px) var(--s-7); }
.product-sheet__media { grid-column: 1 / span 6; display: grid; place-items: center; aspect-ratio: 1; padding: 8%; border-radius: 16px; background: #f6f6f5; }
.product-sheet__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.product-sheet__info { grid-column: 8 / -1; display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-5); }
.product-sheet__title { font-size: var(--t-xl); line-height: 1.12; letter-spacing: var(--track-display); }
.product-sheet__lead { font-size: var(--t-m); line-height: 1.45; color: var(--grey-text); }
.product-sheet__text { max-width: none; font-size: var(--t-body); }
.product-sheet__facts { display: grid; gap: 0; margin: var(--s-3) 0 0; }
.product-sheet__facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-4); padding-block: 10px; }
.product-sheet__facts dt { color: var(--grey-text); font-size: var(--t-s); padding-top: 2px; }
.product-sheet__facts a:hover { color: var(--accent); }
.product-sheet__actions { margin-block-start: var(--s-3); }
@media (max-width: 63.99rem) {
  .product-sheet__media, .product-sheet__info { grid-column: 1 / -1; }
  .product-sheet__info { padding-top: 0; }
}
.tiles--products .tile__meta { display: none; }
@media (max-width: 47.99rem) { .tiles--products, .tiles.tiles--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Thumbnails: most lead images are 16:9 posters with titles baked in; 16:9 frames avoid cutting text */
.tile__media img, .story__media img, .hub__media img { aspect-ratio: 16 / 9; }
.tile--contain .tile__media img { aspect-ratio: 4 / 3; }

/* Lists of links from the old pages ("Our services include …") */
.article-prose ul.link-list { columns: 2 14rem; column-gap: var(--s-6); padding: 0; list-style: none; }
.article-prose ul.link-list li { break-inside: avoid; padding-block: 4px; }
.article-prose ul.link-list li::before { content: "→ "; color: var(--accent); }

/* Tables and FAQs without grey rules: soft striped rows and tinted panels */
.site .article-prose th, .site .article-prose td { border-bottom: 0; padding: 10px 12px; }
.site .article-prose .table-scroll { border-top: 0; border-radius: var(--radius); }
.site .article-prose thead th { background: #f1f1ef; }
.site .article-prose tbody tr:nth-child(even) td { background: #f8f8f7; }
.site .article-prose details { border: 0; margin-block: var(--s-2); padding: 12px 16px; border-radius: 10px; background: #f6f6f5; }
.site .article-prose details:last-of-type { border: 0; }
.site .article-prose details[open] { background: #f1f1ef; }

/* Two product cards per row on phones instead of one blown-up card */
@media (max-width: 40rem) { .article-prose .img-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lead paragraph style also after an inline lead image; code/pre never widen the page */
.article-prose > .entry-hero--inline + p { font-size: 1.375rem; line-height: 1.45; letter-spacing: 0; }
.article-prose pre, .article-prose code { white-space: pre-wrap; overflow-wrap: anywhere; }

.row__label .muted { display: block; font-weight: 400; color: var(--grey-text); }

/* ==========================================================================
   Template audit fixes
   ========================================================================== */
/* Header: burger menu below 1200px so the nav never wraps or collides */
.nav__link { white-space: nowrap; }
@media (max-width: 74.99rem) {
  .site .nav { display: none; }
  .site .menu-btn { display: inline-flex; align-items: center; }
}
/* Phones: nothing wider than the screen */
.approvals-strip__logos li { min-width: 0; }
/* Approval logos: an even grid instead of uneven wrapping */
.site .approvals-strip .approvals-strip__logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); justify-items: center; }
@media (min-width: 75rem) { .site .approvals-strip .approvals-strip__logos { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
/* Forms: required marker, invalid fields underlined red */
.field:has(:required) > .field__label::after { content: " *"; color: var(--accent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-bottom-color: var(--danger); }
.field:has([aria-invalid="true"]) > .field__label { color: var(--danger); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Services index at laptop widths: sub-links under the text, not a cramped third column */
@media (max-width: 79.99rem) and (min-width: 64rem) {
  .hub { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .hub__head { grid-column: 1 / span 6; }
  .hub__children { grid-column: 1 / span 6; grid-row: 2; }
  .hub__media { grid-column: 7 / -1; grid-row: 1 / span 2; }
}
/* Three-point groups: one column on phones (no lone half-width card) */
@media (max-width: 47.99rem) { .facts.facts--text { grid-template-columns: 1fr; } }
/* Footer on phones: social icons on one row, email never split mid-word */
@media (max-width: 47.99rem) {
  .footer-col li a { overflow-wrap: normal; word-break: normal; }
  .footer-col:has(.social) { grid-column: 1 / -1; }
  .footer-cols > .footer-col:nth-child(4) { grid-column: 1 / -1; }
}
/* Global network A–Z: each letter group stays together */
.letter-groups { grid-column: 3 / -1; columns: 4 12rem; column-gap: var(--col-gap); }
.letter-group { break-inside: avoid; margin-block-end: var(--s-4); }
.letter-group ul { margin: 0; padding: 0; list-style: none; }
.letter-group a { display: block; padding-block: 5px; transition: color 200ms var(--ease); }
.letter-group a:hover { color: var(--accent); }
@media (max-width: 63.99rem) { .letter-groups { grid-column: 1 / -1; columns: 2; } }
/* Contact map: a banner, not a whole screen */
.map-frame { aspect-ratio: 21 / 8; max-height: 460px; }
@media (max-width: 47.99rem) { .map-frame { aspect-ratio: 4 / 3; } }
/* Slider dots: bigger tap targets */
.slideshow__dot { position: relative; }
.slideshow__dot::after { content: ""; position: absolute; inset: -10px -4px; }
/* Section rhythm: ~80px between consecutive sections on desktop, ~56px on phones */
.site { --row-end: clamp(32px, 3.5vw, 52px); }
.site .row { padding-block: clamp(24px, 2.5vw, 36px) var(--row-end); }
@media (max-width: 63.99rem) { .site .row__label { margin-block-end: var(--s-3); } }

/* Product cards rebuilt from page-builder sequences */
.article-prose .img-card .img-card__eyebrow { margin: 0; font-size: var(--t-s); color: var(--accent); }
.article-prose .img-card p { margin: 0; font-size: var(--t-s); }
.article-prose .img-card p.actions a { min-height: 34px; padding: 0 12px; font-size: 13px; }
.article-prose .img-cards--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* Service audit: card images at the banner shape (no text cut), 3 across; headings consistent */
.article-prose ul:has(> li > img) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.article-prose ul:has(> li > img) img { aspect-ratio: 7 / 4; }
@media (max-width: 40rem) { .article-prose ul:has(> li > img) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-prose > :first-child { margin-block-start: 0; }
.article-prose h4 { font-size: var(--t-m); line-height: 1.3; font-weight: 500; }

/* Stat rows and section eyebrows rebuilt from page-builder blocks */
.article-prose ul.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s-4); padding: 0; list-style: none; }
.article-prose ul.stats li { margin: 0; padding: var(--s-4); border-radius: 10px; background: #f6f6f5; color: var(--grey-text); font-size: var(--t-s); line-height: 1.35; }
.article-prose ul.stats li::marker { content: none; }
.article-prose ul.stats b { display: block; margin-block-end: 4px; font-size: var(--t-l); line-height: 1.1; font-weight: 500; color: var(--accent); }
.article-prose p.eyebrow { margin-block-end: -0.4em; font-size: var(--t-s); font-weight: 500; color: var(--accent); }
.product-sheet__text.article-prose { grid-column: auto; max-width: none; }

/* Tiles and card grids: two columns on phones (single full-width columns enlarged small photos) */
@media (max-width: 47.99rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); } .tile__title { font-size: var(--t-body); } }
@media (max-width: 40rem) { .article-prose .img-run:not(.img-run--logos) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-prose p.eyebrow { margin-block-start: 2.2em; margin-block-end: 0; } .article-prose p.eyebrow + h2, .article-prose p.eyebrow + h3 { margin-block-start: 0.25em; }

/* SEO content blocks: quick answer, FAQs, service areas */
.article-prose .answer-box { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border-radius: 12px; background: var(--accent-soft); font-size: 1.0625rem; line-height: 1.55; }
.article-prose .answer-box p { margin: 0; }
.article-prose .answer-box__label { margin-block-end: 4px !important; font-size: var(--t-s); font-weight: 500; color: var(--accent); }
.article-prose .entry-faqs, .article-prose .entry-areas { margin-block-start: 2.2em; }
.article-prose .entry-faqs h2, .article-prose .entry-areas h2 { margin-block: 0 0.6em; }
.article-prose .entry-faqs details p { margin-block: 0.5em 0; color: var(--grey-text); }

/* Services index: service areas by city */
.area-columns { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-6) var(--col-gap); }
.area-column h3 { margin-block-end: var(--s-2); font-size: var(--t-m); }
.area-column ul { margin: 0; padding: 0; list-style: none; }
.area-column a { display: block; padding-block: 4px; color: var(--grey-text); transition: color 200ms var(--ease); }
.area-column a:hover { color: var(--accent); }
@media (max-width: 63.99rem) { .area-columns { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }