/* ─────────────────────────────────────────────────────────────
   HARNESS CODE - shared stylesheet (extracted from home-v3, 10 Jul 2026)
   Direction: photography-first corporate editorial (ref: motherson.com).
   Single source of truth for tokens + components across every page.
   Identity per brand/identity.md; canonical spec: styleguide.html.
   Sharp corners everywhere, no red, orange is an accent only.
  ───────────────────────────────────────────────────────────── */
:root{
  --ink:#0B1A1F; --blue:#114A65; --orange:#F05B1C; --orange-soft:#F48352;
  --slate:#5A666C; --gray-mid:#ADADAD; --gray-light:#DBDBDB; --paper:#FFFFFF;
  --orange-deep:color-mix(in srgb, var(--orange) 82%, var(--ink));
  --line:var(--gray-light);
  --maxw:1320px; --gutter:48px;
  --mono:'Geist Mono',ui-monospace,'SF Mono',monospace;
  --sans:'Geist',-apple-system,sans-serif;
  --disp:'Push','Geist',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--paper);}
body{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--slate);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);line-height:1.12;font-weight:600;text-wrap:balance;}
h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.015em;margin-bottom:24px;text-wrap:balance;}
h3{font-size:21px;}
h4{font-size:17px;}
p{margin-bottom:16px;text-wrap:pretty;} p:last-child{margin-bottom:0;}
/* ── Orphan control ──
   Marto, on the EV drivetrain line: "lets add text-wrap balance to all texts so
   we never have ORPHAN words". Two properties, because they answer two different
   questions. `pretty` runs a paragraph-level pass whose whole job is to stop the
   last line being a single stranded word, and it has no line cap, so it is the
   right tool for running prose: it goes on `p` above. `balance` equalises the
   length of every line in the block and browsers cap it at a handful of lines,
   so it is only correct where the block is already short. That is the headings
   (the rule above, extending what h2 and the hero h1 already did) and the
   caption-scale paragraphs below: decks, stat captions and list-row summaries,
   one to three lines each, which read as labels rather than as running text. */
.sec-head p,.stat p,.mkt-item p,.fam-idx-row p,
figcaption,.dropdown small{text-wrap:balance;}
/* .hero p and .svc-row p are running prose, not short blocks. Browsers cap
   balance at a few lines and fall back to NORMAL past it, not to pretty, so
   putting them here lost them both treatments at phone widths. They keep the
   pretty they inherit from p. */
strong{font-weight:600;color:var(--ink);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.section{padding:150px 0;}
.label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray-mid);}

.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ── Nav ── */
.main-nav{background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:stretch;justify-content:space-between;min-height:82px;}
.nav-logo{display:flex;align-items:center;padding:26px 0;}
.nav-logo img{height:26px;}
.nav-items{display:flex;align-items:stretch;gap:4px;}
.nav-item{position:relative;display:flex;}
.nav-item>a,.nav-item>span{display:flex;align-items:center;gap:8px;padding:0 20px;cursor:pointer;
  font-size:15.5px;font-weight:500;color:var(--ink);white-space:nowrap;transition:color .15s;position:relative;}
.nav-item>a::after,.nav-item>span::after{content:'';position:absolute;left:20px;right:20px;bottom:24px;
  height:1.5px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);}
.nav-item:hover>a::after,.nav-item:hover>span::after{transform:scaleX(1);}
.nav-item.active>a::after,.nav-item.active>span::after{transform:scaleX(1);}
.nav-item>a:hover,.nav-item>span:hover{color:var(--ink);}
/* Chevron is a stroked SVG, not the U+25BE glyph: the glyph renders at a
   different size in every font, sits off the optical centre, and cannot be given
   a stroke weight. Fixed square box so the hover rotation spins about its centre. */
.nav-item .caret{width:11px;height:11px;flex:none;display:block;
  color:var(--gray-mid);transition:transform .2s,color .15s;}
.nav-item .caret svg{width:100%;height:100%;display:block;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.nav-item:hover .caret{transform:rotate(180deg);}
.dropdown{display:none;position:absolute;top:100%;left:8px;background:var(--paper);
  border:1px solid var(--line);min-width:340px;z-index:200;padding:14px;
  box-shadow:0 24px 60px rgba(11,26,31,.12);}
.nav-item:hover .dropdown{display:block;animation:ddIn .22s var(--ease);}
@keyframes ddIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.nav-item:hover .dropdown{animation:none;}}
.dropdown a{display:block;padding:13px 16px;font-size:15px;font-weight:500;color:var(--ink);transition:background .12s,color .12s;}
.dropdown a:hover{background:color-mix(in srgb, var(--blue) 5%, white);color:var(--blue);}
.dropdown small{display:block;color:var(--gray-mid);font-size:12.5px;margin-top:3px;font-weight:400;line-height:1.5;}
/* The "All X" overview link is a different kind of item from its siblings: it
   goes to the hub rather than to one thing. It sits last, is underlined, and is
   separated by a rule so it reads as the way out rather than a seventh option. */
.dropdown a.dd-all{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  color:var(--slate);}
.dropdown a.dd-all:hover{color:var(--blue);}
/* Marto: the language dropdown should not look like the other menu dropdowns.
   It is a short list of equal switches, not a section index, so it drops the
   340px minimum, the roomy row padding and the large type for something compact
   and clearly a different kind of control. */
.dropdown.dropdown-right{left:auto;right:8px;min-width:0;width:max-content;padding:6px;}
.dropdown.dropdown-right a{padding:8px 14px;font-size:13.5px;font-family:var(--mono);
  letter-spacing:.03em;color:var(--slate);}
.dropdown.dropdown-right a:hover{background:var(--gray-light);color:var(--ink);}

/* Crisis band: a photograph of the city the phone rings in, above the number.
   The source is the vertical About frame, so it is windowed to a landscape band
   here rather than shown whole; height is capped so it never pushes the number
   below the fold on a laptop. Square corners, per the style guide. */
/* Marto, on crisis sourcing: match the figure to the direct-line box under it and
   let it run taller, so the left column finishes level with the form on the right
   instead of 250px short. 440 is the same max-width the .direct-line box uses.
   Only used on that one page. */
.band-figure{margin:0 0 30px;overflow:hidden;max-width:440px;max-height:none;}
.band-figure img{width:100%;height:440px;object-fit:cover;object-position:50% 30%;display:block;}
@media (max-width:820px){
  .band-figure,.band-figure img{max-height:150px;height:150px;}
}
/* language switcher: borderless so it reads as a quiet utility control rather than
   a button; hover is carried by the colour shift and the chevron rotation. */
.nav-item.nav-lang{align-items:center;margin-left:6px;}
.nav-item.nav-lang>span{padding:8px 10px;font-family:var(--mono);
  font-size:13px;letter-spacing:.04em;color:var(--slate);gap:7px;transition:color .15s;}
.nav-item.nav-lang:hover>span,.nav-item.nav-lang:hover .caret{color:var(--ink);}
/* Provisional: this cannot fire today. Every nav trigger is a <span> with no
   tabindex, so none of the five dropdowns is keyboard reachable. Kept so the
   focus treatment is already decided when that is fixed. */
.nav-item.nav-lang>span:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}
.nav-item.nav-lang>span::after{display:none;}
.nav-item.nav-lang .globe{width:15px;height:15px;flex:none;}
.nav-item.nav-lang .globe svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.4;fill:none;display:block;}
/* Desktop only (the whole group is hidden below 1000px, where the burger takes
   over). Marto: "move the 4 main nav items to the center of the nav so they are
   more separated from the language and Get a Quote button." Auto margins on both
   sides of the four items float them between the logo and the right-hand cluster,
   which is what creates the separation he asked for. Centred against that gap
   rather than the viewport, because the logo and the cluster are different widths
   and optical balance beats arithmetic here. */
