(unaffected
by .synmax img) but the bio-modal deco emits a bare ![]()
, which would collapse. */
.sm-biomodal__cutout, img.sm-biomodal__cutout { position: absolute; left: 86px; top: -43px; width: 351px; height: 446px; max-width: none; object-fit: cover; object-position: top; }
.sm-biomodal__botscrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,28,42,0) 72%, rgba(19,28,42,.7) 85.6%, #131C2A 96.35%); }
.sm-biomodal__rscrim { position: absolute; right: 0; top: 0; bottom: 0; width: 374px; background: linear-gradient(90deg, rgba(19,28,42,0) 0%, #131C2A 83%); }
.sm-biomodal__shaft { position: absolute; background: #D9D9D9; pointer-events: none; }
.sm-biomodal__shaft--l { left: 0; top: 0; width: 94px; height: 205px; opacity: .04; }
.sm-biomodal__shaft--r { right: 0; top: 68px; width: 52px; height: 275px; opacity: .03; }
img.sm-biomodal__guides { position: absolute; left: 0; top: 0; width: 771px; height: 280px; max-width: none; }
/* 69x103 = the reticle's visible extent in band coordinates (Figma 256:1715), so
the SVG's viewBox maps 1:1 to band px and the circle/square land on the design's
measured positions. Was 120x117, which squeezed a whole miniature target symbol
into the corner instead. */
img.sm-biomodal__hud { position: absolute; left: 0; top: 0; width: 68px; height: 102px; max-width: none; }
/* Design 256:1715: the plate is vertically CENTRED in the band (top 96.34 of
343-150), its glass is .2 -> .04 at 218deg, and its brackets are 48px on the
TOP-LEFT + BOTTOM-RIGHT corners — the same pair every other bracket uses. The
old values (16px high, .04 -> .008, 50px on bottom-left + top-right with the
right one pushed 52px OUTSIDE the plate) made the glass invisible and hung a
stray arm in the band. Stroke follows the global --sm-stroke-bracket rather
than a hardcoded 2.29px, which the "thinner corners" pass never reached. */
.sm-biomodal__plate { position: absolute; right: 54px; top: 50%; transform: translateY(-50%); width: 386px; padding: 28px; display: flex; gap: 12px; align-items: flex-start; z-index: 2; background: linear-gradient(243.7deg, rgba(22, 31, 45, 0.2), rgba(22, 31, 45, 0.04)); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(7.90px); }
.sm-biomodal__plate::before, .sm-biomodal__plate::after { content: ""; position: absolute; width: 48px; height: 48px; border: 0 solid rgba(255,255,255,.9); pointer-events: none; }
.sm-biomodal__plate::before { left: 0; top: 0; border-left-width: var(--sm-stroke-bracket); border-top-width: var(--sm-stroke-bracket); }
.sm-biomodal__plate::after { right: 0; bottom: 0; border-right-width: var(--sm-stroke-bracket); border-bottom-width: var(--sm-stroke-bracket); }
.sm-biomodal__ptext { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* Desktop/H2 is Graphie Bold 40/46; the role is Graphie Regular 24/32 (the design
wraps it in a SemiBold frame but the run itself is Regular). Both were 600. */
.sm-biomodal__name { font-size: 40px; line-height: 46px; font-weight: 700; color: #fff; margin: 0; text-transform: none; }
.sm-biomodal__namerule { height: 1px; width: 100%; background: rgba(255,255,255,.5); }
.sm-biomodal__role { font-size: 24px; line-height: 32px; font-weight: 400; color: #E4E4E4; opacity: .6; margin: 0; }
.sm-biomodal__platedots { width: 40px; height: 40px; flex: 0 0 40px; margin: 0; }
.sm-biomodal__platedots img { width: 40px; height: 40px; display: block; }
.sm-biomodal__biohead { position: relative; display: flex; gap: 12px; align-items: center; width: 100%; }
.sm-biomodal__biohead::before { content: ""; position: absolute; left: -60px; top: 50%; width: 48px; height: 1px; background: rgba(255,255,255,.12); }
.sm-biomodal__biohead::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.12); }
.sm-biomodal__biotag { padding: 12px; border-radius: 2px; font-size: 12px; font-weight: 400; letter-spacing: 2.4px; line-height: 20px; text-transform: uppercase; color: #fff; margin: 0; }
.sm-biomodal__text { font-size: var(--sm-fs-body); line-height: 26px; color: #E9E9E9; margin: 0; text-box: trim-both cap alphabetic; }
.sm-biomodal__text strong { font-weight: 700; color: #E9E9E9; }
/* Design: 16px padding around a 24px glyph = 56 square, 22px brackets (was 52/20). */
.sm-biomodal__close { position: absolute; top: 0; right: 0; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; padding: 16px; background: transparent; border: .2px solid #E9E9E9; color: #fff; cursor: pointer; z-index: 3; --bw: 22px; --bracket: #fff; }
.sm-biomodal__close svg { width: 24px; height: 24px; display: block; }
@media (max-width: 1100px) {
.sm-biomodal__panel { padding: 32px; }
.sm-biomodal__plate { right: 16px; width: min(386px, 60%); }
}
/* Phone modal restack: the desktop band is a fixed 994px composition
(cutout at left 86, plate floated right) — here the cutout centers in a
taller band and the plate docks full-width at its foot, below the photo.
Side HUD clutter (guides/shafts/right scrim) goes; the bio rule's -60px
::before would poke out of the 20px panel padding. */
@media (max-width: 640px) {
.sm-biomodal { padding: 12px; }
.sm-biomodal__panel { padding: 20px; gap: 20px; max-height: calc(100dvh - 24px); }
.sm-biomodal__band { height: 470px; flex: 0 0 470px; }
.sm-biomodal__cutout, img.sm-biomodal__cutout { left: 50%; transform: translateX(-50%); width: 240px; height: 306px; top: -20px; }
img.sm-biomodal__guides, .sm-biomodal__shaft, .sm-biomodal__rscrim { display: none; }
img.sm-biomodal__hud { width: 48px; height: 72px; }
.sm-biomodal__botscrim { background: linear-gradient(180deg, rgba(19,28,42,0) 40%, rgba(19,28,42,.7) 55%, #131C2A 68%); }
.sm-biomodal__plate { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; transform: none; padding: 16px; }
.sm-biomodal__plate::before, .sm-biomodal__plate::after { width: 28px; height: 28px; }
.sm-biomodal__name { font-size: 22px; line-height: 28px; }
.sm-biomodal__role { font-size: 15px; line-height: 20px; }
.sm-biomodal__platedots { width: 28px; height: 28px; flex: 0 0 28px; }
.sm-biomodal__platedots img { width: 28px; height: 28px; }
.sm-biomodal__biohead::before { display: none; }
.sm-biomodal__close { width: 44px; height: 44px; padding: 10px; --bw: 16px; }
.sm-biomodal__close svg { width: 20px; height: 20px; }
}
/* The closed modal hides itself with visibility/opacity (it stays display:flex so
the fade can transition) and lifts its panel with transform+opacity. The editor
canvas has to undo ALL of that, not just the layout bits — resetting display and
position alone left every modal occupying space while invisible and unselectable,
so the bio popups could not be edited at all (regressed when the fade-in landed,
2026-08-03). Keep these in step with the .sm-biomodal closed state above. */
.editor-styles-wrapper .sm-biomodal { display: block; position: static; padding: 0; margin-top: 24px;
visibility: visible; opacity: 1; pointer-events: auto; transition: none; }
.editor-styles-wrapper .sm-biomodal__backdrop { display: none; }
.editor-styles-wrapper .sm-biomodal__panel { width: auto; max-height: none; overflow: visible; }
.editor-styles-wrapper .sm-biomodal:not(.is-open) .sm-biomodal__panel { opacity: 1; transform: none; transition: none; }
.sm-btn--dim { background: rgba(0,0,0,.4); color: #fff; border: 0; box-shadow: none; }
.sm-btn--dim:hover { background: rgba(0,0,0,.55); }
.sm-btn--sm { height: 44px; font-size: var(--sm-fs-nav-link); line-height: var(--sm-lh-nav-link); font-weight: 600; padding: 12px 16px; --bw: 25px; text-transform: none; }
.sm-btn--sm > .wp-block-button__link { padding: 12px 16px; }
.sm-btn--lg { height: 64px; font-size: var(--sm-fs-btn); line-height: var(--sm-lh-btn); padding: 18px 12px; gap: 16px; min-width: 200px; --bw: 32px; text-transform: none; }
.sm-btn--lg > .wp-block-button__link { padding: 18px 12px; }
/* --flat = the corner-bracket OPT-OUT. sm_btns() puts sm-bracket on every
button, and the brackets ARE the button div's ::before — so this class (and
only this class) suppresses them. Don't combine it with a button that the
design gives brackets to (bit the news-header "View All" 2026-08-04). */
.sm-btn--flat::before, .sm-btn--flat::after { display: none; }
/* ==== 14. REVAMP-2026 SHARED COMPONENTS (multi-brand) ==== */
.sm-genhero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
/* the bg slot takes a core video block too (about hero) */
.sm-genhero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-genhero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.synmax .sm-genhero__bg img { height: 100%; }
.sm-subhero__scrim { position: absolute; inset: 0; z-index: 0; background:
linear-gradient(180deg, rgba(8,18,32,0) 22.72%, #081220 96.64%),
linear-gradient(223.41deg, rgba(8,18,32,0) 33.04%, #081220 100%); }
.sm-genhero__hud { width: 500px; height: auto; z-index: 1; opacity: .85; }
/* Animated HUD target (gen-hud icon:"hud-target-anim") — draw-in choreography
measured off synmax.com: dot (0s) -> frame (.3s) -> rings inner->outer
(.5-.8s) -> crosshair lines grow out from center (1.1s) -> label panels
staggered from 1.8s, glass LAT/LON box last. Hidden states follow the
sm-anim house convention: they exist ONLY under html.sm-anim:not(.sm-anim-off)
so the watchdog kill / reduced motion / no-JS render the composed art. */
/* Undimmed (the .85 was tuned for the old img): the design file carries its own
per-part opacities, and a root opacity would also make the svg its own
backdrop root — the glass box's backdrop-filter could then only sample the
svg's thin strokes instead of the earth beneath. z-index 2 floats the box
above the hero grid's coordinate chips. */
svg.sm-hudtgt { overflow: visible; opacity: 1; z-index: 2; }
.sm-hudtgt .sm-hudtgt__frame,
.sm-hudtgt .sm-hudtgt__c,
.sm-hudtgt .sm-hudtgt__dot,
.sm-hudtgt .sm-hudtgt__dotring { transform-box: view-box; transform-origin: 252.5px 236.5px; }
.sm-hudtgt .sm-hudtgt__ln { transform-box: fill-box; }
.sm-hudtgt .sm-hudtgt__ln--l { transform-origin: 100% 50%; }
.sm-hudtgt .sm-hudtgt__ln--r { transform-origin: 0 50%; }
.sm-hudtgt .sm-hudtgt__ln--t { transform-origin: 50% 100%; }
.sm-hudtgt .sm-hudtgt__ln--b { transform-origin: 50% 0; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__frame,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__c,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__dot,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__dotring { opacity: 0; transform: scale(0); animation: sm-hud-in 1s ease both; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__frame { animation-duration: .8s; animation-delay: .3s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__c--inner { animation-delay: .5s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__c--inner2 { animation-delay: .6s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__c--outer { animation-delay: .7s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__c--outer2 { animation-delay: .8s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__dot,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__dotring { animation-duration: .6s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__dotring { animation-delay: .1s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__ln { opacity: 0; animation: sm-hud-in .6s ease 1.1s both; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__ln--l,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__ln--r { transform: scaleX(0); }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__ln--t,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__ln--b { transform: scaleY(0); }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__lbl,
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__panel { opacity: 0; animation: sm-hud-fade .6s ease both; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__lbl--ais { animation-delay: 1.8s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__lbl--tracking { animation-delay: 2s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__lbl--stack { animation-delay: 2.2s; }
html.sm-anim:not(.sm-anim-off) .sm-hudtgt .sm-hudtgt__panel { animation-duration: .8s; animation-delay: 2.5s; }
@keyframes sm-hud-in { to { opacity: 1; transform: scale(1); } }
@keyframes sm-hud-fade { to { opacity: 1; } }
/* Split-band HUD target (split-chrome deco, Group 1924) — same choreography
as the hero but SCROLL-triggered: these are transitions that fire when
anim.js stamps .is-in on the band (the production site's is-active model).
Position drops the art onto the old composite chrome's grid: at
left 75%-540px the svg's boxes land where the old HTML labels sat. */
.sm-hudsplit { position: absolute; left: calc(75% - 540px); top: 28px; width: 743px; height: 596px; display: block; pointer-events: none; overflow: visible; }
.sm-hudsplit .sm-hudsplit__frame,
.sm-hudsplit .sm-hudsplit__c { transform-box: view-box; transform-origin: 355.263px 282.156px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 1s; }
.sm-hudsplit .sm-hudsplit__frame { transition-duration: .8s; transition-delay: .3s; }
.sm-hudsplit .sm-hudsplit__c--inner { transition-delay: .5s; }
.sm-hudsplit .sm-hudsplit__c--inner2 { transition-delay: .6s; }
.sm-hudsplit .sm-hudsplit__c--outer { transition-delay: .7s; }
.sm-hudsplit .sm-hudsplit__c--outer2 { transition-delay: .8s; }
.sm-hudsplit .sm-hudsplit__ln { transform-box: fill-box; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: .6s; transition-delay: 1.1s; }
.sm-hudsplit .sm-hudsplit__ln--l { transform-origin: 100% 50%; }
.sm-hudsplit .sm-hudsplit__ln--r { transform-origin: 0 50%; }
.sm-hudsplit .sm-hudsplit__ln--t { transform-origin: 50% 100%; }
.sm-hudsplit .sm-hudsplit__ln--b { transform-origin: 50% 0; }
.sm-hudsplit .sm-hudsplit__lbl--ais { transition: opacity .6s ease 1.8s; }
.sm-hudsplit .sm-hudsplit__lbl--tracking { transition: opacity .6s ease 2s; }
.sm-hudsplit .sm-hudsplit__box--readouts { transition: opacity .6s ease 2.2s; }
.sm-hudsplit .sm-hudsplit__box--coords { transition: opacity .8s ease 2.5s; }
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__frame,
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__c { opacity: 0; transform: scale(0); }
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__ln--l,
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__ln--r { opacity: 0; transform: scaleX(0); }
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__ln--t,
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__ln--b { opacity: 0; transform: scaleY(0); }
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__lbl,
html.sm-anim:not(.sm-anim-off) .sm-split:not(.is-in) .sm-hudsplit__box { opacity: 0; }
/* Phones kept the old chrome's reticle + readout box and dropped the loose
labels + coords panel — mirror that per-part. */
@media (max-width: 760px) {
.sm-hudsplit .sm-hudsplit__lbl, .sm-hudsplit .sm-hudsplit__box--coords { display: none; }
}
/* About "Our Approach" HUD (approach-chrome deco, Figma 156:2568) — the panel
IS the art's 610x498 canvas, so the svg pins inset 0 and scales with it.
Scroll-triggered like the split band: signal-monitor chip and frame first,
then the reticle locks, the marker pops, the predicted path + ship appear,
labels and the LAT/LONG box close it out. The old standalone hud img is
superseded by the reticle baked into this art. */
.sm-approach__panel img.sm-genhud { display: none; }
.sm-hudap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sm-hudap .sm-hudap__frame,
.sm-hudap .sm-hudap__arc { transition: opacity .8s ease .2s; }
.sm-hudap .sm-hudap__lbl--monitor { transition: opacity .6s ease .4s; }
.sm-hudap .sm-hudap__lbl--coordtag { transition: opacity .6s ease .6s; }
.sm-hudap .sm-hudap__reticle,
.sm-hudap .sm-hudap__mark,
.sm-hudap .sm-hudap__ship { transform-box: view-box; transition-property: transform, opacity; transition-timing-function: ease; }
.sm-hudap .sm-hudap__reticle { transform-origin: 348px 227px; transition-duration: .8s; transition-delay: .6s; }
.sm-hudap .sm-hudap__mark { transform-origin: 348.5px 225.5px; transition-duration: .6s; transition-delay: 1s; }
.sm-hudap .sm-hudap__path { transition: opacity .8s ease 1.2s; }
.sm-hudap .sm-hudap__ship { transform-origin: 390px 186px; transition-duration: .6s; transition-delay: 1.4s; }
.sm-hudap .sm-hudap__lbl--task { transition: opacity .6s ease 1.6s; }
.sm-hudap .sm-hudap__lbl--pathlbl { transition: opacity .6s ease 1.8s; }
.sm-hudap .sm-hudap__box { transition: opacity .8s ease 2.1s; }
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__reticle,
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__mark,
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__ship { opacity: 0; transform: scale(0); }
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__frame,
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__arc,
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__path,
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__lbl,
html.sm-anim:not(.sm-anim-off) .sm-approach:not(.is-in) .sm-hudap__box { opacity: 0; }
/* Phones dropped the coordtag + hud chips before; the monitor, box and
reticle stay. */
@media (max-width: 760px) {
.sm-hudap .sm-hudap__lbl--coordtag, .sm-hudap .sm-hudap__lbl--task, .sm-hudap .sm-hudap__lbl--pathlbl { display: none; }
}
.sm-hero.sm-hero--article { min-height: 700px; }
.sm-hero--article .sm-hero__content { padding-top: 236px; padding-bottom: 105px; gap: 24px; }
.sm-hero--article .sm-hero__head { gap: 24px; }
.sm-hero--article .sm-hero__title { font-size: var(--sm-fs-h1-small); line-height: var(--sm-lh-h1-small); letter-spacing: 0; text-transform: none; width: 680px; max-width: 100%; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #E9E9E9; color: #E9E9E9; }
.sm-hero--article .sm-hero__rule { width: 623px; }
.sm-hero--article .sm-hero__bottom { flex-direction: column; align-items: flex-start; gap: 28px; }
.sm-hero--article .sm-hero__lead { font-size: var(--sm-fs-nav-link); line-height: var(--sm-lh-nav-link); width: 623px; color: #E9E9E9; }
.sm-hero--article .sm-hero__lead p { margin: 0; font: inherit; color: inherit; line-height: inherit; }
.sm-hero--article .sm-genhero__hud { left: calc(50% + 96px); top: 83px; }
@media (max-width: 1280px) { .sm-hero--article .sm-genhero__hud { display: none; } }
.sm-hero--article .sm-hero__ctas .sm-btn { height: 44px; min-width: 200px; font-size: var(--sm-fs-p2); padding: 8px 12px; --bw: 32px; }
.sm-hero__meta { display: flex; gap: 16px; align-items: center; }
.sm-hero__date { font-size: var(--sm-fs-p2); line-height: 1.2; color: #E9E9E9; opacity: .8; margin: 0; }
.sm-ntag2,
.sm-hero--article .wp-block-post-terms a { height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; min-width: 72px; background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 2px; font-size: var(--sm-fs-p2); line-height: 1.38; color: rgba(255,255,255,.8); text-decoration: none; margin: 0; }
.sm-hero--article .wp-block-post-terms { display: inline-flex; gap: 16px; margin: 0; font-size: var(--sm-fs-p2); }
.sm-hero--article .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.sm-reshero, .sm-reshero .wp-block-post-template, .sm-reshero .wp-block-post-template > li { display: contents; }
.sm-article__meta .wp-block-post-terms { display: inline-flex; gap: 12px; align-items: center; margin: 0; font-size: var(--sm-fs-p2); }
.sm-article__meta .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.sm-article__meta .wp-block-post-terms a { display: inline-flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; border-radius: 2px; font-size: var(--sm-fs-p2); line-height: 1; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); }
.sm-article__meta .wp-block-post-terms a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.sm-article__meta .wp-block-post-date { margin: 0; }
.sm-article__body .wp-block-post-content { display: flex; flex-direction: column; gap: 24px; }
.sm-article__body .wp-block-post-content > h2 { font-size: var( --sm-fs-h5); font-weight: 600; line-height: 32px; color: #fff; margin: 16px 0 0; text-transform: none; }
.sm-article__body .wp-block-post-content > h3 { font-size: var(--sm-fs-h6); font-weight: 600; line-height: var(--sm-lh-h6); color: #fff; margin: 12px 0 0; text-transform: none; }
.sm-article__body .wp-block-post-content > p { font-size: var(--sm-fs-p2); line-height: 1.62; color: #E9E9E9; opacity: .92; margin: 0; }
.sm-article__body .wp-block-post-content > ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sm-article__body .wp-block-post-content > ul li { position: relative; padding-left: 25px; font-size: var(--sm-fs-p2); line-height: 1.5; color: #E9E9E9; opacity: .92; }
.sm-article__body .wp-block-post-content > ul li::before { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 13px; background: linear-gradient(180deg, #00A1E1 0%, #00E96C 100%); }
.sm-article__body .wp-block-post-content > ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-size: var(--sm-fs-p2); line-height: 1.5; color: #E9E9E9; opacity: .92; }
.sm-article__body .wp-block-post-content figure { margin: 16px 0 0; }
.sm-article__body .wp-block-post-content img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
.sm-article__body .wp-block-post-content figcaption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: rgba(233,233,233,.6); text-align: center; }
.sm-article__body .wp-block-post-content a:not(.wp-block-button__link) { color: #69E0F5; text-decoration: underline; text-underline-offset: 2px; }
.sm-related .wp-block-query { width: 100%; }
ul.sm-npv__gridrow { margin: 0; padding: 0; list-style: none; }
ul.sm-npv__gridrow > li { display: contents; }
ul.sm-npv__gridrow--wrap { flex-wrap: wrap; } /* redundant since the base rule wraps; kept for the patterns that still carry the class */
.sm-npvfeature__img a { display: block; width: 100%; height: 100%; }
:is(.sm-related, .sm-articles) .sm-npvfeature--grid::after { content: ""; position: absolute; right: 33px; top: 33px; width: 80px; height: 80px; z-index: 1;
background: url("../icons/dotblock-80.svg") 0 0 / 80px 80px no-repeat; pointer-events: none; }
:is(.sm-related, .sm-articles, .sm-spot) .sm-npvfeature__panel { position: relative; z-index: 2; }
:is(.sm-related, .sm-articles, .sm-spot, .sm-resources) .wp-block-post-terms { display: inline-flex; gap: 12px; align-items: center; margin: 0; font-size: var(--sm-fs-p2); }
:is(.sm-related, .sm-articles, .sm-spot, .sm-resources) .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
:is(.sm-related, .sm-articles, .sm-spot, .sm-resources) .wp-block-post-terms a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 2px; background: rgba(0,0,0,.15); color: #fff; opacity: .8; font-size: var(--sm-fs-tagline);; line-height: 1; text-decoration: none; }
.sm-npvfeature__meta .wp-block-post-date { margin-left: auto; }
.sm-npvfeature__title a { color: #fff !important; text-decoration: none; }
.sm-npvfeature__ex p { margin: 0; font-size: inherit; font-weight: 300; line-height: inherit; color: var(--txt-soft); }
.sm-npvfeature__cta .wp-block-read-more, :is(.sm-newscard__cta, .sm-newsfeature__cta) .wp-block-read-more { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 12px 16px; box-sizing: border-box; background: rgba(0,0,0,.4); border-radius: var(--sm-radius-sm); color: #fff; font-size: var(--sm-fs-split-sub); font-weight: 600; line-height: 1; text-decoration: none; --bw: 27px; }
.sm-npvfeature__cta .wp-block-read-more:hover, :is(.sm-newscard__cta, .sm-newsfeature__cta) .wp-block-read-more:hover { background: rgba(0,0,0,.55); }
.sm-spotq, .sm-spotq .wp-block-post-template, .sm-spotq .wp-block-post-template > li { display: contents; }
.sm-miniq, .sm-miniq .wp-block-post-template, .sm-miniq .wp-block-post-template > li { display: contents; }
.sm-newsmini__img a { display: block; width: 100%; height: 100%; }
.sm-newsmini__title a { color: #fff !important; text-decoration: none; }
.sm-newsmini__tags .wp-block-post-terms a { height: 30px; padding: 0 12px; font-size: var(--sm-fs-split-sub); }
.sm-articles .sm-section__inner > .wp-block-query { width: 100%; margin-top: 40px; }
.sm-resq__empty { color: #E9E9E9; opacity: .8; margin: 24px 0 0; font-size: var(--sm-fs-p2); }
.sm-resq { transition: opacity .28s var(--sm-ease); }
.sm-resq.is-loading { opacity: .35; pointer-events: none; }
.sm-afilter .sm-jobs__filter { position: relative; }
.sm-afilter .sm-jobs__field { cursor: pointer; transition: border-color .28s var(--sm-ease); }
.sm-afilter .sm-jobs__field:hover, .sm-afilter .sm-jobs__field:focus-within { border-color: #fff; }
.sm-afilter .sm-jobs__field svg { transition: transform .28s var(--sm-ease); }
.sm-afilter .sm-jobs__filter.is-open .sm-jobs__field svg { transform: rotate(180deg); }
.sm-resdrop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 8px; margin: 0; list-style: none;
background: rgba(11,19,30,.98); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .22s var(--sm-ease), transform .22s var(--sm-ease), visibility 0s linear .22s; }
.sm-jobs__filter.is-open .sm-resdrop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sm-resdrop button { display: block; width: 100%; padding: 10px 12px; background: transparent; border: 0; border-radius: 4px; color: #E9E9E9; font: inherit; font-size: var(--sm-fs-small); text-align: left; cursor: pointer; transition: background-color .2s var(--sm-ease); }
.sm-resdrop button:hover { background: rgba(255,255,255,.08); }
.sm-resdrop button.is-current { color: #fff; background: rgba(255,255,255,.05); font-weight: 600; }
.sm-imgcard { position: relative; overflow: clip; background: #081220; }
.sm-imgcard > .sm-container { position: relative; }
.sm-imgcard__card { position: relative; display: flex; align-items: stretch; padding: 16px; }
.sm-section__inner > .sm-imgcard__card { margin-top: 40px; }
.sm-imgcard__card::before, .sm-imgcard__card::after { content: ""; position: absolute; left: 50%; margin-left: -50vw; width: 100vw; height: 1px; background: rgba(233,233,233,.2); pointer-events: none; }
.sm-imgcard__card::before { top: -1px; }
.sm-imgcard__card::after { bottom: -1px; }
.sm-imgcard > .sm-container::before, .sm-imgcard > .sm-container::after { content: ""; position: absolute; top: 78px; bottom: calc(-1 * var(--sm-section-py)); width: 1px; background: rgba(233,233,233,.2); pointer-events: none; }
.sm-imgcard > .sm-container::before { left: 0; }
.sm-imgcard > .sm-container::after { right: 0; }
.sm-imgcard__text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 40px; border: 1px solid rgba(233,233,233,.2); }
.sm-imgcard__head { display: flex; gap: 20px; align-items: center; }
.sm-imgcard__head .sm-ic { flex: 0 0 44px; width: 44px; height: 44px; }
.sm-imgcard__head .sm-ic img { width: 44px; height: 44px; }
.sm-imgcard__title { font-size: clamp(24px,2.6vw,32px); line-height: 1.2; font-weight: 700; color: #fff; margin: 0; text-transform: none; }
.sm-imgcard__divider { height: 1px; background: rgba(233,233,233,.2); border: 0; margin: 0; }
.sm-imgcard__divider:not(.is-style-wide):not(.is-style-dots) { width: 100%; max-width: none; }
.sm-imgcard__body p { color: var(--sm-body-dark); font-size: var(--sm-fs-p2); font-weight: 300; line-height: 1.55; margin: 0; }
.sm-imgcard__body p + p { margin-top: 16px; }
.sm-imgcard__img { flex: 0 0 574px; position: relative; overflow: clip; min-height: 0; background: var(--sm-night); }
/* the media figure fills its column — photos always run full height of the card */
.sm-imgcard__img > figure { position: absolute; inset: 0; margin: 0; }
.sm-imgcard__img img { width: 100%; height: 100%; object-fit: cover; }
.sm-imgcard .sm-featcard__scrim { display: none; }
.sm-imgcard figure.sm-featcard__media::after { display: none; }
@media (max-width:1100px){ .sm-imgcard__img { flex-basis: 44%; } }
@media (max-width:760px){ .sm-imgcard__card { flex-direction: column; } .sm-imgcard__img { flex-basis: auto; min-height: 260px; } }
html.sm-anim .sm-imgcard__card::before, html.sm-anim .sm-imgcard__card::after { transition: transform .8s var(--sm-ease) .18s; }
html.sm-anim .sm-imgcard > .sm-container::before, html.sm-anim .sm-imgcard > .sm-container::after { transform-origin: top center; transition: transform .8s var(--sm-ease) .32s; }
html.sm-anim:not(.sm-anim-off) .sm-imgcard:not(.is-in) .sm-imgcard__card::before,
html.sm-anim:not(.sm-anim-off) .sm-imgcard:not(.is-in) .sm-imgcard__card::after { transform: scaleX(0); }
html.sm-anim:not(.sm-anim-off) .sm-imgcard:not(.is-in) > .sm-container::before,
html.sm-anim:not(.sm-anim-off) .sm-imgcard:not(.is-in) > .sm-container::after { transform: scaleY(0); }
.sm-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width:1100px){ .sm-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:680px){ .sm-grid--5 { grid-template-columns: 1fr; } }
.sm-statband__row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width:1100px){.sm-statband__row{display: flex; flex-wrap: wrap;} .sm-statband__cell {width: calc(50% - (24px / 2));}}
@media (max-width:760px){ .sm-statband__row--2 { grid-template-columns: 1fr; } }
/* ==== 14.7 News band — 3 horizontal cards + tall feature card ==== */
.sm-newsrow { display: grid; grid-template-columns: 763fr 461fr; gap: 24px; }
.sm-section__inner > .sm-newsrow { margin-top: 40px; }
.sm-newslist { display: flex; flex-direction: column; gap: 20px; }
.sm-newscard { display: grid; grid-template-columns: 184px 1fr; gap: 20px; border: 1px solid rgba(233,233,233,.2); background: rgba(0,0,0,.15); padding: 20px; min-height: 243px; }
.sm-newscard__img { position: relative; overflow: clip; min-height: 180px; background: var(--sm-night); }
.sm-newscard .sm-featcard__scrim { display: none; }
.sm-newscard__c { display: flex; flex-direction: column; position: relative; }
.sm-newscard__meta { display: flex; align-items: center; justify-content: space-between; }
.sm-newscard__date { font-size: var(--sm-fs-split-sub); color: rgba(233,233,233,.8); letter-spacing: 0; }
.sm-newscard__title { font-size: var( --sm-fs-h5); font-weight: 600; color: #fff; line-height: 32px; min-height: 64px; margin: 0; text-transform: none; }
.sm-newscard__rule { height: 1px; background: rgba(255,255,255,.5); border: 0; margin: 0; }
.sm-newscard__ex { font-size: var(--sm-fs-p2); font-weight: 300; color: var(--txt-soft); line-height: 22px; margin: 0; }
.sm-newscard__c > .sm-newscard__title { margin-top: 26px; }
.sm-newscard__c > .sm-newscard__rule { margin-top: 14px; }
.sm-newscard__c > .sm-newscard__bottom { margin-top: 14px; }
.sm-newscard__bottom { display: flex; align-items: flex-start; gap: 36px; }
.sm-newscard__bottom .sm-newscard__ex { flex: 1; margin: 0; }
.sm-newscard__cta { margin: 0; flex: 0 0 auto; }
.sm-newscard__cta .sm-btn, .sm-newsfeature__cta .sm-btn { height: 44px; --bw: 12px; background: rgba(0,0,0,.4); border: 0; box-shadow: none; }
.sm-newscard__cta .wp-block-button__link, .sm-newsfeature__cta .wp-block-button__link { font-size: var(--sm-fs-split-sub); padding: 0 18px; white-space: nowrap; }
.sm-newscard__img.sm-bracket { --bracket: rgba(255,255,255,.7); }
.sm-newscard__img.sm-bracket::before, .sm-newscard__img.sm-bracket::after { width: 22px; height: 22px; }
/* corner dot matrices — the SAME kit dot-block assets the master-brand news band uses */
.sm-newscard__dots { position: absolute; top: -8px; right: 54px; width: 56px; height: 56px; background: url("../icons/dotblock-56.svg") 0 0 / 56px 56px no-repeat; pointer-events: none; }
.sm-newsfeature__dots { position: absolute; top: 28px; right: 28px; width: 88px; height: 88px; background: url("../icons/dotblock-112.svg") 0 0 / 88px 88px no-repeat; pointer-events: none; z-index: 2; }
.sm-resources .sm-tag { border: 1px solid rgba(255,255,255,.2); padding: 6px 12px; border-radius: 4px; text-transform: none; letter-spacing: .2px; font-weight: 300; color: #fff; }
.sm-newsfeature { position: relative; overflow: clip; border: 1px solid rgba(233,233,233,.2); min-height: 600px; }
.sm-newsfeature .sm-featcard__scrim { display: block; }
.sm-newsfeature__tags { position: absolute; top: 40px; left: 40px; z-index: 2; display: flex; gap: 16px; }
.sm-newsfeature__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,0); padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.sm-newsfeature__title { font-size: var(--sm-fs-h6); font-weight: 600; color: #e9e9e9; line-height: var(--sm-lh-h6); margin: 0; text-transform: none; }
.sm-newsfeature__rule { height: 1px; background: rgba(255,255,255,.12); border: 0; margin: 0; }
.sm-newsfeature__ex { font-size: var(--sm-fs-split-sub); font-weight: 300; color: var(--txt-soft); line-height: 20px; margin: 0; }
.sm-newsfeature__cta { width: 100%; }
.sm-newsfeature__cta .sm-btn { width: 100%; }
@media (max-width:900px){ .sm-newsrow { grid-template-columns: 1fr; } .sm-newscard { grid-template-columns: 140px 1fr; } }
.sm-newshead { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.sm-newshead__all { margin: 0; flex: 0 0 auto; order: 1; }
.sm-newshead__all .wp-block-button__link { font-size: var(--sm-fs-split-sub); padding: 13px 20px; }
/* ==== 14.8 Image HUD decorator — compose any pieces per image ==== */
/* Container class `sm-imghud` (the editor panel manages it) + ANY subset of pieces:
sm-hud-ret crosshair reticle (sm-hud-ret--left / --right shift it)
sm-hud-grid hairline gridlines crossing the frame
sm-hud-cell painted bottom-left grid cell
sm-hud-cell2 right column tint (brings its own column line)
sm-hud-dots kit dot-matrix corner (sits opposite the reticle)
Every layer is a custom-property slot defaulting to none, so pieces stack freely.
The image block style "HUD overlay" = the classic grid + cell + reticle bundle. */
/* hero opt-out: hides the hero reticle/HUD image (toggle in the SynMax HUD panel) */
.sm-hero--no-hud .sm-hero__hud, .sm-hero--no-hud .sm-genhero__hud, .sm-hero--no-hud .sm-genhud { display: none; }
/* zero-specificity default: positioned components (featcard media etc.) keep their own positioning */
:where(.sm-imghud, .wp-block-image.is-style-hud) { position: relative; }
.sm-imghud.sm-imghud.sm-imghud::before, .wp-block-image.is-style-hud::before {
content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background-image: var(--hud-cell, none), var(--hud-cell2, none), var(--hud-gv, none), var(--hud-gv2, none), var(--hud-gh, none), var(--hud-scrim, none);
background-position: var(--hud-cell-pos, 0 100%), var(--hud-cell2-pos, 100% 0), var(--hud-gv-pos, 16% 0), var(--hud-gv2-pos, 84% 0), var(--hud-gh-pos, 0 76%), 0 0;
background-size: 16% 24%, 16% 76%, 1px 100%, 1px 100%, 100% 1px, 100% 100%;
background-repeat: no-repeat;
}
.sm-imghud.sm-imghud.sm-imghud::after, .wp-block-image.is-style-hud::after {
content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background-image: var(--hud-ret, none), var(--hud-dots, none);
background-position: var(--hud-ret-pos, 50% 44%), var(--hud-dots-pos, right 4% bottom 5%);
background-size: auto min(72%, 356px), clamp(48px, 16%, 96px) auto;
background-repeat: no-repeat;
opacity: .95;
}
.sm-hud-ret { --hud-ret: url("../icons/hud-crosshair.svg"); }
.sm-hud-ret--left { --hud-ret-pos: 26% 42%; }
.sm-hud-ret--right { --hud-ret-pos: 76% 42%; --hud-dots-pos: left 4% bottom 5%; }
.sm-hud-ret--tl { --hud-ret-pos: 12% 12%; }
.sm-hud-ret--tr { --hud-ret-pos: 88% 12%; }
.sm-hud-ret--bl { --hud-ret-pos: 12% 88%; }
.sm-hud-ret--br { --hud-ret-pos: 88% 88%; }
.sm-hud-grid {
--hud-gv: linear-gradient(rgba(228,228,228,.2), rgba(228,228,228,.2));
--hud-gh: linear-gradient(rgba(228,228,228,.2), rgba(228,228,228,.2));
}
/* gridline intersection corner (standalone; a painted cell overrides — its variants sit later) */
.sm-hud-grid--tl { --hud-gv-pos: 16% 0; --hud-gh-pos: 0 24%; }
.sm-hud-grid--tr { --hud-gv-pos: 84% 0; --hud-gh-pos: 0 24%; }
.sm-hud-grid--br { --hud-gv-pos: 84% 0; --hud-gh-pos: 0 76%; }
.sm-hud-cell { --hud-cell: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }
/* cell corner variants — the gridlines follow the chosen cell so they stay its edges */
.sm-hud-cell--tl { --hud-cell-pos: 0 0; --hud-gv-pos: 16% 0; --hud-gh-pos: 0 24%; }
.sm-hud-cell--tr { --hud-cell-pos: 100% 0; --hud-gv-pos: 84% 0; --hud-gh-pos: 0 24%; }
.sm-hud-cell--br { --hud-cell-pos: 100% 100%; --hud-gv-pos: 84% 0; --hud-gh-pos: 0 76%; }
.sm-hud-cell2 {
--hud-cell2: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06));
--hud-gv2: linear-gradient(rgba(228,228,228,.2), rgba(228,228,228,.2));
}
.sm-hud-cell2--left { --hud-cell2-pos: 0 0; --hud-gv2-pos: 16% 0; }
.sm-hud-dots { --hud-dots: url("../icons/dotblock-96.svg"); }
/* explicit dots corner beats the reticle auto-flip (declared later) */
.sm-hud-dots--tl { --hud-dots-pos: left 4% top 5%; }
.sm-hud-dots--tr { --hud-dots-pos: right 4% top 5%; }
.sm-hud-dots--bl { --hud-dots-pos: left 4% bottom 5%; }
.sm-hud-dots--br { --hud-dots-pos: right 4% bottom 5%; }
/* the featcard caption fade, restorable when the HUD takes over a scrimmed figure */
.sm-hud-scrim { --hud-scrim: linear-gradient(180deg, rgba(8,18,32,.12) 28%, rgba(8,18,32,.94) 100%); }
.sm-hud-scrim--top { --hud-scrim: linear-gradient(0deg, rgba(8,18,32,.12) 28%, rgba(8,18,32,.94) 100%); }
.wp-block-image.is-style-hud {
--hud-gv: linear-gradient(rgba(228,228,228,.2), rgba(228,228,228,.2));
--hud-gh: linear-gradient(rgba(228,228,228,.2), rgba(228,228,228,.2));
--hud-cell: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10));
--hud-ret: url("../icons/hud-crosshair.svg");
}
/* ==== 14.9 SVG artwork is information, not decoration ==== */
/* Diagrams are authored at a fixed size; when a panel is wider or taller than
the artwork, object-fit:cover silently crops the content (up to half of it).
Fit these whole instead. Only images that would otherwise crop are listed —
decorative grids/reticles that intentionally stretch are untouched. */
.synmax img[src$=".svg"]:is(.wp-block-cover__image-background, .sm-gap__photo, .sm-featcard__photo, .sm-hero__photo, .sm-prow__photo, .sm-hub__map, .sm-loccard__map, .sm-mega__img),
.synmax :is(figure.sm-featcard__media, figure.sm-prow__photo, figure.sm-hub__map, .sm-frow__img, .sm-imgcard__img, .sm-npvfeature__img, .sm-npvcard__img, .sm-newsmini__img, .sm-article__img) img[src$=".svg"] { object-fit: contain; background-color: #081220; }
/* ==== 14.10 Image-led panels ==== */
/* Two columns only at the design width (1440+), where the image column is wide
enough to fill the row height at the artwork ratio: measured 605px available vs
605px needed. Below that the column is too narrow (short by 48px at 1342, 96px
at 1242), so filling the height would crop the legend and callout - it becomes
a single column instead, image full width at its own ratio.
exactly, and the panel stretches to the row height so the artwork fills it.
Below 1200 the section is a single column and the panel takes the artwork
ratio instead, so the image is never squeezed or cropped when stacked. */
.sm-gap__row { display: grid; grid-template-columns: 643fr 605fr; gap: 0; align-items: stretch; }
.sm-gap__card { width: auto; min-width: 0; }
.sm-gap__panel,
.sm-gap__panel.wp-block-cover { width: 100%; min-width: 0; height: auto; min-height: 423px; }
.synmax .sm-gap__panel img.wp-block-cover__image-background[src$=".svg"],
.sm-gap__panel img.wp-block-cover__image-background { object-fit: cover; background: none; }
@media (max-width: 1439px) {
.sm-gap__row { grid-template-columns: 1fr; }
.sm-gap__panel,
.sm-gap__panel.wp-block-cover { aspect-ratio: 605 / 423; min-height: 0; }
}
/* ==== 14.11 Card links ==== */
/* Gutenberg has no 'link this box' control for a group, so linking a card's
title (select the text, Ctrl/Cmd+K) makes the WHOLE card clickable: the
title link is stretched over the card. The link inherits the title styling,
so the design is unchanged until a link is added. */
.sm-statcell, .sm-iconbox, .sm-step, .sm-featcard__panel { position: relative; }
.synmax :is(.sm-statcell, .sm-iconbox, .sm-step, .sm-featcard__panel) :is(h2, h3, h4) a {
color: inherit; text-decoration: none;
}
/* Card link set from the sidebar: a real anchor stretched over the card. */
.synmax [data-sm-link] { position: relative; }
.synmax a.sm-cardlink { position: absolute; inset: 0; z-index: 3; display: block; }
.synmax [data-sm-link]:hover { border-color: rgba(var(--sm-accent-rgb), .55); }
.synmax :is(.sm-statcell, .sm-iconbox, .sm-step, .sm-featcard__panel) :is(h2, h3, h4) a::after {
content: ""; position: absolute; inset: 0; z-index: 3;
}
.synmax :is(.sm-statcell, .sm-iconbox, .sm-step):has(:is(h2, h3, h4) a) {
transition: border-color .28s var(--sm-ease), background-color .28s var(--sm-ease);
}
.synmax :is(.sm-statcell, .sm-iconbox, .sm-step):has(:is(h2, h3, h4) a):hover {
border-color: rgba(var(--sm-accent-rgb), .55);
}
/* ==== 14.12 Editor: card selection is visible ==== */
/* Cards carry their own background and border, which swallows the editor's default
selection cue, so a selected/hovered card looked no different from an unselected
one. Draw it explicitly (editor canvas only — the front end is untouched). */
.editor-styles-wrapper :is(.sm-statcell, .sm-iconbox, .sm-step, .sm-featcard, .sm-foundcard, .sm-bento__card, .sm-imgcard__card).is-selected {
outline: 2px solid #3858e9;
outline-offset: -2px;
}
.editor-styles-wrapper :is(.sm-statcell, .sm-iconbox, .sm-step, .sm-featcard, .sm-foundcard, .sm-bento__card, .sm-imgcard__card).is-hovered:not(.is-selected) {
outline: 1px dashed rgba(56, 88, 233, .7);
outline-offset: -1px;
}
/* ==== 14.13 Cards whose photo is their background are covers ==== */
.sm-featcard.wp-block-cover { padding: 0; display: flex; align-items: flex-end; justify-content: flex-start; border-radius: 0; background-position: 50% 50%; }
.sm-featcard.wp-block-cover > .wp-block-cover__inner-container { position: static; width: 100%; max-width: none; padding: 0; color: inherit; }
.synmax .sm-featcard > img.wp-block-cover__image-background { object-fit: cover; background: none; }
/* ==== 14.14 Legal pages ==== */
body.privacy-policy .sm-main, body.generic-terms-and-conditions .sm-main{padding-top: 0px;}
.sm-legalhero { padding-block: 200px 40px; }
.sm-legalhero .sm-section__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 832px; align-self: center;}
.sm-legalhero__title { font-size: var(--sm-fs-h2); line-height: 1.02; font-weight: 700; color: var(--txt); margin: 0; }
.sm-legalhero__date { font-size: var(--sm-fs-split-sub); line-height: 1.2; color: #E9E9E9; opacity: .7; margin: 0; }
.sm-legal { padding-block: 0 140px; }
.sm-legal__col { width: 100%; max-width: 832px; display: flex; flex-direction: column; gap: 20px; align-self: center; }
.sm-legal__col > .sm-article__h { margin-top: 28px; }
.sm-legal__col > .sm-article__h:first-child { margin-top: 0; }
.sm-article__h--sub { font-size: var(--sm-fs-body); line-height: 1.4; }
.sm-legal__col .sm-article__p a { color: var(--sm-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .sm-legalhero { padding-block: 148px 32px; } }
.sm-footer__legal-sep { color: #fff; font-size: var(--sm-fs-tagline);; margin: 0 6px; opacity: .6; }
/* ==== 14.15 Card diagrams fill the card ==== */
/* These SVGs are authored at the card's own width, so fitting them whole only
letterboxes the sides - and the strip shows, because the artwork carries its
own layered background rather than flat --sm-deep. Fill instead, anchored to
the top so the overflow falls at the bottom, behind the panel. */
.synmax figure.sm-featcard__media img[src$=".svg"],
.synmax .sm-featcard > img.wp-block-cover__image-background[src$=".svg"] {
object-fit: cover;
object-position: 50% 0;
background-color: transparent;
}
/* ==== 15. MOBILE POLISH (2026-07 pass) ==== */
/* Measured at 390x844 across all pages of the three sites. Every rule here
fixes an observed defect: content escaping the viewport, desktop-only HUD
dressing, crushed header branding, sub-44px touch targets, or iOS zoom on
sub-16px inputs. Front end only - the editor canvas is desktop-width. */
/* 15.1 Hero internals can carry fixed design widths (title 680, rule 507,
lead 500...). The head hugs its widest child, so max-width on the child
alone is circular - cap the head itself and everything in it. */
.sm-hero__head { max-width: 100%; min-width: 0; }
.sm-hero__head > *, .sm-hero__content > * { max-width: 100%; }
/* 15.2 Header: at 390 the wide logo (196) + menu pill (300/52vw) cannot fit a
331px bar - flex crushed the logo to 47px. Compact both. */
@media (max-width: 600px) {
.sm-site-header { top: 12px; }
.sm-site-header__inner { min-height: 60px; padding: 0 14px 0 16px; gap: 12px; }
.sm-logo { flex: 0 1 auto; max-width: 140px;}
.sm-logo__mark { width: 118px; }
.sm-logo__mark--wide { width: 136px; }
.sm-menu-pill { width: auto; max-width: none; padding: 11px 14px; letter-spacing: 2px; gap: 12px; }
}
/* 15.3 Desktop HUD dressing (targeting reticles, coordinate readouts, signal
chips) is composed against fixed desktop offsets and lands 100-335px outside
a phone viewport. Selectors carry an element/extra class so they outrank the
0,1,0 display:block base regardless of stylesheet order. */
@media (max-width: 760px) {
img.sm-genhud,
.sm-hero .sm-hero__hud, .sm-hero .sm-genhero__hud,
.sm-split .sm-split__hud, .sm-split .sm-split__track, .sm-split .sm-split__coords,
.sm-split .sm-split__chips, .sm-split .sm-split__monitor,
.sm-approach__panel .sm-approach__coordtag,
.sm-approach__panel .sm-approach__chip1, .sm-approach__panel .sm-approach__chip2,
.sm-statement2::before, .sm-statement2::after { display: none; }
}
/* 15.4 Filter bars (news/resources boards + careers) are fixed-width rows that
ran 405-494px past the viewport. Stack them; fields go full width. */
@media (max-width: 760px) {
.sm-afilter { flex-direction: column; align-items: stretch; gap: 16px; }
.sm-afilter__chips { flex-wrap: wrap; gap: 10px; }
.sm-afilter__right { width: 100%; }
.sm-afilter__right .sm-jobs__filter,
.sm-afilter__right .sm-jobs__filter--search { width: auto; flex: 1 1 140px; }
.sm-jobs__filters { flex-direction: column; gap: 14px; }
.sm-jobs__filters .sm-jobs__filter { width: 100%; flex: 1 1 auto; }
}
/* 15.5 The jobs table is a 1000px row grid; 761-1100 scrolls it sideways, but
on a phone each opening becomes a card: title, meta, full-width action. */
@media (max-width: 760px) {
.sm-jobs__table { overflow-x: visible; }
.sm-jobs__thead { display: none; }
.sm-jobs__row { min-width: 0; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 20px; }
.sm-jobs__c1 { flex: 1 1 100%; width: auto; }
.sm-jobs__pos { white-space: normal; padding: 0; }
.sm-jobs__c2, .sm-jobs__c3, .sm-jobs__c4 { width: auto; flex: 0 0 auto; justify-content: flex-start; }
.sm-jobs__val { padding: 0; font-size: var(--sm-fs-small); }
.sm-jobs__pill { width: auto; padding: 0 12px; height: 30px; font-size: 13px; }
.sm-jobs__c5 { flex: 1 1 100%; justify-content: stretch; margin-top: 6px; }
.sm-jobs__btn { width: 100%; }
.sm-jobs__btn .sm-btn { width: 100%; }
}
/* 15.6 News band: the card is 184px-photo + text grid whose min-content
(excerpt + nowrap CTA) exceeds a phone container, dragging the whole band
out of the viewport. Stack photo over text; CTA takes the full row. */
.sm-newsrow > *, .sm-newscard__c { min-width: 0; }
@media (max-width: 640px) {
.sm-newscard { grid-template-columns: 1fr; min-height: 0; }
.sm-newscard__img { min-height: 170px; }
.sm-newscard__c > .sm-newscard__title { margin-top: 18px; min-height: 0; }
.sm-newscard__title { font-size: var(--sm-fs-h6); line-height: 27px; }
.sm-newscard__bottom { flex-wrap: wrap; gap: 14px; }
.sm-newscard__cta { flex: 1 1 100%; }
.sm-newscard__cta .sm-btn { width: 100%; }
.sm-newsfeature { min-height: 480px; }
.sm-newshead { flex-wrap: wrap; }
.sm-newshead__all { flex: 1 1 100%; }
.sm-newshead__all .sm-btn { width: 100%; }
}
/* 15.7 Article page: meta row (tags + share) side by side does not fit; the
hub product rows put a 248px thumb beside nowrap labels. Stack both. */
@media (max-width: 781px) {
.sm-article__meta { flex-direction: column; align-items: flex-start; gap: 18px; }
.sm-article__share { flex-wrap: wrap; }
:is(.sm-related, .sm-articles) .sm-npvfeature--grid { width: 100%; flex: 1 1 auto; }
/* height:auto releases the desktop 112/160px row heights — stacked, the
image + box need ~250px and a fixed row makes the boxes spill over the
next band (the mobile "overlapping panels"). */
.sm-hub__prow { flex-direction: column; height: auto; }
.sm-hub__pimg { width: 100%; flex: 0 0 auto; height: 140px; }
.sm-hub__pimg img { width: 100%; }
.sm-hub__pbox { flex: 0 0 auto; }
.sm-hub__pname, .sm-hub__psub { white-space: normal; }
.sm-hub__psub { font-size: var(--sm-fs-small); }
}
/* 15.8 Touch targets + iOS zoom. Social/legal/product footer links measured
15-33px tall; pagination chips 33. Inputs under 16px make iOS zoom in. */
@media (max-width: 760px) {
.sm-footer__social a { padding: 12px; margin: -6px; }
.sm-footer__social { gap: 20px; }
.sm-footer__legal a { display: inline-block; padding: 10px 0; }
.sm-footer__legal-sep { margin: 0 10px; }
.sm-footer__prod { padding: 14px 0 !important; }
.sm-pgn a, .sm-pgn > span { height: 44px; min-width: 44px; }
.sm-field__input { font-size: var(--sm-fs-p2); }
.sm-form { padding: 24px 18px; }
}
/* 15.9 Stragglers from the verification sweep: HUD chrome that lives outside
.sm-split (the approach panel reuses split classes inside .sm-split__chrome),
absolutely-composed inquiry cards, fixed 400px location cards, and the
remaining sub-44px links. */
@media (max-width: 760px) {
div.sm-split__coords, div.sm-split__track, span.sm-hudchip { display: none; }
.sm-foundcard { min-width: 0; }
.sm-foundcard__title { overflow-wrap: anywhere; }
.sm-footer__col a { padding: 14px 10px; }
.synmax a.page-numbers { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) {
.sm-loccard { width: 100%; flex: 1 1 100%; height: auto; min-height: 460px; }
.sm-inqcard { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; }
.sm-inqcard .sm-eyebrow, .sm-inqcard__dots, .sm-inqcard__title, .sm-inqcard__rule, .sm-inqcard__cta { position: static; width: auto; }
.sm-inqcard__rule { width: 100%; }
.sm-inqcard__title { font-size: 30px; }
.sm-inqcard::before, .sm-inqcard::after { display: none; }
}
/* 15.10 Contact hero: below 1280 the floating form goes static, but the hero
is a flex ROW - the form joined the row beside the content and the centered
pair started 100px off-screen. Stack them. */
@media (max-width: 1280px) {
.sm-hero--contact { flex-direction: column; align-items: center; }
}
/* 15.11 Last touch-target pass. The social row's fixed height crushed its
anchors to 24px regardless of padding - give them a real 44px box and let
the row grow; negative margin keeps the visual rhythm. Button-block links
measured 30px inside a 44px-looking .sm-btn shell. */
@media (max-width: 760px) {
.sm-footer__social { height: auto; align-items: center; }
.sm-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; margin: -8px 0; }
.sm-btn > .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
.sm-article__share a { width: 40px; height: 40px; align-items: center; justify-content: center; margin: -8px 0; }
.sm-loccard__coords { left: auto; right: 20px; }
.sm-foundcard__title { white-space: normal; font-size: clamp(30px, 9.5vw, 40px); line-height: 1.15; }
.sm-depts__row { flex-wrap: wrap; }
.sm-dept { width: 100%; height: auto; min-height: 44px; padding: 8px 12px; }
.sm-dept__val, .sm-dept__val a { white-space: normal; overflow-wrap: anywhere; }
}
/* ==== 16. POST EDITOR CANVAS — editing a post looks like the published article ==== */
/* The front wraps post content in .sm-article__col (832px) and styles the raw
blocks via .sm-article__body .wp-block-post-content. The editor canvas has
neither wrapper, so posts edited at full width with default type - these
mirror the front rules onto the post editor's root container. */
.editor-styles-wrapper.post-type-post .is-root-container > * { max-width: 832px; margin-left: auto; margin-right: auto; }
.editor-styles-wrapper.post-type-post .editor-post-title__input,
.editor-styles-wrapper.post-type-post .wp-block-post-title {
max-width: 832px; margin-left: auto; margin-right: auto;
font-family: var(--sm-font); font-size: var(--sm-fs-h2); line-height: 1.05; font-weight: 700; color: #fff; text-align: center;
}
.editor-styles-wrapper.post-type-post .is-root-container > * + * { margin-block-start: 24px; }
.editor-styles-wrapper.post-type-post .is-root-container > h2 { font-size: var( --sm-fs-h5); font-weight: 600; line-height: 32px; color: #fff; margin-block-start: 40px; text-transform: none; }
.editor-styles-wrapper.post-type-post .is-root-container > h3 { font-size: var(--sm-fs-h6); font-weight: 600; line-height: var(--sm-lh-h6); color: #fff; margin-block-start: 36px; text-transform: none; }
.editor-styles-wrapper.post-type-post .is-root-container > p { font-size: var(--sm-fs-p2); line-height: 1.62; color: #E9E9E9; }
.editor-styles-wrapper.post-type-post .is-root-container > ul:is(.wp-block-list, :not([class])) { display: flex; flex-direction: column; gap: 12px; margin-block: 24px 0; padding: 0; list-style: none; }
.editor-styles-wrapper.post-type-post .is-root-container > ul:is(.wp-block-list, :not([class])) li { position: relative; padding-left: 25px; font-size: var(--sm-fs-p2); line-height: 1.5; color: #E9E9E9; }
.editor-styles-wrapper.post-type-post .is-root-container > ul:is(.wp-block-list, :not([class])) li::before { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 13px; background: linear-gradient(180deg, #00A1E1 0%, #00E96C 100%); }
.editor-styles-wrapper.post-type-post .is-root-container > ol { margin-block: 24px 0; padding-left: 24px; font-size: var(--sm-fs-p2); line-height: 1.5; color: #E9E9E9; }
.editor-styles-wrapper.post-type-post .is-root-container .wp-block-image img { border-radius: 4px; }
.editor-styles-wrapper.post-type-post .is-root-container figcaption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: rgba(233,233,233,.6); text-align: center; }
.editor-styles-wrapper.post-type-post .is-root-container a:not(.wp-block-button__link) { color: #69E0F5; text-decoration: underline; text-underline-offset: 2px; }
/* ==== 17. MOBILE ≤600 — measured from Figma "SynMax Maritime — Homepage (Dark) Mobile"
(Nz1KzgHbeQlq1bPdDBxO0D · 3731:11296, 402×8488). Type roles there: H2 34/36 (hero+CTA),
H4 26/32 (section titles), H6/titles 20/28, P1 18/26, P2 16/22, Tag 10/20.
This block sits LAST so its declarations win every same-specificity tie. ==== */
@media (max-width: 600px) {
/* — section chrome: 32px bands, 30px rhythm, header rules stop at the 24px gutter — */
.sm-sectionhead { --edge: 0px; }
.sm-sectionhead::before, .sm-sectionhead::after { background: #E3E7ED; }
.sm-testimonial .sm-sectionhead::before, .sm-testimonial .sm-sectionhead::after { background: rgba(255,255,255,.12); }
.sm-section .sm-eyebrow { color: #fff; letter-spacing: 2px; }
.sm-gap .sm-eyebrow { color: #DBE3ED; }
.sm-cta:not(.is-light) .sm-eyebrow { color: #fff; }
.sm-section__inner > .sm-title,
.sm-stats .sm-section__inner > .sm-title { margin-top: 30px; }
.sm-section__inner > .sm-lead { margin-top: 30px; }
.sm-section__inner > .sm-grid, .sm-section__inner > .sm-steps,
.sm-stats .sm-section__inner > .sm-grid { margin-top: 30px; }
.sm-title { font-size: 26px; line-height: 32px; }
.sm-lead { line-height: 26px; }
.sm-gridfx__diag { display: none; }
/* card icons back to the mock's 44px (the §11 34px shrink is desktop-only) */
.sm-ic, .sm-statcell__ic, .sm-step__ic, .sm-iconbox .sm-ic { width: 44px; height: 44px; flex-basis: 44px; }
.sm-ic svg, .sm-ic > svg, .sm-ic img, .sm-statcell__ic img, .sm-step__ic img, .sm-iconbox .sm-ic img, .wp-block-image.sm-ic img { width: 44px; height: 44px; }
/* — buttons: 47px, 16px label, 28px brackets, full width, 12px stack gap
(double class so WP's late :root :where(.wp-block-buttons) gap loses) — */
.sm-btn { height: 47px; font-size: var(--sm-fs-p2); --bw: 28px; }
.sm-btn--ghost { border: .2px solid rgba(255,255,255,.5); }
.wp-block-buttons.sm-btnrow, .wp-block-buttons.sm-cta__btns, .sm-btnrow.sm-hero__ctas { gap: 12px; }
/* — header: 60px glass pill at top 31, 24px-tall logo, 24×18 hamburger — */
.sm-site-header { top: 31px; }
.sm-site-header__inner { min-height: 60px; padding: 0 25px; }
.sm-logo__mark, .sm-logo__mark--wide { width: auto; height: 24px; }
body.synmax .sm-menu-pill, body.synmax .sm-menu-pill:hover,
.sm-menu-pill {
width: 24px; height: 18px; max-width: none; padding: 0; border: 0; border-radius: 0;
box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
background: transparent;
background-image: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
background-size: 24px 2px; background-position: 0 0, 0 8px, 0 16px; background-repeat: no-repeat;
}
.sm-menu-pill__label, .sm-menu-pill .sm-dots { display: none; }
/* — hero: content at 138 from top, one 30px stack, stats in-row, cue 41 up — */
.sm-hero__content { padding-top: 138px; padding-bottom: 161px; gap: 30px; }
.sm-hero__head { gap: 30px; }
.sm-hero__bottom { gap: 30px; }
.sm-hero__eyebrow.is-glass { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sm-hero__rule { width: 100%; }
.sm-hero__stats { gap: 15px; }
.sm-stat { gap: 3px; padding-right: 13px; }
.sm-stat__num { font-size: 22px; letter-spacing: .27px; }
.sm-stat__label { font-size: var(--sm-fs-tagline);; line-height: 17px; }
.sm-hero__scroll { bottom: 41px; }
.sm-hero__grid .sm-gridfx__quad--img { display: none; }
/* Ken Burns sizes the cover img height:auto — a wide photo collapses to ~226px
at phone widths (hero looks cut). Fill the band + the ±9% parallax overscan. */
html.sm-anim .sm-hero > .wp-block-cover__image-background { height: 118%; }
/* — trust band — */
.sm-trust { padding-block: 32px; }
.sm-trust__inner { flex-direction: column; gap: 8px; text-align: center; }
.sm-trust__label { font-size: 10px; line-height: 20px; letter-spacing: 2px; font-weight: 700; text-box: trim-both cap alphabetic; }
.sm-trust__sectors { font-size: var(--sm-fs-p2); line-height: var(--sm-lh-h6); }
/* — the gap: cardless copy on the band, no head divider, panel keeps 605:423 — */
.sm-gap .sm-section__inner > .sm-gap__row { margin-top: 30px; }
.sm-gap__body { gap: 30px; }
.sm-gap .sm-gap__divider { display: none; }
.sm-gap__row { flex-direction: column; gap: 30px; }
.sm-gap:not(.is-light) .sm-gap__card { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sm-gap__card, .sm-gap__panel { width: 100%; flex: 0 0 auto; }
.sm-gap__title { font-size: 26px; line-height: 32px; }
.sm-gap:not(.is-light) .sm-gap__copy p { color: #DBE3ED; }
.sm-gap__panel, .sm-gap__panel.wp-block-cover { min-height: 0; aspect-ratio: 605 / 423; }
/* — capabilities cells: 24px pad, P2 body, 13px to metric, 50px dot block — */
.sm-statcell { padding: 24px; }
.sm-statcell::before { width: 50px; height: 50px; top: 40px; right: 38px; background-size: 10px 10px; }
.sm-statcell .sm-kicker--theia { color: #B1B1B1; }
.sm-statcell > .sm-statcell__body { font-size: var(--sm-fs-p2); line-height: 22px; margin-top: 24px; }
.sm-statcell > .sm-statcell__metric { margin-top: 13px; padding-top: 0; }
/* — multi-step: the mock keeps the 20/48 head rhythm here, cards 24px — */
.sm-multistep .sm-section__inner > .sm-title { margin-top: 20px; }
.sm-multistep .sm-section__inner > .sm-steps { margin-top: 48px; }
.sm-step { padding: 24px; }
.sm-step > .sm-divider { margin-top: 24px; }
.sm-step > .sm-step__body { font-size: var(--sm-fs-p2); line-height: 22px; margin-top: 24px; }
.sm-multistep:not(.is-light) .sm-step .sm-kicker { color: #fff; }
.sm-multistep:not(.is-light) .sm-step > .sm-step__body { color: #fff; }
/* — industries boxes — */
.sm-iconbox { padding: 24px; }
body.synmax .sm-iconbox__title, .sm-iconbox > .sm-iconbox__title { margin-top: 24px; }
.sm-iconbox > .sm-iconbox__body { font-size: var(--sm-fs-p2); line-height: 22px; }
/* — testimonial: 32px gutter, 36px stack, 80px rule, borderless 40×35 badge — */
.sm-testimonial { padding-block: 110px 60px; }
.sm-testimonial__inner { width: calc(100% - 64px); gap: 0; }
.sm-testimonial__inner > .sm-quote__badge { margin: 36px 0 0; border: 0; border-radius: 4px; }
.sm-quote__badge svg { width: 40px; height: 35px; }
.sm-testimonial__inner > .sm-quote__text { margin-top: 24px; }
.sm-quote__text { font-size: 26px; line-height: 32px; }
.sm-testimonial hr.wp-block-separator.sm-quote__rule { margin: 16px auto 0; width: 80px; border-top-color: rgba(255,255,255,.12); }
.sm-testimonial__inner > .sm-quote__body { margin-top: 16px; }
.sm-testimonial__inner > .sm-quote__cite { margin-top: 36px; }
.sm-quote__name { line-height: 20px; }
.sm-quote__org { line-height: 18px; }
.sm-testimonial__inner > .sm-quote__footer { margin-top: 36px; }
.sm-pager-btn { border: .2px solid #fff; }
/* — CTA: 80px band, centered 34/36 headline, hero-recipe buttons, hairline grid
(#262F3F @ .15 rows / .1 columns: rows inset 100px then thirds, cols at 60/center/60) — */
.sm-cta { padding: 80px 0; }
.sm-cta:not(.is-light) {
background-color: #081220;
background-image:
linear-gradient(rgba(38,47,63,.1), rgba(38,47,63,.1)),
linear-gradient(rgba(38,47,63,.1), rgba(38,47,63,.1)),
linear-gradient(rgba(38,47,63,.1), rgba(38,47,63,.1)),
linear-gradient(rgba(38,47,63,.15), rgba(38,47,63,.15)),
linear-gradient(rgba(38,47,63,.15), rgba(38,47,63,.15)),
linear-gradient(rgba(38,47,63,.15), rgba(38,47,63,.15)),
linear-gradient(rgba(38,47,63,.15), rgba(38,47,63,.15));
background-size: 1px 100%, 1px 100%, 1px 100%, 100% 1px, 100% 1px, 100% 1px, 100% 1px;
background-position:
60px 0, 50% 0, calc(100% - 60px) 0,
0 100px, 0 calc(33.333% + 33.333px), 0 calc(66.667% - 33.333px), 0 calc(100% - 100px);
background-repeat: no-repeat;
}
.sm-cta__inner > .sm-cta__title { font-size: 34px; line-height: 36px; margin-top: 56px; }
.sm-cta__inner > .sm-cta__body { font-size: var(--sm-fs-body); line-height: 26px; margin-top: 30px; }
.sm-cta:not(.is-light) .sm-cta__body { color: #DBE3ED; }
.sm-cta__inner > .sm-cta__btns { margin-top: 30px; }
.sm-cta__btns { gap: 12px; width: 100%; }
.sm-cta__btns::before, .sm-cta__btns::after { display: none; }
.sm-cta:not(.is-light) .sm-cta__btns .sm-btn--neutral { --bracket: #fff; }
.sm-cta:not(.is-light) .sm-cta__btns .sm-btn--neutral:first-child {
background: linear-gradient(180deg, rgba(var(--sm-accent-rgb),.48), rgba(var(--sm-accent-rgb),.32));
box-shadow: inset 0 0 22px rgba(var(--sm-accent-rgb),.9);
border: .2px solid rgba(255,255,255,.5); color: #fff;
}
.sm-cta:not(.is-light) .sm-cta__btns .sm-btn--neutral:last-child {
background: rgba(0,0,0,0);
box-shadow: inset 0 0 22px rgba(255,255,255,.1);
border: .2px solid rgba(255,255,255,.5); color: #fff;
}
/* — footer: 48px band on #161F2D; order brand→cols→awards→rule→copy→legal;
SynMax+Industries side by side, Products as an inline dotted row — */
.sm-footer { background: #161F2D; padding-block: 48px; }
.sm-footer__inner { display: flex; flex-direction: column; gap: 0; }
.sm-footer__top { flex-direction: column; gap: 48px; order: 1; }
.sm-footer__logo, .sm-footer__logo--wide { width: 184px; }
.sm-footer__social { gap: 4px; margin-left: -14px; }
.sm-footer__bottom { display: contents; }
.sm-footer__awards { order: 2; margin-top: 48px; }
.sm-footer__awards-label { font-size: var(--sm-fs-p2); line-height: 20px; }
.synmax .sm-footer__award-img { width: 92px; height: 29px; }
.synmax .sm-footer__award-img--spire { width: 81px; height: 23px; }
.sm-footer__rule { order: 3; margin: 48px 0 0; border-top-color: rgba(255,255,255,.12); }
.sm-footer__copy { order: 4; margin-top: 32px; width: 100%; text-align: center; text-box: trim-both cap alphabetic; }
.sm-footer__legal { order: 5; margin-top: 40px; text-align: center; font-size: var(--sm-fs-tagline);; line-height: 20px; }
.sm-footer__legal a { font-size: var(--sm-fs-tagline);; margin-block: -10px; }
.sm-footer__legal-sep { margin: 0 6px; }
.sm-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.sm-footer__col { min-width: 0; gap: 0; }
.sm-footer__head { font-size: var(--sm-fs-p2); line-height: 20px; margin: 0 0 12px; }
.sm-footer__col a { font-size: var(--sm-fs-split-sub); line-height: 1; padding: 15px 8px; margin: -3.5px 0; min-height: 44px; display: inline-flex; align-items: center; }
.sm-footer__col:nth-child(3) { grid-column: 1 / -1; padding-top: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 12px; column-gap: 8px; }
.sm-footer__col:nth-child(3) .sm-footer__head { flex-basis: 100%; margin-bottom: 0; }
.sm-footer__col:nth-child(3) a.sm-footer__prod { padding: 8px 0 !important; margin: 0; min-height: 0; display: inline-flex; align-items: center; line-height: 7px; }
.sm-footer__col:nth-child(3) a.sm-footer__prod + a.sm-footer__prod::before {
content: ""; width: 3px; height: 3px; border-radius: 50%; background: #fff; margin-right: 8px; flex: 0 0 3px;
}
}
/* Query-driven news band (energy home): post blocks bring their own wrappers
— title links inherit the card ink, the excerpt's inner inherits the
card type instead of core defaults. */
.sm-newscard__title a, .sm-newsfeature__title a { color: inherit !important; text-decoration: none; }
.sm-newscard__ex p, .sm-newsfeature__ex p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }