/* eQUIP design system across the site.
   design-system-openings.css gives sector, solution and product pages their own
   openings. This file maps the same grid, type scale, labels, buttons and links onto
   every other page family (catalogue, Solution Centre, company, contact, blog,
   documents, legal, search, calculators) and onto the parts below the openings.
   Loaded after every page stylesheet; selectors carry the extra weight instead of
   !important. Presentation only: markup, content, forms and permissions are unchanged. */

/* ---------- 1. One grid ----------
   Every page family starts on the homepage's left edge: 1360 px wide, 40 px gutter. */
html body :is(.eq2-container,.eq5-container,.eq6-container,.eq10-container),
html body main.eq-g4 .eq-container,
html body main.eq10-not-found .eqh-container,
html body.eq7-engineering :is(.page-title,.about-section) .auto-container,
html body main.eq8{
	width:min(var(--ds-container),calc(100% - 2 * var(--ds-gutter)));
	max-width:none;
	margin-inline:auto;
	padding-inline:0;
}
/* The calculator body sat 70 px inside its own column, then centred itself again. */
html body.eq7-engineering .about-section .content_block_1 .content-box{margin-left:0}
html body.eq7-engineering .about-section :is(.equip-calc-wrap,.eq7-hub){max-width:none;margin-left:0}
/* The header's logo lands on the same edge wherever the full navigation shows.
   The logo file carries 13 of its 166 px as blank margin; the mark itself sits on the edge. */
@media(min-width:1351px){
	html body .eq2-header-inner{width:min(var(--ds-container),calc(100% - 2 * var(--ds-gutter)));max-width:none}
	html body .eq2-header-inner .eq2-brand{justify-content:flex-start;padding-left:0}
	html body .eq2-header-inner .eq2-brand img{translate:-7.8% 0}
}
/* The company opening keeps its navy panel and photograph edge to edge; the text inside
   the panel starts on the grid, measured against the full opening width (cqw). */
html body main.eq10 .eq10-company-opening{container-type:inline-size}
html body main.eq10 .eq10-company-opening .eq10-container{
	width:auto;
	max-width:590px;
	margin:0 var(--ds-space-7) 0 max(var(--ds-gutter),calc((100cqw - var(--ds-container)) / 2));
}

/* ---------- 2. Platform openings ----------
   Catalogue, Solution Centre, contact, company, blog, documents, legal, search and
   calculators keep the navy band: it marks eQUIP's own pages, apart from the sector
   photograph, the solution sheet and the product specimen. The band now uses the
   system's display type, caption labels, lead and spacing. */