@media(min-width:1001px){
  .nav-items{flex:1;}
  .nav-items>.nav-item:first-child{margin-left:auto;}
  .nav-item.nav-lang{margin-left:auto;}
}
.nav-cta{display:flex;align-items:center;margin-left:14px;}
.nav-cta a{background:var(--orange);color:#fff;padding:14px 26px;font-weight:600;font-size:15px;
  line-height:1;white-space:nowrap;font-family:var(--disp);transition:background .15s;}
.nav-cta a:hover{background:var(--orange-deep);}
.nav-cta a::after{display:none;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px 0 8px 14px;}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:transform .2s;}
/* mobile menu - full-screen ink overlay */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--ink);color:#fff;z-index:300;
  overflow-y:auto;padding:0 28px 48px;}
.mobile-menu.open{display:block;}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.14);}
.mm-top img{height:24px;}
.mm-close{font-size:26px;background:none;border:none;cursor:pointer;color:#fff;line-height:1;}
.mm-group{padding:28px 0 8px;}
.mm-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-soft);margin-bottom:14px;}
.mm-link{display:block;padding:10px 0;font-size:26px;font-family:var(--disp);font-weight:600;
  color:#fff;letter-spacing:-.01em;line-height:1.2;}
.mm-link:active{color:var(--orange-soft);}
.mm-sub{display:block;padding:7px 0;font-size:16px;color:var(--gray-mid);}
.mm-cta{margin-top:36px;}
.mm-contact{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  font-size:14.5px;color:var(--gray-mid);line-height:2;}
.mm-contact a{color:#fff;display:inline;}
body.menu-open{overflow:hidden;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 32px;
  font-size:15.5px;font-weight:600;cursor:pointer;font-family:var(--disp);
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-deep);}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--gray-mid);}
.btn-secondary:hover{border-color:var(--ink);}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-ghost-light:hover{border-color:#fff;}
.link-more{font-weight:500;color:var(--ink);border-bottom:1px solid var(--orange);padding-bottom:2px;
  transition:color .15s,border-color .15s;}
.link-more:hover{color:var(--blue);}
/* var(--ink) is the band's own background, so the label reads as an unlabelled orange rule. */
.dark-band .link-more{color:#fff;border-bottom-color:#fff;}
.dark-band .link-more:hover{color:#fff;border-bottom-color:var(--orange);}

/* ── Hero ── */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(75deg, rgba(11,26,31,.82) 0%, rgba(11,26,31,.45) 45%, rgba(11,26,31,.12) 75%);}
/* The hero loop rides over the still, same deferred-load contract as the
   corridor band: the image is the poster, the no-JS state and the
   reduced-motion state, so nobody downloads 3MB to not watch it.
   z-index here for the same reason as .speed: the video would otherwise
   paint over the scrim and the copy. */
.hero .scrim{z-index:2;}
.hero-video{opacity:0;transition:opacity .8s var(--ease);z-index:1;}
.hero-video.on{opacity:1;}
/* The four beats swing from a near-black macro to a bright factory floor, so a
   scrim tuned to the single dark still leaves the H1 thin over the bright ones.
   Deepened only while the loop is actually showing: the static hero keeps its
   original weighting. */
.hero-video.on ~ .scrim{background:linear-gradient(75deg, rgba(11,26,31,.90) 0%, rgba(11,26,31,.64) 45%, rgba(11,26,31,.34) 75%);}
.hero-content{position:relative;z-index:3;width:100%;padding-bottom:110px;}
.hero .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-soft);display:block;margin-bottom:26px;}
.hero h1{font-family:var(--disp);font-weight:600;color:#fff;
  font-size:clamp(44px,5.4vw,80px);line-height:1.02;letter-spacing:-.015em;margin-bottom:28px;max-width:11em;text-wrap:balance;}
