/* ============================================================
   IMS Brand page  (single-brand.php)
   v1.1

   Deliberately written as one pass with no overrides. Tokens are
   scoped to .ims-brand so nothing here can reach the machine pages
   or the rest of the site.
   ============================================================ */

.ims-brand{
	--navy:#0d1b2a;
	--red:#cc0000;
	--accent:var(--red);
	--accent-dk:#a30000;
	--accent-ink:var(--red);
	--ink:#1f2733;
	--mut:#5a6675;
	--line:#e3e7ec;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	color:var(--ink);
	font-size:16px;
}
/* Per-brand accent. The house accent is IMS red; a manufacturer with a strong
   colour of its own gets it here rather than in the shared rules, so adding a
   brand is one block and every other brand page is untouched. */
.ims-brand--aore{
	--accent:#4d8f8b;
	--accent-dk:#3a7975;
	--accent-ink:#2f7370;
}
/* Titan runs a gold accent against the charcoal mark and the navy machines.
   The logo's arc is orange, but gold was the call — it sits better against
   the navy press brake in the banner and reads less like a warning colour.

   Same contrast problem either way: at 16px on white a mid gold is around
   2.5:1, so it fails for body copy and links. The gold does the decorative
   work and --accent-ink drops to a bronze that stays in the family but
   passes on white.

   Superseded by the Brand colour field, which derives all three from one hex
   and is emitted inline. Kept as the fallback if that field is ever cleared. */
.ims-brand--titan{
	--accent:#c8a032;
	--accent-dk:#a8842a;
	--accent-ink:#7a5f18;
}
.ims-brand img{max-width:100%;height:auto;display:block;}
.ims-b-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
/* White is the default ground so the tinted bands read as a deliberate
   alternation. Without this the section inherits the theme's page grey and
   the whole page becomes grey on slightly different grey. */