html body main:is(.eq-g4-hub,.eq10) :is(.eq-g4-heading,.eq10-heading),
html body main.eq5 :is(.eq5-hero-copy,.eq5-heading>.eq5-container:not(.eq5-hero-grid)){padding-block:var(--ds-space-8)}
html body main.eq5-search .eq5-heading{padding-block:0}
html body main.eq8 .eq8-hero{padding-block:var(--ds-space-8);margin-bottom:var(--ds-space-7)}
html body main:is(.eq5,.eq-g4-hub,.eq8,.eq10) :is(.eq5-heading,.eq-g4-heading,.eq8-hero,.eq10-heading) h1,
html body.eq7-engineering main>section.page-title .content-box .title h1{
	max-width:16ch;
	margin:0;
	font:700 var(--ds-size-display)/1.02 var(--ds-font);
	letter-spacing:-.035em;
	color:var(--ds-on-dark);
	text-wrap:balance;
}
/* Where the page's main object is a text or a tool, the title takes the next step down. */
html body main:is(.eq10-legal,.eq10-article) .eq10-heading h1,
html body.eq7-engineering.page-child main>section.page-title .content-box .title h1{
	max-width:24ch;
	font-size:var(--ds-size-title);
	line-height:1.08;
	letter-spacing:-.025em;
}
html body main:is(.eq5,.eq-g4-hub,.eq10) :is(.eq5-heading,.eq-g4-heading,.eq10-heading) :is(.eq5-kicker,.eq-kicker,.eq10-kicker){
	margin:0 0 var(--ds-space-4);
	font-weight:500;
	font-size:var(--ds-size-caption);
	letter-spacing:.01em;
	text-transform:none;
	color:var(--ds-on-dark-subtle);
}
/* On content pages the label repeated the breadcrumb beside it word for word. */
html body main.eq10 .eq10-heading .eq10-kicker{display:none}
html body main:is(.eq5,.eq10) :is(.eq5-heading,.eq10-heading) :is(.eq5-hero-copy>nav,.eq10-breadcrumb){
	gap:var(--ds-space-2);
	margin:0 0 var(--ds-space-6);
	font:500 var(--ds-size-caption)/1.45 var(--ds-font);
	color:var(--ds-on-dark-muted);
}
html body main:is(.eq5,.eq10) :is(.eq5-heading,.eq10-heading) :is(.eq5-hero-copy>nav,.eq10-breadcrumb) a{
	color:var(--ds-on-dark);
	text-decoration:underline;
	text-decoration-color:#ffffff66;
	text-underline-offset:.3em;
}
html body main:is(.eq5,.eq10) :is(.eq5-heading,.eq10-heading) :is(.eq5-hero-copy>nav,.eq10-breadcrumb) a:hover{text-decoration-color:var(--ds-gold)}
html body main:is(.eq5,.eq-g4-hub,.eq8,.eq10) :is(.eq5-heading,.eq-g4-heading,.eq8-hero,.eq10-heading) :is(.eq5-hero-copy>p:not(.eq5-kicker),.eq5-container>p:not(.eq5-kicker),.eq-page-intro>p:first-child,.eq8-hero>p,.eq10-intro){
	max-width:46ch;
	margin:var(--ds-space-5) 0 0;
	font:400 var(--ds-size-sub)/1.5 var(--ds-font);
	color:var(--ds-on-dark-muted);
}
html body main.eq-g4-hub .eq-g4-heading .eq-page-intro{max-width:none}
html body main.eq-g4-hub .eq-g4-heading .eq-page-intro>p+p{max-width:72ch;margin-top:var(--ds-space-4);font:400 var(--ds-size-caption)/1.5 var(--ds-font);color:var(--ds-on-dark-subtle)}
/* Band photographs follow the place standard: graded, never boxed. */
html body main.eq5 .eq5-hero-image:not(.eq5-contained) img,
html body main.eq10 .eq10-company-opening figure img{filter:none}

/* Product specimens use the shared verified crop on a neutral plate. */
html body main.eq5 .eq5-hero-image.eq5-contained{--eq-media-height:300px;display:flex;align-items:center;justify-content:center;height:340px;padding:20px;background:transparent;border-radius:0}
html body main.eq5 .eq5-hero-image.eq5-contained img{mix-blend-mode:normal;filter:none}
html body main.eq5 .eq5-hero-image:not(.eq5-contained){border-radius:8px;background:transparent}
html body main.eq5 .eq5-hero-image:not(.eq5-contained) img{object-fit:cover;object-position:center}
@media(max-width:760px){html body main.eq5 .eq5-hero-image.eq5-contained{--eq-media-height:220px;height:260px;padding:16px}}

/* ---------- 3. Labels ----------
   Small labels read as captions: sentence case, no letter-spaced capitals. */
html body main :is(.eq-kicker,.eq5-kicker,.eq6-kicker,.eq10-kicker),
html body main.eq-g4 .eq-guide-card .eq-kicker,
html body .eq2-footer .eq2-overline{
	font-weight:500;
	font-size:var(--ds-size-caption);
	letter-spacing:.01em;
	text-transform:none;
}

/* ---------- 4. Reading ----------
   Long text reads at 18 px beside a left column for the page index or the section
   name, the same arrangement on guides, articles, legal pages and product pages. */