.hero p{font-size:19px;line-height:1.65;color:rgba(255,255,255,.85);margin-bottom:44px;max-width:32em;font-weight:400;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
/* inner-page hero: shorter, H1-led (recipe 01 variant).
   Split anchoring. Marto, on connectors: "sitemap could be left top aligned in
   the hero so its' always in the same place. rest of the content - bottom
   aligned". So the content block stretches to the full height of the hero, the
   breadcrumb sits against the top padding at the same offset on all 60 inner
   pages, and the element after it absorbs the free space as margin, which puts
   the title back on the bottom edge of the photograph. 404 leads with a kicker
   rather than a breadcrumb and behaves the same way. */
.hero.hero-inner{min-height:56vh;align-items:stretch;}
.hero.hero-inner .hero-content{display:flex;flex-direction:column;
  padding-bottom:80px;padding-top:60px;}
.hero.hero-inner .hero-content>[aria-label="Breadcrumb" i]+*,
.hero.hero-inner .hero-content>.kicker+*{margin-top:auto;}
/* Flex children do not collapse margins, so the intro's 44px and the button
   row's own 44px would stack to 88 where a hero carries buttons (404). */
.hero.hero-inner .hero-content>p:has(+.hero-ctas){margin-bottom:0;}
.hero.hero-inner h1{margin-bottom:22px;}
/* Three lines is the cap Marto set on the inner-page title, so its headline
   runs on a wider measure than the full-height hero's. Below roughly 561px the
   measure is the viewport rather than this max-width, so widening does nothing
   there and the size ramps down instead: 34px at 375, meeting the shared
   5.4vw curve where the two cross. */
.hero.hero-inner h1{max-width:13em;font-size:clamp(34px,max(2.27vw + 25.5px,5.4vw),80px);}
/* A solid-colour inner hero has no photograph under the free space, so bottom
   anchoring against a viewport minimum would open a dead band of flat ink or
   orange above the title. Its height comes from its content instead. */
.hero.hero-inner.hero-ink,.hero.hero-inner.hero-orange{min-height:0;}
/* Marto, on the Tier 1 title: keep "Tier 1" together rather than letting the 1
   drop to the next line. Scoped to a short inline span on purpose. nowrap on a
   CONTAINER pins the prose beside it and scrolls the page sideways on a phone,
   which is why this is not a utility anyone should reach for on a block. */
.nw{white-space:nowrap;}

/* Marto: dark blue behind selected text, the text itself orange, everywhere.
   ::selection does not inherit, so it is set on the universal selector rather
   than on body, or anything with its own colour keeps the browser default. */
::selection{background:var(--blue);color:var(--orange);}
::-moz-selection{background:var(--blue);color:var(--orange);}
*::selection{background:var(--blue);color:var(--orange);}
/* Marto, on crisis sourcing: "add some more spacing above 'Crisis Sourcing'
   because it looks strange when everything is so cluttered on top and there is
   such a large padding below". Measured 60px above the breadcrumb against 124
   below the intro: with min-height:0 there is no free space for the auto margin
   to absorb, so the block sits hard under the nav while the intro's own 44px
   bottom margin stacks onto the 80px padding. Balance the two ends and drop the
   trailing margin, which is what opened the gap. */
.hero.hero-inner.hero-ink .hero-content,
.hero.hero-inner.hero-orange .hero-content{padding-top:88px;padding-bottom:88px;}
.hero.hero-inner.hero-ink .hero-content>:last-child,
.hero.hero-inner.hero-orange .hero-content>:last-child{margin-bottom:0;}
/* solid-ink hero (crisis, urgent tone - no photo) */
.hero.hero-ink{background:var(--ink);}
/* orange hero (crisis - urgent, high-visibility) */
.hero.hero-orange{background:var(--orange);}
.hero.hero-orange .kicker{color:rgba(255,255,255,.9);}
/* Same reason as the kicker above: white at 55% over orange is roughly 2:1 at 12px. */
.hero.hero-orange .hero-content>[aria-label="Breadcrumb" i]{color:rgba(255,255,255,.9);}
.hero.hero-orange .hero-content>[aria-label="Breadcrumb" i] a{border-bottom-color:rgba(255,255,255,.5);}
.hero.hero-orange h1,.hero.hero-orange p{color:#fff;}
/* type-only hero on paper: no photo, no scrim, height comes from the content.
   Used where a photo band carries the imagery immediately below the title. */
.hero.hero-plain{background:var(--paper);color:var(--ink);min-height:0;align-items:flex-start;}
.hero.hero-plain .hero-content{padding-top:76px;padding-bottom:48px;}
.hero.hero-plain .kicker{color:var(--gray-mid);margin-bottom:20px;}
.hero.hero-plain h1{color:var(--ink);margin-bottom:22px;}
.hero.hero-plain p{color:var(--slate);margin-bottom:0;}

/* ── Photo strip: justified rows, nothing cropped ──
   Every figure carries its own aspect ratio as --ar. flex-grow is that ratio
   against a flex-basis of 0, so each width lands in proportion to the ratio,
   which makes width/--ar (the rendered height) identical for every frame on
   the line and flushes the row to both edges. Portrait and landscape frames
   therefore sit side by side at their native ratio with no object-fit crop.
   Row height is (row width - gaps) / sum of the ratios on that row, so the
   shuffle in hc.js has to preserve each row's ratio mix to keep it constant.
   .ps-pair is display:contents on desktop (its two figures become direct flex
   items of the row) and becomes its own full-width line below 760px. */
/* the band sits between a type-only hero and the section under it, both of
   which already carry their own padding, so it adds none of its own. */
.photo-band{padding:0;}
.photo-strip{--ps-gap:6px;display:grid;gap:var(--ps-gap);}
.ps-row{display:flex;gap:var(--ps-gap);}
.ps-pair{display:contents;}
.ps-row figure{flex:var(--ar) 1 0;min-width:0;}
.ps-row img{width:100%;height:auto;}
@media(max-width:760px){
  /* four frames on one line get too short to read, so each pair takes a line
     of its own. The pair keeps one landscape and one portrait frame, so every
     line still justifies to the same height. */
  .photo-strip{--ps-gap:4px;}
  .ps-row{flex-wrap:wrap;}
  .ps-pair{display:flex;gap:var(--ps-gap);flex:1 1 100%;}
}

/* ── Statement ── */
.statement{padding:170px 0 150px;}
.statement-grid{display:grid;grid-template-columns:7fr 4fr;gap:96px;align-items:end;}
/* Floor lowered from 32px: the inner-hero H1 sits at 34px on a phone, and a 32px
   section heading directly beneath it read as the same level. Raising the H1 back
   is not the fix, that is what pushed titles to four lines. */
.statement h2,.statement h1{font-size:clamp(25px,3.8vw,52px);line-height:1.14;margin-bottom:0;font-weight:600;color:var(--ink);font-family:var(--disp);}
.statement h2 em,.statement h1 em{font-style:normal;color:var(--blue);}
.statement-side p{font-size:17px;margin-bottom:28px;}

/* ── Full-bleed image block ── */
.bleed{position:relative;height:64vh;min-height:420px;overflow:hidden;}
.bleed img{width:100%;height:100%;object-fit:cover;}

/* ── Stats ── */
.stats{padding:130px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;}
.stats-grid.four{grid-template-columns:repeat(4,1fr);gap:48px;}
.stat{border-top:1px solid var(--ink);padding-top:28px;}
.stat .n{font-family:var(--disp);font-weight:600;font-size:clamp(48px,4.6vw,72px);color:var(--ink);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block;margin-bottom:14px;}
.stat .n.sm{font-size:clamp(30px,3vw,42px);}
.stat .n em{font-style:normal;color:var(--orange);}
.stat p{font-size:15.5px;max-width:24em;}

/* ── Section headers ── */
.sec-head{max-width:44em;margin-bottom:72px;}
.sec-head .label{display:block;margin-bottom:22px;}
.sec-head p{font-size:18px;}

/* ── Services / index list ── */
.svc-list{border-top:1px solid var(--line);}
/* Each row is an anchor to its service page. It carried an arrow and a pointer
   cursor while being a plain div, which is an affordance that promises
   something the markup could not deliver. */
.svc-row{display:grid;grid-template-columns:64px 1fr 1.4fr 40px;gap:32px;align-items:center;
  padding:38px 0;border-bottom:1px solid var(--line);cursor:pointer;color:inherit;
  text-decoration:none;}
.svc-row:focus-visible{outline:2px solid var(--orange);outline-offset:-4px;}

/* Services index: the six services as cards with their own photography, each a
   real link to its own page. Five of the six used to point at the RFQ form, so
   the list navigated but never actually reached a service. Crisis Sourcing has
   no photograph of its own (its page runs an orange hero), so its card carries
   that orange instead, which also makes the urgent one read as different. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px;}
.svc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--line);background:var(--paper);transition:border-color .2s,transform .3s var(--ease);}
.svc-card:hover{border-color:var(--gray-mid);transform:translateY(-3px);}
.svc-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.svc-card-fig{margin:0;overflow:hidden;aspect-ratio:16/10;}
.svc-card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.svc-card:hover .svc-card-fig img{transform:scale(1.04);}
.svc-card-plate{aspect-ratio:16/10;background:var(--orange);display:flex;align-items:flex-end;padding:22px;}
.svc-card-plate span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;}
.svc-card-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.svc-card-body h3{margin-bottom:10px;transition:color .15s;}
.svc-card:hover .svc-card-body h3{color:var(--blue);}
.svc-card-body p{font-size:15px;margin-bottom:18px;}
.svc-card-body .svc-arrow{margin-top:auto;text-align:left;}
.svc-card:hover .svc-arrow{color:var(--orange);transform:translateX(6px);}
@media(max-width:1024px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:26px;}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr;}}

/* Industries: the photograph and the heading lead to the same page as the link
   under the copy, so the whole card behaves the way it looks. */
.market-h-link{color:inherit;text-decoration:none;transition:color .15s;}
.market-h-link:hover{color:var(--blue);}
.market-img-link{display:block;}
.svc-icon{width:30px;height:30px;color:var(--slate);transition:color .2s;}
.svc-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block;}
.svc-row:hover .svc-icon{color:var(--blue);}
.svc-row.urgent .svc-icon{color:var(--orange);}
.svc-row h3{font-weight:600;transition:color .15s;}
.svc-row:hover h3{color:var(--blue);}
.svc-row p{font-size:15.5px;margin:0;}
.svc-arrow{color:var(--gray-mid);font-size:20px;text-align:right;transition:color .15s,transform .25s var(--ease);}
.svc-row:hover .svc-arrow{color:var(--orange);transform:translateX(6px);}
/* informational variant: rows that are NOT links (e.g. crisis "what we need").
   No pointer, no hover recolour, no arrow - so they don't look clickable. */
.svc-list.info .svc-row{cursor:default;grid-template-columns:64px 1fr 1.4fr;}
.svc-list.info .svc-row:hover h3{color:var(--ink);}
.svc-list.info .svc-row:hover .svc-icon{color:var(--slate);}

/* ── Dark markets/products band (hover swaps image) ── */
.dark-band{background:var(--ink);color:#fff;}
.dark-band h2{color:#fff;}
.dark-band .label{color:rgba(255,255,255,.45);}
.mkt-grid{display:grid;grid-template-columns:5fr 6fr;gap:88px;align-items:start;padding:150px 0;}
.mkt-grid>*{min-width:0;}
.mkt-item p,.mkt-item ul,.mkt-item li{overflow-wrap:anywhere;}
.mkt-figure{position:sticky;top:110px;height:min(72vh,640px);}
.mkt-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;
  opacity:0;transition:opacity .5s var(--ease);}
.mkt-figure img.active{opacity:1;}
.mkt-cap{position:absolute;left:0;right:0;bottom:-34px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray-mid);}
@media(prefers-reduced-motion:reduce){.mkt-figure img{transition:none;}}
.mkt-list{margin-top:48px;}
/* The family rows are anchors now, not divs with a "Details" link buried in the
   paragraph: the whole row is the target, and the arrow on the right is the
   affordance. `display:block` because an anchor is inline by default and the
   row would collapse. */
.mkt-item{display:block;text-decoration:none;color:inherit;
  padding:20px 44px 20px 0;border-top:1px solid rgba(255,255,255,.14);cursor:pointer;
  transition:padding-left .25s var(--ease);position:relative;}
.mkt-go{position:absolute;right:0;top:20px;color:rgba(255,255,255,.4);font-size:19px;
  opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease);}