.ims-b-band{padding:60px 0;background:#fff;}
.ims-b-band--tint{background:#f5f6f8;}

.ims-b-h{
	font-family:'Montserrat',sans-serif;font-weight:800;
	font-size:30px;line-height:1.2;color:var(--navy);
	margin:0 0 20px;
}
.ims-b-h--center{text-align:center;}
.ims-b-eyebrow--center{text-align:center;margin-bottom:10px;}
.ims-b-sub{
	text-align:center;color:var(--mut);font-size:17px;
	max-width:640px;margin:0 auto 36px;line-height:1.6;
}

/* ---------- hero ----------
   Two modes from one block of markup. Without a banner it is a plain white
   header. With one the photograph becomes the bed: capped height so it can
   never eat the whole first screen, and a gradient from the left so the
   copy stays legible whatever the picture is doing behind it. */
.ims-b-hero{background:#fff;padding:40px 0 52px;position:relative;}
.ims-b-hero-inner{position:relative;z-index:2;max-width:1180px;}

.ims-b-hero--img{
	background:var(--navy);color:#fff;
	padding:0;overflow:hidden;
	min-height:clamp(400px,42vw,540px);
	display:flex;align-items:center;
}
.ims-b-hero--img .ims-b-hero-inner{width:100%;padding-top:56px;padding-bottom:56px;}
.ims-b-hero-media{position:absolute;inset:0;z-index:0;}
.ims-b-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 68%;}
/* Two layers: a flat wash so nothing is ever fully bright, and a left-hand
   gradient that carries the text column specifically. */
.ims-b-hero-media::after{
	content:'';position:absolute;inset:0;
	background:
		linear-gradient(90deg,rgba(9,18,29,.90) 0%,rgba(9,18,29,.72) 42%,rgba(9,18,29,.28) 72%,rgba(9,18,29,.18) 100%),
		rgba(9,18,29,.18);
}

/* On a dark hero the logo is knocked out to white in CSS rather than kept
   as a second white asset in the library. brightness(0) flattens the mark
   to black whatever colour it was; invert(1) then takes it to pure white.
   This only works on a transparent PNG or SVG — a logo saved on a white
   box turns into a white box. */
.ims-b-logo{
	background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 19px;
	display:inline-flex;align-items:center;justify-content:center;
	margin:0 0 20px;max-width:260px;
}
.ims-b-logo img{max-height:50px;width:auto;}
.ims-b-hero--img .ims-b-logo{
	background:none;border:0;border-radius:0;padding:0;
	max-width:250px;margin:0 0 22px;
}
/* No knockout on Titan: its logo is supplied as a white PNG already, and
   brightness(0) invert(1) would flatten the shading and the orange arc into
   one solid white shape, losing the internal detail that gives the mark its
   form. The filter stays the default for brands whose logo is dark. */
.ims-b-hero--img .ims-b-logo img{filter:brightness(0) invert(1);max-height:54px;}
.ims-brand--titan .ims-b-hero--img .ims-b-logo img{filter:none;}
.ims-b-eyebrow{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;
	text-transform:uppercase;letter-spacing:.11em;
	color:var(--accent-ink);margin:0 0 12px;
}
.ims-b-hero--img .ims-b-eyebrow{color:rgba(255,255,255,.88);}
.ims-b-title{
	font-family:'Montserrat',sans-serif;font-weight:800;
	font-size:44px;line-height:1.12;color:var(--navy);margin:0;
	max-width:21ch;
}
.ims-b-hero--img .ims-b-title{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35);}
.ims-b-tagline{
	color:var(--mut);font-size:18px;line-height:1.6;
	max-width:56ch;margin:16px 0 0;
}
.ims-b-hero--img .ims-b-tagline{color:#dbe3ea;}
.ims-b-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
/* compare table — hairline rows, no fills, model links in navy */
.ims-b-compare-scroll{overflow-x:auto;margin-top:28px;}
.ims-b-compare{width:100%;border-collapse:collapse;min-width:640px;font-size:16px;line-height:1.55;}
.ims-b-compare th,.ims-b-compare td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid #e3e7ec;}
.ims-b-compare thead th{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6b7682;border-bottom:2px solid var(--navy);}
.ims-b-compare tbody th{font-family:'Montserrat',sans-serif;font-weight:700;white-space:nowrap;width:16%;}
.ims-b-compare tbody th a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--accent);}
.ims-b-compare tbody th a:hover{color:var(--accent);}
.ims-b-compare td{color:#4a5560;}
.ims-b-compare td:nth-child(2){width:42%;}

/* ===== grouped range cards ===== */
.ims-brand .ims-b-range2{background:#fff;}
/* Straight after the white intro: no second full band of top padding. */
.ims-brand .ims-b-band + .ims-b-range2{padding-top:8px;}
/* Red rule, centred at two-thirds width, marking the start of the range after the intro. */
.ims-b-range2 .ims-b-h::before{content:"";display:block;width:66%;height:2px;background:var(--accent);margin:0 auto 48px;}
.ims-b-range2 .ims-b-h{margin-bottom:8px;}
.ims-b-rgroup{margin-top:48px;}
.ims-b-rgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:44px;margin-top:36px;}
.ims-b-rgroups .ims-b-rgroup{margin-top:0;display:flex;flex-direction:column;}
.ims-b-rgroup--1{grid-column:span 1;}
.ims-b-rgroup--2{grid-column:span 2;}
.ims-b-rgroup--3{grid-column:span 3;}
.ims-b-rgroup--1 .ims-b-rcards{grid-template-columns:1fr;}
.ims-b-rgroup--2 .ims-b-rcards{grid-template-columns:repeat(2,minmax(0,1fr));}
.ims-b-rgroups .ims-b-rcards{flex:1;}
.ims-b-rgroup-h{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #e3e7ec;}
.ims-b-rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.ims-b-rcard{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e7ec;border-radius:6px;text-decoration:none;color:inherit;transition:border-color .2s;}
.ims-b-rcard:hover{border-color:var(--navy);}
.ims-b-rcard-img{display:block;aspect-ratio:4/3;background:#fff;padding:18px;border-bottom:1px solid #eef1f4;}
.ims-b-rcard-img img{width:100%;height:100%;object-fit:contain;display:block;}
.ims-b-rcard-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;}
.ims-b-rcard-model{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;color:var(--navy);line-height:1.25;}
.ims-b-rcard-type{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin-top:4px;}
.ims-b-rcard-desc{font-size:15px;line-height:1.6;color:#4a5560;margin-top:12px;}
.ims-b-rcard-points{display:flex;flex-direction:column;gap:4px;margin-top:12px;}
.ims-b-rcard-points span{position:relative;padding-left:16px;font-size:14.5px;line-height:1.5;color:#1f2733;}
.ims-b-rcard-points span::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.ims-b-rcard-more{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--navy);}
.ims-b-rcard:hover .ims-b-rcard-more{color:var(--accent);}
@media(max-width:1000px){.ims-b-rcards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.ims-b-rcards{grid-template-columns:1fr;}}
@media(max-width:1000px){
	.ims-b-rgroups{grid-template-columns:1fr;}
	.ims-b-rgroup--1,.ims-b-rgroup--2,.ims-b-rgroup--3{grid-column:auto;}
	.ims-b-rgroups .ims-b-rcards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){.ims-b-rgroups .ims-b-rcards{grid-template-columns:1fr;}}

/* ===== one pale grey, compact strip, navy CTA ===== */
.ims-brand .ims-b-band--tint{background:#f5f6f8;}
.ims-b-strip{background:#fff;padding:48px 0;}
.ims-b-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid #e3e7ec;border-bottom:1px solid #e3e7ec;padding-top:32px;padding-bottom:32px;}
.ims-b-strip-h{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:var(--navy);margin:0 0 8px;}
.ims-b-strip-text p{margin:0;font-size:16px;line-height:1.6;color:#4a5560;max-width:760px;}
.ims-b-strip .ims-b-btn{flex-shrink:0;}
@media(max-width:800px){.ims-b-strip-inner{flex-direction:column;align-items:flex-start;gap:20px;}}
.ims-brand .ims-b-cta{background:var(--navy);padding:80px 0;margin:0;}
.ims-brand .ims-b-cta-card{background:transparent;box-shadow:none;border:0;border-left:0;padding:0;border-radius:0;}
.ims-brand .ims-b-cta-card::before,.ims-brand .ims-b-cta-card::after{display:none;}
.ims-brand .ims-b-cta h2{color:#fff;}
.ims-brand .ims-b-cta-text,.ims-brand .ims-b-cta-text p{color:rgba(255,255,255,.82);}
.ims-brand .ims-b-cta-eyebrow{color:rgba(255,255,255,.6);}
.ims-brand .ims-b-cta .ims-b-btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.ims-brand .ims-b-cta .ims-b-btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* ---------- buttons ---------- */
.ims-b-btn{
	display:inline-flex;align-items:center;justify-content:center;
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
	text-transform:uppercase;letter-spacing:.06em;
	padding:14px 26px;border-radius:3px;text-decoration:none;
	min-height:46px;box-sizing:border-box;
	transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ims-b-btn--red{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.ims-b-btn--red:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff;}
/* Ghost is for dark grounds only — the hero. */
.ims-b-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.ims-b-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;}
/* Outline is its light-ground counterpart — the CTA card. */
.ims-b-btn--outline{background:#fff;color:var(--navy);border:1px solid #c5ccd5;}
.ims-b-btn--outline:hover{border-color:var(--navy);background:#f5f6f8;color:var(--navy);}

/* ---------- stats ----------
   A light strip sitting straight under a dark hero, so the two bands read as
   separate things. Figures count up once on scroll (ims-brand.js); the
   min-height stops the row jumping while that runs. */
.ims-b-stats{background:#f5f6f8;border-bottom:1px solid var(--line);padding:28px 0;box-shadow:inset 0 3px 0 var(--accent);}
.ims-b-stats-h{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;
	text-transform:uppercase;letter-spacing:.11em;
	color:var(--mut);margin:0 0 18px;
}
/* Equal columns, not auto. With `auto` each column sized to its own content,
   so one long label stretched its column and squeezed the rest — the dividers
   landed at uneven intervals and the row read as a mistake. 1fr gives four
   equal columns whatever the labels say. */
.ims-b-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
/* Optional image beside the figures.

   Only applies when a Stats image is set — .ims-b-stats-layout is otherwise a
   plain block and the strip behaves exactly as before. The figures drop from
   four across to a 2x2 block, because four columns squeezed into 58% of the
   width puts the labels on three lines each.

   The image is capped rather than stretched: a tall photo would otherwise set
   the height of the whole band and leave the figures floating in it. */
.ims-b-stats--img .ims-b-stats-layout{
	display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
	gap:40px;align-items:center;
}
.ims-b-stats--img .ims-b-stats-grid{grid-template-columns:repeat(2,1fr);row-gap:20px;}
/* Row two needs the divider that :first-child removes from row one. */
.ims-b-stats--img .ims-b-stat:nth-child(odd){border-left:0;padding-left:0;}
.ims-b-stats-media img{width:100%;height:auto;display:block;max-height:260px;object-fit:cover;}
@media(max-width:880px){
	.ims-b-stats--img .ims-b-stats-layout{grid-template-columns:1fr;gap:24px;}
	.ims-b-stats-media{order:-1;}
}
.ims-b-stat{
	display:flex;flex-direction:column;gap:7px;
	padding:4px 26px;border-left:1px solid #d7dce2;
}
.ims-b-stat:first-child{border-left:0;padding-left:0;}
.ims-b-stat-fig{
	font-family:'Montserrat',sans-serif;font-weight:800;font-size:31px;
	color:var(--navy);line-height:1;min-height:31px;
	font-variant-numeric:tabular-nums;
}
.ims-b-stat-fig--long{font-size:22px;line-height:1.15;min-height:0;}
.ims-b-stat-lab{font-size:14px;color:var(--mut);line-height:1.4;max-width:26ch;}

/* ---------- intro ----------
   The copy column is what gets the reading measure, not the wrap. Capping
   .ims-b-wrap itself here is what previously pushed the whole band out past
   the site container. */
.ims-b-intro-copy{max-width:820px;}
.ims-b-intro--split{
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
	gap:48px;align-items:center;
}
.ims-b-intro--split .ims-b-intro-copy{max-width:none;}
.ims-b-intro-media img{width:100%;height:auto;}
.ims-b-intro-text{font-size:17px;line-height:1.7;color:var(--ink);}
.ims-b-intro-text p{margin:0 0 16px;}
.ims-b-origin{
	font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;
	text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:8px 0 0;
}

/* ---------- benefits ---------- */
.ims-b-lede{font-size:17px;line-height:1.65;color:var(--mut);margin:0 0 34px;}
.ims-b-lede--center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;}
.ims-b-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.ims-b-benefit{
	position:relative;overflow:hidden;
	background:#fff;border:1px solid var(--line);border-radius:10px;
	padding:26px 22px;border-top:3px solid var(--accent);
}
/* A ghosted numeral rather than an icon. Four generic icons on four
   different claims say nothing; a number gives the cards depth and an
   order to read them in without pretending to illustrate anything. */
.ims-b-benefit-num{
	position:absolute;top:6px;right:16px;
	font-family:'Montserrat',sans-serif;font-weight:800;font-size:56px;
	line-height:1;color:var(--navy);opacity:.06;pointer-events:none;
}
.ims-b-benefit h3{
	position:relative;
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;
	color:var(--navy);margin:0 0 10px;line-height:1.3;
}
.ims-b-benefit p{margin:0;color:var(--mut);font-size:15px;line-height:1.6;}

/* ---------- range cards ----------
   These are the hand-off to the category pages. The brand page says what a
   manufacturer builds; the category page is where machines get compared.
   The eyebrow is deliberately grey rather than red — red on the eyebrow and
   red again on "See the machines" turns one card into three accents. */
.ims-b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.ims-b-cards--2{grid-template-columns:repeat(2,1fr);max-width:800px;margin:0 auto;}
.ims-b-cards--4{grid-template-columns:repeat(4,1fr);}
.ims-b-card{
	background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
	display:flex;flex-direction:column;text-decoration:none;
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
a.ims-b-card:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(13,27,42,.11);border-color:#c3cbd4;}
.ims-b-card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.ims-b-card-copy{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.ims-b-card-eyebrow{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;
	text-transform:uppercase;letter-spacing:.1em;
	color:#7c8898;margin:0;
}
.ims-b-card-copy h3{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;
	color:var(--navy);margin:0;line-height:1.3;
}
.ims-b-card-copy p{margin:0;color:var(--mut);font-size:15px;line-height:1.6;}
.ims-b-card-more{
	margin-top:auto;font-family:'Montserrat',sans-serif;font-weight:700;
	font-size:13px;letter-spacing:.03em;color:var(--accent-ink);
}

/* ---------- company ---------- */
.ims-b-co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;}
.ims-b-co--noimg{grid-template-columns:1fr;}
.ims-b-co--noimg .ims-b-co-copy{max-width:820px;}
.ims-b-co-media img{width:100%;}
.ims-b-co-text{font-size:16px;line-height:1.7;color:var(--ink);}
.ims-b-co-text p{margin:0 0 15px;}

/* ---------- cta ----------
   An offset white card on a light band rather than another full-width navy
   block — the hero is already dark, and a third dark band at the bottom
   makes the page read as three stripes. */
.ims-b-cta{background:#eceff2;padding:60px 0;}
.ims-b-cta-card{
	background:#fff;border-left:6px solid var(--accent);
	box-shadow:0 10px 30px rgba(13,27,42,.09);
	padding:38px 42px;
	display:grid;grid-template-columns:minmax(0,1fr) auto;
	gap:38px;align-items:center;
}
.ims-b-cta-eyebrow{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;
	text-transform:uppercase;letter-spacing:.11em;
	color:var(--accent-ink);margin:0 0 10px;
}
.ims-b-cta h2{
	font-family:'Montserrat',sans-serif;font-weight:800;font-size:29px;
	color:var(--navy);margin:0;line-height:1.2;
}
.ims-b-cta-text{color:var(--mut);font-size:16.5px;line-height:1.65;margin:12px 0 0;max-width:60ch;}
.ims-b-cta-text p{margin:0 0 10px;}
.ims-b-cta-text p:last-child{margin-bottom:0;}
.ims-b-cta-actions{display:flex;flex-direction:column;gap:12px;min-width:210px;}

/* ---------- brands index grid ([ims_brand_grid]) ----------
   Lives with the brand page CSS because it is the same family of cards, but
   scoped to .ims-bg so it carries its own tokens and never depends on being
   inside .ims-brand. Cards with no image fall back to a taller logo plate
   rather than a blank frame, so a half-filled index still reads as finished. */
.ims-bg{
	--bg-navy:#0d1b2a;
	--bg-mut:#5a6675;
	--bg-line:#e3e7ec;
	display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
	max-width:1180px;margin:0 auto 8px;
}
.ims-bg--4{grid-template-columns:repeat(4,1fr);}
.ims-bg-card{
	display:flex;flex-direction:column;text-decoration:none;
	background:#fff;border:1px solid var(--bg-line);border-radius:10px;overflow:hidden;
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ims-bg-card:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(13,27,42,.11);border-color:#c3cbd4;}
/* Fixed ratio rather than a fixed pixel height, so every card's image frame is
   identical whatever the source photo is. Brand images arrive at whatever
   ratio the supplier sent — a 4:3 machine shot next to a 16:9 factory panorama
   — and cover crops both to the same frame. The ratio also scales with the
   column, so the cards stay proportional at every breakpoint instead of
   getting squat on a narrow screen. */
.ims-bg-media{display:block;aspect-ratio:4/3;overflow:hidden;}
.ims-bg-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Logo standing in for a photograph: same frame, contained not cropped, on a
   light plate so the card still has a top block and the row stays level.
   A fixed height rather than an aspect ratio, so the row can never be thrown
   out by a logo with unusual proportions. */
.ims-bg-media--logo{
	display:flex;align-items:center;justify-content:center;
	background:#f5f6f8;border-bottom:1px solid var(--bg-line);
	padding:26px;box-sizing:border-box;
}
.ims-bg-media--logo img{
	width:auto;height:auto;
	max-width:76%;max-height:100%;object-fit:contain;
}
.ims-bg-copy{display:flex;flex-direction:column;gap:9px;padding:22px;flex:1;}
.ims-bg-logo{display:flex;align-items:center;min-height:44px;}
.ims-bg-logo img{max-height:44px;width:auto;max-width:170px;object-fit:contain;}
.ims-bg-name{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;
	color:var(--bg-navy);line-height:1.3;
}
.ims-bg-line{color:var(--bg-mut);font-size:15px;line-height:1.6;}
/* Machines belonging to this brand.

   Tighter than the range cards above: these are individual machines, so there
   can be twenty of them and the grid has to stay scannable rather than being
   twenty full-width panels. Auto-fill means a brand with three machines and a
   brand with nineteen both look deliberate without a column count being set. */
.ims-b-machines{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:20px;margin-top:28px;
}
.ims-b-machine{
	display:flex;flex-direction:column;
	background:#fff;border:1px solid var(--line);border-radius:4px;
	overflow:hidden;text-decoration:none;
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.ims-b-machine:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(13,27,42,.11);border-color:#c3cbd4;}
.ims-b-machine-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#f2f4f6;}
.ims-b-machine-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ims-b-machine-copy{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;}
.ims-b-machine-name{
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;
	color:var(--navy);line-height:1.35;
}
.ims-b-machine-sub{color:var(--mut);font-size:13px;line-height:1.5;}

.ims-bg-more{
	margin-top:auto;padding-top:4px;
	font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
	/* Was hardcoded to #2f7370 — AORE's teal — so every card in the grid wore
	   one brand's colour. Each card now carries its own accent inline from the
	   Brand colour field, with IMS red as the fallback for a brand that has
	   not been given one. --accent-ink rather than --accent because this is
	   text on white and the raw brand colour often fails contrast. */
	letter-spacing:.03em;color:var(--accent-ink,#a30000);
}
@media(max-width:1000px){
	.ims-bg,.ims-bg--4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
	.ims-bg,.ims-bg--4{grid-template-columns:1fr;}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
	.ims-b-title{font-size:36px;}
	.ims-b-benefits{grid-template-columns:repeat(2,1fr);}
	.ims-b-cards,.ims-b-cards--2,.ims-b-cards--4{grid-template-columns:repeat(2,1fr);}
	.ims-b-co,.ims-b-intro--split{grid-template-columns:1fr;gap:28px;}
	.ims-b-cta-card{grid-template-columns:1fr;gap:26px;padding:32px 30px;}
	.ims-b-cta-actions{flex-direction:row;flex-wrap:wrap;min-width:0;}
}
/* Four figures stop fitting on one line well before the phone breakpoint —
   "200,000 m²" wraps at around 900px and drags the row out of alignment.
   The divider only ever sits between two columns, never at the start of a
   row, which is what a rule on the first item of each row would look like. */
@media(max-width:880px){
	.ims-b-stats-grid{grid-template-columns:repeat(2,1fr);row-gap:22px;}
	.ims-b-stat:nth-child(odd){border-left:0;padding-left:0;}
}
@media(max-width:760px){
	.ims-b-band{padding:44px 0;}
	.ims-b-hero{padding:30px 0 42px;}
	.ims-b-hero--img{min-height:0;padding:0;}
	.ims-b-hero--img .ims-b-hero-inner{padding-top:44px;padding-bottom:46px;}
	.ims-b-title{font-size:30px;max-width:none;}
	.ims-b-tagline{font-size:16px;}
	.ims-b-h{font-size:24px;}
	.ims-b-benefit-num{font-size:44px;}
	.ims-b-stat{padding:4px 16px;}
	.ims-b-stat-fig{font-size:26px;min-height:26px;}
	.ims-b-cta h2{font-size:24px;}
}
@media(max-width:520px){
	.ims-b-benefits{grid-template-columns:1fr;}
	.ims-b-cards,.ims-b-cards--2,.ims-b-cards--4{grid-template-columns:1fr;}
	.ims-b-hero-cta{gap:10px;}
	.ims-b-hero-cta .ims-b-btn{flex:1 1 100%;}
	.ims-b-cta-actions .ims-b-btn{flex:1 1 100%;}
	.ims-b-cta-card{padding:28px 22px;}
}