html body main.eq10 .eq10-reading-layout,
html body main.eq6 .eq6-reading-layout{
	display:grid;
	grid-template-columns:230px minmax(0,820px);
	column-gap:56px;
	justify-content:space-between;
	align-items:start;
}
html body main.eq10 .eq10-reading-layout>article{grid-column:2}
html body main.eq6 .eq6-reading-layout>h2{grid-column:1;max-width:none;margin:0}
html body main.eq6 .eq6-reading-layout>.eq6-reading{grid-column:2;max-width:none;margin:0}
/* Field photographs stay in the description's left column. */
html body main.eq6 .eq6-reading-layout{grid-template-columns:minmax(0,400px) minmax(0,760px);grid-template-rows:auto 1fr}
html body main.eq6 .eq6-reading-layout>.eq6-reading{grid-row:1 / span 2}
html body main.eq6 .eq6-reading-layout>.ds-field{grid-column:1;grid-row:2;margin-top:24px}
html body main.eq6 .eq6-reading-layout>.ds-field:only-child{grid-column:1 / -1;grid-row:1;max-width:620px;margin:0}
html body main.eq6 .ds-field{scroll-margin-top:120px;margin:0;padding:0;min-width:0;background:transparent;border:0}
html body main.eq6 .ds-field-head{display:block;margin-bottom:16px}
html body main.eq6 .ds-field-head p{font:500 12px/1.5 var(--ds-font);color:var(--ds-muted);margin:0 0 8px}
html body main.eq6 .ds-field-head h3{font:600 20px/1.25 var(--ds-font);margin:0;color:var(--ds-navy)}
html body main.eq6 .ds-field-layout{display:block}
html body main.eq6 .ds-field-frames{min-width:0}
html body main.eq6 .ds-field-frames figure{margin:0}
html body main.eq6 .ds-field-photo{display:block;position:relative;height:clamp(300px,34vw,460px);background:#eef1f3;border-radius:8px;overflow:hidden}
html body main.eq6 .ds-field-photo img{width:100%;height:100%;object-fit:contain;filter:none}
html body main.eq6 .ds-field-expand{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;background:#102a43;color:white;font-size:26px;border-radius:50%}
html body main.eq6 .ds-field-frames figcaption{font:400 14px/1.6 var(--ds-font);color:var(--ds-muted);padding-top:14px}
html body main.eq6 .ds-field-note{font:400 12px/1.5 var(--ds-font);color:var(--ds-muted);margin:14px 0}
html body main.eq6 .ds-field-thumbs{padding:8px 2px;display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity}
html body main.eq6 .ds-field-thumbs button{border:2px solid transparent;padding:3px;background:#fff;aspect-ratio:4/3;cursor:pointer;min-height:48px;flex:0 0 82px;scroll-snap-align:start;border-radius:4px}
html body main.eq6 .ds-field-thumbs button[aria-pressed=true]{border-color:#c69b24}
html body main.eq6 .ds-field-thumbs img{width:100%;height:100%;object-fit:contain}
html body main.eq6 .ds-field-counter{font:500 12px/1.5 var(--ds-font);color:var(--ds-muted);margin:0}
html body main.eq6 .ds-field-navigation{display:flex;align-items:center;justify-content:space-between;padding:12px 0 4px}
html body main.eq6 .ds-field-navigation button{width:44px;height:44px;border:1px solid var(--ds-line);border-radius:50%;background:#fff;color:var(--ds-navy);font-size:26px;cursor:pointer}
html body main.eq6 .ds-field-brand{position:absolute;left:12px;bottom:12px;pointer-events:none;padding:7px 10px;background:#102a43c9;color:#fff;font:600 11px/1.3 var(--ds-font);letter-spacing:.03em;border-radius:3px}
html body main.eq6 .ds-field-enlarged{position:relative;display:flex;justify-content:center;align-items:center;max-height:calc(100dvh - 140px)}
html body main.eq6 .ds-field-enlarged img{max-height:calc(100dvh - 140px);object-fit:contain}
html body main.eq6 .ds-field-note{max-width:42ch}
html body main.eq6 .ds-field [hidden]{display:none}
html body main.eq6 .ds-field :is(a,button):focus-visible{outline:3px solid #a87e0b;outline-offset:4px}
html body main.eq6 .ds-field-dialog button{min-width:44px;min-height:44px;border:1px solid #b0c1cc;background:#fff;color:#102a43;font:500 15px/1.4 var(--ds-font);padding:8px 16px;cursor:pointer}
html body :is(main.eq6 .eq6-reading,main.eq-g4 .eq-g4-article,main.eq10 .eq10-prose){font-size:var(--ds-size-reading);line-height:1.7}
html body main.eq6 .eq6-section>h2,
html body main.eq6 .eq6-documents h2,
html body main.eq-g4 .eq-g4-article>h2,
html body main.eq10 .eq10-prose h2{
	font:600 var(--ds-size-heading)/1.2 var(--ds-font);
	letter-spacing:-.015em;
	color:var(--ds-navy);
}
html body main.eq10 .eq10-prose h3{font:600 var(--ds-size-sub)/1.35 var(--ds-font);letter-spacing:0;color:var(--ds-navy)}
html body main.eq10 :is(.eq10-post-copy,.eq10-catalog-card) h2{font:600 var(--ds-size-heading)/1.2 var(--ds-font);letter-spacing:-.015em}
html body main.eq5 .eq5-results-heading p{font:600 var(--ds-size-sub)/1.35 var(--ds-font);color:var(--ds-navy)}

/* ---------- 5. Links ----------
   Navy text with an underline that turns gold under the pointer. Indexes drop the underline. */
html body :is(main.eq6 .eq6-reading,main.eq-g4 .eq-g4-article,main.eq10 .eq10-prose) a,
html body main :is(.eq6-text-link,.eq10-read,.eq5-clear,.eq5-results-heading>a){
	color:var(--ds-navy);
	font-weight:600;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-decoration-color:var(--ds-line-strong);
	text-underline-offset:.3em;
}
html body :is(main.eq6 .eq6-reading,main.eq-g4 .eq-g4-article,main.eq10 .eq10-prose) a:hover,
html body main :is(.eq6-text-link,.eq10-read,.eq5-clear,.eq5-results-heading>a):hover{color:var(--ds-navy);text-decoration-color:var(--ds-gold);text-decoration-thickness:2px}
html body :is(main.eq-g4 .eq-g4-toc,main.eq10 .eq10-toc) a{color:var(--ds-navy);text-decoration:none}
html body :is(main.eq-g4 .eq-g4-toc,main.eq10 .eq10-toc) a:hover{text-decoration:underline;text-decoration-color:var(--ds-gold);text-underline-offset:.3em}
html body main.eq-g4 .eq-guide-card h2 a,
html body main.eq10 .eq10-post-copy h2 a{color:var(--ds-navy)}

/* ---------- 6. Buttons ----------
   One size and one type setting for every action button; colours stay with their role. */
html body main :is(.eq-button,.eq5-button,.eq6-button,.eq10-button,.wpcf7-submit){
	min-height:48px;
	padding-block:0;
	padding-inline:var(--ds-space-5);
	border-radius:0;
	box-shadow:none;
	font:600 var(--ds-size-body)/1.2 var(--ds-font);
	letter-spacing:0;
	text-transform:none;
}

/* ---------- 7. Photographs ----------
   Every photograph of a plant, workshop, delivery or site takes the same grade, so
   pictures from different sources read as one set. Equipment on a plain ground and
   renders are not graded. */
html body main.eq10 :is(.eq10-post-image,.eq10-article-image,.eq10-company-image) img,
html body main.eqh-home .eqs-scene--field :is(.eqs-photo img,.eqs-video){filter:none}

@media(max-width:1100px){
	html body main.eq10 .eq10-reading-layout,
	html body main.eq6 .eq6-reading-layout{grid-template-columns:200px minmax(0,1fr);column-gap:var(--ds-space-6)}
}
@media(max-width:900px){
	html body main.eq6 .eq6-reading-layout{display:block}
	html body main.eq6 .eq6-reading-layout>h2{margin-bottom:var(--ds-space-5)}
	html body main.eq6 .ds-field{padding:16px;margin-block:24px}
	html body main.eq6 .ds-field-head{display:block}
	html body main.eq6 .ds-field-head>p{margin-top:12px}
	html body main.eq6 .ds-field-layout{display:block}
	html body main.eq6 .ds-field-photo{height:clamp(230px,65vw,420px)}
	html body main.eq6 .ds-field-aside{margin-top:8px}
	html body main.eq6 .ds-field-thumbs{display:flex;overflow-x:auto;padding:4px;gap:8px}
	html body main.eq6 .ds-field-thumbs button{flex:0 0 84px}
}

@media(max-width:700px){
	html body .eq2-header-inner{width:calc(100% - 2 * var(--ds-gutter))}
	html body .eq2-header-inner .eq2-brand{padding-left:0;justify-content:flex-start}
	html body .eq2-header-inner .eq2-brand img{translate:-7.8% 0}
	html body main.eq10 .eq10-reading-layout{display:flex}
	html body main.eq10 .eq10-company-opening .eq10-container{margin-inline:var(--ds-gutter)}
	html body main:is(.eq-g4-hub,.eq10) :is(.eq-g4-heading,.eq10-heading),
	html body main.eq5 :is(.eq5-hero-copy,.eq5-heading>.eq5-container:not(.eq5-hero-grid)),
	html body main.eq8 .eq8-hero{padding-block:var(--ds-space-7)}
}

/* ---------- 8. Documents ----------
   The public document index reads as a list, not as cards: one row per document, with
   what the file is and what it covers stated in the row. The list holds its shape as
   catalogues and certificates are added. */
html body main.eq10 .eq10-documents{padding-block:var(--ds-space-7) 0}
html body main.eq10 .eq10-documents-title{margin:0 0 var(--ds-space-3);font:600 var(--ds-size-heading)/1.2 var(--ds-font);letter-spacing:-.015em;color:var(--ds-navy)}
html body main.eq10 .eq10-documents-intro{max-width:64ch;margin:0 0 var(--ds-space-5);font:400 var(--ds-size-reading)/1.6 var(--ds-font);color:var(--ds-muted)}
html body main.eq10 .eq10-document-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ds-line)}
html body main.eq10 .eq10-document{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,auto);gap:var(--ds-space-6);align-items:start;margin:0;padding:var(--ds-space-6) 0;border-bottom:1px solid var(--ds-line);list-style:none}
html body main.eq10 .eq10-document h3{margin:0;font:600 var(--ds-size-sub)/1.3 var(--ds-font);letter-spacing:-.01em;color:var(--ds-navy)}
html body main.eq10 .eq10-document-standard{margin:var(--ds-space-2) 0 0;font:400 var(--ds-size-body)/1.5 var(--ds-font);color:var(--ds-muted)}
html body main.eq10 .eq10-document-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-space-4) var(--ds-space-6);margin:var(--ds-space-5) 0 0}
html body main.eq10 .eq10-document-facts>div{display:grid;gap:2px;min-width:0}
html body main.eq10 .eq10-document-facts dt{font:500 var(--ds-size-caption)/1.4 var(--ds-font);color:var(--ds-muted)}
html body main.eq10 .eq10-document-facts dd{margin:0;font:400 var(--ds-size-body)/1.5 var(--ds-font);color:var(--ds-ink);overflow-wrap:anywhere}
html body main.eq10 .eq10-document-scope{grid-column:1 / -1}
html body main.eq10 .eq10-document-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-space-3);text-align:center}
html body main.eq10 .eq10-document-actions .eq10-read{min-height:0;padding:0;text-align:center}
html body main.eq10 .eq10-document-meta{margin:0;font:400 var(--ds-size-caption)/1.5 var(--ds-font);color:var(--ds-muted);overflow-wrap:anywhere}
html body main.eq10 .eq10-documents-private{padding-block:var(--ds-space-7)}
@media(max-width:700px){
	html body main.eq10 .eq10-document{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-4)}
	html body main.eq10 .eq10-document-facts{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-3)}
	html body main.eq10 .eq10-document-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-4)}
}