.mkt-item:hover .mkt-go,.mkt-item.active .mkt-go,.mkt-item:focus-visible .mkt-go{
  opacity:1;transform:none;color:var(--orange);}
.mkt-item::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--orange);transition:width .35s var(--ease);}
.mkt-item:hover::before,.mkt-item.active::before{width:56px;}
.mkt-item h4{color:var(--gray-mid);font-size:19px;margin-bottom:4px;font-weight:500;transition:color .2s;}
.mkt-item:hover h4,.mkt-item.active h4{color:#fff;}
/* descriptions are always visible so hover never reflows the layout (Marto: no
   trembling on hover/press). Hover/active only recolours + swaps the figure. */
.mkt-item p{font-size:14.5px;color:var(--slate);margin:6px 0 0;transition:color .2s;}
.mkt-item:hover p,.mkt-item.active p{color:var(--gray-mid);}
.mkt-item ul{margin:8px 0 0 18px;color:var(--slate);font-size:14px;line-height:1.7;transition:color .2s;}
.mkt-item:hover ul,.mkt-item.active ul{color:var(--gray-mid);}
@media(prefers-reduced-motion:reduce){.mkt-item::before{transition:none;}}
.dark-band .lead-p{color:var(--gray-mid);font-size:18px;}

/* ── Trust / proof split ── */
.trust-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:100px;align-items:center;}
.trust-grid h2{font-size:clamp(30px,3.4vw,46px);}
.trust-figure{height:100%;}
.trust-figure img{width:100%;height:100%;min-height:560px;object-fit:cover;
  outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;}
/* opt out of the column-filling crop where the frame is worth showing whole,
   e.g. a room shot whose sides carry the point, or a portrait that should run
   the height of the column beside it. Deliberately sets NO aspect-ratio: that
   leaves the UA's attribute-derived ratio in place, so the box is reserved at
   the right height before the (lazy) image arrives. Writing aspect-ratio:auto
   here instead discards that ratio and collapses the box to 0 until load, for
   an 800px jump. The narrow breakpoint's 4/3 is excluded at its own rule. */
.trust-figure.natural img{height:auto;min-height:0;}
.trust-points{margin-top:52px;display:grid;gap:36px;}
.tp{display:flex;gap:24px;align-items:flex-start;}
.tp-icon{width:30px;height:30px;color:var(--blue);flex:none;margin-top:2px;}
.tp-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block;}
.tp h4{margin-bottom:8px;}
.tp p{font-size:15px;}
.iso-line{margin-top:72px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;}
.iso-line p{font-size:15.5px;margin:0;}

/* ── Team grid ──
   Studio portraits are all shot 2:3, so aspect-ratio 2/3 is a guard against an
   odd frame rather than a crop of the current set. The role line is hidden
   while it is empty, so filling the confirmed titles in later needs no CSS. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px;max-width:1080px;margin-top:56px;}
/* height:auto is load-bearing: the width/height attributes on the img make the
   height definite, and aspect-ratio is ignored while both axes are definite. */
.team-card img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center top;
  background:color-mix(in srgb, var(--ink) 3%, white);
  outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;}
.team-card figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--ink);}
.team-card h3{font-size:20px;margin-bottom:5px;}
.team-card .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-mid);display:block;}
.team-card .role:empty{display:none;}
/* the address is one unbroken token (no space around the CSS-drawn "@"), so a
   two-column grid on a phone would push the page sideways without a break
   opportunity. The <wbr> in the markup puts the preferred break before the
   "@"; overflow-wrap is the backstop for anything narrower still. */
.team-card .obf{display:inline-block;margin-top:9px;font-size:14.5px;color:var(--slate);
  max-width:100%;overflow-wrap:anywhere;
  border-bottom:1px solid var(--gray-light);padding-bottom:2px;transition:color .15s,border-color .15s;}
.team-card .obf:hover{color:var(--ink);border-bottom-color:var(--orange);}

/* ── Obfuscated email ──
   The "@" is drawn by CSS, so neither the served HTML nor the link's
   textContent ever holds a contiguous user@domain string for a regex harvester
   to lift. hc.js assembles the mailto: href in the browser. */
.obf-at::before{content:"\0040";}
.obf{cursor:pointer;}

/* ── Knowledge / capability table ── */
.knw-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px;align-items:center;}
.knw-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;
  outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;}
.fam-list{margin-top:40px;border-top:1px solid var(--line);}
.fam-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;}
.fam-row .fam-logo{height:20px;width:100%;object-fit:contain;object-position:left center;
  filter:grayscale(1) opacity(.7);transition:filter .25s;}
.fam-row:hover .fam-logo{filter:none;}
.fam-row span:nth-child(2){color:var(--ink);font-weight:500;}
.fam-row span:last-child{color:var(--gray-mid);text-align:right;}
/* Lead-row variant: figure sits beside the title and intro only, and the list
   runs the full width beneath both. Kept off the plain .knw-grid, whose right
   column is a full text block that has to stay a column. The list needs the
   width: inside a half-column its middle cell wraps three and four lines deep.
   minmax(0,1fr) on that cell stops the row's min-content forcing the section
   wider than the gutter allows. */
.knw-grid.knw-lead{grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center;}
/* Marto: show the whole image. Three of the four lead figures hold square
   sources, and 4/3 was cropping the top and bottom off them, which on the fanned
   terminals cut the circle. Square is the default; the one landscape source
   carries .knw-wide for its own ratio. */
.knw-lead .knw-figure img{aspect-ratio:1/1;}
.knw-lead .knw-figure.knw-wide img{aspect-ratio:16/9;}
.fam-list.fam-wide{margin-top:72px;}
.fam-wide .fam-row{grid-template-columns:180px minmax(0,1fr) auto;gap:40px;padding:20px 0;}
@media(max-width:1000px){
  .knw-grid.knw-lead{grid-template-columns:1fr;gap:40px;}
  .fam-list.fam-wide{margin-top:48px;}
  /* Below the lead row's own breakpoint the part codes drop under the
     description instead of competing with it for a third column, which is
     what squeezes the description to three and four lines on a tablet. */
  .fam-wide .fam-row{grid-template-columns:170px minmax(0,1fr);gap:7px 28px;
    align-items:start;padding:22px 0;}
  .fam-wide .fam-row span:last-child{grid-column:2;text-align:left;}
}
@media(max-width:560px){
  .fam-wide .fam-row{grid-template-columns:1fr;gap:7px;}
  .fam-wide .fam-row span:last-child{grid-column:1;}
  /* The plain row keeps a fixed 110px name column and an auto part-code column
     at every width, so one long supplier name beside its part list has a
     min-content wider than a 320px phone: measured 344px on cable protection
     and 326px on terminals. Same collapse as .fam-wide above. */
  .fam-row{grid-template-columns:1fr;gap:7px;align-items:start;padding:18px 0;}
  .fam-row span:last-child{text-align:left;}
}

/* ── Family index on a brand page: a set, not a sequence ──
   The connector families of one manufacturer are equals, not stages. They ran
   in the process rail (.steps) for its ruled columns and inherited its arrows
   with them: at three per row the arrows restarted on the second row and the
   first item of that row was entered from nothing, so the block read as two
   unrelated three-step processes. One family per line removes the question of
   reading order instead of answering it. The genuine 01-02-03 sourcing process
   further down the same page keeps .steps, so an arrow now means a sequence
   everywhere it appears.
   Marto then asked for the numerals the arrows used to imply: "maybe just adding
   numbers 1,2,3,4.. will be better than arrows". They are set as reference
   markers, not as steps: mono, gray, the same treatment as .faq-idx, on a rail
   of their own to the left of the family code. An arrow points from one thing to
   the next; a numeral only says which line you are on. */
