/* eQUIP design system.
   Brand values stay owned by equip-platform/presentation/brand.css (--equip-*);
   this file turns them into one semantic set and the shared components.
   Components are opt-in (.ds-*), so pages change only where the markup asks. */

:root{
	/* Colour, by meaning. Gold marks the visitor's path and next step only. */
	--ds-navy:var(--equip-navy,#102a43);
	--ds-navy-deep:#0b1f35;
	--ds-navy-raised:#17395c;
	--ds-gold:var(--equip-gold,#c69b24);
	--ds-gold-hover:var(--equip-gold-hover,#b58a16);
	--ds-gold-text:var(--equip-gold-text,#72570e);
	--ds-ink:var(--equip-ink,#142536);
	--ds-muted:var(--equip-muted,#526373);
	--ds-surface:var(--equip-surface,#fff);
	--ds-paper:var(--equip-paper,#f3f5f7);
	--ds-steel:var(--equip-steel,#e9edf1);
	--ds-line:var(--equip-line,#d5dce3);
	--ds-line-strong:#b3c1cd;
	--ds-on-dark:#fff;
	--ds-on-dark-muted:#b9c9d8;
	--ds-on-dark-subtle:#8ea4b8;
	--ds-line-on-dark:#2f4f6f;

	/* One type family, one scale. The page's main object always takes the top step;
	   long reading text (guides, articles, product descriptions) sits at 18 px. */
	--ds-font:var(--equip-font,"Equip Inter",system-ui,sans-serif);
	--ds-size-display:clamp(36px,4.6vw,72px);
	--ds-size-title:clamp(32px,3vw,44px);
	--ds-size-heading:clamp(22px,1.9vw,28px);
	--ds-size-sub:20px;
	--ds-size-reading:18px;
	--ds-size-body:16px;
	--ds-size-caption:13px;

	/* Spacing on a 4 px base. Sections breathe on the top steps. */
	--ds-space-1:4px;
	--ds-space-2:8px;
	--ds-space-3:12px;
	--ds-space-4:16px;
	--ds-space-5:24px;
	--ds-space-6:32px;
	--ds-space-7:48px;
	--ds-space-8:64px;
	--ds-space-9:96px;
	--ds-space-10:128px;
	--ds-section:clamp(64px,8vw,128px);

	/* One grid: the same container and left edge as the existing homepage sections. */
	--ds-container:1360px;
	--ds-gutter:40px;
	--ds-col-gap:24px;

	--ds-ease:cubic-bezier(.2,.7,.1,1);
	--ds-dur-fast:180ms;
}
@media(max-width:1150px){:root{--ds-gutter:24px}}
@media(max-width:700px){:root{--ds-gutter:20px;--ds-col-gap:16px}}

/* Layout */
.ds-container{width:min(var(--ds-container),calc(100% - 2 * var(--ds-gutter)));margin-inline:auto}

/* Typography */
.ds-display{margin:0;font:700 var(--ds-size-display)/1.02 var(--ds-font);letter-spacing:-.035em;text-wrap:balance}
.ds-title{margin:0;font:700 var(--ds-size-title)/1.08 var(--ds-font);letter-spacing:-.025em;text-wrap:balance}
.ds-heading{margin:0;font:600 var(--ds-size-heading)/1.2 var(--ds-font);letter-spacing:-.015em;text-wrap:balance}
.ds-subheading{margin:0;font:600 var(--ds-size-sub)/1.35 var(--ds-font)}
.ds-lead{margin:0;max-width:46ch;font:400 var(--ds-size-sub)/1.5 var(--ds-font);text-wrap:pretty}
.ds-body{margin:0;font:400 var(--ds-size-body)/1.6 var(--ds-font)}
.ds-caption{margin:0;font:500 var(--ds-size-caption)/1.45 var(--ds-font);letter-spacing:.01em}
.ds-data{font-variant-numeric:tabular-nums}

/* Buttons: one primary action in gold, everything else navy outline. Square, 48 px. */
.ds-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:0 var(--ds-space-5);
	border:1px solid var(--ds-gold);
	border-radius:0;
	background:var(--ds-gold);
	color:var(--ds-navy);
	font:600 var(--ds-size-body)/1.2 var(--ds-font);
	text-decoration:none;
	cursor:pointer;
	transition:background-color var(--ds-dur-fast) var(--ds-ease),border-color var(--ds-dur-fast) var(--ds-ease),color var(--ds-dur-fast) var(--ds-ease);
}
.ds-button:hover{background:var(--ds-gold-hover);border-color:var(--ds-gold-hover);color:var(--ds-navy);text-decoration:none}
.ds-button:focus-visible{outline:3px solid var(--ds-navy);outline-offset:3px}
.ds-button--secondary{background:transparent;border-color:var(--ds-navy);color:var(--ds-navy)}
.ds-button--secondary:hover{background:var(--ds-navy);border-color:var(--ds-navy);color:var(--ds-on-dark)}

/* Links: an underline that turns gold under the pointer. No arrow glyphs. */
.ds-link{
	color:var(--ds-navy);
	font-weight:600;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:.3em;
	text-decoration-color:var(--ds-line-strong);
	transition:text-decoration-color var(--ds-dur-fast) var(--ds-ease);
}
.ds-link:hover{color:var(--ds-navy);text-decoration-color:var(--ds-gold);text-decoration-thickness:2px}
.ds-link:focus-visible{outline:3px solid var(--ds-navy);outline-offset:3px}

/* On dark grounds the same components invert rather than recolour. */
.ds-on-dark{color:var(--ds-on-dark)}
.ds-on-dark .ds-link{color:var(--ds-on-dark);text-decoration-color:#ffffff66}
.ds-on-dark .ds-link:hover{color:var(--ds-on-dark);text-decoration-color:var(--ds-gold)}
.ds-on-dark :is(.ds-link,.ds-button):focus-visible{outline-color:var(--ds-gold)}
.ds-on-dark .ds-button--secondary{border-color:#ffffff80;color:var(--ds-on-dark)}
.ds-on-dark .ds-button--secondary:hover{background:var(--ds-on-dark);color:var(--ds-navy)}

/* Level: Sector, Solution, Product, with the current level underlined in gold. */
.ds-level{display:flex;flex-wrap:wrap;margin:0;font:500 var(--ds-size-caption)/1 var(--ds-font);letter-spacing:.01em;color:var(--ds-muted)}
.ds-level span{position:relative;padding-bottom:var(--ds-space-3)}
.ds-level span+span{margin-left:var(--ds-space-7)}
.ds-level span+span::before{content:'';position:absolute;top:.45em;left:calc(-1 * var(--ds-space-7) + 12px);width:24px;height:1px;background:currentColor;opacity:.45}
.ds-level .is-current{color:var(--ds-navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--ds-gold)}
.ds-on-dark .ds-level{color:var(--ds-on-dark-subtle)}
.ds-on-dark .ds-level .is-current{color:var(--ds-on-dark)}

/* Data plate: label and value on one hairline row; values in tabular figures. */
.ds-plate{margin:0;padding:0;border-top:1px solid var(--ds-line)}
.ds-plate>div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:var(--ds-space-4);padding:var(--ds-space-4) 0;border-bottom:1px solid var(--ds-line)}
.ds-plate dt{margin:0;font:500 var(--ds-size-caption)/1.5 var(--ds-font);color:var(--ds-muted)}
.ds-plate dd{margin:0;font:400 var(--ds-size-body)/1.5 var(--ds-font);font-variant-numeric:tabular-nums;color:var(--ds-ink)}
.ds-plate-links{margin:0;padding:0;list-style:none;display:grid;gap:var(--ds-space-2)}
.ds-plate-links li{margin:0}
.ds-lang{font:500 11px/1 var(--ds-font);color:var(--ds-muted);border:1px solid var(--ds-line);padding:2px 4px;vertical-align:2px}
.ds-status{display:block;margin-top:2px;font:500 12px/1.4 var(--ds-font);color:var(--ds-gold-text)}

/* Image classes. Place: graded photography of sites. Object: equipment on a white plate. */
.ds-photo-place{position:relative;overflow:hidden;margin:0;background:var(--ds-navy-deep)}
.ds-photo-place img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.06) brightness(.9)}
.ds-photo-object{margin:0;background:var(--ds-surface)}
.ds-photo-object img{mix-blend-mode:multiply}

@media(prefers-reduced-motion:reduce){
	.ds-button,.ds-link{transition:none}
}

/* Page transitions between eQUIP pages. The header holds still, the page settles in,
   and the Sector / Solution / Product indicator moves to its place on the next level.
   Browsers without cross-document view transitions simply load the page. */
@media(prefers-reduced-motion:no-preference){
	@view-transition{navigation:auto}
	.eq2-header{view-transition-name:ds-header}
	.ds-level{view-transition-name:ds-level}
	::view-transition-old(root){animation:ds-page-out 140ms var(--ds-ease) both}
	::view-transition-new(root){animation:ds-page-in 280ms var(--ds-ease) both}
	::view-transition-group(ds-level){animation-duration:420ms;animation-timing-function:var(--ds-ease)}
}
@keyframes ds-page-out{to{opacity:0}}
@keyframes ds-page-in{from{opacity:0;transform:translateY(8px)}}