/* =========================================================
   IBIA — build stylesheet

   The design layer for this build. fw-overrides.css carries
   the tokens and the framework's own defaults; this file
   carries IBIA's design, built from
   documents/ibia-design-handover.md.

   No literal hex in here. Every value reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   Buttons — spec section 7.

   The Figma set (Buttons, 3:63) has 16 variants. They are
   TWO colours x TWO resting states, and hover inverts fill
   and outline. So this is four style variations, not
   sixteen classes.

   These style core/button, because the framework ships no
   button block of its own and core/buttons + core/button are
   on the inserter whitelist.

   Note `wp-block-library` is dequeued theme-wide, so there
   is no core button CSS underneath this — the base rule
   below is the whole button, not an override.
   --------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: var(--fw-font);
	font-size: var(--fw-body-size);
	line-height: var(--fw-body-line);
	font-weight: var(--fw-weight-medium);
	text-align: center;
	text-decoration: none;
	padding: var(--fw-btn-pad-y) var(--fw-btn-pad-x);
	border: var(--fw-btn-border) solid transparent;
	border-radius: var(--fw-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Navy, solid. Hover inverts to the outline of the same colour. */
.wp-block-button.is-style-ibia-navy > .wp-block-button__link {
	background-color: var(--fw-navy);
	border-color: var(--fw-navy);
	color: var(--fw-white);
}

.wp-block-button.is-style-ibia-navy > .wp-block-button__link:hover,
.wp-block-button.is-style-ibia-navy > .wp-block-button__link:focus-visible {
	background-color: var(--fw-white);
	border-color: var(--fw-navy);
	color: var(--fw-navy);
}

/* Navy, outline. Hover fills. */
.wp-block-button.is-style-ibia-navy-outline > .wp-block-button__link {
	background-color: var(--fw-white);
	border-color: var(--fw-navy);
	color: var(--fw-navy);
}

.wp-block-button.is-style-ibia-navy-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-ibia-navy-outline > .wp-block-button__link:focus-visible {
	background-color: var(--fw-navy);
	border-color: var(--fw-navy);
	color: var(--fw-white);
}

/* Green, solid. Text stays navy in both states. */
.wp-block-button.is-style-ibia-green > .wp-block-button__link {
	background-color: var(--fw-green);
	border-color: var(--fw-green);
	color: var(--fw-navy);
}

.wp-block-button.is-style-ibia-green > .wp-block-button__link:hover,
.wp-block-button.is-style-ibia-green > .wp-block-button__link:focus-visible {
	background-color: var(--fw-white);
	border-color: var(--fw-green);
	color: var(--fw-navy);
}

/* Green, outline. Hover fills. */
.wp-block-button.is-style-ibia-green-outline > .wp-block-button__link {
	background-color: var(--fw-white);
	border-color: var(--fw-green);
	color: var(--fw-navy);
}

.wp-block-button.is-style-ibia-green-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-ibia-green-outline > .wp-block-button__link:focus-visible {
	background-color: var(--fw-green);
	border-color: var(--fw-green);
	color: var(--fw-navy);
}

/* ---------------------------------------------------------
   Sizes.

   Standard is 14/20 and is the default above. Two others
   exist in the design and are opt-in classes rather than
   style variations, because they are placement decisions
   rather than a different kind of button.
   --------------------------------------------------------- */

/* Compact — header and member area only. */
.wp-block-button.is-compact > .wp-block-button__link {
	padding: var(--fw-btn-pad-y-compact) var(--fw-btn-pad-x-compact);
}

/* Hero — the two buttons under the homepage H1 run 40px of
   horizontal padding rather than the standard 20px. Measured
   off the hero instances, not the component defaults. */
.wp-block-button.is-hero > .wp-block-button__link {
	padding: var(--fw-btn-pad-y) 40px;
}

/* ---------------------------------------------------------
   Focus and disabled — spec section 12.

   :focus-visible only, so a mouse never shows the ring and a
   keyboard always does. Navy fills take the light-green ring,
   because navy on navy is invisible.
   --------------------------------------------------------- */

.wp-block-button__link:focus-visible {
	outline: var(--fw-focus-width) solid var(--fw-focus-colour);
	outline-offset: var(--fw-focus-offset);
}

.wp-block-button.is-style-ibia-navy > .wp-block-button__link:focus-visible {
	outline-color: var(--fw-focus-colour-on-dark);
}

.wp-block-button__link[aria-disabled="true"],
.wp-block-button__link:disabled {
	opacity: var(--fw-disabled-opacity);
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------------------------------------------------------
   Button groups.

   The design sets buttons 20px apart — the hero pair sit at
   538 and 740 on a 162px button.
   --------------------------------------------------------- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fw-space-md);
}

/* ---------------------------------------------------------
   Bands — spec section 5.

   The newsletter and Join IBIA sections are 1400-wide bands
   carrying the brand accent (4px, 30px top right). In the
   design they sit on a photograph with a navy or black 40%
   overlay; they are built here on flat navy, because a
   photo-plus-overlay band needs a block of its own —
   core/cover is not on the inserter whitelist and core/html
   is banned outright.

   Newsletter is a two-column band: text left, button right,
   as the design places them at x=98 and x=1232.
   --------------------------------------------------------- */

.ibia-band {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--fw-space-xl);
	padding: var(--fw-space-xl) 80px;
	box-shadow: var(--fw-shadow-card);
}

.ibia-band > .wp-block-heading {
	grid-column: 1;
	margin: 0 0 var(--fw-space-xs);
}

.ibia-band > p {
	grid-column: 1;
	margin: 0;
}

.ibia-band > .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* Join IBIA — one centred column, taller band. */
.ibia-band--centred {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	padding-block: var(--fw-space-2xl);
	row-gap: var(--fw-space-lg);
}

.ibia-band--centred > .wp-block-heading,
.ibia-band--centred > .wp-block-buttons {
	grid-column: 1;
	grid-row: auto;
	margin: 0;
}

@media (max-width: 768px) {
	.ibia-band {
		grid-template-columns: 1fr;
		row-gap: var(--fw-space-lg);
		padding-inline: var(--fw-space-xl);
	}

	.ibia-band > .wp-block-buttons {
		grid-column: 1;
		grid-row: auto;
	}
}

/* =========================================================
   Block design layer.

   The framework starter ships every block reading --fw-*
   design tokens that default to 0 or none, so an unset build
   renders structurally correct and visually collapsed —
   `max-width: 0` removes an element rather than degrading.
   These are the values for the blocks the homepage uses,
   measured from the Figma page frame (3006:4591).

   Set a token here, not a literal in a block stylesheet.
   ========================================================= */

:root {

	/* Section rhythm — the design's section-to-section gap. */
	--fw-section-py: var(--fw-space-3xl);

	/* --- Buttons inside hero and split -------------------
	   Both blocks set the button's own box from these. Left
	   at 0 they collapse the button to nothing, so they carry
	   the standard button geometry; .is-hero and .is-compact
	   still override the padding. */
	--fw-wp-block-button-link-width:   auto;
	--fw-wp-block-button-link-height:  auto;
	--fw-wp-block-button-link-padding: var(--fw-btn-pad-y) var(--fw-btn-pad-x);
	--fw-wp-block-button-link-gap:     var(--fw-space-md);

	/* --- Hero --------------------------------------------
	   Band is 1440 x 679 under the 96px header. The H1 is
	   680 wide, centred, sitting 208px below the band top;
	   the buttons follow 25px under it. */
	--fw-hero-min-height:                679px;
	--fw-hero-content-max-width:         var(--fw-col-2);
	--fw-hero-content-margin:            0 auto;
	--fw-hero-content-padding:           208px 0 120px;
	--fw-hero-content-padding-left:      0;
	--fw-hero-content-margin-bottom:     0;
	--fw-hero-dot-width:                 10px;
	--fw-hero-dot-height:                10px;
	--fw-hero-dots-gap:                  var(--fw-space-xs);
	--fw-hero-dots-margin-top:           var(--fw-space-xl);

	/* --- Split -------------------------------------------
	   The narrow container: media 680 + 80 gap + text 560
	   = 1320. This is the workhorse layout of the site. */
	--fw-split-inner-max-width:          var(--fw-container-narrow);
	--fw-split-inner-margin:             0 auto;
	--fw-split-inner-gap:                var(--fw-gutter-wide);
	--fw-split-content-margin:           0;
	--fw-split-content-margin-bottom:    0;
	--fw-split-media-padding:            0;

	/* --- Icon cards --------------------------------------
	   Four 320 cards on the 1400 container at a 40 gutter.
	   Cards are 215 tall with a 70px icon disc. The intro
	   block above them is centred on the 680 column. */
	--fw-icons-grid-max-width:           var(--fw-container);
	--fw-icons-grid-margin:              0 auto;
	--fw-icons-intro-max-width:          var(--fw-col-2);
	--fw-icons-intro-margin:             0 auto var(--fw-space-2xl);

	--fw-icon-card-height:               215px;
	--fw-icon-card-padding:              var(--fw-space-lg);
	--fw-icon-card-icon-width:           70px;
	--fw-icon-card-icon-height:          70px;
	--fw-icon-card-body-margin:          var(--fw-space-md) 0 0;
	--fw-icon-card-body-padding-left:    0;
}

/* ---------------------------------------------------------
   Fuel list — the Driving the Energy Transition section.

   Four H4 rows on the 560 text column, each a link, with a
   1px rule under all but the last and a down arrow at the
   right edge. The design annotation says each row gets a
   line of text and a link to a FAQ PDF, so it is built as a
   list of links rather than labels.

   The arrow is a CSS escape rather than a literal glyph, so
   the stylesheet stays ASCII and survives any transport.
   --------------------------------------------------------- */

.entry-content ul.ibia-fuels,
.ibia-fuels,
.entry-content ul.is-style-ibia-fuels,
.is-style-ibia-fuels {
	list-style: none;
	margin: var(--fw-space-xl) 0 0;
	padding-left: 0;
}

.ibia-fuels li,
.is-style-ibia-fuels li {
	margin: 0;
	border-bottom: 1px solid var(--fw-divider);
}

.ibia-fuels li:last-child,
.is-style-ibia-fuels li:last-child {
	border-bottom: 0;
}

.ibia-fuels a,
.is-style-ibia-fuels a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fw-space-md);
	padding: var(--fw-space-sm) 0;
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	color: var(--fw-navy);
	text-decoration: none;
}

.ibia-fuels a::after,
.is-style-ibia-fuels a::after {
	content: "\2193";
	font-size: var(--fw-h4-size);
	line-height: 1;
	color: var(--fw-navy);
	transition: transform 0.15s ease;
}

.ibia-fuels a:hover,
.is-style-ibia-fuels a:hover {
	color: var(--fw-green-dark);
}

.ibia-fuels a:hover::after,
.is-style-ibia-fuels a:hover::after {
	color: var(--fw-green-dark);
	transform: translateY(2px);
}

.ibia-fuels a:focus-visible,
.is-style-ibia-fuels a:focus-visible {
	outline: var(--fw-focus-width) solid var(--fw-focus-colour);
	outline-offset: var(--fw-focus-offset);
}

/* =========================================================
   Block design.

   The starter's block stylesheets are structure only —
   "colour, type, border, shadow and decorative treatment
   were stripped when this became the blank starter". What is
   left is also still LCT-shaped: the hero image is pinned to
   the right at 50% width, and icon-card draws a 2px divider
   on its right edge.

   So this is not token-setting. These rules are IBIA's
   design, measured from the Figma page frame, and where they
   contradict a leftover LCT treatment they override it.
   ========================================================= */

/* ---------------------------------------------------------
   Hero — full-bleed photograph, centred white H1 on the 680
   column, two buttons beneath. The starter pins the image
   right at 50% width, which is LCT's layout, not this one.
   --------------------------------------------------------- */

.fw-hero__img {
	width: 100%;
	left: 0;
	right: auto;
	object-position: center center;
}

/* Legibility wash. The starter leaves this pseudo-element in
   place with no background for exactly this purpose. */
.fw-hero__slide::before {
	background-color: rgba(var(--fw-navy-rgb), 0.35);
}

.fw-hero__content {
	align-items: center;
	text-align: center;
}

.fw-hero__content h1 {
	max-width: var(--fw-col-2);
	margin: 0 auto;
	color: var(--fw-white);
}

.fw-hero__content .wp-block-buttons {
	justify-content: center;
	margin-top: var(--fw-space-md);
}

/* The starter appends an arrow pseudo-element to hero CTAs —
   an LCT treatment. IBIA's hero buttons carry no icon. */
.fw-hero__content .wp-block-button__link::after {
	content: none;
}

/* ---------------------------------------------------------
   Split — media 680, text 560, 80 gap, on the 1320 narrow
   container. All imagery carries the brand accent.
   --------------------------------------------------------- */



.fw-split__content > * + * {
	margin-top: var(--fw-space-lg);
}

.fw-split__content .wp-block-buttons {
	margin-top: var(--fw-space-lg);
}

/* The eyebrow sits 8px above its heading, not on the 30px
   stack gap. */
.fw-split__content p.has-small-font-size + h2 {
	margin-top: var(--fw-space-xs);
}

/* ---------------------------------------------------------
   Icon cards — white card, 1px Light Green border, the brand
   accent, card shadow. The icon sits in a 70px Light Green
   rounded square centred on the card's top edge and
   overlapping it by 35px.
   --------------------------------------------------------- */

.fw-icon-card {
	background-color: var(--fw-white);
	border: 1px solid var(--fw-green);
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
	padding: 55px var(--fw-space-lg) var(--fw-space-lg);
	margin-top: 35px;
	text-align: center;
	overflow: visible;
}

/* Kill the starter's LCT divider — IBIA's cards are discrete
   boxes with a border, not columns separated by a rule. */
.fw-icon-card::after {
	display: none;
}

.fw-icon-card__icon {
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--fw-green);
	border-radius: var(--fw-radius);
}

.fw-icon-card__icon img {
	width: 45.5px;
	height: 45.5px;
}

.fw-icon-card__body :is(h1, h2, h3, h4, h5, h6) {
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	margin: 0 0 var(--fw-space-sm);
}

.fw-icon-card__body p {
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
}

/* The grid needs room for the discs that overhang each card. */
.fw-icons__grid {
	margin-top: 35px;
}

/* ---------------------------------------------------------
   Band photographs.

   The design puts both bands on a photograph behind a flat
   tint — navy 40% on the bulletin band, black 40% on Join
   IBIA. The images live in the theme rather than the media
   library because they are design furniture, not content an
   editor picks.

   The tint is a gradient layer over the image in the same
   background shorthand, so no extra element is needed.
   --------------------------------------------------------- */

.ibia-band {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* The design does not just cover these bands with the photo — it crops them.
   From the frames: the bulletin image is scaled to 586.15% of the band height
   and offset -125.08%; Join IBIA is 247.89% at -51.31%. Reproduce those rather
   than letting background-size: cover pick its own crop. */
.ibia-band--bulletin {
	/* The band face taken straight from the node render (3006:4726), trimmed
	   of its 12px shadow margin. The navy tint is already baked in, so no
	   gradient layer and no crop maths — it maps 1:1 onto the 1400x150 band. */
	background-image: url("../img/band-bulletin-20260821.jpg");
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
}

/* Band face straight from the node render (3006:4864), which is already
   1400x318 with its tint baked in — no overlay of ours, no crop maths. */
.ibia-band--join {
	background-image: url("../img/band-join-20260821.jpg");
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
}

/* ---------------------------------------------------------
   Section rhythm.

   The design runs 80px between sections. The framework adds
   its own padding to every block, so a split followed by a
   split was stacking 160px plus block margins.
   --------------------------------------------------------- */

.entry-content > .wp-block-framework-split {
	padding-block: var(--fw-space-xl);
}

.entry-content > .ibia-band {
	margin-block: var(--fw-space-xl);
}

/* The icon-cards block brings its own section padding; the
   band above it does not need to add another 80. */
.entry-content > .wp-block-framework-icon-cards {
	padding-block: var(--fw-space-md);
}

/* ---------------------------------------------------------
   Latest News — spec section 11 of the homepage design.

   Cards are 320 wide on the 1400 container at a 40 gutter,
   with a 137px image band, the date in small print and the
   title at H4. The block hardcodes its own "Latest News"
   heading, so the page supplies only the eyebrow above it.

   None of the posts have featured images yet, so the image
   band collapses rather than leaving a grey hole.
   --------------------------------------------------------- */

:root {
	--fw-news-inner-max-width:      var(--fw-container);
	--fw-news-inner-margin:         0 auto;
	--fw-news-heading-margin:       0 0 var(--fw-space-xl);
	--fw-news-track-gap:            var(--fw-gutter);
	--fw-news-card-meta-gap:        var(--fw-space-sm);
	--fw-news-card-meta-margin-top: var(--fw-space-sm);
	--fw-news-card-head-gap:        var(--fw-space-sm);
	--fw-news-card-head-margin-top: var(--fw-space-xs);
	--fw-news-controls-gap:         var(--fw-space-sm);
	--fw-news-controls-margin:      var(--fw-space-xl) auto 0;
	--fw-news-controls-max-width:   var(--fw-container);
	--fw-news-nav-btn-width:        44px;
	--fw-news-nav-btn-height:       44px;
	--fw-news-arrow-btn-width:      22px;
	--fw-news-arrow-btn-height:     22px;
	--fw-news-dot-width:            10px;
	--fw-news-dot-height:           10px;
	--fw-news-dots-gap:             var(--fw-space-xs);
}

.fw-news-card {
	background-color: var(--fw-white);
	border: 1px solid var(--fw-green);
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
	padding: var(--fw-space-md);
	box-sizing: border-box;
}

/* No featured image yet — collapse the band rather than
   leaving an empty well. */
.fw-news-card__image:not(:has(img)) {
	display: none;
}

.fw-news-card__image-link:not(:has(img)) {
	display: none;
}

/* The design left-aligns the section heading under its eyebrow. */
.fw-news__heading {
	text-align: left;
}

.fw-news-card__image img {
	width: 100%;
	height: 137px;
	object-fit: cover;
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
}

.fw-news-card__date {
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
	color: var(--fw-navy);
}

/* The design's category chip. */
.fw-news-card__badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	color: var(--fw-navy);
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
}

.fw-news-card__title {
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	margin: 0;
}

.fw-news-card__title a {
	color: var(--fw-navy);
	text-decoration: none;
}

.fw-news-card__title a:hover {
	color: var(--fw-green-dark);
}

.fw-news__heading {
	font-size: var(--fw-h2-size);
	font-weight: var(--fw-h2-weight);
	line-height: var(--fw-h2-line);
	color: var(--fw-navy);
}

.fw-news__nav-btn {
	background: none;
	border: 1px solid var(--fw-navy);
	border-radius: var(--fw-radius);
	color: var(--fw-navy);
	cursor: pointer;
}

/* The eyebrow the page adds above the block's own heading. */
.ibia-news > p.has-small-font-size {
	max-width: var(--fw-container);
	margin: 0 auto;
}

/* =========================================================
   Header — Figma Navigation set (178:69, Default).
   ========================================================= */

.fw-header {
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-header);
	position: relative;
	z-index: 10;
}

.fw-header__inner {
	max-width: var(--fw-page);
	margin: 0 auto;
	min-height: var(--fw-header-height);
	padding: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	align-items: start;
	column-gap: var(--fw-space-xl);
}

.fw-logo { grid-row: 1 / span 2; }

/* fw-chrome.css sets .fw-logo img { width: auto } at (0,1,1). This SVG
   carries only a viewBox, so width:auto + height:auto leaves it with no
   intrinsic size to resolve against. Match the specificity and give it one. */
.fw-header .fw-logo img { display: block; width: 148px; height: auto; }

/* Nav sits on the lower line, right-aligned, as the design has it. */
.fw-header__nav { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; }

.fw-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }

.fw-nav {
	display: flex;
	align-items: center;
	gap: var(--fw-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fw-nav > li { margin: 0; }

.fw-nav a {
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-regular);
	line-height: var(--fw-body-line);
	color: var(--fw-nav-colour);
	text-decoration: none;
	white-space: nowrap;
}

.fw-nav a:hover { color: var(--fw-nav-colour-hover); }

.fw-nav a:focus-visible {
	outline: var(--fw-focus-width) solid var(--fw-focus-colour);
	outline-offset: var(--fw-focus-offset);
}

/* Caret on items that have a dropdown. */
.fw-nav > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: var(--fw-nav-caret-gap);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: var(--fw-nav-caret-h) solid currentColor;
	vertical-align: middle;
}

/* Log In — the compact green-outline button from the button set. */
.fw-header__login {
	display: inline-flex;
	align-items: center;
	padding: var(--fw-btn-pad-y-compact) var(--fw-btn-pad-x-compact);
	border: var(--fw-btn-border) solid var(--fw-green);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: var(--fw-body-line);
	text-decoration: none;
}

.fw-header__login:hover {
	background-color: var(--fw-green);
	color: var(--fw-navy);
}

/* The framework's burger is for the off-canvas drawer; the design has no
   burger above the nav breakpoint. */
.fw-menu-btn { display: none; }

@media (max-width: 1100px) {
	.fw-header__nav { display: none; }
	.fw-menu-btn { display: inline-flex; grid-column: 3; grid-row: 1; }
	.fw-header__actions { display: none; }
}

/* =========================================================
   Footer — Figma Footer component (662:1291).
   ========================================================= */

.ibia-footer {
	background-color: var(--fw-white);
	color: var(--fw-navy);
	border-top: 1px solid var(--fw-divider);
	margin-top: var(--fw-space-3xl);
}

.ibia-footer__inner {
	max-width: var(--fw-container);
	margin: 0 auto;
	padding: var(--fw-space-xl) 0;
	display: grid;
	grid-template-columns: 340px 1fr 1fr 200px;
	gap: var(--fw-space-xl);
	box-sizing: border-box;
}

/* The three 1px rules between columns, 239px tall in the design. */
.ibia-footer__col + .ibia-footer__col {
	border-left: 1px solid var(--fw-divider);
	padding-left: var(--fw-space-xl);
}

.ibia-footer,
.ibia-footer p,
.ibia-footer a,
.ibia-footer li {
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
}

.ibia-footer a { color: var(--fw-navy); text-decoration: none; }
.ibia-footer a:hover { color: var(--fw-green-dark); text-decoration: underline; }

.ibia-footer__heading {
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: var(--fw-small-line);
	margin: 0 0 var(--fw-space-sm);
	color: var(--fw-navy);
}

.ibia-footer__logo { display: block; width: 148px; height: auto; margin-bottom: var(--fw-space-md); }

.ibia-footer__contact,
.ibia-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibia-footer__contact li {
	display: flex;
	gap: var(--fw-space-xs);
	margin-bottom: var(--fw-space-sm);
}

.ibia-footer__social {
	display: flex;
	gap: var(--fw-icon-social-gap);
	margin-top: var(--fw-space-xs);
}

.ibia-footer__social a { font-size: var(--fw-icon-social); color: var(--fw-navy); }
.ibia-footer__social a:hover { color: var(--fw-green-dark); }

/* Bulletin form. Fields are the PP 48px rule, not the design's 29px boxes. */
.ibia-bulletin__row { display: flex; gap: var(--fw-space-md); }
.ibia-bulletin__field { flex: 1; margin: 0 0 var(--fw-space-sm); }

.ibia-bulletin label { display: block; margin-bottom: 4px; }

.ibia-bulletin input[type="text"],
.ibia-bulletin input[type="email"] {
	width: 100%;
	height: var(--fw-input-height);
	padding: var(--fw-input-pad-y) var(--fw-input-pad-x);
	border: var(--fw-input-border) solid var(--fw-input-border-colour);
	border-radius: var(--fw-input-radius);
	box-sizing: border-box;
	font-family: var(--fw-font);
	font-size: var(--fw-body-size);
	color: var(--fw-navy);
}

.ibia-bulletin input:focus-visible {
	outline: var(--fw-focus-width) solid var(--fw-focus-colour);
	outline-offset: var(--fw-focus-offset);
}

.ibia-bulletin__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--fw-space-xs);
	margin: 0 0 var(--fw-space-sm);
}

.ibia-bulletin__consent label { margin: 0; }

.ibia-bulletin__submit,
.ibia-footer__contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fw-btn-pad-y) var(--fw-btn-pad-x);
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	cursor: pointer;
	text-decoration: none;
}

.ibia-footer__join {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fw-btn-pad-y) var(--fw-btn-pad-x);
	border: var(--fw-btn-border) solid var(--fw-green);
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	color: var(--fw-navy);
	font-weight: var(--fw-weight-medium);
	text-decoration: none;
	margin-bottom: var(--fw-space-sm);
}

.ibia-footer__col--actions { display: flex; flex-direction: column; align-items: flex-start; }
.ibia-footer__contact-btn { margin-bottom: var(--fw-space-lg); }

.ibia-footer__legal {
	max-width: var(--fw-container);
	margin: 0 auto;
	padding: var(--fw-space-md) 0;
	border-top: 1px solid var(--fw-divider);
	text-align: center;
}

.ibia-footer__legal p { margin: 0; }

@media (max-width: 1100px) {
	.ibia-footer__inner { grid-template-columns: 1fr 1fr; }
	.ibia-footer__col + .ibia-footer__col { border-left: 0; padding-left: 0; }
}

@media (max-width: 768px) {
	.ibia-footer__inner { grid-template-columns: 1fr; }
}

/* The generic footer link colour is (0,1,1) and was beating the button rules
   at (0,1,0) — "Contact Us" came out navy-on-navy. Match the specificity. */
.ibia-footer a.ibia-footer__join,
.ibia-footer a.ibia-footer__contact-btn,
.ibia-footer button.ibia-bulletin__submit {
	font-size: var(--fw-body-size);
	line-height: var(--fw-body-line);
	font-weight: var(--fw-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.ibia-footer a.ibia-footer__join {
	color: var(--fw-navy);
	background-color: var(--fw-green);
}

.ibia-footer a.ibia-footer__contact-btn {
	color: var(--fw-white);
	background-color: var(--fw-navy);
}

.ibia-footer a.ibia-footer__join:hover {
	background-color: var(--fw-white);
	color: var(--fw-navy);
	text-decoration: none;
}

.ibia-footer a.ibia-footer__contact-btn:hover {
	background-color: var(--fw-white);
	color: var(--fw-navy);
	text-decoration: none;
}

/* ---------------------------------------------------------
   Latest News — featured + four.

   The design (Frame 34, 3006:4609) puts a 680-wide featured
   article on the left running the full height, with four 320
   cards in a 2x2 block beside it, 40px gutters.

   The block's own carousel script is dequeued in
   inc/blocks/ibia-design.php so these rules are not fighting
   inline styles.
   --------------------------------------------------------- */

.fw-news__viewport { overflow: visible; }

.fw-news__track {
	display: grid;
	grid-template-columns: var(--fw-col-2) var(--fw-col-4) var(--fw-col-4);
	grid-auto-rows: minmax(0, auto);
	gap: var(--fw-gutter);
	transform: none !important;
}

.fw-news__track > .fw-news-card {
	flex: none !important;
	max-width: none !important;
}

/* First article is the feature: full height of the left column. */
.fw-news__track > .fw-news-card:first-child {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.fw-news__track > .fw-news-card:first-child .fw-news-card__title {
	font-size: var(--fw-h2-size);
	line-height: var(--fw-h2-line);
}

/* The carousel controls have nothing to control once it is a grid. */
.fw-news__controls { display: none; }

/* ---------------------------------------------------------
   Events.

   Featured event on the 680 column with the smaller cards
   beside it, matching the news block above.
   --------------------------------------------------------- */

.ibia-events__intro,
.is-style-ibia-section-head > .wp-block-group:first-child {
	max-width: var(--fw-container);
	margin: 0 auto var(--fw-space-xl);
}

.ibia-events .fw-content-cards__grid,
.ibia-events .fw-content-cards {
	max-width: var(--fw-container);
	margin: 0 auto;
}

.ibia-events .fw-content-card {
	background-color: var(--fw-white);
	border: 1px solid var(--fw-green);
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
	padding: var(--fw-space-lg);
	box-sizing: border-box;
}

.ibia-events .fw-content-card h3 {
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	margin: 0 0 var(--fw-space-sm);
}

.ibia-events .fw-content-card p { margin: 0 0 var(--fw-space-sm); }

.ibia-events__meta {
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
}

/* Featured card sizes to its content rather than stretching down the whole
   column — with no featured image or standfirst rendered by the block, a
   stretched card is mostly empty space. */
.fw-news__track > .fw-news-card:first-child {
	align-self: start;
}

/* The block's heading carries its own margin; the eyebrow above it sits on
   the same 1400 rail as the cards. */
.ibia-news > p.has-small-font-size {
	margin-bottom: 0;
}

.fw-news__heading {
	margin-top: 0;
}

.ibia-news { margin-block: var(--fw-space-3xl); }

/* Content cards — the block's inner max-width defaults to 0, which collapses
   the whole flex row. */
:root {
	--fw-content-cards-inner-max-width:   var(--fw-container);
	--fw-content-cards-inner-margin:      0 auto;
	--fw-content-cards-inner-gap:         var(--fw-gutter);
	--fw-content-cards-padding:           0;
	--fw-content-cards-title-max-width:   var(--fw-col-2);
	--fw-content-cards-title-margin:      0 auto var(--fw-space-lg);
	--fw-content-cards-caption-max-width: var(--fw-container);
	--fw-content-cards-caption-margin:    var(--fw-space-lg) auto 0;
}

/* Events: featured event on the 680 column, the rest at 320, matching the
   news block above it. */
.ibia-events .fw-content-card {
	flex: 0 0 var(--fw-col-4);
}

.ibia-events .fw-content-card:first-child {
	flex: 0 0 var(--fw-col-2);
}

/* ---------------------------------------------------------
   Member logo slider — two rows, as the design has it.
   --------------------------------------------------------- */
:root {
	/* The block caps logo width with max-width: var(--fw-ls-max-width, 0),
	   so an unset token hides every logo. */
	--fw-ls-max-width:          200px;
	--fw-ls-set-gap:            var(--fw-gutter);
	--fw-ls-set-padding-right:  var(--fw-gutter);
	--fw-ls-row-margin-top:     var(--fw-space-xl);
	--fw-ls-padding:            var(--fw-space-3xl) 0;
}

.fw-ls { --fw-ls-h: 80px; }

.fw-ls img { object-fit: contain; }

/* The featured card has no standfirst to fill it (the block renders title,
   date and badge only), so stop its content being spread down the card. */
.fw-news__track > .fw-news-card:first-child {
	justify-content: flex-start;
	height: auto;
}

.fw-news__track > .fw-news-card:first-child .fw-news-card__image img {
	height: 290px;
}

/* =========================================================
   Corrections against the design, 2026-08-20.
   ========================================================= */

/* --- Buttons were too tall -------------------------------
   The design's standard button is 197 x 39. Figma trims the
   text box to cap height, so 14px padding either side of a
   28px line box does NOT give 39 — it gives 56. Set the box
   height and centre the label instead. */
.wp-block-button__link {
	height: 39px;
	padding: 0 var(--fw-btn-pad-x);
	line-height: 1;
}

.wp-block-button.is-hero > .wp-block-button__link { padding: 0 40px; }
.wp-block-button.is-compact > .wp-block-button__link { height: 27px; padding: 0 var(--fw-btn-pad-x-compact); }

.fw-header__login,
.ibia-footer a.ibia-footer__join,
.ibia-footer a.ibia-footer__contact-btn,
.ibia-footer button.ibia-bulletin__submit {
	height: 39px;
	padding: 0 var(--fw-btn-pad-x);
	line-height: 1;
}

.fw-header__login { height: 27px; padding: 0 var(--fw-btn-pad-x-compact); }

/* --- Latest News -----------------------------------------
   Design: no border, image flush to the card's top edge,
   then date, title, and the green category chip LAST. */
.fw-news-card {
	border: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.fw-news-card__image-link { margin: 0; }

.fw-news-card__image img {
	border-radius: 0;
	width: 100%;
	display: block;
}

/* Let the badge and date escape their wrapper so the chip can
   be ordered to the bottom of the card. */
.fw-news-card__meta { display: contents; }

.fw-news-card__date { order: 2; padding: var(--fw-space-md) var(--fw-space-md) 0; }
.fw-news-card__head { order: 3; padding: var(--fw-space-xs) var(--fw-space-md) 0; }

.fw-news-card__badge {
	order: 99;
	align-self: flex-start;
	margin: var(--fw-space-md);
}

/* --- Membership: grey band, gaps between cards ----------- */
.wp-block-framework-icon-cards {
	background-color: var(--fw-bg-grey);
	padding-block: var(--fw-space-3xl);
}

.fw-icons__grid { gap: var(--fw-gutter); }

/* --- Bulletin band had a border-like edge ---------------- */
.ibia-band { box-shadow: none; }

/* --- World Bunkering: grey band behind it ---------------- */
.ibia-wb { background-color: var(--fw-bg-grey); padding-block: var(--fw-space-3xl); }

/* --- Member association logo rows have titles ------------ */
.ibia-logos__title,
.is-style-ibia-logos > h2, .is-style-ibia-logos-corporate > h2 {
	text-align: center;
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	color: var(--fw-navy);
	margin: 0 0 var(--fw-space-md);
}

/* Cards must not distribute their children down the card — the grid row is
   taller than the content. */
.fw-news-card {
	justify-content: flex-start;
	align-content: flex-start;
}

.fw-news-card__badge { margin-top: auto; }

/* View All News sits on the heading line, right-aligned. */
.ibia-news { position: relative; }

.ibia-news__cta {
	position: absolute;
	top: var(--fw-space-xl);
	right: 0;
	margin: 0;
}

/* --- Search gets its spyglass, as the design has it ------ */
.fw-nav li a[href*="search"]::after,
.fw-nav li.ibia-search > a::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: var(--fw-nav-search-gap);
	background-color: currentColor;
	-webkit-mask: var(--ibia-search-icon) center / contain no-repeat;
	mask: var(--ibia-search-icon) center / contain no-repeat;
	vertical-align: middle;
}

:root {
	--ibia-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-1.4-.941a5 5 0 1 1-7.07-7.07 5 5 0 0 1 7.07 7.07z'/%3E%3C/svg%3E");
}

/* --- Energy transition arrows are links and must work ---- */
.ibia-fuels a,
.is-style-ibia-fuels a { cursor: pointer; }

/* --- Hero: white curved bottom and the scroll arrow ------
   The design has a 2162 x 460 ellipse rising into the bottom
   of the hero band, and a 22px chevron centred beneath the
   buttons. */
.fw-hero { position: relative; overflow: hidden; }

/* The hero's own bottom edge curves — the photograph reaches lower in the
   middle and the white rises at the sides. An overlaid white ellipse gives
   the opposite curve, which is what this had at first. */
.fw-hero {
	border-bottom-left-radius: 50% 90px;
	border-bottom-right-radius: 50% 90px;
}

.fw-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 4;
	width: 20px;
	height: 20px;
	border-left: 2px solid var(--fw-navy);
	border-bottom: 2px solid var(--fw-navy);
	rotate: -45deg;
}

/* --- Join IBIA banner button is white with navy text ----- */
.ibia-band--join .wp-block-button__link {
	background-color: var(--fw-navy);
	border-color: var(--fw-navy);
	color: var(--fw-white);
}

.ibia-band--join .wp-block-button__link:hover {
	background-color: var(--fw-navy);
	border-color: var(--fw-white);
	color: var(--fw-white);
}

/* --- Logo rows carry a title in the design --------------- */
.ibia-logos,
.is-style-ibia-logos, .is-style-ibia-logos-corporate { padding-block: var(--fw-space-3xl) 0; }
.ibia-logos .fw-ls,
.is-style-ibia-logos, .is-style-ibia-logos-corporate .fw-ls { padding-top: var(--fw-space-md); }

/* --- Button box, final ----------------------------------
   The design's standard button is 197 x 39 with a 16/28
   label. Earlier attempts fought two things: Figma's
   cap-height trim (14px padding round a 28px line box gives
   56, not 39) and the hero block's own two-class rule
   re-applying its padding. Set min-height so the label can
   never squash the box, and match the hero's specificity. */
.wp-block-button__link,
.fw-hero__content .wp-block-button__link,
.fw-split__content .wp-block-button__link {
	min-height: 39px;
	height: auto;
	padding: 5px var(--fw-btn-pad-x);
	line-height: 28px;
	box-sizing: border-box;
}

.wp-block-button.is-hero > .wp-block-button__link,
.fw-hero__content .wp-block-button.is-hero > .wp-block-button__link {
	padding: 5px 40px;
}

.wp-block-button.is-compact > .wp-block-button__link {
	min-height: 27px;
	padding: 0 var(--fw-btn-pad-x-compact);
}

.fw-header__login {
	min-height: 27px;
	height: auto;
	padding: 0 var(--fw-btn-pad-x-compact);
	line-height: 28px;
}

.ibia-footer a.ibia-footer__join,
.ibia-footer a.ibia-footer__contact-btn,
.ibia-footer button.ibia-bulletin__submit {
	min-height: 39px;
	height: auto;
	padding: 5px var(--fw-btn-pad-x);
	line-height: 28px;
}

/* --- Hero chevron sits on the curve, not below it -------- */
.fw-hero::before {
	bottom: 26px;
	border-width: 0 0 2px 2px;
	width: 18px;
	height: 18px;
}

/* --- Fuel list arrow -------------------------------------
   Drawn rather than a text glyph: a 16px stem with a head,
   matching the design's vector. */
.ibia-fuels a::after,
.is-style-ibia-fuels a::after {
	content: "";
	width: 12px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--ibia-arrow-down) center / contain no-repeat;
	mask: var(--ibia-arrow-down) center / contain no-repeat;
	transition: transform 0.15s ease;
}

:root {
	--ibia-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0v13.2M1 8.6 6 14l5-5.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --- Footer social icons carry their brand colour -------- */
.ibia-footer__social a { color: var(--fw-navy); }
.ibia-footer__social li:nth-child(1) a { color: #0A66C2; }  /* LinkedIn */
.ibia-footer__social li:nth-child(2) a { color: #FF0000; }  /* YouTube  */
.ibia-footer__social li:nth-child(3) a { color: #E1306C; }  /* Instagram */
.ibia-footer__social li:nth-child(4) a { color: #1877F2; }  /* Facebook */
.ibia-footer__social li:nth-child(6) a { color: #07C160; }  /* WeChat   */

/* Flickr is not in Bootstrap Icons, so its two-dot mark is drawn here as a
   single inline SVG. Two pseudo-elements inside a 20px inline anchor wrapped
   onto separate lines, which is what made it sit oddly. */
.ibia-footer__social li:nth-child(5) a i { display: none; }

.ibia-footer__social li:nth-child(5) a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fw-icon-social);
	height: var(--fw-icon-social);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%230063DC'/%3E%3Ccircle cx='30' cy='10' r='9' fill='%23FF0084'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.ibia-footer__social a:hover { opacity: 0.75; }

/* =========================================================
   Events — rebuilt against the design (3006:4656).
   Grey band, featured event on the 680 column with its
   poster, smaller cards beside it.
   ========================================================= */

.ibia-events {
	background-color: var(--fw-bg-grey);
	padding-block: var(--fw-space-3xl);
}

.ibia-events__head,
.is-style-ibia-section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fw-gutter);
	max-width: var(--fw-container);
	margin: 0 auto var(--fw-space-xl);
}

.ibia-events__intro,
.is-style-ibia-section-head > .wp-block-group:first-child { max-width: var(--fw-col-2); }
.ibia-events__intro p:first-child,
.is-style-ibia-section-head > .wp-block-group:first-child p:first-child { margin-bottom: var(--fw-space-xs); }

.ibia-events__grid,
.ibia-events__cards.is-style-ibia-home-feed {
	display: grid;
	grid-template-columns: var(--fw-col-2) var(--fw-col-4) var(--fw-col-4);
	gap: var(--fw-gutter);
	max-width: var(--fw-container);
	margin: 0 auto;
	align-items: start;
}

.ibia-event-card,
.is-style-ibia-home-feed .ibia-event {
	background-color: var(--fw-white);
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
	overflow: hidden;
}

.ibia-event-card.is-featured,
.is-style-ibia-home-feed .ibia-event.is-featured { grid-column: 1; grid-row: 1 / span 2; }

.ibia-event-card figure,
.is-style-ibia-home-feed .ibia-event figure { margin: 0; }
.ibia-event-card img,
.is-style-ibia-home-feed .ibia-event img { display: block; width: 100%; height: auto; }

.ibia-event-card__body,
.is-style-ibia-home-feed .ibia-event__body { padding: var(--fw-space-md); }

.ibia-event-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fw-space-md);
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
	margin: 0 0 var(--fw-space-xs);
}

.ibia-events__chip,
.is-style-ibia-home-feed .ibia-event__chip {
	background-color: var(--fw-turquoise);
	color: var(--fw-navy);
	border-radius: var(--fw-radius);
	padding: 4px 10px;
	font-size: var(--fw-small-size);
	white-space: nowrap;
}

.ibia-event-card h3,
.is-style-ibia-home-feed .ibia-event h3 {
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	margin: 0 0 var(--fw-space-sm);
}

.ibia-event-card p,
.is-style-ibia-home-feed .ibia-event p { margin: 0 0 var(--fw-space-sm); }

/* Location line carries the design's map pin. */
.ibia-events__loc,
.is-style-ibia-home-feed .ibia-event__loc {
	display: flex;
	align-items: center;
	gap: var(--fw-space-xs);
	font-weight: var(--fw-weight-medium);
	margin: var(--fw-space-md) 0 0;
}

.ibia-events__loc::before,
.is-style-ibia-home-feed .ibia-event__loc::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	background-color: currentColor;
	-webkit-mask: var(--ibia-pin) center / contain no-repeat;
	mask: var(--ibia-pin) center / contain no-repeat;
}

:root {
	--ibia-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a5.5 5.5 0 0 0-5.5 5.5c0 4.1 5.5 10.5 5.5 10.5s5.5-6.4 5.5-10.5A5.5 5.5 0 0 0 8 0zm0 7.8a2.3 2.3 0 1 1 0-4.6 2.3 2.3 0 0 1 0 4.6z'/%3E%3C/svg%3E");
}

/* --- Membership card titles are underlined in the design - */
.fw-icon-card__body :is(h2, h3, h4) { text-decoration: underline; }
.fw-icons__intro { max-width: var(--fw-col-2); margin-inline: auto; }

/* =========================================================
   World Bunkering — grey card, covers overhanging.
   ========================================================= */

.ibia-wb {
	position: relative;
	max-width: var(--fw-container);
	margin: var(--fw-space-2xl) auto var(--fw-space-3xl);
	background-color: var(--fw-bg-grey);
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	padding: var(--fw-space-2xl) 80px;
	min-height: 328px;
	box-sizing: border-box;
}

.ibia-wb__text { max-width: 840px; }

.ibia-wb__text p:first-child { margin-bottom: var(--fw-space-xs); }
.ibia-wb__text h2 { margin: 0 0 var(--fw-space-md); }

.ibia-wb__covers {
	position: absolute;
	right: 0;
	top: -54px;
	width: 480px;
	margin: 0;
	pointer-events: none;
}

.ibia-wb__covers img { display: block; width: 100%; height: auto; }

@media (max-width: 1200px) {
	.ibia-wb__covers { position: static; width: 320px; margin-top: var(--fw-space-xl); }
	.ibia-wb { padding-inline: var(--fw-space-xl); }
}

/* --- Vertical rhythm -------------------------------------
   The design runs 80px between sections and the page comes
   to 7057. Blocks were each adding their own padding on top
   of the section padding, pushing the build ~550px longer. */
.entry-content > .wp-block-framework-split { padding-block: var(--fw-space-2xl); }
.entry-content > .ibia-news { margin-block: var(--fw-space-2xl); }
.entry-content > .ibia-events { margin-block: 0; }
.entry-content > .ibia-band { margin-block: var(--fw-space-2xl); }
.entry-content > .wp-block-framework-icon-cards { padding-block: var(--fw-space-2xl); }
.entry-content > .ibia-logos,
.entry-content > .is-style-ibia-logos, .is-style-ibia-logos-corporate { padding-block: var(--fw-space-2xl) 0; }

/* View All News sits level with the block's own heading, not above it. */
.ibia-news__cta { top: 52px; right: 20px; }

/* The news block adds its own --fw-section-py on top of the wrapper's margin,
   which is where the gap between the eyebrow and the heading came from. */
.ibia-news .fw-news { --fw-section-py: 0; padding-block: 0; }
.ibia-news > p.has-small-font-size { margin: 0 0 var(--fw-space-xs); }
.ibia-news__cta { top: 34px; }
.fw-news__heading { margin: 0 0 var(--fw-space-xl); }

/* Same for the splits and icon cards: the block padding and the wrapper
   margin were stacking. */
.wp-block-framework-split { --fw-section-py: 0; }
.entry-content > .wp-block-framework-split { padding-block: var(--fw-space-2xl); }
.wp-block-framework-icon-cards { --fw-section-py: 0; }

/* --- Hero chevron is white: it sits on the photograph ---- */
.fw-hero::before {
	border-left-color: var(--fw-white);
	border-bottom-color: var(--fw-white);
	bottom: 34px;
}

/* --- News card image is 320 x 137 in the design, not 3:2 -
   The block's 3/2 wrapper left ~76px of empty card under
   every image. */
.fw-news-card__image { aspect-ratio: 320 / 137; }
.fw-news__track > .fw-news-card:first-child .fw-news-card__image { aspect-ratio: 680 / 290; }
.fw-news-card__image img { height: 100%; }

/* --- IMO photo credit bar -------------------------------- */


/* --- Membership ------------------------------------------
   Grey runs the whole section including the caption and
   button; cards are 311 wide with 39px between them; the
   intro's paragraph sits tight under the heading. */
.ibia-membership,
.is-style-ibia-membership {
	background-color: var(--fw-bg-grey);
	padding-block: var(--fw-space-3xl);
}

.ibia-membership .wp-block-framework-icon-cards,
.is-style-ibia-membership .wp-block-framework-icon-cards {
	background-color: transparent;
	padding-block: 0;
}

.fw-icons__intro h2 { margin: 0 0 var(--fw-space-sm); }
.fw-icons__intro p:last-child { margin: 0; }
.fw-icons__intro { margin-bottom: var(--fw-space-2xl); }

.fw-icons__grid {
	grid-template-columns: repeat(4, 311px);
	justify-content: center;
	gap: 39px;
}

.ibia-membership__caption,
.is-style-ibia-membership > p { text-align: center; margin: var(--fw-space-2xl) 0 var(--fw-space-sm); }

/* Intro-to-cards gap in the design is ~40px, not 60 plus the grid's own. */
.fw-icons__intro { margin-bottom: var(--fw-space-xl); }
.fw-icons__grid { margin-top: 35px; }

/* The design sets 30px between the heading and the body copy in a split. */
.fw-split__content h2 + p { margin-top: var(--fw-space-lg); }
.fw-split__content p + p { margin-top: var(--fw-space-sm); }

/* Featured card standfirst — design shows two paragraphs of the article. */
.fw-news-card__excerpt {
	order: 4;
	padding: var(--fw-space-sm) var(--fw-space-md) 0;
	font-size: var(--fw-body-size);
	line-height: var(--fw-body-line);
	color: var(--fw-navy);
}

/* =========================================================
   Header dropdowns — Navigation set (178:69), 9 variants.

   Panels are flat white, flush under the 96px header, width
   fits content per menu, left-aligned to their nav item,
   18px left / 16px top / 19px bottom padding, items 40px
   apart. The shadow is the card shadow with the top edge
   clipped, per the spec: a 12px blur spills ~6px upward and
   the 2px offset never clears it.
   ========================================================= */

.fw-nav li.menu-item-has-children { position: relative; }

.fw-nav .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	z-index: 30;
	display: none;
	min-width: 186px;
	margin: 0;
	padding: 16px 18px 19px;
	list-style: none;
	background-color: var(--fw-dropdown-bg);
	box-shadow: var(--fw-shadow-card);
	clip-path: inset(0 -20px -20px -20px);
}

.fw-nav li.menu-item-has-children:hover > .sub-menu,
.fw-nav li.menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.fw-nav .sub-menu li { margin: 0; }
.fw-nav .sub-menu li + li { margin-top: 12px; }

.fw-nav .sub-menu a {
	display: block;
	white-space: nowrap;
	font-weight: var(--fw-weight-regular);
}

/* Caret rotates when the panel is open, as the design has it. */
.fw-nav li.menu-item-has-children:hover > a::after,
.fw-nav li.menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

.fw-nav li.menu-item-has-children:hover > a,
.fw-nav li.menu-item-has-children:focus-within > a {
	color: var(--fw-nav-colour-open);
}

/* The header must not clip its own panels. */
.fw-header, .fw-header__inner, .fw-header__nav { overflow: visible; }

/* --- Remaining vertical rhythm --------------------------- */
.entry-content > .wp-block-framework-split { padding-block: var(--fw-space-xl); }
.entry-content > .ibia-news { margin-block: var(--fw-space-xl); }

/* --- Latest News, matched to 3006:4609 -------------------
   The design's cards carry no arrow icon, the featured title
   is H4 (not H2), and card titles sit at the 18px lead size. */
.fw-news-arrow-btn { display: none; }

.fw-news__track > .fw-news-card:first-child .fw-news-card__title {
	font-size: var(--fw-h4-size);
	line-height: var(--fw-h4-line);
}

.fw-news-card__title {
	font-size: var(--fw-lead-size);
	line-height: var(--fw-lead-line);
	font-weight: var(--fw-weight-medium);
}

/* Head no longer needs to make room for the arrow. */
.fw-news-card__head { display: block; }

/* An empty chip must not leave a green block behind. */
.fw-news-card__badge:empty { display: none; }

/* No gap between the date and the headline — the date's line box plus the
   head's top padding were stacking. */
.fw-news-card__date {
	padding: var(--fw-space-md) var(--fw-space-md) 0;
	margin: 0;
	line-height: 1.2;
}

.fw-news-card__head { padding-top: 4px; }

/* The featured card runs the full height of the two card rows beside it —
   680 x 724 in the design. It was set to size to its content back when the
   block rendered no standfirst. */
.fw-news__track > .fw-news-card:first-child {
	align-self: stretch;
	height: auto;
}

/* Chip stays pinned to the bottom of the taller card. */
.fw-news__track > .fw-news-card:first-child .fw-news-card__badge { margin-top: auto; }

/* The split block appends an arrow pseudo-element to its buttons and adds a
   20px gap for it — an LCT treatment. IBIA's buttons carry no icon, so the
   gap was padding the button out by 20px+ (visible on the short IMO label). */
.fw-split__content .wp-block-button__link::after { content: none; }
.fw-split__content .wp-block-button__link { gap: 0; }

/* Photo credit is a fitted box at the image's bottom-left, 328 x 30 in the
   design — not a full-width bar. */


/* The credit sits inside the image and is clipped by its shape — the wrapper
   carried no radius or overflow, so the bar hung past the corner. */


/* The media wrapper was taller/wider than the image inside it (aspect-ratio
   box + object-fit), so a bar positioned against the wrapper hung past the
   picture. Let the wrapper shrink to the image itself. */


/* Credit bar, final approach.

   The block makes .fw-split__media a flex box with aspect-ratio 3/2 and covers
   it with the image. Anchoring the credit absolutely to that pane put it
   outside the picture whenever the two boxes differed. Stack the image and the
   credit in one grid cell instead — then the bar is aligned to the image by
   construction, with no positioning to get wrong. */
/* The pane must BE the image box, not a 3/2 container the image sits inside —
   otherwise anything positioned against the pane (the credit tag) lands
   outside the picture. Drop the block's aspect-ratio, let the image set the
   height, and clip to the pane. */
.fw-split__media {
	display: block;
	position: relative;
	aspect-ratio: auto;
	overflow: hidden;
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	line-height: 0;
	font-size: 0;
}

.fw-split__media > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 680 / 454;
	object-fit: cover;
	border-radius: 0;
}

/* Image credit tag — Frame 48 (3006:4654).

   The design annotation says this tag has to be present because the picture is
   a borrowed asset, and that it applies to this image only. It is a rights
   requirement, not decoration: do not drop it from the IMO image.

   Solid Blue Grey, 14px side padding, Ubuntu Light 14/28 in navy, link opens
   in a new tab. */
.fw-split__credit {
	position: absolute;
	/* Inset from the image edges so there is visible picture on every side of
	   the tag. Sitting flush at 0 also exposed a few px where the pane is
	   fractionally wider than the image it contains. */
	left: 12px;
	bottom: 12px;
	width: fit-content;
	max-width: calc(100% - 24px);
	height: 30px;
	/* Flex centres the label in both axes. The space before the link is a
	   non-breaking space in the label, because flex would otherwise collapse
	   the whitespace between the text node and the anchor. */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	padding: 0 14px;
	margin: 0;
	box-sizing: border-box;
	background-color: var(--fw-blue-grey);
	color: var(--fw-navy);
	font-size: var(--fw-small-size);
	font-weight: var(--fw-weight-light);
	line-height: 1;
	white-space: nowrap;
}

/* The design underlines the organisation's name — it is a link. */
.fw-split__credit a {
	color: var(--fw-navy);
	text-decoration: underline;
}

.fw-split__credit a:hover { color: var(--fw-green-dark); }

/* --- Split alignment -------------------------------------
   The 1320 content is not centred in the 1400 container: it
   is flush to the container edge on the IMAGE side, so the
   picture lines up with every other section's edge.

   About / Energy (image left): flush left, text stops 80px
   short of the right edge. IMO (image right): flush right,
   text starts 80px in. Measured from the frames — About's
   image starts at x=20 and IMO's ends at x=1421. */
/* The block writes `margin: var(--fw-split-inner-margin)` as a shorthand and
   its stylesheet loads after this one, so longhand margin-left/right here are
   reset to auto. Set the token instead. */
.fw-split--image-left { --fw-split-inner-margin: 0 auto 0 0; }
.fw-split--image-right { --fw-split-inner-margin: 0 0 0 auto; }

/* --- Split column proportions ----------------------------
   The block lays the two panes out as 1fr 1fr — equal
   halves. The design is media 680 + 80 gap + text 560 =
   1320, with the media pane on whichever side imageSide
   says. That is the workhorse layout of the site, so it is
   worth setting exactly rather than approximating. */
.fw-split--image-left .fw-split__inner {
	grid-template-columns: var(--fw-split-media) var(--fw-split-text);
}

.fw-split--image-right .fw-split__inner {
	grid-template-columns: var(--fw-split-text) var(--fw-split-media);
}

@media (max-width: 768px) {
	.fw-split--image-left .fw-split__inner,
	.fw-split--image-right .fw-split__inner {
		grid-template-columns: 1fr;
	}
}

/* --- Events head -----------------------------------------
   The design puts the eyebrow/heading/intro flush at the
   container's left edge with View All Events opposite. Core's
   constrained-layout rules give a group's children auto side
   margins and a contentSize cap, which was centring the intro
   ~260px in. Reset that on this row. */
.ibia-events__head,
.is-style-ibia-section-head {
	display: flex;
	align-items: flex-end; /* 2026-09-17: the frame (3006:4656) bottom-aligns "View All Events" with the intro paragraph, not the eyebrow */
	justify-content: space-between;
	gap: var(--fw-gutter);
}

.ibia-events__head > *,
.is-style-ibia-section-head > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.ibia-events__intro,
.is-style-ibia-section-head > .wp-block-group:first-child {
	max-width: var(--fw-col-2);
	margin: 0;
	flex: 0 1 var(--fw-col-2);
}

.ibia-events__head .wp-block-buttons,
.is-style-ibia-section-head .wp-block-buttons {
	margin: 0;
	flex: 0 0 auto;
}

/* Core's flow layout puts a blockGap margin on every sibling after the first,
   which pushed the smaller event card ~30px below the featured one. In a grid
   the gap already handles spacing, so clear the margins. */
.ibia-events__grid > *,
.fw-news__track > *,
.ibia-events__cards.is-style-ibia-home-feed > * {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-top: 0;
}

/* --- Event card height -----------------------------------
   The design's small cards are 320 x 351 with a 320 x 180
   image, and the title sits at 16/20 over two lines (the
   node measures 280 x 40). Rendering it at H4 20/30 pushed
   it onto three lines and made the card ~40px too tall. */
.ibia-event-card:not(.is-featured) h3,
.is-style-ibia-home-feed .ibia-event:not(.is-featured) h3 {
	font-size: var(--fw-body-size);
	line-height: 20px;
	margin: 0 0 var(--fw-space-xs);
}

.ibia-event-card:not(.is-featured) img,
.is-style-ibia-home-feed .ibia-event:not(.is-featured) img {
	aspect-ratio: 320 / 180;
	object-fit: cover;
}

.ibia-event-card:not(.is-featured) .ibia-event-card__body,
.ibia-event-card:not(.is-featured) .is-style-ibia-home-feed .ibia-event__body {
	padding: var(--fw-space-md);
}

/* --- Band dimensions -------------------------------------
   The design's bulletin band is 1400 x 150 with the text at
   78px in and the button ending 56px from the right edge;
   Join IBIA is 1400 x 318. The background crop percentages
   are calculated against those heights, so the band has to
   be that tall or the framing shifts. */
.ibia-band--bulletin {
	height: 150px;
	min-height: 150px;
	padding: 0 56px 0 78px;
	align-content: center;
}

.ibia-band--join {
	min-height: 318px;
	padding: 0 56px;
}

/* --- Membership ------------------------------------------
   The section band is Blue Grey at 20%; the cards stay white
   on top of it. Body copy sits at 14/27 in the design — the
   framework's small-print 14/24 reads noticeably tighter. */
.ibia-membership,
.is-style-ibia-membership {
	background-color: rgba(var(--fw-blue-grey-rgb), 0.2);
}

.fw-icon-card {
	background-color: var(--fw-white);
}

.fw-icon-card__body p {
	font-size: var(--fw-small-size);
	line-height: 27px;
}

.fw-icon-card__body :is(h2, h3, h4) {
	line-height: 27px;
	margin: 0 0 var(--fw-space-sm);
}

/* Tighten the gap under the intro. The design leaves ~55px between the intro
   copy and the top of the icon tiles; the wrapper margin plus the grid's own
   35px overhang allowance were stacking to ~115px. */
.fw-icons__intro { margin-bottom: var(--fw-space-md); }

/* The block sets the intro's margin via `margin: var(--fw-icons-intro-margin)`
   on a three-class selector, so longhand overrides here lose. Set the token. */
:root { --fw-icons-intro-margin: 0 auto var(--fw-space-md); }

/* Section padding: the design's band is 650 tall with the eyebrow ~43px from
   the top and the button ending ~57px above the bottom edge. 80px top and
   bottom was leaving a large void above the title and under the button. */
.ibia-membership,
.is-style-ibia-membership {
	padding-block: var(--fw-space-xl);
}

.ibia-membership .wp-block-framework-icon-cards,
.is-style-ibia-membership .wp-block-framework-icon-cards {
	padding-block: 0;
}

/* The caption and button sit inside the band, not on their own rhythm. */
.ibia-membership__caption,
.is-style-ibia-membership > p { margin: var(--fw-space-xl) 0 var(--fw-space-sm); }
.ibia-membership .wp-block-buttons,
.is-style-ibia-membership .wp-block-buttons { margin-bottom: 0; }

/* Kill the child block's own top/bottom margins inside the band so the band's
   padding is the only thing setting the space above the eyebrow and below the
   button. */
.ibia-membership > :first-child,
.is-style-ibia-membership > :first-child { margin-block-start: 0; margin-top: 0; }
.ibia-membership > :last-child,
.is-style-ibia-membership > :last-child { margin-block-end: 0; margin-bottom: 0; }
.ibia-membership,
.is-style-ibia-membership { padding-block: var(--fw-space-md) var(--fw-space-xl); }

/* --- Events band -----------------------------------------
   Same fill as the membership band: Blue Grey at 20%, not
   the framework's flat bg-grey. Padding trimmed to match,
   with the child blocks' own margins cleared so the band's
   padding is the only spacing at the top and bottom. */
.ibia-events {
	background-color: rgba(var(--fw-blue-grey-rgb), 0.2);
	padding-block: var(--fw-space-xl);
}

.ibia-events > :first-child { margin-block-start: 0; margin-top: 0; }
.ibia-events > :last-child { margin-block-end: 0; margin-bottom: 0; }
.ibia-events__head,
.is-style-ibia-section-head { margin-bottom: var(--fw-space-lg); }

/* --- World Bunkering -------------------------------------
   Band fill is Blue Grey at 20%, matching Events and
   Membership. The covers overhang the band's top edge and
   run to its right edge; their background is cut out so the
   band shows between them, as the design has it. */
.ibia-wb {
	background-color: rgba(var(--fw-blue-grey-rgb), 0.2);
	padding-block: var(--fw-space-xl);
}

.ibia-wb__covers {
	right: -20px;
	top: -54px;
	width: 480px;
}

/* Tighten the gap under the World Bunkering title — the heading's own margin
   and core's blockGap on the following paragraph were stacking. */
.ibia-wb__text h2 { margin: 0; }
.ibia-wb__text > * + * { margin-block-start: var(--fw-space-sm); margin-top: var(--fw-space-sm); }
.ibia-wb__text p { margin-bottom: 0; }

/* Join banner: the rows were stretching to fill the 318px band, leaving a big
   void between the heading and the button. Centre the content block and hold
   the design's 30px gap. */
.ibia-band--centred {
	align-content: center;
	row-gap: var(--fw-space-lg);
}

.ibia-band--centred > .wp-block-heading { margin: 0; }
.ibia-band--centred > .wp-block-buttons { margin: 0; }

/* --- Logo slider -----------------------------------------
   Each row renders its set twice for the seamless loop, so
   one set must be comfortably wider than the viewport or a
   gap opens at the tail as it scrolls. Six logos at 200px
   plus 40px gaps came to ~1440 against a 1400 viewport —
   right on the edge. Widen the logos and the gap. */
:root {
	--fw-ls-max-width:         240px;
	--fw-ls-set-gap:           var(--fw-space-2xl);
	--fw-ls-set-padding-right: var(--fw-space-2xl);
}

.fw-ls { --fw-ls-h: 60px; }

.fw-ls__set { align-items: center; }

/* --- Logo slots ------------------------------------------
   Each logo occupies a fixed 138 x 80 slot and does not
   shrink. The anchor is the flex item once a logo is linked,
   so the slot sizing goes on both. object-fit keeps each
   mark inside its slot without distorting it. */
:root { --fw-ls-max-width: 138px; }

.fw-ls { --fw-ls-h: 80px; }

.fw-ls__link,
.fw-ls img {
	width: 138px;
	height: 80px;
	flex-shrink: 0;
}

.fw-ls img {
	max-width: 138px;
	max-height: 80px;
	object-fit: contain;
	display: block;
}

.fw-ls__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Logo rows: tighten the vertical space ---------------
   Three lots of padding were stacking: the section wrapper,
   the block's own --fw-ls-padding (80px top and bottom) and
   the title's margin. */
:root { --fw-ls-padding: var(--fw-space-md) 0; }

.ibia-logos,
.is-style-ibia-logos, .is-style-ibia-logos-corporate { padding-block: var(--fw-space-md) 0; }
.entry-content > .ibia-logos,
.entry-content > .is-style-ibia-logos, .is-style-ibia-logos-corporate { padding-block: var(--fw-space-md) 0; margin-block: 0; }
.ibia-logos--corporate,
.is-style-ibia-logos-corporate { padding-bottom: var(--fw-space-xl); }
.ibia-logos__title,
.is-style-ibia-logos > h2, .is-style-ibia-logos-corporate > h2 { margin: 0 0 var(--fw-space-sm); }

/* Close the gap between the Join IBIA banner and Member Associations: the
   band's bottom margin, the wrapper's top padding and core's blockGap were
   all stacking. */
.entry-content > .ibia-logos,
.entry-content > .is-style-ibia-logos, .is-style-ibia-logos-corporate { margin-top: 0; padding-top: 0; }
.entry-content > .ibia-band--join { margin-bottom: var(--fw-space-md); }

/* Ease the logo rows back out — tight, but not squashed. Roughly 30px around
   each row, with the corporate title given the same breathing room above it
   as the row below has. */
:root { --fw-ls-padding: var(--fw-space-lg) 0; }

.entry-content > .ibia-logos,
.entry-content > .is-style-ibia-logos, .is-style-ibia-logos-corporate { padding-top: var(--fw-space-lg); }
.ibia-logos--corporate,
.is-style-ibia-logos-corporate { padding-top: var(--fw-space-lg); padding-bottom: var(--fw-space-2xl); }
.ibia-logos__title,
.is-style-ibia-logos > h2, .is-style-ibia-logos-corporate > h2 { margin: 0 0 var(--fw-space-md); }
.entry-content > .ibia-band--join { margin-bottom: var(--fw-space-xl); }

/* =========================================================
   Navigation — Figma Navigation set (178:69) and the Menu
   component (8:67). Supersedes the header block above.

   Every variant's geometry agrees, so these are exact:

     bar            96px, white
     logo           149 x 56 at 20 / 20
     Log In         84 x 27 at 1336 / 18   (right edge 1420)
     nav row        cap tops at y=64.5, right edge 1419.5,
                    items 24px apart
     dropdown       top edge flush with the bar at y=96, its
                    18px left padding putting child text under
                    the parent's own left edge
     search field   659..1312 x 39, button 1312..1402 x 39
     account card   1231..1430 x 14..155

   Figma trims text boxes to cap height. Ubuntu 16/28 puts the
   cap 8.5px below the top of the line box, so every y taken
   from the design is 8.5px lower than the CSS box that
   produces it. That is what --fw-nav-cap-offset is for.
   ========================================================= */

:root {
	/* The chevron is a 1px stroke polyline, not a filled triangle:
	   M0.332 0.374 L4.832 4.374 L9.332 0.374 in a 9.664 x 5.043 box. */
	--ibia-nav-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 9.664 5.043' fill='none'%3E%3Cpath d='M0.332 0.374 4.832 4.374 9.332 0.374' stroke='%23000'/%3E%3C/svg%3E");
	--fw-nav-caret-w:    10px;
	--fw-nav-caret-h:    5px;
	--fw-nav-cap-offset: 8.5px;
	--ibia-nav-rule:     rgba(148, 159, 179, 0.4);
}

/* --- The bar --------------------------------------------- */

@media (min-width: 1101px) {

	.fw-header__inner {
		position: relative;
		display: block;
		height: var(--fw-header-height);
		min-height: 0;
		max-width: var(--fw-page);
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.fw-logo { position: absolute; left: 20px; top: 20px; }

	.fw-header .fw-logo img { display: block; width: 149px; height: auto; }

	.fw-header__actions { position: absolute; right: 20px; top: 18px; }

	/* Design cap-top 64.5, so the line box starts 8.5px higher. */
	.fw-header__nav {
		position: absolute;
		right: 20px;
		top: calc(64.5px - var(--fw-nav-cap-offset));
	}
}

@media (max-width: 1100px) {
	.fw-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
	}
}

.fw-nav { line-height: 28px; }
.fw-nav a { line-height: 28px; }

/* Log In — 84 x 27 exactly, not padding-derived. */
.fw-header__login {
	box-sizing: border-box;
	width: 84px;
	height: 27px;
	min-height: 0;
	padding: 0;
	justify-content: center;
	line-height: 1;
}

/* --- The chevron ----------------------------------------- */

.fw-nav > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: var(--fw-nav-caret-w);
	height: var(--fw-nav-caret-h);
	margin-left: var(--fw-nav-caret-gap);
	border: 0;
	background-color: currentColor;
	-webkit-mask: var(--ibia-nav-chevron) center / contain no-repeat;
	mask: var(--ibia-nav-chevron) center / contain no-repeat;
	vertical-align: middle;
}

/* Open: the same chevron flipped, and the label goes green. */
.fw-nav > li.menu-item-has-children:hover > a::after,
.fw-nav > li.menu-item-has-children:focus-within > a::after,
.fw-nav > li.menu-item-has-children.is-open > a::after {
	transform: scaleY(-1);
}

.fw-nav > li.menu-item-has-children.is-open > a,
.fw-nav > li.ibia-search.is-open > a {
	color: var(--fw-nav-colour-open);
}

/* --- The dropdown panels --------------------------------- */

.fw-nav .sub-menu {
	top: calc(100% + 12px);          /* nav box bottom 84 + 12 = the bar's 96 */
	left: -3px;                      /* design panel left 497 against a label left of 500 */
	min-width: 186px;
	padding: 7.5px 34px 10.5px 18px; /* cap-space 16 top / 19 bottom */
}

.fw-nav .sub-menu li + li { margin-top: 12px; }   /* 28 + 12 = the design's 40 pitch */

.fw-nav li.menu-item-has-children.is-open > .sub-menu { display: block; }

/* --- Variant "Search": the field that drops below the bar - */

.ibia-searchbar { background-color: var(--fw-white); }
.ibia-searchbar[hidden] { display: none; }

.ibia-searchbar__form {
	max-width: var(--fw-page);
	margin: 0 auto;
	padding: 0 38px 19px 20px;   /* design right edge 1402, bottom 19 */
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}

.ibia-searchbar__field {
	box-sizing: border-box;
	width: 653px;
	max-width: 100%;
	height: 39px;
	padding: 0 16px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-right: 0;
	border-radius: var(--fw-radius) 0 0 var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	line-height: 37px;
	appearance: none;
	-webkit-appearance: none;
}

.ibia-searchbar__field::placeholder { color: var(--fw-navy); opacity: 1; }

.ibia-searchbar__submit {
	box-sizing: border-box;
	flex-shrink: 0;
	width: 90px;
	height: 39px;
	border: 0;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	cursor: pointer;
}

.ibia-searchbar__submit:hover {
	background-color: var(--fw-white);
	border: var(--fw-btn-border) solid var(--fw-navy);
	color: var(--fw-navy);
}

/* --- Variants "Login" / "login options" ------------------- */

.ibia-account { position: relative; }

.ibia-account__toggle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
	cursor: pointer;
}

/* This caret is a filled triangle, unlike the nav's stroke chevron. */
.ibia-account__toggle::after {
	content: "";
	border-left: 4.25px solid transparent;
	border-right: 4.25px solid transparent;
	border-top: 4.25px solid currentColor;
}

.ibia-account.is-open > .ibia-account__toggle::after { transform: scaleY(-1); }

.ibia-account__panel {
	position: absolute;
	z-index: 1;
	top: -3.5px;      /* design panel top 14 against a toggle box top of 17.5 */
	right: -10px;     /* design panel right 1430 against a content edge of 1420 */
	width: 199px;
	box-sizing: border-box;
	padding: 58px 10.5px 8px;
	background-color: var(--fw-dropdown-bg);
	box-shadow: var(--fw-shadow-card);
}

.ibia-account__panel[hidden] { display: none; }

.ibia-account__list { list-style: none; margin: 0; padding: 0; }

.ibia-account__list a {
	display: flex;
	align-items: center;
	gap: 11px;          /* icon at 14 in, 14 wide; text at 39 in */
	padding: 0 3.5px;   /* 10.5 panel padding + 3.5 = the design's 14 */
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	line-height: 14px;
	text-decoration: none;
}

.ibia-account__list a:hover { color: var(--fw-nav-colour-hover); }

.ibia-account__list .bi { flex-shrink: 0; width: 14px; font-size: 14px; line-height: 1; }

.ibia-account__list li + li {
	margin-top: 7px;
	padding-top: 9px;
	border-top: 1px solid var(--ibia-nav-rule);
}

/* --- Homepage arrow (129:68) ------------------------------
   Two adjacent sides of a 15.63px square, 3px stroke, rotated
   -45deg. The component has two variants 5px apart vertically,
   which is the scroll hint animating. */

.fw-hero::before {
	box-sizing: border-box;
	width: 17.13px;
	height: 17.13px;
	border-width: 0 0 3px 3px;
	border-color: var(--fw-white);
	animation: ibia-arrow-bounce 1.4s ease-in-out infinite alternate;
}

@keyframes ibia-arrow-bounce {
	from { transform: translateX(-50%) translateY(0); }
	to { transform: translateX(-50%) translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.fw-hero::before { animation: none; }
}

/* --- The burger ------------------------------------------
   Framework bug, not an IBIA one. fw-chrome.css sizes the
   toggle with var(--fw-menu-btn-width, 44px); fw-offcanvas.css
   loads after it and redeclares the same selector with
   var(--fw-menu-btn-width, 0). Neither token is defined
   anywhere, so the later 0 wins and the button renders 0x0 —
   an invisible, untappable menu on every phone. Setting the
   tokens fixes both declarations at once.

   The design has no mobile spec (confirmed with the designer
   18 Aug), so these are our own: a 44px tap target with the
   framework's own 24x2 bars. */
:root {
	--fw-menu-btn-width:      44px;
	--fw-menu-btn-height:     44px;
	--fw-menu-btn-gap:        5px;
	--fw-menu-btn-padding:    0;
	--fw-menu-btn-bar-width:  24px;
	--fw-menu-btn-bar-height: 2px;
}

.fw-menu-btn { color: var(--fw-navy); }
/* =========================================================
   Meet the Board — Figma frame 512:490, plus the Bio Image
   component (648:312).

   The page is white throughout; the grey discs in the frame
   are placeholder photographs on the members who have not
   been named yet, not a section background.

   Cap-height trap again: every y in the frame is the top of
   the capital letters, so a 16/28 line box starts 8.46px
   higher, a 20/30 one 8.07px, an 18/28 one 7.76px.

   Width, once, for everything on this page. Two traps, both
   of which cost a render to find:

   1. theme.json sets useRootPaddingAwareAlignments with 20px
      root padding, so an alignfull block is ALREADY inset 20px
      each side. Padding it again leaves 1360 of content where
      the frame wants 1400 — exactly one card short on every
      row.
   2. `margin-inline: auto` does not survive on a child of a
      block-layout container; core's own layout CSS wins. Every
      wrapper here is therefore a column flexbox with
      `align-items: center`, and its children take a width and
      a max-width. Nothing can override that.
   ========================================================= */

:root {
	--ibia-photo:       226px;   /* the standard portrait disc */
	--ibia-photo-chair: 320px;   /* the regional chair's, larger */
	--ibia-card-gap:    40px;
	--ibia-inner:       1400px;
	--ibia-rule:        rgba(148, 159, 179, 0.4);
}

/* --- Title band (Rectangle 74) ---------------------------
   A left-to-right navy → transparent gradient, 148px, with
   the IBIA mark at 5% navy sitting in the faded end. */

.ibia-titleband {
	box-sizing: border-box;
	min-height: 148px;
	padding: 24px 20px 36px;
	background-image: linear-gradient(90deg, var(--fw-navy) 0%, rgba(1, 53, 99, 0) 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ibia-titleband > * {
	width: 100%;
	max-width: var(--ibia-inner);
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.ibia-titleband::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 26.55px;
	width: 120.448px;
	height: 125px;
	background: url("../img/board-watermark.svg") center / contain no-repeat;
	pointer-events: none;
}

.ibia-titleband__eyebrow {
	margin: 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-white);
}

.ibia-titleband__title {
	margin: 0;
	color: var(--fw-white);
}

/* --- The two centred intros (Frames 51 and 42) ----------- */

.ibia-board-intro,
.ibia-regions-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 20px;
	text-align: center;
	color: var(--fw-navy);
	box-sizing: border-box;
}

.ibia-board-intro { margin-block: 32px 0; }
.ibia-regions-intro { margin-block: 50px 0; }

.ibia-board-intro > *,
.ibia-regions-intro > * {
	width: 100%;
	box-sizing: border-box;
}

.ibia-board-intro   > * { max-width: 760px; }
.ibia-regions-intro > * { max-width: 684px; }

.ibia-board-intro h2,
.ibia-regions-intro h2 { margin: 0; }

.ibia-board-intro p,
.ibia-regions-intro p {
	margin: 30px 0 0;
	font-weight: var(--fw-weight-light);
}

/* "Around the World" — the Small print style, above the H2. */
.ibia-eyebrow,
.is-style-ibia-eyebrow {
	margin: 0 0 8px !important;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

/* --- The rule under the main Board (Vector 40) ----------- */

.ibia-board-rule {
	max-width: 1160px;
	margin: 56px auto 0;
	border: 0;
	border-top: 1px solid var(--ibia-rule);
	background: none;
	opacity: 1;
}

/* --- People grids ----------------------------------------
   Flex, not grid: the last row has to centre on the main
   Board (two cards, centred at 720 in the frame) and stay
   left on the Asia grid (one card, flush left). A grid's
   justify-content moves the tracks, not the last row. */

/* The block ships `padding: var(--fw-section-py, 48px) 20px`,
   so every People section adds 96px of its own height. The
   frame's gaps are stated as margins below, so that padding
   goes. The 20px each side stays — it is the page gutter. */
.ibia-board-officers,
.ibia-board-members,
.ibia-region__chair,
.ibia-region__grid { padding-block: 0; }

.ibia-board-officers,
.ibia-board-members {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 20px;
	box-sizing: border-box;
}

.ibia-board-officers .fw-people__grid,
.ibia-board-members .fw-people__grid,
.ibia-region__grid .fw-people__grid,
.ibia-region__chair .fw-people__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px var(--ibia-card-gap);
	width: 100%;
	max-width: var(--ibia-inner);
	box-sizing: border-box;
	grid-template-columns: none;
}

.ibia-region__inner > .fw-people { padding-inline: 0; }

.ibia-board-officers { margin-block: 76px 0; }
.ibia-board-members { margin-block: 48px 0; }

.ibia-board-officers .fw-people__grid { justify-content: flex-start; }
.ibia-board-members  .fw-people__grid { justify-content: center; }

.ibia-board-officers .fw-person { flex: 0 0 320px; }
.ibia-board-members  .fw-person { flex: 0 0 248px; }

/* --- The card (Group 39 / Group 41) ---------------------- */

.fw-person {
	position: relative;
	text-align: center;
	color: var(--fw-navy);
}

.fw-person__photo {
	width: var(--ibia-photo);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
}

.fw-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

/* Bio Image, Variant2 — the photograph lifts slightly on hover. */
.fw-person:hover .fw-person__photo img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
	.fw-person__photo img { transition: none; }
	.fw-person:hover .fw-person__photo img { transform: none; }
}

/* A member the design has not named yet: the block renders no
   photo element at all, so the frame's grey disc is drawn here.
   #D9D9D9 is Figma's default shape fill, not a brand colour —
   which is itself the signal that these are placeholders. */
.ibia-region__grid .fw-person--no-photo::before {
	content: "";
	display: block;
	width: var(--ibia-photo);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 50%;
	background-color: #d9d9d9;
}

.fw-person__name {
	margin: 8px 0 0;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
	color: var(--fw-navy);
}

/* The green line — Chair, Vice Chair, Regional Board Chair. */
.fw-person__role {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-weight-regular);
	line-height: 28px;
	color: var(--fw-green-dark);
}

.fw-person__org {
	margin: 6.5px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 22px;
	color: var(--fw-navy);
}

.fw-person__role + .fw-person__org { margin-top: 10px; }

/* --- The "+" badge (Component 6 / Bio Arrow) -------------
   The block renders a "Read Biography" label when — and only
   when — the card has a biography. The design draws that
   control as a 22px navy disc with a white cross sitting on
   the bottom of the photograph, so the label becomes the
   disc. No bios are written yet, so no badges show yet. */

.fw-person__bio-btn {
	position: absolute;
	left: 50%;
	top: calc(var(--ibia-photo) - 33px);
	transform: translateX(-50%);
	z-index: 2;
	display: block;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fw-navy);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.fw-person__bio-btn > * { display: none; }

.fw-person__bio-btn::before,
.fw-person__bio-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--fw-white);
	transform: translate(-50%, -50%);
}

.fw-person__bio-btn::before { width: 3px;      height: 13.54px; }
.fw-person__bio-btn::after { width: 13.54px;  height: 3px; }

/* Bio Arrow Variant2 (648:348) is the hover: the disc turns
   Turquoise, the cross stays white. */
.fw-person__bio-btn:hover,
.fw-person__bio-btn:focus-visible,
.fw-person:hover .fw-person__bio-btn {
	background: var(--fw-turquoise);
}

/* --- Bio pop-up (648:410) --------------------------------
   The block already has the mechanics — a hidden checkbox, a
   fixed overlay, a scroll lock — but every dimension is a
   --fw-person-modal-* token defaulting to 0, so it renders as
   nothing until they are set. These are the frame's: an 851
   card, 46px sides, name at 37 and the body at 97, close at
   13/14 from the top right. */

.fw-person__modal-overlay { background-color: rgba(1, 53, 99, 0.6); }

.fw-person__modal-dialog {
	width: 851px;
	max-width: calc(100vw - 40px);
	padding: 37px 46px 48px;
	background-color: var(--fw-white);
	border-radius: var(--fw-radius);
	box-sizing: border-box;
	text-align: left;
}

.fw-person__modal-name {
	margin: 0 0 17px;
	padding-right: 40px;      /* clear of the close control */
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.fw-person__modal-bio {
	max-width: 760px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.fw-person__modal-bio p { margin: 0 0 10px; }

/* Two 20px bars rather than the × glyph the block prints —
   the frame's mark is a 1.4px stroke with rounded caps, which
   a text × will not give at any font. */
.fw-person__modal-close {
	top: 13px;
	right: 14px;
	width: 16px;
	height: 16px;
	font-size: 0;
	color: var(--fw-navy);
}

.fw-person__modal-close::before,
.fw-person__modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 1.4px;
	border-radius: 1px;
	background-color: currentColor;
}

.fw-person__modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.fw-person__modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- Regional boards ------------------------------------- */

/* The frame bands these alternately — Asia, Europe and the
   Americas carry Blue Grey 20%, the Middle East and Africa are
   white. Sampled off the frames: #EAECF0, which is exactly
   rgba(148,159,179,0.20) over white. The band is full bleed and
   includes its own heading. */

.ibia-region,
.is-style-ibia-region,
.is-style-ibia-region-tinted {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14.5px 20px 45px;   /* cap-space 20 above the heading */
	box-sizing: border-box;
}

.ibia-region--tinted,
.is-style-ibia-region-tinted {
	background-color: rgba(var(--fw-blue-grey-rgb), 0.2);
	padding-block-start: 34.5px; /* cap-space 40, as the banded frames have it */
}

.ibia-region__title {
	width: 100%;
	max-width: var(--ibia-inner);
	margin: 0;
	box-sizing: border-box;
	color: var(--fw-navy);
}

.ibia-region__inner {
	display: grid;
	grid-template-columns: var(--ibia-photo-chair) 1fr;
	column-gap: var(--ibia-card-gap);
	align-items: start;
	width: 100%;
	max-width: var(--ibia-inner);
	margin: 38px 0 0;
	box-sizing: border-box;
}

/* The chair stays put while the grid beside it scrolls — the
   frame marks that card sticky. */
.ibia-region__chair {
	position: sticky;
	top: calc(var(--fw-header-height) + 20px);
}

.ibia-region__chair .fw-people__grid,
.ibia-region__grid .fw-people__grid { max-width: none; }

.ibia-region__chair .fw-person { flex: 0 0 320px; --ibia-photo: var(--ibia-photo-chair); }

/* The chair's three lines are spaced wider than a grid card's. */
.ibia-region__chair .fw-person__name { margin-top: 15px; }
.ibia-region__chair .fw-person__role { margin-top: 6px; }
.ibia-region__chair .fw-person__org { margin-top: 22px; }

.ibia-region__grid .fw-people__grid { justify-content: flex-start; }
.ibia-region__grid .fw-person { flex: 0 0 230px; }

/* A region whose members have not been named yet keeps its
   chair on the left rather than stretching to fill. */
.ibia-region__inner > .ibia-region__chair:only-child { grid-column: 1 / -1; }

/* --- The region chips (Frames 11/43/44/45/46) ------------ */

.ibia-region-nav {
	max-width: var(--ibia-inner);
	margin: 36px auto 0;
	box-sizing: border-box;
	gap: var(--ibia-card-gap);
}

/* --- Vertical rhythm -------------------------------------
   Core's constrained layout gives `.entry-content > * + *` a
   blockGap margin at (0,2,0), which beats a single class. The
   frame's gaps are specific, so they are stated once here and
   forced. Every value is the distance in the frame between one
   section's last line box and the next section's first.

   Block margins ONLY. An alignfull block breaks out of
   .entry-content's padding with negative left/right margins,
   so a `margin` shorthand here — even `margin: 76px 0 0` —
   pins it back inside and costs 40px of width, which is one
   card off the end of every row. */

.ibia-board-intro,
.ibia-board-officers,
.ibia-board-members,
.ibia-board-rule,
.ibia-regions-intro,
.ibia-region-nav,
.ibia-region,
.is-style-ibia-region,
.is-style-ibia-region-tinted { margin-block-end: 0 !important; }

.ibia-board-intro { margin-block-start: 32px !important; }
.ibia-board-officers { margin-block-start: 76px !important; }
.ibia-board-members { margin-block-start: 48px !important; }
.ibia-board-rule { margin-block-start: 56px !important; }
.ibia-regions-intro { margin-block-start: 50px !important; }
.ibia-region-nav { margin-block-start: 36px !important; }

/* The bands run into one another in the frame — 10px between,
   51px between the chips and the first. */
.ibia-region,
.is-style-ibia-region,
.is-style-ibia-region-tinted { margin-block-start: 10px !important; }
.ibia-region-nav + .ibia-region,
.ibia-region-nav + .is-style-ibia-region,
.ibia-region-nav + .is-style-ibia-region-tinted { margin-block-start: 51px !important; }

/* --- Narrower screens ------------------------------------
   No responsive design was drawn for this page. The cards
   already wrap; below the nav breakpoint the chair stops
   sticking and drops above its grid. */

@media (max-width: 1100px) {
	.ibia-region__inner { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-region__chair { position: static; }
	.ibia-region__chair .fw-people__grid { justify-content: center; }
}

@media (max-width: 640px) {
	.ibia-board-officers .fw-person,
	.ibia-board-members .fw-person,
	.ibia-region__grid .fw-person,
	.ibia-region__chair .fw-person { flex: 0 0 100%; }
	.ibia-board-officers .fw-people__grid,
	.ibia-region__grid .fw-people__grid { justify-content: center; }
}

/* =========================================================
   Events listing — Figma 3006:7882 ("Events", variant
   `supported`).

   The page sits on #F5F5F5, not white; the top bar and the
   filters panel are both Blue Grey 20% over it, which is why
   they read as two different greys.

   Widths follow the Meet the Board rule: an alignfull block
   already carries theme.json's 20px root padding, so inner
   elements take a max-width and no padding, and every wrapper
   that needs centring is a flexbox rather than auto margins.
   ========================================================= */

:root {
	--ibia-ev-page-bg:   #f5f5f5;
	--ibia-ev-tint:      rgba(148, 159, 179, 0.2);
	--ibia-ev-hairline:  #e3e7ee;
	--ibia-ev-shadow:    2px 2px 12px 0 rgba(0, 0, 0, 0.3);
	--ibia-ev-card:      500px;
	--ibia-ev-gap:       40px;
	--ibia-ev-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6394 21'%3E%3Cpath d='M7.27748 20.726C7.39834 20.8972 7.60182 21 7.81969 21C8.03755 21 8.24104 20.8972 8.36189 20.726C9.90407 18.5421 12.1756 15.8448 13.7584 13.1017C15.0241 10.9083 15.6394 9.03763 15.6394 7.38281C15.6394 3.31193 12.1315 0 7.81969 0C3.50791 0 0 3.31193 0 7.38281C0 9.03763 0.615279 10.9083 1.88094 13.1017C3.46264 15.8427 5.73848 18.5466 7.27748 20.726ZM7.81969 1.23047C11.4128 1.23047 14.3361 3.99041 14.3361 7.38281C14.3361 8.82673 13.7728 10.5048 12.614 12.513C11.2496 14.8775 9.30256 17.2761 7.81969 19.2925C6.33703 17.2764 4.38989 14.8776 3.02539 12.513C1.8666 10.5048 1.30328 8.82673 1.30328 7.38281C1.30328 3.99041 4.22654 1.23047 7.81969 1.23047Z' fill='%23000'/%3E%3Cpath d='M7.82 11.0742C9.97589 11.0742 11.7298 9.41825 11.7298 7.38281C11.7298 5.34737 9.97589 3.69141 7.82 3.69141C5.66411 3.69141 3.91016 5.34737 3.91016 7.38281C3.91016 9.41825 5.66411 11.0742 7.82 11.0742ZM7.82 4.92188C9.25726 4.92188 10.4266 6.02585 10.4266 7.38281C10.4266 8.73977 9.25726 9.84375 7.82 9.84375C6.38274 9.84375 5.21344 8.73977 5.21344 7.38281C5.21344 6.02585 6.38274 4.92188 7.82 4.92188Z' fill='%23000'/%3E%3C/svg%3E");
}

/* No padding-inline here: the block is alignfull, so it already
   carries theme.json's 20px root padding. Adding 20px again
   costs 40px of width and every column comes out short. */
.ibia-events {
	background-color: var(--ibia-ev-page-bg);
	padding: 0 0 80px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block: 0 !important;
}

.ibia-events > * { width: 100%; max-width: var(--ibia-inner); box-sizing: border-box; }

/* --- Top bar (Rectangle 75) ------------------------------ */

.ibia-events__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 95px;
	padding-inline: 20px;
	background-color: var(--ibia-ev-tint);
	margin-block: 0 !important;
}

/* --- Segmented controls (3006:8071 / 8072) --------------- */

.ibia-segmented,
.is-style-ibia-segmented-view,
.is-style-ibia-segmented-time {
	display: inline-flex;
	gap: 1px;
	padding: 4px;
	border: 1px solid var(--ibia-ev-hairline);
	border-radius: 8px;
	background-color: #f5f7fa;
	margin-block: 0 !important;
}

.ibia-segmented .wp-block-button,
.is-style-ibia-segmented-view .wp-block-button,
.is-style-ibia-segmented-time .wp-block-button { margin: 0; }

.ibia-segmented .wp-block-button__link,
.is-style-ibia-segmented-view .wp-block-button__link,
.is-style-ibia-segmented-time .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--fw-radius);
	background-color: transparent;
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	white-space: nowrap;
}

/* The two controls are NOT the same size (762:2211): the view
   switcher is 551 x 56 with 180 x 46 segments, the time pair is
   250 x 46 with 120 x 36. */
.ibia-segmented--view .wp-block-button__link,
.is-style-ibia-segmented-view .wp-block-button__link { width: 180px; height: 46px; }
.ibia-segmented--time .wp-block-button__link,
.is-style-ibia-segmented-time .wp-block-button__link { width: 120px; height: 36px; }

/* The framework already names these two: --fw-tab-active is
   Light Green, --fw-filter-active is Blue Grey, and the token
   file says in as many words not to unify them. The view
   switcher is a tab set; Upcoming / Past is a filter. */
.ibia-segmented .is-active .wp-block-button__link,
.is-style-ibia-segmented-view .is-active .wp-block-button__link,
.is-style-ibia-segmented-time .is-active .wp-block-button__link {
	background-color: var(--fw-tab-active);
	color: var(--fw-navy);
}

.ibia-segmented--time .is-active .wp-block-button__link,
.is-style-ibia-segmented-time .is-active .wp-block-button__link {
	background-color: var(--fw-filter-active);
}

/* --- Page title ------------------------------------------ */

.ibia-events__title {
	margin: 40px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

/* --- Two columns: 1040 list + 319 filters ---------------- */

/* The sidebar is a fixed 319 in the frame. Two `fr` tracks will
   NOT reproduce that: a grid item's automatic minimum is its
   min-content, and the filter panel's widest label pushes its
   track past its share. Pin the sidebar and give the listing
   minmax(0, 1fr) so it can shrink. */
.ibia-events__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 319px;
	column-gap: var(--ibia-ev-gap);
	align-items: start;
	margin-block: 40px 0 !important;
}

.ibia-events__list,
.ibia-events__grid,
.ibia-events__cards.is-style-ibia-home-feed { margin-block: 0 !important; }

/* Every card in the frame is 500 x 505 — the height does not
/* Scoped to .ibia-events__list (the Upcoming Events pages) on
   2026-09-17: unscoped, this block also hit the HOMEPAGE grid,
   which shares the class, collapsing its 680/320/320 layout to
   two equal columns and stretching the featured card to 1081px. */
   follow the title. `grid-auto-rows: 1fr` makes all rows equal
   so a two-line title no longer makes its card taller than the
   one beside it, and the actions are pushed to the bottom so
   the buttons line up across a row. */
.ibia-events__list .ibia-events__grid,
.ibia-events__list .ibia-events__cards.is-style-ibia-home-feed {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: var(--ibia-ev-gap);
	margin-top: var(--ibia-ev-gap) !important;
}

.ibia-events__list .ibia-events__grid > .ibia-event,
.ibia-events__list .ibia-events__cards.is-style-ibia-home-feed > .ibia-event { height: 100%; }

/* --- The card (Group 98) --------------------------------- */

.ibia-event {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--fw-white);
	/* The brand's 30px top-right accent, on every card. */
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--ibia-ev-shadow);
	margin-block: 0 !important;
}

.ibia-event__media {
	margin: 0 !important;
	aspect-ratio: 500 / 277;
	overflow: hidden;
}

.ibia-event__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The frame's fourth card carries no artwork, only a grey field. */
.ibia-event__media--empty { background-color: #d9d9d9; }

.ibia-event__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding: 27px 21.25px 30px;
	margin-block: 0 !important;
}

.ibia-event__body > * { margin-block: 0 !important; }

.ibia-event__date {
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-event__title {
	font-size: 18px;
	font-weight: var(--fw-weight-regular);
	line-height: 26px;
	color: var(--fw-navy);
}

.ibia-event__loc {
	position: relative;
	padding-left: 27.56px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-event__loc::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 15.64px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: var(--ibia-ev-pin) center / contain no-repeat;
	mask: var(--ibia-ev-pin) center / contain no-repeat;
}

/* Sits at the foot of the card so the buttons line up across a
   row whatever the title does above them. */
.ibia-event__actions { gap: 20px; margin-top: auto !important; margin-bottom: 0 !important; }

.ibia-event__actions .wp-block-button__link {
	box-sizing: border-box;
	height: 36px;
	min-height: 0;
	padding: 0 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- The featured card (Group 104) ----------------------- */

.ibia-event--featured {
	display: grid;
	grid-template-columns: var(--ibia-ev-card) 1fr;
	align-items: stretch;
	/* Its artwork is flush left, so only the right corners round. */
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
}

.ibia-event--featured .ibia-event__media {
	aspect-ratio: auto;
	height: 100%;
	align-self: stretch;
	display: flex;
	min-height: 280px;
}

/* The featured card's four lines are NOT evenly spaced in the
   frame — 18 / 25 / 38 between them, measured off the
   cap-trimmed boxes. A single flex gap gets it visibly wrong. */
.ibia-event--featured .ibia-event__body {
	gap: 0;
	padding: 38px 46px 36px 40px;
	justify-content: center;
}

.ibia-event--featured .ibia-event__date { margin-top: 18px !important; }
.ibia-event--featured .ibia-event__title { margin-top: 25px !important; }
.ibia-event--featured .ibia-event__loc { margin-top: 38px !important; }

.ibia-event--featured .ibia-event__date,
.ibia-event--featured .ibia-event__loc {
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
}

.ibia-event--featured .ibia-event__loc { padding-left: 29px; top: 0; }
.ibia-event--featured .ibia-event__loc::before { width: 17px; top: 5px; }

.ibia-event--featured .ibia-event__title {
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 1.15;
}

/* Turquoise is the featured-event colour, per the design spec. */
.ibia-event__chip {
	align-self: flex-start;
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-turquoise, #9adbca);
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
	color: var(--fw-navy);
}


/* --- Filters panel (Group 134) ---------------------------
   Presentational only. Nothing here filters anything yet —
   there is no events data source, and whether Events is a
   view onto Glue Up is still open. Replace wholesale when
   that is settled rather than wiring these controls up. */

.ibia-filters {
	box-sizing: border-box;
	padding: 21px 20px 20px;
	border-radius: var(--fw-radius);
	background-color: var(--ibia-ev-tint);
	box-shadow: var(--ibia-ev-shadow);
	color: var(--fw-navy);
}

.ibia-filters__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 1;
}

.ibia-filters__group { margin-bottom: 20px; }

.ibia-filters__label {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
}

/* Search field + button, 219 + 70 in the frame. */
.ibia-filters__search { display: flex; }

.ibia-filters__search input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 39px;
	padding: 0 13px;
	border: 1px solid var(--fw-navy);
	border-right: 0;
	border-radius: var(--fw-radius) 0 0 var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	appearance: none;
	-webkit-appearance: none;
}

.ibia-filters__search input::placeholder { color: var(--fw-blue-grey, #949fb3); opacity: 1; }

.ibia-filters__search button {
	flex: 0 0 70px;
	height: 39px;
	border: 0;
	border-radius: 0 var(--fw-radius) var(--fw-radius) 0;
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	cursor: pointer;
}

/* fw-overrides.css puts `list-style: disc` and a 1.25em indent
   on every .entry-content ul at (0,1,1), which beats a single
   class — hence the descendant selector here. */
.entry-content .ibia-filters ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* Checkbox rows. Time uses 16px boxes, Location and Types 20px
   — that is how the frame has it, not a mistake here. */
.ibia-filters__checks { list-style: none; margin: 0; padding: 0; }
.ibia-filters__checks li + li { margin-top: 10px; }
.ibia-filters__checks--lg li + li { margin-top: 10px; }

.ibia-filters__checks label {
	display: flex;
	align-items: center;
	gap: 13px;
	cursor: pointer;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
}

.ibia-filters__checks input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: relative;
}

.ibia-filters__checks--lg input { width: 20px; height: 20px; }

.ibia-filters__checks input:checked { background-color: var(--fw-navy); }

.ibia-filters__checks input:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: 30%;
	height: 55%;
	border: solid var(--fw-white);
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Month / Year chips (Month Year, 48.5 x 26). */
.ibia-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibia-filters__chip {
	box-sizing: border-box;
	width: 48.5px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--ibia-ev-hairline);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: #1a2a40;
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 1;
	cursor: pointer;
}

/* Month Year, variant `selected` (764:2360): a navy FILL with
   white text — not a navy outline. The border stays the
   hairline. */
.ibia-filters__chip.is-on {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

.ibia-filters__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	cursor: pointer;
}

.ibia-filters__more::after {
	content: "";
	width: var(--fw-nav-caret-w);
	height: var(--fw-nav-caret-h);
	background-color: currentColor;
	-webkit-mask: var(--ibia-nav-chevron) center / contain no-repeat;
	mask: var(--ibia-nav-chevron) center / contain no-repeat;
}

.ibia-filters__apply {
	display: block;
	box-sizing: border-box;
	width: 135px;
	height: 39px;
	margin: 20px auto 0;
	border: 0;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	cursor: pointer;
}

/* --- Filtering ------------------------------------------
   A hidden card must leave the grid entirely, or its row
   keeps its height. */

.ibia-event[hidden] { display: none !important; }

.ibia-events__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 60px 0;
	text-align: center;
	font-size: 18px;
	font-weight: var(--fw-weight-light);
	line-height: 26px;
	color: var(--fw-navy);
}

.ibia-events__empty[hidden] { display: none; }

.ibia-filters__extra[hidden] { display: none; }

.ibia-filters__chip { transition: background-color .15s ease, color .15s ease; }
.ibia-filters__chip:hover { border-color: var(--fw-navy); }

/* --- News Categories (704:1737) --------------------------
   NOTHING USES THIS YET — the News page is not built. It is
   here because the component is defined and because its two
   colours are already named in fw-overrides.css: the resting
   hairline is --fw-divider (Blue Grey 40%) and the active fill
   is --fw-list-active (Blue Grey 60%), described there as
   "list item bottom border" and "list item active fill". So
   this is the framework's list pattern, not a one-off.

   400 x 60 rows, 18px Light navy, the label indented further
   when the row is active. */

.ibia-cat-list { list-style: none; margin: 0; padding: 0; }

.ibia-cat-list__item {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 0 40px 0 20px;
	border-bottom: 1px solid var(--fw-divider);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: 18px;
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	text-decoration: none;
}

.ibia-cat-list__item.is-active,
.ibia-cat-list__item[aria-current] {
	padding-left: 50px;          /* the frame indents the active label */
	border-bottom-color: transparent;
	background-color: var(--fw-list-active);
}

/* --- Narrower screens ------------------------------------
   Not designed. The filters drop below the listing, the grid
   goes to one column, and the featured card stacks. */

@media (max-width: 1100px) {
	.ibia-events__layout { grid-template-columns: 1fr; row-gap: var(--ibia-ev-gap); }
	.ibia-events__bar { flex-wrap: wrap; gap: 16px; padding-block: 16px; }
}

@media (max-width: 820px) {
	.ibia-events__list .ibia-events__grid,
.ibia-events__list .ibia-events__cards.is-style-ibia-home-feed { grid-template-columns: 1fr; }
	.ibia-event--featured { grid-template-columns: 1fr; }
	.ibia-event--featured .ibia-event__media { aspect-ratio: 500 / 280; }
	.ibia-segmented--view .wp-block-button__link,
.is-style-ibia-segmented-view .wp-block-button__link { width: auto; }
}

/* =========================================================
   Contact — Figma 3006:5624.

   Same width rule as the other inner pages: an alignfull block
   already carries theme.json's 20px root padding, so inner
   elements take a max-width and no padding of their own, and
   anything that needs centring is a flexbox rather than auto
   margins.
   ========================================================= */

:root {
	--ibia-contact-field: 40px;   /* the frame's input height */
}

/* --- Title band, no breadcrumb line ----------------------
   115px against Meet the Board's 148, because this one has no
   eyebrow above the H1, and a smaller mark. */

.ibia-titleband--compact {
	min-height: 115px;
	padding-block: 25px 30px;
}

.ibia-titleband--compact::after {
	top: 12px;
	right: 26.55px;
	width: 87.45px;
	height: 90.75px;
}

/* --- Intro + form ---------------------------------------- */

.ibia-contact {
	display: grid;
	grid-template-columns: 560px 1fr;
	column-gap: 80px;
	align-items: start;
	max-width: var(--ibia-inner);
	padding-inline: 80px;
	box-sizing: border-box;
	margin: 70px auto 0 !important;
	color: var(--fw-navy);
}

.ibia-contact__intro > *,
.ibia-contact__form > * { margin-block: 0 !important; }

.ibia-contact__intro h2 { margin-top: 8px !important; }

.ibia-contact__intro p:last-child {
	margin-top: 21px !important;
	font-weight: var(--fw-weight-light);
}

.ibia-contact__lede {
	margin-bottom: 16px !important;
	font-weight: var(--fw-weight-light);
}

.ibia-contact__intro,
.ibia-contact__form { margin-block: 0 !important; }

/* --- The Forminator form ---------------------------------
   Forminator ships its own stylesheet; these override it to
   the frame. Fields are 40px with a 1px navy border and a 4px
   radius, labels are Regular 16 navy, placeholders Light 16
   Blue Grey, and the submit is the Light Green button. */

.ibia-contact__form .forminator-ui.forminator-custom-form { margin: 0; }

/* A Forminator wrapper is a row; the two-column pairs are done
   here because the plugin's own column classes do not survive
   form-style "none". A row holding a single field spans both. */
.ibia-contact__form .forminator-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	margin-bottom: 23px;
}

.ibia-contact__form .forminator-row > .forminator-col:only-child { grid-column: 1 / -1; }

.ibia-contact__form .forminator-row:last-of-type { margin-bottom: 0; }

.ibia-contact__form .forminator-label {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-regular);
	line-height: 28px;
	color: var(--fw-navy);
	text-transform: none;
	letter-spacing: 0;
}

.ibia-contact__form .forminator-required { color: var(--fw-navy); }

.ibia-contact__form input.forminator-input,
.ibia-contact__form textarea.forminator-textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0 13px;
	border: 1px solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	box-shadow: none;
}

.ibia-contact__form input.forminator-input { height: var(--ibia-contact-field); }

.ibia-contact__form textarea.forminator-textarea {
	height: 132px;
	min-height: 132px;
	padding: 6px 13px;
	resize: vertical;
}

.ibia-contact__form input.forminator-input::placeholder,
.ibia-contact__form textarea.forminator-textarea::placeholder {
	color: var(--fw-blue-grey);
	opacity: 1;
	font-weight: var(--fw-weight-light);
}

.ibia-contact__form input.forminator-input:focus,
.ibia-contact__form textarea.forminator-textarea:focus {
	border-color: var(--fw-navy);
	outline: var(--fw-focus-width) solid var(--fw-focus-colour);
	outline-offset: var(--fw-focus-offset);
}

.ibia-contact__form button.forminator-button-submit {
	box-sizing: border-box;
	height: 39px;
	min-height: 0;
	margin-top: 0;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-green);
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
}

/* Matches the button set's hover: fill and outline invert. */
.ibia-contact__form button.forminator-button-submit:hover,
.ibia-contact__form button.forminator-button-submit:focus-visible {
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

/* --- Our Offices (Group 51) -------------------------------
   Blue Grey 20% with the brand's 30px top-right accent. The
   frame's vertical rule sits at x=820, between the two
   offices, so it is a border on the third column. */

.ibia-offices {
	max-width: var(--ibia-inner);
	margin: 70px auto 0 !important;
	box-sizing: border-box;
}

.ibia-offices__inner {
	display: grid;
	grid-template-columns: 400px 320px 1fr;
	min-height: 340px;
	padding: 51px 0 51px 80px;
	box-sizing: border-box;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: rgba(var(--fw-blue-grey-rgb), 0.2);
	color: var(--fw-navy);
}

.ibia-offices__title {
	margin: 0;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 1.15;
}

.ibia-offices__inner > .ibia-office:last-child {
	border-left: 1px solid var(--fw-divider);
	padding-left: 163px;
}

.ibia-office > * { margin: 0; }

.ibia-office__kicker {
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
}

.ibia-office__place {
	margin-top: 6px !important;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
}

.ibia-office__addr,
.ibia-office__tel,
.ibia-office__email {
	position: relative;
	padding-left: 24px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
}

.ibia-office__addr {
	margin-top: 22px !important;
	line-height: 28px;
}

.ibia-office__addr span { display: block; }

.ibia-office__tel { margin-top: 12px !important; }
.ibia-office__email { margin-top: 4px !important; }

.ibia-office__tel a,
.ibia-office__email a { color: inherit; text-decoration: none; }
.ibia-office__tel a:hover,
.ibia-office__email a:hover { text-decoration: underline; }

/* The three icons are Green, not navy. */
.ibia-office__addr::before,
.ibia-office__tel::before,
.ibia-office__email::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 14px;
	background-color: var(--fw-green-dark);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.ibia-office__addr::before {
	-webkit-mask-image: var(--ibia-ev-pin);
	mask-image: var(--ibia-ev-pin);
}

.ibia-office__tel::before {
	-webkit-mask-image: var(--ibia-icon-phone);
	mask-image: var(--ibia-icon-phone);
}

.ibia-office__email::before {
	-webkit-mask-image: var(--ibia-icon-email);
	mask-image: var(--ibia-icon-email);
}

:root {
	--ibia-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 11.3v2a1.3 1.3 0 0 1-1.5 1.3 13 13 0 0 1-5.7-2 12.8 12.8 0 0 1-4-4 13 13 0 0 1-2-5.7A1.3 1.3 0 0 1 2.8 1.3h2a1.3 1.3 0 0 1 1.3 1.2c.1.6.2 1.3.5 1.9a1.3 1.3 0 0 1-.3 1.4l-.9.8a10.7 10.7 0 0 0 4 4l.9-.8a1.3 1.3 0 0 1 1.4-.3c.6.2 1.2.4 1.9.5a1.3 1.3 0 0 1 1.1 1.3z'/%3E%3C/svg%3E");
	--ibia-icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.3' y='2.7' width='13.3' height='10.7' rx='1.3'/%3E%3Cpath d='m14.7 4-6.7 4L1.3 4'/%3E%3C/svg%3E");
}

/* --- Bulletin band spacing on this page ------------------- */
.entry-content > .ibia-band--bulletin { margin-block: 50px 0 !important; }

/* --- Narrower screens -----------------------------------
   Not designed. Both two-column layouts stack. */

@media (max-width: 1100px) {
	.ibia-contact {
		grid-template-columns: 1fr;
		row-gap: 40px;
		padding-inline: 20px;
	}
	.ibia-offices__inner {
		grid-template-columns: 1fr;
		row-gap: 40px;
		padding: 40px 20px;
	}
	.ibia-offices__inner > .ibia-office:last-child {
		border-left: 0;
		padding-left: 0;
	}
}

/* =========================================================
   IBIA Milestones — Figma 635:300.

   Built on the framework's own `timeline` block, which is
   already this design: horizontal, alternating above/below a
   centre line, prev/next controls, looping carousel, vertical
   collapse on small screens. Every dimension in that block is
   a --fw-timeline-* token that ships at 0 (the usual trap), so
   this section is mostly filling those in.
   ========================================================= */

:root {
	/* Structure the block reads. */
	--fw-timeline-stage-max-width:    var(--ibia-inner);
	--fw-timeline-stage-margin:       0 auto;
	--fw-timeline-viewport-max-width: 100%;
	--fw-timeline-viewport-margin:    0 auto;
	/* The block centres the line at 50% of the item, so the height
	   is twice the taller side: the frame reaches 309 above the
	   line and 341 below it. */
	--fw-timeline-item-min-height:    682px;
	--fw-timeline-item-width:         28px;
	--fw-timeline-item-height:        28px;
	--fw-timeline-group-gap:          29px;
	--fw-timeline-year-padding:       0;
	--fw-timeline-nav-btn-width:      41px;
	--fw-timeline-nav-btn-height:     41px;

	/* Small-screen vertical layout. */
	--fw-timeline-track-width:        100%;
	--fw-timeline-item-padding:       0 0 32px 40px;

	/* Milestone body copy is NOT navy — the frame uses #2E3A4F,
	   which is not in the token file. Flagged in STATUS. */
	--ibia-milestone-body: #2e3a4f;
}

/* --- Intro (Frame 51) ------------------------------------
   Flush with the content edge at x=20, not indented 80 the way
   Contact's intro is. */

.ibia-milestones__intro {
	max-width: var(--ibia-inner);
	margin: 48px auto 0 !important;
	box-sizing: border-box;
	color: var(--fw-navy);
}

.ibia-milestones__intro > * { margin-block: 0 !important; max-width: 760px; }

.ibia-milestones__intro p {
	margin-top: 30px !important;
	font-weight: var(--fw-weight-light);
}

/* --- The timeline ---------------------------------------- */

.ibia-milestones__timeline { padding-block: 0 !important; margin-block: 0 !important; }

/* The carousel track is a <ul>, and fw-overrides.css puts
   `list-style: disc` and a 1.25em indent on every
   .entry-content ul at (0,1,1). That breaks the flex track
   outright — only one milestone rendered until this was
   matched with a descendant selector. Same trap as the Events
   filter checkboxes. */
:is(.entry-content, .editor-styles-wrapper) .fw-timeline ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* The rule and the dots are Light Green. */
.fw-timeline__viewport::before { background-color: var(--fw-green); }

.fw-timeline__item::before {
	box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--fw-green);
	border: 6px solid rgba(var(--fw-green-rgb), 0.45);
	background-clip: padding-box;
}

/* The block draws its connector from the dot to the year. The
   frame puts that tick between the YEAR and the text instead,
   so the block's is dropped and it is drawn on the year. */
.fw-timeline__item::after { display: none; }

.fw-timeline__year {
	position: relative;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 1.15;
	color: var(--fw-navy);
}

.fw-timeline__year::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 1px;
	height: 14px;
	background-color: var(--fw-blue-grey);
	transform: translateX(-50%);
}

.fw-timeline__item--above .fw-timeline__year::before { bottom: calc(100% + 3px); }
.fw-timeline__item--below .fw-timeline__year::before { top: calc(100% + 3px); }

.fw-timeline__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 31px;
	max-width: 384px;
}

/* The frame puts the image furthest from the line in both
   directions, so an item above the line reverses. */
.fw-timeline__item--above .fw-timeline__content { flex-direction: column-reverse; }

.fw-timeline__content p {
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--ibia-milestone-body);
}

.fw-timeline__content strong { font-weight: var(--fw-weight-medium); }

/* PLACEHOLDER: the frame shows a plain Blue Grey block, no
   artwork, for all three milestones. */
:is(.ibia-milestone__media, .fw-timeline__media) {
	width: 186px;
	height: 120px;
	margin: 0 !important;
	background-color: var(--fw-blue-grey);
}

/* --- Prev / next ----------------------------------------- */

.fw-timeline__nav-btn {
	box-sizing: border-box;
	border: 1px solid var(--fw-green);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	padding: 0;
}

.fw-timeline__nav-btn:hover,
.fw-timeline__nav-btn:focus-visible {
	background-color: var(--fw-green);
	color: var(--fw-navy);
}

/* --- Narrower screens ------------------------------------
   The block already collapses to a vertical timeline; these
   are the tokens it needs plus the media block shrinking. */

@media (max-width: 768px) {
	.fw-timeline__content {
		align-items: flex-start;
		gap: 20px;
		max-width: none;
	}
	.fw-timeline__item--above .fw-timeline__content { flex-direction: column; }
	.fw-timeline__year::before { display: none; }
	:is(.ibia-milestone__media, .fw-timeline__media) { width: 100%; max-width: 186px; }
}

/* =========================================================
   Leadership Legacy — Figma 635:307.

   Rows of four portraits hanging off a green rule, with the
   period above each dot. Same rule and dot treatment as the
   Milestones timeline, but static — this one does not scroll.
   ========================================================= */

:root {
	--ibia-legacy-col:   360px;   /* the frame's column pitch */
	--ibia-legacy-photo: 226px;
}

/* --- Standfirst and the two jump buttons ----------------- */

.ibia-legacy__intro {
	max-width: var(--ibia-inner);
	margin: 60px auto 0 !important;
	box-sizing: border-box;
	text-align: center;
	color: var(--fw-navy);
}

.ibia-legacy__intro > p {
	max-width: 760px;
	margin: 0 auto !important;
	font-size: 18px;
	font-weight: var(--fw-weight-light);
	line-height: 28px;
}

.ibia-legacy__jump { gap: 25px; margin: 28px 0 0 !important; }

/* --- Section headings ------------------------------------ */

.ibia-legacy__heading {
	max-width: var(--ibia-inner);
	margin: 55px auto 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
	text-align: center;
}

.ibia-legacy__rule {
	max-width: 912px;
	margin: 70px auto 0 !important;
	border: 0;
	border-top: 1px solid var(--ibia-rule);
	background: none;
	opacity: 1;
}

/* --- The sitting holder ----------------------------------
   A framework/person card at 320, centred, with the period
   where the green job-title line goes on Meet the Board. */

.ibia-legacy__current {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 0;
	margin: 55px 0 0 !important;
}

.ibia-legacy__current .fw-people__grid {
	display: flex;
	justify-content: center;
	grid-template-columns: none;
	margin: 0;
}

.ibia-legacy__current .fw-person {
	flex: 0 0 320px;
	--ibia-photo: 320px;
}

/* The sitting Director is lorem in the frame too, so that card
   has no photo at all — the block then renders no photo element
   and the disc has to come from here. Meet the Board's
   equivalent rule is scoped to its region grid and does not
   reach this page. */
.ibia-legacy__current .fw-person--no-photo::before {
	content: "";
	display: block;
	width: var(--ibia-photo);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 50%;
	background-color: #d9d9d9;
}

/* The frame puts the period ABOVE the name; the block renders
   name then role, so the role is reordered rather than the
   block being patched. */
.ibia-legacy__current .fw-person__body { display: flex; flex-direction: column; }
.ibia-legacy__current .fw-person__role { order: -1; margin: 16px 0 0 !important; }
.ibia-legacy__current .fw-person__name { margin: 10px 0 0 !important; }

/* --- Timeline rows --------------------------------------- */

.ibia-legacy {
	max-width: var(--ibia-inner);
	margin: 70px auto 0 !important;
	box-sizing: border-box;
}

/* Kill the .entry-content ul bullets and indent — but NOT the
   margin, which is what separates one row from the next. */
.entry-content .ibia-legacy ul {
	list-style: none;
	padding-left: 0;
}

.ibia-legacy__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--ibia-legacy-cols, 4), minmax(0, 1fr));
	margin: 0 0 90px;          /* the frame's 447 row pitch */
}

.ibia-legacy__row:last-child { margin-bottom: 0; }

/* The rule itself. On the frame's short row it stops at the
   last dot rather than running the full width. */
.ibia-legacy__row::before {
	content: "";
	position: absolute;
	top: 69px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--fw-green);
}

.ibia-legacy__row--short::before {
	right: calc(100% / var(--ibia-legacy-cols) / 2);
}

.ibia-legacy__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
	color: var(--fw-navy);
}

.ibia-legacy__years {
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
}

/* The tick between the period and the rule. */
.ibia-legacy__years::after {
	content: "";
	position: absolute;
	top: 35px;
	left: 50%;
	width: 1px;
	height: 14px;
	background-color: var(--fw-blue-grey);
	transform: translateX(-50%);
}

/* Same dot as the Milestones timeline. */
.ibia-legacy__dot {
	position: absolute;
	top: 55px;
	left: 50%;
	z-index: 1;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--fw-green);
	border: 6px solid rgba(var(--fw-green-rgb), 0.45);
	background-clip: padding-box;
	transform: translateX(-50%);
}

/* PLACEHOLDER: the frame carries no artwork for any of these. */
.ibia-legacy__photo {
	width: var(--ibia-legacy-photo);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-top: 46px;
	border-radius: 50%;
	background-color: #d9d9d9;
}

.ibia-legacy__name {
	margin-top: 24px;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
}

.ibia-legacy__title {
	margin-top: 6px;
	font-size: 18px;
	font-weight: var(--fw-weight-regular);
	line-height: 28px;
	color: var(--fw-green-dark);
}

/* --- Closing split (Frame 33) ----------------------------
   Text left on the page grid, image flush to the right edge.
   PLACEHOLDER: copy and image are both lorem/empty. */

.ibia-legacy__close {
	display: grid;
	grid-template-columns: 1fr 680px;
	align-items: center;
	column-gap: 80px;
	max-width: 1400px;
	margin: 90px auto 0 !important;
	box-sizing: border-box;
	color: var(--fw-navy);
}

.ibia-legacy__close-text { max-width: 560px; margin-block: 0 !important; }
.ibia-legacy__close-text > * { margin-block: 0 !important; }

.ibia-legacy__close-text h2 {
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
}

.ibia-legacy__close-text p {
	margin-top: 30px !important;
	font-weight: var(--fw-weight-light);
}

.ibia-legacy__close-media {
	height: 454px;
	margin: 0 !important;
	border-radius: var(--fw-radius) 0 0 var(--fw-radius);
	background-color: #d9d9d9;
}

/* --- Narrower screens ------------------------------------
   Not designed. The rows drop to two up and then one, and the
   rule goes with them. */

@media (max-width: 1100px) {
	.ibia-legacy__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 60px;
	}
	.ibia-legacy__row::before { display: none; }
	.ibia-legacy__dot { display: none; }
	.ibia-legacy__years::after { display: none; }
	.ibia-legacy__photo { margin-top: 16px; }
	.ibia-legacy__row { padding-top: 0; }
	.ibia-legacy__close { grid-template-columns: 1fr; row-gap: 40px; padding-inline: 20px; }
	.ibia-legacy__close-media { height: 300px; border-radius: var(--fw-radius); }
}

@media (max-width: 640px) {
	.ibia-legacy__row { grid-template-columns: 1fr; }
}

/* =========================================================
   News — Figma 3006:4996.

   Three lead cards at 440 with an excerpt, then four at 320
   without one, then the block's own paging. The category chip
   sits at the FOOT of the card, which the shared card helper
   does not do — flex order moves it.
   ========================================================= */

.ibia-news {
	max-width: var(--ibia-inner);
	margin: 45px auto 0 !important;
	box-sizing: border-box;
}

/* --- Filter bar (Rectangle 80 + 79 + Frame 10) ----------- */

.ibia-news-bar {
	display: flex;
	justify-content: flex-end;
	gap: 40px;
	margin-bottom: 40px;
}

.ibia-news-bar__cats select {
	box-sizing: border-box;
	width: 320px;
	height: 39px;
	padding: 0 34px 0 10px;
	border: 1px solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	appearance: none;
	-webkit-appearance: none;
	background-image: var(--ibia-nav-chevron);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 6px;
	cursor: pointer;
}

.ibia-news-bar__search { display: flex; }

.ibia-news-bar__search input {
	box-sizing: border-box;
	width: 355px;
	height: 39px;
	padding: 0 13px;
	border: 1px solid var(--fw-navy);
	border-right: 0;
	border-radius: var(--fw-radius) 0 0 var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	appearance: none;
	-webkit-appearance: none;
}

.ibia-news-bar__search input::placeholder { color: var(--fw-blue-grey); opacity: 1; }

.ibia-news-bar__search button {
	box-sizing: border-box;
	width: 90px;
	height: 39px;
	border: 0;
	border-radius: 0 var(--fw-radius) var(--fw-radius) 0;
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-family: inherit;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	cursor: pointer;
}

/* --- The listing ----------------------------------------- */

.ibia-news .fw-news-list { padding: 0; }
.ibia-news .fw-news-list__inner { max-width: none; margin: 0; }

/* The block's tab row is replaced by the dropdown in the bar
   above; it stays in the DOM because the dropdown drives it. */
.ibia-news .fw-news-list__tabs {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ibia-news .fw-news-list__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 60px 40px;
}

/* The first three run across the full width as large cards. */
.ibia-news .fw-news-list__card:nth-child(-n+3) { grid-column: span 4 / span 4; }

@supports (grid-template-columns: subgrid) {
	.ibia-news .fw-news-list__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.ibia-news .fw-news-list__card { grid-column: span 3; }
	.ibia-news .fw-news-list__card:nth-child(-n+3) { grid-column: span 4; }
}

.ibia-news .fw-news-list__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--fw-white);
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
}

.ibia-news .fw-news-list__image {
	display: block;
	width: 100%;
	aspect-ratio: 320 / 137;
	overflow: hidden;
	order: 1;
}

.ibia-news .fw-news-list__card:nth-child(-n+3) .fw-news-list__image { aspect-ratio: 440 / 187; }

.ibia-news .fw-news-list__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.ibia-news .fw-news-list__image-ph {
	display: block;
	width: 100%; height: 100%;
	background-color: #d9d9d9;
}

/* The helper prints badge + date together above the title. The
   frame wants the date there and the badge at the foot, so the
   meta row is unwrapped with flex order. */
.ibia-news .fw-news-list__meta {
	display: contents;
}

.ibia-news .fw-news-list__date {
	order: 2;
	margin: 21px 21px 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-news .fw-news-list__head {
	order: 3;
	margin: 20px 21px 0;
}

.ibia-news .fw-news-list__title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-weight-regular);
	line-height: 26px;
	color: var(--fw-navy);
}

.ibia-news .fw-news-list__title a { color: inherit; text-decoration: none; }
.ibia-news .fw-news-list__title a:hover { text-decoration: underline; }

/* The frame's cards carry no arrow. */
.ibia-news .fw-news-list__arrow { display: none; }

.ibia-news .fw-news-list__excerpt {
	order: 4;
	margin: 24px 21px 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* Only the three lead cards show one. */
.ibia-news .fw-news-list__card:nth-child(n+4) .fw-news-list__excerpt { display: none; }

.ibia-news .fw-news-list__badge {
	order: 5;
	margin: auto 21px 21px;      /* auto pushes it to the foot */
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 11px;
	color: var(--fw-navy);
}

.ibia-news .fw-news-list__card[hidden] { display: none !important; }

.ibia-news__empty {
	margin: 40px 0 0;
	text-align: center;
	font-size: 18px;
	font-weight: var(--fw-weight-light);
	color: var(--fw-navy);
}

.ibia-news__empty[hidden] { display: none; }

.entry-content > .ibia-band--bulletin { margin-block: 60px 0 !important; }

/* --- Narrower screens ------------------------------------ */

@media (max-width: 1100px) {
	.ibia-news-bar { flex-wrap: wrap; justify-content: stretch; gap: 20px; }
	.ibia-news-bar__cats select,
	.ibia-news-bar__search input { width: 100%; }
	.ibia-news-bar__search { flex: 1 1 320px; }
	.ibia-news .fw-news-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ibia-news .fw-news-list__card,
	.ibia-news .fw-news-list__card:nth-child(-n+3) { grid-column: span 1; }
}

@media (max-width: 640px) {
	.ibia-news .fw-news-list__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   News Article — Figma 3006:5078.

   920 article column beside a 440 Categories panel, then a
   Related News row using the same card as the News page.
   ========================================================= */

.ibia-article {
	max-width: var(--ibia-inner);
	margin: 38px auto 0 !important;
	box-sizing: border-box;
}

.ibia-article__inner {
	display: grid;
	grid-template-columns: minmax(0, 920fr) 440px;
	column-gap: 40px;
	align-items: start;
}

/* --- The article ----------------------------------------- */

.ibia-article__main > * { margin-block: 0; }

.ibia-article__hero {
	margin: 0;
	aspect-ratio: 920 / 395;
	overflow: hidden;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
}

.ibia-article__hero img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.ibia-article__hero--empty { background-color: #d9d9d9; }

/* Date left, category chip right, on one line. */
.ibia-article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 27px;
}

.ibia-article__date {
	margin: 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-article__chip {
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 11px;
	color: var(--fw-navy);
}

.ibia-article__title {
	margin-top: 30px !important;
	max-width: 800px;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-article__body {
	margin-top: 34px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-article__body > *:first-child { margin-top: 0; }

.ibia-article__rule {
	margin: 49px 0 0;
	border: 0;
	border-top: 1px solid var(--ibia-rule);
	background: none;
	opacity: 1;
}

/* --- Share row + Back To News ---------------------------- */

.ibia-article__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 35px;
}

.ibia-article__share { display: flex; align-items: center; gap: 10px; }

.ibia-article__share-label {
	margin-right: 5px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-article__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}

.ibia-article__share-link:hover,
.ibia-article__share-link:focus-visible {
	background-color: var(--fw-green);
	color: var(--fw-navy);
}

.ibia-article__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-article__back:hover,
.ibia-article__back:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

/* --- Categories panel (News Categories, 704:1737) --------
   The component was styled when it was first sent; this is
   the first thing on the site that uses it. */

.ibia-article__cats {
	box-sizing: border-box;
	padding: 22px 20px 20px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
}

.ibia-article__cats-title {
	margin: 0 0 17px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-regular);
	line-height: 28px;
	color: var(--fw-navy);
}

.entry-content .ibia-article__cats ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* --- Related News ---------------------------------------- */

.ibia-related {
	max-width: var(--ibia-inner);
	margin: 96px auto 0 !important;
	box-sizing: border-box;
}

.ibia-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 40px;
}

.ibia-related__title {
	margin: 8px 0 0;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-related__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-related__all:hover,
.ibia-related__all:focus-visible {
	background-color: var(--fw-white);
	border: var(--fw-btn-border) solid var(--fw-navy);
	color: var(--fw-navy);
}

/* The card is the News page's, so the two cannot drift. */
.ibia-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.ibia-related .fw-news-list__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--fw-white);
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
}

.ibia-related .fw-news-list__image { display: block; width: 100%; aspect-ratio: 320 / 137; overflow: hidden; order: 1; }
.ibia-related .fw-news-list__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ibia-related .fw-news-list__image-ph { display: block; width: 100%; height: 100%; background-color: #d9d9d9; }
.ibia-related .fw-news-list__meta { display: contents; }
.ibia-related .fw-news-list__date { order: 2; margin: 21px 21px 0; font-size: var(--fw-body-size); font-weight: var(--fw-weight-light); line-height: 28px; color: var(--fw-navy); }
.ibia-related .fw-news-list__head { order: 3; margin: 20px 21px 0; }
.ibia-related .fw-news-list__title { margin: 0; font-size: 18px; font-weight: var(--fw-weight-regular); line-height: 26px; color: var(--fw-navy); }
.ibia-related .fw-news-list__title a { color: inherit; text-decoration: none; }
.ibia-related .fw-news-list__title a:hover { text-decoration: underline; }
.ibia-related .fw-news-list__arrow { display: none; }
.ibia-related .fw-news-list__excerpt { display: none; }
.ibia-related .fw-news-list__badge {
	order: 5;
	margin: auto 21px 21px;
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 11px;
	color: var(--fw-navy);
}

/* --- Narrower screens ------------------------------------ */

@media (max-width: 1100px) {
	.ibia-article__inner { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ibia-related__grid { grid-template-columns: 1fr; }
	.ibia-article__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
	.ibia-related__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* =========================================================
   Membership — Figma 3006:4871.
   Accordion behaviour from the component set 3006:8458.

   Band widths are taken straight from the frame rather than
   forced to --ibia-inner, because this page uses three of
   them: 1320 (the two image splits), 1241 (Who We Represent
   and the KYC callout) and 1400 (map + testimonials).
   ========================================================= */

/* On :root since 2026-09-16 — the .ibia-mem wrapper went with the raw page;
   the tier band, callout and testimonial rules still read these. */
:root,
.ibia-mem {
	--ibia-mem-bluegrey: rgba(148, 159, 179, 0.2);
	--ibia-mem-lightgreen: #a3c362;
	--ibia-mem-darkgreen: #607d36;
}

/* A full-bleed row; the inner element carries the width.
   Do NOT set margin-inline here — alignfull's breakout is a
   negative inline margin and any margin-inline of our own
   cancels it, leaving the band inset by the root padding. */
.ibia-mem-row {
	box-sizing: border-box;
	padding-inline: 0;
}

.ibia-mem-in {
	margin-inline: auto;
	box-sizing: border-box;
	padding-inline: 20px;
}

.ibia-mem-in--1320 { max-width: 1360px; }
.ibia-mem-in--1241 { max-width: 1281px; }
.ibia-mem-in--1400 { max-width: 1440px; }

/* --- Shared section heading (eyebrow + H2) ---------------- */

.ibia-mem-head__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-mem-head__title {
	margin: 8px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

/* =========================================================
   Image + text split (hero, and Why Join mirrored)
   ========================================================= */

.ibia-mem-split {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	column-gap: 80px;
	align-items: center;
}

/* Why Join puts the image first. */
.ibia-mem-split--rev { grid-template-columns: minmax(0, 1fr) 560px; }

.ibia-mem-split__img {
	margin: 0;
	aspect-ratio: 680 / 454;
	overflow: hidden;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
}

.ibia-mem-split__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ibia-mem-split__text > *:first-child { margin-top: 0 !important; }

.ibia-mem-split__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-mem-split__body {
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-mem-split__cta { margin-top: 38px; }

.ibia-mem-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 56px;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-mem-cta:hover,
.ibia-mem-cta:focus-visible {
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

/* =========================================================
   Accordion — component set 3006:8458.

   Closed: label + down arrow, hairline rule beneath.
   Open:   arrow flips up, a bulleted list drops in.
   The two columns are independent stacks, so one opening
   does not push the other column down.
   ========================================================= */

.ibia-acc-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 121px;
	align-items: start;
}

/* Why Join is a single column, under its own heading. */
.ibia-acc--single { display: block; margin-top: 47px; }

.ibia-acc__item + .ibia-acc__item { margin-top: 24px; }

.ibia-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0 0 20px;
	border: 0;
	border-bottom: 1px solid var(--ibia-acc-rule, rgba(1, 53, 99, 0.25));
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
	color: var(--fw-navy);
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ibia-acc__head:hover .ibia-acc__label,
.ibia-acc__head:focus-visible .ibia-acc__label { text-decoration: underline; }

.ibia-acc__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 21px;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='21' viewBox='0 0 14 21'%3E%3Cpath d='M7 0v19M1 13l6 7 6-7' fill='none' stroke='%23013563' stroke-width='1.5'/%3E%3C/svg%3E");
	transition: transform 0.18s ease;
}

.ibia-acc__head[aria-expanded="true"] .ibia-acc__icon { transform: rotate(180deg); }

.ibia-acc__panel { padding-top: 18px; }

.ibia-acc__panel[hidden] { display: none; }

/* The framework's .entry-content list rule would put its own
   bullets and padding on these — reset list-style and padding
   ONLY, never margin, or the row rhythm collapses. */
.entry-content .ibia-acc__panel ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.ibia-acc__panel li {
	position: relative;
	padding-left: 20px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-acc__panel li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor;
}

/* Rows whose bullet list has not been supplied yet. */
.ibia-acc__todo {
	margin: 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	font-style: italic;
	line-height: 28px;
	color: var(--fw-navy);
	opacity: 0.6;
}

/* =========================================================
   Who We Represent — light green band
   ========================================================= */

.ibia-mem-represent {
	background-color: var(--ibia-mem-lightgreen);
	padding-block: 56px 60px;
	--ibia-acc-rule: rgba(1, 53, 99, 0.35);
}

.ibia-mem-represent__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-mem-represent__intro {
	max-width: 799px;
	margin: 30px 0 48px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* =========================================================
   Members of IBIA — the map is Owen's, so this reserves the
   space and keeps the heading, sub-line and counter.
   ========================================================= */

.ibia-mem-map__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-mem-map__sub {
	margin: 22px 0 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-mem-map__stage {
	position: relative;
	margin-top: 40px;
	aspect-ratio: 1400 / 767;
	border-radius: var(--fw-radius);
	background-color: #d9d9d9;
}

.ibia-mem-map__note {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
	opacity: 0.6;
}

.ibia-mem-map__counter {
	position: absolute;
	right: 20px;
	top: 20px;
	box-sizing: border-box;
	width: 237px;
	padding: 16px 20px 20px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
	text-align: center;
}

.ibia-mem-map__count {
	margin: 0;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34px;
	color: var(--fw-navy);
}

.ibia-mem-map__count-label {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

/* =========================================================
   Membership tiers — Blue Grey 5 @ 20% band, two 520 cards
   ========================================================= */

.ibia-mem-tiers,
.fw-banner.is-style-ibia-tiers {
	background-color: var(--ibia-mem-bluegrey);
	padding-block: 45px 56px;
	text-align: center;
}

.ibia-mem-tiers__head { text-align: center; }

.ibia-mem-tiers__eyebrow,
.fw-banner.is-style-ibia-tiers .is-style-ibia-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-mem-tiers__title,
.fw-banner.is-style-ibia-tiers > .fw-banner__inner > h2 {
	margin: 8px 0 0 !important;
	font-size: 24px;
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-mem-tiers__grid,
.fw-banner.is-style-ibia-tiers .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(2, 520px);
	justify-content: center;
	gap: 40px;
	margin-top: 63px;
}

.ibia-mem-tier,
.is-style-ibia-tier {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 34px 40px 40px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
	text-align: center;
}

.ibia-mem-tier__name,
.is-style-ibia-tier > h3 {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 24px;
	color: var(--fw-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ibia-mem-tier__lead,
.is-style-ibia-tier > p {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ibia-rule);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* 2026-10-13: the editor canvas has no .entry-content, so it also names .editor-styles-wrapper
   (same weight); without it the tier lists showed bullets in the editor only. */
.entry-content .ibia-mem-tier ul,
:is(.entry-content, .editor-styles-wrapper) .is-style-ibia-tier ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.ibia-mem-tier li,
.is-style-ibia-tier li {
	padding: 12px 0;
	border-bottom: 1px solid var(--ibia-rule);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-mem-tier__cta,
.is-style-ibia-tier .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	align-self: center;
	height: 39px;
	margin-top: auto;
	padding: 0 20px;
	border-radius: var(--fw-radius);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-mem-tier__cta--outline {
	border: var(--fw-btn-border) solid var(--fw-navy);
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

.ibia-mem-tier__cta--outline:hover,
.ibia-mem-tier__cta--outline:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

.ibia-mem-tier__cta--green {
	background-color: var(--ibia-mem-lightgreen);
	color: var(--fw-navy);
}

.ibia-mem-tier__cta--green:hover,
.ibia-mem-tier__cta--green:focus-visible {
	background-color: var(--ibia-mem-darkgreen);
	color: var(--fw-white);
}

/* The two buttons sit on the same line, as in the frame (both at
   y=3403). The list absorbs the free space rather than the anchor
   relying on margin-top:auto, which the entry-content link rules
   were overriding. */
.ibia-mem-tier__list,
.is-style-ibia-tier > ul {
	flex: 1 1 auto;
	margin-bottom: 33px !important;
}

.ibia-mem-tier__cta,
.is-style-ibia-tier .wp-block-button__link { margin-top: auto !important; }

/* =========================================================
   Member testimonials
   ========================================================= */

.ibia-mem-testi__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-top: 69px;
	align-items: stretch;
}

.ibia-mem-testi__card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin-top: 32px;
	padding: 68px 24px 24px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
}

/* The quote badge overhangs the top edge of the card. */
.ibia-mem-testi__mark {
	position: absolute;
	left: 162px;
	top: -32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: var(--fw-radius);
	background-color: var(--ibia-mem-lightgreen);
	font-size: 60px;
	line-height: 0.9;
	color: var(--fw-white);
	font-family: Georgia, "Times New Roman", serif;
}

.ibia-mem-testi__mark span { transform: translateY(0.22em); }

.ibia-mem-testi__quote {
	margin: 0 0 40px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	font-style: italic;
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-mem-testi__by {
	display: flex;
	align-items: center;
	gap: 17px;
	margin-top: auto;
}

.ibia-mem-testi__avatar {
	flex: 0 0 auto;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background-color: #d9d9d9;
}

.ibia-mem-testi__who { min-width: 0; }

.ibia-mem-testi__name {
	margin: 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 22px;
	color: var(--fw-navy);
}

.ibia-mem-testi__role {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-mem-testi__nav {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 58px;
}

.ibia-mem-testi__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	border: 1px solid var(--ibia-mem-lightgreen);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ibia-mem-testi__arrow:hover,
.ibia-mem-testi__arrow:focus-visible {
	background-color: var(--ibia-mem-lightgreen);
	color: var(--fw-white);
}

/* =========================================================
   KYC callout
   ========================================================= */

.ibia-mem-kyc,
.ibia-callout {
	position: relative;
	box-sizing: border-box;
	padding: 43px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: var(--ibia-mem-bluegrey);
}

.ibia-mem-kyc__head,
.ibia-callout__head {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.ibia-mem-kyc__icon,
.ibia-callout__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background-color: var(--ibia-mem-darkgreen);
	color: var(--fw-white);
	font-size: 24px;
	line-height: 1;
}

.ibia-mem-kyc__eyebrow,
.ibia-callout > .is-style-ibia-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-mem-kyc__title,
.ibia-callout > h2 {
	margin: 0 !important;
	font-size: 24px;
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-mem-kyc__body,
.ibia-callout > p:not(.is-style-ibia-eyebrow) {
	margin: 24px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
	opacity: 0.9;
}

.ibia-mem-kyc__note,
.ibia-callout > p:not(.is-style-ibia-eyebrow) + p {
	margin: 21px 0 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
	opacity: 0.75;
}

/* =========================================================
   Narrower screens
   ========================================================= */

@media (max-width: 1280px) {
	.ibia-acc-cols { column-gap: 60px; }
	.ibia-mem-tiers__grid,
.fw-banner.is-style-ibia-tiers .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ibia-mem-testi__mark { left: 24px; }
}

@media (max-width: 1024px) {
	.ibia-mem-split,
	.ibia-mem-split--rev { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-mem-split--rev .ibia-mem-split__text { order: 2; }

	/* Below three-across the arrows drive a scroller. */
	.ibia-mem-testi__grid {
		grid-auto-flow: column;
		grid-auto-columns: minmax(320px, 1fr);
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		scrollbar-width: none;
	}
	.ibia-mem-testi__grid::-webkit-scrollbar { display: none; }
	.ibia-mem-testi__card { scroll-snap-align: start; }
}

@media (max-width: 782px) {
	.ibia-acc-cols { grid-template-columns: 1fr; row-gap: 24px; }
	.ibia-mem-tiers__grid,
.fw-banner.is-style-ibia-tiers .wp-block-columns { grid-template-columns: 1fr; }
	.ibia-mem-tier,
.is-style-ibia-tier { padding: 28px 24px 32px; }
	.ibia-mem-map__counter { position: static; width: auto; margin-top: 20px; }
	.ibia-mem-kyc,
.ibia-callout { padding: 28px 24px; }
}

/* =========================================================
   IMO — Figma 3006:5382.

   Reuses the accordion from Membership (3006:8458) and the
   news card from the News page. The generic .ibia-row /
   .ibia-in helpers below are the un-prefixed version of
   Membership's .ibia-mem-row / .ibia-mem-in — fold those
   into these when ibia.css is next tidied.
   ========================================================= */

/* --- Generic full-bleed row + width-capped inner ---------
   Never set margin-inline on .ibia-row: alignfull's breakout
   IS a negative inline margin and any of our own cancels it. */

.ibia-row {
	box-sizing: border-box;
	padding-inline: 0;
}

.ibia-in {
	margin-inline: auto;
	box-sizing: border-box;
	padding-inline: 20px;
}

.ibia-in--1240 { max-width: 1280px; }
.ibia-in--1320 { max-width: 1360px; }
.ibia-in--1330 { max-width: 1370px; }
.ibia-in--1400 { max-width: 1440px; }

/* --- Title band, turquoise eyebrow ------------------------
   The shared band already carries a white eyebrow; this page
   draws it in Turquoise. */

.ibia-titleband--turquoise .ibia-titleband__eyebrow {
	color: var(--fw-turquoise, #9adbca);
	font-weight: var(--fw-weight-regular);
}

/* =========================================================
   Image + text splits
   ========================================================= */

.ibia-imo-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 560px;
	column-gap: 80px;
	align-items: center;
}

/* "Why IMO Representation Matters" puts the text first. */
.ibia-imo-split--rev { grid-template-columns: 560px minmax(0, 1fr); }

.ibia-imo-split__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 680 / 454;
	overflow: hidden;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
}

.ibia-imo-split__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The photo credit reuses .fw-split__credit — the tag built for
   the homepage's IMO image, inset 12px inside the picture and
   sized to its content. Nothing extra is needed here; the
   figure below is already the positioning context. */

.ibia-imo-split__text > *:first-child { margin-top: 0 !important; }

.ibia-imo-split__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-imo-split__body {
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-imo-split__body + .ibia-imo-split__body { margin-top: 28px; }

/* =========================================================
   What IBIA Does at the IMO — light green band
   ========================================================= */

.ibia-imo-band {
	background-color: #a3c362;
	padding-block: 41px 60px;
	--ibia-acc-rule: rgba(1, 53, 99, 0.35);
}

.ibia-imo-band__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-imo-band__title {
	margin: 8px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-imo-band__intro {
	max-width: 960px;
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-imo-band__intro + .ibia-imo-band__intro { margin-top: 28px; }

.ibia-imo-band .ibia-acc-cols { margin-top: 65px; }

/* =========================================================
   Key Areas of Focus
   ========================================================= */

.ibia-imo-focus,
.is-style-ibia-panel {
	box-sizing: border-box;
	padding: 35px 45px 40px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: #f5f7fa;
	box-shadow: var(--fw-shadow-card);
}

.ibia-imo-focus__title,
.is-style-ibia-panel > h2 {
	margin: 0 0 28px !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

/* Columns are 600 wide with a 40 gutter, as the frame draws
   them (badges at 100/740, text at 148/788). A wider gutter
   makes item 1 wrap onto two lines; all six are single lines
   in the design. */
.entry-content .ibia-imo-focus ol,
.entry-content .is-style-ibia-panel ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	grid-auto-flow: column;
	grid-template-rows: repeat(3, auto);
	list-style: none;
	margin: 0;
	padding-left: 0;
	counter-reset: ibia-focus;
}

.ibia-imo-focus li,
.is-style-ibia-panel li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 0 0 21px;
	counter-increment: ibia-focus;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
	color: var(--fw-navy);
}

/* A rule under every row except the last of each column. */
.ibia-imo-focus li:not(:nth-child(3n)) > span:last-child,
.is-style-ibia-panel li:not(:nth-child(3n)) > span:last-child {
	border-bottom: 1px solid var(--ibia-rule);
}

.ibia-imo-focus li::before,
.is-style-ibia-panel li::before {
	content: counter(ibia-focus);
	flex: 0 0 auto;
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: var(--fw-radius);
	background-color: #a3c362;
	font-size: 24px;
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	color: var(--fw-white);
}

.ibia-imo-focus li > span:last-child,
.is-style-ibia-panel li > span:last-child {
	flex: 1 1 auto;
	padding-bottom: 14px;
}

/* =========================================================
   IMO Submissions
   ========================================================= */

.ibia-imo-subs__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-imo-subs__body {
	max-width: 918px;
	margin: 35px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-imo-subs__body + .ibia-imo-subs__body { margin-top: 28px; }

/* --- The four committee cards ---------------------------- */

.ibia-imo-committees,
.is-style-ibia-committee .fw-icons__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin-top: 51px;
}

.ibia-imo-committee,
.is-style-ibia-committee .fw-icon-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: rgba(148, 159, 179, 0.12);
	box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.09);
}

.ibia-imo-committee__icon,
.is-style-ibia-committee .fw-icon-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	border-radius: 6px;
	background-color: #607d36;
}

.ibia-imo-committee__icon img,
.is-style-ibia-committee .fw-icon-card__icon img { display: block; width: 26px; height: 26px; }

/* 4px, not the frame's 11 — Ubuntu's half-leading adds ~7px
   of its own above the capitals, so 11 here reads as 18. */
.ibia-imo-committee__acronym,
.is-style-ibia-committee .fw-icon-card__body h3 {
	margin: 4px 0 0;
	font-size: 24px;
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-imo-committee__name,
.is-style-ibia-committee .fw-icon-card__body p {
	margin: 15px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* The wrapper is the flex item, so it carries the auto margin
   that bottom-aligns all four buttons on the same line. */
.ibia-imo-committee__cta-wrap,
.is-style-ibia-committee .wp-block-buttons { margin-top: auto; }

.ibia-imo-committee__cta,
.is-style-ibia-committee .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-imo-committee__cta:hover,
.ibia-imo-committee__cta:focus-visible,
.is-style-ibia-committee .wp-block-button__link:hover,
.is-style-ibia-committee .wp-block-button__link:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

/* The button carries margin-top:auto, so slack collects in one
   place. The name must NOT also grow, or the gap above the
   button is counted twice. */
.ibia-imo-committee__name,
.is-style-ibia-committee .fw-icon-card__body p { flex: 0 0 auto; }

/* =========================================================
   Insights — IMO Monthly Reports
   One 680 featured card beside a 2 x 2 grid of 320s.
   ========================================================= */

.ibia-imo-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 42px;
}

.ibia-imo-news__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-imo-news__title {
	margin: 8px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-imo-news__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-imo-news__all:hover,
.ibia-imo-news__all:focus-visible {
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

.ibia-imo-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 680fr) minmax(0, 320fr) minmax(0, 320fr);
	grid-template-rows: auto auto;
	gap: 40px;
}

.ibia-imo-news__featured { grid-row: span 2; }

/* Card shell, shared by both sizes. */
.ibia-imo-news .fw-news-list__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--fw-white);
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
	height: 100%;
}

.ibia-imo-news .fw-news-list__image { display: block; width: 100%; overflow: hidden; order: 1; }
.ibia-imo-news .fw-news-list__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ibia-imo-news .fw-news-list__image-ph { display: block; width: 100%; height: 100%; background-color: #d9d9d9; }
.ibia-imo-news .fw-news-list__meta { display: contents; }
.ibia-imo-news .fw-news-list__arrow { display: none; }

/* The card markup is embedded in post_content, so wpautop
   wraps its newlines in empty paragraphs. The builder strips
   the newlines; this is the belt to that braces. */
.ibia-imo-news .fw-news-list__card > p:empty { display: none; }

.ibia-imo-news .fw-news-list__date {
	order: 2;
	margin: 21px 21px 0;
	font-size: 14px;
	font-weight: var(--fw-weight-light);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-imo-news .fw-news-list__head { order: 3; margin: 20px 21px 0; }
.ibia-imo-news .fw-news-list__title { margin: 0; font-weight: var(--fw-weight-regular); color: var(--fw-navy); }
.ibia-imo-news .fw-news-list__title a { color: inherit; text-decoration: none; }
.ibia-imo-news .fw-news-list__title a:hover { text-decoration: underline; }
.ibia-imo-news .fw-news-list__excerpt { order: 4; display: none; }

.ibia-imo-news .fw-news-list__badge {
	order: 5;
	margin: auto 21px 21px;
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 11px;
	color: var(--fw-navy);
}

/* Featured card — taller image, bigger title, excerpt shown. */
.ibia-imo-news__featured .fw-news-list__image { aspect-ratio: 680 / 290; }
.ibia-imo-news__featured .fw-news-list__date { margin-top: 31px; }
.ibia-imo-news__featured .fw-news-list__title { font-size: 20px; line-height: 30px; }
.ibia-imo-news__featured .fw-news-list__excerpt {
	display: block;
	margin: 30px 21px 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* Small cards. */
.ibia-imo-news__small .fw-news-list__image { aspect-ratio: 320 / 137; }
.ibia-imo-news__small .fw-news-list__title { font-size: 16px; line-height: 20px; }

/* =========================================================
   Paragraph margins, re-asserted.

   Every <p> here sits inside .entry-content, whose own `p`
   rule is (0,1,1) and beats a bare class. Without this the
   committee cards open with a 36px gap under the icon
   instead of 11, and the body copy drifts everywhere else.
   ========================================================= */

.entry-content .ibia-imo-split__body { margin: 30px 0 0; }
.entry-content .ibia-imo-split__body + .ibia-imo-split__body { margin-top: 28px; }
.entry-content .fw-split__credit { margin: 0; }

.entry-content .ibia-imo-band__eyebrow { margin: 0; }
.entry-content .ibia-imo-band__intro { margin: 30px 0 0; }
.entry-content .ibia-imo-band__intro + .ibia-imo-band__intro { margin-top: 28px; }

.entry-content .ibia-imo-subs__body { margin: 35px 0 0; }
.entry-content .ibia-imo-subs__body + .ibia-imo-subs__body { margin-top: 28px; }

/* 4px, not the frame's 11 — Ubuntu's half-leading adds ~7px
   of its own above the capitals, so 11 here reads as 18. */
.entry-content .ibia-imo-committee__acronym,
.entry-content .is-style-ibia-committee .fw-icon-card__body h3 { margin: 4px 0 0; }
.entry-content .ibia-imo-committee__name,
.entry-content .is-style-ibia-committee .fw-icon-card__body p { margin: 13px 0 20px; }

.entry-content .ibia-imo-news__eyebrow { margin: 0; }

/* =========================================================
   Narrower screens
   ========================================================= */

@media (max-width: 1200px) {
	.ibia-imo-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ibia-imo-news__featured { grid-row: auto; grid-column: span 2; }
	.ibia-imo-news__featured .fw-news-list__image { aspect-ratio: 680 / 220; }
	.ibia-imo-committees,
.is-style-ibia-committee .fw-icons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.entry-content .ibia-imo-focus ol,
.entry-content .is-style-ibia-panel ol { column-gap: 48px; }
}

@media (max-width: 1024px) {
	.ibia-imo-split,
	.ibia-imo-split--rev { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-imo-split__text { order: 2; }
	.ibia-acc-cols { column-gap: 60px; }
}

@media (max-width: 782px) {
	.ibia-imo-news__grid,
.ibia-imo-committees,
.is-style-ibia-committee .fw-icons__grid { grid-template-columns: 1fr; }
	.ibia-imo-news__featured { grid-column: auto; }
	.ibia-acc-cols { grid-template-columns: 1fr; row-gap: 24px; }
	.ibia-imo-focus,
.is-style-ibia-panel { padding: 28px 24px 32px; }
	.entry-content .ibia-imo-focus ol,
.entry-content .is-style-ibia-panel ol {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: none;
	}
	.ibia-imo-focus li:not(:nth-child(3n)) > span:last-child,
.is-style-ibia-panel li:not(:nth-child(3n)) > span:last-child { border-bottom: 0; }
	.ibia-imo-focus li:not(:last-child) > span:last-child,
.is-style-ibia-panel li:not(:last-child) > span:last-child { border-bottom: 1px solid var(--ibia-rule); }
	.ibia-imo-news__head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Resources — Figma 635:303.

   The filter sidebar is the Events one (.ibia-filters), which
   already matches this frame control for control: 219+70
   search, 48.5 x 26 year chips, small and large checkbox
   lists, Show More, and a 135 x 39 Apply button. Nothing of
   it is redefined here.

   New here: the resource card, which uses an 8px radius all
   round rather than the site's 4/30 corner.
   ========================================================= */

.ibia-res__intro {
	max-width: 918px;
	margin: 28px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* --- Results column beside the filters -------------------- */

.ibia-res {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 319px;
	column-gap: 41px;
	align-items: start;
	margin-top: 44px;
}

/* --- Showing N of M, and the sort control ----------------- */

.ibia-res__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 40px;
	margin-bottom: 22px;
}

.ibia-res__count {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: #6b7a90;
}

/* Only the number is navy. */
.ibia-res__count strong {
	font-weight: var(--fw-weight-regular);
	color: var(--fw-navy);
}

.ibia-res__sort {
	box-sizing: border-box;
	width: 220px;
	height: 40px;
	padding: 0 34px 0 15px;
	border: 1px solid var(--ibia-res-hairline, #e3e7ee);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231a2a40' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: #1a2a40;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* --- The grid --------------------------------------------- */

.ibia-res__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 41px;
	align-items: stretch;
}

.ibia-res__empty {
	margin: 0;
	padding: 40px 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-res__empty[hidden] { display: none; }

/* =========================================================
   Resource card

   Two variants share everything below the media block: a 52px
   green type tile, or a 279 x 157 tinted well holding the
   publication's cover. The meta / rule / button block is
   pushed to the bottom so cards in a row end together.
   ========================================================= */

.ibia-res-card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 19px 20px 17px;
	border-radius: 8px;
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
}

.ibia-res-card[hidden] { display: none; }

/* Green tile with a white outline glyph. */
.ibia-res-card__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	background-color: #607d36;
}

.ibia-res-card__tile img { display: block; width: 28px; height: 28px; }

/* Cover well — the artwork is contained, not cropped, because
   these are portrait publication covers in a landscape box. */
.ibia-res-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 157px;
	border-radius: var(--fw-radius);
	background-color: rgba(148, 159, 179, 0.2);
}

.ibia-res-card__thumb img {
	display: block;
	width: auto;
	height: 135px;
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--fw-radius) var(--fw-radius) 0 0;
}

.ibia-res-card__badge {
	position: absolute;
	right: 20px;
	top: 19px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 27px;
	padding: 0 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
}

.ibia-res-card__kind {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-res-card__title {
	margin: 10px 0 0 !important;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* Everything below sits on the card's bottom edge. */
.ibia-res-card__meta {
	margin: auto 0 0;
	padding-top: 24px;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: #5a6980;
}

.ibia-res-card__rule {
	margin: 19px 0 0;
	border: 0;
	border-top: 1px solid var(--ibia-res-hairline, #e3e7ee);
	background: none;
	opacity: 1;
}

.ibia-res-card__cta-wrap { margin-top: 22px; }

.ibia-res-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-res-card__cta:hover,
.ibia-res-card__cta:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

/* --- Topic list nests two levels ------------------------- */

.ibia-filters__checks .is-sub { margin-left: 32px; }

/* =========================================================
   Paragraph margins, re-asserted.
   .entry-content p is (0,1,1) and beats a bare class.
   ========================================================= */

.entry-content .ibia-res__intro { margin: 28px 0 0; }
.entry-content .ibia-res__count { margin: 0; }
.entry-content .ibia-res-card__kind { margin: 8px 0 0; }
.entry-content .ibia-res-card__meta { margin: auto 0 0; }

/* =========================================================
   Narrower screens
   ========================================================= */

@media (max-width: 1200px) {
	.ibia-res { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 30px; }
	.ibia-res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.ibia-res { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-res__side { order: -1; }
}

@media (max-width: 640px) {
	.ibia-res__grid { grid-template-columns: 1fr; }
	.ibia-res__topbar { flex-direction: column; align-items: flex-start; gap: 16px; }
	.ibia-res__sort { width: 100%; }
}

/* =========================================================
   World Bunkering — Figma 3006:5296.

   The four magazine cards ARE the Resources card
   (.ibia-res-card, thumbnail variant) with "Magazine" as the
   kind instead of "Publication" — nothing of it is redefined
   here. The generic .ibia-row / .ibia-in helpers come from
   the IMO stylesheet.
   ========================================================= */

/* --- Shared section heading (eyebrow + H2) ---------------- */

.ibia-wb-head__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-wb-head__title {
	margin: 8px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

/* =========================================================
   Hero — copy left, the fanned covers right
   ========================================================= */

.ibia-wb-hero {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	column-gap: 119px;
	align-items: center;
}

.ibia-wb-hero__title {
	margin: 30px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-wb-hero__body {
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* 28px, not the frame's 30: our buttons carry a 1px border the
   frame's filled variant does not, so three of them plus 30px
   gutters come to 561 in a 560 column and the last one wraps. */
.ibia-wb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 30px;
}

/* --- The fanned covers ------------------------------------
   Three SEPARATE images, not one flat export: the frame's Dev
   Mode annotation asks for them to be loadable from the back
   end so they can be updated to the latest covers, which a
   composite makes impossible.

   Geometry is derived from the frame. Each cover is a portrait
   0.707 rectangle; Figma reports only the rotated bounding
   boxes, so the angles come from the box ratios — 0deg, 15deg
   and 30deg — and each is placed by the centre of its box.
   The stage clips, exactly as Frame 21 does. */

.ibia-wb-fan {
	position: relative;
	margin: 0;
	aspect-ratio: 559 / 496;
	overflow: hidden;
}

.ibia-wb-fan__stage {
	position: absolute;
	inset: 0;
}

.ibia-wb-fan__item {
	position: absolute;
	transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
	transform-origin: center;
}

.ibia-wb-fan__item img {
	display: block;
	width: auto;
	height: 100%;
	box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.3);
}

/* Back to front, measured off the frame rather than derived from
   the bounding boxes Figma reports — those boxes belong to the
   image-filled rectangles, not to pure rotations of a cover, and
   solving them gave 15 and 30 degrees, roughly double the truth. */
.ibia-wb-fan__item--3 { --rot: 19deg; left: 73%;   top: 51%;   height: 86%;   z-index: 1; }
.ibia-wb-fan__item--2 { --rot: 10deg; left: 52%;   top: 48%;   height: 88%;   z-index: 2; }
.ibia-wb-fan__item--1 { --rot: 0deg;  left: 28.9%; top: 52.2%; height: 91.9%; z-index: 3; }

/* --- Navy filled button, used three times in the hero ---- */

.ibia-wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-wb-btn:hover,
.ibia-wb-btn:focus-visible {
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

.ibia-wb-btn--outline {
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

.ibia-wb-btn--outline:hover,
.ibia-wb-btn--outline:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

/* =========================================================
   Past magazines — four Resources cards in a row
   ========================================================= */

.ibia-wb-mags__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin-top: 47px;
	align-items: stretch;
}

/* --- Prev / next, 41 x 41 -------------------------------
   Same control as the Membership testimonials; defined here
   without the page prefix so the next page can use it. */

.ibia-arrows {
	display: flex;
	justify-content: center;
	gap: 61px;
	margin-top: 45px;
}

.ibia-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	border: 1px solid var(--ibia-ev-hairline, #e3e7ee);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ibia-arrow:hover,
.ibia-arrow:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

.ibia-arrow[disabled] { opacity: .4; cursor: default; }

.ibia-arrow[disabled]:hover {
	background-color: var(--fw-white);
	color: var(--fw-navy);
}

/* =========================================================
   Booking — image left, contact details right
   ========================================================= */

.ibia-wb-booking {
	display: grid;
	grid-template-columns: 680fr 560fr;
	column-gap: 80px;
	align-items: center;
}

.ibia-wb-booking__figure {
	margin: 0;
	aspect-ratio: 680 / 454;
	overflow: hidden;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
}

.ibia-wb-booking__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ibia-wb-booking__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-wb-contact {
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-wb-contact + .ibia-wb-contact { margin-top: 10px; }

.ibia-wb-contact a {
	color: inherit;
	text-decoration: underline;
}

.ibia-wb-contact a:hover { color: var(--fw-green-dark); }

.ibia-wb-booking__cta { margin-top: 30px; }

/* =========================================================
   Join IBIA banner
   ========================================================= */

.ibia-wb-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 318px;
	padding: 40px 20px;
	overflow: hidden;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	text-align: center;
}

.ibia-wb-banner__bg {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ibia-wb-banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The design darkens the photograph so the white type holds. */
.ibia-wb-banner__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
}

.ibia-wb-banner__title {
	position: relative;
	z-index: 1;
	max-width: 1022px;
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-white);
}

.ibia-wb-banner__cta-wrap {
	position: relative;
	z-index: 1;
	margin-top: 31px;
}

/* Green, and it carries the 30px top-right corner. */
.ibia-wb-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 39px;
	padding: 0 20px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: #a3c362;
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ibia-wb-banner__cta:hover,
.ibia-wb-banner__cta:focus-visible {
	background-color: #607d36;
	color: var(--fw-white);
}

/* =========================================================
   Paragraph margins, re-asserted.
   .entry-content p is (0,1,1) and beats a bare class.
   ========================================================= */

.entry-content .ibia-wb-head__eyebrow { margin: 0; }
.entry-content .ibia-wb-hero__body { margin: 30px 0 0; }
.entry-content .ibia-wb-contact { margin: 30px 0 0; }
.entry-content .ibia-wb-contact + .ibia-wb-contact { margin-top: 10px; }

/* =========================================================
   Narrower screens
   ========================================================= */

@media (max-width: 1200px) {
	.ibia-wb-mags__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ibia-wb-hero { column-gap: 60px; }
}

@media (max-width: 1024px) {
	.ibia-wb-hero,
	.ibia-wb-booking { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-wb-booking__text { order: 2; }
	.ibia-wb-hero__figure { max-width: 559px; }
}

@media (max-width: 640px) {
	.ibia-wb-mags__grid { grid-template-columns: 1fr; }
	.ibia-wb-hero__actions { gap: 16px; }
	.ibia-wb-banner__title { font-size: 24px; line-height: 30px; }
}

/* =========================================================
   IBIA Structure — Figma 3006:5526.

   The org chart is the substance of the page. Every box and
   every connector is positioned from the frame's own
   coordinates, as percentages of a 1280 x 559 stage, so the
   whole diagram scales as one piece.

   The frame is annotated "*Awaiting Portrait Version*" — a
   designer's working note, not page copy, so it is not
   rendered. A portrait layout for narrow screens is still to
   come; until it does the chart scrolls sideways rather than
   reflowing into something the designer has not specified.
   ========================================================= */

.ibia-st-split {
	display: grid;
	grid-template-columns: 680fr 560fr;
	column-gap: 80px;
	align-items: center;
}

/* The second band puts the copy first. */
.ibia-st-split--rev { grid-template-columns: 560fr 680fr; }

.ibia-st-split__figure {
	margin: 0;
	aspect-ratio: 680 / 454;
	overflow: hidden;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: #d9d9d9;
}

.ibia-st-split__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ibia-st-split__title {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-st-split__body {
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* =========================================================
   Org chart
   ========================================================= */

.ibia-org {
	overflow-x: auto;
	padding-bottom: 8px;
}

/* 1280 exactly, as the frame draws it — left to fill the 1400
   container it renders 9% oversized. Below 1280 the wrapper
   scrolls rather than reflowing into a layout the designer has
   not specified yet. */
.ibia-org__stage {
	position: relative;
	width: 1280px;
	margin-inline: auto;
	aspect-ratio: 1280 / 559;
}

/* Every box, rule, panel AND the panel's title bar is placed by
   percentage of its stage. Leaving the header out of this list
   made its inline coordinates inert, so it filled the panel
   edge to edge instead of insetting by 20/19. */
.ibia-org__box,
.ibia-org__line,
.ibia-org__panel,
.ibia-org__header {
	position: absolute;
	box-sizing: border-box;
}

.ibia-org__box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: var(--fw-radius);
	text-align: center;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 20px;
}

.ibia-org__box--navy { background-color: var(--fw-navy); color: var(--fw-white); }
.ibia-org__box--green { background-color: #a3c362; color: var(--fw-navy); }
.ibia-org__box--slate { background-color: #5a6980; color: var(--fw-white); }

/* The Secretariat panel and its white title bar. */
.ibia-org__panel {
	border-radius: var(--fw-radius);
	background-color: #ebeff4;
}

.ibia-org__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 20px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	color: var(--fw-navy);
}

/* Connectors sit BEHIND the boxes, as they do in the frame. The
   Executive Director / IMO Representative link runs down the
   centre of both boxes and would otherwise strike through them. */
.ibia-org__line { background-color: var(--fw-blue-grey, #949fb3); z-index: 0; }

.ibia-org__box,
.ibia-org__header { z-index: 1; }

/* =========================================================
   The band between the two image sections
   ========================================================= */

.ibia-st-band {
	background-color: #a3c362;
	padding-block: 53px 60px;
	--ibia-acc-rule: rgba(1, 53, 99, 0.35);
}

.ibia-st-band__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.ibia-st-band__title {
	margin: 8px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.ibia-st-band__intro {
	max-width: 960px;
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.ibia-st-band .ibia-acc-cols { margin-top: 64px; }

/* =========================================================
   Paragraph margins, re-asserted.
   .entry-content p is (0,1,1) and beats a bare class.
   ========================================================= */

.entry-content .ibia-st-split__body { margin: 30px 0 0; }
.entry-content .ibia-st-band__eyebrow { margin: 0; }
.entry-content .ibia-st-band__intro { margin: 30px 0 0; }

/* =========================================================
   Narrower screens
   ========================================================= */

@media (max-width: 1024px) {
	.ibia-st-split,
	.ibia-st-split--rev { grid-template-columns: 1fr; row-gap: 40px; }
	.ibia-st-split--rev .ibia-st-split__text { order: 2; }
	.ibia-acc-cols { column-gap: 60px; }
}

@media (max-width: 782px) {
	.ibia-st-band .ibia-acc-cols { grid-template-columns: 1fr; row-gap: 24px; }
}

/* =========================================================
   IBIA Structure — the org chart as a supplied image.
   Figma 3063:3286, "IBIA Secretariat Organigram Landscape-
   no-logo 1", 1399 x 611. Replaces the hand-built .ibia-org
   stage. Annotated "This is to just upload as an image. on
   mobile can it pop-out?" — so it is one <img>, and on narrow
   screens tapping it opens the same image in a lightbox
   rather than scrolling sideways.

   The image carries a visually-hidden list of the roles in
   its <figcaption>, so the structure survives for screen
   readers and search now that it is no longer real text.
   ========================================================= */

.ibia-organigram { margin: 0; }

/* The whole image is the control. A <div> wraps the <button>
   because this markup lives in post_content and wpautop would
   otherwise wrap a bare button in a <p>. */
.ibia-organigram__open {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

.ibia-organigram__open img {
	display: block;
	width: 100%;
	height: auto;
}

.ibia-organigram__open:focus-visible {
	outline: 2px solid var(--fw-navy);
	outline-offset: 4px;
}

/* "Tap to expand" — shown only where the inline image is too
   small to read. */
.ibia-organigram__hint {
	display: none;
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 8px 12px;
	border-radius: var(--fw-radius);
	background-color: rgba(1, 53, 99, 0.88);
	color: var(--fw-white);
	font-size: 14px;
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	pointer-events: none;
}

@media (max-width: 1023px) {
	.ibia-organigram__hint { display: inline-block; }
}

/* --- Lightbox --------------------------------------------
   Built by ibia-lightbox.js from the image it was opened
   from, so nothing here is duplicated in page content. */

.ibia-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: rgba(0, 0, 0, 0.88);
}

.ibia-lightbox[hidden] { display: none; }

/* max-content lets the pane grow past the viewport when the
   image is wider than it, so the left edge is never clipped
   and the whole thing scrolls; min-width keeps it centred
   when the image fits. */
.ibia-lightbox__pane {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 100%;
	min-height: 100%;
	padding: 72px 24px 24px;
}

.ibia-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(1399px, calc(100vw - 48px));
	background-color: var(--fw-white);
	border-radius: var(--fw-radius);
}

/* r117, Monica: "i like the tap to expand but can it be capped at screen
   width?". This previously did the opposite on purpose — the landscape chart
   filled the height and scrolled sideways, on the grounds that it was readable
   rather than shrunk. Capped as asked: the whole chart now fits on screen, at
   the cost of the labels being small. The overlay still scrolls, so a pinch
   zoom pans it. */
@media (max-width: 1023px) {
	.ibia-lightbox__img {
		width: auto;
		height: auto;
		max-width: calc(100vw - 48px);
		max-height: calc(100vh - 96px);
		max-height: calc(100dvh - 96px);
	}
}

.ibia-lightbox__close {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ibia-lightbox__close:hover,
.ibia-lightbox__close:focus-visible {
	background-color: var(--fw-navy);
	color: var(--fw-white);
}

body.ibia-lightbox-open { overflow: hidden; }

/* The hidden role list inherits entry-content list styling
   even while clipped; keep it a plain list for readers. */
.entry-content .ibia-organigram figcaption ul {
	list-style: disc;
	padding-left: 1.25em;
}

/* =========================================================
   Banner block — IBIA bands. 2026-09-16.

   The two photographic bands the design repeats (Bulletin on
   Home / Contact / News, Join IBIA on Home / Events / World
   Bunkering) are framework/banner with a block style picked
   from the sidebar, replacing the core/group + hand-typed
   .ibia-band classes. Values are the ones the .ibia-band
   rules above arrived at; those rules stay until the last
   group instance is gone, then they are dead and can go.

   The banner is alignwide, which on this theme is the 1400
   band; the section is the band, .fw-banner__inner is the
   content grid. No margin-inline here — the alignment rules
   own it.
   ========================================================= */

.fw-banner.is-style-ibia-bulletin,
.fw-banner.is-style-ibia-join {
	color: var(--fw-white);
	border-radius: var(--fw-radius) var(--fw-radius-accent) var(--fw-radius) var(--fw-radius);
	overflow: hidden;
	background-color: var(--fw-navy);
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	box-shadow: none;
}

.fw-banner.is-style-ibia-bulletin { background-image: url("../img/band-bulletin-20260821.jpg"); min-height: 150px; }
.fw-banner.is-style-ibia-join { background-image: url("../img/band-join-20260821.jpg");     min-height: 318px; }

.fw-banner.is-style-ibia-bulletin > .fw-banner__inner,
.fw-banner.is-style-ibia-join > .fw-banner__inner {
	max-width: none;
	display: grid;
	align-content: center;
	box-sizing: border-box;
	padding-inline: 0;
}

.fw-banner.is-style-ibia-bulletin > .fw-banner__inner {
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: var(--fw-space-xl);
	min-height: 150px;
	padding: 0 56px 0 78px;
}
.fw-banner.is-style-ibia-bulletin > .fw-banner__inner > .wp-block-heading { grid-column: 1; margin: 0 0 var(--fw-space-xs); color: var(--fw-white); }
.fw-banner.is-style-ibia-bulletin > .fw-banner__inner > p { grid-column: 1; margin: 0; }
.fw-banner.is-style-ibia-bulletin > .fw-banner__inner > .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

.fw-banner.is-style-ibia-join > .fw-banner__inner {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	row-gap: var(--fw-space-lg);
	min-height: 318px;
	padding: 0 56px;
}
.fw-banner.is-style-ibia-join > .fw-banner__inner > .wp-block-heading { margin: 0; color: var(--fw-white); }
.fw-banner.is-style-ibia-join > .fw-banner__inner > .wp-block-buttons { margin: 0; }
.fw-banner.is-style-ibia-join .wp-block-button__link { background-color: var(--fw-navy); border-color: var(--fw-navy); color: var(--fw-white); }
.fw-banner.is-style-ibia-join .wp-block-button__link:hover { background-color: var(--fw-navy); border-color: var(--fw-white); color: var(--fw-white); }

/* Rhythm — what the .entry-content > .ibia-band rules ended up as. */
.entry-content > .fw-banner.is-style-ibia-bulletin { margin-block: 60px 0; }
.entry-content > .fw-banner.is-style-ibia-join { margin-block: var(--fw-space-xl); margin-bottom: var(--fw-space-xl); }
.entry-content > .fw-banner.is-style-ibia-join + .ibia-logos,
.entry-content > .fw-banner.is-style-ibia-join + .is-style-ibia-logos, .is-style-ibia-logos-corporate { margin-top: 0; padding-top: var(--fw-space-lg); }

@media (max-width: 768px) {
	.fw-banner.is-style-ibia-bulletin > .fw-banner__inner {
		grid-template-columns: 1fr;
		row-gap: var(--fw-space-lg);
		padding: var(--fw-space-xl);
	}
	.fw-banner.is-style-ibia-bulletin > .fw-banner__inner > .wp-block-buttons { grid-column: 1; grid-row: auto; }
}

/* =========================================================
   Page hero — the inner-page title band. 2026-09-16.

   framework/page-hero in manual mode replaces the hand-built
   core/group.ibia-titleband on every inner page. Same values
   as the .ibia-titleband rules above (Rectangle 74: navy →
   transparent gradient, 115px, the IBIA mark at 5% navy in
   the faded end; 148px with the larger mark when the band
   carries an eyebrow — Meet the Board, Leadership Legacy,
   IMO). The eyebrow is a core/paragraph placed above the H1.
   The .ibia-titleband rules can go once no page uses them.
   ========================================================= */

/* The block's own tokens, so the values hold whichever order the sheets load
   in (the editor canvas enqueues block styles after this file). */
:root {
	--fw-page-hero-padding:              25px 20px 30px;
	--fw-page-hero-inner-max-width:      var(--ibia-inner);
	--fw-page-hero-inner-margin:         0;
	--fw-page-hero-inner-padding:        0;
	--fw-page-hero-inner-min-height:     0;
	--fw-page-hero-content-max-width:    none;
	--fw-page-hero-content-margin:       0;
	--fw-page-hero-media-width:          0;
}

section.fw-page-hero {
	box-sizing: border-box;
	min-height: 115px;
	padding: 25px 20px 30px;
	background-image: linear-gradient(90deg, var(--fw-navy) 0%, rgba(1, 53, 99, 0) 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fw-page-hero > .fw-page-hero__inner {
	width: 100%;
	max-width: var(--ibia-inner);
	margin: 0;
	padding: 0;
	min-height: 0;
	display: block;
	position: relative;
	z-index: 1;
}

.fw-page-hero .fw-page-hero__media { display: none; }

.fw-page-hero .fw-page-hero__content { max-width: none; }

.fw-page-hero .fw-page-hero__content h1 {
	margin: 0;
	color: var(--fw-white);
}

.fw-page-hero .fw-page-hero__content p {
	margin: 0;
	opacity: 1;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-white);
}

.fw-page-hero::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 26.55px;
	width: 87.45px;
	height: 90.75px;
	background: url("../img/board-watermark.svg") center / contain no-repeat;
	pointer-events: none;
}

/* With an eyebrow the band is the taller 148px variant with the larger mark. */
section.fw-page-hero:has(.fw-page-hero__content p) {
	min-height: 148px;
	padding: 24px 20px 36px;
}
.fw-page-hero:has(.fw-page-hero__content p)::after {
	top: 14px;
	width: 120.448px;
	height: 125px;
}

.fw-page-hero.is-style-ibia-turquoise .fw-page-hero__content p {
	color: var(--fw-turquoise, #9adbca);
	font-weight: var(--fw-weight-regular);
}

/* =========================================================
   Events grid block. 2026-09-16.

   framework/events + framework/event-card replace the
   core/group cards with hand-added data-* attributes (which
   Gutenberg reported invalid on all three Events pages). The
   card markup is unchanged — .ibia-event and its children
   above still style it and ibia-events.js still filters it —
   so this section only maps the grid onto the block.
   ========================================================= */

.ibia-events__cards { --fw-events-gap: var(--ibia-ev-gap); }
.ibia-events__list > .ibia-events__cards { margin-block: 0 !important; }

/* =========================================================
   Banner block — green band style. 2026-09-16.

   The Light Green band on Membership (Who We Represent), IMO
   (What IBIA Does at the IMO) and IBIA Structure: eyebrow,
   H2, intro paragraph(s), then an accordion. Values from the
   three page-specific rule sets above (.ibia-mem-represent,
   .ibia-imo-band, .ibia-st-band), which become dead as each
   page is rebuilt. 1240 inner on the 1280 box.
   ========================================================= */

.fw-banner.is-style-ibia-green {
	background-color: var(--fw-green);
	color: var(--fw-navy);
	padding-block: 53px 60px;
	--ibia-acc-rule: rgba(1, 53, 99, 0.35);
}

.fw-banner.is-style-ibia-green > .fw-banner__inner {
	display: block;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

.fw-banner.is-style-ibia-green > .fw-banner__inner > .is-style-ibia-eyebrow { margin: 0 !important; }

.fw-banner.is-style-ibia-green > .fw-banner__inner > h2 {
	margin: 8px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}

.fw-banner.is-style-ibia-green > .fw-banner__inner > p:not(.is-style-ibia-eyebrow) {
	max-width: 960px;
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}
.fw-banner.is-style-ibia-green > .fw-banner__inner > p:not(.is-style-ibia-eyebrow) + p:not(.is-style-ibia-eyebrow) { margin-top: 28px; }

.fw-banner.is-style-ibia-green > .fw-banner__inner > .ibia-acc-cols,
.fw-banner.is-style-ibia-green > .fw-banner__inner > .ibia-acc { margin-top: 64px; }
.fw-banner.is-style-ibia-green > .fw-banner__inner > .ibia-acc.ibia-acc--single { margin-top: 64px; }

@media (max-width: 782px) {
	.fw-banner.is-style-ibia-green .ibia-acc-cols { grid-template-columns: 1fr; row-gap: 24px; }
}

/* =========================================================
   Image block — lightbox style. 2026-09-16.

   `core/image` with the "IBIA Tap to expand" style is the
   organigram on IBIA Structure: ibia-lightbox.js treats the
   figure as the trigger. The caption is the text alternative
   and is visually hidden — it is for screen readers and
   search, not the page.
   ========================================================= */

.wp-block-image.is-style-ibia-lightbox {
	margin: 0;
	position: relative;
	cursor: zoom-in;
}
.wp-block-image.is-style-ibia-lightbox img {
	display: block;
	width: 100%;
	height: auto;
}
.wp-block-image.is-style-ibia-lightbox:focus-visible {
	outline: 2px solid var(--fw-navy);
	outline-offset: 2px;
}
.wp-block-image.is-style-ibia-lightbox > figcaption {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.wp-block-image.is-style-ibia-lightbox .ibia-organigram__hint { display: none; }
@media (max-width: 1023px) {
	.wp-block-image.is-style-ibia-lightbox .ibia-organigram__hint { display: inline-block; }
}
/* The org chart sits on the 1400 container with the frame's 57px above. */
.entry-content > .wp-block-image.is-style-ibia-lightbox {
	max-width: var(--ibia-inner);
	margin: 57px auto 0;
}

/* A split with no image yet shows the design's grey field, not nothing. */
.wp-block-framework-split .fw-split__media:empty {
	aspect-ratio: 680 / 454;
	background-color: #d9d9d9;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
}

/* =========================================================
   Latest News block — section chrome. 2026-09-16.

   The block now carries the eyebrow, heading and "View All"
   button itself (attributes), replacing the core/group
   .ibia-news wrapper on the homepage and the raw
   .ibia-imo-news section on IMO. Same geometry those had.
   ========================================================= */

.fw-news__head { position: relative; }

.fw-news__eyebrow {
	margin: 0 0 var(--fw-space-xs) !important;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

.fw-news__cta {
	position: absolute;
	top: 34px;
	right: 0;
	margin: 0 !important;
}

.entry-content > .fw-news { --fw-section-py: 0; padding-block: 0; margin-block: var(--fw-space-2xl); }

@media (max-width: 640px) {
	.fw-news__cta { position: static; margin-top: var(--fw-space-sm) !important; }
}

/* =========================================================
   IMO committee cards and the numbered panel — block styles.
   2026-09-16. The selectors above were aliased so
   `icon-cards` + "IBIA Committee cards" and `core/group`
   "IBIA Panel" + ordered list "IBIA Numbered" reproduce the
   raw IMO page. Only what could not be aliased is here.
   ========================================================= */

.is-style-ibia-committee .fw-icon-card { display: flex; flex-direction: column; }
.is-style-ibia-committee .fw-icon-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.is-style-ibia-committee .fw-icon-card__body > * { margin-block: 0; }
.is-style-ibia-committee .fw-icon-card__body h3 { margin-top: 4px; text-decoration: none; color: var(--fw-navy); font-size: 24px; font-weight: var(--fw-weight-medium); line-height: 28px; }
.is-style-ibia-committee .fw-icon-card__body h3::after { display: none; }
.is-style-ibia-committee .fw-icon-card__body p { margin-top: 15px; }
.is-style-ibia-committee .wp-block-buttons { margin-top: auto; padding-top: 20px; }
.is-style-ibia-committee .wp-block-button { margin: 0; }
.is-style-ibia-committee .fw-icons__grid { margin-top: 51px; }
.entry-content > .wp-block-framework-icon-cards.is-style-ibia-committee { padding-block: 0; }

@media (max-width: 1024px) { .is-style-ibia-committee .fw-icons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .is-style-ibia-committee .fw-icons__grid { grid-template-columns: 1fr; } }

/* Numbered list: the frame's two columns of three, badge + text, a rule
   under every row except the last of each column. */
.entry-content .is-style-ibia-panel ol.is-style-ibia-numbered,
.entry-content ol.is-style-ibia-numbered {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	grid-auto-flow: column;
	grid-template-rows: repeat(3, auto);
	list-style: none;
	margin: 0;
	padding-left: 0;
	counter-reset: ibia-focus;
}
.entry-content ol.is-style-ibia-numbered > li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 0 0 21px;
	counter-increment: ibia-focus;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
	color: var(--fw-navy);
}
.entry-content ol.is-style-ibia-numbered > li::before {
	content: counter(ibia-focus);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-size: 24px;
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	color: var(--fw-white);
}
.entry-content ol.is-style-ibia-numbered > li:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	left: 48px;
	right: 0;
	bottom: 7px;
	border-bottom: 1px solid var(--ibia-rule);
}
.entry-content > .wp-block-group.is-style-ibia-panel { max-width: 1330px; margin-inline: auto; }
@media (max-width: 782px) {
	.entry-content ol.is-style-ibia-numbered { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
	.entry-content ol.is-style-ibia-numbered > li:not(:nth-child(3n))::after { display: none; }
}

/* The homepage card look (green border, centred, overhanging icon disc) is
   set on .fw-icon-card globally; the committee style undoes those parts. */
.is-style-ibia-committee .fw-icon-card { border: 0; margin-top: 0; text-align: left; padding: 20px; }
.is-style-ibia-committee .fw-icon-card__icon { position: static; transform: none; margin: 0; }
.is-style-ibia-committee .fw-icon-card__body { margin: 0; padding: 0; }
.is-style-ibia-committee .fw-icon-card__body p { font-size: var(--fw-body-size); line-height: 28px; }
.is-style-ibia-committee .fw-icons__grid { margin-top: 51px; padding-top: 0; }

/* =========================================================
   Membership as blocks. 2026-09-16.

   Tiers: banner "IBIA Tiers band" (Blue Grey 20%, centred
   head) holding core/columns of core/group "IBIA Membership
   tier" cards. Testimonials: framework/testimonials in grid
   layout, IBIA card face. KYC: framework/callout. The
   .ibia-mem-* selectors above were aliased onto these; only
   what could not be aliased is here.
   ========================================================= */

/* --- Tiers band --- */
.fw-banner.is-style-ibia-tiers > .fw-banner__inner {
	display: block;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
	text-align: center;
}
.fw-banner.is-style-ibia-tiers .is-style-ibia-eyebrow { margin: 0 !important; }
.fw-banner.is-style-ibia-tiers .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(2, 520px);
	justify-content: center;
	gap: 40px;
	margin: 63px 0 0 !important;
}
.fw-banner.is-style-ibia-tiers .wp-block-column { width: auto; flex: none; display: flex; }
.is-style-ibia-tier { width: 100%; }
.is-style-ibia-tier > h3 { text-decoration: underline; text-underline-offset: 4px; }
.is-style-ibia-tier > h3::after { display: none; }
:is(.entry-content, .editor-styles-wrapper) .is-style-ibia-tier > ul { list-style: none; padding-left: 0; margin: 0 0 33px !important; flex: 1 1 auto; }
.is-style-ibia-tier > .wp-block-buttons { margin-top: auto !important; justify-content: center; }
.is-style-ibia-tier .wp-block-button { margin: 0; }
@media (max-width: 1140px) { .fw-banner.is-style-ibia-tiers .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 782px)  { .fw-banner.is-style-ibia-tiers .wp-block-columns { grid-template-columns: 1fr; } }

/* --- Testimonials, grid layout — the IBIA card --- */
.fw-testimonials--grid {
	--fw-testimonials-grid-gap: 40px;
	padding: 0 20px;
	background: transparent !important;
}
.fw-testimonials--grid .fw-testimonials__inner { max-width: var(--ibia-inner); margin: 0 auto; }
.fw-testimonials--grid .fw-testimonials__intro { padding: 0; margin: 0; }
.fw-testimonials--grid .fw-testimonials__intro h2 {
	margin: 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}
.fw-testimonials--grid .fw-testimonials__grid { margin-top: 37px; padding-top: 32px; }
.fw-testimonials--grid .fw-testimonial {
	box-sizing: border-box;
	padding: 68px 24px 24px;
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
}
/* The quote badge overhangs the top edge of the card. */
.fw-testimonials--grid .fw-testimonial::before {
	content: "\201C";
	position: absolute;
	left: 162px;
	top: -32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 60px;
	line-height: 0.9;
	color: var(--fw-white);
	padding-top: 0.22em;
	box-sizing: border-box;
}
.fw-testimonials--grid .fw-testimonial__quote { padding: 0; flex: 1 1 auto; }
.fw-testimonials--grid .fw-testimonial__quote-text {
	margin: 0 0 40px !important;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	font-style: italic;
	line-height: 28px;
	color: var(--fw-navy);
}
.fw-testimonials--grid .fw-testimonial__author {
	position: relative;
	margin: auto 0 0 !important;
	padding-left: 60px;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 22px;
	color: var(--fw-navy);
	text-decoration: none;
}
/* Avatar: the grey disc by default; a chosen image paints over it. */
.fw-testimonials--grid .fw-testimonial__author::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 43px;
	height: 43px;
	margin-top: -13px;
	border-radius: 50%;
	background-color: #d9d9d9;
}
.fw-testimonials--grid .fw-testimonial__company {
	margin: 6px 0 0 !important;
	padding-left: 60px;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}
.fw-testimonials--grid .fw-testimonial__image {
	position: absolute;
	left: 24px;
	bottom: 28px;
	width: 43px;
	height: 43px;
	min-width: 0;
	min-height: 0;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	z-index: 1;
}
.fw-testimonials--grid .fw-testimonials__nav-fe { margin-top: 58px; gap: 20px; }
.fw-testimonials--grid .fw-testimonials__nav-btn {
	width: 41px;
	height: 41px;
	padding: 0;
	border: 1px solid var(--fw-green);
	border-radius: var(--fw-radius);
	background-color: var(--fw-white);
	color: var(--fw-navy);
}
.fw-testimonials--grid .fw-testimonials__nav-btn svg { width: 16px; height: 16px; transform: none; }
.fw-testimonials--grid .fw-testimonials__nav-btn:hover,
.fw-testimonials--grid .fw-testimonials__nav-btn:focus-visible { background-color: var(--fw-green); color: var(--fw-white); }
.entry-content > .fw-testimonials--grid { margin-block: 60px 0; }

/* --- Callout (KYC) --- */
.ibia-callout {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
}
.ibia-callout__icon { grid-column: 1; grid-row: 1 / span 2; }
.ibia-callout > .is-style-ibia-eyebrow { grid-column: 2; margin: 0 !important; }
.ibia-callout > h2 { grid-column: 2; margin: 0 !important; }
.ibia-callout > p:not(.is-style-ibia-eyebrow) { grid-column: 1 / -1; }
.entry-content > .ibia-callout { max-width: 1241px; margin: 60px auto 60px; }

/* =========================================================
   Resources + World Bunkering as blocks. 2026-09-16.

   framework/resources (grid, count, sort, arrows) +
   framework/resource-card, framework/publication-feature
   (the WB hero and the homepage band), and core/columns
   "IBIA Listing with filters" for the main + 319px sidebar
   layout that Events and Resources share. The .ibia-res* /
   .ibia-wb-hero* rules above style the same markup; the
   aliases and extras are here.
   ========================================================= */

/* --- The two-column listing layout (grid + filter sidebar) --- */
.wp-block-columns.is-style-ibia-listing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 319px;
	column-gap: 41px;
	align-items: start;
	margin-top: 44px;
}
.wp-block-columns.is-style-ibia-listing > .wp-block-column { width: auto; flex: none; margin: 0; }
@media (max-width: 1024px) {
	.wp-block-columns.is-style-ibia-listing { grid-template-columns: 1fr; }
	.wp-block-columns.is-style-ibia-listing > .wp-block-column:last-child { order: -1; }
}

/* --- Resources grid: column count from the block --- */
.ibia-res__grid--1 { grid-template-columns: 1fr; }
.ibia-res__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ibia-res__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
/* With arrows the grid scrolls sideways a card at a time rather than wrapping. */
.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid {
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid::-webkit-scrollbar { display: none; }
.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid > .ibia-res-card { scroll-snap-align: start; }
.ibia-res__grid > .ibia-res-card { margin: 0; }
.ibia-res__grid .ibia-res-card__title { font-size: var(--fw-body-size); }
@media (max-width: 1024px) { .ibia-res__grid--3, .ibia-res__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ibia-res__grid--2, .ibia-res__grid--3, .ibia-res__grid--4 { grid-template-columns: 1fr; } }

/* --- World Bunkering hero text: core blocks inside .ibia-wb-hero__text --- */
.ibia-wb-hero__text > .is-style-ibia-eyebrow { margin: 0 !important; }
.ibia-wb-hero__text > h2 {
	margin: 30px 0 0 !important;
	font-size: 30px;
	font-weight: var(--fw-weight-medium);
	line-height: 34.5px;
	color: var(--fw-navy);
}
.ibia-wb-hero__text > p:not(.is-style-ibia-eyebrow) {
	margin: 30px 0 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}
.ibia-wb-hero__text > .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 28px; margin: 30px 0 0; }
.ibia-wb-hero__text > .wp-block-buttons .wp-block-button { margin: 0; }
.entry-content > .wp-block-framework-publication-feature.ibia-wb-hero { max-width: 1280px; margin: 0 auto; padding-inline: 20px; box-sizing: border-box; }

/* --- Band layout: the fan sits where the flattened image did --- */
/* Wide layout only. Below 1200px the fan stops being positioned
   and sits under the text instead, where shifting it left pushes
   the front cover off the band and cropping its bottom cuts a
   cover in half. The stacked layout needs none of this. */
@media (min-width: 1201px) {
	.ibia-wb--band .ibia-wb-fan { position: absolute; }
}

.ibia-wb--band .ibia-wb__text > .is-style-ibia-eyebrow { margin: 0 0 var(--fw-space-xs) !important; }
@media (max-width: 1200px) { .ibia-wb--band .ibia-wb-fan { position: static; } }

/* --- Editor-only: empty cover slot --- */
.ibia-wb-fan__empty {
	display: block;
	width: 120px;
	height: 170px;
	border: 1px dashed var(--fw-blue-grey, #949fb3);
	background: var(--fw-white);
	color: var(--fw-navy);
	font: inherit;
	cursor: pointer;
}

/* Top-level eyebrows keep the content-column centring (the eyebrow style zeroes margins). */
.entry-content > .is-style-ibia-eyebrow { margin-inline: auto !important; }
/* Room for the card shadows inside the scrolling row. */
.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid { padding: 14px; margin: -14px; }

/* Offices block: the heading inside the panel is the old .ibia-offices__title. */
.ibia-offices__inner > h2 { margin: 0; font-size: 30px; font-weight: var(--fw-weight-medium); line-height: 1.15; }

/* --- Homepage Events head rhythm (2026-09-17) ----------------
   Frame 3006:4656, Frame 148: eyebrow box 0-24, H2 box 32-66,
   intro box from 83. So 8px eyebrow -> H2 and 17px H2 -> intro.
   The entry-content defaults were putting 30px in both gaps. */
.entry-content .ibia-events__intro > h2,
.entry-content .is-style-ibia-section-head > .wp-block-group:first-child > h2 { margin-top: 8px; }
.entry-content .ibia-events__intro > h2 + p,
.entry-content .is-style-ibia-section-head > .wp-block-group:first-child > h2 + p { margin-top: 17px; }
/* Same frame, the section's own vertical rhythm: 40 above the
   eyebrow, 35 from the intro to the cards, 49 below the cards.
   body.home keeps this off the Upcoming Events pages, which share
   the .ibia-events wrapper class. */
body.home .ibia-events { padding-top: 40px !important; padding-bottom: 49px !important; }
body.home .ibia-events__head,
body.home .is-style-ibia-section-head { margin-bottom: 35px !important; }

/* --- Meet the Board: cards sized from the row, not fixed (2026-09-17)
   The August values (320 / 248 / 230 px) sum to exactly 1400 and
   1040 with their gutters — no slack at all — so any viewport
   narrower than a bare 1440 (i.e. one with a scrollbar) wrapped the
   last card of every row: officers 3+1, members 4+3, regions 3+… .
   Frame 512:490 has 4 / 5 / 4 per row. Divide the row instead. */
/* 2026-10-13: the count comes from the block's Columns setting (--fw-people-cols,
   set on the grid by the block), not from these class names, so changing it in
   the editor works. Saved values: officers 4, members 5, regions 4, as the frame. */
.ibia-board-officers .fw-person,
.ibia-board-members  .fw-person,
.ibia-region__grid   .fw-person { flex: 0 0 calc((100% - (var(--fw-people-cols, 4) - 1) * var(--ibia-card-gap)) / var(--fw-people-cols, 4) - 0.1px); }
/* A flex item will not shrink below its content's min width, and
   the 226px photo disc is that content — so the region card stuck at
   226 and still wrapped. min-width: 0 lets the calc above win; the
   photo already has max-width: 100% and follows. */
.ibia-board-officers .fw-person,
.ibia-board-members  .fw-person,
.ibia-region__grid   .fw-person { min-width: 0; }

/* --- Meet the Board vertical rhythm, re-measured 2026-09-17 ----
   Frame 512:490 landmarks (photos are exact; text targets are the
   frame's cap-top less the line-box lead): officers photo 513,
   members rows 891 / 1255, rule 1603, "Around the World" 1654,
   chips 1798, Asia band 1888. The 16 Sep block migration wrapped
   .ibia-region__inner as a flow layout, whose block gap pushed the
   members grid 30px below the chair in every band. */
.ibia-region__inner > * { margin-block-start: 0 !important; }
.ibia-board-intro { margin-block-start: 23px !important; }
.ibia-board-officers { margin-block-start: 69px !important; }
.ibia-board-members { margin-block-start: 54px !important; }
.ibia-board-members .fw-people__grid { row-gap: 56px; }
.ibia-board-rule { margin-block-start: 62px !important; }
.ibia-regions-intro { margin-block-start: 42px !important; }
.ibia-region-nav { margin-block-start: 27px !important; }
/* The frame's band gaps alternate: 10px after a tinted band (Asia,
   Europe, Americas), 0 after a white one (Middle East, Africa) —
   a tinted band butts straight onto the white one before it. */
.ibia-region + .ibia-region--tinted,
.is-style-ibia-region + .is-style-ibia-region-tinted,
.ibia-region:not(.ibia-region--tinted) + .is-style-ibia-region-tinted,
.is-style-ibia-region + .ibia-region--tinted { margin-block-start: 0 !important; }
/* Region grid rows: frame pitch 371 (Asia 1988 -> 2359), live was 377
   with a 48px row gap; and the band runs 52 below the last card, not
   45. The two errors cancelled on two-row bands, which is how they
   measured "right" while the three-row ones did not. */
.ibia-region__grid .fw-people__grid { row-gap: 42px; }
.ibia-region { padding-bottom: 52px !important; }

/* --- Contact, re-measured against frame 3006:5624 (2026-09-17) ----
   Box-top targets are the frame's cap-tops less the line-box lead.
   Both columns start at cap 281; inputs at 352 / 442 / 532 (were
   already right); labels at 318 / 408 / 498 (were 12-14 low, crowding
   their inputs); Submit 687; offices card 796-1136 with H2 at 837,
   kicker 840, place 867, address 910, phone 1027, email 1059;
   Subscribe band 50 below the card. */
.ibia-contact { margin-block-start: 62px !important; }
.entry-content .ibia-contact__intro > h2 { margin-top: 6px; }
.entry-content .ibia-contact__intro > h2 + p { margin-top: 30px; }
.entry-content .ibia-contact__lede { margin-bottom: 18px; }

.ibia-contact .forminator-ui .forminator-label,
.ibia-contact .forminator-label { margin-bottom: 16px !important; }
.ibia-contact .forminator-row { margin-bottom: 16px !important; }
.ibia-contact .forminator-row:last-child { padding-top: 7px; }

.ibia-offices__inner { padding-block: 41px 49px !important; }
.entry-content .ibia-office__kicker { margin-top: 3px; }
.entry-content .ibia-office__place { margin-top: 2px; }
.entry-content .ibia-office__addr { margin-top: 14px; }
.entry-content .ibia-office__tel { margin-top: 5px; }

/* The hairline between the offices starts 24px below the kicker in
   the frame (864 against 847), not at the top of the column. */
.ibia-offices__inner > .ibia-office + .ibia-office { border-left: 0; position: relative; }
.ibia-office + .ibia-office::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 0; border-left: 1px solid rgba(148, 159, 179, 0.4); }

.wp-block-framework-offices + .fw-banner { margin-block-start: 50px !important; }
/* Forminator's label is display:inline, so a margin-bottom on it is
   inert — that is why the labels crowded the inputs. Block it. The
   August office rules carry !important, so these must too. */
.ibia-contact .forminator-label { display: block !important; }
.entry-content .ibia-contact__lede { margin-bottom: 17px !important; }
.entry-content .ibia-contact__intro > h2 + p { margin-top: 38px !important; }
.ibia-office__place { margin-top: 2px !important; }
.ibia-office__addr { margin-top: 14px !important; }
.ibia-office__tel { margin-top: 5px !important; }
.ibia-contact .forminator-label { margin-bottom: 6px !important; }
.ibia-contact .forminator-row:last-child { margin-bottom: 0 !important; }
.entry-content .ibia-contact__intro > h2 + p { margin-top: 29px !important; }
/* Same specificity as the 16px rule above (three classes) so this one
   wins on order; and the button row is .forminator-row-last, not
   :last-child — Forminator's hidden inputs come after it. */
.ibia-contact .forminator-ui .forminator-label { margin-bottom: 6px !important; }
.ibia-contact .forminator-row-last { margin-bottom: 0 !important; padding-top: 7px; }
.ibia-contact .forminator-row:last-child { padding-top: 0; }
.ibia-contact .forminator-row-last { padding-top: 0; }

/* --- IBIA Milestones (2026-09-17, carousel restored 2026-09-24) ------
   The 17 Sep pass laid this track out statically because the frame
   (635:300) draws three fixed items 388 wide and the carousel script
   was dequeued. The client's copy landed with fifteen entries, so the
   carousel is back on and only the frame's item width is held here.
   Do NOT re-add `justify-content: center`, `transform: none`, the
   viewport overflow overrides or the clone hiding - the loop needs
   its clones, its transform and its own overflow to work. Everything
   below this block is the measured layout and still applies. */
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item {
	flex: 0 0 388px !important;
	width: 388px !important;
}

/* The frame's text column is 384 wide (the item is 388), not 360 —
   at 360 the 1992 copy wraps to a fourth line. */
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item { padding-inline: 2px !important; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__content { width: 384px; max-width: 384px; }

/* Every milestone carries a 186 x 120 image placeholder in the frame
   (Rectangles 108-110, #949FB3): above the copy on the above-the-rule
   items, below it on the below-the-rule ones, 22px off the copy. The
   live page had none. Drawn here rather than as content because the
   frame's own are placeholders; real images go into the item as
   core/image when the client supplies them. */
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__content::before {
	content: "";
	display: block;
	width: 186px;
	height: 120px;
	margin-inline: auto;
	background-color: #949fb3;
}
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above .fw-timeline__content::before { order: 99; margin-bottom: 22px; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--below .fw-timeline__content::before { order: 99; margin-top: 22px; }
/* Vertical geometry from the frame, relative to the rule (768):
   above — year box bottom 740 (28 above), copy box bottom 685.5
   (20.5 above the year), stem 689-703, image bottom 579 (22.5 above
   the copy); below — year box top 800 (32 below the rule's top edge),
   stem 840-854 (6 below the year), copy from 854.5, image from 989.
   The block puts the rule at 50% of a 682px item, so a 47px top
   margin lands it on 768 and the frame's image extents (459 / 1109)
   fall exactly on the block's edges. */
body:is(.page-id-179, .editor-styles-wrapper) .ibia-milestones__timeline { margin-top: 47px !important; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline { --fw-timeline-group-gap: 20.5px; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above .fw-timeline__group { bottom: calc(50% + 28px); }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--below .fw-timeline__group { top: calc(50% + 32px); }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--below .fw-timeline__year::before { top: calc(100% + 6px); }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__content { display: flex; flex-direction: column; gap: 0; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above .fw-timeline__content { flex-direction: column-reverse; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__content > p { margin: 0 !important; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above .fw-timeline__content::before { order: 99; margin: 0 auto 22.5px; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--below .fw-timeline__content::before { order: 99; margin: 22.5px auto 0; }
/* Correction: the page already carries a 186 x 120 placeholder per
   milestone (.ibia-milestone__media, August) — the ::before above
   duplicated it. Off; the existing one takes the 22.5px offset. */
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__content::before { content: none !important; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above :is(.ibia-milestone__media, .fw-timeline__media) { margin: 0 auto 22.5px !important; }
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--below :is(.ibia-milestone__media, .fw-timeline__media) { margin: 22.5px auto 0 !important; }
/* The frame top-aligns the above-the-rule images at 459 whatever the
   copy length (1992 is three lines, 1995 two). Give the content the
   three-line height and push the image to the far end. */
body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above .fw-timeline__content { min-height: 226.5px; justify-content: space-between; }

/* =========================================================
   Footer, re-measured against the Footer component (2026-09-17)
   as placed on 635:300 (instance 966:3487, 1441 x 362).

   Columns split at the three dividers: 381 / 647 / 1179, i.e.
   361 / 266 / 532 / 241 across the 1400. Dividers run 34-273.
   Content tops at 43 (Join IBIA at 60). Form fields are the
   frame's 210 x 29 and 453 x 29 — the August build applied our
   48px form rule here, which the frame does not. 14px text is
   Ubuntu REGULAR (the "Small print" style), not Light. The
   copyright sits centred in a 486 block under a full-width
   rule at 302; the footer is 362 tall. Top rule is 1340 wide,
   inset 31 each side, not edge to edge.
   ========================================================= */

.ibia-footer { border-top: 0 !important; }

.ibia-footer__inner {
	position: relative;
	grid-template-columns: 361px 266px 532px 241px !important;
	gap: 0 !important;
	padding: 34px 0 29px !important;
}

/* Top rule: Vector 2, x 51-1391. */
.ibia-footer__inner::before {
	content: "";
	position: absolute;
	top: 0; left: 31px; right: 29px;
	border-top: 1px solid var(--fw-divider);
}

/* Columns are exactly the divider height; content sits 9 below. */
.ibia-footer__col {
	box-sizing: border-box;
	height: 239px;
	padding-top: 9px !important;
}
.ibia-footer__col + .ibia-footer__col { padding-left: 40px !important; }
.ibia-footer__col--actions { padding-left: 41px !important; padding-top: 26px !important; }

/* 14px text is Regular in the frame. */
.ibia-footer,
.ibia-footer p,
.ibia-footer a,
.ibia-footer li,
.ibia-footer label,
.ibia-footer__legal p { font-weight: var(--fw-weight-regular) !important; }

/* --- Brand -------------------------------------------------- */
.ibia-footer__logo { margin-bottom: 13px !important; }
.ibia-footer__col--brand p { max-width: 320px; margin: 0 !important; }

/* --- Office ------------------------------------------------- */
.ibia-footer__heading { margin: 0 0 10px !important; }
.ibia-footer__contact li { gap: 10px !important; margin: 0 !important; align-items: flex-start; }
.ibia-footer__contact li + li { margin-top: 3px !important; }
.ibia-footer__contact li i { font-size: 14px; line-height: 24px; width: 14px; }

/* --- Bulletin ------------------------------------------------ */
.ibia-footer__col--bulletin .ibia-footer__heading { margin-bottom: 4px !important; }
.ibia-bulletin__row { gap: 33px !important; }
.ibia-bulletin__field { flex: 0 0 210px !important; margin: 0 0 5px !important; }
.ibia-bulletin__field:only-child,
.ibia-bulletin > .ibia-bulletin__field { flex-basis: 453px !important; width: 453px; }
.ibia-bulletin label { margin-bottom: 0 !important; }
.ibia-bulletin input[type="text"],
.ibia-bulletin input[type="email"] {
	height: 29px !important;
	padding: 0 8px !important;
	font-size: 14px;
}
.ibia-bulletin__consent { margin: 10px 0 10px !important; gap: 6px !important; align-items: center !important; }
.ibia-bulletin__consent input[type="checkbox"] { width: 11px; height: 11px; margin: 0; }
.ibia-footer button.ibia-bulletin__submit { height: 39px !important; width: 93px; padding: 0 !important; }

/* --- Actions ------------------------------------------------- */
.ibia-footer a.ibia-footer__join,
.ibia-footer a.ibia-footer__contact-btn { width: 121px; height: 39px !important; padding: 0 !important; box-sizing: border-box; }
.ibia-footer a.ibia-footer__join { margin-bottom: 20px !important; }
.ibia-footer a.ibia-footer__contact-btn { margin-bottom: 33px !important; }
.ibia-footer__col--actions .ibia-footer__heading { margin-bottom: 13px !important; }
.ibia-footer__social { margin-top: 0 !important; gap: 16px !important; }
.ibia-footer__social a { line-height: 20px; }

/* --- Legal --------------------------------------------------- */
.ibia-footer__legal { padding: 5px 0 7px !important; }
.ibia-footer__legal p { max-width: 486px; margin: 0 auto !important; }
/* The frame underlines the Privacy Policy link in the consent line;
   and its glyphs are 20 / 20 / 20 / 12 (Facebook) / 20 / 25 (WeChat)
   wide with 16px between, so the row ends at the frame's 1417. */
.ibia-bulletin__consent a { text-decoration: underline !important; }
.ibia-footer__social li a { display: inline-flex; justify-content: center; width: 20px; }
.ibia-footer__social li:nth-child(4) a { width: 12px; }
.ibia-footer__social li:nth-child(6) a { width: 25px; }

/* =========================================================
   2026-09-17 — Leadership Legacy measured onto Figma 635:307.
   Every offset below is the frame's, read from the node
   metadata; text boxes sit cap-top-minus-lead (20/30 → 8,
   18/28 → 7.75, 16/28 → 8.5). Server-side hand edit: fold
   into sites/ibia-theme/ before the next push.
   ========================================================= */

/* --- Hero: this frame's hero carries the "About IBIA" kicker
   in Turquoise, cap-top 133, H1 at 154. The block's 24/36
   padding lands them at 128.5 / 148. */
.page-id-182 .fw-page-hero { padding-top: 28.5px !important; padding-bottom: 25.5px !important; }
.page-id-182 .fw-page-hero__content > p { color: var(--fw-turquoise) !important; }
.page-id-182 .fw-page-hero__content > h1 { margin-top: 1.5px !important; }

/* --- Standfirst is H3 (24 / 27.6 Medium), not 18 Light. */
.entry-content .ibia-legacy__intro > p {
	font-size: 24px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 27.6px !important;
}

/* Buttons are 39 tall in the frame (28 line + 5.5 + 5.5). */
.ibia-legacy__jump .wp-block-button__link { padding-block: 5.5px !important; }

/* --- Headings: Chairs 76 below the buttons, Directors 72
   below the rule. Sitting Chair 55 below its heading, sitting
   Director 71. */
.entry-content .ibia-legacy__heading { margin-top: 76px !important; }
.entry-content .ibia-legacy__rule + .ibia-legacy__heading { margin-top: 72px !important; }
.entry-content .ibia-legacy__rule + .ibia-legacy__heading + .ibia-legacy__current { margin-top: 71px !important; }

/* --- Sitting holder: period 12 under the photo as H3 green,
   name box 2.4 under that (cap at +38), Title 18/28 Regular
   green, flush. */
.ibia-legacy__current .fw-person__role {
	margin-top: 12px !important;
	font-size: 24px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 27.6px !important;
	color: var(--fw-green-dark) !important;
}
.ibia-legacy__current .fw-person__name { margin-top: 2.4px !important; }
.ibia-legacy__current .fw-person__org {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: var(--fw-weight-regular) !important;
	line-height: 28px !important;
	color: var(--fw-green-dark) !important;
}

/* --- Rows: 61 below the Chair (58 below the Director), 320
   columns on a 40 gutter, 82 between rows (name box bottom to
   the next period — the frame's 447 / 475 pitch). */
.entry-content .ibia-legacy { margin-top: 61px !important; }
.entry-content .ibia-legacy__rule ~ .ibia-legacy { margin-top: 58px !important; }

.ibia-legacy__row { margin-bottom: 82px !important; }
.ibia-legacy__row:last-child { margin-bottom: 0 !important; }

/* The short row keeps the four-column grid (three cells, left
   aligned) rather than spreading three across the width. The
   narrow-screen fallback below 1100 is untouched. */
@media (min-width: 1101px) {
	.ibia-legacy__row,
	.ibia-legacy__row--short {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		column-gap: 40px;
	}
}

/* Rule is 2px centred on 69 (68–70); on the short row it stops
   at the last dot. The grid stays at four columns however few of
   them are filled, so the stop is worked out from the number of
   cells the row holds: dot N sits (N - 0.5) columns and (N - 1)
   gutters in. */
.ibia-legacy__row::before { top: 68px; }
.ibia-legacy__row--short::before {
	--ibia-legacy-n: var(--ibia-legacy-cells, 4);
	right: calc(100% - 40px * (var(--ibia-legacy-n) - 1)
		- (var(--ibia-legacy-n) - 0.5) * ((100% - 120px) / 4)) !important;
}

/* Period is H3 green, not 20 navy. */
.ibia-legacy__years {
	font-size: 24px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 27.6px !important;
	color: var(--fw-green-dark) !important;
}

/* Dot: 20 solid inside a 28 ring at 15%, not 16 in 45%. */
.ibia-legacy__dot { border: 4px solid rgba(var(--fw-green-rgb), 0.15) !important; }

/* Photo at 101; name cap 16 under it (box 8); Title flush. */
.ibia-legacy__photo { margin-top: 73px !important; }
.ibia-legacy__name { margin-top: 8px !important; }
.ibia-legacy__title { margin-top: 0 !important; }

/* --- Rule: 1px #D9D9D9, 84 below the short row, not the
   separator block's 2px grey. */
.entry-content .ibia-legacy__rule {
	margin-top: 84px !important;
	height: 0 !important;
	border-top: 1px solid #d9d9d9 !important;
	border-bottom: 0 !important;
}

/* --- Closing split: 87 below the last row; text at x 100,
   H2 top 144 down the 454 card, body box 21.5 under the H2;
   card corners 30 / 4 / 4 / 4 with the frame's shadow; footer
   86 below. */
.entry-content .ibia-legacy__close { margin-top: 87px !important; }
.ibia-legacy__close-text {
	align-self: start;
	margin: 144px 0 0 80px !important;
}
.ibia-legacy__close-text p { margin-top: 21.5px !important; }
.ibia-legacy__close-media {
	border-radius: 30px 4px 4px 4px !important;
	box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
}
.page-id-182 .ibia-footer { margin-top: 86px !important; }

/* 2026-09-17 Leadership Legacy, second pass: the buttons carry a
   1px border (41 → 39 needs 4.5 not 5.5); 0.4px residues from the
   27.6 period line landed the rows 0.4 short of the 447 pitch. */
.ibia-legacy__jump .wp-block-button__link { padding-block: 4.5px !important; }
.entry-content .ibia-legacy__jump { margin-top: 28.4px !important; }
.ibia-legacy__photo { margin-top: 73.4px !important; }
.entry-content .ibia-legacy__rule + .ibia-legacy__heading + .ibia-legacy__current { margin-top: 71.5px !important; }

/* =========================================================
   2026-09-17 — News Article template measured onto Figma
   3006:5078. Offsets are the frame's; text boxes sit cap-top
   minus lead (16/28 → 8.5, 18/28 → 7.75, 20/30 → 8). Server-
   side hand edit: fold into sites/ibia-theme/ before the next
   push.
   ========================================================= */

/* --- Title band: this frame's H1 box sits at 125, not 121. */
.single-post .ibia-titleband--compact { padding-block: 29px 26px !important; }

/* --- Hero carries the card shadow. */
.ibia-article__hero { box-shadow: var(--fw-shadow-card); }

/* --- Title box 28 under the meta row; body box 21 under the
   title. Paragraphs 10 apart; the lead line is Medium 18. */
.ibia-article__title { margin-top: 28px !important; }
.ibia-article__body { margin-top: 21px !important; }
.entry-content .ibia-article__body p { margin: 0 0 10px !important; }
.entry-content .ibia-article__body > :last-child { margin-bottom: 0 !important; }
.entry-content .ibia-article__body .ibia-article__lead {
	font-size: 18px;
	font-weight: var(--fw-weight-medium);
	line-height: 28px;
}

/* --- Rule 41.5 under the body; foot row 29 under the rule
   (icons land 35 down, label cap 43). Share icons are the
   networks' own colours in the frame, not navy. */
.ibia-article__rule { margin-top: 41.5px !important; }
.ibia-article__foot { margin-top: 29px !important; }
.ibia-article__share-label { margin-right: 0 !important; }
.ibia-article__share-link { background-color: #0a66c2 !important; }
.ibia-article__share-link:nth-of-type(2) { background-color: #000 !important; }
.ibia-article__share-link:nth-of-type(3) { background-color: #1877f2 !important; }
.ibia-article__share-link:hover,
.ibia-article__share-link:focus-visible { background-color: var(--fw-green) !important; }

/* --- Categories panel: Blue Grey 20% ground, 4px corners all
   round (no 30 here), title H4 20/30 Medium with its cap 22
   down (box 14), rows 60 tall including the hairline, the last
   one without, 21 below. */
.ibia-article__cats {
	padding: 14px 20px 21px !important;
	border-radius: var(--fw-radius) !important;
	background-color: rgba(148, 159, 179, 0.2) !important;
}
.ibia-article__cats-title {
	margin-bottom: 17px !important;
	font-size: 20px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 30px !important;
}
.ibia-article__cats .ibia-cat-list__item {
	box-sizing: border-box;
	height: 60px;
	min-height: 0;
}
.ibia-article__cats .ibia-cat-list > li:last-child .ibia-cat-list__item { border-bottom-color: transparent; }

/* --- Related News: eyebrow 78 under the foot row, button
   bottom 2.5 above the H2's, cards 39.5 under the H2. */
.entry-content .ibia-related { margin-top: 78px !important; }
.ibia-related__head { margin-bottom: 39.5px !important; }
.ibia-related__all { margin-bottom: 2.5px; }

/* Card is a fixed 342 in the frame: date box 18.5 under the
   image, title box 3.75 under the date at 18/28 Regular, chip
   26 off the foot. */
.ibia-related .fw-news-list__card { min-height: 342px; }
.ibia-related .fw-news-list__date { margin-top: 18.5px !important; }
.ibia-related .fw-news-list__head { margin-top: 3.75px !important; }
.ibia-related .fw-news-list__title { line-height: 28px !important; }
.ibia-related .fw-news-list__badge { margin-bottom: 26px !important; }

/* Footer 60 under the cards on this template. */
.single-post .ibia-footer { margin-top: 60px !important; }

/* 2026-09-17 News Article, second pass: the rule is 1px tall, so
   the foot row's 29 is measured from its top — 28 from the box. */
.ibia-article__foot { margin-top: 28px !important; }

/* =========================================================
   2026-09-17 — News listing measured onto Figma 3006:4996.
   Appended overrides only; Owen's news-list / banner / page-
   hero blocks and their CSS sections are untouched. Offsets
   are the frame's; text boxes sit cap-top minus lead (16/28 →
   8.5, 18/28 → 7.75, 20/30 → 8). Server-side hand edit: fold
   into sites/ibia-theme/ before the next push.
   ========================================================= */

/* --- Title band: this frame's H1 box is at 125, not 121. */
.page-id-187 .fw-page-hero { padding-top: 29px !important; padding-bottom: 26px !important; }

/* --- Filter bar: select 620–940, field 980–1335, button
   1330–1420 riding 5px over the field's end; chevron 12 in. */
.ibia-news-bar__cats select { background-position: right 12px center !important; }
.ibia-news-bar__search { width: 440px; }
.ibia-news-bar__search button { position: relative; margin-left: -5px; }

/* --- Lead cards (440 × 586): date box 26.5 under the image,
   title H4 20/30 Medium in a two-line slot (box 255), excerpt
   box at 328.5 whatever the title's length, chip 21 off the
   foot. */
.ibia-news .fw-news-list__card:nth-child(-n+3) { min-height: 586px; }
.ibia-news .fw-news-list__card:nth-child(-n+3) .fw-news-list__date { margin-top: 26.5px !important; }
.ibia-news .fw-news-list__card:nth-child(-n+3) .fw-news-list__head { min-height: 60px; margin-top: 13.5px !important; }
.ibia-news .fw-news-list__card:nth-child(-n+3) .fw-news-list__title {
	font-size: 20px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 30px !important;
}
.ibia-news .fw-news-list__card:nth-child(-n+3) .fw-news-list__excerpt { margin-top: 13.5px !important; }

/* --- Small cards (320 × 342): date box 18.5 under the image,
   title box 3.75 under the date at 18/28 Regular, chip 26 off
   the foot. */
.ibia-news .fw-news-list__card:nth-child(n+4) { min-height: 342px; }
.ibia-news .fw-news-list__card:nth-child(n+4) .fw-news-list__date { margin-top: 18.5px !important; }
.ibia-news .fw-news-list__card:nth-child(n+4) .fw-news-list__head { margin-top: 3.75px !important; }
.ibia-news .fw-news-list__card:nth-child(n+4) .fw-news-list__title { line-height: 28px !important; }
.ibia-news .fw-news-list__card:nth-child(n+4) .fw-news-list__badge { margin-bottom: 26px !important; }

/* --- Bulletin band (Group 5, the same on every frame that
   carries it): H2 box 45 down, standfirst box 6.5 under it,
   button 67 down and 76 in from the right, 39 tall. */
.fw-banner.is-style-ibia-bulletin > .fw-banner__inner {
	align-content: start !important;
	align-items: start !important;
	padding: 45px 76px 0 78px !important;
}
.fw-banner.is-style-ibia-bulletin > .fw-banner__inner > .wp-block-heading { margin-bottom: 6.5px !important; }
.fw-banner.is-style-ibia-bulletin > .fw-banner__inner > .wp-block-buttons { margin-top: 22px !important; }
.fw-banner.is-style-ibia-bulletin .wp-block-button__link { padding-block: 4.5px !important; }

/* Footer 60 under the band on this page. */
.page-id-187 .ibia-footer { margin-top: 60px !important; }

/* =========================================================
   2026-09-17 — Events pages measured onto Figma 3006:5164
   (IBIA Events; the listing is Component 36, shared by all
   three tabs, so this applies to 165 / 167 / 157). Appended
   overrides only — Owen's events / event-card / filter-sidebar
   / testimonials / banner / page-hero blocks and their CSS are
   untouched. Offsets are the frame's; text boxes sit cap-top
   minus lead (16/28 → 8.5, 18/26 → 6.75, 20/30 → 8). Server-
   side hand edit: fold into sites/ibia-theme/ before the next
   push.
   ========================================================= */

/* --- Tab bar: 40 under the hero, 4px corners; view tabs 180
   wide, time tabs 120 with no gap (control 552 / 250). */
:is(.page-id-165, .page-id-167, .page-id-157, .page-id-315, .page-id-316) .ibia-events__bar {
	margin-top: 40px !important;
	border-radius: 4px;
}
.ibia-segmented--view .ibia-segmented__item .wp-block-button__link { width: 180px; box-sizing: border-box; }
.ibia-segmented--time { gap: 0 !important; }
.ibia-segmented--time .ibia-segmented__item .wp-block-button__link { width: 120px; box-sizing: border-box; }

/* Heading 40 under the bar, listing 39.5 under the heading;
   sidebar level with the featured card; nothing below the grid
   (the frame runs 51 from the last card to Member
   Testimonials). */
:is(.page-id-165, .page-id-167, .page-id-157, .page-id-315, .page-id-316) .ibia-events__layout { margin-top: 39.5px !important; margin-bottom: 0 !important; }
:is(.page-id-165, .page-id-167, .page-id-157, .page-id-315, .page-id-316) .ibia-events { padding-bottom: 0 !important; }
:is(.page-id-165, .page-id-167, .page-id-157, .page-id-315, .page-id-316) .ibia-filters { margin-top: 0 !important; }

/* 2026-10-05: the three event pages run on white. The fill is a variable
   on :root, so it comes off here rather than by adding a fourth
   background to the three stacked .ibia-events rules. The top bar and the
   filters panel keep their Blue Grey 20%, which now reads against white
   instead of the grey it was designed over, and the cards keep their
   shadow so they still sit off the page. */
:is(.page-id-165, .page-id-167, .page-id-157, .page-id-315, .page-id-316) .ibia-events { --ibia-ev-page-bg: transparent; }

/* --- Featured card (Group 104): 1040 × 280; chip 30 tall,
   date box 18 under it, title box 32 under the date, location
   box 36.5 under the title. */
.ibia-event--featured { height: 280px; min-height: 280px; }
.ibia-event--featured .ibia-event__chip { line-height: 14px !important; }
.ibia-event--featured .ibia-event__title { margin-top: 32px !important; }
.ibia-event--featured .ibia-event__loc { margin-top: 36.5px !important; }

/* --- Event cards (Group 98): 500 × 505 fixed; date box 18.5
   under the image, title box 6.75 under the date, location
   box 11.25 under the title, buttons 18.5 under that and 29
   off the foot. */
.ibia-event:not(.ibia-event--featured) { min-height: 505px; }
.ibia-event:not(.ibia-event--featured) .ibia-event__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 18.5px !important;
	padding-bottom: 29px !important;
}
.ibia-event:not(.ibia-event--featured) .ibia-event__title { margin-top: 6.75px !important; }
.ibia-event:not(.ibia-event--featured) .ibia-event__loc { margin-top: 11.25px !important; margin-bottom: 18.5px !important; }
.ibia-event:not(.ibia-event--featured) .ibia-event__actions { margin-top: auto !important; }

/* --- Filters (Group 134): title cap 21.4 down, groups 18.4
   under its cap; search field 219 with the button riding 10
   over it; rows 20 tall (Time 16) on a 10 gap; month chips on
   a 15 row gap; Show More 14 Regular 6 under the years; 24.6
   under Apply. */
.ibia-filters { padding: 18.4px 20px 24.6px !important; }
.ibia-filters__title { margin-bottom: 15px !important; }
.ibia-filters__search input { width: 219px !important; }
.ibia-filters__search button { position: relative; margin-left: -10px; }
.ibia-filters__checks li { height: 20px; }
.ibia-filters__checks--sm li { height: 16px; }
.ibia-filters__checks li label { display: flex; align-items: center; height: 100%; line-height: 20px; }
.ibia-filters__chips { row-gap: 15px !important; }
.ibia-filters__chips li { height: 26px; }
.ibia-filters__chips .ibia-filters__chip { margin-top: 0 !important; }
.ibia-filters__more {
	margin-top: 6px !important;
	font-size: 14px !important;
	font-weight: var(--fw-weight-regular) !important;
	line-height: 11px !important;
	height: 17px;
}

/* --- Member Testimonials (Group 126): heading on the page
   edge at x 20, 51 under the listing; cards 440 on the 1400
   grid, 67 under the heading, fixed 373 with the author row
   pinned at 272 (avatar 43, name H4 20/30 Medium at x 84,
   line 16/28 Light), quote Light Italic at (23, 57.5) in a
   390 column, 1px Light Green border, badge centred. */
.ibia-events ~ .fw-testimonials { margin-top: 51px !important; padding-inline: 0 !important; }
.ibia-events ~ .fw-testimonials .fw-testimonials__intro { margin-bottom: 35px !important; }
.ibia-events ~ .fw-testimonials .fw-testimonials__intro > h2 { margin: 0 !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial {
	position: relative;
	box-sizing: border-box;
	min-height: 373px;
	padding: 57.5px 27px 24px 23px !important;
	border: 1px solid var(--fw-green) !important;
}
.ibia-events ~ .fw-testimonials .fw-testimonial::before { left: calc(50% - 35px) !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial__quote-text {
	margin: 0 !important;
	font-style: italic;
	font-weight: var(--fw-weight-light);
}
.ibia-events ~ .fw-testimonials .fw-testimonial__author {
	position: absolute;
	top: 265.5px;
	left: 83px;
	right: 27px;
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 30px !important;
}
.ibia-events ~ .fw-testimonials .fw-testimonial__author::before {
	content: "";
	position: absolute;
	top: 6.5px;
	left: -60px;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background-color: #d9d9d9;
}
.ibia-events ~ .fw-testimonials .fw-testimonial__company {
	position: absolute;
	top: 294px;
	left: 83px;
	right: 27px;
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: var(--fw-weight-light) !important;
	line-height: 28px !important;
}

/* --- Join band 51 under the arrows, 39-tall button, footer 51
   under the band. */
.ibia-events ~ .fw-banner.is-style-ibia-join { margin-top: 51px !important; }
.ibia-events ~ .fw-banner.is-style-ibia-join .wp-block-button__link { padding-block: 4.5px !important; }
:is(.page-id-165, .page-id-167, .page-id-157, .page-id-315, .page-id-316) .ibia-footer { margin-top: 51px !important; }

/* 2026-09-17 Events, second pass: the card body is a 22-gap flex
   column, so the margins above stacked on the gap; the featured
   body's own bottom padding took it past 280; the chip row and
   the testimonial grid each carried a few px of their own. */
.ibia-event--featured { height: 280px !important; overflow: hidden; }
.ibia-event--featured .ibia-event__body { padding-bottom: 0 !important; }
.ibia-event:not(.ibia-event--featured) .ibia-event__body { gap: 0 !important; }
.ibia-filters__chips { line-height: 0; }
.ibia-filters__chips li { display: block; line-height: 26px; }
.ibia-filters__more { display: block; margin-top: 6px !important; }
.ibia-events ~ .fw-testimonials .fw-testimonials__grid { margin-top: 0 !important; padding-top: 32px !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial { padding: 56.5px 27px 24px 22px !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial__author { top: 264.5px; }
.ibia-events ~ .fw-testimonials .fw-testimonial__company { top: 293px; }

/* 2026-09-17 Events, third pass: the featured body centres its stack, so dropping its bottom padding slid the copy 15 down; pin it to the top at the frame's 38. */
.ibia-event--featured .ibia-event__body { justify-content: flex-start !important; padding-top: 38px !important; }

/* 2026-09-17 Events, fourth pass: a two-line company name (U.S.
   Grains & Bio Products Council) sat on top of its pinned line.
   The author block now flows up from the card's foot instead —
   the frame's one-line card is still exact (name box 265.5,
   line 294, avatar 272), a two-line name pushes the block up as
   the frame's own two-line variant does. */
.ibia-events ~ .fw-testimonials .fw-testimonial { display: flex; flex-direction: column; padding-bottom: 50px !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial__quote { display: flex; flex-direction: column; flex: 1 1 auto; }
.ibia-events ~ .fw-testimonials .fw-testimonial__author,
.ibia-events ~ .fw-testimonials .fw-testimonial__company {
	position: static;
	padding-left: 61px;
	right: auto;
}
.ibia-events ~ .fw-testimonials .fw-testimonial__author { position: relative; margin-top: auto !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial__author::before { left: 0; }

/* 2026-09-17 Events, fifth pass: the relative author kept its
   old top offset, and the block's padding lost to an earlier
   reset — clear the offsets, indent with margin. */
.ibia-events ~ .fw-testimonials .fw-testimonial__author,
.ibia-events ~ .fw-testimonials .fw-testimonial__company {
	top: auto !important;
	left: auto !important;
	padding-left: 0 !important;
	margin-left: 61px !important;
	margin-right: 0 !important;
}
.ibia-events ~ .fw-testimonials .fw-testimonial__author { margin-top: auto !important; padding-top: 13.5px !important; }
.ibia-events ~ .fw-testimonials .fw-testimonial__author::before { top: 20px; left: -61px; }
.ibia-events ~ .fw-testimonials .fw-testimonial__quote-text { flex: 0 0 auto; }
.ibia-events ~ .fw-testimonials .fw-testimonial { padding-bottom: 48.5px !important; }

/* =========================================================
   2026-09-17 — Membership (198) measured onto Figma 3006:4871.
   Appended overrides only — Owen's split / banner / accordion /
   member-map / testimonials / callout / page-hero blocks and
   their CSS are untouched. Offsets are the frame's; text boxes
   sit cap-top minus lead (16/28 → 8.5, 20/30 → 8, 14/24 → 7).
   Server-side hand edit: fold into sites/ibia-theme/ before
   the next push.
   ========================================================= */

.page-id-198 .fw-page-hero { padding-top: 29px !important; padding-bottom: 26px !important; }

/* --- Hero split (Frame 32): card 251–705 at x 741 with the
   card shadow; copy at x 101 from 89 down — H2, body box 21.5
   under it, button 29.5 under that. Who We Represent 80 below. */
.page-id-198 .fw-split--image-right { margin-block: 0 !important; padding-block: 0 !important; }
.page-id-198 .fw-split--image-right .fw-split__inner { margin-left: 81px !important; margin-right: -1px !important; align-items: start !important; }
.page-id-198 .fw-split--image-right .fw-split__content { align-self: start; padding-top: 89px !important; }
.page-id-198 .fw-split--image-right .fw-split__content > h2 { margin: 0 !important; }
.page-id-198 .fw-split--image-right .fw-split__content > p { margin: 21.5px 0 0 !important; }
.page-id-198 .fw-split--image-right .fw-split__content > .wp-block-buttons { margin: 29.5px 0 0 !important; }
.page-id-198 .fw-split__media { box-shadow: var(--fw-shadow-card); }
.page-id-198 .fw-split .wp-block-button__link { padding-block: 4.5px !important; }

/* --- Who We Represent (green band, 524): H2 56 down, intro
   box 21.5 under it in a 799 column, lists 36.5 under that,
   64 below the last row. Rows on a 66 pitch: label box, rule 40
   under the cap (solid navy), next label 26 under the rule. */
.page-id-198 .fw-banner:has(.ibia-acc-cols) { margin-top: 80px !important; min-height: 0 !important; }
.page-id-198 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner { padding-block: 56px 64px !important; min-height: 0 !important; }
.page-id-198 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > h2 { margin: 0 !important; }
.page-id-198 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > p { max-width: 799px; margin: 21.5px 0 0 !important; }
.page-id-198 .ibia-acc-cols { margin-top: 36.5px !important; }
.page-id-198 .ibia-acc__item + .ibia-acc__item { margin-top: 17px !important; }
.page-id-198 .ibia-acc__head { padding-bottom: 18px !important; border-bottom-color: var(--fw-navy) !important; }

/* --- Members of IBIA: H2 80 under the band, sub box 21.5
   under it, map 31.5 under that; counter 237 × 96 with the
   label box 3 under the count. Why Join 80 below the map. */
.page-id-198 .ibia-mem-map { margin-top: 80px !important; }
.page-id-198 .ibia-mem-map > h2 { margin: 0 !important; }
.page-id-198 .ibia-mem-map > p { margin: 21.5px 0 0 !important; }
.page-id-198 .ibia-mem-map__stage { margin-top: 31.5px !important; }
.page-id-198 .ibia-mem-map__counter { padding-bottom: 19px !important; }
.page-id-198 .ibia-mem-map__count-label { margin-top: 3px !important; }

/* --- Why Join split: card 680 × 454 on the page edge at x 20,
   list at x 780 from 34 down; rows 39 under the H2 on the same
   66 pitch. Tiers band 80 below. */
.page-id-198 .fw-split--image-left { margin-block: 80px 0 !important; padding-block: 0 !important; }
.page-id-198 .fw-split--image-left .fw-split__inner { margin-left: 0 !important; margin-right: auto !important; align-items: start !important; }
.page-id-198 .fw-split--image-left .fw-split__content { align-self: start; padding-top: 34px !important; }
.page-id-198 .fw-split--image-left .fw-split__content > h2 { margin: 0 !important; }
.page-id-198 .fw-split--image-left .ibia-acc--single { margin-top: 39px !important; }

/* --- Tiers band (Group 14, 901): eyebrow 45 down, H3 8 under
   it, cards 35 under that at 520 × 705; heading box 26 down
   underlined, list 18.5 under it on a 38 pitch (28 + 10 with
   the hairline in the gap), no hairline after the last row;
   buttons 24.5 under the list, anchored 37 off the foot.
   Corporate: 1px Light Green border, Regular intro line, list
   20 under it. Testimonials 80 below the band. */
.page-id-198 .fw-banner:has(.wp-block-columns) { margin-top: 80px !important; }
.page-id-198 .fw-banner:has(.wp-block-columns) > .fw-banner__inner { padding-bottom: 56px !important; }
.page-id-198 .fw-banner:has(.wp-block-columns) > .fw-banner__inner > .wp-block-columns { margin-top: 35px !important; }
.page-id-198 .is-style-ibia-tier {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	padding: 26px 40px 37px !important;
}
.page-id-198 .is-style-ibia-tier > h3 {
	margin: 0 !important;
	line-height: 30px !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-id-198 .is-style-ibia-tier > h3 + ul { margin-top: 13.5px !important; }
.page-id-198 .is-style-ibia-tier > h3 + p { margin: 18.5px 0 0 !important; font-weight: var(--fw-weight-regular) !important; }
.page-id-198 .is-style-ibia-tier > p + ul { margin-top: 15px !important; }
.page-id-198 .is-style-ibia-tier li { padding: 5px 0 4px !important; }
.page-id-198 .is-style-ibia-tier li:last-child { border-bottom: 0 !important; }
.page-id-198 .is-style-ibia-tier > .wp-block-buttons { margin-top: auto !important; padding-top: 20.5px; }
.page-id-198 .is-style-ibia-tier .wp-block-button__link { padding-block: 4.5px !important; }
.page-id-198 .wp-block-column:nth-child(2) > .is-style-ibia-tier {
	border: 1px solid var(--fw-green);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* --- Member Testimonials: shared with the Training page since
   2026-09-25 (hence the :is() scope) - as on the Events pages — on the
   1400 grid at 440, Light Green border, H4 author with the
   avatar disc, quote Light Italic. Section 80 under the band,
   KYC callout 80 under the arrows. */
:is(.page-id-198, .page-id-313) .fw-testimonials { margin-top: 80px !important; padding-inline: 0 !important; }
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonials__intro > * { margin: 0 !important; }
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonials__intro > h2 { margin-top: 8px !important; }
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 373px;
	padding: 56.5px 27px 48.5px 22px !important;
	border: 1px solid var(--fw-green) !important;
}
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial::before { left: calc(50% - 35px) !important; }
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__quote { display: flex; flex-direction: column; flex: 1 1 auto; }
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__quote-text { flex: 0 0 auto; margin: 0 !important; font-style: italic; font-weight: var(--fw-weight-light); }
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__author {
	position: relative;
	margin: auto 0 0 61px !important;
	padding-top: 13.5px !important;
	font-size: 20px !important;
	font-weight: var(--fw-weight-medium) !important;
	line-height: 30px !important;
}
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__author::before {
	content: "";
	position: absolute;
	top: 20px;
	left: -61px;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background-color: #d9d9d9;
}
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__company {
	margin: 0 0 0 61px !important;
	font-size: 16px !important;
	font-weight: var(--fw-weight-light) !important;
	line-height: 28px !important;
}

/* --- KYC callout (1241 × 240): body box 114.5 down at 90%,
   small print 1.5 under it at 75%, 28px glyph. */
.page-id-198 .ibia-callout { margin-top: 80px !important; padding-bottom: 44px !important; }
.page-id-198 .ibia-callout__icon { font-size: 28px !important; }
.page-id-198 .ibia-callout > p:not(.is-style-ibia-eyebrow) { margin: 0 !important; opacity: 0.9; }
.page-id-198 .ibia-callout > h2 + p { margin-top: 17.5px !important; }
.page-id-198 .ibia-callout > p + p { margin-top: 1.5px !important; opacity: 0.75; }

/* 2026-09-17 Membership, second pass: the split sections carry
   20px side padding of their own (inner offsets are from the
   padding box), the green band has 53 / 60 outer padding on top
   of its inner, the tier list keeps a 33 bottom margin and the
   Corporate intro a 12 bottom padding, and the callout's reset
   out-ranked its margins. */
.page-id-198 .fw-split--image-right { margin-top: 40px !important; }
.page-id-198 .fw-split--image-right .fw-split__inner { margin-left: 61px !important; }
.page-id-198 .fw-split--image-right .fw-split__content > p { margin-top: 20px !important; }
.page-id-198 .fw-banner:has(.ibia-acc-cols) { padding-block: 0 !important; }
/* -20px pull removed 2026-10-02: it compensated for the old 1440 wideSize.
   With the container at the design's 1400 it pulled the split past the edge. */
.page-id-198 .is-style-ibia-tier > ul { margin-bottom: 0 !important; }
.page-id-198 .is-style-ibia-tier > h3 + p { padding-bottom: 0 !important; }
.page-id-198 .ibia-callout > h2 + p.wp-block-paragraph { margin-top: 17.5px !important; }
.page-id-198 .ibia-callout > p + p.wp-block-paragraph { margin-top: 1.5px !important; }

/* 2026-09-17 Membership, third pass: the frame draws no rule under
   the last row of either list (three rules for four rows, four
   for five), the tiers band carried the banner's 60 outer bottom
   padding, and the callout H2 kept a 2px block gap. */
.page-id-198 .ibia-acc__item:last-child .ibia-acc__head { padding-bottom: 0 !important; border-bottom: 0 !important; }
.page-id-198 .fw-banner:has(.wp-block-columns) { padding-bottom: 0 !important; }
.page-id-198 .ibia-callout > h2 { margin-bottom: 0 !important; }
/* 2026-09-17 Membership, fourth pass: 2px of the H2's line box still sat under the callout body. */
.page-id-198 .ibia-callout > h2 + p.wp-block-paragraph { margin-top: 15.5px !important; }

/* 2026-09-17 Membership, fifth pass: the frame's Corporate button is the Light Green style (Frame 7), the page carries the outline style — painted here; the block's style should follow. */
.page-id-198 .wp-block-column:nth-child(2) .is-style-ibia-tier .wp-block-button__link { background-color: var(--fw-green) !important; border-color: var(--fw-green) !important; color: var(--fw-navy) !important; }

/* 2026-10-08 Membership: the rule above paints the Corporate button the Light Green
   style with !important, which the generic outline hover cannot beat, so the button
   had no hover at all. Same hover the Light Green style already uses at
   .ibia-mem-tier__cta--green:hover. */
.page-id-198 .wp-block-column:nth-child(2) .is-style-ibia-tier .wp-block-button__link:hover,
.page-id-198 .wp-block-column:nth-child(2) .is-style-ibia-tier .wp-block-button__link:focus-visible {
	background-color: var(--ibia-mem-darkgreen) !important;
	border-color: var(--ibia-mem-darkgreen) !important;
	color: var(--fw-white) !important;
}


/* =========================================================
   2026-09-17 — IMO (203) measured onto Figma 3006:5382.
   Appended overrides only — Owen's split / banner / accordion /
   icon-cards / latest-news / page-hero blocks and their CSS are
   untouched. Offsets are the frame's; text boxes sit cap-top
   minus lead (16/28 → 8.5, 20/30 → 8). Server-side hand edit:
   fold into sites/ibia-theme/ before the next push.
   ========================================================= */

/* --- Hero with kicker: cap 133, H1 154 (as Leadership Legacy). */
.page-id-203 .fw-page-hero { padding-top: 28.5px !important; padding-bottom: 25.5px !important; }
.page-id-203 .fw-page-hero__content > h1 { margin-top: 1.5px !important; }

/* --- About split (Frame 29): card 302–756 at x 40, copy at x
   800 from 69 down; body box 20 under the H2, paragraphs 10
   apart; credit tag on the card's corner. */
.page-id-203 .fw-split--image-left { margin-block: 58px 0 !important; padding-block: 0 !important; }
.page-id-203 .fw-split--image-left .fw-split__inner { align-items: start !important; }
.page-id-203 .fw-split--image-left .fw-split__content { align-self: start; padding-top: 69px !important; }
.page-id-203 .fw-split--image-left .fw-split__content > h2 { margin: 0 !important; }
.page-id-203 .fw-split--image-left .fw-split__content > h2 + p { margin: 20px 0 0 !important; }
.page-id-203 .fw-split--image-left .fw-split__content > p + p { margin: 10px 0 0 !important; }
.page-id-203 .fw-split__credit { left: 0 !important; bottom: 0 !important; }

/* --- Why IMO split (Frame 32): card 844–1298 at x 741, copy at
   x 101 from 100 down; body box 21.5 under the H2. */
.page-id-203 .fw-split--image-right { margin-block: 88px 0 !important; padding-block: 0 !important; }
.page-id-203 .fw-split--image-right .fw-split__inner { margin-left: 61px !important; margin-right: -1px !important; align-items: start !important; }
.page-id-203 .fw-split--image-right .fw-split__content { align-self: start; padding-top: 100px !important; }
.page-id-203 .fw-split--image-right .fw-split__content > h2 { margin: 0 !important; }
.page-id-203 .fw-split--image-right .fw-split__content > h2 + p { margin: 21.5px 0 0 !important; }
.page-id-203 .fw-split--image-right .fw-split__content > p + p { margin: 10px 0 0 !important; }
.page-id-203 .fw-split__media { box-shadow: var(--fw-shadow-card); }

/* --- What IBIA Does (green band, 453): 66 under the card;
   eyebrow 41 down, H2 8 under it, intro box 21.5 under that,
   lists 48.5 under the intro, 56 below the last row. Rows on
   the 66 pitch with solid rules, none after the last. */
.page-id-203 .fw-banner:has(.ibia-acc-cols) { margin-top: 66px !important; padding-block: 0 !important; min-height: 0 !important; }
.page-id-203 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner { padding-block: 41px 56px !important; min-height: 0 !important; }
.page-id-203 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > * { margin: 0 !important; }
.page-id-203 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > h2 { margin-top: 8px !important; }
.page-id-203 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > h2 + p { margin-top: 21.5px !important; }
.page-id-203 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > p + p { margin-top: 10px !important; }
.page-id-203 .ibia-acc-cols { margin-top: 48.5px !important; }
.page-id-203 .ibia-acc__item + .ibia-acc__item { margin-top: 17px !important; }
.page-id-203 .ibia-acc__head { padding-bottom: 18px !important; border-bottom-color: var(--fw-navy) !important; }
.page-id-203 .ibia-acc__item:last-child .ibia-acc__head { padding-bottom: 0 !important; border-bottom: 0 !important; }

/* --- Key Areas of Focus (Group 117, 1330 × 306): 82 under the
   band; rows on a 65 pitch — 33 tile, label box 2 down, 15 in,
   a 20% Blue Grey rule 502 wide under the label 16 below the
   tile, none after the last; 46 under the last tile. */
.page-id-203 .wp-block-group.alignwide:has(.is-style-ibia-numbered) { margin-top: 82px !important; padding-bottom: 46px !important; }
.page-id-203 .is-style-ibia-numbered li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 2px 0 30px !important;
	line-height: 30px;
}
.page-id-203 .is-style-ibia-numbered li::before { flex: 0 0 33px; margin-top: -2px; }
.page-id-203 .is-style-ibia-numbered li::after {
	content: "";
	position: absolute;
	left: 49px;
	bottom: 15px;
	width: 502px;
	border-top: 1px solid rgba(148, 159, 179, 0.2);
}
.page-id-203 .is-style-ibia-numbered li:nth-last-child(-n+1)::after,
.page-id-203 .is-style-ibia-numbered li:nth-child(3)::after { content: none; }
.page-id-203 .is-style-ibia-numbered li:nth-child(3),
.page-id-203 .is-style-ibia-numbered li:last-child { padding-bottom: 0 !important; }

/* --- IMO Submissions: H2 on the 1400 grid 81 under the panel,
   intro box 21.5 under it in a 918 column, paragraphs 10 apart.

   The inset is half the space left over once the 1400 column is placed,
   which is what alignwide does, so these sit on the same grid as the
   committee cards below. It was a flat -20px, written against the 1440
   canvas where the column starts at the content edge; past that width
   the cards centred and the text stayed against the window. Clamped at
   zero so nothing moves at or below 1440. */
.page-id-203 .entry-content > h2.wp-block-heading {
	margin: 81px 0 0 !important;
	width: 1400px;
	max-width: 100%;
}
.page-id-203 .entry-content > h2.wp-block-heading + p.wp-block-paragraph {
	margin: 21.5px 0 0 !important;
	max-width: 918px;
}
.page-id-203 .entry-content > p.wp-block-paragraph + p.wp-block-paragraph {
	margin: 10px 0 0 !important;
	max-width: 918px;
}

/* --- Committee cards (Rectangle 102–105): four 320 × 245 on the
   1400 grid with the card shadow; tile 20 down, H3 box 74, copy
   box 108.5, a full-width 39 button at 184, 22 below it. */
.page-id-203 .fw-icons { padding-inline: 0 !important; }
.page-id-203 .fw-icons__grid { grid-template-columns: repeat(4, 320px) !important; }
.page-id-203 .fw-icon-card { box-sizing: border-box; height: 245px; padding: 20px 20px 22px !important; box-shadow: var(--fw-shadow-card) !important; }
.page-id-203 .fw-icon-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.page-id-203 .fw-icon-card__body > h3 { margin: 11px 0 0 !important; }
.page-id-203 .fw-icon-card__body > p { margin: 6.5px 0 0 !important; }
.page-id-203 .fw-icon-card__body > .wp-block-buttons { margin: 19.5px 0 0 !important; padding: 0 !important; }
.page-id-203 .fw-icon-card__body .wp-block-button,
.page-id-203 .fw-icon-card__body .wp-block-button__link { width: 100%; box-sizing: border-box; }
.page-id-203 .fw-icon-card__body .wp-block-button__link { padding-block: 4.5px !important; }

/* --- IMO Monthly Reports (Frame 34): 71 under the cards on the
   1400 grid; button 25 down; cards 30 under the H2 — featured
   680 × 724 with the title box 68 under the image and the copy
   13.5 under the title; small cards 342 with the title box
   187.25 down at 18/28 Regular. Footer 63 below. */
.page-id-203 .fw-news--featured-grid { margin-top: 71px !important; padding-inline: 0 !important; }
.page-id-203 .fw-news__head { position: relative; }
.page-id-203 .fw-news__cta { position: absolute; top: 25px; right: 0; margin: 0 !important; }
.page-id-203 .fw-news__cta .wp-block-button__link { padding-block: 4.5px !important; }
.page-id-203 .fw-news__viewport { margin-top: 30px !important; }
.page-id-203 .fw-news-card { box-sizing: border-box; }
.page-id-203 .fw-news-card:first-child { min-height: 724px; }
.page-id-203 .fw-news-card:first-child .fw-news-card__head { margin-top: 64px !important; padding-top: 4px !important; }
.page-id-203 .fw-news-card:first-child .fw-news-card__excerpt { padding-top: 13.5px !important; }
.page-id-203 .fw-news-card:not(:first-child) { min-height: 342px; }
.page-id-203 .fw-news-card:not(:first-child) .fw-news-card__head { margin-top: 46.25px !important; padding-top: 4px !important; }
.page-id-203 .fw-news-card:not(:first-child) .fw-news-card__title { font-weight: var(--fw-weight-regular) !important; }
.page-id-203 .ibia-footer { margin-top: 63px !important; }

/* 2026-09-17 IMO, second pass: the band's child reset out-ranked
   the list margin; the numbered list's own ::after held its 7px
   offset; the constrained layout centres the Submissions copy so
   it needs no negative margin; the news card carries an empty
   meta row with 37px of margin; the head's bottom margin, not the
   viewport's top, is the 40. */
.page-id-203 .fw-banner__inner > .ibia-acc-cols { margin-top: 48.5px !important; }
.page-id-203 .is-style-ibia-numbered li { padding-bottom: 32px !important; }
.page-id-203 .is-style-ibia-numbered li:nth-child(3),
.page-id-203 .is-style-ibia-numbered li:last-child { padding-bottom: 0 !important; }
.page-id-203 .is-style-ibia-numbered li::after { left: 49px !important; bottom: 15px !important; width: 502px !important; height: 0 !important; border-top: 1px solid rgba(148, 159, 179, 0.2) !important; background: none !important; }
/* 2026-10-05: the note above is wrong — the constrained layout does not
   centre this copy, because the fixed 1400 width with max-width:none
   defeats its auto margins. Zeroing the margin left it against the
   window on anything wider than the 1440 canvas while the committee
   cards below centred. The inset is half the space left over, clamped
   at zero so nothing moves at or below 1440. */
.page-id-203 .entry-content > h2.wp-block-heading { margin-left: max(0px, calc((100% - 1400px) / 2)) !important; }
.page-id-203 .entry-content > h2.wp-block-heading + p.wp-block-paragraph { margin: 26.5px 0 0 0 !important; margin-left: max(0px, calc((100% - 1400px) / 2)) !important; }
.page-id-203 .entry-content > p.wp-block-paragraph + p.wp-block-paragraph { margin-left: max(0px, calc((100% - 1400px) / 2)) !important; }
.page-id-203 .fw-news__head { margin-bottom: 30px !important; }
.page-id-203 .fw-news__viewport { margin-top: 0 !important; }
.page-id-203 .fw-news-card__meta { margin: 0 !important; padding: 0 !important; }

/* 2026-09-17 IMO, third pass. The band's :has() selector out-ranks
   a plain descendant one, so the list margin goes on the same
   chain. The latest-news card DOES print a date and a chip (they
   were in a display:contents meta row and hidden from the first
   walk) — they now sit where the frame draws them: featured date
   box 26.5 under the image, title 13.5 under it, copy 13.5 under
   that, chip 26 off the foot; small cards 18.5 / 3.75 / 26. Both
   in 16 Light, the chip 27 tall. */
.page-id-203 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > .ibia-acc-cols { margin-top: 48.5px !important; }
.page-id-203 .fw-news__head { margin-bottom: 20px !important; }
.page-id-203 .fw-news-card__date {
	order: 2;
	margin: 0 20px !important;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: var(--fw-weight-light) !important;
	line-height: 28px !important;
}
.page-id-203 .fw-news-card:first-child .fw-news-card__date { margin-top: 26.5px !important; }
.page-id-203 .fw-news-card:not(:first-child) .fw-news-card__date { margin-top: 18.5px !important; }
.page-id-203 .fw-news-card:first-child .fw-news-card__head { margin-top: 13.5px !important; padding-top: 0 !important; }
.page-id-203 .fw-news-card:not(:first-child) .fw-news-card__head { margin-top: 3.75px !important; padding-top: 0 !important; }
.page-id-203 .fw-news-card__badge {
	order: 99;
	margin: auto 21px 26px !important;
	padding: 8px 10px !important;
	font-size: 16px !important;
	font-weight: var(--fw-weight-light) !important;
	line-height: 11px !important;
	height: auto !important;
}
.page-id-203 .fw-news-card__excerpt { padding-inline: 21px !important; }

/* 2026-09-17 IMO, fourth pass: the news heading's own 40 bottom
   margin was the gap, not the head's; the committee cards sit 42.5
   under the intro's box (the 51 was measured to the trimmed text). */
.page-id-203 .fw-news__heading { margin-bottom: 0 !important; }
.page-id-203 .fw-news__head { margin-bottom: 30px !important; }
.page-id-203 .fw-icons { margin-top: 42.5px !important; }
/* 2026-09-17 IMO, fifth pass: 8.5px still sat between the intro and the cards after the 42.5 — taken off the margin. */
.page-id-203 .fw-icons { margin-top: 34px !important; }

/* 2026-09-17 IMO, sixth pass: the 51 was the grid's own top margin collapsing through the section. */
.page-id-203 .fw-icons { margin-top: 42.5px !important; }
.page-id-203 .fw-icons__grid { margin-top: 0 !important; }

/* 2026-09-17 IMO, seventh pass (Lisa): the frame puts all four
   committee buttons on one line (2723) whatever the copy's length
   — anchor them to the foot, 19.5 minimum under the copy. */
.page-id-203 .fw-icon-card__body > p { margin-bottom: 19.5px !important; }
.page-id-203 .fw-icon-card__body > .wp-block-buttons { margin-top: auto !important; }

/* =========================================================
   2026-09-17 — Resources (213) measured onto Figma 635:303.
   Appended overrides only — Owen's resources / resource-card /
   filter-sidebar blocks and their CSS untouched. The sidebar
   already carries today's Events rules; this frame nudges its
   title and padding by a few px. Server-side hand edit: fold
   into sites/ibia-theme/ before the next push.
   ========================================================= */

/* --- Intro on the page edge in a 918 column, box 27.5 under
   the band; listing 27.5 under the intro; sidebar 3 lower. */
/* The intro now sits in an alignwide group so it shares the listing's
   container. Pinning it to the page edge only aligned at a 1440 viewport;
   above that the columns centre and the intro did not. */
/* Only the top margin. A margin shorthand here would zero the left and
   right values and override the auto margins that centre an alignwide
   child, which is what pinned the intro to the page edge originally. */
.page-id-213 .entry-content > .wp-block-group { margin-top: 27.5px !important; }
.page-id-213 .entry-content > .wp-block-group > p.wp-block-paragraph { margin: 0 !important; max-width: 918px; }
.page-id-213 .entry-content > .wp-block-columns { margin-top: 27.5px !important; }
.page-id-213 .ibia-filters { margin-top: 3px !important; padding: 16.65px 20px 39.9px !important; }
.page-id-213 .ibia-filters__title { margin-bottom: 12.45px !important; }

/* --- Results bar 44 tall: count text 14 down, sort at the top. */
.page-id-213 .ibia-res__topbar { height: 44px; align-items: flex-start; }
.page-id-213 .ibia-res__count { margin-top: 14px !important; }

/* --- Cards: rows with a cover are 396, plain rows 315 (the
   frame fixes both); tile 21 down, kind 17 under the tile (15
   under a cover well), title box 2.5 under the kind; meta box
   11 above the hairline, button 21 below it, 17 off the foot. */
.page-id-213 .ibia-res-card { min-height: 315px; }
.page-id-213 .ibia-res-card:has(.ibia-res-card__thumb) { min-height: 396px; }
.page-id-213 .ibia-res-card__tile { margin-top: 2px; }
.page-id-213 .ibia-res-card__tile + .ibia-res-card__kind { margin-top: 17px !important; }
.page-id-213 .ibia-res-card__thumb + .ibia-res-card__kind { margin-top: 15px !important; }
.page-id-213 .ibia-res-card__badge ~ .ibia-res-card__kind { margin-top: 17px !important; }
.page-id-213 .ibia-res-card__title { margin-top: 2.5px !important; }
.page-id-213 .ibia-res-card__rule { margin: 11px 0 21px !important; }

/* Footer 75 under the last row. */
.page-id-213 .ibia-footer { margin-top: 75px !important; }

/* 2026-09-17 Resources, second pass: the button wrapper carried its own 22 top margin on top of the hairline's 21. */
.page-id-213 .ibia-res-card__cta-wrap { margin-top: 0 !important; }

/* =========================================================
   2026-09-17 — World Bunkering (218) measured onto Figma
   3006:5296. Appended overrides only — Owen's publication-
   feature / resources / resource-card / split / banner /
   page-hero blocks untouched. Offsets are the frame's; text
   boxes sit cap-top minus lead (16/28 → 8.5). Server-side hand
   edit: fold into sites/ibia-theme/ before the next push.
   ========================================================= */

/* --- Featured publication: fan 290–786 at x 780 in a 559 × 496
   stage; copy at x 101 from 85 down — eyebrow, H2 8 under it,
   body box 21.5 under that, buttons 21.5 under the body on a
   30 gap, 39 tall. */
.page-id-218 .ibia-wb-hero { margin-top: 79px !important; align-items: start !important; }
.page-id-218 .ibia-wb-hero__text { padding-top: 85px !important; }
.page-id-218 .ibia-wb-hero__text > * { margin: 0 !important; }
.page-id-218 .ibia-wb-hero__text > h2 { margin-top: 8px !important; }
.page-id-218 .ibia-wb-hero__text > h2 + p { margin-top: 21.5px !important; }
.page-id-218 .ibia-wb-hero__text > p + p { margin-top: 10px !important; }
.page-id-218 .ibia-wb-hero__text > .wp-block-buttons { margin-top: 21.5px !important; gap: 30px !important; }
.page-id-218 .ibia-wb-hero .wp-block-button__link { padding-block: 4.5px !important; }

/* The fan, as drawn (Group 2): front cover 338 × 479 at (0, 25.5)
   square; middle 310 × 439 turned 15° about (251, 252); back
   310 × 439 turned 30° about (315, 276). */
.page-id-218 .ibia-wb-fan,
.page-id-218 .ibia-wb-fan__stage { width: 559px !important; height: 496px !important; overflow: visible !important; }
.page-id-218 .ibia-wb-fan__item {
	right: auto !important;
	bottom: auto !important;
	transform-origin: 50% 50% !important;
}
.page-id-218 .ibia-wb-fan__item--1 { left: 0 !important; top: 25.49px !important; width: 338.46px !important; height: 478.66px !important; transform: none !important; }
.page-id-218 .ibia-wb-fan__item--2 { left: 95.97px !important; top: 32.68px !important; width: 310.26px !important; height: 438.78px !important; transform: rotate(15deg) !important; }
.page-id-218 .ibia-wb-fan__item--3 { left: 160.01px !important; top: 56.75px !important; width: 310.12px !important; height: 438.58px !important; transform: rotate(30deg) !important; }
.page-id-218 .ibia-wb-fan__item img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* --- Resources: eyebrow 87 under the fan on the page edge, H2 8
   under it, cards 47 under the H2 at 320 on the 1400 grid, 396
   tall with the Resources card rhythm; arrows 45 below. */
.page-id-218 :is(.entry-content, .fw-banner__inner) > p.is-style-ibia-eyebrow { margin: 87px 0 0 0 !important; margin-left: max(0px, calc((100% - 1400px) / 2)) !important; }
.page-id-218 :is(.entry-content, .fw-banner__inner) > h2.wp-block-heading { margin: 8px 0 0 0 !important; margin-left: max(0px, calc((100% - 1400px) / 2)) !important; }
/* The 1400 column centres like the rest of the page, rather than sitting
   against the window on anything wider than the 1440 canvas. */
.page-id-218 :is(.entry-content, .fw-banner__inner) > .ibia-res__main { margin: 47px 0 0 0 !important; margin-left: max(0px, calc((100% - 1400px) / 2)) !important; width: 1400px; max-width: none; }
.page-id-218 .ibia-res__grid { width: 1400px !important; margin: -14px !important; padding: 14px !important; scroll-padding: 14px !important; grid-template-columns: repeat(4, 320px) !important; gap: 40px !important; grid-auto-columns: 320px !important; }
.page-id-218 .ibia-res-card { min-height: 396px; }
.page-id-218 .ibia-res-card__thumb + .ibia-res-card__kind { margin-top: 15px !important; }
.page-id-218 .ibia-res-card__title { margin-top: 2.5px !important; }
.page-id-218 .ibia-res-card__rule { margin: 11px 0 21px !important; }
.page-id-218 .ibia-res-card__cta-wrap { margin-top: 0 !important; }
.page-id-218 .ibia-arrows { margin-top: 47px !important; width: 1400px; }

/* --- Contact split (Frame 118): card 680 × 454 on the page edge
   80 under the arrows; copy at x 780 from 81 down, body box 21.5
   under the H2, lines 10 apart, button 21.5 under the body. Join
   band 80 under the card. */
.page-id-218 .fw-split--image-left { margin-block: 80px 0 !important; padding-block: 0 !important; }
/* -20px pull removed 2026-10-02, same reason; the alignment it set is kept. */
.page-id-218 .fw-split--image-left .fw-split__inner { align-items: start !important; }
.page-id-218 .fw-split--image-left .fw-split__content { align-self: start; padding-top: 81px !important; }
.page-id-218 .fw-split--image-left .fw-split__content > * { margin: 0 !important; }
.page-id-218 .fw-split--image-left .fw-split__content > h2 + p { margin-top: 21.5px !important; }
.page-id-218 .fw-split--image-left .fw-split__content > p + p { margin-top: 10px !important; }
.page-id-218 .fw-split--image-left .fw-split__content > .wp-block-buttons { margin-top: 21.5px !important; }
.page-id-218 .fw-split--image-left .fw-split__content a { text-decoration: underline; }
.page-id-218 .fw-split__media { box-shadow: var(--fw-shadow-card); }
.page-id-218 .fw-split .wp-block-button__link { padding-block: 4.5px !important; }
.page-id-218 .fw-banner.is-style-ibia-join { margin-top: 80px !important; }
.page-id-218 .fw-banner.is-style-ibia-join .wp-block-button__link { padding-block: 4.5px !important; }

/* 2026-09-17 World Bunkering, second pass: the three hero buttons
   run 1.5px over their 560 column in Chrome's rendering and the
   third wrapped; the frame's arrow pair is centred 21 right of the
   page centre (741), as its Events twin is. */
.page-id-218 .ibia-wb-hero__text > .wp-block-buttons { flex-wrap: nowrap !important; }
.page-id-218 .ibia-arrows { padding-left: 42px !important; box-sizing: border-box; }
/* 2026-09-17 World Bunkering, third pass: the buttons must not
   shrink or wrap their labels; and the frame fans Q1 2026 in the
   middle with Q4 2025 at the back — the block has them the other
   way round, so the two geometries swap. */
.page-id-218 .ibia-wb-hero__text .wp-block-button { flex: 0 0 auto !important; }
.page-id-218 .ibia-wb-hero__text .wp-block-button__link { white-space: nowrap !important; }
.page-id-218 .ibia-wb-fan__item--2 { left: 160.01px !important; top: 56.75px !important; width: 310.12px !important; height: 438.58px !important; transform: rotate(30deg) !important; z-index: 1 !important; }
.page-id-218 .ibia-wb-fan__item--3 { left: 95.97px !important; top: 32.68px !important; width: 310.26px !important; height: 438.78px !important; transform: rotate(15deg) !important; z-index: 2 !important; }
/* =========================================================
   2026-09-17 — IBIA Structure (229) measured onto Figma
   3006:5526. Appended overrides only — Owen's split / banner /
   accordion / image / page-hero blocks untouched. Offsets are
   the frame's; text boxes sit cap-top minus lead (16/28 → 8.5).
   Server-side hand edit: fold into sites/ibia-theme/ before the
   next push.
   ========================================================= */

/* --- Title band: this frame's H1 box is at 123. */
.page-id-229 .fw-page-hero { padding-top: 27px !important; padding-bottom: 28px !important; }

/* --- About split (Frame 29): card 302–756 at x 40, copy at x 800
   from 100 down, body box 21 under the H2, paragraphs 10 apart. */
.page-id-229 .fw-split--image-left { margin-block: 58px 0 !important; padding-block: 0 !important; }
.page-id-229 .fw-split--image-left .fw-split__inner { align-items: start !important; }
.page-id-229 .fw-split--image-left .fw-split__content { align-self: start; padding-top: 100px !important; }
.page-id-229 .fw-split--image-left .fw-split__content > * { margin: 0 !important; }
.page-id-229 .fw-split--image-left .fw-split__content > h2 + p { margin-top: 21px !important; }
.page-id-229 .fw-split--image-left .fw-split__content > p + p { margin-top: 10px !important; }
.page-id-229 .fw-split__media { box-shadow: var(--fw-shadow-card); }

/* --- Organigram 61 under the card (the frame draws it at x 14,
   6px off the grid; kept on the grid). */
.page-id-229 .entry-content > .wp-block-image { margin: 61px auto 0 !important; }

/* --- Green band (Group 146, 339): 47 under the image; eyebrow 53
   down, H2 8 under it, body box 21.5 under that in a 960 column,
   rows 47.5 under the body, 65 below the row. One row per
   column — no rule under it. */
.page-id-229 .fw-banner:has(.ibia-acc-cols) { margin-top: 47px !important; padding-block: 0 !important; min-height: 0 !important; }
.page-id-229 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner { padding-block: 53px 65px !important; min-height: 0 !important; }
.page-id-229 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > * { margin: 0 !important; }
.page-id-229 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > h2 { margin-top: 8px !important; }
.page-id-229 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > h2 + p { margin-top: 21.5px !important; }
.page-id-229 .fw-banner:has(.ibia-acc-cols) > .fw-banner__inner > .ibia-acc-cols { margin-top: 47.5px !important; }
.page-id-229 .ibia-acc__item + .ibia-acc__item { margin-top: 17px !important; }
.page-id-229 .ibia-acc__head { padding-bottom: 18px !important; border-bottom-color: var(--fw-navy) !important; }
.page-id-229 .ibia-acc__item:last-child .ibia-acc__head { padding-bottom: 0 !important; border-bottom: 0 !important; }

/* --- Closing split (Frame 38): card 741–1421 × 1917–2371, 103
   under the band; copy at x 101 from 161 down, body box 21.5
   under the H2. Footer 103 under the card. */
.page-id-229 .fw-split--image-right { margin-block: 103px 0 !important; padding-block: 0 !important; }
.page-id-229 .fw-split--image-right .fw-split__inner { margin-left: 61px !important; margin-right: -1px !important; align-items: start !important; }
.page-id-229 .fw-split--image-right .fw-split__content { align-self: start; padding-top: 161px !important; }
.page-id-229 .fw-split--image-right .fw-split__content > * { margin: 0 !important; }
.page-id-229 .fw-split--image-right .fw-split__content > h2 + p { margin-top: 21.5px !important; }
.page-id-229 .ibia-footer { margin-top: 103px !important; }

/* 2026-09-17 IBIA Structure, second pass: this page's title band is the 115 one, so the About card sits 91 under it, not IMO's 58. */
.page-id-229 .fw-split--image-left { margin-top: 91px !important; }

/* =========================================================
   2026-09-17 — Accordion OPEN state, from the Why join component
   set (Figma 966:3121, Variant2/3). Closed rows were done page
   by page today; this is the expanded row: label, body box 10.5
   under the label box, paragraphs 10 apart, a disc list 24 in
   with no gap between items, the rule 19.5 under the body (not
   under the label), next row 26 under the rule. Appended
   override only — Owen's accordion block and ibia-accordion.js
   untouched (they toggle aria-expanded; the CSS reads it).
   ========================================================= */
:is(.page-id-198, .page-id-203, .page-id-229) .ibia-acc__head[aria-expanded="true"] {
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}
:is(.page-id-198, .page-id-203, .page-id-229) .ibia-acc__panel {
	padding: 10.5px 0 19.5px !important;
	border-bottom: 1px solid var(--fw-navy);
	font-size: 16px;
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}
:is(.page-id-198, .page-id-203, .page-id-229) .ibia-acc__item:last-child .ibia-acc__panel { border-bottom: 0; }
:is(.page-id-198, .page-id-203, .page-id-229) .ibia-acc__panel > * { margin: 0 0 10px !important; }
:is(.page-id-198, .page-id-203, .page-id-229) .ibia-acc__panel > :last-child { margin-bottom: 0 !important; }
:is(.page-id-198, .page-id-203, .page-id-229, .editor-styles-wrapper) .ibia-acc__panel ul {
	padding-left: 24px !important;
	list-style: disc !important;
}
:is(.page-id-198, .page-id-203, .page-id-229, .editor-styles-wrapper) .ibia-acc__panel li { margin: 0 !important; padding: 0 !important; }

/* 2026-09-17 accordion open state, second pass: the row after an
   open one sits 26 under its rule in the frame (closed rows 18). */
:is(.page-id-198, .page-id-203, .page-id-229) .ibia-acc__item:has(> .ibia-acc__head[aria-expanded="true"]) + .ibia-acc__item { margin-top: 25px !important; }
/* 2026-10-13: the three list rules here also name .editor-styles-wrapper, so the editor
   canvas (which has no page-id class) stops drawing the disc AND the li::before dot. */
/* 2026-09-17 accordion open state, third pass: the theme draws its own list bullet as li::before, which doubled the disc and sat on the first letter once the padding matched the frame. */
:is(.page-id-198, .page-id-203, .page-id-229, .editor-styles-wrapper) .ibia-acc__panel li::before { content: none !important; }

/* =========================================================
   Homepage sections as blocks. 2026-09-18.

   The last core/group wrappers with typed classNames on the
   homepage become: banner "IBIA Events band" holding a
   core/group "IBIA Section head" and the events block in its
   "IBIA Homepage feed" style; publication-feature in band
   layout; core/group styles "IBIA Membership section",
   "IBIA Logo row" / "IBIA Logo row (corporate)". The
   .ibia-events__head / __grid / .ibia-event-card /
   .ibia-membership / .ibia-logos rules above were aliased
   onto the new selectors; what follows is the rest.
   ========================================================= */

/* --- The events band (the homepage .ibia-events wrapper) --- */
.fw-banner.is-style-ibia-events {
	background-color: rgba(var(--fw-blue-grey-rgb), 0.2);
	padding-block: var(--fw-space-xl);
}
.fw-banner.is-style-ibia-events > .fw-banner__inner {
	display: block;
	max-width: var(--fw-container);
	margin-inline: auto;
	padding-inline: 0;
}
.fw-banner.is-style-ibia-events > .fw-banner__inner > :first-child { margin-top: 0; }
.fw-banner.is-style-ibia-events > .fw-banner__inner > :last-child { margin-bottom: 0; }
.entry-content > .fw-banner.is-style-ibia-events { margin-block: 0; }

/* --- Section head: intro left, button right --- */
.is-style-ibia-section-head { margin: 0 auto var(--fw-space-lg); }

/* --- The feed: 680 / 320 / 320, featured card down the left --- */
.ibia-events__cards.is-style-ibia-home-feed {
	--fw-events-gap: var(--fw-gutter);
	grid-template-columns: var(--fw-col-2) var(--fw-col-4) var(--fw-col-4);
}
.ibia-events__cards.is-style-ibia-home-feed > .ibia-event--featured {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	grid-template-columns: none;
}
/* The listing pages' card rules (.ibia-event*) also match here; the feed
   restores the homepage card. */
.is-style-ibia-home-feed .ibia-event { display: block; height: auto; }
.is-style-ibia-home-feed .ibia-event__media,
.is-style-ibia-home-feed .ibia-event--featured .ibia-event__media { aspect-ratio: auto; height: auto; }
.is-style-ibia-home-feed .ibia-event__body,
.is-style-ibia-home-feed .ibia-event--featured .ibia-event__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--fw-space-md);
	row-gap: 0;
	align-items: center;
	padding: var(--fw-space-md);
	gap: 0 var(--fw-space-md);
}
.is-style-ibia-home-feed .ibia-event__body > * { grid-column: 1 / -1; margin: 0 0 var(--fw-space-sm) !important; }
.is-style-ibia-home-feed .ibia-event__body > .ibia-event__date {
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 var(--fw-space-xs) !important;
	font-size: var(--fw-small-size);
	line-height: var(--fw-small-line);
	padding: 0;
	position: static;
}
.is-style-ibia-home-feed .ibia-event__body > .ibia-event__chip {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	margin: 0 0 var(--fw-space-xs) !important;
}
.is-style-ibia-home-feed .ibia-event__body > .ibia-event__title {
	font-size: var(--fw-h4-size);
	font-weight: var(--fw-h4-weight);
	line-height: var(--fw-h4-line);
	margin: 0 0 var(--fw-space-sm) !important;
}
.is-style-ibia-home-feed .ibia-event__body > .ibia-event__loc {
	order: 10;
	margin: var(--fw-space-md) 0 0 !important;
	padding-left: 0;
	position: static;
	top: auto;
}
.is-style-ibia-home-feed .ibia-event__body > .ibia-event__loc::before { position: static; width: 14px; height: 14px; }
/* Small cards: 320 x 180 image, title at 16/20. */
.is-style-ibia-home-feed .ibia-event:not(.ibia-event--featured) .ibia-event__media img { aspect-ratio: 320 / 180; object-fit: cover; }
.is-style-ibia-home-feed .ibia-event:not(.ibia-event--featured) .ibia-event__body > .ibia-event__title { font-size: var(--fw-body-size); line-height: 20px; margin: 0 0 var(--fw-space-xs) !important; }
@media (max-width: 1024px) {
	.ibia-events__cards.is-style-ibia-home-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ibia-events__cards.is-style-ibia-home-feed > .ibia-event--featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) { .ibia-events__cards.is-style-ibia-home-feed { grid-template-columns: 1fr; } }

/* The listing pages' pixel rules on .ibia-event--featured / :not(--featured)
   (fixed 280 / 505 heights, gaps, paddings) are global; the homepage feed
   restores a natural-height card. */
.is-style-ibia-home-feed .ibia-event--featured { height: auto !important; min-height: 0 !important; }
.is-style-ibia-home-feed .ibia-event:not(.ibia-event--featured) { min-height: 0 !important; }
.is-style-ibia-home-feed .ibia-event--featured .ibia-event__media { min-height: 0; display: block; }
.is-style-ibia-home-feed .ibia-event .ibia-event__body { padding: var(--fw-space-md) !important; gap: 0 var(--fw-space-md) !important; }
.is-style-ibia-home-feed .ibia-event__body > .ibia-event__chip { line-height: normal !important; }
/* …and the homepage card's own type: title H4, date and location in small
   print / body weight medium, as the homepage frame draws them. */
.is-style-ibia-home-feed .ibia-event .ibia-event__body > .ibia-event__title { font-size: var(--fw-h4-size) !important; font-weight: var(--fw-h4-weight) !important; line-height: var(--fw-h4-line) !important; }
.is-style-ibia-home-feed .ibia-event:not(.ibia-event--featured) .ibia-event__body > .ibia-event__title { font-size: var(--fw-body-size) !important; line-height: 20px !important; }
.is-style-ibia-home-feed .ibia-event .ibia-event__body > .ibia-event__date { font-size: var(--fw-small-size) !important; font-weight: var(--fw-weight-regular) !important; line-height: var(--fw-small-line) !important; text-align: left; justify-self: start; }
.is-style-ibia-home-feed .ibia-event .ibia-event__body > .ibia-event__loc { font-size: var(--fw-body-size) !important; font-weight: var(--fw-weight-medium) !important; line-height: 28px !important; display: flex; align-items: center; gap: var(--fw-space-xs); }
.is-style-ibia-home-feed .ibia-event .ibia-event__body > .ibia-event__loc::before { width: 14px !important; height: 14px !important; position: static !important; }
.is-style-ibia-home-feed .ibia-event .ibia-event__body > * { text-align: left; }
/* Small feed cards have no chip, so no date/chip row: a plain stack. */
.is-style-ibia-home-feed .ibia-event:not(.ibia-event--featured) .ibia-event__body { display: block !important; }
.is-style-ibia-home-feed .ibia-event--featured .ibia-event__body { justify-content: start !important; justify-items: start; }

/* =========================================================
   Back to top. 2026-09-18. Asked for by the design's Dev Mode
   annotations on every page, drawn nowhere — so PP's rules:
   brand navy, the 4px radius, the spec's focus ring (Light
   Green on a dark fill), hidden until a screen of scrolling.
   ========================================================= */
.ibia-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.ibia-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.ibia-back-to-top:hover { background-color: var(--fw-green-dark); }
.ibia-back-to-top:focus-visible { outline: 2px solid var(--fw-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ibia-back-to-top { transition: none; } }
@media (max-width: 640px) { .ibia-back-to-top { right: 16px; bottom: 16px; } }

/* --- IBIA Milestones: real logos in the media slot (2026-09-24) ------
   `.ibia-milestone__media` (August) reproduces the frame's plain
   186 x 120 Blue Grey placeholder, because the design carries no
   artwork. Four of the fifteen milestones now have a real IBIA logo
   from the client's 21 Sep drop, and those overflowed the box and sat
   on the grey. Where a milestone has an image the placeholder fill and
   fixed height come off and the logo is fitted inside 186 x 120;
   milestones without one keep the placeholder exactly as drawn. */
:is(.ibia-milestone__media, .fw-timeline__media):has(img) {
	height: auto;
	background-color: transparent;
}
:is(.ibia-milestone__media, .fw-timeline__media) img {
	display: block;
	width: auto;
	height: auto;
	max-width: 186px;
	max-height: 120px;
	margin: 0 auto;
	object-fit: contain;
}

/* --- Testimonial grid, clipped card bottoms (2026-09-25) ------------
   `.fw-testimonials--grid .fw-testimonials__grid` is a horizontal
   scroller (`overflow-x: auto`) and carried `padding-top: 32px` for the
   quote badge that overhangs the card, but no padding at the bottom.
   The cards stretch to the full row height, so their bottom edge sat
   flush against the scroll container and the rounded corner and the
   2px 2px 12px card shadow were both cut off. Visible on Membership
   since it was built and on Training as soon as it went up. Matching
   the top padding restores the corner and leaves room for the shadow. */
.fw-testimonials--grid .fw-testimonials__grid {
	padding-bottom: 32px;
}

/* --- ...and the same at the sides (2026-09-25) ----------------------
   The first card started exactly on the container`s left edge and the
   last one ended exactly on its right, so those shadows were clipped
   too. Padding alone would inset the cards and break their alignment
   with the heading above, so the padding is cancelled by an equal
   negative margin: the scroll box grows outwards by 20px a side while
   the content box - and therefore the computed column width and every
   card position - stays exactly where it was. 20px is what the section
   has spare either side (measured 40 vs 20 at 1422 and at 1082), and
   it clears a 2px 2px 12px shadow with room to spare. Do not raise it
   without re-measuring: too much and the page scrolls sideways. */
.fw-testimonials--grid .fw-testimonials__grid {
	margin-inline: -20px;
	padding-inline: 20px;
}

/* ...and the snapport has to know about that padding (2026-09-25).
   The grid is `scroll-snap-type: x proximity` with `scroll-snap-align:
   start` on every card, so the browser snapped the first card flush to
   the border edge - resting at scrollLeft 20 and scrolling the new left
   padding straight back out of view. `scroll-padding-inline` insets the
   snapport by the same 20px, so the resting position is scrollLeft 0
   and the shadow stays visible. */
.fw-testimonials--grid .fw-testimonials__grid {
	scroll-padding-inline: 20px;
}

/* --- Footer legal line, room for the Accessibility link (2026-09-25) -
   The 486px cap was measured off the frame, where that line reads
   "Registered in England Number ... | Terms & Conditions | Privacy
   Policy". The legal line gained a fourth link on 25 Sep and now needs
   642px, so it was wrapping onto two lines with "| Accessibility"
   stranded underneath. Raised to 660 with a little headroom. The line
   stays centred, and the copyright line above is shorter so it is
   unaffected. If a fifth link is ever added, re-measure rather than
   guessing: the text needs 642px at 14px today. */
.ibia-footer__legal p {
	max-width: 660px;
}

/* --- Training testimonials: line the names up (2026-09-25) ----------
   The attribution is bottom anchored and was working correctly, every
   card ending 50px clear of its base. The names sat at four different
   heights all the same because the two lines above the base vary in
   length: the name runs to one line or two, the course to one, two or
   three. Measured spread was 86px.

   Reserving the worst case for both lines fixes the top edge without
   touching the copy. 74px is a two line name plus its 13.5px offset,
   84px is a three line course. Training only: Membership carries a
   single line "Corporate Member | ..." and would just gain a gap.

   Content driven, so re-measure if the course names change. */
.page-id-313 .fw-testimonials .fw-testimonial__author {
	min-height: 74px;
	box-sizing: border-box;
}
.page-id-313 .fw-testimonials .fw-testimonial__company {
	min-height: 84px;
}

/* --- Training testimonials, spacing pass on the same block (2026-09-25)
   The names sat too tight under the quote and the shorter cards carried
   too much air beneath the course line.

   Gap above the name: 13.5 to 30. The reserve rises with it, 90 rather
   than 74, so it is still 30 plus two 30px lines and the names stay
   level.

   Base of the card: 48.5 to 24. The three line course sets the floor,
   so the shorter ones keep some slack by design. That is the cost of
   holding the names on one line and it is the smaller of the two
   problems. */
.page-id-313 .fw-testimonials .fw-testimonial {
	padding-bottom: 24px !important;
}
.page-id-313 .fw-testimonials .fw-testimonial__author {
	padding-top: 30px !important;
	min-height: 90px;
}

/* --- Training testimonials: the avatar disc (2026-09-25) ------------
   The disc was pinned 20px from the top of the name, which centred it
   on the first line. Fine for a one line name, wrong for a two line
   one: it sat beside the first line with the name running on below,
   reading as too high.

   The name area is now a fixed 60px of text under 30px of padding, so
   38.5px puts a 43px disc exactly in the middle of it whatever the
   name does. Measured, not guessed: content top 30, content height 60,
   so 30 + (60 - 43) / 2. */
.page-id-313 .fw-testimonials .fw-testimonial__author::before {
	top: 38.5px;
}

/* --- Testimonial avatar gap (2026-09-25) ---------------------------
   Built at 61px of indent against a 43px disc, which leaves 18px of
   air. The frame sets that gap at 17: Frame 134 on 3006:4943 is a flex
   row with gap 17, disc 43 then the text column. So 60px of indent and
   a -60px offset. Applies to Membership and Training together, since
   they share the treatment. */
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__author {
	margin-left: 60px !important;
}
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__author::before {
	left: -60px;
}
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__company {
	margin-left: 60px !important;
}

/* --- Milestones: no grey block where there is no picture (2026-09-25)
   `.ibia-milestone__media` reproduces the frame's plain 186 x 120 Blue
   Grey placeholder, drawn on every milestone because the design had no
   artwork at all. Seven milestones now carry a real IBIA logo from the
   client's own document, so the remaining seven read as gaps rather
   than as a designed element. Hidden where the slot is empty; the ones
   with a logo are untouched.

   `:empty` is exact here: the block prints the div with nothing inside
   it when there is no image, and with a figure inside when there is. */
:is(.ibia-milestone__media, .fw-timeline__media):empty {
	display: none;
}

/* --- Membership testimonials onto the frame (2026-09-25) ------------
   Read off 3006:4939. The card is a flex column: quote, then the
   attribution row. That row is `gap 17` with a 43px disc and a text
   column that is itself `flex-col gap-15`, so name and company sit 15
   apart. Measured on the frame, the attribution lands 277 and 273 from
   the top of the first two cards, so it is level across them, and ends
   about 26 clear of the base.

   The page had none of that: 0 between name and company, names ragged
   by 58px, and 48.5 under the attribution.

   Reserves are two lines of name and two of company, which is the most
   any card here uses. Content driven, so re-measure if the quotes or
   the companies change. */
.page-id-198 .fw-testimonials .fw-testimonial {
	padding-bottom: 26px !important;
}
.page-id-198 .fw-testimonials .fw-testimonial__author {
	padding-top: 30px !important;
	min-height: 90px;
	box-sizing: border-box;
}
.page-id-198 .fw-testimonials .fw-testimonial__company {
	margin-top: 15px !important;
	min-height: 56px;
}
/* Disc centred on the name rather than on name plus company. The frame
   centres it on the pair, though with the company reserved at two
   lines that drops it below the name on the cards that only use one. */
.page-id-198 .fw-testimonials .fw-testimonial__author::before {
	top: 38.5px;
}

/* --- Testimonials: the avatar disc is gone (2026-09-25) -------------
   The frame draws a plain grey 43px circle beside each name and leaves
   it empty, and it stayed empty: no member sent a photograph and the
   logos that exist do not fit a small circle. Lisa called it on 25 Sep.
   Removed everywhere rather than per page.

   The 60px indent goes with it, so the name and the line under it start
   at the edge of the copy above. Written at the same specificity as the
   rules being overridden, since those carry !important.

   The gutter is held twice: a margin on the page-scoped rules and a
   padding on the base grid rule. Both have to go — zeroing only the
   margin (as this first did) leaves the name still indented. */
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__author::before,
.fw-testimonials--grid .fw-testimonial__author::before,
.fw-testimonial__author::before {
	content: none !important;
}
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__author,
:is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial__company,
.fw-testimonials--grid .fw-testimonial__author,
.fw-testimonials--grid .fw-testimonial__company {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* --- Homepage hero video (29 Sep 2026) --------------------
   The corporate video plays behind the hero headline. It is
   laid over the slide image by a render_block filter in
   ibia-design.php rather than by changing the shared
   framework/home-hero block.

   The image stays underneath: it is the poster frame, it is
   what the block marks as the LCP candidate, and it is what
   shows when the video is hidden below.

   z-index 0 keeps the video under .fw-hero__slide::before,
   which is the navy legibility wash at z-index 1, so the
   headline keeps its contrast. */

.ibia-hero__video {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	/* The file is 1920 x 1080 but the picture inside it is only
	   1920 x 838: it is a widescreen film letterboxed into a 16:9
	   frame, with 122 black rows baked in at the top and 120 at the
	   bottom. object-fit: cover crops to the frame, not to the
	   picture, so the bars survive and show as a black band under
	   the header.

	   Overscanning by 1080/838 pushes the bars outside the hero at
	   any viewport width, because they are a fixed proportion of
	   the frame. 130% carries a little margin over the 128.8% the
	   arithmetic needs. The cost is roughly 13% of the picture
	   cropped top and bottom, and a slightly softer image.

	   The real fix is re-encoding the video without the bars, at
	   1920 x 838. Then this drops back to inset: 0 and height: 100%. */
	height: 130%;
	transform: translateY(-50%);
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}
/* A moving background is exactly what this setting is for.
   Hiding the video reveals the slide image beneath it, which
   is the designed hero, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
	.ibia-hero__video { display: none; }
}

/* --- Section reveals (29 Sep 2026, Monica) ----------------
   Sections slide in and fade up as they come into view,
   alternating left and right down the page. Driven by
   assets/js/ibia-reveal.js, which sets data-ibia-reveal on
   each section and data-ibia-reveal-in once it has arrived.

   Everything here is scoped to .ibia-reveal-ready, a class the
   script puts on <html> only after it has found its targets.
   Nothing is hidden by CSS on its own, so a blocked or broken
   script leaves an ordinary visible page rather than a blank
   one. That is the whole reason for the extra class. */

/* The 110px shift would otherwise push the right-hand sections
   past the edge and give the page a horizontal scrollbar.
   clip rather than hidden, because hidden would make this a
   scroll container and break any sticky positioning inside. */
.ibia-reveal-ready .entry-content {
	overflow-x: clip;
}

.ibia-reveal-ready [data-ibia-reveal] {
	opacity: 0;
	will-change: opacity, transform;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ibia-reveal-ready [data-ibia-reveal="left"] {
	transform: translateX(-110px);
}

.ibia-reveal-ready [data-ibia-reveal="right"] {
	transform: translateX(110px);
}

.ibia-reveal-ready [data-ibia-reveal][data-ibia-reveal-in] {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* The script already returns early for reduced motion, so this
   only matters if the setting changes after the page has
   loaded. Cheap to keep, and it means the CSS is correct on
   its own terms. */
@media (prefers-reduced-motion: reduce) {
	.ibia-reveal-ready [data-ibia-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Card hover (29 Sep 2026, Monica) ---------------------
   The clickable cards carry a resting shadow but never react
   to the pointer, which makes them read as flat panels rather
   than things you can click. On hover they deepen the shadow
   and lift two pixels.

   Only cards you can actually click are in this list. The
   header, the filter panel, the nav dropdown, the article hero
   and the standalone images all carry the same resting shadow
   and are deliberately left alone: a shadow that reacts on
   something inert is a false promise.

   The lift stays small on purpose. A touch screen has no
   hover, so a tap leaves the card in this state until the
   reader taps elsewhere, and a large movement looks like a
   fault rather than a flourish. */

:root {
	--ibia-card-hover-shadow: 4px 8px 24px 0 rgba(0, 0, 0, 0.38);
}

.fw-news-card,
.ibia-news .fw-news-list__card,
.ibia-related .fw-news-list__card,
.ibia-imo-news .fw-news-list__card,
.ibia-event-card,
.ibia-event,
.ibia-events .fw-content-card,
.ibia-res-card,
.ibia-mem-tier,
.is-style-ibia-tier,
.ibia-imo-committee,
.fw-icon-card,
.fw-testimonials--grid .fw-testimonial,
.ibia-mem-testi__card {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fw-news-card:hover,
.ibia-news .fw-news-list__card:hover,
.ibia-related .fw-news-list__card:hover,
.ibia-imo-news .fw-news-list__card:hover,
.ibia-event-card:hover,
.ibia-event:hover,
.ibia-events .fw-content-card:hover,
.ibia-res-card:hover,
.ibia-mem-tier:hover,
.is-style-ibia-tier:hover,
.ibia-imo-committee:hover,
.fw-icon-card:hover,
.fw-testimonials--grid .fw-testimonial:hover,
.ibia-mem-testi__card:hover,
/* The Membership page sets this tier's resting shadow through a
   four-class selector, which outranks .is-style-ibia-tier:hover
   whatever the order. Matched here so that card behaves like
   the rest rather than silently opting out. */
.page-id-198 .wp-block-column:nth-child(2) > .is-style-ibia-tier:hover {
	box-shadow: var(--ibia-card-hover-shadow);
	transform: translateY(-2px);
}

/* Keep the shadow, drop the movement. The deeper shadow is the
   part that says "this is clickable", and it is not motion. */
@media (prefers-reduced-motion: reduce) {
	.fw-news-card,
	.ibia-news .fw-news-list__card,
	.ibia-related .fw-news-list__card,
	.ibia-imo-news .fw-news-list__card,
	.ibia-event-card,
	.ibia-event,
	.ibia-events .fw-content-card,
	.ibia-res-card,
	.ibia-mem-tier,
	.is-style-ibia-tier,
	.ibia-imo-committee,
	.fw-icon-card,
	.fw-testimonials--grid .fw-testimonial,
	.ibia-mem-testi__card {
		transition: box-shadow 0.2s ease;
	}

	.fw-news-card:hover,
	.ibia-news .fw-news-list__card:hover,
	.ibia-related .fw-news-list__card:hover,
	.ibia-imo-news .fw-news-list__card:hover,
	.ibia-event-card:hover,
	.ibia-event:hover,
	.ibia-events .fw-content-card:hover,
	.ibia-res-card:hover,
	.ibia-mem-tier:hover,
	.is-style-ibia-tier:hover,
	.ibia-imo-committee:hover,
	.fw-icon-card:hover,
	.fw-testimonials--grid .fw-testimonial:hover,
	.ibia-mem-testi__card:hover,
	.page-id-198 .wp-block-column:nth-child(2) > .is-style-ibia-tier:hover {
		transform: none;
	}
}

/* --- Dropdown hover bridge (1 Oct 2026) ------------------
   The dropdown sits 12px below its menu item, which is the
   design: the panel lines up with the bottom of the header
   bar rather than the text. That 12px strip belonged to
   neither the menu item nor the panel, so moving the pointer
   down towards the options left the menu item, ended :hover
   and shut the panel before it could be reached.

   This lays an invisible 14px strip across the gap. It is a
   child pseudo-element of the menu item, so the pointer
   resting on it still counts as hovering the menu item and
   the panel stays open.

   It exists only while the panel is open, so it never sits
   over the header catching clicks the rest of the time.

   Not done on the panel's own ::before, which would be the
   obvious place: the panel carries clip-path: inset(0 ...),
   which crops anything above its top edge, so a bridge there
   is invisible to the pointer as well as to the eye.

   The width is the menu item or 186px, whichever is larger,
   because the panel is wider than most labels and the
   pointer often travels diagonally towards it. 186px is the
   panel's own min-width. */

.fw-nav li.menu-item-has-children:hover::after,
.fw-nav li.menu-item-has-children:focus-within::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -3px;
	width: max(100%, 186px);
	height: 14px;
}

/* --- Dropdown click to close (1 Oct 2026) ----------------
   Clicking a dropdown label while its panel is open shuts
   the panel. The pointer is almost always still resting on
   the label at that moment, so :hover is holding the panel
   open and the script cannot close it by removing is-open
   alone. is-dismissed outranks the hover rule and wins.

   The script clears it as soon as the pointer leaves, so
   the next hover behaves normally.

   Only the three labels that point nowhere do this. Training
   links to a real page and keeps navigating, because taking
   that away would leave no route to the Training page for
   anyone who cannot hover to browse the panel first. */

.fw-nav li.menu-item-has-children.is-dismissed:hover > .sub-menu,
.fw-nav li.menu-item-has-children.is-dismissed:focus-within > .sub-menu {
	display: none;
}

/* --- Search button corners (1 Oct 2026) ------------------
   The field and the button sit against each other as one
   control. The field is already square on its right edge
   (border-radius: r 0 0 r) but the button was rounded on all
   four corners, so its left side curved away from the field's
   straight edge and the join read as two separate controls.

   Square on the left, rounded on the right: the mirror of the
   field, and the pair now reads as one rounded rectangle. */

.ibia-searchbar__submit {
	border-radius: 0 var(--fw-radius) var(--fw-radius) 0;
}

/* --- Search results page (1 Oct 2026) --------------------
   The field and button carry the header panel's styling, so
   only the layout belongs here. The field is fixed at 653px
   for the header, which is too rigid once it is sitting in
   the page, so it flexes instead. */

.ibia-search-page__form {
	display: flex;
	align-items: stretch;
	margin-top: var(--fw-space-md);
	margin-bottom: var(--fw-space-xl);
	max-width: 743px;      /* the header's 653 field + 90 button */
}

.ibia-search-page__form .ibia-searchbar__field {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;          /* so the field can shrink inside the flex row */
}

/* Results: give each one room to read as a separate entry
   rather than a run of links. */

.fw-archive__list .fw-archive__item + .fw-archive__item {
	margin-top: var(--fw-space-lg);
}

.fw-archive__list .fw-archive__item h2 {
	margin-bottom: var(--fw-space-xs);
}

.fw-archive__list .fw-archive__item p {
	margin-top: 0;
	max-width: 74ch;       /* a comfortable measure for a snippet */
}

/* --- Hero content centred (1 Oct 2026) -------------------
   The headline and buttons sat low: 294px of space above
   them and 206px below, on a 679px hero.

   .fw-hero__content is already a centred flex column, so the
   cause was the padding being lopsided, 208px top against
   120px bottom, which shifted the whole centred group down.

   Equal padding hands the job back to justify-content, and
   that holds at any screen size rather than only at the one
   the numbers were measured on. The headline wraps to three
   lines on a phone and is still centred. Desktop and phone
   both moved up by 44px.

   The padding is now only a floor, stopping the text from
   reaching the edges if the hero is ever shorter than its
   content. */

:root {
	--fw-hero-content-padding: 120px 0;
}

/* --- Image credit to the corner (1 Oct 2026) -------------
   The credit tag sat 12px in from the bottom left of the
   picture. The original rule explains that inset as leaving
   visible picture on every side, and warns that flush at 0
   exposed a few pixels where the pane was fractionally wider
   than the image inside it.

   That no longer happens. Measured on both pages that use
   the tag: the image matches its pane exactly, to zero
   sub-pixels on all four edges, and the pane clips its
   overflow in any case, so there is nothing to show through.

   max-width goes back to the full width for the same reason:
   it was reduced by the two 12px insets.

   The pane's 4px corner radius still clips the tag, so it
   follows the curve of the picture rather than overhanging
   it. */

.fw-split__credit {
	left: 0;
	bottom: 0;
	max-width: 100%;
}

/* --- Bulletin band shadow (1 Oct 2026) -------------------
   The band had no shadow at all. The note above
   .ibia-band--bulletin records that the band face was taken
   from the Figma node render and "trimmed of its 12px shadow
   margin", so the design's shadow was cropped out of the
   image and never put back in CSS. The site's own card
   shadow is a 12px blur, which is the same 12px, so this
   restores it rather than inventing a value.

   Both bands have an asymmetric corner radius and the
   shadow follows it automatically.

   Join IBIA is the same component with the same flat
   export, so it lost its shadow the same way. */

.fw-banner.is-style-ibia-bulletin,
.fw-banner.is-style-ibia-join {
	box-shadow: var(--fw-shadow-card);
}

/* --- Section rhythm (1 Oct 2026, Lisa) -------------------
   One gap between sections, everywhere. Measured before this
   went in: Membership already ran on 80 the whole way down,
   the homepage was a mix of 30 and 60 with two places where
   sections touched at 0, and IMO ran from 58 to 88 with no
   repeating figure. 80 is the value Membership already used
   and the most common on the site.

   Set as a top margin on each section with the bottom margin
   zeroed, rather than a gap on both sides. Two sections then
   cannot each contribute their own spacing, which is how the
   old values drifted apart in the first place.

   Only sections are touched. Bare headings and paragraphs
   sitting at the top level, which the IMO page has between
   its panel and its committee cards, keep their own spacing:
   80px between a heading and its paragraph would read as a
   fault rather than as rhythm. Where a paragraph is followed
   by a section the two margins collapse to the larger, so
   the section still gets its 80.

   The doubled class is there to outrank the per block
   margins already in this file, which sit at two classes and
   would otherwise win. */

:root {
	--ibia-section-gap: 80px;
}

.entry-content.entry-content > :is(section, div, figure) {
	margin-top: var(--ibia-section-gap);
	margin-bottom: 0;
}

.entry-content.entry-content > :first-child {
	margin-top: 0;
}

/* Tighter on a phone, where 80px of empty space is a lot of
   thumb travel between one section and the next. */
@media (max-width: 782px) {
	:root {
		--ibia-section-gap: 48px;
	}
}

/* --- Tier comparison anchor (1 Oct 2026) -----------------
   The Corporate Membership button on the homepage jumps to
   the Individual and Corporate cards on the Membership page.

   Without this the jump lands exactly on the cards and puts
   the section's own heading, "Join the Global Marine Energy
   Community", just off the top of the screen. The heading
   sits 63px above the cards, so holding back 100px brings it
   into view and leaves a little space above it.

   The header is position: relative on this site rather than
   sticky, so nothing covers the target and this value is
   only about showing the heading. */

#membership-tiers {
	scroll-margin-top: 100px;
}

/* --- World Bunkering fan (1 Oct 2026) --------------------

   1. The covers were squashed. Each cover sits in an
      absolutely positioned box with left set from the frame
      and right resolving to 0, so the box width came from
      whatever space was left rather than from the picture.
      max-width: 100% then squeezed the cover into it. The
      effect grew the further right a cover sat: the front
      cover measured a correct 0.708, the middle 0.613 and
      the back one 0.355, against a true 0.707 in all three
      files. Letting the right edge go free lets each box
      shrink to its own picture again.

   2. The fan hung 44px below the band. Pinning its bottom to
      the band's bottom crops the covers on that edge, which
      is how the design has them. The fan keeps its own
      proportions, so the covers do not change size: the fan
      rises further above the band instead.

   3. The fan sat 20px past the band's right edge and covered
      the 30px rounded corner. Pulling it back inside shows
      the corner again.

   4. The band had no shadow, the same omission as the
      bulletin and Join bands, whose flat exports were
      trimmed of it. Restored from the same token. */

.ibia-wb-fan__item {
	right: auto;
}

.ibia-wb-fan__item img {
	max-width: none;
}

.ibia-wb--band .ibia-wb-fan {
	top: auto;
	bottom: 0;
	/* Moved rather than resized. The fan has both its left and
	   right edges pinned, so pulling the right edge in narrowed
	   the whole box and clipped the back cover against it. A
	   translation shifts it the same 54px with its width intact. */
	/* Scaled to 0.91 about the bottom left corner. Restoring the
	   covers to their true proportions made them wider, so the
	   fan no longer fitted between the paragraph and the band's
	   rounded corner. Shrinking it by 9% clears the corner while
	   the left edge stays where it is, so the front cover keeps
	   its distance from the text.

	   The origin matters twice over: holding the bottom edge
	   keeps the crop line on the band's bottom, and holding the
	   left edge means the shrink takes space off the right,
	   which is the side that was overhanging. */
	transform-origin: 0 100%;
	transform: translateX(-54px) scale(0.91);

	/* The fan clipped on every side, which cut the back cover off
	   at its right edge once the covers were restored to their
	   proper width. Only the bottom edge should crop, so the
	   clip is released on the other three. */
	overflow: visible;
	clip-path: inset(-400px -400px 0 -400px);
}

.ibia-wb.ibia-wb--band {
	box-shadow: var(--fw-shadow-card);
}

/* --- Join IBIA button (1 Oct 2026) -----------------------
   The button sits navy with white text. Its hover rule only
   changed the border colour from navy to white, leaving the
   fill and the text exactly as they were, so hovering read
   as nothing happening at all.

   Reversed properly: the fill and the text swap places, so
   white on navy becomes navy on white. That matches how the
   site's other button styles behave, where hovering inverts
   fill and text rather than recolouring the edge.

   The band's own shadow is handled separately and is not
   part of this rule. */

.fw-banner.is-style-ibia-join .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fw-banner.is-style-ibia-join .wp-block-button__link:hover,
.fw-banner.is-style-ibia-join .wp-block-button__link:focus-visible {
	background-color: var(--fw-white);
	/* Navy, not white: the Figma hover variant carries a 1px #013563
	   edge, and on the photographic band a white border leaves the
	   button with no edge at all. Sampled off the design export. */
	border-color: var(--fw-navy);
	color: var(--fw-navy);
}

/* --- Timeline dot pulse (1 Oct 2026) ---------------------
   The green dots on the Milestones timeline now pulse.

   The pulse is a box-shadow that grows and fades, not a
   change to the dot's own size or border. A shadow is
   painted outside the box and costs no layout, so nothing
   around it shifts and the ring the design already has stays
   exactly as drawn.

   The dots are stacked three deep on this carousel, since the
   track holds a clone set either side of the real items, so a
   staggered delay would be meaningless. They pulse together.

   Scoped to the timeline. Leadership Legacy uses the same dot
   treatment but is a static list, where a pulse would just be
   a page full of movement. */

@keyframes ibia-timeline-pulse {
	0%   { box-shadow: 0 0 0 0    rgba(var(--fw-green-rgb), 0.45); }
	70%  { box-shadow: 0 0 0 14px rgba(var(--fw-green-rgb), 0); }
	100% { box-shadow: 0 0 0 0    rgba(var(--fw-green-rgb), 0); }
}

.fw-timeline__item::before {
	animation: ibia-timeline-pulse 2.8s ease-out infinite;
}

/* A pulse that never stops is exactly what this setting is
   for. The dot keeps its ring, it simply stops moving. */
@media (prefers-reduced-motion: reduce) {
	.fw-timeline__item::before { animation: none; }
}

/* --- Leadership Legacy portraits (1 Oct 2026) ------------
   The rail's photo slot was built as a plain grey circle with
   no way to carry a picture. The portraits the client
   supplied are set as a background image on that same span,
   so the markup and the circle are unchanged and the grey
   stays as the fallback wherever no photograph exists.

   Each file is cropped square and written at 400px before
   import, so cover never has to stretch one. */

.ibia-legacy__photo {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

/* --- Leadership Legacy closing image (1 Oct 2026) --------
   The slot at the foot of the page is a fixed height box
   with its own rounded corners and shadow. It was built
   empty, so nothing told an image inside it how to behave:
   dropped in, the picture kept its own proportions and left
   120px of empty box beneath it.

   The image now fills the slot and is cropped to it, and the
   slot clips so the crop follows its rounded corners. */

.ibia-legacy__close-media {
	overflow: hidden;
}

.ibia-legacy__close-media .wp-block-image,
.ibia-legacy__close-media figure {
	height: 100%;
	margin: 0;
}

/* The image block's own rule sets height: auto at two classes,
   so this has to match it to win. */
.ibia-legacy__close-media .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Filter search button hover (6 Oct 2026) ---
   It had no :hover rule at all, and `transition: all` with no
   duration animates nothing. Matched to the Buttons frame in
   Figma (3:63), where a filled button inverts to a white fill
   with a navy border and navy text, on the same 0.15s the
   other buttons use. The button is border-box, so giving it a
   border leaves it 70x39 and the 10px overlap undisturbed. */
.ibia-filters__search button {
	border: 0.8px solid var(--fw-navy);
	transition: background-color .15s, border-color .15s, color .15s;
}
.ibia-filters__search button:hover,
.ibia-filters__search button:focus-visible {
	background-color: var(--fw-white);
	border-color: var(--fw-navy);
	color: var(--fw-navy);
}

/* =========================================================
   Footer bulletin as a Forminator form. 2026-10-07.

   The hand-written footer form (which went nowhere) is now
   Forminator form "IBIA Bulletin", unstyled ("none"), inside
   the same .ibia-bulletin wrapper so the field rules above
   still apply. This maps the design's layout onto
   Forminator's markup: 210 + 33 + 210 name row, 453 email,
   11px consent tick, 93 x 39 navy Submit. Each signup goes
   to the IBIA Bulletin list in Glue Up (mu-plugins/ibia-bulletin.php).
   ========================================================= */
.ibia-footer .ibia-bulletin .forminator-ui { margin: 0; }
/* The columns were a fixed 239px (the design's divider height). A minimum
   instead: identical when the form is idle, and the footer grows rather than
   spilling into the legal line when validation messages appear. */
.ibia-footer__col { height: auto; min-height: 239px; }
/* Forminator's open grid (forminator-grid.open.min.css) adds 30px under each
   row, a 15px gutter on each column and lets columns stretch, at a higher
   specificity; the footer column is a fixed height, so it has to go. */
.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-row { display: flex; flex-wrap: nowrap; gap: 33px; margin: 0 !important; }
.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col { min-width: 0; padding: 0 !important; margin: 0 !important; }
.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col-6 { flex: 0 0 210px !important; width: 210px; }
.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col-12 { flex: 0 0 453px !important; width: 453px; }
.ibia-footer .ibia-bulletin .forminator-field { margin: 0 0 5px; }
.ibia-footer .ibia-bulletin .forminator-label { display: block; margin: 0; font-weight: inherit; }
/* The design marks nothing as required; the inputs still carry aria-required. */
.ibia-footer .ibia-bulletin .forminator-required { display: none; }
.ibia-footer .ibia-bulletin .forminator-input:focus-visible {
	outline: var(--fw-focus-width) solid var(--fw-focus-colour);
	outline-offset: var(--fw-focus-offset);
}
/* Consent: the design's 11px tick and one line of text. */
.ibia-footer .ibia-bulletin label.forminator-checkbox {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin: 5px 0 10px !important;
	cursor: pointer;
}
.ibia-footer .ibia-bulletin .forminator-checkbox input[type="checkbox"] { width: 11px; height: 11px; margin: 0; flex: 0 0 auto; }
.ibia-footer .ibia-bulletin .forminator-checkbox-box { display: none; }
.ibia-footer .ibia-bulletin .forminator-checkbox-label a { text-decoration: underline; }
.ibia-footer .ibia-bulletin .forminator-row-last .forminator-field { margin: 0; }
.ibia-footer .ibia-bulletin button.forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 93px;
	height: 39px;
	padding: 0;
	border: var(--fw-btn-border) solid var(--fw-navy);
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-family: var(--fw-font);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	cursor: pointer;
}
.ibia-footer .ibia-bulletin button.forminator-button-submit:hover,
.ibia-footer .ibia-bulletin button.forminator-button-submit:focus-visible { background-color: var(--fw-green-dark); border-color: var(--fw-green-dark); }
.ibia-footer .ibia-bulletin .forminator-error-message { display: block; margin-top: 2px; font-size: 13px; color: #b32d2e; }
.ibia-footer .ibia-bulletin .forminator-response-message:empty { display: none; }
.ibia-footer .ibia-bulletin .forminator-response-message { margin: 0 0 10px; font-size: 14px; color: var(--fw-navy); }
.ibia-footer .ibia-bulletin .forminator-response-message.forminator-error { color: #b32d2e; }
@media (max-width: 768px) {
	.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-row { flex-direction: column; gap: 0; }
	.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col-6,
	.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col-12 { flex: 1 1 auto !important; width: 100%; }
}

/* 2026-10-08 Homepage events feed: the four small cards were four different
   heights. align-items: start left each card at its own content height (the
   Bunkering Course card has no venue line, so it was 40px short), and the two
   auto rows sized independently (the second was 8px taller where a venue
   wrapped). Stretch fills the row, equal fr rows match the two rows. Above
   1024px only: below that the featured card takes its own row and the stack
   should keep its natural heights. */
@media (min-width: 1025px) {
	.ibia-events__cards.is-style-ibia-home-feed {
		align-items: stretch;
		grid-template-rows: 1fr 1fr;
	}
}

/* 2026-10-08 World Bunkering covers are links through to the magazine page.
   The images size against their item with height: 100%, so the anchor between
   them has to pass that height through or the covers collapse. */
.ibia-wb-fan__link {
	display: block;
	height: 100%;
	pointer-events: auto; /* covers only: .ibia-wb__covers turns it off for the whole fan */
	cursor: pointer;
}

/* 2026-10-08 Bands on mobile.
   background-size: 100% 100% scales the artwork to the box and ignores its
   proportions. The files are wide strips (bulletin 1400x150, join 1400x318)
   and at phone widths the band is nearly square, so the bulletin image was
   squashed to roughly a tenth of its width. cover keeps the proportions.
   The bulletin's inner padding is set to "45px 76px 0 78px !important" for the
   desktop pixel match; the zero bottom is right there but !important carried
   it onto mobile as well, leaving the Subscribe button flush with the bottom
   edge of the band. */
@media (max-width: 768px) {
	.fw-banner.is-style-ibia-bulletin,
	.fw-banner.is-style-ibia-join {
		background-size: cover;
		background-position: center;
	}
	/* Centred, the Join crop lands in the middle of the decks -- red pipework
	   with no sea and no ship outline. The left of the frame keeps open water
	   and the stern, so it still reads as a photograph behind the heading. */
	.fw-banner.is-style-ibia-join {
		background-position: left center;
	}
	.fw-banner.is-style-ibia-bulletin > .fw-banner__inner {
		padding: var(--fw-space-xl) !important;
	}
}

/* 2026-10-08 Footer below desktop.
   The four columns are set to fixed widths totalling 1400px with !important
   for the desktop pixel match, which beats the theme's own 1100px and 768px
   rules, so on a phone three of the four columns sat off the right edge. The
   stack is restored here, along with the gap, the inter-column padding and
   the 239px column height -- all of which that pass set with !important and
   all of which only make sense while the columns are in a row. */
@media (max-width: 1100px) {
	.ibia-footer__inner {
		grid-template-columns: 1fr 1fr !important;
		gap: var(--fw-space-lg) !important;
		padding: 34px 20px 29px !important;
	}
	.ibia-footer__col {
		height: auto;
		min-height: 0;
	}
	.ibia-footer__col + .ibia-footer__col {
		border-left: 0;
		padding-left: 0 !important;
	}
	.ibia-footer__col--actions {
		padding-left: 0 !important;
		padding-top: 9px !important;
	}
}

@media (max-width: 768px) {
	.ibia-footer__inner { grid-template-columns: 1fr !important; }
}

/* =========================================================
   2026-10-08 Mobile: fixed-column grids.
   These blocks set their desktop columns in pixels and never stack, so on a
   phone their contents sat off the right-hand edge. Nothing scrolled sideways
   to reveal them because .entry-content is overflow-x: clip, so the content
   was simply cut off. Desktop is untouched -- this is all inside the query.
   The testimonials grid and the logo slider are deliberately wider than the
   screen (one scrolls, one is a clipped marquee) and are left alone.
   ========================================================= */
@media (max-width: 768px) {
	/* Latest news: one card per row rather than 680 + 320 + 320. */
	.fw-news__track {
		grid-template-columns: 1fr !important;
		gap: var(--fw-space-lg) !important;
	}
	.fw-news__track > * { width: auto !important; min-width: 0 !important; }

	/* Icon cards: committees on IMO, membership pillars on the homepage. */
	.fw-icons__grid {
		grid-template-columns: 1fr !important;
		gap: var(--fw-space-lg) !important;
	}
	.fw-icons__grid > * { width: auto !important; min-width: 0 !important; }

	/* Milestones: the item is a fixed 388, which is wider than a 390 screen
	   once the page gutters are taken off. */
	.fw-timeline__item { width: auto !important; max-width: 100% !important; }

	/* Membership map. */
	.ibia-mem-map__stage { width: 100% !important; max-width: 100% !important; }
}

/* =========================================================
   2026-10-08 Mobile: World Bunkering (218).
   The page is measured onto the desktop frame in pixels with !important, so
   none of it responded: the resources container is a fixed 1400px, the fan of
   covers is 559x496 with every cover placed by pixel, and the hero text column
   is 561px. The resources row is a scroller by design (arrows, overflow-x:
   auto), so it keeps its 320px cards and stays swipeable -- only the container
   lets go of the 1400px. The fan cannot hold its shape at 335px, so the covers
   become a plain row of three.
   ========================================================= */
@media (max-width: 768px) {
	.page-id-218 .ibia-wb-hero {
		display: block !important;
		margin-top: 0 !important;
	}
	/* The desktop frame's 85px is too much once the hero is stacked, but zero
	   left the eyebrow hard against the bottom of the page hero. */
	.page-id-218 .ibia-wb-hero__text {
		width: auto !important;
		max-width: 100% !important;
		padding-top: var(--fw-space-xl) !important;
	}

	/* The fan becomes a row: no overlap, no rotation, equal widths. */
	.page-id-218 .ibia-wb-fan,
	.page-id-218 .ibia-wb-fan__stage {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		display: flex !important;
		gap: 8px;
		align-items: flex-start;
		margin: var(--fw-space-lg) 0 0 !important;
	}
	.page-id-218 .ibia-wb-fan__item {
		position: static !important;
		flex: 1 1 0 !important;
		width: auto !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}
	.page-id-218 .ibia-wb-fan__item img {
		width: 100% !important;
		height: auto !important;
	}

	/* The row still scrolls; it just no longer forces the page to 1400px. */
	.page-id-218 :is(.entry-content, .fw-banner__inner) > .ibia-res__main {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
	}
	.page-id-218 .ibia-res__grid { width: 100% !important; }
	.page-id-218 .ibia-arrows { width: auto !important; }
}

/* =========================================================
   2026-10-08 Mobile: page-scoped stragglers.
   The generic rules above were beaten by page-scoped ones carrying both more
   specificity and !important, so these match at the same level.
   ========================================================= */
@media (max-width: 768px) {
	/* IMO pins four 320px columns; one per row on a phone. */
	.page-id-203 .fw-icons__grid { grid-template-columns: 1fr !important; }

	/* Milestones: the content card is a fixed 384, wider than the screen. */
	body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__content {
		width: auto !important;
		max-width: 100% !important;
	}

	/* The homepage magazine fan is absolutely positioned and overhangs the
	   band's right edge; in a stacked band it has nowhere to overhang to. */
	.ibia-wb--band .ibia-wb__covers {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: var(--fw-space-lg) !important;
	}

	/* Featured event card image. */
	.ibia-event--featured .ibia-event__media {
		width: auto !important;
		max-width: 100% !important;
	}

}

/* 2026-10-08 Mobile: hero buttons wrap.
   The World Bunkering hero's button row is flex-wrap: nowrap; the two
   buttons and the gap come to 324px in a 295px column, so the second ran
   off the screen. */
@media (max-width: 768px) {
	.ibia-wb-hero__text > .wp-block-buttons,
	.ibia-wb-hero .wp-block-buttons {
		flex-wrap: wrap !important;
	}
}

/* 2026-10-08 Contact, Our Offices on mobile.
   The divider is the second office's ::before: a zero-width absolute element
   at left: 0 with a 0.8px left border. Between two columns that reads as a
   divider; stacked, there is no between, so it just ran down the left edge of
   the second office. The offices also sat hard against the card's inner edge,
   so they are stepped in a little -- still left aligned, not centred. */
@media (max-width: 1100px) {
	.ibia-offices__inner > .ibia-office + .ibia-office::before { display: none; }
	.ibia-offices__inner > .ibia-office { padding-left: 20px !important; }
}

/* =========================================================
   2026-10-08 Filters behind a button on mobile.
   The whole panel printed inline on a phone -- on Upcoming Events that is
   over 1,000px of controls before any content. It now collapses behind its
   own heading. Closed, the aside is just the button: no tint, no shadow, no
   padding. Above the breakpoint the button is display: none and nothing
   else here applies, so desktop is exactly as before.
   ========================================================= */
.ibia-filters__toggle { display: none; }

@media (max-width: 1100px) {
	.ibia-filters__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		min-height: 39px;
		padding: 0 20px;
		border: var(--fw-btn-border, 1px) solid var(--fw-navy);
		border-radius: var(--fw-radius);
		background-color: var(--fw-navy);
		color: var(--fw-white);
		font: inherit;
		font-weight: var(--fw-weight-medium);
		cursor: pointer;
	}
	/* A chevron that turns over when the panel opens. */
	.ibia-filters__toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-left: 12px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.15s;
	}
	.ibia-filters.is-open > .ibia-filters__toggle::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	/* Closed, the aside is only the button. */
	.ibia-filters:not(.is-open) {
		padding: 0 !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}
	.ibia-filters > :not(.ibia-filters__toggle) { display: none; }
	/* [hidden] is excluded so the Clear button stays hidden until something
	   is actually set, which is what the markup intends. */
	.ibia-filters.is-open > :not(.ibia-filters__toggle):not([hidden]) { display: block; }
	.ibia-filters.is-open > .ibia-filters__title { margin-top: 15px; }
}

/* 2026-10-08 Resources topbar on mobile.
   The theme stacks the topbar into a column on narrow screens, but
   .page-id-213 .ibia-res__topbar pins it to height: 44px for the desktop
   frame, where the count and the sort sit on one row. Stacked they need about
   80px, so the sort ran out of the bottom of the box and over the first card.
   The base rule's min-height: 40px still holds the row open where it is a row. */
@media (max-width: 1100px) {
	.page-id-213 .ibia-res__topbar { height: auto; }
}

/* 2026-10-08 Mobile: filters above the listing.
   .ibia-events__layout puts the listing first and the filters second, which is
   right for the two-column desktop layout. Stacked on a phone it buried them:
   on Upcoming Events the Filters button sat 11,271px down the page, below every
   card. Lifted above the listing while the layout is a single column. */
@media (max-width: 1100px) {
	.ibia-events__layout > .ibia-filters { order: -1; margin-bottom: var(--fw-space-lg); }
}

/* =========================================================
   2026-10-08 Mobile: people grids.
   The rule above divides each row into quarters and fifths so the last card
   does not wrap on a 1440 screen with a scrollbar. It carries no media query,
   so it also applied on a phone: board members came out 54px wide, names
   broken over three lines, the fourth column off the edge. The theme's own
   640px rule had been overridden. Two across on tablets, one on a phone.
   ========================================================= */
@media (max-width: 1100px) {
	.ibia-board-officers .fw-person,
	.ibia-board-members  .fw-person,
	.ibia-region__grid   .fw-person {
		flex: 0 0 calc((100% - var(--ibia-card-gap)) / 2);
	}
}

@media (max-width: 640px) {
	.ibia-board-officers .fw-person,
	.ibia-board-members  .fw-person,
	.ibia-region__grid   .fw-person,
	.ibia-region__chair  .fw-person {
		flex: 0 0 100%;
	}
}

/* 2026-10-08 Mobile: events gutter.
   The listing is alignfull with margin: 0 -20px, which cancels the page gutter
   from .entry-content so the section can span the full width. On a phone that
   left every card hard against both screen edges, corners and shadows flush to
   the glass, which reads as the cards being cut off. The negative margin stays
   -- the section still spans the width -- and the gutter comes back as padding
   inside it. */
@media (max-width: 1100px) {
	.ibia-events.alignfull,
	.ibia-events.ibia-event-listing.alignfull {
		padding-inline: 20px;
		box-sizing: border-box;
	}
}

/* 2026-10-08 World Bunkering hero buttons, second go.
   The first attempt used two classes' specificity; the rule keeping them in a
   row is .page-id-218 .ibia-wb-hero__text > .wp-block-buttons -- three classes
   and !important -- so it won whatever the order and the buttons still ran off
   the screen. Matched at the same specificity. Three buttons come to 561px with
   their gaps, in a 295px column. */
@media (max-width: 768px) {
	.page-id-218 .ibia-wb-hero__text > .wp-block-buttons {
		flex-wrap: wrap !important;
		gap: var(--fw-space-md) !important;
	}
}

/* 2026-10-08 Resources carousel: the last card could not reach the others.
   Cards snap to the start edge, 14px in, but the scroller ran out of travel
   15px before the last one got there, so it always sat further right than
   every other card. The trailing padding is the width left over beside one
   card, which is exactly the runway it was missing. Mobile only. */
@media (max-width: 1100px) {
	.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid {
		scroll-snap-type: x mandatory;
	}
	/* A scroll container drops its end padding from the scrollable overflow
	   here, so no padding value gave the last card room to reach the left edge.
	   An element does count. No snap alignment on it, so the scroll still rests
	   on the last card rather than in the empty space. */
	.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid::after {
		content: "";
		inline-size: 1px;
	}
}

/* 2026-10-08 Resources carousel: one card per view on mobile.
   The cards are a fixed 320 in a scroller around 400 wide, so the next was
   always part cut off at the edge. A 100% track makes each card the scroller's
   visible width: one card fills the view, the next sits fully off screen.
   The trailing spacer goes with it -- it existed because a 320px card could not
   reach the left edge at the end, and a full-width card needs only the 14px
   already there. Left in, it would be a blank screen after the last card. */
@media (max-width: 1100px) {
	.page-id-218 .ibia-res__grid {
		grid-template-columns: none !important;
		grid-auto-columns: 100% !important;
	}
	.ibia-res__main:has(> .ibia-arrows) .ibia-res__grid::after { content: none; }
}

/* 2026-10-08 Mobile: text before image in every split.
   A split puts its media first in the markup when the image is on the left, and
   the text first when it is on the right. Side by side that is just the column
   order; stacked it becomes the reading order, so a page alternates between
   leading with a picture and leading with a heading. Content first throughout.
   768px is exactly where splits stop being two columns -- a 769 viewport is
   still 680 + 560, 753 is a single column -- so desktop cannot be affected. */
@media (max-width: 768px) {
	.fw-split__inner > .fw-split__content { order: 1; }
	.fw-split__inner > .fw-split__media   { order: 2; }
}

/* 2026-10-08 IMO Key Areas on mobile.
   The theme stacks this list at 782px, but that rule is one class less specific
   than the panel-scoped base, so inside a panel it never applied: two 124px
   columns, a 33px number badge, and about 90px left for the words. The rule
   under each item is a fixed 502px for the desktop column and ran outside the
   335px panel, and it is suppressed after item 3 -- the foot of the left column
   on desktop, but the middle of a single column. */
@media (max-width: 782px) {
	.entry-content .is-style-ibia-panel ol.is-style-ibia-numbered {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: none;
	}
	.page-id-203 .is-style-ibia-numbered li::after {
		width: auto !important;
		left: 48px !important;
		right: 0 !important;
	}
	/* The theme hides the rule between items while stacked, so item 3 -- which
	   escapes that because it is a 3n child -- is hidden here too, rather than
	   being the one line left in the list. */
	.page-id-203 .is-style-ibia-numbered li::after { display: none !important; }
	.page-id-203 .is-style-ibia-numbered li:nth-child(3) { padding-bottom: 32px !important; }
}

/* 2026-10-08 Mobile: splits keep the page width.
   The pixel passes give an image-right split a left margin so its text column
   meets the frame's grid -- 61px on IMO and IBIA Structure, 81px on Membership.
   Those are two-column measurements and carry no media query, so stacked on a
   phone they just shunted the block sideways: on IMO the second split began at
   101 instead of 40 and was 235 wide instead of 295. Three classes here to
   match the weight those page rules carry. */
@media (max-width: 768px) {
	.fw-split.fw-split--image-right .fw-split__inner,
	.fw-split.fw-split--image-left .fw-split__inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* =========================================================
   Mobile navigation drawer — row 73
   =========================================================

   The burger was not broken. fw-offcanvas.js builds the drawer correctly: it
   was open, body.fw-oc-open was set, and it held 10 links. It was simply
   **0px wide**, because `fw-offcanvas.css` sizes everything from
   --fw-oc-* tokens that default to 0 and **all sixteen were undefined**.
   The starter ships structure only and expects the design layer to set them;
   nobody had. The drawer also had no background, so even at full width it
   would have been transparent.

   This is the same trap as the block editor CSS fixed on 6 Oct: a 0 fallback
   is harmless on padding and fatal on a width.

   There is no mobile design (confirmed with the designer 18 Aug), so these
   values are ours: the brand navy and white, the site's own spacing, and
   44px tap targets.
   ========================================================= */

:root {
	/* Drawer */
	--fw-oc-max-width:        min(360px, 86vw);
	--fw-oc-panel-width:      4px;   /* the panel's scrollbar, not the panel */

	/* Top bar: matches the site header's height so it does not jump */
	--fw-oc-bar-height:       72px;
	--fw-oc-bar-padding:      0 20px;
	--fw-oc-close-width:      44px;
	--fw-oc-close-height:     44px;

	/* Rows */
	--fw-oc-link-padding:     15px 20px;
	--fw-oc-link-gap:         12px;
	--fw-oc-drill-width:      8px;
	--fw-oc-drill-height:     8px;
	--fw-oc-chev-margin-top:  0;

	/* Back header on a sub panel */
	--fw-oc-back-padding:     14px 20px;
	--fw-oc-back-gap:         10px;

	/* Search panel */
	--fw-oc-search-padding:   12px 16px;
	--fw-oc-search-height:    44px;
	--fw-oc-search-gap:       8px;
}

/* ---- Colour and type the starter leaves to the design layer ------------- */

.fw-oc {
	background: var(--fw-white, #fff);
	box-shadow: -12px 0 40px rgba(1, 53, 99, 0.18);
}

/* A sub panel must fully cover the one beneath it. The starter's comment says
   "panels fully cover their parent", but the background that makes that true
   was stripped with the rest of the colour, so the root menu showed through
   the drilled panel and the two sets of labels overlapped. */
.fw-oc__panel {
	background: var(--fw-white, #fff);
}

.fw-oc__overlay {
	background: rgba(1, 53, 99, 0.55);
}

.fw-oc__bar {
	border-bottom: 1px solid var(--fw-divider, #e3e7ee);
}

.fw-oc__close {
	border: 0;
	background: none;
	color: var(--fw-navy, #013563);
	font-size: 26px;
	line-height: 1;
}

.fw-oc__list {
	list-style: none;
}

.fw-oc__link,
.fw-oc__drill {
	border: 0;
	background: none;
	border-bottom: 1px solid var(--fw-divider, #e3e7ee);
	color: var(--fw-navy, #013563);
	font-family: var(--fw-font, inherit);
	font-size: 16px;
	font-weight: var(--fw-weight-medium, 500);
	line-height: 24px;
	text-decoration: none;
}

.fw-oc__link:hover,
.fw-oc__drill:hover,
.fw-oc__link:focus-visible,
.fw-oc__drill:focus-visible {
	background: rgba(var(--fw-green-rgb, 163, 195, 98), 0.14);
}

/* The drill chevron is a rotated corner, so it needs two borders to show. */
.fw-oc__drill::after {
	border-top: 2px solid var(--fw-navy, #013563);
	border-right: 2px solid var(--fw-navy, #013563);
}

.fw-oc__back {
	border: 0;
	border-bottom: 1px solid var(--fw-divider, #e3e7ee);
	background: var(--fw-bg-grey, #f5f7fa);
	color: var(--fw-navy, #013563);
	font-family: var(--fw-font, inherit);
	font-size: 15px;
	font-weight: var(--fw-weight-medium, 500);
}

/* The back chevron points the other way.
   The starter's JS puts a literal ‹ glyph inside this span, so a border drawn
   chevron is painted on top of the glyph and both shapes show at once. font-size: 0
   drops the glyph and keeps the box, which matches the drill chevron's weight. */
.fw-oc__back .fw-oc__chev {
	flex: none;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	font-size: 0;
	line-height: 0;
	border-left: 2px solid var(--fw-navy, #013563);
	border-bottom: 2px solid var(--fw-navy, #013563);
	transform: rotate(45deg);
}

.fw-oc__search input[type="search"] {
	border: 1px solid var(--fw-navy, #013563);
	border-radius: var(--fw-input-radius, 4px) 0 0 var(--fw-input-radius, 4px);
	font-family: var(--fw-font, inherit);
	font-size: 15px;
}

.fw-oc__search button {
	border: 1px solid var(--fw-navy, #013563);
	border-left: 0;
	border-radius: 0 var(--fw-input-radius, 4px) var(--fw-input-radius, 4px) 0;
	background: var(--fw-navy, #013563);
	color: var(--fw-white, #fff);
	font-family: var(--fw-font, inherit);
	font-size: 15px;
}

/* The burger turns into a cross while the drawer is open. */
body.fw-oc-open .fw-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.fw-oc-open .fw-menu-btn span:nth-child(2) { opacity: 0; }
body.fw-oc-open .fw-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.fw-menu-btn span {
	display: block;
	width: var(--fw-menu-btn-bar-width, 24px);
	height: var(--fw-menu-btn-bar-height, 2px);
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

/* ===========================================================================
   IBIA mobile snags — ready to append to assets/css/ibia.css
   Prepared 2026-10-08 14:45. NOT applied: another session was saving ibia.css
   at 14:41, and two people appending to that file at once is how work gets
   lost. Whoever owns ibia.css should paste this at the end.

   Rows are from IBIA_Internal_Web_Testing.xlsx, sheet "Internal Testing".

   ⚠️ READ THIS BEFORE ADDING MORE MOBILE RULES
   The reveal animation starts every block at translateX(110px), opacity 0.
   Measuring a block before it has scrolled into view therefore reports it as
   overflowing the screen when it is perfectly placed once revealed. Several
   "mobile overflow" readings on this list were that artefact and are NOT
   defects. Always scroll a block into view, wait for the reveal, and measure
   then. The three below were confirmed that way.
   =========================================================================== */

@media (max-width: 782px) {

	/* --- r67: the Latest News section does not work on mobile ---------------
	   The featured grid keeps its desktop two-up layout, so the first card
	   stays 680px wide inside a 350px column and its image and text run off
	   the right edge. One column, and let the card take the width it is given. */
	.fw-news--featured-grid .fw-news__viewport,
	.fw-news--featured-grid .fw-news__track {
		display: block;
	}

	.fw-news--featured-grid .fw-news-card,
	.fw-news__track > .fw-news-card {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
	}

	.fw-news--featured-grid .fw-news-card + .fw-news-card {
		margin-top: var(--fw-space-lg, 24px);
	}

	.fw-news-card__image img {
		width: 100%;
		height: auto;
	}

	/* --- r68 / r76: event cards sit flush to both screen edges -------------
	   Everything else on the page carries the 20px gutter; the events band
	   does not, so the cards touch the glass. Matches the page, nothing more. */
	/* The grid already carries its own 40px side padding at this width, so
	   adding a gutter on top pushed the cards to x=60 and squeezed them to
	   270px. The grid sits at the page gutter already; it just needs its own
	   padding taken off. */
	.ibia-events__cards,
	.ibia-events__list > .ibia-events__cards {
		padding-inline: 0 !important;
		box-sizing: border-box;
	}

	.ibia-event--featured .ibia-event__media,
	.ibia-event__media {
		width: 100%;
	}

	/* --- r72: the footer legal line runs under the back-to-top button -------
	   The footer itself already stacks correctly; only the copyright line
	   overflows, because it has no room reserved for the button. */
	.ibia-footer__legal,
	.ibia-footer__bottom {
		padding-inline: var(--fw-gutter, 20px);
		padding-right: calc( var(--fw-gutter, 20px) + 56px );
		box-sizing: border-box;
	}
}

/* =========================================================
   IMO page, mobile — rows 103 and 106
   ========================================================= */

@media (max-width: 782px) {

	/* --- r106: "View All IMO News" sat on top of the heading ---------------
	   The desktop rule pins the CTA with position:absolute, top:25px, right:0
	   so it sits beside the heading. Stacked at mobile that puts it directly
	   over the title. Measured: heading -600..-565, button -607..-568 — the
	   same band. Back into flow, under the heading. */
	.page-id-203 .fw-news__cta,
	.fw-news--featured-grid .fw-news__cta {
		position: static !important;
		margin: 16px 0 0 !important;
	}

	.page-id-203 .fw-news__head {
		position: static;
	}

	/* --- r103: no line where the two accordion columns meet ----------------
	   The two columns stack at mobile, and the join had neither the 17px gap
	   that separates items inside a column nor a divider, so the last item of
	   the first column ran straight into the first of the second. */
	.ibia-acc-cols > .ibia-acc + .ibia-acc {
		margin-top: 17px;
		padding-top: 17px;
		border-top: 1px solid rgba(var(--fw-navy-rgb, 1, 53, 99), 0.18);
	}
}

/* =========================================================
   People grids on mobile — rows 113, 114 and 120
   =========================================================
   Meet the Board, Meet the Secretariat and Leadership Legacy all stack one
   person per row at phone width, so a 55 person page is an enormous scroll.
   Monica asked for two columns on all three. .fw-people__grid is a flex row,
   so this is a basis of half the width minus the gap.
   ========================================================= */

@media (max-width: 782px) {

	.fw-people__grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--fw-people-grid-gap, 20px);
	}

	/* The grid's own rule sets flex: 0 0 100%, which forces a wrap after every
	   card even once max-width has narrowed it — so they looked half width and
	   still sat one per row. The basis has to win, hence !important. The 40px
	   is the grid's existing column gap. */
	.fw-people__grid > * {
		flex: 0 0 calc(50% - 20px) !important;
		max-width: calc(50% - 20px) !important;
		min-width: 0;
	}

	/* The "Read Biography" control is absolutely positioned at top: 193px to sit
	   on the portrait of a desktop card. A half width card is shorter, so it
	   landed on the person's role.

	   It must NOT be put in flow. The disc's white cross is drawn with
	   ::before/::after, which are absolutely positioned against the button --
	   take the button out of position and the cross re-anchors to the card and
	   flies up onto the portrait, leaving an empty navy disc under the text.

	   Instead, keep it positioned and anchor it to the body's top edge, which is
	   exactly the bottom of the portrait at any card width. */
	.fw-people__grid .fw-person__body {
		position: relative;
	}

	.fw-people__grid .fw-person__bio-btn {
		position: absolute !important;
		top: 0 !important;
		bottom: auto !important;
		left: 50% !important;
		/* Desktop keeps the disc 11px inside a 226px portrait; the same
		   proportion on a 155px portrait is 7px. */
		transform: translate(-50%, calc(-100% - 7px)) !important;
		margin: 0 !important;
	}

	/* Two across means a narrower column, so the portrait and the type have to
	   come down with it or the names wrap to four lines. */
	.fw-people__grid .fw-person__name { font-size: 15px; line-height: 20px; }
	.fw-people__grid .fw-person__role,
	.fw-people__grid .fw-person__org  { font-size: 13px; line-height: 18px; }
	.fw-people__grid .fw-person__bio-btn { font-size: 13px; }
}

/* =========================================================
   r118 — IBIA Structure: "Our Role in..." sits in from the page
   =========================================================
   The split's media keeps a desktop inset at phone width, so the image starts
   at x=40 where every other block on the page starts at x=20.
   ========================================================= */

@media (max-width: 782px) {
	.page-id-229 .fw-split__media,
	.page-id-229 .fw-split__inner,
	.page-id-229 .fw-split__content {
		padding-inline: 0 !important;
		margin-inline: 0 !important;
	}

	/* Superseded by the site wide rule below, which covers every split. */
	.page-id-229 .fw-split--image-left .fw-split__content {
		padding-top: 0 !important;
	}
}

/* =========================================================
   Testimonials on mobile — rows 79 and 96
   =========================================================
   r79: the section was 1016px tall on an 844px screen, so the quote and the
   arrows could never be seen together. Measured: intro 67, grid 814 (card 750
   inside 32px padding), arrows 41 with a 58px top margin.

   The padding is trimmed here, which recovers about 90px. The rest is the
   quote itself — 665px of text — so a very long testimonial still will not fit
   in one screen. The block has a "Truncate long quote (Read more link)"
   option for exactly that; turning it on is an editor's call, not CSS.

   r96: the quote marks are centred in their tile and the arrows pulled up so
   they read as belonging to the card above them.
   ========================================================= */

@media (max-width: 782px) {

	.fw-testimonials__grid {
		padding-block: 20px !important;
	}

	.fw-testimonials .fw-testimonial {
		padding-top: 32px !important;
		padding-bottom: 20px !important;
	}

	.fw-testimonials__nav-fe {
		margin-top: 20px !important;
		justify-content: center;
	}
}

/* r96 — the quote mark sits off centre in its tile at every width. */
.fw-testimonial__quote-mark,
.fw-testimonial__mark,
.fw-testimonial::before {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================
   Events / Training switcher on mobile
   =========================================================
   The segmented control keeps its desktop item widths — 180px for the three
   categories inside a 310px group, 120px for Upcoming/Past — so at phone width
   they wrap one per line and the control reads as a loose list in a grey box
   rather than a switch.

   On mobile each group becomes equal columns across the full width, which is
   what the desktop control is: one pill per option, the active one filled.
   ========================================================= */

@media (max-width: 782px) {

	.ibia-events__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px !important;
	}

	.ibia-events__bar .ibia-segmented {
		width: 100%;
		display: grid;
		gap: 4px;
	}

	.ibia-events__bar .ibia-segmented--view { grid-template-columns: repeat(3, 1fr); }
	.ibia-events__bar .ibia-segmented--time { grid-template-columns: repeat(2, 1fr); }

	/* The item is the wrapper; the link inside it is what is actually painted. */
	.ibia-events__bar .ibia-segmented__item {
		width: auto !important;
		min-width: 0;
	}

	.ibia-events__bar .ibia-segmented__item .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 42px;          /* a real tap target, and all three match */
		padding: 6px 8px !important;
		font-size: 12px;
		line-height: 15px;
		text-align: center;
		white-space: normal;        /* "Supported Events" may take two lines */
		hyphens: none;
	}
}

/* =========================================================
   Single event page on mobile — row 77
   =========================================================
   .ibia-ev-single is alignfull and its inner wrapper, main column and sidebar
   all sit at x=0 with no padding, so every word of the event runs into both
   edges of the screen. The desktop layout gets its inset from the two column
   grid, which collapses at phone width and takes the inset with it.
   ========================================================= */

@media (max-width: 782px) {
	/* 20px, not var(--fw-gutter) — that token is 40px here, which is the
	   desktop gutter and twice what every other block uses at phone width. */
	.ibia-ev-single__inner {
		padding-inline: 20px;
		box-sizing: border-box;
	}

	/* The banner image is meant to bleed, so it comes back out again. */
	.ibia-ev-single__inner > .ibia-ev-single__media,
	.ibia-ev-single__banner {
		margin-inline: -20px;
	}
}


/* =========================================================
   Splits: the hole above the heading at phone width
   =========================================================
   A split's content column carries a large top padding so the text lines up
   with the image on desktop. Measured: 161px on IBIA Structure, 100px on IMO,
   89px on Membership, 81px on World Bunkering.

   Stacked at phone width the content comes first and the image follows, so that
   offset is not alignment any more, it is a hole above the heading. On IBIA
   Structure it combined with the split's own 103px top margin and 65px of banner
   tail to leave 329px of white space between the accordion and "Our Role in the
   Marine Energy Industry".

   The split's own 88-103px top margin already separates it from the block above.

   The per page Figma rules that set these (.page-id-198/203/218/229 with a
   variant class) are specificity 0,3,0 and already !important, so the selector
   below has to out-specify them: body[class] adds a third class level plus an
   element, giving 0,3,1.
   ========================================================= */

@media (max-width: 782px) {
	body[class] .fw-split .fw-split__content {
		padding-top: 0 !important;
	}
}

/* ---- r118: the split's inner column is inset 20px from the page gutter -----
   The per page Figma rules also give the inner column side offsets for desktop
   (e.g. .page-id-229 .fw-split--image-right .fw-split__inner has margin-left:
   61px). Stacked, the split itself already sits at the 20px page gutter, so
   those offsets just make the image and the text 20px narrower than every other
   block. Same specificity problem as above: the earlier r118 rule was 0,2,0 and
   never won. */

@media (max-width: 782px) {
	body[class] .fw-split .fw-split__inner,
	body[class] .fw-split .fw-split__media,
	body[class] .fw-split .fw-split__content {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}

	/* The 20px actually comes from the split's OWN side padding, which is its
	   desktop gutter inside a 1400px block. The split box already sits at the
	   page gutter at phone width, so that padding is a second inset and makes
	   the image and text 310px where every other block is 350px.
	   Left alone on alignfull splits, which have no gutter of their own. */
	body[class] .fw-split:not(.alignfull) {
		padding-inline: 0 !important;
	}
}

/* =========================================================
   r115 - IBIA Milestones on mobile
   =========================================================
   Monica: "move the green dot to above the year then close the gap after the
   year to the text".

   The dot is .fw-timeline__item::before at left: 9px, top: 16px, which puts it
   over the lower left of the year rather than above it. It stays on left: 9px so
   it keeps sitting on the vertical rail; only its vertical position changes, and
   the item gains the top padding to make room.

   The gap is body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item--above .fw-timeline__content
   { min-height: 226.5px; justify-content: space-between }. On desktop that
   balances the image and the text either side of the rail. At phone width the
   media slot is usually empty, so the box is held open at 226.5px and the
   paragraph is pushed to the bottom of it: measured 135, 163, 163 and 191px
   between the year and its text, where the --below items sit at a correct 21px.
   ========================================================= */

@media (max-width: 782px) {
	body[class] .fw-timeline__item {
		padding-top: 36px !important;
		/* body:is(.page-id-179, .editor-styles-wrapper) .fw-timeline__item sets flex: 0 0 388px, which is the
		   item's WIDTH while the timeline is a horizontal carousel. At phone
		   width the track turns vertical, so that flex-basis becomes a fixed
		   HEIGHT and every entry is 388px tall whatever it contains: the 1996
		   entry holds 28px of text and still reserves 388px, leaving 269px of
		   white before the next dot. An earlier rule fixed the width but left
		   the basis alone. */
		flex: 0 0 auto !important;
	}

	body[class] .fw-timeline__item::before {
		top: 0 !important;
	}

	body[class] .fw-timeline__item--above .fw-timeline__content {
		min-height: 0 !important;
		justify-content: flex-start !important;
	}
}

/* =========================================================
   Phone width: a floor gutter so nothing touches the glass
   =========================================================
   Owen, 9 Oct: the events band on the home page ran its heading, its "View All
   Events" button and the featured card all the way to both edges. .fw-banner
   carries the band's side padding and .fw-banner__inner has none of its own, so
   a full bleed band with no page specific padding rule leaves its contents at
   x=0.

   Deliberately NOT !important and deliberately low specificity: this is a floor
   for bands that have no gutter, and any page specific rule that sets a real one
   still wins rather than being doubled up.
   ========================================================= */

@media (max-width: 782px) {
	/* The band styles set this at 0,3,0 (e.g. .fw-banner.is-style-ibia-events >
	   .fw-banner__inner { padding-inline: 0 }), which is correct on desktop
	   because the inner is capped at --fw-container and centred with room to
	   spare. On a 390 screen the cap does nothing and the contents sit on the
	   glass. body[class] takes this to 0,3,1 so it clears them. */
	body[class] .fw-banner > .fw-banner__inner {
		padding-inline: 20px;
	}

	/* The cards grid sits at its container's inset, so it must not add its own
	   on top (that was the 40px listing gutter on 9 Oct). Inside a full bleed
	   band the inset now comes from .fw-banner__inner above. */
	.ibia-events__cards {
		box-sizing: border-box;
	}
}

/* ---- World Bunkering covers fan: contained at phone width -----------------
   .ibia-wb--band .ibia-wb-fan carries transform: translateX(-54px) scale(0.91).
   That is desktop composition: there the fan is pinned to the band's bottom
   right and the shift clears the rounded corner.

   At phone width the fan returns to flow (position: static below 1200px) but
   keeps the transform, so it is dragged 54px left and lands at x=6 inside a
   container starting at x=20 - the covers break out of the white card.

   ONLY the horizontal shift is removed. The 0.91 scale and the 0 100% origin
   stay exactly as they are: the covers are sized off the fan box and the
   clip-path deliberately lets them overhang, so changing the box itself blows
   the fan up (tried it, covers went to -99..565). */

@media (max-width: 782px) {
	body[class] .ibia-wb--band .ibia-wb-fan {
		transform: scale(0.91);
	}
}

/* ---- Footer legal line: the r72 rule never applied ------------------------
   Written on 8 Oct as `.ibia-footer__legal, .ibia-footer__bottom` (0,1,0) and
   beaten by something more specific: measured 0px padding on every page, with
   the line's box running the full 0 to 390 and the back-to-top button sitting
   over its right end. The text is centred so it does not look broken at this
   length, but it has no gutter and a longer line would touch both edges.

   Re-stated at body[class] (0,2,1). 56px extra on the right clears the
   back-to-top button. */

@media (max-width: 782px) {
	/* .ibia-footer__legal { padding: 5px 0 7px !important } at line ~7925 is an
	   !important shorthand, so specificity alone never beat it - that is why
	   both the 8 Oct rule and the first re-statement of it computed to 0. */
	body[class] .ibia-footer__legal,
	body[class] .ibia-footer__bottom {
		box-sizing: border-box;
		padding-inline: 20px 76px !important;
	}
}

/* ---- Section heads stack at phone width -----------------------------------
   .is-style-ibia-section-head is the "title left, View All <x> button right"
   row used across the site. It is a flex row with the text group on
   flex: 0 1 var(--fw-col-2) and the button on flex: 0 0 auto, and it had NO
   mobile rule at all.

   At 390 the button keeps its full 157px and --fw-gutter is 40, so the text
   group was left with 350 - 40 - 157 = 153px: "Connecting the Global Bunker
   Industry" broke over four lines next to a button floating in the space
   beside it.

   Stacked, with the gutter dropped to the mobile 20px. */

@media (max-width: 782px) {
	body[class] .is-style-ibia-section-head,
	body[class] .ibia-events__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	body[class] .is-style-ibia-section-head > .wp-block-group:first-child,
	body[class] .ibia-events__intro {
		flex: 1 1 auto;
		max-width: none;
	}
}

/* =========================================================
   r120 - Leadership Legacy on mobile
   =========================================================
   Monica: "list the people in a column of two. the year can it be above the
   image with same padding as the text under the image".
   Owen, 9 Oct: the Present chair does not show at all, and it could do with the
   connecting lines.

   1. THE PRESENT CHAIR WAS MY FAULT. The r113/114 two column rule puts every
      .fw-person on flex: 0 0 calc(50% - 20px) with a matching max-width. On the
      Board that is right. Here the grid is .ibia-legacy__current .fw-people__grid,
      a flex box whose own width computes to 0, so 50% of 0 made the card 0 wide
      and .fw-person__photo (width: var(--ibia-photo); max-width: 100%) collapsed
      to 0x0. The photo was in the DOM and loaded the whole time.

   2. Two columns: the rows drop to 1fr below 640px. Back to two.

   3. Spacing: .ibia-legacy__photo { margin-top: 73.4px !important } and
      .ibia-legacy__name { margin-top: 8px !important } are Figma values, and the
      73.4px is there to clear the dot and rule, which are hidden below 1100px.
      Matched to the name's 8px as asked.

   4. Connecting lines: the rule and the dots are hidden below 1100px. Brought
      back with the dot ABOVE the year, the same arrangement as the Milestones
      fix earlier today, because at 8px spacing there is no room for a 28px dot
      between the year and the photo.
   ========================================================= */

@media (max-width: 782px) {

	/* 1. Undo the two column people rule for this one section. */
	body[class] .ibia-legacy__current .fw-people__grid {
		width: 100% !important;
		max-width: 100% !important;
	}

	body[class] .ibia-legacy__current .fw-person {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body[class] .ibia-legacy__current .fw-person__photo {
		width: var(--ibia-photo, 320px) !important;
		max-width: 100% !important;
	}

	/* The Present chair is a person block, so his name is .fw-person__name while
	   every other name on the page is .ibia-legacy__name at 20/30. His rendered
	   noticeably smaller than the rest of the column. */
	body[class] .ibia-legacy__current .fw-person__name {
		font-size: 20px;
		line-height: 30px;
	}
}

@media (max-width: 640px) {

	/* 2. Two across. */
	body[class] .ibia-legacy__row,
	body[class] .ibia-legacy__row--short {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 20px;
		row-gap: 60px;
	}

	/* 4. Room for the dot above the year. */
	body[class] .ibia-legacy__cell {
		padding-top: 36px;
	}

	/* 3. The year's gap below it now matches the name's gap above it. */
	body[class] .ibia-legacy__photo {
		margin-top: 8px !important;
	}

	/* 4. The rule runs through the dots, which sit above the years. */
	body[class] .ibia-legacy__row::before {
		display: block;
		top: 14px;
	}

	body[class] .ibia-legacy__dot {
		display: block;
		top: 0;
	}

	/* The tick belongs between the year and the rule on desktop; with the dot
	   above the year it has nothing to join, so it stays hidden. */
	body[class] .ibia-legacy__years::after {
		display: none;
	}
}

/* ---- News cards: the hole between the excerpt and the tag ------------------
   Owen, 9 Oct: "too much padding on the news cards between the description and
   the tags". Measured 164px on /news/ at 390.

   The badge is margin: auto 21px 21px - the auto deliberately pushes it to the
   foot of the card - and the card carries min-height: 586px, a desktop Figma
   value. At phone width the image is 149px and the content far shorter, so the
   card is held open at 586 and the auto margin resolves to 163.75px.

   Card fits its content at phone width, and the badge gets a real gap rather
   than an auto one, which would otherwise collapse to 0. Desktop keeps both. */

@media (max-width: 782px) {
	body[class] .fw-news-list__card {
		min-height: 0 !important;
	}

	body[class] .fw-news-list__badge {
		margin-top: 20px !important;
	}
}

/* ---- r111: categories as a dropdown above the article ---------------------
   Owen, 9 Oct: "category listing on single news page should show as a dropdown
   above the article like on the main news page".

   The .ibia-article__cats rail is the desktop design (a 440 panel beside the
   920 article column). At phone width it stacks under the article, so the
   categories sat a long way below the thing the reader was looking at.

   The dropdown is the News page's own control, reusing .ibia-news-bar__cats
   select's styling, and each option carries the same /news/?cat=<slug> target
   the rail's links use. Desktop keeps the rail and never shows the dropdown. */

.ibia-article__catbar {
	display: none;
}

@media (max-width: 782px) {
	.ibia-article__catbar {
		display: block;
		margin-bottom: 20px;
	}

	.ibia-article__catbar select {
		box-sizing: border-box;
		width: 100%;
		height: 39px;
		padding: 0 34px 0 10px;
		border: 1px solid var(--fw-navy);
		border-radius: var(--fw-radius);
		background-color: var(--fw-white);
		color: var(--fw-navy);
		font-family: inherit;
		font-size: var(--fw-body-size);
		font-weight: var(--fw-weight-light);
		appearance: none;
		-webkit-appearance: none;
		background-image: var(--ibia-nav-chevron);
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 12px 6px;
		cursor: pointer;
	}

	/* 12 Oct: the select markup was removed, so the .ibia-article__catbar
	   rules above are now unused and the rail is no longer hidden here.
	   See "News singles: categories behind a button" at the end of this file. */
}

/* 2026-10-12 Two-column accordions on mobile.
   .ibia-acc-cols deals its rows into two independent stacks, so opening a row
   cannot shift the other column. The last row of each stack has no rule under
   it, which is right at the foot of a column. Stacked on a phone the two run as
   one list, so that row sits in the middle with no line while every other row
   has one -- on Membership it is the fourth of eight. Restored for the last row
   of every stack except the final one. */
@media (max-width: 768px) {
	/* The row gap falls in the middle of what now reads as one list: 59px
	   between rows 4 and 5 against 17px everywhere else. */
	.ibia-acc-cols { row-gap: 0 !important; }
	/* The second stack has a 17px margin and a 17px padding above its first
	   row; a row-to-row step is 17. */
	/* The second stack's own top border is the rule across the top of the
	   right-hand column; stacked it is a second, fainter line just below the
	   one under row 4. */
	.ibia-acc-cols .ibia-acc + .ibia-acc {
		padding-top: 0 !important;
		border-top: 0 !important;
	}
	.ibia-acc-cols .ibia-acc:not(:last-child) .ibia-acc__item:last-child .ibia-acc__head {
		border-bottom: 0.8px solid var(--fw-navy) !important;
		padding-bottom: 18px !important;
	}
}

/* 2026-10-12 News singles: categories behind a button.
   Lisa: the categories on a news single should be a button at the top that
   opens the list, matching the Events and Resources filters rather than the
   native select that was here before.

   1100px is where .ibia-article__inner already drops to one column, so the
   rail stops being a rail and the control takes over at exactly that point.
   It is also the .ibia-filters__toggle breakpoint, so the two agree.

   Closed, the panel is only the button: the tint, padding and shadow set
   further up with !important are all taken back off. */
.ibia-article__cats-toggle { display: none; }

@media (max-width: 1100px) {
	/* Above the article rather than below it. */
	.ibia-article__cats { order: -1; }

	.ibia-article__cats .ibia-article__cats-title { display: none; }

	.ibia-article__cats-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		min-height: 39px;
		padding: 0 20px;
		border: var(--fw-btn-border, 1px) solid var(--fw-navy);
		border-radius: var(--fw-radius);
		background-color: var(--fw-navy);
		color: var(--fw-white);
		font: inherit;
		font-weight: var(--fw-weight-medium);
		text-align: left;
		cursor: pointer;
	}

	/* The same chevron as the filters control, turning over when it opens. */
	.ibia-article__cats-toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-left: 12px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.15s;
	}
	.ibia-article__cats.is-open .ibia-article__cats-toggle::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	/* Closed: nothing but the button. */
	.ibia-article__cats:not(.is-open) {
		padding: 0 !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}
	.ibia-article__cats:not(.is-open) .ibia-cat-list { display: none; }

	.ibia-article__cats.is-open .ibia-article__cats-toggle { margin-bottom: 17px; }
}

/* ---- Title bands: styled as headings, no longer heading elements ----------
   Owen, 12 Oct. Every news article rendered <h1>News</h1> and every event
   <h1>Events</h1>, with the real headline demoted to <h2>: about 30 pages
   sharing two generic H1 values, and no page carrying its own.

   The headline is now the H1 on both templates and the band is a <p>. The band
   must look exactly as it did, and it no longer picks up any h1 styling, so its
   typography is restated here. Measured off the old H1 before the change:
   52px / 59.7px / 700 / Ubuntu / #fff / margin 0, the same at every width.

   The hero's own `.fw-page-hero__content p` rule would otherwise render the
   events band at body size, so this has to out-specify it: 0,3,1 against 0,2,1. */

.ibia-titleband__title,
.fw-page-hero .fw-page-hero__content p.fw-page-hero__title {
	margin: 0;
	color: var(--fw-white);
	font-family: var(--fw-font, inherit);
	font-size: 52px;
	font-weight: var(--fw-weight-bold, 700);
	line-height: 59.7px;
}

/* 2026-10-12 Footer: condensed on a phone.
   Three changes, all below 768px, all layout only.

   1. Main Office becomes two columns: the address keeps the left and spans
      both rows, the phone number and the email stack in the right.
   2. Join IBIA and Contact Us sit side by side directly under it. They are
      children of the actions column, which also carries Follow Us and the
      social row, so that column is set to display: contents while stacked.
      Its box disappears and its four children become grid items in their
      own right, which lets the buttons be ordered above the bulletin form
      while Follow Us stays below it. Above 768 the column is a flex column
      again and nothing here applies.
   3. First Name and Last Name share a row. Forminator already groups them
      in one .forminator-row as two col-6 fields; the row just needs to be a
      flex row for them to sit together. */
@media (max-width: 768px) {

	/* --- 1. the office block ------------------------------------------- */
	.ibia-footer__col--office .ibia-footer__contact {
		display: grid !important;
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		column-gap: 18px;
		row-gap: 3px;
		align-items: start;
	}
	.ibia-footer__col--office .ibia-footer__contact li {
		margin-top: 0 !important;
	}
	.ibia-footer__col--office .ibia-footer__contact li:first-child {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.ibia-footer__col--office .ibia-footer__contact li:nth-child(2) { grid-column: 2; grid-row: 1; }
	.ibia-footer__col--office .ibia-footer__contact li:nth-child(3) { grid-column: 2; grid-row: 2; }

	/* --- 2. the two buttons, side by side under the office block -------- */
	.ibia-footer__inner { grid-template-columns: 1fr 1fr !important; }
	.ibia-footer__col--brand,
	.ibia-footer__col--office,
	.ibia-footer__col--bulletin { grid-column: 1 / -1; }

	/* The column's own box goes, so its children become grid items. */
	.ibia-footer__col--actions { display: contents !important; }

	.ibia-footer__col--brand   { order: 1; }
	.ibia-footer__col--office  { order: 2; }
	.ibia-footer a.ibia-footer__join        { order: 3; }
	.ibia-footer a.ibia-footer__contact-btn { order: 4; }
	.ibia-footer__col--bulletin { order: 5; }
	.ibia-footer__col--actions > .ibia-footer__heading { order: 6; grid-column: 1 / -1; }
	.ibia-footer__col--actions > .ibia-footer__social  { order: 7; grid-column: 1 / -1; }

	/* The stacked buttons carried their own bottom margins; the grid gap
	   does that job now and the margins would knock the row out of line. */
	.ibia-footer a.ibia-footer__join,
	.ibia-footer a.ibia-footer__contact-btn {
		margin-bottom: 0 !important;
		align-self: start;
	}

	/* --- 3. first and last name on one row ------------------------------ */
	/* The 8 October footer work stacks every field with flex-direction:
	   column at five classes, so a two class rule here left the direction
	   stayed column and the halves sat one above the other at the right
	   width. Same five classes, later in the file, with !important. The
	   other three rows hold one field each and are unaffected. */
	.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-row {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		column-gap: 12px !important;
	}
	/* Six classes so it beats the full width rule set further up this file,
	   which is five classes with !important and is correct for every other
	   field in this form. */
	.ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6 {
		/* Two halves plus the 12px gap came to exactly the row width, and a
		   flex row a fraction over wraps. This leaves four pixels of slack. */
		width: calc(50% - 10px) !important;
		flex: 0 0 calc(50% - 10px) !important;
		min-width: 0;
	}
	.ibia-bulletin .forminator-row > .forminator-col-12 { flex: 1 1 100%; }
}

/* 2026-10-12 Splits: the image closer to its text on a phone.
   Stacked, .fw-split__inner reuses --fw-split-inner-gap as its row gap, and
   that value is the block's desktop column gap: 80px on these blocks. Right
   between two columns, far too much between a paragraph and the picture that
   belongs to it, especially against the 128px that separates one split from
   the next -- the image read as the start of the next section.
   30px is --fw-space-lg, about one 28px line, so the pair reads as a pair
   and the section break stays plainly larger. row-gap only, so the column
   gap is untouched at every width where there really are two columns.

   2026-10-13: tightened again to 16px, Lisa having found 30px still loose on
   /training/. Two things were wrong with the 30px. It is a whole line of body
   copy, which against a full width image still reads as a break rather than a
   pairing; and it was not actually what you saw on every split. A split whose
   copy ends in a bulleted list measured 46px, because the list keeps its 16px
   bottom margin inside the content column on top of the row gap, so some pairs
   sat half as far apart again as others for no visible reason. The last child's
   bottom margin is now dropped, which makes every split the same 16px.
   Measured against 128px between one split and the next -- 48px between the
   sections plus their own 40px padding each side -- so the grouping is 8:1 and
   unambiguous. Still row-gap only, and still phone only. */
@media (max-width: 768px) {
	.fw-split__inner { row-gap: var(--fw-space-sm, 16px) !important; }
	.fw-split__inner > .fw-split__content > *:last-child { margin-bottom: 0 !important; }
}

/* 2026-10-12 Leadership Legacy: the closing block at the page width.
   .ibia-legacy__close-text sets margin: 144px 0 0 80px !important and a
   560px cap with no media query, which is right beside a 680px image and
   wrong once the two stack: the copy started 120px from the left edge at
   215px wide. The section also adds padding-inline: 20px when it stacks,
   inside the 20px page gutter it already sits in, so the image came out
   295px against the 335px the rest of the page uses.
   1100px is the section's own breakpoint for dropping to one column, so
   above it nothing here applies and the desktop offset stands. */
@media (max-width: 1100px) {
	.ibia-legacy__close { padding-inline: 0 !important; }
	.ibia-legacy__close .ibia-legacy__close-text {
		margin: 0 !important;
		max-width: none;
	}
}

/* 2026-10-13 Bulletin band: a source with enough pixels below 900px.
   band-bulletin-20260821.jpg is 1400x150, cut to sit exactly behind the
   150px desktop band. The band only stays 150px tall down to about 900px;
   below that it grows as its content stacks and reaches 335x361 on a 375px
   phone, so covering it enlarges that strip 2.41x. That is the pixelation,
   and magnifying flat water is why it read as paler than the other bands.
   The Join band escapes it only because its own source is 318px tall.
   The replacement is 900x847, cut from the original photograph in
   SharePoint (Website/Images/IBIA Fleet/IBIA 2.jpg, 2490x1406), stopping
   short of the IBIA watermark in that file's bottom right corner. Every
   width below 900 now downscales it.
   Above 899 the desktop strip is untouched. */
@media (max-width: 899px) {
	.fw-banner.is-style-ibia-bulletin {
		background-image: url("../img/band-bulletin-mobile-20261013.jpg");
	}
}

/* 2026-10-13 Leadership Legacy: the closing text centres against the image.
   .ibia-legacy__close is a grid with align-items: center and the image sits
   centred in the row, 49px above and 48 below. The text did not, because
   .ibia-legacy__close-text overrides it with align-self: start and a
   144px top margin, which put its heading 96px below the top of the image
   and its last line flush with the bottom of the row.
   A fixed 144px only lined up against one particular length of copy, and
   this text is three paragraphs. Only the top margin goes; the 80px on the
   left is the horizontal offset against the column gap and stays. */
@media (min-width: 1101px) {
	.ibia-legacy__close .ibia-legacy__close-text {
		align-self: center;
		margin-top: 0 !important;
	}
}

/* 2026-10-13 News: the top three cards take their natural height.
   .ibia-news .fw-news-list__card:nth-child(-n+3) forces min-height: 586px,
   and .fw-news-list__badge carries margin-top: auto so the tag sits at the
   foot of the card. The first card's content ends at 413, so the remaining
   125px of that 586 showed as empty white between the summary and the tag;
   95px on the second card and 65px on the third, the difference being how
   many lines each title runs to.
   The auto margin stays, because it is what lines the three tags up with
   one another. The fixed height goes: it was measured against longer
   summaries than the site renders, and without it the row takes its own
   height while the tags still align.
   Below 783px the theme already zeroes the height and gives the tag a 20px
   top margin, so the stacked cards are untouched. */
@media (min-width: 783px) {
	.ibia-news .fw-news-list__card:nth-child(-n+3) { min-height: 0 !important; }
}

/* 2026-10-13 Testimonials: the card and the arrows on one screen.
   Rules for this already existed at 782px, but at two classes against the
   three of :is(.page-id-198, .page-id-313) .fw-testimonials .fw-testimonial,
   so the phone kept the desktop spacing. :is() takes the specificity of its
   most specific argument, which is why the page scoped rules were winning.
   Restated here at the same weight. The block measured 731px at 375px wide,
   against roughly 660 of usable height on a handset, so the arrows fell
   below the fold. The min-heights on the name and the member type hold the
   desktop rhythm and can only add height on a phone, so they go as well. */
@media (max-width: 782px) {
	.page-id-198 .fw-testimonials .fw-testimonial,
	.page-id-313 .fw-testimonials .fw-testimonial {
		/* The tile is 70px tall at top: -32px, so it reaches 38px down into
		   the card. Anything less than that here and it lands on the first
		   line of the quote: at 28px it overlapped by 9. Desktop uses 56.5
		   for the same job. */
		padding-top: 46px !important;
		padding-bottom: 16px !important;
	}
	.page-id-198 .fw-testimonials .fw-testimonial__author,
	.page-id-313 .fw-testimonials .fw-testimonial__author {
		padding-top: 14px !important;
		min-height: 0 !important;
	}
	/* The gap Lisa pointed at, between the name and the member type. */
	.page-id-198 .fw-testimonials .fw-testimonial__company,
	.page-id-313 .fw-testimonials .fw-testimonial__company {
		margin-top: 4px !important;
		min-height: 0 !important;
	}
	.page-id-198 .fw-testimonials .fw-testimonials__grid,
	.page-id-313 .fw-testimonials .fw-testimonials__grid {
		/* The quote tile is a ::before at top: -32px, so it needs 32px of
		   clearance above the card, and a scroll container clips the other
		   axis too, so that clearance has to be this padding. 12px cut 20px
		   off the top of the tile. Desktop gives it exactly 32. */
		padding-top: 36px !important;
		padding-bottom: 12px !important;
		margin-top: 24px !important;
	}
	.page-id-198 .fw-testimonials .fw-testimonials__nav-fe,
	.page-id-313 .fw-testimonials .fw-testimonials__nav-fe {
		margin-top: 12px !important;
	}
}

/* 2026-10-13 Testimonials: the quote mark and the arrows.
   The green tile is already centred on the card, within a pixel at both
   widths. The glyph inside it is not: the ::before is display: flex with no
   alignment, so the character sits top left, and a 54px line height in a
   70px box leaves it high. Centred here, with line-height: 1 so the leading
   does not push it off centre again.

   The arrows had 32px of grid padding plus a 58px nav margin below the
   cards, 90px of white in all, which read as a separate thing. 16 + 20
   brings them to 36. Desktop only: on a phone they are already 24px apart
   and the page scoped mobile rules outrank this. */
.fw-testimonials .fw-testimonial::before {
	/* flex-start, not center: the line box is taller than the content box
	   once there is padding, and centring an overflowing item moved the ink
	   by 1px rather than the 7.5 the box model predicted. From flex-start
	   the top of the line box is exactly padding-top, which is predictable
	   and measurable. */
	align-items: flex-start !important;
	justify-content: center !important;
	line-height: 1 !important;
	text-align: center !important;
	/* Centring the flex box centres the line box, not the ink, and the ink
	   of a " sits high in its em box: measured off the page the glyph was
	   about 7px above the tile centre. Half of this padding moves it down
	   by that much. In em so it holds if the size changes. */
	box-sizing: border-box !important;
	padding-top: 20px !important;
}

@media (min-width: 783px) {
	.fw-testimonials--grid .fw-testimonials__grid { padding-bottom: 16px !important; }
	.fw-testimonials--grid .fw-testimonials__nav-fe { margin-top: 20px !important; }
}

/* 2026-10-13 Testimonials: the arrows stop at every card.
   .fw-testimonials__grid is a snap container and the cards were
   scroll-snap-stop: normal, which lets a scroll skate past intermediate
   snap points. With the relative scrollBy the arrows used, iOS carried on
   to the furthest point and the arrows jumped to the last testimonial.
   The script now scrolls to a named card; this makes the skip impossible
   for a swipe as well.
   Phone width only: on desktop three cards show at once, and forcing a stop
   at every one also stops a trackpad flick gliding past several, which is a
   change to desktop behaviour nobody asked for. */
@media (max-width: 782px) {
	.fw-testimonials--grid .fw-testimonial { scroll-snap-stop: always; }
}

/* =========================================================
   2026-10-13 Event listing filters: a slide-in drawer on mobile.
   Owen: like LCT's course listing, mobile only. On the event
   listings (framework/event-listing gives its panel
   .ibia-filters--drawer) the Filters button opens the panel from
   the left over a dimmed page, instead of the inline accordion
   above. Same 1100px breakpoint as the button, where the listing
   goes to one column. Resources, Galleries and news singles keep
   the accordion. The head, foot and backdrop are added by
   blocks/filter-sidebar/view.js; above the breakpoint they do
   not show and the panel is the normal sidebar.
   ========================================================= */
.ibia-filters__drawer-head,
.ibia-filters__drawer-foot,
.ibia-filters__backdrop { display: none; }

@media (max-width: 1100px) {
	/* The button sits where the panel used to: above the cards. */
	.ibia-events__layout > .ibia-filters__toggle { order: -1; margin-bottom: var(--fw-space-lg); }
	/* It opens a panel to the side now, so the chevron points that way. */
	.ibia-filters__toggle[aria-haspopup]::after { transform: rotate(-45deg) translate(-2px, -2px); }

	.ibia-filters.ibia-filters--drawer {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 100001;
		display: flex !important;
		flex-direction: column;
		width: min(390px, 90vw);
		max-width: none;
		height: 100%;
		margin: 0 !important;
		padding: 0 20px !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 0 !important;
		background-color: var(--fw-white) !important;
		box-shadow: 4px 0 30px rgba(1, 53, 99, 0.18) !important;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0s linear 0.28s;
	}
	.ibia-filters.ibia-filters--drawer.is-drawer-open {
		transform: none;
		visibility: visible;
		transition: transform 0.28s ease;
	}
	/* The accordion above hides everything but the button while closed; the
	   drawer shows the whole panel, off screen until opened. */
	.ibia-filters.ibia-filters--drawer > :not([hidden]) { display: block; }
	/* The head carries the title in the drawer. */
	.ibia-filters.ibia-filters--drawer > .ibia-filters__title { display: none; }

	.ibia-filters.ibia-filters--drawer > .ibia-filters__drawer-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 -20px 15px;
		padding: 14px 20px;
		background-color: var(--fw-white);
		border-bottom: 1px solid var(--fw-divider, #dfe4ec);
	}
	.ibia-filters__drawer-title {
		margin: 0;
		font-size: 20px;
		font-weight: var(--fw-weight-medium);
		line-height: 1.3;
		color: var(--fw-navy);
	}
	.ibia-filters__close {
		position: relative;
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: var(--fw-radius);
		background: none;
		cursor: pointer;
	}
	.ibia-filters__close::before,
	.ibia-filters__close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		background-color: var(--fw-navy);
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.ibia-filters__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
	.ibia-filters__close:hover { background-color: rgba(var(--fw-blue-grey-rgb), 0.2); }
	.ibia-filters__close:focus-visible {
		outline: var(--fw-focus-width) solid var(--fw-focus-colour);
		outline-offset: 2px;
	}

	.ibia-filters.ibia-filters--drawer > .ibia-filters__drawer-foot {
		position: sticky;
		bottom: 0;
		margin: auto -20px 0;
		padding: 14px 20px;
		background-color: var(--fw-white);
		border-top: 1px solid var(--fw-divider, #dfe4ec);
	}
	.ibia-filters__show {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		border: 0;
		border-radius: var(--fw-radius);
		background-color: var(--fw-navy);
		color: var(--fw-white);
		font: inherit;
		font-weight: var(--fw-weight-medium);
		cursor: pointer;
	}

	.ibia-filters__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background-color: rgba(1, 53, 99, 0.5);
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	.ibia-filters__backdrop[hidden] { display: none; }
	.ibia-filters__backdrop.is-open { opacity: 1; }

	/* The page behind stays still while the drawer is open. */
	html.ibia-filters-drawer-open { overflow: hidden; }
}

/* =========================================================
   2026-10-13 Featured event on mobile: the whole card, still featured.
   Owen: on a phone the featured card showed only its image. The card is
   pinned to the desktop frame's 280px (height: 280px !important,
   overflow: hidden); once it stacks at 820px the image alone fills that,
   and the date, title, location and buttons were cut off below it.

   Here it sizes to its content and keeps what makes it the featured one:
   the turquoise chip, the larger date / title / location (scaled for a
   phone, still above the other cards'), and a turquoise band along the
   join between artwork and text. Listing grids only: the homepage feed has
   its own featured layout.
   ========================================================= */
@media (max-width: 820px) {
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event.ibia-event--featured {
		height: auto !important;
		min-height: 0 !important;
		grid-template-columns: 1fr;
		border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	}
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__media {
		height: auto;
		min-height: 0;
		aspect-ratio: 500 / 280;
		border-bottom: 6px solid var(--fw-turquoise, #9adbca);
	}
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__body {
		justify-content: flex-start !important;
		padding: 22px 20px 24px !important;
	}
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__chip {
		font-size: 16px;
		line-height: 22px;
		padding: 6px 10px;
	}
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__date { margin-top: 14px !important; }
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__title { margin-top: 10px !important; font-size: 24px; line-height: 1.2; }
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__loc { margin-top: 14px !important; }
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__date,
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__loc { font-size: 18px; line-height: 26px; }
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__loc::before { top: 4px; }
	.ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event--featured .ibia-event__actions { margin-top: 20px !important; flex-wrap: wrap; }
}

/* 2026-10-13 Splits: the section break on a phone.
   Lisa, on /training/: there still looked like a big gap above a heading. It
   measured 128px -- and it is not inside a split at all. It is the break
   between two of them: 40px of the first split's bottom padding, the 48px
   block gap, then 40px of the next split's top padding. The image sitting
   above that gap belongs to the text 16px above IT; the heading below starts
   a new section. So the gap was doing its job, just doing too much of it on a
   390px screen, where 128px is a third of the screen width.
   Now 24 + 32 + 24 = 80px. Still 5:1 against the 16px inside a split, so an
   image stays plainly with its own text rather than the next heading.
   Held to a single class on purpose. Every page level override of split
   spacing is `.page-id-N .fw-split--image-*`, two classes, so it beats this
   and the pixel matched pages keep exactly what they have -- /membership/
   (198) and /imo/ (203) both already set padding-block: 0 there. Phone only;
   desktop section rhythm is untouched. */
@media (max-width: 768px) {
	.fw-split { padding-block: 24px !important; margin-top: 32px !important; }
}
/* =========================================================
   Sticky filters and results bar (Owen, 13 Oct)
   =========================================================
   Resources and the event listings: the filter panel stays in view as the
   results scroll, held 24px below the top of the screen, and on Resources the
   "Showing N of M" line and the sort sit above the cards in the same way.

   Desktop only. Below 1100px the event filters are the slide-in drawer and
   the resources panel collapses behind its toggle, so neither should pin.

   Why each line is here:
   - The site header is not sticky, so 24px from the viewport is the offset.
   - The panel can be taller than the screen (the events one is about 1,016px),
     so it gets a max height and scrolls inside itself, or its foot would be
     unreachable while it is stuck.
   - The results bar was transparent: stuck, the cards would show through it.
     It sticks at the very top with its 24px as padding on a white ground, so
     nothing scrolls visibly above it, and a matching negative margin keeps it
     exactly where it sat before. height: auto lifts .page-id-213's 44px pin,
     which would otherwise squash the padding into the bar.
   - Each sticks only within its own column, so both let go at the end of the
     listing rather than riding over the footer.
   ========================================================= */

@media (min-width: 1101px) {
	/* The WordPress admin bar, when it shows, is fixed at 32px at these widths,
	   and would otherwise cover anything stuck at the top (Owen, 13 Oct).
	   WordPress puts .admin-bar on <body> only when the bar is there. */
	body { --ibia-adminbar: 0px; }
	body.admin-bar { --ibia-adminbar: 32px; }

	body[class] .ibia-filters {
		position: sticky;
		top: calc(24px + var(--ibia-adminbar, 0px));
		align-self: start;
		max-height: calc(100vh - 48px - var(--ibia-adminbar, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	body[class] .ibia-res__topbar {
		position: sticky;
		top: var(--ibia-adminbar, 0px);
		z-index: 3;
		height: auto;
		margin-top: -24px;
		padding-top: 24px;
		padding-bottom: 14px;
		/* The 44px pin held 40px of controls with 4px spare, so 14px of padding
		   would push the cards 10px down. Taken back here, so stuck it has room
		   under it and unstuck the cards start exactly where they did. */
		/* Owen: 14px under the bar, so its white no longer covers the top of the
		   cards' drop shadow. */
		margin-bottom: 14px;
		background-color: var(--fw-white, #fff);
		/* The cards carry a 2px 2px 12px shadow, about 14px past each edge, which
		   showed either side of the bar as they scrolled under it. Two solid
		   copies of the bar's own white, 16px out each side, cover it; the panel
		   is 41px away, so neither reaches it. */
		box-shadow: -16px 0 0 0 var(--fw-white, #fff), 16px 0 0 0 var(--fw-white, #fff);
	}
}

/* 2026-10-13 World Bunkering on a phone: two gaps Lisa asked to close.
   Both are desktop pixel match values that were never given a phone value.

   1. Above "View Past World Bunkering Magazines" measured 193px, and only
      87px of that was the eyebrow's own margin. The other 106px was dead
      space inside the magazine fan. The fan carries aspect-ratio: 559 / 496
      from the desktop frame (ibia.css:6370). The phone rules already turn the
      fan into a flat row and set height: auto -- but height: auto with an
      aspect ratio means "compute my height from my width", so the figure
      still came out 275px tall around a row of covers only 139px tall.
      Clearing the ratio lets it shrink to its contents.
   2. The eyebrow's hard 87px top margin (ibia.css:8882), and the
      "For more information" split's 80px (ibia.css:8899), both drop to 40px.
      margin-top only on the eyebrow, never the `margin` shorthand, because
      that rule also sets a margin-left that centres it on desktop.

   Scoped to .page-id-218 and to 768px, so the desktop fan and its pixel match
   are untouched. The eyebrow selector matches one element on this page, the
   View Past line; the "Featured Publication" eyebrow sits inside the hero and
   is not a direct child, so it is not affected. */
@media (max-width: 768px) {
	.page-id-218 .ibia-wb-fan { aspect-ratio: auto !important; }
	.page-id-218 :is(.entry-content, .fw-banner__inner) > p.is-style-ibia-eyebrow {
		margin-top: var(--fw-space-xl, 40px) !important;
	}
	.page-id-218 .fw-split--image-left { margin-block: var(--fw-space-xl, 40px) 0 !important; }
}
/* Collapsed filter options stay hidden whatever display the list items carry
   (Owen, 13 Oct: Show More on every long group). */
.ibia-filters__checks > li[hidden],
.ibia-filters__chips > li[hidden] { display: none !important; }

/* =========================================================
   2026-10-13 Members only posts (inc/cpt/post-members.php).
   A lock label on news cards, and the sign-in prompt inside
   an article that a non-member cannot read: teaser, then the
   members-only block's own prompt.
   ========================================================= */
.fw-news-list__members,
.fw-news-card__members {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: var(--fw-weight-medium);
	line-height: 1.4;
	color: var(--fw-navy);
	white-space: nowrap;
}
.fw-news-list__members .bi,
.fw-news-card__members .bi { font-size: 12px; }
.ibia-article__body .ibia-article__teaser { margin: 0 0 var(--fw-space-md); }
.ibia-article__body .ibia-gate { margin-top: var(--fw-space-md); }


/* ==========================================================================
   Header logo reveal (owen, 13 Oct 2026). The video is added by the inline
   script in header.php. Its box is 154 x 58 at 1x and the finished logo sits
   5.67px in and 2px down inside it, so it is drawn 104.05% wide and pulled
   up-left by those fractions; the hand-off to the SVG does not move. opacity,
   not visibility, so the img keeps the link's accessible name while hidden.
   multiply drops the video's white into the white header.
   ========================================================================== */
.fw-header .fw-logo__link { position: relative; display: block; }
.fw-header .fw-logo__reveal {
	position: absolute; left: -3.83%; top: -3.7%;
	width: 104.05%; height: auto; max-width: none;
	mix-blend-mode: multiply; pointer-events: none;
}
.fw-header .fw-logo__link.is-revealing .fw-logo__img { opacity: 0; }
/* The members-only prompt's Sign in button in the site's navy, as the sign-in
   page's own button (r55), not WordPress's default grey. */
.ibia-gate__action .wp-block-button__link {
	background-color: var(--fw-navy);
	color: var(--fw-white);
	border-radius: var(--fw-radius);
}
.ibia-gate__action .wp-block-button__link:hover,
.ibia-gate__action .wp-block-button__link:focus-visible { background-color: var(--fw-green-dark); color: var(--fw-white); }

/* =========================================================
   2026-10-13 News cards: the members only label is the
   Resources cards' "Member Only" badge (.ibia-res-card__badge),
   on the top right of the image. Replaces the lock and text
   in the meta row above.
   ========================================================= */
.fw-news-list__image,
.fw-news-card__image { position: relative; }
.fw-news-list__members,
.fw-news-card__members {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 27px;
	padding: 0 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 1;
	white-space: nowrap;
}

/* ---- News filter bar, sticky (Owen, 13 Oct) --------------------------------
   The category dropdown and search on /news/, held at the top of the screen
   while the articles scroll, the same treatment as the Resources results bar.
   The bar already spans the full listing width with its controls on the right,
   so its white ground covers every column; 16px either side covers the cards'
   2px 2px 12px shadow. The bar sat 40px above the first card: 14px of padding
   plus a 26px margin keeps that card exactly where it was, and 26px still
   clears the top of its shadow. Desktop only, like the other two. */
@media (min-width: 1101px) {
	body[class] .ibia-news-bar {
		position: sticky;
		top: var(--ibia-adminbar, 0px);
		z-index: 3;
		margin-top: -24px;
		padding-top: 24px;
		padding-bottom: 14px;
		margin-bottom: 26px;
		background-color: var(--fw-white, #fff);
		box-shadow: -16px 0 0 0 var(--fw-white, #fff), 16px 0 0 0 var(--fw-white, #fff);
	}
}

/* =========================================================
   Form confirmation and error messages (Owen, 13 Oct)
   =========================================================
   The Contact form's "thank you" arrived as a line of body text above the
   fields, easy to miss entirely. The forms use Forminator with its own design
   switched off (data-design="none"), so nothing styled the message at all.

   Now a clear panel: brand green with a tick for success, red with an
   exclamation mark for an error. Forminator keeps the element in the page
   empty and aria-hidden until it has something to say, so that state stays
   out of sight. Forms in page content only: the footer bulletin form has its
   own compact treatment. */

body[class] .entry-content .forminator-ui .forminator-response-message:empty,
body[class] .entry-content .forminator-ui .forminator-response-message[aria-hidden="true"] {
	display: none;
}

body[class] .entry-content .forminator-ui .forminator-response-message {
	position: relative;
	display: block;
	margin: 0 0 28px;
	padding: 20px 24px 20px 66px;
	border-left: 6px solid transparent;
	border-radius: var(--fw-radius, 4px);
	font-size: 18px;
	line-height: 1.5;
	font-weight: var(--fw-weight-medium, 500);
}

body[class] .entry-content .forminator-ui .forminator-response-message p,
body[class] .entry-content .forminator-ui .forminator-response-message ul {
	margin: 0;
}

body[class] .entry-content .forminator-ui .forminator-response-message::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 22px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 17px 17px;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

body[class] .entry-content .forminator-ui .forminator-response-message.forminator-success {
	border-left-color: var(--fw-green, #a3c362);
	background-color: rgba(var(--fw-green-rgb, 163, 195, 98), 0.18);
	color: var(--fw-navy, #013563);
}

body[class] .entry-content .forminator-ui .forminator-response-message.forminator-success::before {
	background-color: var(--fw-green, #a3c362);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

body[class] .entry-content .forminator-ui .forminator-response-message.forminator-error {
	border-left-color: #b32d2e;
	background-color: #fcebeb;
	color: #7a1d1d;
}

body[class] .entry-content .forminator-ui .forminator-response-message.forminator-error::before {
	content: "!";
	background-color: #b32d2e;
}

/* =========================================================
   2026-10-13 Search results as cards (search.php). The card
   is the related posts card (.ibia-related above), so search
   reads like the other listings: image, date, title, a short
   snippet, and the tag at the foot. Resource covers are
   documents, so they are shown whole on the grey tile the
   Resources cards use rather than cropped.
   ========================================================= */
.ibia-search-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px;
	margin-top: var(--fw-space-lg);
}
.ibia-search-results .fw-news-list__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--fw-white);
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ibia-search-results .fw-news-list__card:hover { box-shadow: var(--ibia-card-hover-shadow); }
.ibia-search-results .fw-news-list__image { display: block; width: 100%; aspect-ratio: 320 / 137; overflow: hidden; order: 1; }
.ibia-search-results .fw-news-list__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ibia-search-results .fw-news-list__image--doc { background-color: rgba(148, 159, 179, 0.2); padding: 10px 0; box-sizing: border-box; }
.ibia-search-results .fw-news-list__image--doc img { object-fit: contain; }
.ibia-search-results .fw-news-list__image-ph { display: block; width: 100%; height: 100%; background-color: #d9d9d9; }
.ibia-search-results .fw-news-list__meta { display: contents; }
.ibia-search-results .fw-news-list__date { order: 2; margin: 21px 21px 0; font-size: var(--fw-body-size); font-weight: var(--fw-weight-light); line-height: 28px; color: var(--fw-navy); }
.ibia-search-results .fw-news-list__head { order: 3; margin: 12px 21px 0; }
.ibia-search-results .fw-news-list__image + .fw-news-list__head { margin-top: 21px; }
.ibia-search-results .fw-news-list__title { margin: 0; font-size: 18px; font-weight: var(--fw-weight-regular); line-height: 26px; color: var(--fw-navy); }
.ibia-search-results .fw-news-list__title a { color: inherit; text-decoration: none; }
.ibia-search-results .fw-news-list__title a::after { content: ""; position: absolute; inset: 0; }   /* whole card clicks through */
.ibia-search-results .fw-news-list__title a:hover { text-decoration: underline; }
.ibia-search-results .fw-news-list__arrow { display: none; }
.ibia-search-results .fw-news-list__excerpt {
	order: 4;
	margin: 12px 21px 0;
	font-size: 15px;
	font-weight: var(--fw-weight-light);
	line-height: 24px;
	color: var(--fw-navy);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ibia-search-results .fw-news-list__badge {
	order: 5;
	margin: auto 21px 21px;
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 11px;
	color: var(--fw-navy);
}
/* Room above the tag, while its auto top margin still lines the tags up along a row. */
.ibia-search-results .fw-news-list__head,
.ibia-search-results .fw-news-list__excerpt { margin-bottom: 20px; }
.ibia-search-results .fw-news-list__head:has(+ .fw-news-list__excerpt) { margin-bottom: 0; }
.ibia-search-results + .navigation.pagination { margin-top: var(--fw-space-lg); }


/* =========================================================
   2026-10-19 50/50 Block: testimonial and news article media

   Owen: "they should have the ability to use testimonials/news in the 50/50.
   Please style them properly so they work." Neither had ever rendered: the
   starter's `.fw-split__card > *` max-width token defaults to 0 (so card and
   label were 0px wide), the media pane above sets font-size 0 for the photo,
   and the testimonial kept the slider's display: contents and opacity 0.

   Each card is the site's own design, as on Membership (testimonial) and
   News (news card), centred in the pane at the cards' own 440px. Keyed to
   the block's classes only, so the editor shows exactly this too.
   ========================================================= */

.fw-split__media.fw-split__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	background: none;
	font-size: var(--fw-body-size);
	line-height: 28px;
	color: var(--fw-navy);
}

.fw-split__media.fw-split__card > * {
	width: 100%;
	max-width: 440px;
}

/* "Testimonial:" / "Related News:" above the card, in the eyebrow style. */
.fw-split__media.fw-split__card > .fw-split__card-label {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: var(--fw-weight-regular);
	line-height: 24px;
	color: var(--fw-navy);
}

/* --- Testimonial: the Membership card --------------------- */

.fw-split__card--testimonial .fw-testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin-top: 40px;   /* the quote badge overhangs the top by 32 */
	padding: 56.5px 27px 26px 22px;
	border: 1px solid var(--fw-green);
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	background-color: var(--fw-white);
	box-shadow: var(--fw-shadow-card);
}

.fw-split__card--testimonial .fw-testimonial::before {
	content: "\201C";
	position: absolute;
	top: -32px;
	left: calc(50% - 35px);
	right: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	padding-top: 0.22em;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	color: var(--fw-white);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 60px;
	line-height: 0.9;
}

/* No photographs in the design for this card; stars are not printed on the page. */
.fw-split__card--testimonial .fw-testimonial__image,
.fw-split__card--testimonial .fw-testimonial__stars { display: none; }

.fw-split__card--testimonial .fw-testimonial__quote {
	position: static;
	display: flex;
	flex-direction: column;
	padding: 0;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.fw-split__card--testimonial .fw-testimonial__quote-text {
	margin: 0 !important;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	font-style: italic;
	line-height: 28px;
	color: var(--fw-navy);
}

.fw-split__card--testimonial .fw-testimonial__author {
	position: static;
	min-height: 0;
	margin: 32px 0 0 !important;
	padding: 0 !important;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
	color: var(--fw-navy);
}

.fw-split__card--testimonial .fw-testimonial__author::before { content: none; }

.fw-split__card--testimonial .fw-testimonial__company {
	min-height: 0;
	margin: 4px 0 0 !important;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

/* --- News article: the News page card -------------------- */

.fw-split__card--news .fw-news-list__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--fw-white);
	border-radius: var(--fw-radius) 30px var(--fw-radius) var(--fw-radius);
	box-shadow: var(--fw-shadow-card);
}

.fw-split__card--news .fw-news-list__image {
	order: 1;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 440 / 187;
	overflow: hidden;
}

.fw-split__card--news .fw-news-list__image img,
.fw-split__card--news .fw-news-list__image-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fw-split__card--news .fw-news-list__image-ph { background-color: #d9d9d9; }

.fw-split__card--news .fw-news-list__members {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	height: 27px;
	padding: 0 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-navy);
	color: var(--fw-white);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-medium);
	line-height: 16px;
}

.fw-split__card--news .fw-news-list__meta { display: contents; }

.fw-split__card--news .fw-news-list__date {
	order: 2;
	margin: 26.5px 21px 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.fw-split__card--news .fw-news-list__head {
	order: 3;
	display: flex;
	margin: 13.5px 21px 0;
}

.fw-split__card--news .fw-news-list__title {
	margin: 0;
	font-size: 20px;
	font-weight: var(--fw-weight-medium);
	line-height: 30px;
	color: var(--fw-navy);
}

.fw-split__card--news .fw-news-list__title a { color: inherit; text-decoration: none; }
.fw-split__card--news .fw-news-list__title a:hover { text-decoration: underline; }
.fw-split__card--news .fw-news-list__arrow { display: none; }

.fw-split__card--news .fw-news-list__excerpt {
	order: 4;
	margin: 13.5px 21px 0;
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 28px;
	color: var(--fw-navy);
}

.fw-split__card--news .fw-news-list__badge {
	order: 5;
	margin: 30px 21px 21px;
	padding: 8px 10px;
	border-radius: var(--fw-radius);
	background-color: var(--fw-green);
	color: var(--fw-navy);
	font-size: var(--fw-body-size);
	font-weight: var(--fw-weight-light);
	line-height: 11px;
}

/* 2026-10-20 50/50 Block: fluid columns between 769px and the full width (Owen).
   The columns were the design's fixed 680px + 80px gap + 560px (tokens in
   fw-overrides.css), so any viewport under about 1360px pushed the text pane
   past the right edge. Same 680:560 proportion as fractions, so 1360px and up
   is unchanged; under 1100px the gap tightens. 768px and below still stacks. */
@media (min-width: 769px) {
	.fw-split--image-left .fw-split__inner {
		grid-template-columns: minmax(0, 680fr) minmax(0, 560fr);
	}
	.fw-split--image-right .fw-split__inner {
		grid-template-columns: minmax(0, 560fr) minmax(0, 680fr);
	}
}
@media (min-width: 769px) and (max-width: 1100px) {
	.fw-split { --fw-split-inner-gap: 48px; }
}

/* 2026-10-20 Responsive sweep: fluid grids between 769px and 1400px (Owen).
   These grids were built to the 1440 frame in fixed pixels (680 + 320 + 320,
   4 x 320, a 1400px column), so every viewport under about 1440 pushed the
   right hand cards past the edge. Each keeps the design's proportions as
   fractions, so 1440 and up is unchanged, and steps down to two columns where
   the cards would get too narrow. 768px and below already stacks.
   body[class] lifts these over the page-id rules, which carry !important. */

/* Latest news and the home events feed: 680 / 320 / 320 as fractions. */
@media (min-width: 1025px) {
	body[class] .fw-news__track,
	body[class] .ibia-events__cards.is-style-ibia-home-feed {
		grid-template-columns: minmax(0, 680fr) minmax(0, 320fr) minmax(0, 320fr);
	}
}
/* 769 to 1024: feature across the top, two below (the events feed already
   does this from its own 1024 rule). */
@media (min-width: 769px) and (max-width: 1024px) {
	body[class] .fw-news__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body[class] .fw-news__track > .fw-news-card:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* IMO committees: four 320 cards; two per row under 1101. */
@media (min-width: 769px) {
	body[class].page-id-203 .fw-icons__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	body[class].page-id-203 .fw-icons__grid > * { width: auto !important; min-width: 0 !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
	body[class].page-id-203 .fw-icons__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* World Bunkering resources: the 1400 column becomes "up to 1400". */
@media (min-width: 769px) {
	body[class].page-id-218 :is(.entry-content, .fw-banner__inner) > .ibia-res__main {
		width: auto;
		max-width: 1400px;
	}
	body[class].page-id-218 .ibia-res__grid {
		width: calc(100% + 28px) !important;
	}
	body[class].page-id-218 .ibia-arrows { width: auto; }
}
@media (min-width: 1101px) {
	body[class].page-id-218 .ibia-res__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		grid-auto-columns: minmax(0, 1fr) !important;
	}
}

/* 2026-10-20 Responsive sweep, part 2.
   World Bunkering resources: the grid's 14px shadow padding sits outside its
   width, so the width is the column's 100%, not 100% + 28px. */
@media (min-width: 769px) {
	body[class].page-id-218 .ibia-res__grid { width: 100% !important; }
}

/* World Bunkering hero covers fan, 1025px and up (side by side with the text).
   The fan is a 559 x 496 drawing with every cover placed in pixels, in a
   column that shrinks to about 400px at 1100, so it ran past the edge. The
   fan is now a size container and the covers are placed in cqw, the same
   numbers divided by 5.59, so at a full 559px it is identical and below that
   the whole fan scales down as one. */
@media (min-width: 1025px) {
	body[class].page-id-218 .ibia-wb-hero {
		grid-template-columns: minmax(0, 560fr) minmax(0, 561fr);
	}
	body[class].page-id-218 .ibia-wb-hero .ibia-wb-fan {
		container-type: inline-size;
		width: 100% !important;
		max-width: 559px;
		height: auto !important;
		aspect-ratio: 559 / 496;
	}
	body[class].page-id-218 .ibia-wb-hero .ibia-wb-fan__stage { width: 100% !important; height: 100% !important; }
	body[class].page-id-218 .ibia-wb-hero .ibia-wb-fan__item--1 { left: 0 !important; top: 4.560cqw !important; width: 60.546cqw !important; height: 85.627cqw !important; }
	body[class].page-id-218 .ibia-wb-hero .ibia-wb-fan__item--3 { left: 17.168cqw !important; top: 5.846cqw !important; width: 55.501cqw !important; height: 78.491cqw !important; }
	body[class].page-id-218 .ibia-wb-hero .ibia-wb-fan__item--2 { left: 28.624cqw !important; top: 10.152cqw !important; width: 55.476cqw !important; height: 78.458cqw !important; }
}
@media (min-width: 1025px) and (max-width: 1320px) {
	body[class].page-id-218 .ibia-wb-hero { column-gap: 60px; }
}

/* 2026-10-20 Responsive sweep, part 3. World Bunkering resources is a
   scrolling row, so its columns are implicit: size those, not a template, or
   every card squeezes into view. Four in view from 1101, two from 769. */
@media (min-width: 1101px) {
	body[class].page-id-218 .ibia-res__grid {
		grid-template-columns: none !important;
		grid-auto-columns: calc((100% - 120px) / 4) !important;
	}
}
@media (min-width: 769px) and (max-width: 1100px) {
	body[class].page-id-218 .ibia-res__grid {
		grid-template-columns: none !important;
		grid-auto-columns: calc((100% - 40px) / 2) !important;
	}
}

/* 2026-10-20 Responsive sweep, part 4. The 9 Oct floor gutter for full bleed
   bands stopped at 782px, but the inner is capped at 1400 and centred, so it
   only clears the edges from 1440. Between 783 and 1439 the home events band
   (heading, button, cards) sat at x=0. Same floor, same low specificity, only
   on full bleed bands that do not already carry the global padding. */
@media (min-width: 783px) and (max-width: 1439px) {
	body[class] .fw-banner.alignfull:not(.fw-banner--container) > .fw-banner__inner {
		padding-inline: 20px;
	}
}

/* 2026-10-20 Responsive sweep, part 5.
   Member map: min-height 420 with aspect-ratio 1400/767 makes the stage at
   least 767px wide, so a column under that (769 to about 806) overflowed. The
   768 rule already capped it; this caps it at every width. */
body[class] .ibia-mem-map__stage { max-width: 100%; }

/* Featured news card: the image is a fixed 290px tall inside a frame that
   scales with the card (680 / 290), so at tablet widths the frame grew taller
   than the picture and left a blank strip above the date. Fill the frame
   below the 1440 canvas; 1440 and up is unchanged. */
@media (max-width: 1439px) {
	body[class] .fw-news__track > .fw-news-card:first-child .fw-news-card__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* World Bunkering hero: three buttons in a row did not fit the text column
   under about 1300px, and the last ran across the covers. Let them wrap. */
body[class] .ibia-wb-hero .wp-block-buttons { flex-wrap: wrap; row-gap: 16px; }

/* 2026-10-20 Responsive sweep, part 6. Same fault as the home events band:
   a full bleed wrapper whose inner is capped at 1400 and centred with no side
   padding, so below 1440 the content sat on the glass. Single event pages had
   a gutter only to 782; the event listings (upcoming, training, galleries)
   only once they stack at 1100. */
@media (min-width: 783px) and (max-width: 1439px) {
	body[class] .ibia-ev-single__inner { padding-inline: 20px; }
}
@media (min-width: 1101px) and (max-width: 1439px) {
	body[class] .ibia-event-listing > .ibia-events__layout { padding-inline: 20px; }
}

/* 2026-10-20 Responsive sweep, part 7.
   World Bunkering hero buttons: the core flex layout's nowrap outranks a plain
   rule, so the wrap from part 5 never applied. */
body[class] .ibia-wb-hero .wp-block-buttons { flex-wrap: wrap !important; }

/* Event listings: the section title is the listing's other uncapped child, so
   it took the same gutter as the layout from part 6. */
@media (min-width: 1101px) and (max-width: 1439px) {
	body[class] .ibia-event-listing > .ibia-events__title { padding-inline: 20px; }
}

/* Featured event card: pinned to the frame's 280px with overflow hidden, which
   only fits its text at full width; at 1200 the body needed 378 and the title
   was cut off. The phone rule releases it from 820 down; this releases it
   from 821 to 1439, keeping 280 as the floor. */
@media (min-width: 821px) and (max-width: 1439px) {
	body[class] .ibia-events__cards:not(.is-style-ibia-home-feed) > .ibia-event.ibia-event--featured {
		height: auto !important;
		min-height: 280px !important;
	}
}

/* 2026-10-20 Responsive sweep, part 8. Galleries is the same listing under
   its own block class, so it takes the part 6 and 7 gutters too. */
@media (min-width: 1101px) and (max-width: 1439px) {
	body[class] .ibia-gallery-listing > .ibia-events__layout,
	body[class] .ibia-gallery-listing > .ibia-events__title { padding-inline: 20px; }
}

/* 2026-10-20 Responsive sweep, part 9.
   Footer: four fixed columns totalling 1400px (!important for the desktop
   match), released only once it stacks at 1100. From 1101 to 1439 the logo
   sat at x=0 and Join IBIA / Follow Us ran up to 121px off the right. Same
   proportions as fractions, plus the 20px gutter. */
@media (min-width: 1101px) and (max-width: 1439px) {
	body[class] .ibia-footer__inner {
		grid-template-columns: minmax(0, 361fr) minmax(0, 266fr) minmax(0, 532fr) minmax(0, 241fr) !important;
		padding-inline: 20px !important;
	}
}

/* Card titles never clip. A title pasted with non-breaking spaces between
   its words (31 imported posts and events had them, fixed in the data on
   20 Oct, testing sheet r15) cannot wrap, and the card cut it off. */
body[class] :is(.fw-news-list__card, .fw-news-card, .ibia-event, .ibia-res-card) :is(h2, h3, h4, [class*="__title"]) {
	overflow-wrap: anywhere;
}

/* 2026-10-20 Responsive sweep, part 10. Inside the fluid footer (part 9) the
   bulletin fields are still pinned to the frame (210 + 33 + 210, 453; inputs
   the same) with !important, so from 1101 to 1439 they ran into the Join /
   Contact column; the five social icons (no wrap) ran off the right. The
   fields share the column instead; the icons wrap. */
@media (min-width: 1101px) and (max-width: 1439px) {
	body[class] .ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col-6 {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
	}
	body[class] .ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-col-12 {
		flex: 1 1 100% !important;
		width: auto !important;
		min-width: 0;
	}
	body[class] .ibia-footer .ibia-bulletin .forminator-ui.forminator-custom-form .forminator-input {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	body[class] .ibia-footer__social { flex-wrap: wrap; row-gap: 12px; }
}

/* =========================================================
   2026-10-20 External testing sheet fixes (Owen)
   ========================================================= */

/* r45 Board photos: no "+" badge; pressing the photo (or anywhere on the
   card) opens the biography. The Read Biography label is stretched over the
   whole card and drawn as nothing; its text stays for screen readers. */
body[class] .fw-person:has(> .fw-person__body > .fw-person__bio-btn) { position: relative; cursor: pointer; }
body[class] .fw-person:has(> .fw-person__body > .fw-person__bio-btn) > .fw-person__body { position: static !important; }
body[class] .fw-person__bio-btn {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	margin: 0 !important;
	border-radius: var(--fw-radius);
	background: transparent !important;
	z-index: 2;
}
body[class] .fw-person__bio-btn::before,
body[class] .fw-person__bio-btn::after { content: none !important; }
body[class] .fw-person__bio-btn > span {
	display: block !important;
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body[class] .fw-person__bio-btn:focus-visible { outline: 2px solid var(--fw-turquoise); outline-offset: 4px; }
body[class] .fw-person:has(.fw-person__bio-btn) .fw-person__photo img { transition: transform 0.3s ease; }
body[class] .fw-person:has(.fw-person__bio-btn):hover .fw-person__photo img { transform: scale(1.04); }

/* r47 Leadership Legacy, Management: the present Executive Director reads
   name first, then title, like the rail below it. The Chairs block keeps its
   "Present" label first. */
body[class] #management + .ibia-legacy__current .fw-person__role { order: 0; margin: 4px 0 0 !important; }
body[class] #management + .ibia-legacy__current .fw-person__name { margin-top: 16px !important; }

/* r27 Membership tiers: benefits as bullet points, as on the current site. */
body[class] .is-style-ibia-tier ul { list-style: disc outside; padding-left: 1.25em; }
body[class] .is-style-ibia-tier ul > li { list-style: inherit; }

/* r27 follow up: bullets read against centred text sat far from the words; the lists are left aligned. */
body[class] .is-style-ibia-tier ul > li { text-align: left; }

/* r3 / r58 The top bar stays visible while you scroll (Owen, 20 Oct).
   The header is a direct child of <body>, whose overflow-x is clip (not
   hidden), so position: sticky holds for the whole page. It sits under the
   WordPress admin bar when that shows: 32px, 46px at 782 and below, and from
   600 down the bar scrolls away with the page, so nothing is reserved. */
body { --ibia-adminbar: 0px; }
body.admin-bar { --ibia-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --ibia-adminbar: 46px; } }
@media (max-width: 600px) { body.admin-bar { --ibia-adminbar: 0px; } }
body { --ibia-stick: calc(var(--ibia-adminbar, 0px) + var(--fw-header-height, 96px)); }

body[class] .fw-header {
	position: sticky;
	top: var(--ibia-adminbar, 0px);
	z-index: 100;
}

/* Jump links (#membership-tiers, #management, the regional boards) land
   below the header rather than under it. */
html { scroll-padding-top: calc(var(--ibia-stick) + 16px); }
body.admin-bar { scroll-padding-top: calc(var(--ibia-stick) + 16px); }

/* Everything that already stuck to the top of the window (13 Oct) now
   sticks to the bottom of the header instead. */
@media (min-width: 1101px) {
	body[class] .ibia-filters {
		top: calc(24px + var(--ibia-stick));
		max-height: calc(100vh - 48px - var(--ibia-stick));
	}
	body[class] .ibia-res__topbar,
	body[class] .ibia-news-bar { top: var(--ibia-stick); }
}
body[class] .ibia-region__chair { top: calc(var(--ibia-stick) + 20px); }

/* Jump links, take two: --ibia-stick lives on <body>, so html scroll-padding could not read it
   and was dropped. Each jump target carries the offset itself instead. */
body[class] [id] { scroll-margin-top: calc(var(--ibia-stick) + 16px); }

/* r49 Milestones: one milestone in the centre is the current one. Only its
   dot pulses and its year and text are larger; the others are still and at
   their normal size (the script marks it .is-current each step). The vertical
   timeline below 769 keeps its old look. Jumps across the loop seam switch
   the class with transitions off, so nothing flickers. */
@media (min-width: 769px) {
	body[class] .fw-timeline__item::before { animation: none; }
	body[class] .fw-timeline__item.is-current::before { animation: ibia-timeline-pulse 2.8s ease-out infinite; }
	body[class] .fw-timeline__year,
	body[class] .fw-timeline__content p { transition: font-size 0.45s ease, line-height 0.45s ease; }
	body[class] .fw-timeline__item.is-current .fw-timeline__year { font-size: 38px; }
	body[class] .fw-timeline__item.is-current .fw-timeline__content p { font-size: 18px; line-height: 30px; }
	body[class] .fw-timeline--jump .fw-timeline__year,
	body[class] .fw-timeline--jump .fw-timeline__content p { transition: none !important; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
	body[class] .fw-timeline__item.is-current::before { animation: none; }
	body[class] .fw-timeline__year,
	body[class] .fw-timeline__content p { transition: none; }
}

/* 2026-10-22 r61 Home hero video: the IBIA logo in its top right was cut off.
   The old file had black bars baked in (1920 x 1080 frame, 836 rows of
   picture), so the video was overscanned to 130% to push the bars out, which
   also cropped the top of the picture by up to 78px. Attachment 5481 is the
   same film re-encoded at 1920 x 836 with the bars removed (no audio, it only
   ever plays muted), so it simply fills the hero. Anchored to the top, so any
   vertical crop comes off the bottom, and to the right edge so the
   logo in the corner clears the edge at laptop widths. */
body[class] .ibia-hero__video {
	top: 0;
	height: 100%;
	transform: none;
	object-position: right top;
}

/* 2026-10-22 r9 People: a visible cue that a person opens a biography, and
   working contact links. The whole card already opens the bio (r45 removed the
   "+" from the photo at IBIA's request), so the cue is a quiet text line under
   the details rather than a badge on the picture. The LinkedIn / email icons
   sit above the card wide bio control so they stay clickable. */
body[class] .fw-person:has(.fw-person__bio-btn) > .fw-person__body::after {
	content: "Read biography \2192";
	display: block;
	margin-top: 12px;
	font-size: var(--fw-small-size, 14px);
	font-weight: var(--fw-weight-medium, 500);
	line-height: 1.4;
	color: var(--fw-green-dark, #658138);
	order: 99;
}
body[class] .fw-person:has(.fw-person__bio-btn):hover > .fw-person__body::after { text-decoration: underline; }
body[class] .fw-person .fw-person__social { position: relative; z-index: 3; }
body[class] .fw-person__modal-actions { margin: 24px 0 0; }
body[class] .fw-person__modal-actions .wp-block-button__link {
	display: inline-block;
	background-color: var(--fw-navy);
	color: var(--fw-white);
	border-radius: var(--fw-radius);
	padding: 10px 24px;
	text-decoration: none;
}
body[class] .fw-person__modal-actions .wp-block-button__link:hover,
body[class] .fw-person__modal-actions .wp-block-button__link:focus-visible { background-color: var(--fw-green); color: var(--fw-navy); }

/* 2026-10-22 Latest News "View All" button. Its top: 34px (25px on IMO) was
   measured for a head holding the eyebrow AND the heading. With the eyebrow
   removed (r40, r52) the head is the heading alone, so the button fell 34px and
   sat on the cards. Without an eyebrow it is centred on the heading instead.
   Desktop only: from 782 down it already stacks under the heading. */
@media (min-width: 783px) {
	body[class] .fw-news__head:not(:has(.fw-news__eyebrow)) .fw-news__cta {
		top: 50%;
		transform: translateY(-50%);
	}
}

/* Same button on a phone (home): stacked under the heading it sat flush on the cards. IMO already has 30px. */
@media (max-width: 782px) {
	body.home .fw-news--featured-grid .fw-news__cta { margin-bottom: 24px !important; }
}

/* 2026-10-26 Single event sidebar under the sticky header (Owen, screenshot).
   ibia-event-single.css sticks it at 24px (56px with the admin bar), which was
   right before the header became sticky on 20 Oct; it now slid under it. Same
   stick point as the listing filters: 24px below the header. */
body[class] .ibia-ev-single__side { top: calc(var(--ibia-stick, 96px) + 24px); }

/* 2026-10-26 50/50 text not centred on the image on tablet (Owen, screenshot).
   The page rules give the text column a desktop top padding (34 to 161px)
   measured off the 1440 frame, so it lines up with a full size image. Below
   1440 the image shrinks with the fluid columns (20 Oct) but the padding does
   not, and the text sat 40 to 99px low. The grid already centres its items,
   so without the padding the text centres on the image. 1440 and up unchanged. */
@media (min-width: 769px) and (max-width: 1439px) {
	body[class] .fw-split .fw-split__inner > .fw-split__content {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		align-self: center !important;
	}
}

/* Same range: when the text is taller than the image (around 900px) centre the image on the text instead. */
@media (min-width: 769px) and (max-width: 1439px) {
	body[class] .fw-split .fw-split__inner > .fw-split__media { align-self: center !important; }
}

/* 2026-10-26 Milestones: a milestone that is not wholly inside the frame is
   hidden (the script marks it .is-offstage for where the track will stop), so
   no half cut text or images sit at either edge. Fades with the slide. */
@media (min-width: 769px) {
	body[class] .fw-timeline__item > * { transition: opacity 0.45s ease, visibility 0.45s; }
	body[class] .fw-timeline__item.is-offstage > * { opacity: 0; visibility: hidden; }
	body[class] .fw-timeline--jump .fw-timeline__item > * { transition: none !important; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
	body[class] .fw-timeline__item > * { transition: none; }
}

/* Same: below the full width the page's fixed 388px entries left room for the
   centre one only (its neighbours were always cut, so now hidden). Size them
   so three fit the frame: centre plus one either side, all whole. */
@media (min-width: 769px) and (max-width: 1439px) {
	body[class].page-id-179 .fw-timeline__item {
		flex: 0 0 min(388px, calc((100vw - 40px) / 3)) !important;
		width: min(388px, calc((100vw - 40px) / 3)) !important;
	}
	body[class].page-id-179 .fw-timeline__content { width: auto !important; max-width: 100% !important; padding-inline: 12px; box-sizing: border-box; }
}


/* 2026-10-27 r10 logo slider: when ibia-logo-ease.js is running it eases the
   strip to a stop on hover, so the block's instant CSS pause is switched off.
   Compositor hint for a long translating strip. */
html.ibia-ls-eased .fw-ls:hover .fw-ls__row { animation-play-state: running; }
body[class] .fw-ls__row { will-change: transform; }

/* r10: Corporate Members now come first, so the closing 60px moves to Member Associations (now last); the gap between them is as before. */
body.home .entry-content > .is-style-ibia-logos-corporate { padding-bottom: 0; }
body.home .entry-content > .is-style-ibia-logos { padding-bottom: var(--fw-space-2xl); }

/* 2026-10-29 (IBIA r28): Corporate Membership page. A tiers band holding one
   card centres it, and an intro paragraph under the heading keeps a reading width. */
.fw-banner.is-style-ibia-tiers .wp-block-columns:has(> .wp-block-column:only-child) { grid-template-columns: minmax(0, 640px); }
.fw-banner.is-style-ibia-tiers > .fw-banner__inner > p:not(.is-style-ibia-eyebrow) { max-width: 880px; margin-inline: auto; }

/* 2026-10-29 (IBIA): a shaded full width band straight after the page hero sits flush
   against it; the usual 80px gap above a band otherwise shows as an empty white strip. */
.fw-page-hero + .fw-banner.alignfull:not(.fw-banner--white) { margin-top: 0 !important; }

/* 2026-10-30 (IBIA r66): app store badges in the footer's first column. */
.ibia-footer__app { margin-top: 24px; }
.ibia-footer__app .ibia-footer__heading { margin-bottom: 12px; }
.ibia-footer__app-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ibia-footer__app-badges a { display: block; line-height: 0; }
.ibia-footer__app-badges img { height: 40px; width: auto; }

/* 2026-10-30: 404 page body under the page hero, on the page container. */
.ibia-404 { max-width: 1400px; margin: var(--fw-space-xl) auto var(--fw-space-2xl, 80px); padding-inline: 20px; box-sizing: border-box; }

/* 2026-10-30: news and event bodies are blocks now (converted from the old site's
   HTML). Their article containers are not WordPress layout containers, so an
   aligned image block got no float. Float it, with WordPress's own margins, as
   the old HTML align attribute did. */
:is(.ibia-article__body, .ibia-ev-single__body) > .wp-block-image.alignleft { float: left; margin: .5em 1em .5em 0; }
:is(.ibia-article__body, .ibia-ev-single__body) > .wp-block-image.alignright { float: right; margin: .5em 0 .5em 1em; }
:is(.ibia-article__body, .ibia-ev-single__body) > .wp-block-image.aligncenter { display: table; margin-inline: auto; }
:is(.ibia-article__body, .ibia-ev-single__body) > .wp-block-image:is(.alignleft, .alignright) img { max-width: 100%; height: auto; }
:is(.ibia-article__body, .ibia-ev-single__body)::after { content: ""; display: table; clear: both; }