.fam-index{border-top:1px solid var(--ink);margin-top:56px;}
.fam-idx-row{display:grid;grid-template-columns:34px 150px 1fr 1.6fr;gap:32px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid var(--line);}
.fam-idx-n{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;
  color:var(--gray-mid);font-variant-numeric:tabular-nums;}
.fam-idx-row .label{color:var(--orange-deep);}
.fam-idx-row h4{font-size:18px;}
.fam-idx-row p{font-size:15.5px;margin:0;max-width:46em;}
@media(max-width:1000px){
  /* stacked, the description would otherwise run the full width of the page.
     The numeral keeps the family code company on the first line rather than
     taking a line of its own, which would read as a heading over the row. */
  .fam-idx-row{grid-template-columns:auto 1fr;gap:10px 14px;padding:24px 0;}
  .fam-idx-row h4,.fam-idx-row p{grid-column:1/-1;}
}

/* ── Speed / photo band with data ── */
.speed{position:relative;color:#fff;overflow:hidden;}
.speed .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.speed-video{opacity:0;transition:opacity .8s var(--ease);z-index:1;}
.speed-video.on{opacity:1;}
.speed .scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,26,31,.74) 0%, rgba(11,26,31,.52) 55%, rgba(11,26,31,.72) 100%);}
.speed .scrim{z-index:2;}
.speed-content{z-index:3;}
.speed-content{position:relative;padding-top:170px;padding-bottom:170px;}
.speed h2{color:#fff;max-width:13em;}
.speed p{color:rgba(255,255,255,.85);font-size:18px;max-width:36em;}
.speed-times{display:flex;gap:56px;flex-wrap:wrap;margin-top:72px;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.3);font-variant-numeric:tabular-nums;}
.speed-times div{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.65);}
.speed-times b{display:block;color:#fff;font-weight:500;font-size:17px;margin-bottom:6px;}
.speed-times .org b{color:var(--orange-soft);}

/* ── Suppliers: logo marquee ── */
.sup-marq{margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:44px 0;}
/* Six brands, so they are simply shown. This used to be an endless marquee of
   the six duplicated once to make the loop seamless, which meant permanent
   motion, a hover-to-pause affordance, and only ever half the row legible at a
   time, to display a set that fits on one line. */
.sup-track{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:40px 72px;width:auto;}
.sup-track img{height:34px;width:auto;filter:grayscale(1) opacity(.65);transition:filter .25s;}
.sup-track img:hover{filter:none;}
.sup-track img.lg{height:42px;}
/* flatlay.webp is a 900x900 square holding a seven-row composition. As a
   full-bleed band it was upscaled 1.6x at 1440 and cropped to roughly two of the
   seven rows, which loses the thing the picture was chosen to show. Contained and
   centred instead, capped at its own native width so it is never upscaled. */
.fam-figure{margin:0 auto;max-width:900px;}
.fam-figure img{width:100%;height:auto;display:block;}
@media(max-width:820px){
  .sup-track{justify-content:center;gap:32px 44px;}
  .sup-track img{height:26px;}
  .sup-track img.lg{height:32px;}
}
.sup-more{margin-top:28px;font-size:15.5px;color:var(--slate);}
.sup-more a{color:var(--ink);border-bottom:1px solid var(--orange);padding-bottom:2px;}
.sup-more a:hover{color:var(--blue);}
/* colourful logo grid (replaces grayscale marquee/carousel - Marto: show the
   colourful logos, multiple rows, more weight). Cells share hairline borders. */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-left:1px solid var(--line);margin-top:56px;}
.logo-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.logo-grid > *{display:flex;align-items:center;justify-content:center;padding:38px 22px;min-height:118px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;transition:background .15s;}
/* A logo cell that leads to that manufacturer's sourcing page is an anchor, so
   the whole cell is the target rather than the mark inside it. Marto: "make
   these clickable, leading to the supplier page".
   Hover is an orange rule inset along the bottom of the cell, the same "this is
   a link" mark .sup-more a and .mkt-item::before already use, drawn as an inset
   shadow so nothing moves (no trembling on hover). The cell keeps its white
   background: this grid used to tint on hover, and the tint cannot be used here
   because jst.png is an RGB file with no alpha channel (the other five marks are
   transparent SVGs), so any colour behind it paints a visible white plate around
   the JST mark. One bad file, but the hover has to read the same across the row,
   so the tint goes for all six rather than for five.
   Focus takes the .brand-card outline, inset because the cells share hairline
   borders and an outward offset would sit on the neighbour. Everything is
   scoped to a, so the name-only cells on /brands/ that are still plain divs are
   untouched. */
.logo-grid a{color:inherit;text-decoration:none;transition:box-shadow .2s;}
.logo-grid a:hover{box-shadow:inset 0 -2px 0 var(--orange);}
.logo-grid a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
@media(prefers-reduced-motion:reduce){.logo-grid a{transition:none;}}
/* height, not max-height: these marks arrive at wildly different intrinsic
   sizes, and a cap only ever shrinks. HellermannTyton's SVG is intrinsically
   112x14, so under a cap it sat at 14px tall beside neighbours filling 38.
   Setting the height scales every mark to the same optical line; max-width
   still reins in the very wide ones and contain keeps every ratio. */
.logo-grid img{height:38px;max-width:78%;width:auto;object-fit:contain;}
.logo-grid .name{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em;text-align:center;}
@media(max-width:1000px){.logo-grid,.logo-grid.cols-3{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.logo-grid,.logo-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
/* Cells that carry a NAME rather than a logo (the extended portfolio, where the
   mark is not licensed yet): a plain 1fr track cannot shrink below its content,
   so one unbreakable word - HellermannTyton - held the whole grid wider than a
   320px screen and scrolled the page sideways. minmax(0,1fr) lets the track
   shrink and the name wraps inside it instead. */
@media(max-width:600px){
  .logo-grid.logo-grid-names{grid-template-columns:repeat(2,minmax(0,1fr));}
  .logo-grid.logo-grid-names > *{padding:30px 12px;}
  .logo-grid.logo-grid-names .name{font-size:15px;overflow-wrap:anywhere;}
}
.ref-note{margin-top:96px;padding-top:32px;border-top:1px solid var(--line);max-width:52em;}
.ref-note p{font-size:15.5px;color:var(--slate);}

/* ── Core brand cards (the /brands/ grid) ──
   /brands/ used to run a bare logo wall of the six core brands and then a
   second "family index" section under it that repeated the same six logos in
   order to add the family names. Two sections, one argument, the same marks
   twice. The families moved onto the card, so the grid at the top of the page
   is now the whole answer and the logo is a way in rather than decoration.
   Hairline gutters (gap:1px over the line colour) match .logo-grid. */
.brand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);}
.brand-card{display:flex;flex-direction:column;background:#fff;padding:34px 30px 30px;
  color:inherit;text-decoration:none;transition:background .15s;}
.brand-card:hover{background:color-mix(in srgb, var(--blue) 4%, white);}
.brand-card:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
.brand-card-mark{display:flex;align-items:center;min-height:62px;margin-bottom:24px;}
.brand-card-mark img{height:var(--mark-h,38px);width:auto;max-width:100%;object-fit:contain;}
.brand-card h3{margin-bottom:10px;}
.brand-card-alt{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-mid);margin:-6px 0 10px;}
.brand-card-fams{display:block;font-family:var(--mono);font-size:12.5px;line-height:1.75;
  letter-spacing:.02em;color:var(--slate);margin-bottom:28px;}
.brand-card-go{margin-top:auto;font-family:var(--disp);font-weight:600;font-size:14.5px;
  color:var(--ink);display:flex;align-items:center;gap:9px;transition:color .15s,gap .25s var(--ease);}
.brand-card:hover .brand-card-go{color:var(--orange);gap:14px;}
@media(max-width:1000px){.brand-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.brand-cards{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.brand-card,.brand-card-go{transition:none;}}

/* ── Brand detail page header ──
   All six brand pages ran the same connector photograph, which made them look
   like one page rather than six. The header is paper instead, with the
   manufacturer's own mark identifying the page. --mark-h carries the optical
   size per logo (the styleguide's supplier-logo scale), so TE's compact box
   and Aptiv's long wordmark read at the same weight. */
.hero.brand-hero{border-bottom:1px solid var(--line);}
.hero.brand-hero .hero-content{padding-top:56px;padding-bottom:60px;}
.brand-crumb{display:block;margin-bottom:36px;color:var(--gray-mid);}
.brand-crumb a{color:var(--slate);border-bottom:1px solid var(--line);padding-bottom:2px;}
.brand-crumb a:hover{color:var(--blue);}
.brand-crumb span{color:var(--ink);}
.brand-mark{display:block;margin-bottom:32px;}
.brand-mark img{height:var(--mark-h,42px);width:auto;}
/* Marto: put the supplier logo on the right of the brand hero rather than
   directly above a headline that opens with the same brand name, which read as
   a repetition. Above 1000px the hero becomes two columns and the mark sits
   top-right on the breadcrumb's row; below that it stacks as before. */
@media(min-width:1001px){
  .hero.brand-hero .hero-content{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:48px;align-items:start;}
  .hero.brand-hero .hero-content>*{grid-column:1;}
  .hero.brand-hero .brand-mark{grid-column:2;grid-row:1;justify-self:end;margin-bottom:0;}
}
@media(max-width:1000px){
  .hero.brand-hero .hero-content{padding-top:40px;padding-bottom:44px;}
  .brand-crumb{margin-bottom:26px;}
  .brand-mark{margin-bottom:24px;}
  .brand-mark img{height:calc(var(--mark-h,42px) * .72);}
}

/* ── Ruled column rail (process steps, and plain sets) ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:72px;}
/* Column counts as classes, not inline styles. An inline grid-template-columns
   outranks every stylesheet rule including the mobile stack below, so these rails
   stayed three and four columns wide on a 320px phone. Found on brand pages by
   the brands stream; the same markup was on 17 others. */
.steps-2{grid-template-columns:repeat(2,1fr);}
.steps-3{grid-template-columns:repeat(3,1fr);}
.steps-4{grid-template-columns:repeat(4,1fr);}
/* No connector between the columns. Two arrows were built here and both were
   rejected. The first floated a 20px bar and a chevron in the gutter below the
   rule, unattached to anything. The second ran a pale hairline along the rule
   and capped it with a chevron, which put a light 1px mark on the same baseline
   as a black 1px rule: it read as the rule failing to render across the gutter,
   and the chevron tip landed on the start of the next rule like a snag. Both
   failed the same way, because the arrow was drawn from the same primitive as
   the grid it sat in, so it either floated free or merged into a defect.
   The deeper reason is that .steps is the site's generic ruled-column grid, not
   a process rail. Of its 27 uses, 13 carry an ordered sequence and 14 carry a
   plain set: every /locations/ page lists plants under repeated labels (Tier 1,
   Tier 1, Tier 1, Cluster, Cluster). An arrow there asserts a progression that
   does not exist, and because those sets wrap to a second row the chain
   restarts with its first item entered from nothing. That is the same defect
   .fam-index was pulled out of .steps to escape; it was still live here.
   Where the block IS a sequence the order is already stated three times over:
   the heading says "in 3 steps", every column is labelled Step 1 / Step 2 /
   Step 3 in orange mono, and left to right is the default reading order. A
   fourth statement of a known fact can only be decoration, and nothing else in
   this system is decoration.
   Removing it also closes a 100px band: the connectors were killed at 900px but
   .steps stacks at 1000px, so between 901 and 1000 a stacked step still drew a
   64px line from left:-64px, half of it off the left edge of the viewport
   (measured at 960: single 896px column, ::before still 64px wide). */
.step{border-top:1px solid var(--ink);padding-top:24px;}
.step .label{display:block;margin-bottom:16px;color:var(--orange-deep);}
.step h4{margin-bottom:10px;font-size:18px;}
.step p{font-size:15.5px;}

/* ── Quote / conversion band ── */
.quote-band{background:var(--blue);color:#fff;}
.quote-inner{padding-top:110px;padding-bottom:110px;}
.quote-inner h2{color:#fff;margin-bottom:14px;}
.quote-inner .sub{color:rgba(255,255,255,.75);margin-bottom:48px;font-size:17px;}
.quote-form{display:flex;gap:12px;flex-wrap:wrap;max-width:1000px;}
.quote-form input,.quote-form select{flex:1;min-width:170px;padding:16px 18px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);color:#fff;font-size:15px;font-family:var(--sans);
  transition:border-color .15s,background .15s;}
.quote-form input::placeholder{color:rgba(255,255,255,.6);}
.quote-form input:focus,.quote-form select:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14);}
.quote-form button{background:var(--orange);color:#fff;font-weight:600;padding:16px 30px;border:none;
  cursor:pointer;font-size:15.5px;white-space:nowrap;font-family:var(--disp);transition:background .15s;}
.quote-form button:hover{background:var(--orange-deep);}
.quote-note{font-size:13.5px;color:rgba(255,255,255,.65);margin-top:20px;}

/* ── On-white forms (inner pages: contact, quote, products quick-quote) ── */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink);margin-bottom:7px;}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:15px;font-family:var(--sans);transition:border-color .15s;}
.form-field textarea{min-height:130px;resize:vertical;line-height:1.6;}
/* custom, uncluttered select arrow (Marto: default arrow crowds the input) */
.form-field select,.rfq-row select{appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--ink);}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--gray-mid);}
.form-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-note{color:var(--slate);font-size:14px;line-height:1.6;margin-top:12px;}
.form-note a{color:var(--ink);border-bottom:1px solid var(--orange);}
/* Form heading hierarchy (Marto: the 11px mono labels read too quiet as form
   structure). Two levels: .form-prompt is the one primary question on the page,
   .form-sec marks each section with the site's ink top-rule vocabulary. */
.form-prompt{font-family:var(--disp);font-weight:600;font-size:clamp(23px,2.4vw,27px);letter-spacing:-.01em;
  line-height:1.15;color:var(--ink);margin:0 0 26px;}
.form-sec{font-family:var(--disp);font-weight:600;font-size:18px;line-height:1.2;color:var(--ink);
  border-top:1px solid var(--ink);padding-top:16px;margin:0 0 22px;}
.form-field label .opt{color:var(--gray-mid);font-weight:400;}

/* RFQ multi-line part rows (quote, crisis) */
.rfq-head,.rfq-row{display:grid;grid-template-columns:1fr 1fr 130px 44px;gap:12px;align-items:center;}
.rfq-head{margin-bottom:6px;}
.rfq-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-mid);}
.rfq-row{margin-bottom:10px;}
.rfq-row input{width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:15px;font-family:var(--sans);transition:border-color .15s;}
.rfq-row input:focus{outline:none;border-color:var(--ink);}
.rfq-row input::placeholder{color:var(--gray-mid);}
.rfq-remove{border:1px solid var(--line);background:#fff;color:var(--gray-mid);cursor:pointer;
  height:100%;min-height:48px;font-size:18px;transition:color .15s,border-color .15s;}
.rfq-remove:hover{color:var(--orange);border-color:var(--orange);}
.rfq-add{margin-top:6px;background:none;border:none;color:var(--ink);cursor:pointer;font-size:15px;
  font-weight:500;font-family:var(--sans);border-bottom:1px solid var(--orange);padding:0 0 2px;}
.rfq-divider{border:none;border-top:1px solid var(--line);margin:28px 0;}

/* On-blue form variant (crisis emergency band) */
.band-form .form-field label{color:rgba(255,255,255,.85);}
.band-form input,.band-form select,.band-form textarea{border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);color:#fff;}
.band-form input::placeholder,.band-form textarea::placeholder{color:rgba(255,255,255,.55);}
.band-form input:focus,.band-form select:focus,.band-form textarea:focus{border-color:#fff;background:rgba(255,255,255,.14);}
.band-form select option{color:var(--ink);}
.band-form .rfq-remove{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7);}
.band-form .rfq-add{color:#fff;}
.band-form .rfq-head span{color:rgba(255,255,255,.6);}
.band-form .rfq-divider{border-top-color:rgba(255,255,255,.2);}
.band-form .form-sec{color:#fff;border-top-color:rgba(255,255,255,.7);}
/* White chevron for the blue band. The .band-form background SHORTHANDS above
   (base + :focus) reset background-image/repeat/position, so this must restate
   all three longhands and match the :focus specificity, or the chevron is
   wiped (base) and tiled or lost again on focus. */
.band-form select,.band-form select:focus{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-opacity='.8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;}

/* Direct-line callout (crisis) */
.direct-line{border:1px solid rgba(255,255,255,.25);padding:26px 28px;max-width:440px;background:rgba(255,255,255,.04);}
.direct-line .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-soft);display:block;margin-bottom:8px;}
.direct-line .num{font-family:var(--disp);font-weight:600;font-size:30px;color:#fff;letter-spacing:-.01em;}
.direct-line p{color:rgba(255,255,255,.75);font-size:14.5px;margin:8px 0 0;}

/* ── Info list (contact details, about location) ── */
.info-list{border-top:1px solid var(--line);}
.info-row{padding:20px 0;border-bottom:1px solid var(--line);}
.info-row .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:6px;}
/* 1.35, not 1.6: the two address lines are one address, and at 1.6 they read as
   two unrelated rows. The 20px row padding still separates the groups. */
.info-row .v{font-size:16px;color:var(--ink);line-height:1.35;}
.info-row .v a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .15s;}
.info-row .v a:hover{border-color:var(--orange);}
/* Approaching-holiday note under the Hours row, appended by hc.js only when a
   public holiday falls inside the next 10 days. orange-deep, not orange: the
   flat accent measures 3.4:1 on white and this is 11.5px text. */
.info-row .v .hours-note{display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;line-height:1.5;color:var(--orange-deep);}

/* ── Choice cards (quote path selector - switches the form mode) ── */
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.choice{border:1px solid var(--line);padding:26px 24px 24px;cursor:pointer;display:block;position:relative;
  background:#fff;transition:border-color .15s,background .2s;}
/* the selected state is the card itself: ink fill + orange top bar. The native
   radio stays in the DOM for keyboard and screen readers but never paints
   (Marto: the small check/radio affordance is what he disliked). */
.choice::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:3px;
  background:transparent;transition:background .2s;}
.choice:hover{border-color:var(--ink);}
.choice.active{background:var(--ink);border-color:var(--ink);}
.choice.active::before{background:var(--orange);}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.choice:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px;}
.choice strong{display:block;font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.25;
  color:var(--ink);margin-bottom:8px;transition:color .2s;}
.choice span{display:block;font-size:14px;line-height:1.5;color:var(--slate);transition:color .2s;}
.choice.active strong{color:#fff;}
.choice.active span{color:rgba(255,255,255,.68);}
/* form modes toggled by the choice cards */
[data-quote-mode] [data-mode-panel]{display:none;}
[data-quote-mode="parts"] [data-mode-panel="parts"]{display:block;}
[data-quote-mode="bom"] [data-mode-panel="bom"]{display:block;}
[data-quote-mode="help"] [data-mode-panel="help"]{display:block;}
/* part-number field with a live format-verify tick */
.rfq-mpn{position:relative;display:block;}
.rfq-mpn input{width:100%;}
.rfq-mpn .tick{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  opacity:0;transition:opacity .15s;pointer-events:none;
  background:#2e8b57 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M5 9.5l2.5 2.5 5.5-6' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat;border-radius:50%;}
.rfq-mpn.valid .tick{opacity:1;}
.rfq-mpn.valid input{border-color:#2e8b57;padding-right:40px;}

/* ── Extended brand grid ── */
.brand-ext{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:10px;}
.brand-ext div{background:#fff;padding:30px 16px;text-align:center;font-family:var(--mono);font-size:13px;
  letter-spacing:.04em;color:var(--slate);display:flex;align-items:center;justify-content:center;line-height:1.4;}

/* ── Honest placeholders (team photo, map) ── */
.ph-block{border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 3%, white);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;
  color:var(--gray-mid);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;min-height:280px;}

/* ── Location map ──
   A self-hosted still rather than an iframe, so the page loads no third-party
   frame and sets no third-party cookie. The whole figure is the link out. */
.map-link{display:block;border:1px solid var(--line);overflow:hidden;position:relative;}
.map-link img{width:100%;height:auto;transition:transform .5s var(--ease);}
.map-link:hover img{transform:scale(1.02);}
.map-open{position:absolute;right:20px;bottom:20px;background:var(--paper);
  border:1px solid var(--line);padding:11px 18px;font-family:var(--disp);
  font-weight:600;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:9px;}
.map-link:hover .map-open{background:var(--orange);border-color:var(--orange);color:#fff;}
.map-credit{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--gray-mid);margin-top:10px;text-transform:none;}
.map-credit a{border-bottom:1px solid var(--line);}
@media(prefers-reduced-motion:reduce){.map-link img,.map-link:hover img{transition:none;transform:none;}}

/* ── Quiet note ── */
.policy-note{padding-top:32px;border-top:1px solid var(--line);max-width:56em;}
.policy-note p{font-size:15.5px;color:var(--slate);}
.policy-note strong{color:var(--ink);}

/* ── Footer ── */
.site-footer{background:var(--ink);color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:48px;padding:88px 0;}
.site-footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-mid);margin-bottom:20px;font-weight:500;}
.site-footer a{color:rgba(255,255,255,.75);font-size:14.5px;display:block;margin-bottom:10px;transition:color .15s;}
.site-footer a:hover{color:var(--orange-soft);}
.footer-brand img{height:22px;margin-bottom:18px;}
.footer-brand div{color:var(--gray-mid);line-height:1.8;font-size:14.5px;}
/* The footer nav links are block-level, which pushed the certificate link in the
   brand blurb onto its own line and left the comma after it stranded. Inside the
   blurb the link is part of a sentence, so it stays inline and takes an underline
   instead of a colour change. */
.footer-brand div a{display:inline;margin:0;color:inherit;
  border-bottom:1px solid rgba(255,255,255,.35);}
.footer-brand div a:hover{color:var(--orange-soft);border-bottom-color:var(--orange-soft);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;
  font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.02em;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
/* Every link in the bottom row is inline text in the row's own 11px mono, not the
   block-level column links above it. Scoped to the row so the credit link cannot
   drift out of it the way an element-specific rule lets it. */
.footer-bottom a{display:inline;margin:0;color:rgba(255,255,255,.55);font-size:11px;}
.footer-bottom a:hover{color:var(--orange-soft);}
.footer-legal span{color:rgba(255,255,255,.28);margin:0 8px;}

.hc-status-float{position:fixed;right:22px;bottom:22px;z-index:90;background:var(--ink);
  border:1px solid var(--ink);border-radius:999px;padding:11px 20px;box-shadow:0 8px 28px rgba(11,26,31,.28);
  cursor:pointer;transition:background .15s,border-color .15s;}
.hc-status-float:hover{background:#16323a;border-color:#16323a;}
.hc-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;color:#fff;}
.hc-status::before{content:'';width:8px;height:8px;background:#3fbf6f;flex:none;border-radius:50%;}
/* The dot pulses only while someone is actually there to answer. A halo drawn
   with box-shadow rather than a second element, so the pill stays one node. */
@keyframes hc-pulse{
  0%{box-shadow:0 0 0 0 rgba(63,191,111,.55);}
  70%{box-shadow:0 0 0 7px rgba(63,191,111,0);}
  100%{box-shadow:0 0 0 0 rgba(63,191,111,0);}
}
.hc-status:not(.closed)::before{animation:hc-pulse 2.2s ease-out infinite;}
.hc-status.closed::before{background:var(--orange);animation:none;}
@media (prefers-reduced-motion: reduce){
  .hc-status:not(.closed)::before{animation:none;box-shadow:0 0 0 3px rgba(63,191,111,.28);}
}
/* hover tooltip: working hours + timezone */
.hc-status-tip{position:absolute;right:0;bottom:calc(100% + 10px);width:210px;background:var(--ink);
  color:#fff;padding:12px 14px;font-family:var(--sans);font-size:12.5px;line-height:1.5;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;
  box-shadow:0 12px 32px rgba(11,26,31,.24);}
.hc-status-tip b{color:#fff;display:block;margin-bottom:3px;font-weight:600;}
.hc-status-tip .muted{color:var(--gray-mid);font-family:var(--mono);font-size:11px;letter-spacing:.04em;}
/* Holiday detail line. The extra width is scoped to the states that carry a
   holiday name, so the ordinary tooltip keeps its authored 210px. */
.hc-status-tip .hol{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14);
  color:var(--orange-soft);font-family:var(--mono);font-size:11px;letter-spacing:.04em;}
.hc-status-tip.has-holiday{width:250px;}
.hc-status-float:hover .hc-status-tip{opacity:1;visibility:visible;transform:none;}

/* ── Responsive ── */
@media(max-width:1000px){
  :root{--gutter:32px;}
  .section{padding:96px 0;}
  .statement{padding:110px 0 96px;}
  .statement-grid,.trust-grid,.knw-grid,.split-2{grid-template-columns:1fr;gap:56px;}
  .mkt-grid{grid-template-columns:1fr;gap:56px;padding:110px 0;}
  .stats-grid,.stats-grid.four,.trust-points,.steps,
  .steps-2,.steps-3,.steps-4{grid-template-columns:1fr;gap:40px;}
  .choice-grid,.form-cols{grid-template-columns:1fr;}
  .brand-ext{grid-template-columns:repeat(2,1fr);}
  .svc-row{grid-template-columns:44px 1fr 40px;grid-template-rows:auto auto;gap:8px 20px;padding:28px 0;}
  .svc-icon{grid-row:1;grid-column:1;width:26px;height:26px;}
  .svc-row h3{grid-row:1;grid-column:2;}
  .svc-row p{grid-row:2;grid-column:2;}
  .svc-arrow{grid-row:1;grid-column:3;}
  .mkt-figure{position:static;height:340px;}
  .mkt-cap{position:static;margin-top:12px;}
  .trust-figure:not(.natural) img{min-height:0;aspect-ratio:4/3;}
  .speed-content{padding-top:110px;padding-bottom:110px;}
  .speed-times{gap:32px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .nav-items{display:none;}
  .nav-toggle{display:block;}
  .hero{min-height:72vh;}
  .hero-content{padding-bottom:72px;}
  .hero.hero-plain{min-height:0;}
  .hero.hero-plain .hero-content{padding-top:56px;padding-bottom:38px;}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:36px 22px;max-width:none;}
  .rfq-head{display:none;}
  .rfq-row{grid-template-columns:1fr 1fr;gap:10px;}
  .rfq-row .rfq-remove{grid-column:2;justify-self:end;min-height:44px;width:44px;}
}
@media(max-width:600px){
  :root{--gutter:22px;}
  .section{padding:72px 0;}
  .bleed{height:44vh;}
  .footer-grid{grid-template-columns:1fr;}
  .brand-ext{grid-template-columns:1fr 1fr;}
  .hc-status-float{display:none;}
  .quote-inner{padding-top:72px;padding-bottom:72px;}
  .rfq-row{grid-template-columns:1fr;}
  .rfq-row .rfq-remove{grid-column:1;width:44px;}
}

/* ── FAQ (service + market pages) ── */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:22px;
  padding:26px 0;cursor:pointer;list-style:none;font-family:var(--disp);font-weight:600;
  font-size:19px;color:var(--ink);transition:color .15s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--orange-deep);}
.faq-idx{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--gray-mid);}
.faq-mark{justify-self:end;font-family:var(--mono);font-size:20px;font-weight:400;color:var(--gray-mid);
  transition:transform .2s;}
.faq-item[open] .faq-mark{transform:rotate(45deg);}
.faq-item[open] summary{color:var(--orange-deep);}
.faq-a{padding:0 104px 30px 86px;}
.faq-a p{font-size:16.5px;color:var(--slate);line-height:1.75;max-width:52em;}
@media(max-width:1000px){
  .faq-item summary{grid-template-columns:40px 1fr 28px;gap:12px;font-size:17px;padding:22px 0;}
  .faq-a{padding:0 0 24px 52px;}
}
@media(prefers-reduced-motion:reduce){
  .faq-item summary,.faq-mark{transition:none;}
}

/* ── Cookie consent ────────────────────────────────────────────────────────
   GDPR: analytics stay off until an explicit choice. Accept and Decline are
   deliberately IDENTICAL in size, weight and treatment - "reject must be as
   easy as accept" is the requirement regulators actually enforce, so neither
   button is styled as the nudge. No pre-ticked anything. ── */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--ink);
  border-top:1px solid rgba(255,255,255,.14);transform:translateY(100%);
  transition:transform .4s var(--ease);}
.ck-bar.on{transform:translateY(0);}
.ck-inner{max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter);display:flex;
  align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;}
.ck-text{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78);
  max-width:62ch;}
.ck-text a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.ck-actions{display:flex;gap:12px;flex-shrink:0;}
.ck-btn{font-family:var(--disp);font-weight:600;font-size:14px;padding:12px 28px;cursor:pointer;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
  transition:background .15s,border-color .15s;}
.ck-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75);}
/* Accept is the primary action and reads as one: solid white plate, black text.
   Decline stays a ghost so the two are still visually equal in weight of
   PRESENCE, which consent rules require, but not equal in emphasis. */
.ck-btn[data-ck="accepted"]{background:#fff;color:var(--ink);border-color:#fff;}
.ck-btn[data-ck="accepted"]:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88);}
.ck-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
/* keep the floating status pill clear of the bar while it is up */
body.ck-open .hc-status-float{bottom:calc(var(--ck-h,0px) + 22px);}
@media(max-width:700px){
  .ck-inner{padding:18px 22px;gap:16px;}
  .ck-actions{width:100%;}
  .ck-btn{flex:1;padding:13px 16px;}
}
@media(prefers-reduced-motion:reduce){
  .ck-bar{transition:none;}
}

/* Market sections (industries hub): each of the six markets as its own
   image + content band, alternating sides. Replaces the hover-swap list. */
.market-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:center;}
.market-grid>*{min-width:0;}
.market-grid.flip{grid-template-columns:1.1fr .9fr;}
.market-grid.flip .market-figure{order:2;}
.market-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;
  outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;}
.market-cap{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-mid);}
.market-body h2{margin-bottom:14px;}
.market-body p{color:var(--slate);max-width:34em;}
.market-body ul{margin:18px 0 0 18px;color:var(--slate);font-size:15px;line-height:1.9;}
@media(max-width:1000px){
  .market-grid,.market-grid.flip{grid-template-columns:1fr;gap:36px;}
  .market-grid.flip .market-figure{order:0;}
}