/*
 * Layout polish for Bluewater Logitrade.
 *
 * Scope rule for this file: it may only do things Elementor's own controls
 * cannot — hover lift on a card, a gradient mesh behind the hero, sticky
 * behaviour. Anything the client might reasonably want to change (colour,
 * text, spacing, order) stays in Elementor so it is editable from wp-admin.
 *
 * Classes are applied via each widget's own "CSS Classes" field, so they show
 * up in the editor rather than being invisible magic.
 */

/* ---------------------------------------------------------------
   Self-hosted fonts
   Libre Caslon Condensed isn't a font Elementor's own Google Fonts
   list recognises, so it was silently falling back to the browser's
   default serif — self-hosting the client-supplied files (OFL-licensed,
   see assets/fonts/libre-caslon-condensed/OFL.txt) instead of counting on
   Elementor to fetch it. Weights actually used by the design system only —
   this family also ships Medium/SemiBold + italics, not loaded here.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('fonts/libre-caslon-condensed/LibreCaslonCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('fonts/libre-caslon-condensed/LibreCaslonCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('fonts/libre-caslon-condensed/LibreCaslonCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('fonts/libre-caslon-condensed/LibreCaslonCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('fonts/libre-caslon-condensed/LibreCaslonCondensed-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
 * Every gap between a heading/paragraph and the element below it is already
 * controlled explicitly via each widget's own Elementor margin setting — but
 * the browser's default `<p>` margin (about 1em top+bottom) was stacking on
 * top of that everywhere a text-editor widget followed a heading, silently
 * doubling every such gap site-wide. One reset here instead of chasing it
 * section by section.
 */
.elementor-widget-text-editor p {
  margin: 0;
}

/* Highlighted phrase inside a large heading — the pill-background emphasis from the reference's own intro headline (Why Us section). */
.bw-highlight {
  background: var(--bw-line);
  border-radius: 8px;
  padding: 2px 10px;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*
 * The About card's text column stretches to match the taller photo column
 * by default (Elementor container children default to align-self:stretch),
 * leaving its shorter content sitting at the top with dead space dumped
 * below the button. Elementor's own per-child "Align Self" setting saves
 * correctly but doesn't produce CSS on this version, so it's forced here.
 */
.bw-about-text {
  align-self: center !important;
  height: auto !important;
}

/*
 * No text-transform on headings, deliberately. CSS `capitalize` uppercases
 * the first letter of every word mechanically — "Handled End To End" — which
 * is not real grammar (small words like "to"/"and"/"with" should stay
 * lowercase in proper title case, and this copy is written as sentence case
 * anyway: "Global trade, handled end to end."). The authored copy already
 * has correct capitalization; the fix is to leave it alone, not transform it.
 */

:root {
  --bw-navy: #161a3f;
  --bw-blue: #6b6656;
  --bw-cyan: #d5e617;
  --bw-amber: #d5e617;
  --bw-ink: #161a3f;
  --bw-muted: #4a544f;
  --bw-line: #dedcd6;
  --bw-surface-alt: #eceae1;
}

/*
 * Live homepage palette (youzonelongevity.com reference): deep navy headings,
 * gold accent in place of the lime, warm cream surfaces in place of the blue.
 *
 * Every per-widget colour lives in the page's own Elementor data and is
 * editable from wp-admin — this block only covers the handful of colours that
 * are CSS-only (the arrow button, badges, card shells), which have no widget
 * to edit. Scoped to .page-id-6 on purpose: the duplicate homepage draft
 * (page 718) keeps the old palette untouched.
 */
.page-id-6 {
  /* Two different navies on purpose, matching the reference: #040D24 is the
     dark *fill* (deep-navy), #0A1F4A is the *heading* colour used on light
     sections. Collapsing them into one made the dark blocks too light. */
  --bw-navy: #040d24;
  --bw-ink: #0a1f4a;
  --bw-cyan: #c9a24a;
  --bw-amber: #c9a24a;
  --bw-muted: #3d4a5c;
  --bw-line: #e8e2d5;
  --bw-surface-alt: #f4f1e9;
  /* This selector is the <body>, so it also carries the page background. */
  background: #fbfaf7;
}

.page-id-6 .bw-strip-card,
.page-id-6 .bw-carousel-card {
  background: #fbfaf7;
}

/*
 * Decorative gold wash at the top of a section — lifted verbatim from the
 * reference's own section decoration. Defined once here because Elementor's
 * gradient control cannot express an ellipse with a size and position; which
 * sections get it is still chosen from wp-admin, by adding the `bw-glow`
 * class to the section's CSS Classes field.
 */
/*
 * Blurs the photo *behind* a container's overlay. Elementor's overlay has a
 * colour and opacity control but no backdrop-filter, so the blur is added to
 * the overlay pseudo-element it already generates — the colour itself stays
 * editable in wp-admin.
 */
.bw-hero-blur::before,
.bw-hero-blur > .elementor-background-video-container::before,
.bw-hero-blur > .e-con-inner > .elementor-background-video-container::before {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/*
 * Card titles reserve two lines. Without this a one-line title ("Agro
 * Products") pulls its subtitle and body up while a two-line neighbour
 * ("Metals & Industrial Products") pushes them down, so nothing lines up
 * across the row.
 */
.bw-cat-card h3,
.bw-cat-card .elementor-heading-title {
  min-height: 2.3em; /* 2 lines at the title's 1.15 line-height */
}

/*
 * Equal-height cards: stretch every card to the tallest in the row, and push
 * the "Read More" link to the bottom of each so the links sit on one line
 * regardless of how long a description runs.
 */
.bw-cat-card {
  display: flex !important;
  flex-direction: column;
  /* `align-self: stretch`, not `height: 100%`. The row wraps, and in a
     wrapping flex container a percentage height resolves against the whole
     container rather than the line the card is on — which left each card at
     its own content height and gave the auto margin under "Read More"
     nothing to take up. */
  height: auto;
  align-self: stretch;
  position: relative;
}

/*
 * Whole card clickable, using the "Read More" link it already has rather
 * than wrapping the card in an <a>. Wrapping would make every heading and
 * paragraph inside inherit link colour and underline; this stretches the
 * existing anchor's hit area over the card and leaves all the text styling
 * exactly as authored.
 */
.bw-cat-card .bw-cat-more a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The photo sits above the stretched hit area otherwise, so hover on the
   image would not register as a card hover. */
.bw-cat-card > * {
  position: relative;
}

.bw-cat-card > .bw-cat-more,
.bw-cat-card > .elementor-widget-heading:last-child {
  margin-top: auto !important;
}

/*
 * Arrow after "Read More", like the reference's inline card link
 * (`inline-flex items-center gap-2` + a lucide arrow-right). Drawn as a
 * ::after so no widget has to be added to the page data, and it nudges
 * forward on hover the way the reference's does.
 */
.bw-cat-more .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bw-cat-more .elementor-heading-title::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8em;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-cat-card:hover .bw-cat-more .elementor-heading-title::after {
  transform: translateX(4px);
}

.bw-glow {
  position: relative;
  isolation: isolate;
}

/* ::after, not ::before — Elementor paints its own background overlay on
   ::before, so a glow declared there silently replaces the overlay. */
.bw-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(201, 162, 74, 0.1), transparent 65%);
}

/*
 * CTA card's own wash — the reference's dark CTA uses a wider, stronger
 * radial at half opacity over the navy:
 *   radial-gradient(900px 500px, rgba(201,162,74,0.12), transparent 60%)
 *   on a layer set to opacity .5
 */
.bw-cta-glow {
  position: relative;
  isolation: isolate;
}

/* Also ::after — this one was overwriting the CTA's dark overlay, which is
   why the copy was sitting unreadable on the bright container photo. */
.bw-cta-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  border-radius: inherit;
  background: radial-gradient(900px 500px, rgba(201, 162, 74, 0.12), transparent 60%);
}

/*
 * Header and footer are shared templates (posts 38 and 39), so recolouring
 * them in Elementor would change the duplicate homepage's chrome too. Their
 * blue band is overridden here instead, scoped to the live page only.
 * Editable from wp-admin once the copy is retired — at that point set the
 * colour on the templates themselves and delete these two rules.
 */
/*
 * Header sits ON the hero video rather than above it.
 *
 * The hero is pulled up by exactly the header's height instead of taking the
 * header out of flow with position:absolute — absolute would nest the sticky
 * header inside a zero-height box and kill the sticky behaviour on scroll.
 * This way the band goes transparent, the hero starts at the very top of the
 * viewport, and the header still sticks (its white pill keeps the nav legible
 * over both the video and the page below).
 */
/*
 * Sticky header, like the reference.
 *
 * `position: sticky` could never work here: the header template's wrapper
 * (.elementor-38) is only ~103px tall, and a sticky element is bounded by
 * its own parent — so it unstuck the moment that wrapper scrolled past.
 * `fixed` takes it out of that box entirely. The hero is already pulled up
 * underneath it, so nothing shifts.
 */
/* ==========================================================================
   Homepage header — clear over the hero, solid once scrolled
   --------------------------------------------------------------------------
   The hero is a full-bleed video, so at rest the bar sits on it with nothing
   behind it and everything in it drawn white. As soon as the page moves, the
   bar takes the site's own surface and the mark returns to its real colour —
   white artwork on a white bar would vanish.
   ========================================================================== */
.page-id-6 .bw-header {
  background-color: transparent !important;
}

.page-id-6 .bw-head-logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-id-6 .bw-offices-button:not(:hover):not(:focus) {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.page-id-6 .bw-offices-chevron {
  border-color: #ffffff;
}

/* scrolled: the site's surface behind the bar, and the mark as drawn */
.page-id-6.bw-scrolled .bw-header {
  background-color: #fbfaf7 !important;
}

.page-id-6.bw-scrolled .bw-head-logo img {
  filter: none;
}

.page-id-6.bw-scrolled .bw-offices-button:not(:hover):not(:focus) {
  background: #fbfaf7 !important;
  border-color: #e8e2d5 !important;
  color: #0a1f4a !important;
}

.page-id-6.bw-scrolled .bw-offices-chevron {
  border-color: #4a5670;
}

/*
 * Scrolled state (body.bw-scrolled, set in layout.js).
 *
 * The logo and CTA deliberately do NOT slide sideways here. That slide only
 * existed to pull them out to the top bar's edges, and it is now redundant:
 * the nav pill and the top bar were given one shared geometry (same
 * max-width, centring and 10px inset), so both rows already start and end on
 * the same x at every width. Re-adding a translate would push them back OUT
 * of alignment, not into it.
 *
 * What still animates on scroll is the header's own chrome — background,
 * dividers and vertical padding — handled below.
 */

/*
 * Flat fill plus a hairline rule, exactly how the reference separates its
 * scrolled bar from the page: `border-b border-[rgba(255,255,255,0.06)]`,
 * which its own light-mode rule remaps to rgba(0,0,0,0.08). No drop shadow.
 *
 * The border is declared transparent at rest rather than added on scroll, so
 * only its colour animates — adding a border later would change the header's
 * height by 1px and nudge the whole page.
 */
.page-id-6 .bw-header {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}

.page-id-6.bw-scrolled .bw-header {
  background-color: #fbfaf7 !important;
  /* rule above AND below, so the bar reads as its own band between the
     top bar and the page */
  border-top-color: rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: none !important;
  /* trimmed down once scrolled — the resting state can afford the height,
     a bar that follows you should not */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.page-id-6 .bw-header-pill {
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    padding 0.35s ease;
}


/*
 * The whole header template is fixed, not just the nav bar — the top bar is
 * a sibling of .bw-header, so fixing only the nav bar left the top bar
 * behind in normal flow and the nav then covered it.
 */
/*
 * The header stays put on every page, by two different means.
 *
 * On the front page the hero is meant to run up under the bar, so the header
 * template leaves the flow entirely and the hero's own top padding clears it.
 *
 * Everywhere else the header should keep its space, so it is made sticky — on
 * #masthead, not on the bar inside it. A sticky box only travels as far as its
 * own parent, and .bw-header's parent is just the bar, which is why an earlier
 * attempt there unstuck immediately. #masthead's parent is #page, which wraps
 * the whole document, so it sticks for the full scroll.
 */
.page-id-6 .elementor-38 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

body:not(.page-id-6) #masthead {
  position: sticky;
  top: 0;
  z-index: 999;
}

/*
 * No negative pull needed any more: the header template is `fixed`, so it is
 * out of normal flow and the hero already starts at the top of the viewport.
 * The hero's own top padding is what clears the header.
 */

/* ---------------------------------------------------------------
   Buttons
   Elementor's button widget has no lift-on-hover control, so the
   press-down-then-rise feel that makes a CTA feel clickable is added
   here — transform + shadow only, everything else stays editable.
   --------------------------------------------------------------- */
.bw-btn .elementor-button-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
 * The button itself is display:inline-block, so when min-height forces extra
 * room beyond the natural padding+content height (e.g. the muted/icon-less
 * skins), that slack collapses below the content instead of splitting evenly
 * above and below it — the text reads as sitting slightly high. Flexing the
 * button itself centers the content-wrapper regardless of how much slack
 * min-height adds.
 */
/* 44px is the header/footer size; page buttons override to 52px below. */
.bw-btn .elementor-button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease;
}

.bw-btn .elementor-button-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-btn .elementor-button:hover .elementor-button-icon {
  transform: translateX(4px);
}

/*
 * Primary button's arrow rides its own lime badge, not the whole button —
 * the reference keeps the button itself light/cream and only badges the
 * arrow. Elementor's button widget has no "icon has its own background"
 * control, so this is done against the icon wrapper directly. Measured
 * exactly off the reference: 40x40px, 16px radius — a rounded square, not
 * a full circle.
 */
.bw-btn-primary .elementor-button-icon,
.bw-btn-gold .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  /* Light badge on the gold button. #FBFAF7, not pure white, so it matches
     every other surface on the site. */
  background: #fbfaf7;
  margin-left: 4px;
}

.bw-btn-primary .elementor-button-icon i,
.bw-btn-primary .elementor-button-icon svg,
.bw-btn-gold .elementor-button-icon i,
.bw-btn-gold .elementor-button-icon svg {
  font-size: 1em; /* was 18px */
  width: 12px;
  height: 12px;
}

/*
 * The badge's arrow is always dark-on-lime, in every skin and at every
 * state — 'primary' sits the badge on a light pill so its fg colour (navy)
 * already matches, but 'primary-on-dark' starts with white button text
 * (transparent pill on a dark section), which would otherwise turn the
 * arrow white too since it inherits the button's text colour by default.
 */
/*
 * Page buttons run one step larger than the header/footer pair — scoped to
 * the page content so the sticky header stays compact.
 */
.elementor-6 .bw-btn .elementor-button {
  min-height: 52px;
}

.elementor-6 .bw-btn-primary .elementor-button-icon {
  width: 34px;
  height: 34px;
  border-radius: 13px;
}

/* Elementor renders this glyph as an <svg>, not an <i>, so it needs `fill`
   as well as `color` — targeting only `i` left the arrow white on the light
   badge, i.e. invisible. */
.bw-btn-primary .elementor-button-icon i,
.bw-btn-primary .elementor-button-icon svg,
.bw-btn-gold .elementor-button-icon i,
.bw-btn-gold .elementor-button-icon svg {
  color: var(--bw-navy);
  fill: var(--bw-navy);
}

/*
 * The on-dark variant has a NAVY badge, so its glyph must be white — navy on
 * navy is invisible. `svg` and `fill` are both required: Elementor renders
 * these glyphs as inline SVG, which ignores `color`. Targeting only `i` is
 * what left this arrow invisible.
 */
.bw-btn-primary-on-dark .elementor-button-icon i,
.bw-btn-primary-on-dark .elementor-button-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/*
 * Whole button inverts to navy on hover (set via hover_bg/hover_color in
 * lib.php) — the badge itself stays lime with a dark arrow so it keeps
 * popping against the now-dark fill, instead of flipping to navy and
 * disappearing into it.
 */
.bw-btn-primary .elementor-button:hover .elementor-button-icon {
  transform: none;
}

/*
 * primary-on-dark's own pill is lime — same colour as the shared badge
 * background — so without this the badge would blend straight into the
 * button and disappear. Navy badge (white arrow, set above) instead.
 */
.bw-btn-primary-on-dark .elementor-button-icon {
  background: var(--bw-navy);
}

/* ---------------------------------------------------------------
   Cards
   Elementor can give a container a shadow, but not a shadow that
   changes on hover along with a lift — that pairing is what makes a
   grid feel responsive to the cursor.
   --------------------------------------------------------------- */
/*
 * Equal-height cards.
 *
 * Elementor's container Height control only offers "fit to screen" (100vh),
 * which made every card a full screen tall. The flex column stretches to the
 * tallest sibling on its own; the card just has to fill the cell it lands in.
 */
.bw-card {
  height: 100%;
}

.bw-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
  will-change: transform;
}

.bw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -28px rgba(22, 26, 63, 0.45);
  border-color: rgba(22, 26, 63, 0.55) !important;
}

/* Hover accent rule removed: it wiped a gold-to-taupe gradient across the
   card's top edge, which sat outside the card's rounded corners and read as
   a stray line rather than an accent. */
.bw-card::before {
  content: none;
}

.bw-card:hover::before {
  width: 100%;
}

/* ---------------------------------------------------------------
   Hero
   A two-layer mesh: a wide navy-to-blue base with two soft radial
   blooms over it. Gradients this specific are painful to maintain
   through Elementor's gradient controls, and they never need editing.
   --------------------------------------------------------------- */
.bw-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 74% at 76% 12%, rgba(22, 26, 63, 0.3) 0%, rgba(22, 26, 63, 0) 62%),
    radial-gradient(46% 62% at 12% 84%, rgba(76, 76, 91, 0.55) 0%, rgba(76, 76, 91, 0) 68%);
  pointer-events: none;
}

/* Faint grid, so a flat navy fill reads as engineered rather than empty. */
.bw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(90% 70% at 50% 30%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Stat figures
   --------------------------------------------------------------- */
/*
 * The figures are written in the brand colours directly rather than through
 * --bw-ink and --bw-amber. Those two still hold the lime the site was
 * prototyped in on every page but the front one, which came out olive green.
 */
.bw-stat .elementor-heading-title {
  color: #c9a24a;
  background: none;
  -webkit-text-fill-color: #c9a24a;
}

/*
 * The navy-to-lime gradient above assumes a light panel behind it — the
 * navy end blends straight into a navy background instead. The dark stat
 * bar wants a flat lime fill, not a gradient clip.
 */
.bw-stat-dark .elementor-heading-title {
  background: none;
  -webkit-text-fill-color: #c9a24a;
}

/* ---------------------------------------------------------------
   Category highlight tiles (About section, "What We Trade")
   A hover lift, an arrow badge that pops in, and a description that only
   shows on hover — keeps the resting tile calm (index, tag, title only).
   Background stays a plain `cover` fit (no zoom-on-hover): a percentage
   background-size fights `cover` on these tall, narrow cards — width scales
   to the percentage but height defaults to `auto` off the image's own
   aspect ratio, falling short of the container's height, and with repeat
   not yet disabled that gap tiled the image a second time underneath.
   --------------------------------------------------------------- */
.bw-cat-tile {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-cat-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(22, 26, 63, 0.5);
}

.bw-cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 26, 63, 0) 30%, rgba(22, 26, 63, 0.55) 68%, rgba(22, 26, 63, 0.94) 100%);
  transition: background 0.4s ease;
  pointer-events: none;
}

.bw-cat-tile:hover::after {
  background: linear-gradient(180deg, rgba(22, 26, 63, 0.15) 0%, rgba(22, 26, 63, 0.6) 55%, rgba(22, 26, 63, 0.96) 100%);
}

.bw-cat-tile > * {
  position: relative;
  z-index: 1;
}

.bw-cat-index {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bw-cat-arrow {
  transform: scale(0.001);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.bw-cat-tile:hover .bw-cat-arrow {
  transform: scale(1);
  opacity: 1;
}

.bw-cat-arrow i {
  transform: rotate(-45deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-cat-tile:hover .bw-cat-arrow i {
  transform: rotate(0deg);
}

/*
 * `max-height: 0 -> 80px` used to drive this reveal, but max-height doesn't
 * interpolate the way height/opacity/transform do — the browser can't ease
 * it smoothly, so most of the visible change happens in a near-instant snap
 * rather than over the coded 0.35s. `grid-template-rows: 0fr -> 1fr` is the
 * actual smooth way to animate to an intrinsic (unknown) height: the `fr`
 * unit genuinely interpolates, and collapsing to 0fr also collapses the
 * description's own margin — no dead space between the title and
 * "Explore category" while it's hidden, which max-height:0 alone did not.
 */
.bw-cat-desc-wrap {
  display: grid;
  /* Bare `0fr` still lets the track grow to the item's min-content size
     (which includes its margin) — minmax(0, 0fr) forces a true 0px collapse. */
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-cat-tile:hover .bw-cat-desc-wrap {
  grid-template-rows: minmax(0, 1fr);
}

.bw-cat-desc {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bw-cat-tile:hover .bw-cat-desc {
  opacity: 1;
  transition-delay: 0.08s;
}

.bw-cat-explore {
  position: relative;
  padding-left: 30px;
}

.bw-cat-explore::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: #fff;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-cat-tile:hover .bw-cat-explore::before {
  width: 34px;
}

/* ---------------------------------------------------------------
   Card carousel
   Photo card with a label chip inset over its bottom edge, arrow
   buttons riding the track on either side — the dental-site reference
   card treatment. Plain scroll-snap, no slider plugin (see layout.js).
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Full-bleed photo strip — auto-scrolling marquee
   Edge-to-edge row, cards touching (no gap, no radius) — the reference's
   portrait-strip treatment right under its hero. Moves on its own via a
   plain CSS transform loop (the PHP renders the card list twice back to
   back so 0% -> -50% is a seamless loop, no visible jump), pauses on
   hover, and eases back up to speed on mouse-leave rather than resuming
   at full speed instantly.
   --------------------------------------------------------------- */
.bw-strip-wrap {
  position: relative;
  overflow: hidden;
}

.bw-strip-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 16px;
  /*
   * 100s, not 50.
   *
   * The strip carries two lines from each of the twelve categories, so the
   * track is twice the width it was when it held the categories alone. The
   * duration is the time to travel that width, so it doubles too — a card
   * then crosses the eye at exactly the pace it always did.
   */
  animation: bw-strip-marquee 100s linear infinite;
  /* Promote the track once, up front. Without this the browser keeps
     re-deciding whether to composite mid-animation, which is what made
     the strip stutter after it had been running a while. */
  will-change: transform;
  backface-visibility: hidden;
}

.bw-strip-wrap:hover .bw-strip-track {
  animation-play-state: paused;
}

@keyframes bw-strip-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.bw-strip-card {
  position: relative;
  /* Four across the viewport, gaps included. */
  flex: 0 0 calc(25vw - 20px) !important;
  min-width: 300px !important;
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: #f3f5ee;
  padding: 0;
  border-radius: 20px;
}

.bw-strip-photo {
  min-height: 420px;
  /* A single-value background-size (100%) only sets width — height falls
     back to auto, so any photo whose aspect ratio doesn't exactly match the
     card left uncovered strip(s) of height, and background-repeat's default
     ('repeat') tiled the image into them instead of leaving them blank. That
     read as the photo visibly repeating inside each card. `cover` sizes
     both axes off the container, and no-repeat is there as a second guard. */
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 14px;
  overflow: hidden;
  transition: 0.3s all;
}

/* Zoom-and-tilt on hover. The scale has to stay comfortably above the ~1.09
   a 5deg rotation needs to keep its corners outside the frame — at 1.2 the
   photo covers the card at every card width, so no bare corner shows. */
.bw-strip-card:hover .bw-strip-photo::before {
  transform: scale(1.12) rotate(2.5deg);
}

/*
 * Caption is its own frosted chip floating inside the card, not a dark scrim
 * fading over the photo — the scrim's legibility depended on whatever
 * happened to be behind it, so titles washed out over bright photos. The
 * near-opaque tint plus a blur keeps the title readable over every image
 * while still letting the photo show through underneath.
 */
/*
 * The chip is a fixed strip along the bottom of the card, so its contents have
 * to fit it rather than push through it. One line for the name, two for the
 * description — a category with a long name or a long line gets trimmed with an
 * ellipsis instead of spilling over the photograph.
 */
.bw-strip-caption h4,
.bw-strip-caption .elementor-heading-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Clear of the arrow badge in the chip's top-right corner, so the name
     runs out of room at the badge rather than under it. */
  padding-right: 35px;
}

.bw-strip-caption p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 18px se caption card ke niche se katta tha */
  font-size: 0.944em; /* was 17px */
  line-height: 1.45;
}
.bw-strip-caption {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  padding: 16px 18px;
  background: #ffffffeb;
  border-radius: 17px;
  width: auto;
}

@media (max-width: 1024px) {
  .bw-strip-card {
    flex-basis: 46vw !important;
  }
}

@media (max-width: 640px) {
  .bw-strip-card {
    flex-basis: 78vw !important;
  }
  .bw-strip-photo {
    min-height: 320px;
  }
}

.bw-carousel-wrap {
  position: relative;
}

.bw-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bw-carousel-track::-webkit-scrollbar {
  display: none;
}

/*
 * Card chrome is deliberately identical to .bw-strip-card — same shell,
 * photo treatment, hover zoom-and-tilt and frosted caption chip. Only the
 * track sizing differs (four snapped cards in a boxed section here, versus
 * the full-bleed marquee), so the two product rows read as one card system.
 */
.bw-carousel-card {
  position: relative;
  /* !important: Elementor's own generated rule for this exact element
     (higher specificity via .elementor-X .elementor-element.elementor-
     element-xxxx) otherwise wins over a single custom class and collapses
     the flex-basis. */
  /* Three across, not four. The subtraction is the card's share of the gaps:
     with n visible and a 20px gap there are (n-1) gaps, so each card gives up
     (n-1)/n × 20px — 13.34px at n=3, where the old four-up gave up 15px. */
  flex: 0 0 calc(33.333% - 13.34px) !important;
  min-width: 260px !important;
  scroll-snap-align: start;
  /* hidden, not visible — the hover tilt has to be clipped to the card. */
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: #f3f5ee;
  padding: 0;
  border-radius: 20px;
}

.bw-carousel-photo {
  min-height: 420px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 14px;
  overflow: hidden;
  transition: 0.3s all;
}

.bw-carousel-card:hover .bw-carousel-photo {
  transition: 0.3s all;
  transform: scale(1.2) rotate(5deg);
}

/*
 * Floating product-icon badge, top-right of the card. Frosted like the
 * caption chip so both read as one system. On hover it fills lime and
 * counter-rotates against the photo's +5deg tilt, so the badge reads as
 * sitting on top of the photo rather than glued to it.
 */
.bw-carousel-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #fdfff7c4;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-carousel-card:hover .bw-carousel-badge {
  background: var(--bw-navy);
  transform: rotate(-8deg) scale(1.08);
}

/* Icon itself flips to white on hover, against the navy badge. Elementor
   paints the glyph via the widget's own `color` on the <i>/<svg>, so both
   are targeted — the icon widget swaps between them depending on whether
   the Font Awesome SVG shim is active. */
.bw-carousel-card:hover .bw-carousel-badge i,
.bw-carousel-card:hover .bw-carousel-badge svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/*
 * Floating "open" arrow — the card's own arrow widget, lifted out of the
 * caption chip's text flow and floated onto the chip's top-right corner.
 *
 * Circular, where the product-icon badge is a rounded square: the shape
 * difference is what separates "this is an action" from "this is a category
 * marker". The glyph is fa-arrow-up, so +45deg points it up-right (the
 * standard "opens a page" cue); it straightens to true up on hover.
 */
.bw-carousel-arrow-btn {
  position: absolute;
  top: 6px;
  right: 7px;
  /* The widget is a plain container, so it stretches to the chip's full
     width in normal flow — these lock it to a square instead. */
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  border-radius: 11px;
  background: #c9a24a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  z-index: 2;
  transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.bw-carousel-arrow-btn svg,
.bw-carousel-arrow-btn i {
  width: 13px;
  height: 13px;
  fill: var(--bw-navy);
  color: var(--bw-navy);
  transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Now that the resting state is already lime, hover deepens to navy (with a
   lime glyph) rather than staying lime — otherwise the only hover feedback
   left would be the rotation. */
/* The strip cards carry the same badge, so they get the same hover. */
.bw-strip-card:hover .bw-carousel-arrow-btn {
  background: var(--bw-navy);
  transform: rotate(0deg) scale(1.08);
}

/* White on the navy circle. `.elementor-icon` is named as well as the svg
   and the <i>, because Elementor's per-element CSS colours the icon through
   that wrapper at a specificity this file cannot otherwise outrank. */
.bw-strip-card:hover .bw-carousel-arrow-btn .elementor-icon,
.bw-strip-card:hover .bw-carousel-arrow-btn svg,
.bw-strip-card:hover .bw-carousel-arrow-btn i {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.bw-carousel-card:hover .bw-carousel-arrow-btn {
  background: var(--bw-navy);
  transform: rotate(0deg) scale(1.08);
}

.bw-carousel-card:hover .bw-carousel-arrow-btn svg,
.bw-carousel-card:hover .bw-carousel-arrow-btn i {
  fill: var(--bw-cyan);
  color: var(--bw-cyan);
}

/*
 * Card title, sized here rather than in the widget's own Elementor setting
 * so the page data is left alone.
 *
 * The space under it is set by the chip's own flex `gap` (20px from the
 * container's Elementor setting), NOT by the heading's margin — so zeroing
 * the gap is what actually closes it, and the heading's own margin is then
 * the single knob controlling that spacing.
 */
.bw-carousel-label h4,
.bw-carousel-label .elementor-heading-title {
  font-size: 21px !important;
  line-height: 1.24em !important;
}

.bw-carousel-label {
  gap: 0 !important;
}

.bw-carousel-label .elementor-widget-heading {
  margin-bottom: 6px !important;
}

.bw-carousel-label {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  /* Tighter under the title than above it — the chip's own bottom padding was
     the only thing sitting below the heading, and at 16px it left the text
     looking like it floated in the chip rather than sitting in it. */
  padding: 15px 18px 11px;
  background: #fdfff7c4;
  border-radius: 17px;
  width: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bw-carousel-prev,
.bw-carousel-next {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fbfaf7; /* not pure white, like every other surface */
  border: 1px solid var(--bw-line);
  box-shadow: 0 12px 28px -16px rgba(4, 13, 36, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.bw-carousel-prev { left: 8px; }
.bw-carousel-next { right: 8px; }

.bw-carousel-prev svg,
.bw-carousel-next svg,
.bw-carousel-prev i,
.bw-carousel-next i {
  fill: var(--bw-cyan);
  color: var(--bw-cyan);
  transition: fill 0.25s ease, color 0.25s ease;
}

/* Fills gold on hover with a white glyph. `color` alone left the arrow gold
   on gold — Elementor renders it as an <svg>, which paints via `fill`. */
.bw-carousel-prev:hover,
.bw-carousel-next:hover {
  background: var(--bw-cyan);
  border-color: var(--bw-cyan);
}

.bw-carousel-prev:hover svg,
.bw-carousel-next:hover svg,
.bw-carousel-prev:hover i,
.bw-carousel-next:hover i {
  fill: #ffffff;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .bw-carousel-card {
    flex-basis: calc(50% - 10px) !important;
  }
  .bw-carousel-prev { left: 4px; }
  .bw-carousel-next { right: 4px; }
}

@media (max-width: 640px) {
  .bw-carousel-card {
    flex-basis: 82% !important;
  }
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
/* No backdrop-filter here: the header sits over the hero video and the blur
   was frosting the footage behind it. The pill has its own solid background,
   so the nav stays readable without it. */
.bw-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/*
 * The pill's own box (background/shadow/radius), not just its content, caps
 * at 1080px and centres — content_width:boxed only constrains the inner
 * content wrapper, leaving the pill's visible box spanning full width with
 * empty rounded-corner space either side of the real content.
 */
/*
 * Top bar and nav bar share ONE container geometry.
 *
 * They were built differently — the top bar is a boxed container (content in
 * an .e-con-inner) and the pill is full-width with its own max-width — so
 * their content edges never lined up, and chasing it by nudging one side's
 * padding just moved the mismatch around. Both now take the same max-width,
 * centring and inset, so the logo sits directly under the phone number and
 * the CTA under the social icons at any viewport width.
 */
/* The nav pill lives inside .bw-header, which carries 24px of side padding;
   the top bar's outer had none, so its inner box started 11px further out.
   Matching the outer inset is what actually lines the two boxes up. */
.bw-topbar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.bw-topbar > .e-con-inner,
.bw-header-pill {
  max-width: 1340px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bw-header-pill {
  /* Positioning context for the Products flyout. Anchoring the panel to the
     pill rather than to the "Products" list item is what makes `top: 100%`
     mean "below the header bar" instead of "below the nav label" — the
     latter starts the panel mid-pill, so it overlapped the header. Doing it
     this way needs no magic offset and survives header padding changes. */
  position: relative;
}

/*
 * Elementor puts `position: relative` on every container and widget, so the
 * nav widget's own wrapper — not the pill — was capturing the flyout as its
 * containing block, which is why `top: 100%` landed mid-header. Clearing it
 * on the pill's descendants (never the pill itself) lets the panel resolve
 * against the pill. Scoped to the header, and nothing inside it uses a
 * background overlay or shape divider that would need positioning.
 */
.bw-header-pill .e-con,
.bw-header-pill .e-con-inner,
.bw-header-pill .elementor-widget {
  position: static;
}

/*
 * Main nav — styled against Header Footer Elementor's actual output, not
 * Elementor Pro's classes (the free "Nav Menu" widget is Pro-only and renders
 * nothing on this install; HFE's "navigation-menu" widget is what is really
 * in the header).
 *
 * Anchors are targeted by HFE's own `.hfe-menu-item` / `.hfe-sub-menu-item`
 * classes rather than DOM position. A top-level item with children wraps its
 * `<a>` in an extra `.hfe-has-submenu-container` div — `.menu-item > a` looks
 * right but silently misses exactly the "Products" link that most needed
 * styling, since it is the one item with a submenu.
 *
 * There are TWO elements named `hfe-nav-menu` on the page — a wrapper div
 * AND the actual `<ul>` inside it — so rules meant for the list use
 * `.bw-nav nav ul` instead of `.hfe-nav-menu`, which would otherwise also
 * catch the wrapper.
 */
.bw-nav nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Static on purpose: a positioned <li> would become the flyout's containing
 * block and anchor it to the "Products" label (mid-header). The panel is
 * anchored to .bw-header-pill instead — see the rule there. The hover
 * underline that used to rely on this is now anchored to the <a> itself.
 */
.bw-nav li.menu-item {
  /* HFE's own frontend.css sets `.hfe-nav-menu li.menu-item { position:
     relative }` — two classes + an element, so a bare `.bw-nav .menu-item`
     loses. Matching its element+class shape wins on specificity. */
  position: static;
}

/*
 * HFE wraps only submenu parents ("Products") in an extra
 * .hfe-has-submenu-container div. That wrapper is a plain block with no
 * padding of its own, so the flex row centred the wrapper's shorter box
 * rather than the anchor inside it — leaving that one item sitting a few
 * px higher than its siblings. Making the wrapper contribute nothing to
 * layout puts its anchor on the same footing as the unwrapped ones.
 */
/*
 * `display: contents` removes the wrapper from layout entirely so its anchor
 * becomes a direct flex child of the row, exactly like the unwrapped items.
 * It does not change the DOM, so the `:focus-within + .sub-menu` rule below
 * and HFE's own toggle JS both keep working.
 */
.bw-nav .hfe-has-submenu-container {
  display: contents;
}

/*
 * "Products" is the only item carrying a toggle-arrow span, and that extra
 * inline child changed how its line box resolved — leaving it ~10px shorter
 * than its plain-text siblings and visibly higher in the row. Rather than
 * chase which of HFE's several competing line-height/display declarations
 * wins, every nav anchor is pinned to one explicit box here so the row is
 * uniform by construction.
 */
.bw-nav a.hfe-menu-item {
  display: flex !important;
  align-items: center;
  height: auto !important;
  min-height: 46px;
  line-height: 1.15 !important;
}

/*
 * HFE's own generated per-page CSS carries a rule of the exact same
 * specificity (`.elementor-widget-navigation-menu a.hfe-menu-item`, also two
 * classes + one element) pointing at the kit's global heading font (Libre
 * Caslon Condensed, serif) — and it's injected via a late inline <style>
 * block, so it wins the tie on source order no matter where this file sits.
 * !important is the only reliable way to win a same-specificity fight
 * against markup this build doesn't control.
 */
.bw-nav a.hfe-menu-item {
  display: block;
  /* Anchors the hover underline (::after) to the link itself, now that the
     parent <li> is static so the flyout can hang off the header pill. */
  position: relative;
  padding: 8px 0;
  color: #161a3f;
  font-family: "Inter", sans-serif !important;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease;
}

.bw-nav .hfe-menu-item:hover,
.bw-nav .menu-item.current-menu-item .hfe-menu-item {
  color: #161a3f;
}

/* The toggle arrow HFE appends to a parent item's own label. */
.bw-nav .hfe-menu-item .hfe-menu-toggle {
  margin-left: 6px;
  font-size: 1em; /* was 18px */
  vertical-align: middle;
}

/* Underline that grows from the middle on hover / active. */
/*
 * Underline holds its full width and scales from the centre, rather than
 * animating `width` from 0. With a growing width, `translateX(-50%)` is
 * measured against that changing width — so the rule starts at the anchor's
 * centre and grows rightward, only landing centred at the end. That is what
 * made the active state look shifted right. Scaling is also cheaper: it
 * composites instead of forcing layout on every frame.
 */
/* The bar is 90% of the link and centred by `margin-left: -45%`, so the
   transform is free to do nothing but the grow — no translateX to fight
   with the centring. `position: absolute` stays: without it the pseudo
   element is inline, width and height stop applying, and the underline
   does not render at all. */
.bw-nav .hfe-menu-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 2px;
  width: 90%;
  margin-left: -45%;
  background: var(--bw-cyan);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-nav .hfe-menu-item:hover::after,
.bw-nav .menu-item.current-menu-item .hfe-menu-item::after {
  transform: scaleX(1);
}

/*
 * The Products flyout — a wide multi-column panel in the style of the
 * client's reference site, not a narrow single-column dropdown. Eleven
 * product names in one 320px column forced a cramped scrollbar; laying them
 * out in columns fits the whole set at a readable size with no scrolling.
 */
.bw-nav .sub-menu {
  /*
   * Centred with auto margins against left:0/right:0, not `left: 50%` +
   * translateX(-50%): HFE's own CSS forces `left: 0` at a specificity this
   * file can't outrank, which silently cancelled the 50% and left the panel
   * hanging off the header's left edge. Auto margins don't depend on `left`
   * resolving, so they can't be undone the same way.
   */
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* !important because HFE's generated per-page CSS hard-codes width:220px at
     a higher specificity (`.elementor-38 .elementor-element-… ul.sub-menu`,
     which this file cannot outrank without matching its element ids). */
  width: min(1080px) !important;
  min-width: 0 !important;
  /* Grid, not CSS `columns` — multi-column does not constrain the width of
     HFE's own list items, so they kept their intrinsic width and spilled
     out past the panel instead of flowing into tidy columns. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 20px;
  margin: 0;
  padding: 22px 24px;
  /* #FBFAF7, not pure white — matches every other surface on the site. */
  background: #fbfaf7;
  border: 1px solid var(--bw-line);
  border-radius: 22px;
}

/*
 * HFE's generated CSS draws a grey rule under every submenu row
 * (`… .sub-menu li { border-bottom: 1px solid #c4c4c4 }`). That reads as a
 * stack of divided rows, not the clean column of links the reference uses,
 * and looks broken once the items are in a grid.
 */
.bw-nav .sub-menu > li {
  border: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  /* HFE paints each row white independently of the panel — transparent lets
     the panel's own #FBFAF7 through, so no pure white is left anywhere. */
  background: transparent !important;
}

.bw-nav .menu-item-has-children:hover > .sub-menu,
.bw-nav .hfe-has-submenu-container:focus-within + .sub-menu,
.bw-nav .sub-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*
 * Product names are long ("IT Hardware, Computer Parts & Accessories"). The
 * kit's global "accent" typography renders them UPPERCASE at 12px with 1.6px
 * tracking, which wrapped each one into three cramped shouty lines. HFE
 * applies that via `.elementor-widget-navigation-menu .sub-menu li
 * a.hfe-sub-menu-item` — higher specificity than anything scoped to .bw-nav
 * alone, and injected inline as well — so these need !important to win.
 */
/*
 * Icon badge injected ahead of each submenu link (see bw_menu_item_icon in
 * functions.php). flex-shrink:0 matters — the labels are long enough to wrap
 * to two lines, and without it the badge squashes into an oval on those rows.
 */
.bw-nav .sub-menu .bw-mi-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--bw-surface-alt);
  /* Gold at rest on the pale tile, so the glyph reads as the brand mark
     rather than as another line of navy text. */
  color: #c9a24a;
  font-size: 1em; /* was 18px */
  transition:
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover inverts it: the tile takes the deeper gold and the glyph goes
   white, which is the same move the site's buttons make. */
.bw-nav .sub-menu a:hover .bw-mi-icon {
  background: #b8913d;
  color: #ffffff;
}
.bw-nav .sub-menu .hfe-sub-menu-item,
.bw-nav .sub-menu .hfe-menu-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: 12px;
  font-size: 18px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 0 !important;
  white-space: normal;
  /* HFE's own rule centres submenu links; without this the short labels
     ("Agro Products") sat mid-row while the wrapping ones started at the
     left, so the icon badges didn't line up down the column. */
  justify-content: flex-start;
  /* Eased on the same curve and duration as the badge inside it. The row
     used to snap while the badge faded, and that mismatch is what made
     the hover feel abrupt. */
  transition:
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-nav .sub-menu .hfe-sub-menu-item::after,
.bw-nav .sub-menu .hfe-menu-item::after {
  display: none;
}

/*
 * Text stays dark in every state — hover, focus and current-page. HFE's
 * generated CSS paints hover/active submenu links with the kit's accent
 * colour (lime), which is unreadable on the light hover chip, and it wins on
 * specificity + inline source order, so these need !important.
 */
.bw-nav .sub-menu .hfe-sub-menu-item,
.bw-nav .sub-menu .hfe-menu-item,
.bw-nav .sub-menu .hfe-sub-menu-item:hover,
.bw-nav .sub-menu .hfe-menu-item:hover,
.bw-nav .sub-menu .hfe-sub-menu-item:focus,
.bw-nav .sub-menu .hfe-sub-menu-item-active,
.bw-nav .sub-menu .current-menu-item > a {
  color: #161a3f !important;
}

.bw-nav .sub-menu .hfe-sub-menu-item:hover,
.bw-nav .sub-menu .hfe-menu-item:hover {
  background: var(--bw-surface-alt);
}

/* The widget's own mobile trigger, restyled to match the palette rather than
   its plugin-default grey. Actual show/hide behaviour is the widget's own
   JS — this only themes it. */
.bw-nav .hfe-nav-menu__toggle,
.bw-nav .hfe-menu-toggle {
  color: #161a3f;
  font-size: 1.222em; /* was 22px */
}

@media (max-width: 1024px) {
  .bw-nav .hfe-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .bw-nav .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    max-height: none;
    margin-top: 4px;
    padding-left: 12px;
    /* Desktop centres the panel with auto side margins; in the stacked
       accordion it should sit flush against the drawer's left edge instead,
       and one column reads better than three at this width. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------
   Forms — Fluent Forms ships neutral styling; this brings it in line
   with the rest of the page.
   --------------------------------------------------------------- */
.bw-form .ff-el-input--content input,
.bw-form .ff-el-input--content select,
.bw-form .ff-el-input--content textarea {
  border: 1px solid var(--bw-line) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
  background: #fff !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bw-form .ff-el-input--content input:focus,
.bw-form .ff-el-input--content select:focus,
.bw-form .ff-el-input--content textarea:focus {
  border-color: var(--bw-cyan) !important;
  box-shadow: 0 0 0 4px rgba(22, 26, 63, 0.14) !important;
  outline: none !important;
}

.bw-form .ff-el-input--label label {
  font-weight: 600 !important;
  color: var(--bw-ink) !important;
  font-size: 18px !important;
}

.bw-form .ff-btn-submit {
  background: var(--bw-amber) !important;
  color: var(--bw-ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 16px 34px !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  transition: transform 0.25s ease, background 0.25s ease;
}

.bw-form .ff-btn-submit:hover {
  background: #c2d116 !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   Nothing on this site may scroll sideways.
   `clip` not `hidden`: hidden would make the element a scroll
   container and break the sticky header.
   --------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

body {
  background: #eceae1;
}

@media (prefers-reduced-motion: reduce) {
  .bw-card,
  .bw-strip-photo,
  .bw-carousel-photo,
  .bw-nav .elementor-item::after {
    transition: none !important;
  }

  .bw-card:hover {
    transform: none;
  }

  /* The product cards' zoom-and-tilt is the one big motion left on the page,
     so it is what this query most needs to suppress. */
  .bw-strip-card:hover .bw-strip-photo,
  .bw-carousel-card:hover .bw-carousel-photo {
    transform: none;
  }
}

/* ==========================================================================
   FAQ accordion (.bw-faq)
   --------------------------------------------------------------------------
   Values are taken from the reference's own component, not matched by eye:
   blue-zone-you-website/src/components/services/ServiceDetailPage.tsx (the Faq
   function) plus the light-theme remaps in its globals.css.

       list          flex flex-col gap-5              -> 20px gap
       item          rounded-xl                       -> 12px radius
       closed        border rgba(255,255,255,0.08)    -> rgba(0,0,0,0.08) light
       closed hover  border rich-gold/20, bg 0.02     -> rgba(0,0,0,0.025)
       open          bg rgba(201,162,74,0.05)
                     border rich-gold/25
                     shadow 0 12px 28px -18px rgba(201,162,74,0.22)
       question      17px / 600 / 1.4, navy; gold when open
       icon          32px circle, gold outline; solid gold when open
       answer        px-6 pb-6 pr-14, 16px / 1.7

   This is the one component that could not be built from Elementor settings:
   v4 deprecated the classic accordion with its style controls unregistered,
   and the nested accordion registers background colours only — no typography,
   padding, radius or spacing reaches stored page data. Only those unreachable
   properties are set here.
   ========================================================================== */

.bw-faq .e-n-accordion {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bw-faq .e-n-accordion-item {
  border: 1px solid rgb(223 204 157);
  border-radius: 12px;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.bw-faq .e-n-accordion-item:hover {
  border-color: rgb(206 180 116);
  box-shadow: 0 8px 20px -16px rgba(10, 31, 74, 0.28);
}

/* Only the open panel is tinted — a tint on every row is what made the block
   read as a wall of gold rather than a list with one item open. */
.bw-faq details[open].e-n-accordion-item,
.bw-faq details[open] {
  border-color: rgba(201, 162, 74, 0.25);
  box-shadow: 0 12px 28px -18px rgba(201, 162, 74, 0.22);
  background: #c9a24a2e;
}

.bw-faq .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  /* Elementor emits the icon before the label, so the row is reversed to put
     the question on the leading edge and the plus/minus on the trailing one. */
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  border: 0;
  background: transparent;
}

.bw-faq .e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}

.bw-faq .e-n-accordion-item-title-text,
.bw-faq .e-n-accordion-item-title-text * {
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: #0a1f4a;
  margin: 0;
  transition: color 0.3s ease;
}

/* The question stays navy hovered and open alike. Gold text on the warm
   panel behind it was barely a contrast at all — the state is already
   said by the panel, the border and the icon, and saying it again in the
   text only cost legibility. Open is marked by weight instead. */
.bw-faq details[open] .e-n-accordion-item-title-text,
.bw-faq details[open] .e-n-accordion-item-title-text * {
  color: #0a1f4a;
  font-weight: 600;
}

.bw-faq .e-n-accordion-item-title-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 74, 0.4);
  background: rgba(201, 162, 74, 0.1);
  color: #c9a24a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.bw-faq details[open] .e-n-accordion-item-title-icon {
  background: #c9a24a;
  border-color: #c9a24a;
  color: #ffffff;
}

/* The accordion registers background colours and nothing else — no control
   for the icon — so these two fills are the one thing here that has to be
   written by hand. */
.bw-faq .e-n-accordion-item-title-icon svg {
  width: 14px;
  height: 14px;
  fill: #b8913d !important;
}

.bw-faq details[open] .e-n-accordion-item-title-icon svg {
  fill: #ffffff !important;
}

/* The answer sits directly on the item. Elementor gives the panel container
   its own surface, which drew a second box inside the open row. */
.bw-faq .e-n-accordion-item > .e-con,
.bw-faq .e-n-accordion-item > .e-con > .e-con-inner {
  padding: 0 56px 24px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* The reference sets `body-justify` on the answer: justified, inter-word,
   and never auto-hyphenated so words wrap whole. */
.bw-faq .e-n-accordion-item > .e-con p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
}


@media (max-width: 767px) {
  .bw-faq .e-n-accordion-item-title {
    padding: 16px 20px;
  }

  .bw-faq .e-n-accordion-item-title-text,
  .bw-faq .e-n-accordion-item-title-text * {
    font-size: 1em; /* was 18px */
  }

  .bw-faq .e-n-accordion-item > .e-con,
  .bw-faq .e-n-accordion-item > .e-con > .e-con-inner {
    padding: 0 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-faq .e-n-accordion-item,
  .bw-faq .e-n-accordion-item-title-text,
  .bw-faq .e-n-accordion-item-title-icon {
    transition: none !important;
  }
}

/* ==========================================================================
   Enquiry form (.bw-form)
   --------------------------------------------------------------------------
   Contact Form 7 renders its own markup, so its fields cannot be styled from
   Elementor's controls the way every other element on this site is. Field
   geometry and the focus ring are taken from the reference's contact form and
   remapped to the light palette: a warm hairline at rest, a gold ring on
   focus, and the site's own button on the submit.
   ========================================================================== */
.bw-form .wpcf7-form label.bw-f {
  display: block;
  margin-bottom: 18px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: var(--bw-muted, #4a5670);
}

.bw-form .wpcf7-form input[type="text"],
.bw-form .wpcf7-form input[type="email"],
.bw-form .wpcf7-form input[type="tel"],
.bw-form .wpcf7-form input[type="date"],
.bw-form .wpcf7-form input[type="number"],
.bw-form .wpcf7-form input[type="url"],
.bw-form .wpcf7-form select,
.bw-form .wpcf7-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 15px;
  border: 1px solid #e8e2d5;
  border-radius: 10px;
  background: #fbfaf7;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #0a1f4a;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bw-form .wpcf7-form textarea {
  resize: vertical;
  min-height: 110px;
}

.bw-form .wpcf7-form input::placeholder,
.bw-form .wpcf7-form textarea::placeholder {
  color: #9aa3b2;
}

.bw-form .wpcf7-form input:focus,
.bw-form .wpcf7-form select:focus,
.bw-form .wpcf7-form textarea:focus {
  outline: none;
  border-color: #c9a24a;
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.15);
}

.bw-form .wpcf7-form input[type="submit"] {
  /* Sized to its label rather than stretched across the card — a pill,
     like every other button on the site. */
  width: auto;
  min-width: 190px;
  margin-top: 4px;
  padding: 14px 34px;
  border: 0;
  border-radius: 18px;
  background: #c9a24a;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease;
}

.bw-form .wpcf7-form input[type="submit"]:hover {
  background: #b8913d;
}

/* CF7's own status and validation messages, in the site's voice rather than
   the plugin's default red-on-white banner. */
.bw-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  border-width: 1px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
}

.bw-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
}

/* ==========================================================================
   In-page anchors
   --------------------------------------------------------------------------
   The header is fixed, so an anchor left to itself lands the section under it.
   The offset is the header's own measured height (layout.js writes
   --bw-header-h and keeps it current through the scrolled state and every
   breakpoint) plus a little air, rather than a number guessed once.
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.e-con[id],
.elementor-element[id] {
  scroll-margin-top: calc(var(--bw-header-h, 130px) + 40px);
}

/* ==========================================================================
   Back to top (.bw-to-top)
   --------------------------------------------------------------------------
   The ring is drawn as a single stroked circle whose dash pattern is its own
   circumference; layout.js moves the offset from full to zero as the page is
   scrolled, which fills it. Rotated -90deg so it starts at twelve o'clock
   rather than at three.
   ========================================================================== */
/* `button.bw-to-top`, not `.bw-to-top`: the theme's own button rules add
   horizontal padding and leave box-sizing at content-box, which made this
   48px circle 60px wide — the ring then sat left of centre and the arrow
   with it. Matching on the element as well as the class outranks them. */
button.bw-to-top {
  box-sizing: border-box;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fbfaf7;
  box-shadow: 0 10px 30px -12px rgba(10, 31, 74, 0.45);
  color: #0a1f4a;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.3s,
    background-color 0.25s ease,
    color 0.25s ease;
}

/* Shown only once there is somewhere to go back to. */
.bw-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bw-to-top:hover {
  background: #c9a24a;
  color: #ffffff;
}

.bw-to-top:focus-visible {
  outline: 2px solid #c9a24a;
  outline-offset: 3px;
}

.bw-to-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
  pointer-events: none;
}

.bw-to-top-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.bw-to-top-track {
  stroke: rgba(10, 31, 74, 0.12);
}

.bw-to-top-bar {
  stroke: #c9a24a;
  stroke-linecap: round;
  /* set from the circumference by layout.js */
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}

@media (max-width: 767px) {
  .bw-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

}

/* ==========================================================================
   Concierge card (.bw-nap)
   --------------------------------------------------------------------------
   Its row no longer stretches, so the card is as tall as what is in it. Being
   the shorter of the two, it then follows the form down the section instead of
   leaving a block of empty panel behind. The offset is the measured header
   height, the same variable the in-page anchors use.

   Only from the desktop breakpoint up: below it the two cards stack, and a
   sticky card in a single column would sit on top of the form.
   ========================================================================== */
@media (min-width: 1025px) {
  .bw-nap {
    position: sticky;
    top: calc(var(--bw-header-h, 110px) + 24px);
  }
}

/*
 * An email address is one unbreakable word. On a 320px screen the address in
 * this card measured 243px against 231px of room and hung 12px off the side.
 * Allowing a break inside the word costs nothing at any width where it fits —
 * the rule only takes effect when there is genuinely nowhere else to break.
 */
.bw-nap,
.bw-nap a,
.bw-nap p,
.bw-nap span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The card's rows are Elementor Icon Boxes (Stacked view): Elementor paints the
   disc and the glyph from the widget's own colours, and draws no border in
   that view, so the hairline ring is the one thing added here. The phone and
   email in the description are plain links that read as text, as they did
   when the rows were hand-written. */
.bw-nap .elementor-widget-icon-box .elementor-icon {
  border: 1px solid rgba(201, 162, 74, 0.35);
}

.bw-nap .elementor-icon-box-description a {
  color: inherit;
  text-decoration: none;
}

/* The badge at the top of each value card is an Elementor Icon widget (Stacked,
   square, 12px radius): the tile and the glyph take the widget's own colours,
   and Stacked draws no border, so the hairline edge is added here. */
.bw-valuecard .elementor-widget-icon .elementor-icon {
  border: 1px solid rgba(201, 162, 74, 0.35);
}

/* The tile is an inline-block, so the wrapper's inherited line-height leaves a
   text descent under it and the widget measures 57px for a 48px tile, pushing
   the card title down. A zero line-height makes the widget exactly the tile;
   Elementor's alignment control still works, as it sets text-align. */
.bw-valuecard .elementor-widget-icon .elementor-icon-wrapper {
  line-height: 0;
}


/* On hover the badge itself turns navy, so a navy glyph would disappear into
   it — gold is what reads on that fill. `svg` and `fill` are both named
   because Elementor renders this glyph as inline SVG, which ignores `color`. */
.bw-btn-primary .elementor-button:hover .elementor-button-icon i,
.bw-btn-primary .elementor-button:hover .elementor-button-icon svg,
.bw-btn-primary .elementor-button:focus .elementor-button-icon i,
.bw-btn-primary .elementor-button:focus .elementor-button-icon svg {
  color: #c9a24a !important;
  fill: #c9a24a !important;
}

/* ==========================================================================
   Photograph hover
   --------------------------------------------------------------------------
   A small push in and a degree and a half of tilt, on the site's own easing
   curve. The card clips, so the photograph grows inside its frame rather than
   over the copy beneath it. Deliberately slight: at a full 1.2x the picture
   lurches, which reads as a glitch rather than as a response.
   ========================================================================== */
.bw-cat-card,
.bw-strip-card {
  overflow: hidden;
}

/* The photograph moves on a layer inside its own frame, not as the frame
   itself. Transforming the framed element made it grow past its rounded
   corners and over the card's padding; an inset layer carrying the same
   background is clipped by the frame, so the picture can only ever move
   within it. */
.bw-cat-photo,
.bw-strip-photo {
  position: relative;
  overflow: hidden;
}

.bw-cat-photo::before,
.bw-strip-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.bw-cat-card:hover .bw-cat-photo::before {
  transform: scale(1.12) rotate(2.5deg);
}

@media (prefers-reduced-motion: reduce) {
  .bw-cat-photo::before,
  .bw-strip-photo::before {
    transition: none;
  }

  .bw-cat-card:hover .bw-cat-photo::before,
  .bw-strip-card:hover .bw-strip-photo::before {
    transform: none;
  }
}
/* The item's background is painted by the widget now, on the title and the
   panel — both square-cornered — so it was covering the rounded corners of the
   border around them. Clipping the item to its own radius puts the corners
   back without taking the colour control away from wp-admin. */
.bw-faq .e-n-accordion-item {
  overflow: hidden;
}

/* The answer opened flush against the question. This is the gap between the
   two, set on the panel rather than the title so a closed row keeps its own
   height exactly as it was. */
.bw-faq details[open] > .e-con,
.bw-faq details[open] > div:not(.e-n-accordion-item-title) {
  padding-top: 6px;
}
/* ==========================================================================
   Financial tables (.bw-fin)
   --------------------------------------------------------------------------
   A statement is a table: rows that must line up across four year columns and
   still be readable on a phone. Elementor has no table widget, so the markup
   is authored and the styling lives here — the palette and type are the site's
   own. The wrapper scrolls on its own so a wide table never makes the page
   scroll sideways.
   ========================================================================== */
.bw-fin-wrap {
  /* a five-column statement loses the reader's eye at full width */
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  overflow-x: auto;
  border: 1px solid #ece5d6;
  border-radius: 18px;
  background: #fdfcfa;
  box-shadow: 0 24px 48px -34px rgba(10, 31, 74, 0.18);
}

.bw-fin {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #2f3133;
  min-width: 620px;
}

/*
 * The theme boxes every cell in grey and stripes alternate rows. Both come off:
 * a grid turns a set of figures into graph paper, and grey over a cream page
 * reads as dirt.
 */
.bw-fin tr,
.bw-fin tbody tr:nth-child(odd) td,
.bw-fin tbody tr:nth-child(even) td {
  background: transparent;
}

.bw-fin th,
.bw-fin td {
  border: 0;
  border-bottom: 1px solid #f2eee5;
  padding: 15px 20px;
  text-align: left;
  vertical-align: middle;
}

.bw-fin th:first-child,
.bw-fin td:first-child {
  padding-left: 26px;
  width: 34%;
}

.bw-fin th:last-child,
.bw-fin td:last-child {
  padding-right: 26px;
}

/* ---- the column heads -------------------------------------------------- */
.bw-fin thead th {
  padding-top: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5dcc6;
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
  color: #0a1f4a;
  white-space: nowrap;
}

/* "audited" / "projected", as a quiet tag under the year */
.bw-fin thead th span {
  display: inline-block;
  margin-top: 6px;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.14);
  font-family: "Inter", sans-serif;
  /* a pill badge is chrome, not reading text — the 18px floor does not apply */
  font-size: max(0.667em, 12px); /* was 12px; floored so it never drops under 12px on a phone */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a9863a;
  vertical-align: middle;
}

/* ---- the figures ------------------------------------------------------- */
.bw-fin .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.bw-fin td:first-child {
  color: #2f3133;
}

/*
 * The latest audited year, lifted out of the row. It is the number anyone
 * looks for, and a column behind it finds it without a label saying so.
 */
.bw-fin thead th:nth-child(4),
.bw-fin tbody tr td:nth-child(4) {
  background: rgba(201, 162, 74, 0.06);
}

.bw-fin thead th:nth-child(4) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.bw-fin tbody tr:last-child td:nth-child(4) {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* the forecast sits back from the three years that actually happened */
.bw-fin tbody tr td:nth-child(5) {
  color: #6f7684;
}

.bw-fin thead th:nth-child(5) {
  border-bottom-style: dashed;
  border-bottom-color: #ded3ba;
}

.bw-fin thead th:nth-child(5) span {
  background: transparent;
  border: 1px dashed rgba(201, 162, 74, 0.55);
  color: #a9863a;
}

/* ---- the lines that are sums ------------------------------------------- */
.bw-fin tbody tr.total td {
  background: rgba(201, 162, 74, 0.05);
  font-weight: 600;
  color: #0a1f4a;
}

.bw-fin tbody tr.total td:nth-child(4),
.bw-fin tbody tr.total td:nth-child(4) {
  background: rgba(201, 162, 74, 0.11);
}

/* a gold edge marks the line as a subtotal without boxing it */
.bw-fin tbody tr.total td:first-child {
  box-shadow: inset 3px 0 0 #c9a24a;
  color: #0a1f4a;
}

/* the bottom line carries the most weight of the three */
.bw-fin tbody tr:last-child.total td {
  font-size: 1em; /* was 18px */
  color: #0a1f4a;
}

.bw-fin tbody tr:hover td {
  background: rgba(10, 31, 74, 0.03);
}

.bw-fin tbody tr:hover td:nth-child(4) {
  background: rgba(201, 162, 74, 0.13);
}

.bw-fin tbody tr:last-child td {
  border-bottom: 0;
  padding-bottom: 20px;
}

.bw-fin-note {
  margin: 12px 2px 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

@media (max-width: 767px) {
  .bw-fin th,
  .bw-fin td {
    padding: 11px 13px;
    font-size: 1em; /* was 18px */
  }
}

/* ==========================================================================
   Header bar — hamburger, wordmark, offices, contact
   --------------------------------------------------------------------------
   Three zones on one row. The navigation is not in the bar at all: twelve
   product categories cannot sit across it and still leave the middle to the
   mark, so they live in the panel the hamburger opens.
   ========================================================================== */
button.bw-burger {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #e8e2d5;
  border-radius: 999px;
  background: #fbfaf7;
  color: #0a1f4a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

button.bw-burger:hover {
  background: #c9a24a;
  border-color: #c9a24a;
}

/*
 * Everywhere but the home page the bar sits on the site's own surface, so a
 * pale button on a pale bar reads as nothing at all. Inner pages carry the
 * hamburger filled gold at rest; the home page keeps its own treatment, white
 * over the hero and the drawn mark once scrolled.
 */
button.bw-burger {
  background: #c9a24a;
  border-color: #c9a24a;
  color: #ffffff;
}

button.bw-burger .bw-burger-bars span {
  background: #ffffff;
}

button.bw-burger:hover {
  background: #b08c39;
  border-color: #b08c39;
}

.bw-burger-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.bw-burger-bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background-color 0.3s ease;
}

button.bw-burger:hover .bw-burger-bars span {
  background: #ffffff;
}

/* the middle stays the mark's, whatever sits either side of it */
.bw-head-logo {
  flex: 0 0 auto;
}

.bw-head-right {
  flex: 0 0 auto;
}

/* ---- the offices selector -------------------------------------------- */
.bw-offices {
  position: relative;
}

.bw-offices-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid #e8e2d5;
  border-radius: 999px;
  background: #fbfaf7;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #0a1f4a;
  cursor: pointer;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-offices-button:hover,
.bw-offices.is-open .bw-offices-button {
  border-color: #c9a24a;
}

.bw-offices-button > i {
  color: #c9a24a;
  font-size: 1em; /* was 18px */
}

.bw-offices-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.bw-office-flag {
  font-size: 1em; /* was 18px */
  line-height: 1;
}

.bw-offices-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid #4a5670;
  border-bottom: 2px solid #4a5670;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-offices.is-open .bw-offices-chevron {
  transform: translateY(2px) rotate(-135deg);
}

.bw-offices-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: 330px;
  max-height: 380px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #e8e2d5;
  border-radius: 14px;
  background: #fbfaf7;
  box-shadow: 0 26px 52px -26px rgba(10, 31, 74, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.bw-offices.is-open .bw-offices-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bw-offices-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bw-offices-list li:hover,
.bw-offices-list li.is-active {
  background: #f4f1e9;
}

.bw-office-text {
  display: block;
  font-family: "Inter", sans-serif;
}

.bw-office-name {
  display: block;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: #0a1f4a;
}

.bw-office-role {
  display: block;
  margin-top: 1px;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #c9a24a;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.bw-office-address {
  display: block;
  margin-top: 4px;
  font-size: 1em; /* was 18px */
  line-height: 1.5;
  color: #6b7280;
}

@media (max-width: 1024px) {
  .bw-offices-label {
    display: none;
  }

  .bw-offices-list {
    width: 280px;
  }
}

@media (max-width: 767px) {
  .bw-head-cta {
    display: none;
  }
}

/* ==========================================================================
   Menu panel (.bw-menu-panel)
   --------------------------------------------------------------------------
   The full-screen overlay the hamburger opens: close top-left where the
   hamburger was, the mark large beside it, the primary pages set big down the
   middle, and the twelve categories revealed on the right when Products is
   chosen. Navy to gold rather than the reference's blue to orange, because
   that is this company's palette.
   ========================================================================== */
.bw-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #020610ed;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* `hidden` keeps it out of the tab order until it is opened; the class is what
   animates, so the attribute is removed a frame before the class is added. */
.bw-menu-panel[hidden] {
  display: none;
}

.bw-menu-scroll {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 26px clamp(20px, 5vw, 64px) 0;
}

.bw-menu-head {
  flex: 0 0 auto;
}

.bw-menu-close {
  position: relative;
  /* The theme pads every button 16px/30px. Under border-box that padding
     is a floor, so a width alone left this 62 wide against 46 tall — the
     padding has to be named too, and with !important because the theme
     rule outranks a single class. */
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  flex: 0 0 46px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bw-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.bw-menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
}

.bw-menu-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bw-menu-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---- the body: brand, nav, and the revealed categories ---------------- */
.bw-menu-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1.1fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 64px);
  align-content: start;
  padding: clamp(20px, 4vh, 54px) 0;
}

.bw-menu-brand img {
  display: block;
  width: clamp(170px, 16vw, 230px);
  height: auto;
  /* the mark is navy artwork on a navy panel, so it is inverted to read */
  filter: brightness(0) invert(1);
}

.bw-menu-tagline {
  margin: 18px 0 0;
  max-width: 260px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.bw-menu-primary {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-menu-primary li + li {
  margin-top: clamp(14px, 2.4vh, 26px);
}

.bw-menu-primary a,
.bw-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Poppins", sans-serif;
  font-size: 1.778em; /* was 32px */
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-menu-primary a:hover,
.bw-menu-toggle:hover,
.bw-menu-toggle[aria-expanded="true"] {
  color: #e3c579;
}

.bw-menu-caret {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-menu-toggle[aria-expanded="true"] .bw-menu-caret {
  transform: rotate(45deg);
}

/* ---- the categories column ------------------------------------------- */
.bw-menu-sub[hidden] {
  display: none;
}

.bw-menu-heading {
  margin: 0 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #e3c579;
}

.bw-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-panel-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bw-panel-grid a:hover {
  background: rgb(63 61 59);
  color: #ffffff;
}

.bw-panel-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(227, 197, 121, 0.3);
  color: #e3c579;
  font-size: 1em; /* was 18px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bw-menu-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: #e3c579;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- the foot -------------------------------------------------------- */
.bw-menu-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bw-menu-foot a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.25s ease;
}

.bw-menu-foot a:hover {
  color: #e3c579;
}

.bw-menu-foot i {
  color: #e3c579;
  font-size: 1em; /* was 18px */
}

.bw-menu-foot-spacer {
  flex: 1 1 auto;
}

/* while the panel is open the page behind it must not scroll */
body.bw-menu-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .bw-menu-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .bw-menu-brand img {
    width: 160px;
  }

  .bw-menu-tagline {
    display: none;
  }

  .bw-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-menu-panel {
    transition: none;
  }
}


/* `button.bw-menu-toggle`, matching the element as well as the class: Products
   is a button because it opens the category column instead of navigating, and
   the theme's own button rules were winning on font-size and colour, leaving it
   small and gold beside the other links. It is one of the five, so it is set
   like the other four. */
.bw-menu-primary button.bw-menu-toggle {
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: "Poppins", sans-serif;
  font-size: 1.778em; /* was 32px */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
}

.bw-menu-primary button.bw-menu-toggle:hover,
.bw-menu-primary button.bw-menu-toggle[aria-expanded="true"] {
  background: none;
  color: #e3c579;
}

/* the caret scales with the label rather than staying a fixed 10px */
.bw-menu-primary button.bw-menu-toggle .bw-menu-caret {
  width: 0.28em;
  height: 0.28em;
  border-width: 0.06em;
}

/* ==========================================================================
   Financial report furniture
   --------------------------------------------------------------------------
   The headline figures, the revenue chart, the group cards and the governance
   tiles. Elementor has no widget for any of these, and a chart drawn as divs
   needs no library, keeps its numbers as selectable text and reads on a phone.
   ========================================================================== */

/* ---- headline figure ------------------------------------------------- */
.bw-figure {
  height: 100%;
  padding: 26px 24px;
  border: 1px solid #e8e2d5;
  border-radius: 16px;
  background: #fbfaf7;
}

.bw-figure-value {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  color: #0a1f4a;
  font-variant-numeric: tabular-nums;
}

.bw-figure-unit {
  margin-left: 2px;
  font-size: 0.55em;
  font-weight: 500;
  color: #c9a24a;
}

.bw-figure-label {
  margin: 12px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: #2f3133;
}

.bw-figure-note {
  margin: 4px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a24a;
}

/* ---- revenue chart --------------------------------------------------- */
.bw-chart {
  margin: 0;
}

.bw-chart-caption {
  margin: 0 0 18px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a24a;
  text-align: center;
}

.bw-chart-plot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 22px);
  align-items: end;
  /* A definite height, not a minimum: the bars are sized as a percentage of
     this box, and a percentage height resolves against nothing when its
     parent is auto — which is why three different years all came out the
     same height. */
  height: 320px;
  padding: 0 clamp(6px, 2vw, 24px);
}

.bw-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bw-chart-value {
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 1.5vw, 19px);
  font-weight: 600;
  color: #0a1f4a;
  font-variant-numeric: tabular-nums;
}

.bw-chart-bar {
  width: 100%;
  max-width: 132px;
  height: var(--h);
  /* Without this the bar is a flex item that shrinks to whatever room is
     left after the labels, so every tall year came out the same height and
     the chart said nothing. */
  flex: 0 0 auto;
  min-height: 8px;
  border-radius: 12px 12px 4px 4px;

  background: linear-gradient(180deg, #dcbb6b 0%, #c9a24a 100%);
  transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the projection is drawn as an outline, so it never reads as a fact */
.bw-chart-col.is-projected .bw-chart-bar {
  background: repeating-linear-gradient(
    135deg,
    rgba(201, 162, 74, 0.16) 0 8px,
    rgba(201, 162, 74, 0.05) 8px 16px
  );
  border: 1px dashed rgba(201, 162, 74, 0.75);
}

.bw-chart-year {
  margin-top: 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.889em; /* was 16px */
  font-weight: 600;
  color: #0a1f4a;
}

.bw-chart-tag {
  margin-top: 3px;
  font-family: "Inter", sans-serif;
  font-size: 0.889em; /* was 16px */
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #6b7280;
}

/* ---- group company card ---------------------------------------------- */
.bw-co {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  border: 1px solid #e8e2d5;
  border-radius: 16px;
  background: #fbfaf7;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-co:hover {
  border-color: #c9a24a;
  box-shadow: 0 16px 34px -24px rgba(10, 31, 74, 0.4);
}

.bw-co-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.bw-co-flag {
  font-size: 1.111em; /* was 20px */
  line-height: 1;
}

.bw-co-country {
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-co-name {
  flex: 1 1 auto;
  margin: 0 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  line-height: 1.45;
  color: #0a1f4a;
}

.bw-co-foot {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #efe9dc;
}

.bw-co-date {
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

.bw-co-usd {
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #0a1f4a;
  font-variant-numeric: tabular-nums;
}

/* ---- governance tile -------------------------------------------------- */
.bw-gov {
  height: 100%;
  padding: 22px;
  border: 1px solid #e8e2d5;
  border-radius: 16px;
  background: #fbfaf7;
}

.bw-gov-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 74, 0.35);
  background: rgba(201, 162, 74, 0.08);
  color: #c9a24a;
  font-size: 1em; /* was 18px */
}

.bw-gov-label {
  margin: 0 0 5px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-gov-value {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  line-height: 1.55;
  color: #0a1f4a;
}

@media (max-width: 767px) {
  .bw-chart-plot {
    height: 230px;
    gap: 10px;
  }

  .bw-chart-value {
    font-size: 1em; /* was 18px */
  }
}

/* ==========================================================================
   Balance sheet, drawn (.bw-ledger)
   --------------------------------------------------------------------------
   What the company owns on one side, what it owes and what is left on the
   other. Both sides share one ruler — the widest line across the pair — so a
   bar on the left is directly comparable with a bar on the right, which a
   table of figures never shows.
   ========================================================================== */
.bw-ledger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.bw-ledger {
  padding: 26px;
  border: 1px solid #e8e2d5;
  border-radius: 18px;
  background: #fbfaf7;
}

.bw-ledger-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.056em; /* was 19px */
  font-weight: 600;
  color: #0a1f4a;
}

.bw-ledger-note {
  margin: 5px 0 22px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

.bw-ledger-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-ledger-rows li + li {
  margin-top: 20px;
}

.bw-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}

.bw-ledger-label {
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: #0a1f4a;
}

.bw-ledger-value {
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #0a1f4a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bw-ledger-track {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: #efe9dc;
  overflow: hidden;
}

.bw-ledger-fill {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  background: var(--c);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-ledger-prior {
  display: block;
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

.bw-ledger-prior em {
  font-style: normal;
  font-weight: 600;
  color: #c9a24a;
}

/* the three figures the sheet resolves to */
.bw-ledger-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.bw-ledger-total {
  padding: 22px 24px;
  border-radius: 18px;
  /* The house gold, not a navy block — navy is the type colour here, not a
     surface. */
  background: linear-gradient(135deg, #c9a24a 0%, #b8913d 100%);
}

.bw-ledger-total-value {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.05;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.bw-ledger-total-label {
  margin: 10px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.bw-ledger-total-note {
  margin: 3px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .bw-ledger-grid,
  .bw-ledger-totals {
    grid-template-columns: 1fr;
  }
}

/* Report card rows: every column stretches to the tallest in the row, and the
   card inside fills it. Without the stretch the card's own `height: 100%`
   resolves against a column that is only as tall as its own contents, so the
   cards came out uneven wherever one had an extra line of text. */
.bw-cardrow {
  align-items: stretch !important;
}

/* The card .e-con needs NO height rule: align-items stretch equalises each
   flex line by itself, and an explicit height:100% actually breaks it on a
   WRAPPED row (100% of an auto-height multi-line parent is indefinite, so
   the card falls back to content height). The inner 100% chain is for rows
   whose visible card is markup inside a single html widget — scoped with
   :only-child so a card built from several stacked widgets (icon + heading
   + text) doesn't get every widget stretched to the full card height. */
.bw-cardrow > .e-con > .elementor-widget:only-child,
.bw-cardrow > .e-con > .elementor-widget:only-child > .elementor-widget-container {
  height: 100%;
}

/* ==========================================================================
   Year cards (.bw-year)
   --------------------------------------------------------------------------
   The profit and loss, read across rather than down: one card a year carrying
   the three lines anyone actually looks for, with the margin worked out. The
   full statement still sits underneath for the detail.
   ========================================================================== */
.bw-year {
  position: relative;
  height: 100%;
  padding: 24px 22px;
  border: 1px solid #e8e2d5;
  border-radius: 18px;
  background: #fbfaf7;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-year:hover {
  border-color: #c9a24a;
  box-shadow: 0 18px 38px -26px rgba(10, 31, 74, 0.42);
}

/* the projection reads as an outline, never as a fact */
.bw-year.is-projected {
  border-style: dashed;
  border-color: rgba(201, 162, 74, 0.75);
  background: repeating-linear-gradient(
    135deg,
    rgba(201, 162, 74, 0.05) 0 10px,
    rgba(201, 162, 74, 0.02) 10px 20px
  );
}

.bw-year-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #efe9dc;
}

.bw-year-label {
  font-family: "Poppins", sans-serif;
  font-size: 1.111em; /* was 20px */
  font-weight: 600;
  color: #0a1f4a;
}

.bw-year-tag {
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-year-line + .bw-year-line {
  margin-top: 14px;
}

.bw-year-name {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

.bw-year-value {
  display: block;
  margin-top: 2px;
  font-family: "Poppins", sans-serif;
  font-size: 1.222em; /* was 22px */
  font-weight: 600;
  line-height: 1.15;
  color: #0a1f4a;
  font-variant-numeric: tabular-nums;
}

.bw-year-value small {
  font-size: 0.55em;
  font-weight: 500;
  color: #c9a24a;
  margin-left: 2px;
}

.bw-year-margin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.12);
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #a37f2c;
}

/* ==========================================================================
   Offices list, restyled
   --------------------------------------------------------------------------
   The flag sits in its own tile, the country and its role share a line, and
   the address sits quietly under them. A gold rule marks the chosen office,
   and the panel carries a heading so the list says what it is.
   ========================================================================== */
.bw-offices-list {
  width: 380px;
  max-height: 420px;
  padding: 0;
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(10, 31, 74, 0.45);
  scrollbar-width: thin;
  scrollbar-color: #ded6c4 transparent;
}

.bw-offices-list::before {
  content: "Our offices · eight countries";
  display: block;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 15px 18px 12px;
  border-bottom: 1px solid #efe9dc;
  background: #fbfaf7;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-offices-list li {
  position: relative;
  align-items: center;
  gap: 13px;
  margin: 6px;
  padding: 12px 14px;
  border-radius: 12px;
}

/* the chosen office keeps a gold rule down its edge */
.bw-offices-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: #c9a24a;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bw-offices-list li.is-active::before {
  opacity: 1;
}

.bw-offices-list .bw-office-flag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid #e8e2d5;
  background: #ffffff;
  font-size: 1.056em; /* was 19px */
}

.bw-offices-list .bw-office-name {
  font-size: 1em; /* was 18px */
  font-weight: 600;
}

.bw-offices-list .bw-office-role {
  margin-top: 2px;
  font-size: 1em; /* was 18px */
  letter-spacing: 1.1px;
}

.bw-offices-list .bw-office-address {
  margin-top: 5px;
  font-size: 1em; /* was 18px */
  line-height: 1.45;
}

.bw-offices-list::-webkit-scrollbar {
  width: 8px;
}

.bw-offices-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: #ded6c4;
}

@media (max-width: 1024px) {
  .bw-offices-list {
    width: 310px;
  }
}

/* Every category on one line. The names are proper nouns — breaking "Building
   Materials & Finishes" across two lines makes the column look ragged and the
   list harder to scan — so the name never wraps and the two columns take the
   width their contents need. */
.bw-panel-grid {
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(24px, 3vw, 56px);
}

.bw-panel-grid .bw-panel-name {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .bw-panel-grid {
    grid-template-columns: max-content;
  }
}

/* ==========================================================================
   Homepage header, settled
   --------------------------------------------------------------------------
   Two elements paint here: the section the header template renders into, and
   the bar inside it. Elementor writes the section's colour in its own
   per-element stylesheet, so both have to be named or the bar goes clear while
   the section behind it stays white.

   `body.page-id-6` rather than `.page-id-6` — the element plus the class
   outranks anything the earlier blocks in this file set on the same pair.
   ========================================================================== */
body.page-id-6 .ehf-header .elementor-section,
body.page-id-6 .bw-header,
body.page-id-6 .bw-header-pill,
body.page-id-6 .elementor-38 > .e-con {
  background-color: transparent !important;
}

body.page-id-6.bw-scrolled .ehf-header .elementor-section,
body.page-id-6.bw-scrolled .bw-header,
body.page-id-6.bw-scrolled .bw-header-pill,
body.page-id-6.bw-scrolled .elementor-38 > .e-con {
  background-color: #fbfaf7 !important;
}

body.page-id-6 .bw-head-logo img {
  filter: brightness(0) invert(1) !important;
}

body.page-id-6.bw-scrolled .bw-head-logo img {
  filter: none !important;
}

/* The offices button and the contact button are a pair on the same row, so
   they carry the same height. The theme's own button rules were padding this
   one out to 57px against the contact button's 48px. */
/* Same pill as the contact button beside it — same height, and a radius that
   matches rather than a shallower one that reads as a different component. */
.bw-offices .bw-offices-button {
  box-sizing: border-box;
  height: 48px;
  min-height: 0;
  padding: 0 18px;
  /* 18px, the same corner the contact button beside it uses */
  border-radius: 18px;
  line-height: 1;
}

/* The categories column is the widest thing in the panel — twelve names that
   must not wrap — so the grid gives it the room it needs and the brand and nav
   columns take what is left, rather than all three sharing evenly and the
   names running off the edge. */
.bw-menu-body {
  grid-template-columns: minmax(190px, 0.85fr) minmax(190px, 0.95fr) minmax(600px, 1.9fr);
}

.bw-panel-grid {
  column-gap: 26px;
}

.bw-panel-grid a {
  padding: 4px 10px;
}

@media (max-width: 1280px) {
  .bw-menu-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  /*
   * The brand and the navigation stack in the first column rather than
   * taking one each. The brand is a logo and a single line, so its own
   * column stood 427 wide and 472 tall with nothing in it, and the
   * navigation was pushed to x=520 — across the logo in the bar behind.
   */
  .bw-menu-brand,
  .bw-menu-nav {
    grid-column: 1;
  }

  .bw-menu-sub {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 1024px) {
  .bw-menu-body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Header, responsive
   --------------------------------------------------------------------------
   Three zones down to a phone. What gives way, in order: the offices label
   (the flag still says which country), then the contact button's text, then
   the button itself — the hamburger and the mark never go, because between
   them they are the whole navigation.
   ========================================================================== */
@media (max-width: 1200px) {
  .bw-header.bw-header-pill {
  }

  .bw-head-right {
    gap: 10px !important;
  }
}

@media (max-width: 1024px) {
  /* logo width: set on the image widget in the header template (width /
     width_tablet / width_mobile), not here */

  .bw-offices .bw-offices-button {
    height: 44px;
    padding: 0 13px;
  }

  .bw-head-cta .elementor-button {
    min-height: 44px !important;
  }

  /* the panel drops to two columns, categories across the bottom */
  .bw-menu-scroll {
    padding: 20px clamp(18px, 4vw, 40px) 0;
  }

  .bw-menu-primary a,
  .bw-menu-primary button.bw-menu-toggle {
    font-size: clamp(24px, 4.6vw, 32px);
  }
}

@media (max-width: 767px) {
  /* Matches the rule further down that used to override this one — both
     say 16 now, so it no longer matters which lands last. */
  .bw-header.bw-header-pill {
    gap: 10px !important;
  }

  /* 44px is the smallest comfortable target; the reference uses 48 */
  button.bw-burger {
    width: 44px;
    height: 44px;
  }


  /* the flag alone is enough at this width */
  .bw-offices .bw-offices-button {
    height: 44px;
    padding: 0 11px;
    gap: 6px;
  }

  /*
   * The panel hangs off the button it belongs to, the same as it does on a
   * desktop. It had been pinned to the viewport with left and right both
   * set, and since .bw-langs gives it a fixed 218px the left edge won — so
   * a panel belonging to a button on the right opened on the left.
   */
  .bw-offices-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }

  /*
   * No contact button at this width. Icon-only it still measured 65px —
   * a 38px badge inside 14px padding — and with 37px of language button
   * beside it the pair needed 112px in an 86px zone. The surplus ran
   * backwards over the logo. The reference carries no button here either,
   * and Contact is the last item in the panel, so nothing is lost.
   */
  .bw-head-cta {
    display: none !important;
  }

  .bw-menu-brand img {
    width: 140px;
  }

  .bw-menu-foot {
    gap: 14px;
    padding-bottom: 20px;
  }

  .bw-menu-foot-spacer {
    display: none;
  }
}

@media (max-width: 380px) {
  .bw-offices .bw-offices-button {
    padding: 0 9px;
  }

  .bw-offices-chevron {
    display: none;
  }
}

/* The bar is one row at every width. Elementor lets its containers wrap, and
   with the two side columns set to share the free space the three zones fell
   onto three lines on a phone — a 164px header. */
.bw-header.bw-header-pill {
  flex-wrap: nowrap !important;
}

.bw-head-left,
.bw-head-logo,
.bw-head-right {
  flex-wrap: nowrap !important;
}

.bw-head-right {
  flex-direction: row !important;
}


/* Inside the nav item on a phone, the list is a panel of its own rather than a
   column: indented under the button that opened it, and scrollable so a long
   list never pushes the footer off the screen. */
@media (max-width: 1024px) {
  .bw-menu-primary .bw-menu-sub {
    margin: 14px 0 18px;
    padding: 16px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    max-height: 46vh;
    overflow-y: auto;
  }

  .bw-menu-primary .bw-menu-sub .bw-menu-heading {
    margin-bottom: 10px;
  }

  .bw-menu-primary .bw-panel-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .bw-menu-primary .bw-menu-all {
    margin-top: 14px;
  }
}

@media (max-width: 767px) {

  /* the header's own button keeps its compact shape */
  .bw-head-cta .elementor-button {
    width: auto;
  }

  .bw-head-cta .elementor-button-icon {
    position: static;
    transform: none;
  }
}

/* ==========================================================================
   Header zones
   --------------------------------------------------------------------------
   The mark never shrinks — it is the one thing on the bar that has to be
   there. The two side columns take whatever is left, equally, which is what
   puts the mark on the centre line whatever width the offices selector or the
   contact button happen to be. Below that, when the sides no longer fit,
   they stop growing and simply hold their own contents.
   ========================================================================== */
.bw-head-logo {
  /*
   * Sized to the mark, not to the row. Elementor gives every child
   * container width:100%, which let this zone take the whole pill and
   * squeezed the two side columns to nothing; their contents — the burger
   * on one side, the language button and the CTA on the other — then
   * rendered outside the pill and, below roughly 1100px, outside the
   * viewport: 56px past the edge at 768, 19px at 390. On a wide screen it
   * went unnoticed because the zone was mostly empty space.
   */
  width: auto !important;
  flex: 0 1 auto !important;
  min-width: 0;
}

.bw-head-logo img {
  display: block;
  max-width: none;
}


/* ==========================================================================
   Header row — the one rule that lays it out
   ========================================================================== */
.bw-header.bw-header-pill {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.bw-head-left,
.bw-head-right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.bw-head-left {
  justify-content: flex-start !important;
}

.bw-head-right {
  flex-direction: row !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* the mark holds the middle and never collapses */
.bw-head-logo {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bw-head-logo img {
  display: block;
  max-width: none;
}

/* nothing in the side zones may be squeezed out of shape */
.bw-head-left > *,
.bw-head-right > *,
.bw-offices,
.bw-head-cta {
  flex: 0 0 auto !important;
}

/* The side zones share the free space and may shrink with it; what is inside
   them simply never wraps. That keeps the row within the bar at every width
   without a max-content floor forcing the bar wider than its container. */
.bw-head-left,
.bw-head-right {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.bw-head-right > * {
  flex: 0 0 auto !important;
}
/* ==========================================================================
   Header bar, final geometry
   --------------------------------------------------------------------------
   Two things were left over from the previous header: the bar's side padding
   had been zeroed for a pill that no longer exists, so the contact button sat
   on the viewport edge; and each zone's Elementor widget wrapper is full width
   with its contents centred, which held the hamburger 250px in from the left
   instead of at the start of its zone.
   ========================================================================== */
.bw-header.bw-header-pill {
}

/* the wrappers size to what is in them, so each zone's own alignment decides
   where its control sits */
.bw-head-left > .elementor-widget,
.bw-head-right > .elementor-widget,
.bw-head-left > .elementor-widget > .elementor-widget-container,
.bw-head-right > .elementor-widget > .elementor-widget-container {
  width: auto !important;
  text-align: left;
}

@media (max-width: 1024px) {
  .bw-header.bw-header-pill {
  }
}

@media (max-width: 767px) {
  /* the bar holds the whole side inset now — the band's is zeroed below */
  .bw-header.bw-header-pill {
  }
}

/* The hamburger sits on the left edge of its zone. Elementor's widget wrapper
   is a flex item that grows to fill the zone, and the button centres inside
   it — `margin-right: auto` inside a zero-basis wrapper is what actually pins
   the control to the start, whatever the wrapper does. */
.bw-head-left {
  justify-content: flex-start !important;
}

.bw-head-left > * {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

.bw-head-left .bw-burger {
  margin-left: 0 !important;
}

/* The `nowrap` that keeps the header row on one line must not reach inside the
   offices panel — the addresses there are full postal lines, and unable to wrap
   they pushed the panel into a horizontal scroll. */
.bw-offices-list,
.bw-offices-list li,
.bw-offices-list .bw-office-text,
.bw-offices-list .bw-office-name,
.bw-offices-list .bw-office-role,
.bw-offices-list .bw-office-address {
  white-space: normal !important;
}

.bw-offices-list {
  overflow-x: hidden;
}

.bw-offices-list .bw-office-text {
  min-width: 0;
  flex: 1 1 auto;
}

.bw-offices-list .bw-office-address {
  overflow-wrap: anywhere;
}

/* The scrolled header's hairline runs the full width of the window.
   It was on the bar, and the bar is capped at the page measure, so the rule
   stopped short of both edges. The section behind it is full width, so the
   border belongs there — and the bar gives its own up. */
.elementor-38 > .e-con {
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease;
}

body.bw-scrolled .elementor-38 > .e-con {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.bw-header.bw-header-pill {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* The group cards on /group/ are links, so they take the card's hover as well
   as its shape and drop the underline a bare anchor would carry. */
a.bw-co-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

a.bw-co-link:hover .bw-co-name {
  color: #b8913d;
}

/* ==========================================================================
   Footer, four columns
   ========================================================================== */
.bw-foot-heading {
  margin: 0 0 14px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-foot-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-foot-links li + li {
  margin-top: 9px;
}

.bw-foot-links a {
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #2f3133;
  text-decoration: none;
  transition: color 0.25s ease;
}

.bw-foot-links a:hover {
  color: #b8913d;
}

.bw-foot-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #e2dbc9;
}

.bw-foot-copy {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.889em; /* was 16px */
  color: #6b7280;
}

.bw-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.bw-foot-legal a {
  font-family: "Inter", sans-serif;
  font-size: 0.889em; /* was 16px */
  color: #6b7280;
  text-decoration: none;
  transition: color 0.25s ease;
}

.bw-foot-legal a:hover {
  color: #b8913d;
}

@media (max-width: 1024px) {
  .bw-foot-row > .e-con {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 640px) {
  .bw-foot-row > .e-con {
    width: 100% !important;
  }

  .bw-foot-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Timeline (.bw-timeline)
   --------------------------------------------------------------------------
   A dated spine with the milestones alternating either side of it. The line is
   drawn on the list, the dots sit on it, and each card is an ordinary block —
   nothing here needs a library, and the dates stay selectable text.

   Below the desktop breakpoint the whole thing folds to one side of the line,
   which is the only arrangement that stays readable on a phone.
   ========================================================================== */
.bw-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the spine */
.bw-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    180deg,
    rgba(201, 162, 74, 0) 0%,
    rgba(201, 162, 74, 0.55) 8%,
    rgba(201, 162, 74, 0.55) 92%,
    rgba(201, 162, 74, 0) 100%
  );
}

.bw-tl-item {
  position: relative;
  width: 50%;
  padding-right: 48px;
  margin-bottom: 34px;
}

.bw-tl-item:nth-child(even) {
  margin-left: 50%;
  padding-right: 0;
  padding-left: 48px;
}

.bw-tl-item:last-child {
  margin-bottom: 0;
}

/* the year, printed where it changes */
.bw-tl-year {
  position: absolute;
  top: -34px;
  right: 48px;
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 2px;
  color: #c9a24a;
}

.bw-tl-item:nth-child(even) .bw-tl-year {
  right: auto;
  left: 48px;
}

/* the dot on the spine */
.bw-tl-dot {
  position: absolute;
  top: 20px;
  right: -21px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #e8e2d5;
  background: #fbfaf7;
  box-shadow: 0 0 0 6px #fbfaf7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bw-tl-item:nth-child(even) .bw-tl-dot {
  right: auto;
  left: -21px;
}

.bw-tl-flag {
  font-size: 1.056em; /* was 19px */
  line-height: 1;
}

.bw-tl-card {
  padding: 22px 24px;
  border: 1px solid #e8e2d5;
  border-radius: 16px;
  background: #fbfaf7;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-tl-card:hover {
  border-color: #c9a24a;
  box-shadow: 0 20px 40px -28px rgba(10, 31, 74, 0.42);
  transform: translateY(-2px);
}

.bw-tl-date {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-tl-place {
  margin: 6px 0 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.056em; /* was 19px */
  font-weight: 600;
  color: #0a1f4a;
}

.bw-tl-entity {
  margin: 3px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

.bw-tl-note {
  margin: 12px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.65;
  color: #2f3133;
}

.bw-tl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #b8913d;
  text-decoration: none;
}

.bw-tl-link i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-tl-card:hover .bw-tl-link i {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .bw-timeline::before {
    left: 21px;
  }

  .bw-tl-item,
  .bw-tl-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 62px;
    padding-right: 0;
  }

  .bw-tl-dot,
  .bw-tl-item:nth-child(even) .bw-tl-dot {
    left: 0;
    right: auto;
  }

  .bw-tl-year,
  .bw-tl-item:nth-child(even) .bw-tl-year {
    left: 62px;
    right: auto;
  }
}

/* ==========================================================================
   Numbered step (.bw-step)
   --------------------------------------------------------------------------
   The four stages an order runs through. The number is the largest thing on
   the card and sits behind the icon, so the sequence reads before the detail.
   ========================================================================== */
.bw-step {
  position: relative;
  height: 100%;
  padding: 26px 22px 22px;
  border: 1px solid #e8e2d5;
  border-radius: 18px;
  background: #fbfaf7;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-step:hover {
  border-color: #c9a24a;
  box-shadow: 0 18px 38px -26px rgba(10, 31, 74, 0.42);
}

.bw-step-no {
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  color: rgba(201, 162, 74, 0.16);
}

.bw-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 74, 0.35);
  background: rgba(201, 162, 74, 0.08);
  color: #c9a24a;
  font-size: 1em; /* was 18px */
}

.bw-step-title {
  position: relative;
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-size: 1.222em; /* was 22px */
  font-weight: 600;
  line-height: 1.3;
  color: #0a1f4a;
}

.bw-step-note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.6;
  color: #2f3133;
}

/* ==========================================================================
   Market card (.bw-market)
   ========================================================================== */
.bw-market {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e8e2d5;
  border-radius: 18px;
  background: #fbfaf7;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-market:hover {
  border-color: #c9a24a;
  box-shadow: 0 20px 44px -28px rgba(10, 31, 74, 0.45);
}

.bw-market-photo {
  height: 180px;
  background-size: cover;
  background-position: center;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-market:hover .bw-market-photo {
  transform: scale(1.06);
}

.bw-market-body {
  flex: 1 1 auto;
  padding: 20px 22px 24px;
}

.bw-market-name {
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-size: 1.056em; /* was 19px */
  font-weight: 600;
  color: #0a1f4a;
}

.bw-market-note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.6;
  color: #2f3133;
}

/* ---- person card ------------------------------------------------------ */
.bw-person {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px;
  border: 1px solid #e8e2d5;
  border-radius: 16px;
  background: #fbfaf7;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-person:hover {
  border-color: #c9a24a;
  box-shadow: 0 18px 38px -26px rgba(10, 31, 74, 0.42);
}

.bw-person-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, 0.4);
  background: rgba(201, 162, 74, 0.09);
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #c9a24a;
}

.bw-person-name {
  margin: 0 0 5px;
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  line-height: 1.25;
  color: #0a1f4a;
}

.bw-person-role {
  margin: 0 0 14px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-person-note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.6;
  color: #2f3133;
}

/* an office card that is also a link through to the group company */
a.bw-co-link {
  text-decoration: none;
  color: inherit;
}

a.bw-co-link .bw-co-usd {
  color: #c9a24a;
  font-size: 1em; /* was 18px */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

a.bw-co-link:hover .bw-co-usd {
  transform: translateX(4px);
}

/* ---- sitemap page ------------------------------------------------------ */
.bw-sm-col {
  height: 100%;
}

.bw-sm-heading {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e2d5;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-sm-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* the product tree is long, so it reads as columns rather than one drop */
  columns: 1;
}

.bw-sm-list a {
  display: block;
  padding: 5px 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.5;
  color: #2f3133;
  text-decoration: none;
  transition: color 0.25s ease;
}

.bw-sm-list a:hover {
  color: #c9a24a;
}

.bw-sm-l1 > a {
  font-weight: 600;
  color: #0a1f4a;
}

.bw-sm-l2 > a {
  padding-left: 14px;
  border-left: 1px solid #efe9dc;
}

/* the products column carries every line, so it splits across the page */
.bw-sm-col:only-child .bw-sm-list {
  columns: 4;
  column-gap: 32px;
}

.bw-sm-col:only-child .bw-sm-list li {
  break-inside: avoid;
}

@media (max-width: 1024px) {
  .bw-sm-col:only-child .bw-sm-list {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .bw-sm-col:only-child .bw-sm-list {
    columns: 1;
  }
}

/*
 * Equal card heights without having to tag every row.
 *
 * The cards carry height:100%, but that only resolves when everything above
 * them stretches too: the row, the column, and the widget in between. Elementor
 * writes its own per-element rules at a higher specificity, which is why
 * .bw-cardrow already had to shout — these need the same.
 *
 * The widget is matched with a descendant :has() rather than a fixed child
 * chain: Elementor emits the card inside .elementor-widget-container on some
 * pages and directly inside .elementor-widget on others, and a chain written
 * for one shape silently misses the other.
 */
.e-con:has(> .e-con > .elementor-widget .bw-figure),
.e-con:has(> .e-con > .elementor-widget .bw-gov),
.e-con:has(> .e-con > .elementor-widget .bw-co),
.e-con:has(> .e-con > .elementor-widget .bw-ledger),
.e-con:has(> .e-con > .elementor-widget .bw-step),
.e-con:has(> .e-con > .elementor-widget .bw-person) {
  align-items: stretch !important;
}

.e-con > .e-con:has(> .elementor-widget .bw-figure),
.e-con > .e-con:has(> .elementor-widget .bw-gov),
.e-con > .e-con:has(> .elementor-widget .bw-co),
.e-con > .e-con:has(> .elementor-widget .bw-ledger),
.e-con > .e-con:has(> .elementor-widget .bw-step),
.e-con > .e-con:has(> .elementor-widget .bw-person) {
  align-self: stretch !important;
  height: auto !important;
}

.e-con > .e-con > .elementor-widget:has(.bw-figure),
.e-con > .e-con > .elementor-widget:has(.bw-gov),
.e-con > .e-con > .elementor-widget:has(.bw-co),
.e-con > .e-con > .elementor-widget:has(.bw-ledger),
.e-con > .e-con > .elementor-widget:has(.bw-step),
.e-con > .e-con > .elementor-widget:has(.bw-person),
.e-con > .e-con > .elementor-widget:has(.bw-figure) > .elementor-widget-container,
.e-con > .e-con > .elementor-widget:has(.bw-gov) > .elementor-widget-container,
.e-con > .e-con > .elementor-widget:has(.bw-co) > .elementor-widget-container,
.e-con > .e-con > .elementor-widget:has(.bw-ledger) > .elementor-widget-container,
.e-con > .e-con > .elementor-widget:has(.bw-step) > .elementor-widget-container,
.e-con > .e-con > .elementor-widget:has(.bw-person) > .elementor-widget-container {
  height: 100% !important;
}

.bw-figure,
.bw-gov,
.bw-co,
.bw-ledger,
.bw-step,
.bw-person {
  height: 100%;
}

/* the ledger card was the one still sizing to its own contents */
.bw-ledger {
  display: flex;
  flex-direction: column;
}

/*
 * The cards, charts and tables are printed by shortcodes (functions.php), and
 * Elementor's Shortcode widget wraps whatever a shortcode prints in one more
 * div. Taking that div's box away puts each card straight inside the widget,
 * where the equal-height chain above expects it.
 */
.elementor-shortcode:has(> .bw-figure, > .bw-gov, > .bw-step, > .bw-flagcard, > .bw-co, > .bw-tm, > .bw-chart, > .bw-fin-wrap, > .bw-ledger-grid, > .bw-timeline, > .bw-sm-col) {
  display: contents;
}

.bw-ledger-rows {
  flex: 1 1 auto;
}

/* ==========================================================================
   Team portrait cards (.bw-tm)
   --------------------------------------------------------------------------
   Name and role sit over the foot of the portrait, the way the reference site
   does it. --img takes the photograph once one is supplied; until then the
   panel carries the monogram, so the layout is already the finished one.
   ========================================================================== */
.bw-tm {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: #0a1f4a;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-tm:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -28px rgba(10, 31, 74, 0.55);
}

.bw-tm-photo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background-color: #0a1f4a;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center 22%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-tm:hover .bw-tm-photo {
  transform: scale(1.04);
}

/* the monogram only shows while there is no photograph behind it */
.bw-tm-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 46px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(201, 162, 74, 0.4);
  background: linear-gradient(160deg, #0d2757 0%, #071633 100%);
}

.bw-tm[style*="--img"] .bw-tm-mark {
  display: none;
}

/* the veil keeps the name legible whatever the photograph is doing */
.bw-tm-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 13, 36, 0) 38%,
    rgba(4, 13, 36, 0.62) 72%,
    rgba(4, 13, 36, 0.9) 100%
  );
}

.bw-tm-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 20px 20px 18px;
}

/* the body sits over the photo, so the card is the positioning context */
.bw-tm {
  position: relative;
}

.bw-tm-name {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
}

.bw-tm-role {
  display: block;
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.76);
}

.bw-tm-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #d8b869;
}

.bw-tm-more i {
  font-size: 1em; /* was 18px */
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-tm:hover .bw-tm-more i {
  transform: rotate(-45deg) translateX(3px);
}

@media (max-width: 1024px) {
  .bw-tm-row > .e-con {
    width: calc(33.333% - 16px) !important;
  }
}

@media (max-width: 767px) {
  .bw-tm-row > .e-con {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 480px) {
  .bw-tm-row > .e-con {
    width: 100% !important;
  }
}

/* ---- the profile each card links to ----------------------------------- */
.bw-bio-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bw-bio {
  display: flex;
  gap: 20px;
  padding: 24px;
  border: 1px solid #e8e2d5;
  border-radius: 16px;
  background: #fbfaf7;
  /* the cards link straight here, and the header must not sit over the name */
  scroll-margin-top: 120px;
}

.bw-bio-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, 0.4);
  background: rgba(201, 162, 74, 0.09);
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #c9a24a;
}

.bw-bio-name {
  margin: 0 0 3px;
  font-family: "Poppins", sans-serif;
  font-size: 1.056em; /* was 19px */
  font-weight: 600;
  color: #0a1f4a;
}

.bw-bio-role {
  margin: 0 0 10px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-bio-note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.7;
  color: #2f3133;
}

@media (max-width: 600px) {
  .bw-bio {
    flex-direction: column;
    gap: 14px;
  }
}

/* ==========================================================================
   Revenue chart panel (.bw-chart)
   --------------------------------------------------------------------------
   The bars alone said very little: no scale to read them against, and nothing
   separating the audited years from the projection except a dashed edge. The
   panel adds the scale down the left, gridlines behind, a key, and the growth
   spelled out underneath.
   ========================================================================== */
.bw-chart {
  margin: 0;
  padding: 26px 26px 22px;
  border: 1px solid #e8e2d5;
  border-radius: 18px;
  background: #fbfaf7;
}

.bw-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bw-chart-caption {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a24a;
  text-align: left;
}

.bw-chart-sub {
  margin: 4px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6b7280;
}

.bw-chart-key {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-chart-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #4a5670;
}

.bw-chart-swatch {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(180deg, #dcbb6b 0%, #c9a24a 100%);
}

.bw-chart-swatch.is-projected {
  background: repeating-linear-gradient(
    135deg,
    rgba(201, 162, 74, 0.2) 0 5px,
    rgba(201, 162, 74, 0.06) 5px 10px
  );
  border: 1px dashed rgba(201, 162, 74, 0.75);
}

/* the scale and the plot share one row, so the gridlines meet the numbers */
.bw-chart-body {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.bw-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
  /* 70px of headroom over the gridlines, 224px of gridline area, 74px of
     label reserve under the baseline — the plot beside it uses the same
     three numbers. Each padding is then pulled in by half a label line
     (15px): space-between pins the first label's TOP and the last label's
     BOTTOM, so without the pull-in the numbers sit half a line off their
     gridlines, in opposite directions at the two ends. */
  height: 368px;
  padding-top: 55px;
  padding-bottom: 59px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #9a9384;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bw-chart-plot {
  position: relative;
  flex: 1 1 auto;
  height: 368px;
  /* the same headroom the scale beside it has, so the two still line up */
  padding-top: 70px;
  /* four evenly spaced gridlines, drawn behind the bars */
  background-image: repeating-linear-gradient(
    to top,
    #efe9dc 0 1px,
    transparent 1px 25%
  );
  background-position: left bottom 74px;
  background-size: 100% calc(100% - 144px);
  background-repeat: no-repeat;
  padding-bottom: 0;
}

/* the baseline is drawn heavier than the gridlines above it */
.bw-chart-plot::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 74px;
  left: 0;
  height: 1px;
  background: #ddd4c0;
}

.bw-chart-col {
  position: relative;
  z-index: 1;
  padding-bottom: 74px;
}

/* The year and tag live in the 74px reserve BELOW the baseline. In flow
   they would sit inside the bar's flex column and push the whole stack up
   through the top of the panel — the bar has to end ON the baseline, so
   only the value and the bar may occupy the column. */
.bw-chart-year,
.bw-chart-tag {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.bw-chart-year {
  bottom: 34px;
}

.bw-chart-tag {
  bottom: 0;
}

.bw-chart-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #efe9dc;
}

.bw-chart-foot p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #4a5670;
}

.bw-chart-foot strong {
  font-family: "Poppins", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  color: #0a1f4a;
  margin-right: 6px;
}

@media (max-width: 600px) {
  .bw-chart {
    padding: 20px 16px 18px;
  }

  .bw-chart-axis {
    display: none;
  }
}

/*
 * The mark sits in the middle of the bar, with the hamburger at one end and
 * the offices selector and Contact at the other. The two side zones share the
 * free space equally, which is what puts the mark on the centre line rather
 * than wherever the wider zone leaves it.
 */
.bw-header-pill > .bw-head-left,
.bw-header-pill > .bw-head-right {
  flex: 1 1 0 !important;
}

.bw-header-pill > .bw-head-right {
  justify-content: flex-end;
}

.bw-header-pill > .bw-head-logo {
  flex: 0 0 auto;
}

/* ==========================================================================
   Bio modal (.bw-modal)
   --------------------------------------------------------------------------
   The portrait fills the left half, the profile the right, on the deep navy
   the reference site uses. Built once in layout.js and refilled per card.
   ========================================================================== */
/* The overlay itself scrolls, the way a Bootstrap modal does: a short card is
   centred by its auto margins, and a long one starts at the top and scrolls
   with the overlay, so a bio is never cut off. */
.bw-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bw-modal[hidden] {
  display: none;
}

/* fixed, not absolute: the overlay scrolls, and an absolute veil would scroll
   away with it and leave the page showing under the card */
.bw-modal-veil {
  position: fixed;
  inset: 0;
  background: rgb(255 255 255 / 72%);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.bw-modal.is-open .bw-modal-veil {
  opacity: 1;
}

.bw-modal-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  width: 920px;
  margin: auto;
  overflow: hidden;
  border-radius: 18px;
  background: #0d1a35;
  /* the card fades and lifts into place; layout.js adds .is-open one frame
     after the modal is shown, and takes it off 260ms before hiding it again */
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-modal.is-open .bw-modal-box {
  opacity: 1;
  transform: none;
}

.bw-modal-photo {
  position: relative;
  min-height: 380px;
  background-color: #0a1732;
  background-size: cover;
  background-position: center 22%;
}

.bw-modal-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 58px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(201, 162, 74, 0.34);
}

.bw-modal-photo.has-photo .bw-modal-mark {
  display: none;
}

/* No scrolling of its own: the overlay is the one scroll container, and a
   panel with overflow:auto here swallowed the wheel — it sits at its own edge
   with nothing to scroll, and `overscroll-behavior: contain` on it stopped the
   gesture from reaching the overlay behind. */
.bw-modal-text {
  padding: 44px 44px 40px;
}

/* Anchored to the box, not to the text panel: on a phone the panel sits under
   the portrait, and the close button went with it into the middle of the card
   instead of staying in the modal's own top corner. */
.bw-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgb(202 173 102);
  color: #ffffff;
  transition: background-color 0.25s ease;
}

/* Stays gold on hover and focus, only a shade deeper. Written with the element
   in front so it outweighs the opt-out rule further down, which sets these two
   states to `inherit` and turned the button navy against the card. */
button.bw-modal-close:hover,
button.bw-modal-close:focus,
button.bw-modal-close:focus-visible {
  background-color: rgb(184 154 84);
  color: #ffffff;
}

.bw-modal-text button {
  padding: 5px;
}

.bw-modal-name {
  margin: 0 60px 6px 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.667em; /* was 30px */
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
}

.bw-modal-role {
  margin: 0 0 22px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #d8b869;
}

.bw-modal-bio {
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 767px) {
  /* portrait over profile on a phone; height is left to the content, and a
     long card scrolls with the overlay */
  .bw-modal-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .bw-modal-photo {
    min-height: 200px;
  }

  .bw-modal-text {
    padding: 28px 24px 30px;
  }

  .bw-modal-name {
    font-size: 1.333em; /* was 24px */
  }
}

/*
 * The mark's box is centred in the bar to the pixel, but the artwork sits high
 * inside its own canvas — there is more clear space under the wordmark than
 * over it — so it reads as riding up. A three-pixel nudge centres the ink
 * without touching the row's height.
 */
.bw-head-logo img {
  position: relative;
  top: 3px;
}

/*
 * The parent theme paints every <button> pink on hover and focus:
 *
 *   button:hover, button:focus { background-color: #cc3366; color: #fff }
 *
 * It is a blanket element rule, so it caught the location selector, the panel
 * close and everything else built as a real button. The site's own controls opt
 * out of it here and state their own hover instead.
 */
button.bw-offices-button:hover,
button.bw-offices-button:focus,
button.bw-menu-close:hover,
button.bw-menu-close:focus,
button.bw-menu-toggle:hover,
button.bw-menu-toggle:focus,
button.bw-to-top:hover,
button.bw-to-top:focus,
button.bw-burger:hover,
button.bw-burger:focus {
  background-color: inherit;
  color: inherit;
}

/* the location selector: the site's ink behind white, not the theme's pink */
button.bw-offices-button:hover,
button.bw-offices-button:focus,
button.bw-offices-button:focus-visible,
.bw-offices.is-open button.bw-offices-button {
  background-color: #0a1f4a;
  border-color: #0a1f4a;
  color: #ffffff;
}

.bw-offices.is-open button.bw-offices-button .bw-offices-label,
button.bw-offices-button:hover .bw-offices-label,
button.bw-offices-button:hover .bw-offices-current,
button.bw-offices-button:focus .bw-offices-current,
.bw-offices.is-open button.bw-offices-button .bw-offices-current {
  color: #ffffff;
}

button.bw-offices-button:hover > i,
button.bw-offices-button:focus > i,
.bw-offices.is-open button.bw-offices-button > i {
  color: #ffffff;
}

button.bw-offices-button:hover .bw-offices-chevron,
.bw-offices.is-open button.bw-offices-button .bw-offices-chevron {
  border-color: #ffffff;
}

/* the close button in the panel keeps its own translucent white */
button.bw-menu-close:hover,
button.bw-menu-close:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* and the hamburger keeps the gold it was given */
button.bw-burger:hover,
button.bw-burger:focus {
  background-color: #b08c39;
  border-color: #b08c39;
  color: #ffffff;
}



/* A footer line whose page is not ready yet: the label stays so the structure
   still reads, but there is nothing to click. */
.bw-foot-links .bw-foot-soon {
  display: block;
  padding: 5px 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.5;
  color: #2f3133;
  cursor: default;
}

/* A menu item whose page is not finished. It is an anchor so it inherits the
   menu's own type and colour rather than shrinking to a bare span; it points at
   # and the cursor says there is nothing behind it. */
.bw-menu-primary a.bw-menu-soon {
  cursor: default;
}

/* The breadcrumb in a page banner: the theme paints every link a pink that has
   nothing to do with this site. The trail reads in the site's own ink, with the
   links picked out in gold on hover. */
.elementor-widget-text-editor .bw-crumb a,
.e-con .elementor-widget-text-editor p a[href*="/products/"],
.e-con .elementor-widget-text-editor p a[href$="/bluewaterlogitrade/"] {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.e-con .elementor-widget-text-editor p a[href*="/products/"]:hover,
.e-con .elementor-widget-text-editor p a[href$="/bluewaterlogitrade/"]:hover {
  color: #c9a24a;
}

/* ==========================================================================
   404 (.bw-404)
   --------------------------------------------------------------------------
   Built to the same banner treatment as every other page: the cream band, the
   gold eyebrow, a navy heading with its back half in gold. Underneath, the
   routes someone who mistyped a URL actually wants.
   ========================================================================== */
.bw-404-band {
  padding: 96px 24px 72px;
  background: #f4f1e9;
  text-align: center;
}

.bw-404-inner {
  width: min(820px, 100%);
  margin: 0 auto;
}

.bw-404-eyebrow {
  margin: 0 0 14px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c9a24a;
}

.bw-404-title {
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  color: #0a1f4a;
}

.bw-404-title span {
  color: #c9a24a;
}

.bw-404-asked {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #4a5670;
}

.bw-404-asked code,
.bw-404-body code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(201, 162, 74, 0.13);
  font-family: "Inter", sans-serif;
  font-size: 0.94em;
  color: #0a1f4a;
}

.bw-404-body {
  margin: 0 auto 30px;
  max-width: 620px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.75;
  color: #3d4a5c;
}

/* As an Elementor text widget the class sits on the wrapper, and Elementor
   widths and line-heights apply to the box inside it, so the measure is set on
   both. On the fallback markup the second selector matches nothing. */
.bw-404-body.elementor-widget,
.bw-404-body > .elementor-widget-container {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}

.bw-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* The site's two button shapes. The 404 page is an Elementor page now, so a
   button here is an Elementor button and the class sits on its wrapper, with
   the real <a> inside. The template still prints a plain <a class="bw-404-btn">
   when no such page exists, so both shapes are named and neither inherits the
   other's padding. */
a.bw-404-btn,
.bw-404-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  /* Elementor's button sets line-height 1 and uppercases the label; this shape
     never did either, so both are named here rather than left to chance */
  line-height: 1.65;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

a.bw-404-btn-gold,
.bw-404-btn-gold .elementor-button {
  background: #c9a24a;
  border-color: #c9a24a;
  color: #ffffff;
}

a.bw-404-btn-gold:hover,
.bw-404-btn-gold .elementor-button:hover {
  background: #b08c39;
  border-color: #b08c39;
  color: #ffffff;
}

a.bw-404-btn-plain,
.bw-404-btn-plain .elementor-button {
  background: transparent;
  border-color: #c9a24a;
  color: #0a1f4a;
}

a.bw-404-btn-plain:hover,
.bw-404-btn-plain .elementor-button:hover {
  background: rgba(201, 162, 74, 0.12);
  color: #0a1f4a;
}

/* ---- the lines underneath ---------------------------------------------- */
.bw-404-lines {
  padding: 56px 24px 72px;
  background: #fbfaf7;
}

.bw-404-lines-head {
  margin: 0 0 20px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a24a;
  text-align: center;
}

.bw-404-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bw-404-list a {
  display: block;
  padding: 15px 18px;
  border: 1px solid #e8e2d5;
  border-radius: 12px;
  background: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  color: #0a1f4a;
  text-decoration: none;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-404-list a:hover {
  border-color: #c9a24a;
  box-shadow: 0 14px 30px -22px rgba(10, 31, 74, 0.4);
}

.bw-404-list-all a {
  background: rgba(201, 162, 74, 0.1);
  border-color: rgba(201, 162, 74, 0.4);
  font-weight: 600;
}

@media (max-width: 600px) {
  .bw-404-band {
    padding: 64px 18px 52px;
  }

  .bw-404-lines {
    padding: 40px 18px 56px;
  }
}

/* The bar's height, set on the row itself so the mark, the selector and the
   button all centre inside it. */
.bw-header-pill {
  min-height: 78px;
}

/* ---- the language switcher ------------------------------------------- */
/* Its list has no addresses in it, so the rows are shorter than the office
   ones were and the panel does not need the same width. */
.bw-langs .bw-offices-list {
  min-width: 232px;
}

.bw-langs .bw-office-name {
  font-size: 1em; /* was 18px */
}

.bw-langs .bw-office-role {
  font-size: 1em; /* was 18px */
  text-transform: none;
  letter-spacing: 0;
}

/* Google's element inserts a banner frame and shifts the page down by 40px.
   The switcher is the site's own, so the frame stays out of sight. */
.skiptranslate,
#goog-gt-tt,
.goog-te-banner-frame,
#bw-translate-mount {
  display: none !important;
}

body {
  top: 0 !important;
}

/* it also marks translated runs with a background and an underline */
font[style],
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/*
 * A wrapping card row whose last line is short — seven cards in a four-wide
 * grid leaves three — sits those three against the left edge with a gap where
 * the fourth would be. Centring the line puts the short row under the middle of
 * the one above it. A full line fills the width, so this changes nothing there.
 */
.bw-cardrow {
  justify-content: center;
}

/* ---- the language panel, sized for language rows -----------------------
   The offices list carried a name, a role and a full street address, so its
   rows were tall and the panel wide. A language row is two short lines, so the
   whole thing comes in and the header says what it is. */
.bw-langs .bw-offices-list {
  width: 218px;
  max-height: none;
  padding: 5px;
  border-radius: 12px;
}

.bw-langs .bw-offices-list::before {
  content: "Language";
  padding: 11px 13px 9px;
  font-size: 1em; /* was 18px */
  letter-spacing: 1.3px;
}

.bw-langs .bw-offices-list li {
  gap: 10px;
  margin: 3px;
  padding: 8px 10px;
  border-radius: 9px;
}

.bw-langs .bw-offices-list .bw-office-flag {
  width: 28px;
  height: 28px;
  font-size: 1em; /* was 18px */
}

.bw-langs .bw-office-name {
  font-size: 1em; /* was 18px */
  line-height: 1.3;
}

.bw-langs .bw-office-role {
  margin-top: 1px;
  font-size: 1em; /* was 18px */
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7280;
}

/* the gold rule down the chosen row sits closer in on the tighter list */
.bw-langs .bw-offices-list li::before {
  top: 8px;
  bottom: 8px;
}

/*
 * The primary button's own shape.
 *
 * Elementor writes these per element, so a button set up on one page carried
 * the shape and every other one did not. Setting them on the class puts every
 * primary button on the same pill: the padding is tight on the right so the
 * icon badge sits inside the button rather than hanging off it.
 */
/*
 * The gold button's shape — radius, padding and type size — now lives in
 * Site Settings -> Buttons, where it can be changed from wp-admin without
 * touching this file. It was here with !important, which left those
 * controls present in the editor but inert.
 */

/*
 * The secondary button: the outline next to the gold one.
 *
 * Its look lived in each element's own Elementor rule, so a button added on one
 * page came out different from the same button on another. Setting it on the
 * class puts them all on the same outline, and it shouts for the same reason
 * the primary one does — Elementor's per-element rule is more specific than a
 * class pair.
 */
.bw-btn-muted .elementor-button,
.bw-btn-outline .elementor-button {
  background-color: transparent !important;
  color: #0a1f4a !important;
  fill: #0a1f4a !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #c9a24a !important;
  border-radius: 16px !important;
  padding: 15px 24px !important;
  /* no font-size here: 18px !important beat the widget's own typography and
     left the Elementor mobile step inert. Size comes from Site Settings >
     Buttons and the widget, like every other button. */
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.bw-btn-muted .elementor-button:hover,
.bw-btn-outline .elementor-button:hover {
  background-color: rgba(201, 162, 74, 0.12) !important;
  border-color: #c9a24a !important;
  color: #0a1f4a !important;
}

/*
 * A band is full width; the block inside it is capped at the site's content
 * width. Without auto margins that block sits against the left edge, and on a
 * wide screen the whole page reads as though it has slipped sideways — the gap
 * only shows on the right. Auto margins centre it, and do nothing at all to a
 * child that is already full width.
 */
.e-con.e-parent > .e-con {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Category grid on a tablet
   --------------------------------------------------------------------------
   Elementor holds a tablet width of 100% for these cards, so from 1024 all the
   way down the twelve of them ran one to a row: each card 961px wide at 1024
   and the section 6812px tall against 2647px on a desktop. Two to a row is the
   size the card was drawn for — at 767 that takes the photograph back from a
   2.18 letterbox to a square. The gap is 32px, so each card gives up half of
   it. It stops at 600, below which one column is the right answer.

   Elementor writes its own width as a custom property from a three-class
   selector, which outranks anything reasonable here, so the property is set
   with !important rather than by piling on more classes. Confined to the
   tablet range: the desktop grid is untouched.
   ========================================================================== */
@media (min-width: 600px) and (max-width: 1024px) {
  .page-id-6 .bw-cat-card {
    --width: calc(50% - 16px) !important;
  }
}


/* ==========================================================================
   Hero and header below 1025
   --------------------------------------------------------------------------
   Elementor writes these as custom properties from a three-class selector, so
   !important is what wins here rather than a longer selector.
   ========================================================================== */

/*
 * The bar keeps its own height instead of floating in a 233px band. Only the
 * vertical padding goes: the horizontal padding is what holds the bar off the
 * screen edges, since the pill has no margin of its own at this width.
 */


/* On a phone the band runs edge to edge and the bar inside it carries the
   16px inset, so the two are not added together. */


/*
 * Room for the bar at the top of the hero. The header is `fixed` on the front
 * page — it is out of flow, so nothing else reserves that space — and the hero
 * centres its content, which on a short window pushed the eyebrow and the
 * headline up behind the bar. 100px clears the 88px bar with a little air.
 *
 * The hero is min-height, not height, so on a window too short to hold both
 * the hero grows rather than clipping.
 */
@media (max-width: 1024px) {
  .page-id-6 .elementor-6 > .e-con:first-child {
    --padding-top: 100px !important;
  }
}

/* A short desktop window needs nothing: the desktop hero already carries
   142px of top padding, which clears the 88px bar on its own. Measured at
   1425x640 — eyebrow at 142, bar ending at 88. Only the tablet padding of
   60px was too small, which is what the rule above corrects. */

/*
 * The two hero buttons go back to their own width and sit side by side, as
 * they do on a desktop. Full-width buttons are right on a phone, so this stops
 * at 768 and the mobile setting stands.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* The width sits on the container that wraps each button, not on the
     button widget, so the wrapper is what has to be named. :has keeps it
     off the element ids, which change if the section is ever rebuilt. */
  .page-id-6 .elementor-6 .e-con:has(> .bw-btn) {
    --width: fit-content !important;
  }
}

/* ==========================================================================
   The panel on a phone, and the hero's height
   --------------------------------------------------------------------------
   Both measured against trafigura.com at 375, which this was drawn from.
   ========================================================================== */
@media (max-width: 767px) {
  /*
   * 24px links on a 20px rhythm made nine items plus the contact block 738px
   * tall, so a 667px phone had to scroll its own menu. The reference sets
   * 13.3px on a 46px pitch and fits. 17px keeps the names readable at arm's
   * length and still brings the whole panel inside a small screen.
   */
  .bw-menu-primary a,
  .bw-menu-primary button.bw-menu-toggle {
    font-size: 1em; /* was 18px */
    line-height: 1.35;
  }

  .bw-menu-primary li + li {
    margin-top: 12px;
  }

  /*
   * The close control measured 62 wide against 46 tall. Setting a width was
   * not enough: the theme pads every button 16px/30px, and under
   * border-box that padding is a floor — 60px of padding plus two 1px
   * borders held it at 62 however small the width said. The padding has to
   * go with it.
   */
  .bw-menu-close {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex: 0 0 44px;
  }

  /* the panel's edge lines up with the bar's 16px, so the close control
     lands where the burger was rather than jumping 4px across */
  .bw-menu-scroll {
    padding: 20px 16px 0;
  }

  /* the panel filled a 667px screen exactly, with nothing to spare. These
     two bring it to about 634 so a shorter phone still holds it whole. */
  .bw-menu-body {
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .bw-menu-brand img {
    width: 118px;
  }
}

/*
 * The hero: 90vh on a desktop, sized by its contents below that.
 *
 * It carried 84vh at every width, and on a small window that squeezed the
 * copy up against the bar — at 975x650 the headline crossed the logo. Only
 * a desktop has the height to spare for a fixed proportion, so only a
 * desktop gets one; anywhere narrower the padding sets the breathing room
 * and the hero is as tall as what is in it.
 */
.page-id-6 .elementor-6 > .e-con:first-child {
  --min-height: auto !important;
  min-height: auto !important;
}

@media (min-width: 1025px) {
  .page-id-6 .elementor-6 > .e-con:first-child {
    --min-height: 90vh !important;
    min-height: 90vh !important;
  }
}

/* ==========================================================================
   The panel on a short window
   --------------------------------------------------------------------------
   Every other rule for this panel answers to width. None answered to height,
   so a wide-but-short window — a laptop with the console open, a tablet turned
   sideways — pushed the contact block below the fold: 667px of content in 569
   at 1028 wide. Type and rhythm come down together here; nothing moves on a
   window of ordinary height.
   ========================================================================== */
@media (max-height: 700px) {
  .bw-menu-primary a,
  .bw-menu-primary button.bw-menu-toggle {
    font-size: 1.167em; /* was 21px */
  }

  .bw-menu-primary li + li {
    margin-top: 9px;
  }

  .bw-menu-body {
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .bw-menu-scroll {
    padding-top: 16px;
  }

  .bw-menu-foot {
    padding-top: 12px;
    padding-bottom: 14px;
    gap: 10px;
  }
}

/* Below 767 the phone rules already set 17px, and a short phone should not be
   pushed back up to 21 by the block above. */
@media (max-width: 767px) and (max-height: 700px) {
  .bw-menu-primary a,
  .bw-menu-primary button.bw-menu-toggle {
    font-size: 1em; /* was 18px */
  }
}
/* ==========================================================================
   The category grid in the narrower panel
   --------------------------------------------------------------------------
   Its two columns were sized to their content, so at 1013 the grid wanted
   584px inside a 476px column and the last name ran 56px off the screen.
   Fractional columns cannot outgrow what holds them, whatever the longest
   name turns out to be, and the icon and padding come in to buy the room
   back so the names still sit on one line.
   ========================================================================== */
@media (max-width: 1280px) {
  .bw-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .bw-panel-grid a {
    gap: 9px;
    padding: 4px 6px;
    font-size: 1em; /* was 18px */
  }

  .bw-panel-grid a > *:first-child {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
  }
}


/* ==========================================================================
   The outline button where the ground is dark
   --------------------------------------------------------------------------
   Navy on transparent is right over a cream band and all but invisible over
   the hero's photograph, which is where the second call to action sits. In
   there it takes white, and a border light enough to hold its shape against
   moving video behind it.
   ========================================================================== */
.page-id-6 .elementor-6 > .e-con:first-child .bw-btn-muted .elementor-button,
.page-id-6 .elementor-6 > .e-con:first-child .bw-btn-outline .elementor-button {
  color: #ffffff !important;
  fill: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.page-id-6 .elementor-6 > .e-con:first-child .bw-btn-muted .elementor-button:hover,
.page-id-6 .elementor-6 > .e-con:first-child .bw-btn-outline .elementor-button:hover,
.page-id-6 .elementor-6 > .e-con:first-child .bw-btn-muted .elementor-button:focus,
.page-id-6 .elementor-6 > .e-con:first-child .bw-btn-outline .elementor-button:focus {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: #c9a24a !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* ==========================================================================
   The category list on a phone
   --------------------------------------------------------------------------
   One column, and the names may break. Two columns of 136px could not hold
   "Building Materials & Finishes" on one line, so with wrapping forbidden it
   ran 133px off a 320px screen. A fractional column stops the box growing;
   letting the name wrap stops the text growing past it.
   ========================================================================== */
@media (max-width: 767px) {
  .bw-panel-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .bw-panel-grid .bw-panel-name {
    white-space: normal;
  }

  .bw-panel-grid a {
    font-size: 1em; /* was 18px */
  }
}

/* ==========================================================================
   The bar and the panel on a tablet
   --------------------------------------------------------------------------
   Between 768 and 1024 the bar held its content 44px in from each edge while
   a phone uses 16, and the panel kept 32px links — nine of them plus the
   category list left 321px to scroll on a 1024-tall screen. Both come down
   to sit between the phone and the desktop rather than at the desktop end.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .bw-menu-primary a,
  .bw-menu-primary button.bw-menu-toggle {
    font-size: clamp(19px, 3vw, 24px);
  }

  .bw-menu-primary li + li {
    margin-top: 11px;
  }

  .bw-menu-scroll {
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* ==========================================================================
   The language button on a tablet and below
   --------------------------------------------------------------------------
   A flag on its own gives no clue that it opens anything. The full name is
   too wide here — and cannot be shortened, since the names are in their own
   scripts — so the button carries the two-letter code the script writes onto
   it, and the arrow that was hidden comes back to say it opens.
   ========================================================================== */
@media (max-width: 1024px) {
  .bw-offices-label {
    display: none;
  }

  .bw-offices-button::after {
    content: attr(data-code);
    font-family: "Inter", sans-serif;
    font-size: 1em; /* was 18px */
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1;
    color: inherit;
  }

  .bw-offices-chevron {
    display: inline-flex !important;
  }

  .bw-offices .bw-offices-button {
    gap: 7px;
    padding: 0 11px;
  }
}

/* ==========================================================================
   The header's side inset — one ladder, and the last word
   --------------------------------------------------------------------------
   Seven pairs of padding rules had built up on .bw-header-pill across this
   file in overlapping breakpoints, and whichever landed last won; the measured
   inset kept coming out as a number nobody had written. These come last and
   settle it.

   Below 1025 the bar carries nothing — that is what the rule earlier in the
   file says — and the band around it holds the inset, so the two are never
   added together. On a desktop the band runs full width and the bar, which is
   capped at the page measure and centred, holds its own.
   ========================================================================== */
/*
 * The inset goes on the two side zones, not on the bar.
 *
 * The bar is an Elementor container: its padding comes from custom
 * properties through logical longhands, and a physical padding-left cannot
 * outrank that — not from a stylesheet, and not from an inline style with
 * !important either. Both were tried and measured; the computed value
 * stayed at 0. The zones are ordinary flex children with nothing competing
 * for their padding, and because both sides take the same value the mark
 * between them stays on the centre line.
 */


/* The bar itself carries nothing below 1025 — several earlier rules in this
   file still put 16 or 20 on it, and this is the one that settles them. The
   band beneath supplies the whole inset, so the two never add up. */
@media (max-width: 1024px) {
  body .bw-header.bw-header-pill {
  }
}



/* 16px is what trafigura.com uses on a phone, where width is the scarce thing */


/* ==========================================================================
   The header bar's side inset — the only rule for it
   --------------------------------------------------------------------------
   Every other horizontal padding declaration on this element has been removed
   from the file. There were seven pairs in overlapping breakpoints and the one
   that happened to sit last won, which is why the inset kept measuring as a
   number nobody had chosen.

   On a desktop the bar is capped at the page measure and centred, and carries
   its own 28px. Below that it carries nothing and the band around it holds the
   inset instead — 24 on a tablet, 16 on a phone, which is what the reference
   this was drawn from uses. The band's side of the ladder is set above.
   ========================================================================== */
/*
 * The desktop inset rides on the two side zones.
 *
 * The bar is an Elementor container and its own padding is driven through
 * custom properties; a physical padding-left on it does not take, which was
 * measured both from a stylesheet and from an inline !important. The zones
 * are ordinary flex children, so their padding simply works — and because
 * both sides carry the same value the mark between them stays centred.
 *
 * Below 1025 they carry nothing and the band holds the inset instead, so
 * the two are never added together.
 */



/* ==========================================================================
   Market cards: a flag beside the name, not above it
   --------------------------------------------------------------------------
   Sixteen of these run down the page, so the tall photograph card the three
   regions use would make the section four screens long for what is really a
   list. The flag comes in to badge size and sits to the left of the name,
   which turns each card into one line of information and lets four sit in a
   row without dominating the page.
   ========================================================================== */
.bw-market-sm {
  /* the mark on top, the name under it, the rule between the two */
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 18px 22px;
  text-align: center;
  /* "United Arab Emirates" runs to two lines where "Japan" does not, so a
     floor keeps every card the same height whichever it holds */
  min-height: 158px;
}

.bw-market-sm .bw-market-flag {
  /* the flag sits on a tile of its own, so it reads as a mark rather than
     as a loose image next to the name */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 46px;
  background: #f4f1e9;
  border: 1px solid #ece5d6;
  border-radius: 9px;
}

/*
 * WordPress ships `img.emoji { width: 1em; height: 1em }` with !important on
 * it, which squares the flag off and ties it to the font size. !important is
 * the only thing that outranks it, and `auto` width is what lets a flag keep
 * its own proportions instead of being squashed into a square.
 */
.bw-market-sm .bw-market-flag img.emoji {
  width: auto !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 4px;
  display: block !important;
}

.bw-market-sm .bw-market-flag .bw-flag {
  font-size: 1.667em; /* was 30px */
  line-height: 1;
}

.bw-market-sm .bw-market-body {
  /*
   * The rule now runs across the card rather than down it, so it separates
   * the mark from the words instead of standing beside them. Full width so
   * it reads as a division of the card, not an underline of the text.
   */
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  padding: 15px 0 0;
  border-top: 1px solid #ece5d6;
  border-left: 0;
}

.bw-market-sm .bw-market-name {
  margin: 0 0 2px;
  font-size: 1em; /* was 18px */
}

.bw-market-sm .bw-market-note {
  font-size: 1em; /* was 18px */
  line-height: 1.5;
  color: #6f7684;
}


/* A market card that is also one of our own offices. It is a link, so it
   lifts on hover the way the other cards on the site do, and the arrow says
   there is somewhere to go. */
.bw-market-own {
  /*
   * No `display: block` here. This card is an <a> where its neighbours are
   * <div>s, and block would have overridden the flex the card is laid out
   * with — which is exactly what threw the flag into the top corner on the
   * six cards that link. It takes the same flex as the rest.
   */
  display: flex;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-market-own:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px rgba(10, 31, 74, 0.35);
}

.bw-market-own .bw-market-note {
  color: #a9863a;
  font-weight: 500;
}

.bw-market-go {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-market-own:hover .bw-market-go {
  transform: translateX(4px);
}

/* ==========================================================================
   TEMPORARY — the "View details" button on the sub-category cards
   --------------------------------------------------------------------------
   Hidden, not removed. All 67 buttons are still in place on the twelve
   category pages, with their links and their text intact; they carry a
   bw-view-details class and this one rule is the only thing keeping them off
   the page.

   TO BRING THEM BACK: delete this block. Nothing else has to change.
   ========================================================================== */
.bw-view-details {
  display: none !important;
}

/* ==========================================================================
   The file field
   --------------------------------------------------------------------------
   Left alone, a browser draws this as a grey "Choose File" button and the
   words "No file chosen" in the system font — the one control on the form
   that looks like it belongs to a different site. The field takes the same
   box as the others, with a dashed edge because it is something to drop into
   rather than type in, and the browser button is restyled through
   ::file-selector-button, which is the only handle CSS has on it.
   ========================================================================== */
.bw-form .wpcf7-form input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed #ded3ba;
  border-radius: 10px;
  background: #fbfaf7;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  color: #6f7684;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.bw-form .wpcf7-form input[type="file"]:hover {
  border-color: #c9a24a;
  background: #fdfcfa;
}

.bw-form .wpcf7-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #0a1f4a;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease;
}

.bw-form .wpcf7-form input[type="file"]::file-selector-button:hover {
  background: #c9a24a;
}

/* What the upload will accept, said under the field rather than left for the
   browser to complain about after the fact. */
.bw-form .wpcf7-form .bw-f-hint {
  display: block;
  margin-top: 7px;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  font-weight: 400;
  color: #9aa3b2;
}

/* The company's address, under the name it belongs to. Set back from the
   entity so the card reads name first, then where to find it. */
.bw-co-addr {
  margin: 8px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 1em; /* was 18px */
  line-height: 1.55;
  color: #6f7684;
}

/* ==========================================================================
   Buttons on tablet and phone
   --------------------------------------------------------------------------
   A flex container stretches its children by default, so every call to action
   became a full-width bar below the desktop breakpoint — a shape the button was
   never designed for, which is why the label had to be pushed left and the
   badge pinned to the right edge to look deliberate.

   The buttons instead keep the width their own label needs, the same as on the
   desktop, and centre themselves in whatever row or column they sit in. The
   label and the badge then sit together the way they were drawn.
   ========================================================================== */
@media (max-width: 1024px) {
  .bw-btn {
    /* centred by default on small screens; a widget's own Align Self setting
       (Elementor > Advanced > Layout) overrides it */
    align-self: var(--align-self, center);
    width: auto;
    max-width: 100%;
  }

    /* Both stand the same height: the gold one is 48px because its badge is 38
       plus the 5px the kit pads above and below, and the outlined one has no badge
       and would otherwise sit visibly shorter beside it. */
  .bw-btn .elementor-button {
    width: auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bw-btn .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .bw-btn .elementor-button-text {
    flex: 0 1 auto;
    text-align: center;
  }

  /* the badge sits beside the label, not pinned to a full-width edge */
  .bw-btn-primary .elementor-button-icon {
    position: static;
    transform: none;
  }
}

/* ==========================================================================
   The two closing buttons stand the same width
   --------------------------------------------------------------------------
   Every section ends with the same pair: the gold "Request a Quote" and the
   outlined phone number. Left to their own labels they came out 199 and 170,
   which reads as a mistake when they sit one above the other. A floor of 200
   brings the shorter one up to the longer without stretching either.

   The header's own button and the hidden "View details" buttons carry their own
   classes and are excluded — the header one is deliberately compact.
   ========================================================================== */
.bw-btn-primary:not(.bw-head-cta):not(.bw-view-details) .elementor-button,
.bw-btn-muted .elementor-button {
  min-width: 200px;
}

/* ==========================================================================
   The closing pair stays side by side down to 576px
   --------------------------------------------------------------------------
   Elementor gives every child container --width:100% below the desktop
   breakpoint. Each button sits in its own container, so at 993px both were
   941px wide and the flex row — which wraps — put them on separate lines. The
   row itself was never the problem; the two boxes inside it were.

   Sizing those boxes to their contents lets both fit on one line. Below 576 the
   rule stops and they go back to full width, one above the other, which is what
   a phone wants.
   ========================================================================== */
@media (min-width: 576px) {
  .e-con:has(> .bw-btn-primary:not(.bw-head-cta):not(.bw-view-details)),
  .e-con:has(> .bw-btn-muted) {
    width: auto !important;
    flex: 0 0 auto;
  }
}
/* ==========================================================================
   Company cards: how many to a row
   --------------------------------------------------------------------------
   Each card is its own Elementor container, and Elementor gives every child
   container --width:100% below the desktop breakpoint — which is why eight
   cards that sit four to a row on the desktop dropped to one per row the
   moment the window narrowed, leaving a very long page and a band of empty
   ground down each side.

   The row carries a 24px gap, so three across is a third of the row less two
   thirds of one gap. Getting that figure wrong by a couple of pixels is enough
   to push the third card onto its own line, which is exactly what a 20px
   assumption did.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .e-con > .e-con:has(> .elementor-widget .bw-co) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .e-con > .e-con:has(> .elementor-widget .bw-co) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 575px) {
  .e-con > .e-con:has(> .elementor-widget .bw-co) {
    width: 100% !important;
  }
}

/* ==========================================================================
   Contact cards (.bw-gov): three across on tablet, one on a phone
   --------------------------------------------------------------------------
   Same shape as the company cards — each sits in its own container inside a
   wrapping row with a 24px gap — so the same arithmetic applies. These go
   straight from three to one: there are only ever a handful of them and a
   two-up row left an odd card stranded on its own line.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (max-width: 767px) {
  .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: 100% !important;
  }
}

/* ==========================================================================
   Card rows: how many across, at every width
   --------------------------------------------------------------------------
   Several card types share one shape across the site. Most sit in their own
   Elementor container inside a wrapping row; .bw-stat is the exception and is a
   direct child of its row, so it is sized on itself.

   Elementor gives every child container --width:100% below the desktop
   breakpoint, which is why rows that read four across on a desktop collapsed to
   a single column the moment the window narrowed — a very long page with a band
   of empty ground down each side.

   Every row carries a 24px gap, so the arithmetic is the share of the row less
   its portion of the gaps: a quarter less 18px, a third less 16, a half less
   12. Getting that wrong by two pixels is enough to drop the last card onto a
   line of its own — a 20px assumption did exactly that.

   Counts differ because the cards differ. The company and contact cards carry
   an address or a paragraph and need the width; the stats and the values are
   short and read better held together.
   ========================================================================== */

/* ---- .bw-stat — the counters: four across, never fewer than two --------- */

@media (min-width: 641px) {
  .bw-stat {
    width: calc(25% - 18px) !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .bw-stat {
    width: calc(50% - 12px) !important;
    flex: 0 0 auto;
  }
}

/* ---- .bw-step — the values and the capability steps -------------------- */



/* ---- .bw-gov — contact and registration cards -------------------------- */

@media (min-width: 930px) and (max-width: 1024px) {
  .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (max-width: 929px) {
  .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: 100% !important;
  }
}

/* ---- .bw-figure, .bw-ledger, .bw-person -------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .e-con > .e-con:has(> .elementor-widget .bw-figure),
  .e-con > .e-con:has(> .elementor-widget .bw-ledger),
  .e-con > .e-con:has(> .elementor-widget .bw-person) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (max-width: 767px) {
  .e-con > .e-con:has(> .elementor-widget .bw-figure),
  .e-con > .e-con:has(> .elementor-widget .bw-ledger),
  .e-con > .e-con:has(> .elementor-widget .bw-person) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   .bw-tm — the team cards
   --------------------------------------------------------------------------
   These were never added to the rule that stops a card's Elementor container
   collapsing, so below the desktop breakpoint the container measured zero high
   while the card inside it stood 454px. The row came out 48px tall and the
   cards spilled out of it and were cut — the section looked flattened.

   Note what is deliberately NOT here: height:100%. Every other card type gets
   it, because those are text cards that have to match their neighbour's height.
   A team card takes its height from the 3:4 photo inside it, so asking it for
   100% of a container that is itself sizing to its contents is circular, and
   the card resolves to zero — which is the same flattened section by another
   route.
   -------------------------------------------------------------------------- */

.e-con:has(> .e-con > .elementor-widget .bw-tm) {
  align-items: stretch !important;
}

.e-con > .e-con:has(> .elementor-widget .bw-tm) {
  align-self: stretch !important;
  height: auto !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .e-con > .e-con:has(> .elementor-widget .bw-tm) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (max-width: 767px) {
  .e-con > .e-con:has(> .elementor-widget .bw-tm) {
    width: calc(50% - 12px) !important;
  }
}

/* --------------------------------------------------------------------------
   An email address is one unbroken word
   --------------------------------------------------------------------------
   sandeep@bluewaterlogitrade.com offers a browser nowhere to break, so in a
   card three-across on a tablet it simply ran out past the edge. Allowing a
   break anywhere costs nothing on text that has spaces in it and keeps the long
   values inside their card.
   -------------------------------------------------------------------------- */

.bw-co,
.bw-gov,
.bw-figure,
.bw-ledger,
.bw-step,
.bw-stat,
.bw-tm,
.bw-person {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Why the team section flattened below 768
   --------------------------------------------------------------------------
   Measured at 756 against 1011: the card's own container is a flex column, and
   below the breakpoint it comes out flex-wrap:wrap instead of nowrap. A column
   that wraps with no definite height of its own resolves to zero — the flex
   algorithm has nothing to wrap against — so the container measured 0 high
   while the card inside it stood 454. The row collapsed to 48px and the cards
   spilled out and were cut.

   Only .bw-tm is hurt by this. The other card types carry height:auto and size
   to their contents either way; a team card asks for height:100% because it
   has to match its neighbours, and 100% of zero is zero.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-con:has(> .bw-tm-row),
  .bw-tm-row > .e-con,
  .bw-tm-row > .e-con > .elementor-widget {
    flex-wrap: nowrap !important;
  }

  /* and if anything still leaves the container without a height to measure
     against, the 3:4 photo gives the card one of its own */
  .bw-tm {
    height: auto;
  }
}

/* ==========================================================================
   The two value rows on /about/: three, two, one
   --------------------------------------------------------------------------
   "The Cardinal Driving Forces" and "What We Are Measured On" carry seven cards
   each and read as a pair, so they step down together.

   The first row was built without a class on its cards — the only card grid on
   the site a stylesheet could not reach, and the only one still collapsing to a
   single column on a tablet. It now carries .bw-valuecard, applied through the
   element's own CSS Classes field the way every other class here is.

   .bw-valuecard sits on the container itself; .bw-step sits on the card inside
   its container, so the two are reached differently.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .bw-valuecard,
  .e-con > .e-con:has(> .elementor-widget .bw-step) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (min-width: 575px) and (max-width: 767px) {
  .bw-valuecard,
  .e-con > .e-con:has(> .elementor-widget .bw-step) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 574px) {
  .bw-valuecard,
  .e-con > .e-con:has(> .elementor-widget .bw-step) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Team cards go single-column below 480
   --------------------------------------------------------------------------
   Two 3:4 portraits side by side on a 400px phone leaves each about 180 wide,
   which is narrower than the name and role sitting across the foot of the
   photograph. One to a row from 480 down.

   This has to come after the .bw-tm width rules above it, not before: the older
   .bw-tm-row block already said the same thing at this breakpoint and was being
   overridden by the newer two-up rule.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .bw-tm-row > .e-con,
  .e-con > .e-con:has(> .elementor-widget .bw-tm) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Team portrait: a shorter card on a phone
   --------------------------------------------------------------------------
   One to a row from 480 down, the 3:4 portrait takes the full width of the
   screen and stands about 480 tall — most of a phone viewport for one card, so
   scrolling past five of them is a long way. A 6:5 frame at the same width is
   about 300 — short enough to scroll past five of them, tall enough that the
   mark and the name still have room.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .bw-tm-photo {
    aspect-ratio: 6 / 5;
  }
}

/* ==========================================================================
   No button is ever full width — at any width, on any page
   --------------------------------------------------------------------------
   A button is sized by its label. Stretched across a column it stops reading as
   something to press and starts reading as a bar, which is what happened to
   "Learn more" on the home page: 740px of gold for two words.

   The cause is flexbox, not the button. Elementor's containers are flex
   columns, and a flex column stretches its children across the cross axis by
   default, so any button that does not set its own width simply takes the
   column. Asking for fit-content overrides that and leaves the button where the
   column puts it — left where the copy is left, centred where the row centres.

   An earlier version of this rule only ran below 1024, which fixed the tablet
   and left the desktop stretched. It carries no media query for that reason.
   ========================================================================== */
.bw-btn {
  width: fit-content;
  max-width: 100%;
}

.bw-btn .elementor-button {
  width: auto;
}

/* --------------------------------------------------------------------------
   /capabilities/ steps: two across, not three
   --------------------------------------------------------------------------
   Same .bw-step card as the two value rows on /about/, but there are four of
   them here rather than seven. Three across leaves the fourth stranded on a
   line of its own with two empty columns beside it; two across gives a clean
   2x2. Scoped to the page's own body class so /about/ keeps its three.
   -------------------------------------------------------------------------- */
@media (min-width: 575px) and (max-width: 1024px) {
  .page-id-991 .e-con > .e-con:has(> .elementor-widget .bw-step) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 574px) {
  .page-id-991 .e-con > .e-con:has(> .elementor-widget .bw-step) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Footer base bar: links left, copyright right
   --------------------------------------------------------------------------
   The bar is a flex row with space-between, so the two ends are decided by
   source order alone. Ordering the nav ahead of the copy swaps them without
   touching the markup — and, unlike row-reverse, it still wraps the right way
   round on a narrow screen.
   -------------------------------------------------------------------------- */
.bw-foot-legal {
  order: -1;
}

/* --------------------------------------------------------------------------
   /capabilities/ — the picture leads once the row stacks
   --------------------------------------------------------------------------
   Each section on that page is a two-column row: a photograph on one side, the
   copy on the other, and the sides alternate down the page. Stacked, that
   alternation means some sections open with a wall of text and the picture
   arrives after it. Below 992 the picture always goes first, so every section
   reads the same way down the page.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .page-id-991 .e-con > .e-con:has(img) {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   /financials/ figure cards: two across, then one
   --------------------------------------------------------------------------
   There are four of them, so three across strands the fourth on a line of its
   own with two empty columns beside it. Two across gives a clean 2x2 all the
   way down to 575. Scoped to the page, because the same .bw-figure card carries
   three on /about/registrations/ where two across would strand one instead.
   -------------------------------------------------------------------------- */
@media (min-width: 575px) and (max-width: 1024px) {
  .page-id-983 .e-con > .e-con:has(> .elementor-widget .bw-figure) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 574px) {
  .page-id-983 .e-con > .e-con:has(> .elementor-widget .bw-figure) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   /financials/ "Who Signs the Accounts": the same formula
   --------------------------------------------------------------------------
   Four .bw-gov cards, same count as the figures above them, so they step down
   the same way — two across, then one. The site-wide .bw-gov rule goes three
   across then straight to one, which is right where there are three or six of
   them but leaves a stray card here.
   -------------------------------------------------------------------------- */
@media (min-width: 575px) and (max-width: 1024px) {
  .page-id-983 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 574px) {
  .page-id-983 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   /resources/ — the picture leads once the row stacks
   --------------------------------------------------------------------------
   Same two-column alternating sections as /capabilities/, and the same problem
   once they stack: half the sections would open with a wall of text. Kept as a
   page-scoped rule rather than a site-wide one, because the front page uses the
   same shape and is signed off.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .page-id-1001 .e-con > .e-con:has(img) {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   /resources/ "Incoterms and Payment": two across until 575
   --------------------------------------------------------------------------
   Only two cards in this row, so the site-wide .bw-gov rule — three across,
   then one below 930 — drops them to a single column far too early and leaves a
   tall thin page. They hold two across the whole way down to 575.
   -------------------------------------------------------------------------- */
@media (min-width: 575px) {
  .page-id-1001 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 574px) {
  .page-id-1001 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   /markets/ country cards: three, two, one
   --------------------------------------------------------------------------
   Sixteen small flag cards across two rows. Four across on the desktop, then
   three on a tablet, two on a phone and one only when there is genuinely no
   room — a flag and a country name need very little width, so dropping to a
   single column early would waste most of the screen.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-id-997 .e-con > .e-con:has(> .elementor-widget .bw-market) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (min-width: 500px) and (max-width: 767px) {
  .page-id-997 .e-con > .e-con:has(> .elementor-widget .bw-market) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 499px) {
  .page-id-997 .e-con > .e-con:has(> .elementor-widget .bw-market) {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   /about/registrations/ "Numbers You Can Check": three, two, one
   --------------------------------------------------------------------------
   Six .bw-gov cards, so the site-wide rule — three across then straight to one
   below 930 — wastes a lot of width in the middle range. Six divides cleanly by
   three and by two, so it steps down through both.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .page-id-990 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: calc(33.333% - 16px) !important;
  }
}

@media (min-width: 575px) and (max-width: 767px) {
  .page-id-990 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: calc(50% - 12px) !important;
  }
}

@media (max-width: 574px) {
  .page-id-990 .e-con > .e-con:has(> .elementor-widget .bw-gov) {
    width: 100% !important;
  }
}

/* ==========================================================================
   Scroll reveal (data-rv)
   --------------------------------------------------------------------------
   Matched to the worksdelight funnel: from-state translateY(120px) + opacity
   0, 1s, power3-style easing, 180ms stagger between siblings. The delay
   lives on .rv-in so it only applies on the way IN - leaving is immediate,
   not staggered. layout.js sets the attributes; with JavaScript absent no
   element carries data-rv and the page renders fully visible.
   ========================================================================== */

[data-rv] {
  opacity: 0;
  /* 80px of travel over 1s, staggered 180ms a card and capped at seven, put
     the last card of a row 2.26s from being readable — long enough that the
     page just looked blank. 28px over 0.55s at 55ms a card lands the same row
     in 0.83s and still reads as an entrance. */
  transform: translateY(28px);
  transition:
    opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s;
}

[data-rv].rv-in {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--rv-i, 0) * 55ms);
}

/* a 120px slide is too much travel on a small screen */
@media (max-width: 767px) {
  [data-rv] { transform: translateY(20px); }
  [data-rv].rv-in { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rv] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Home: "We help buyers move fast..." — held to two balanced lines.
   The sentence fits one line above ~1300px of column, which read as a thin
   strip on wide screens; capping the box below that forces the wrap, and
   text-wrap: balance splits it evenly instead of orphaning the last word. */
.elementor-element-64e22a8 .elementor-heading-title {
  max-width: 1100px;
  margin-inline: auto;
  text-wrap: balance;
}

/* About: the companies-section subtitle wraps as two BALANCED lines, not a
   full line plus an orphaned word. Its width lives in the widget's own
   Elementor settings — only the balancing is CSS, Elementor has no control
   for it. */
#companies .elementor-widget-text-editor p {
  text-wrap: balance;
}

/* =====================================================================
   Header, desktop: logo left, nav items centre, controls right.
   The burger belongs to smaller screens now — below 1200px the bar keeps
   its approved layout (burger left, mark centred) and the nav hides, so
   nothing about the mobile design changes.
   ===================================================================== */
.bw-head-nav {
  display: none;
}

@media (min-width: 1240px) {
  /* the mark takes the left edge; the burger yields to the visible nav */
  .bw-header .bw-head-logo {
    order: -1;
  }
  .bw-header button.bw-burger {
    display: none;
  }

  /* dead centre of the bar itself, not of whatever space the flex zones
     happen to leave — the sticky .bw-header is the containing block */
  .bw-head-nav {
    display: flex;
    gap: clamp(16px, 2vw, 30px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .bw-head-nav a {
    font-family: "Inter", sans-serif;
    font-size: 1em; /* was 18px */
    font-weight: 600;
    color: #0a1f4a;
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .bw-head-nav a:hover {
    color: #c9a24a;
    border-bottom-color: #c9a24a;
  }

  /* home: white over the hero, site navy once the bar gains its surface */
  .page-id-6:not(.bw-scrolled) .bw-head-nav a {
    color: #ffffff;
  }
  .page-id-6:not(.bw-scrolled) .bw-head-nav a:hover {
    color: #e2c888;
    border-bottom-color: #e2c888;
  }
}

/* =====================================================================
   Products mega-dropdown, v2 — a navy featured panel beside the twelve
   categories, items rising in with a stagger. The list itself is still
   the burger panel's markup verbatim; only its stage changed. Desktop
   only — below 1280px the nav is hidden and the burger panel serves.
   ===================================================================== */
@media (min-width: 1240px) {
  .bw-nav-prod {
    /* static, so the drop positions against the sticky BAR and opens on the
       page centre-line — anchored to the item it drifted left */
    position: static;
    display: flex;
    align-items: center;
  }

  .bw-nav-prod-link::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    /* The lift is written BEFORE the rotation on purpose: a translate that
       follows rotate(45deg) runs along the rotated axis, so it drags the
       chevron diagonally instead of straight up. */
    transform: translateY(-4px) rotate(45deg);
    transition: transform 0.25s ease;
  }
  .bw-nav-prod:hover .bw-nav-prod-link::after {
    transform: translateY(-4px) rotate(225deg);
  }

  .bw-nav-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 12px);
    display: grid;
    grid-template-columns: 272px 1fr;
    width: min(1080px, calc(100vw - 48px));
    white-space: normal;
    background: #ffffff;
    border: 1px solid #e8e2d5;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(10, 31, 74, 0.2);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    z-index: 1000;
  }
  .bw-nav-drop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
  }
  .bw-nav-prod:hover .bw-nav-drop,
  .bw-nav-prod:focus-within .bw-nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 4px);
  }

  /* ---- featured side ---- */
  .bw-drop-side {
    flex: 0 0 272px;
    padding: 28px 26px 24px;
    background:
      radial-gradient(120% 90% at 0% 100%, rgba(201, 162, 74, 0.28), transparent 55%),
      #0a1f4a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
  }
  .bw-drop-kicker {
    font-family: "Inter", sans-serif;
    font-size: 1em; /* was 18px */
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #e2c888;
    margin: 0 0 14px;
  }
  .bw-drop-title {
    font-family: "Libre Caslon Condensed", Georgia, serif;
    font-size: 1.5em; /* was 27px */
    font-weight: 400;
    line-height: 1.14;
    margin: 0 0 12px;
  }
  .bw-drop-title em {
    font-style: italic;
    color: #e2c888;
  }
  .bw-drop-sub {
    font-family: "Inter", sans-serif;
    font-size: 1em; /* was 18px */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 0 18px;
  }
  .bw-drop-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Inter", sans-serif;
    font-size: 1em; /* was 18px */
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #e2c888 !important;
    border-bottom: none !important;
    padding: 0 !important;
  }
  .bw-drop-cta i {
    transition: transform 0.25s ease;
  }
  .bw-drop-cta:hover i {
    transform: translateX(5px);
  }

  /* ---- the twelve ---- */
  .bw-drop-main {
    flex: 1 1 auto;
    padding: 20px 22px 18px;
  }
  .bw-nav-drop .bw-panel-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
  }
  .bw-nav-drop .bw-panel-grid a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    border-bottom: none;
    font-size: 1em; /* was 18px */
    font-weight: 500;
    color: #182031;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .bw-nav-drop .bw-panel-grid a:hover {
    background: #f4f1e9;
    color: #0a1f4a;
    transform: translateX(4px);
  }
  .bw-nav-drop .bw-panel-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(201, 162, 74, 0.13);
    color: #c9a24a;
    font-size: 1em; /* was 18px */
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .bw-nav-drop .bw-panel-grid a:hover .bw-panel-icon {
    background: #c9a24a;
    color: #ffffff;
    transform: rotate(-6deg) scale(1.06);
  }

  /* ---- staggered entrance ---- */
  .bw-nav-drop .bw-panel-grid li {
    margin: 0;
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
  }
  .bw-nav-prod:hover .bw-panel-grid li,
  .bw-nav-prod:focus-within .bw-panel-grid li {
    opacity: 1;
    transform: none;
  }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(1)  { transition-delay: 0.03s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(2)  { transition-delay: 0.06s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(3)  { transition-delay: 0.09s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(4)  { transition-delay: 0.12s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(5)  { transition-delay: 0.15s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(6)  { transition-delay: 0.18s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(7)  { transition-delay: 0.21s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(8)  { transition-delay: 0.24s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(9)  { transition-delay: 0.27s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(10) { transition-delay: 0.3s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(11) { transition-delay: 0.33s; }
  .bw-nav-prod:hover .bw-panel-grid li:nth-child(12) { transition-delay: 0.36s; }

  /* side panel eases in from the left a touch behind the card */
  .bw-drop-side {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
  }
  .bw-nav-prod:hover .bw-drop-side,
  .bw-nav-prod:focus-within .bw-drop-side {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .bw-nav-drop,
    .bw-drop-side,
    .bw-nav-drop .bw-panel-grid li {
      transition: none;
    }
  }

  /* home hero: trigger rides the white nav; the card keeps its own surface */
  .page-id-6:not(.bw-scrolled) .bw-nav-drop .bw-panel-grid a {
    color: #182031;
  }
}

/* 1130-1279: the nav rides a narrower bar, so it tightens a step — below
   1130 the burger takes over entirely. */
@media (min-width: 1240px) and (max-width: 1279px) {
  .bw-head-nav {
    gap: 13px;
  }
  .bw-head-nav a {
    font-size: 1em; /* was 18px */
  }
}

/* the bar never lets its ends touch the viewport */
@media (min-width: 1240px) {
  .bw-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The arrow badge sits at the pill's right edge, not beside the label.
   Only buttons that carry the badge change; the header Contact has its own
   tuned geometry and stays out. */
.bw-btn-primary:not(.bw-head-cta) .elementor-button:has(.elementor-button-icon),
.bw-btn-gold:not(.bw-head-cta) .elementor-button:has(.elementor-button-icon) {
  padding-right: 6px;
}
.bw-btn-primary:not(.bw-head-cta) .elementor-button:has(.elementor-button-icon) .elementor-button-content-wrapper,
.bw-btn-gold:not(.bw-head-cta) .elementor-button:has(.elementor-button-icon) .elementor-button-content-wrapper {
  width: 100%;
  justify-content: space-between;
  gap: 16px;
}

/* =====================================================================
   Below 1140px — the burger bar rearranged: logo on the left, the
   burger at the far right AFTER the contact button, 20px of air at both
   ends. The burger panel itself is untouched.
   ===================================================================== */
@media (max-width: 1239px) {
  .bw-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* logo first with the free space AFTER it, controls next, burger last —
     margin:auto instead of flex-grow, because the zones fight grow */
  .bw-header .bw-head-logo {
    order: -1;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    margin-right: auto !important;
    width: auto !important;
  }
  .bw-header .bw-head-right {
    order: 2;
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end !important;
  }
  .bw-header .bw-head-left {
    order: 3;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 10px;
  }

  /* the desktop nav widget: its inner <nav> hides below the breakpoint,
     but the Elementor wrapper kept its width and shoved the bar apart */
  .bw-head-left .elementor-widget-shortcode {
    display: none !important;
  }
}

/* menu panel: the close control belongs at the right end of the head row */
.bw-menu-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.bw-menu-head .bw-menu-close {
  margin-left: auto;
}

/* panel type, a step smaller on smaller screens */
@media (max-width: 1239px) {
  .bw-menu-list a,
  .bw-menu-toggle {
    font-size: 26px !important;
  }
  .bw-menu-sub .bw-panel-grid a,
  .bw-menu-sub .bw-panel-name {
    font-size: 18px !important;
  }
}
@media (max-width: 560px) {
  .bw-menu-list a,
  .bw-menu-toggle {
    font-size: 21px !important;
  }
  .bw-menu-sub .bw-panel-grid a,
  .bw-menu-sub .bw-panel-name {
    font-size: 18px !important;
  }
}

/* =====================================================================
   Bar zones, final authority below 1140px. Elementor hands the zones a
   percentage side-margin (~98px at 1138) that inset the logo, spread the
   cluster and shoved everything past the right edge below ~1024. Zeroed
   here, at the end of the file, with the parent chain named so nothing
   outranks it. Layout intent: logo left + free space after it, controls
   right, burger last, 20px bar padding both ends.
   ===================================================================== */
@media (max-width: 1239px) {
  .bw-header.bw-header-pill > .bw-head-logo,
  .bw-header.bw-header-pill > .bw-head-right,
  .bw-header.bw-header-pill > .bw-head-left {
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .bw-header.bw-header-pill > .bw-head-logo {
    order: -1;
    margin-right: auto !important;
  }
  .bw-header.bw-header-pill > .bw-head-right {
    order: 2;
  }
  .bw-header.bw-header-pill > .bw-head-left {
    order: 3;
    margin-left: 10px !important;
  }
}

/* home about block: the Read More button lines up with the checklist,
   not the centre, when the columns stack */
@media (max-width: 1239px) {
  .bw-about-text > .e-con:has(.bw-btn) {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .bw-about-text .bw-btn,
  .bw-about-text .bw-btn .elementor-button-wrapper {
    margin-left: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }
}


/* Below 1025 the bar carries nothing: the header band (Elementor container
   9c63b4d, editable in wp-admin) holds the whole 20px inset there. Without
   this the two add up — the band's 24 plus the bar's 20 put the logo 44px
   in on a tablet, which is the gap the client reported. */
@media (max-width: 1024px) {
  .bw-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 1240-1399: the nav stays pinned to the centre of the bar here like it does
   above 1400. It used to ride in flow, on a reading of 4px clearance — but
   that was measured against .bw-head-right, whose box stretches far past the
   controls inside it. Against the first VISIBLE control the centred nav clears
   75px at 1240, so there is nothing to avoid. Only the gap tightens. */
@media (min-width: 1240px) and (max-width: 1399px) {
  .bw-head-nav {
    gap: 14px;
  }
}

/* 18px ke baad dropdown ke naam column se bade ho gaye — panel ke andar
   naam wrap karte hain (global nowrap sirf marquee ke liye tha) */
.bw-nav-drop .bw-panel-name {
  white-space: normal !important;
  line-height: 1.3;
}
.bw-nav-drop .bw-panel-grid a {
  align-items: center;
}

/* category cards: the description holds to two lines and ellipsises,
   so every card in a row keeps the same rhythm at 18px */
.bw-cat-card .elementor-widget-text-editor p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* desktop: the bar runs the full width and carries the side inset itself —
   20px, the same figure as tablet and mobile. It used to sit in 24px (a
   calc(100% - 48px) box) and add 8px of its own, which put the logo 32px in
   and did not match the other breakpoints. */
@media (min-width: 1240px) {
  .bw-header.bw-header-pill {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* the arrow glyph is chrome, not reading text — the 18px floor pushed it out
   of its 12px box. Back to size, dead-centred in its badge. */
.bw-btn .elementor-button-icon i,
.bw-btn .elementor-button-icon svg {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 1 !important;
  display: block;
}

/* 18px text ke saath content ke icon badges bhi ek kadam bade —
   buttons/panel/dropdown ke icons apni tuned size pe hi hain */
.bw-gov-icon,
.bw-step-icon {
  width: 48px;
  height: 48px;
  font-size: 1.222em; /* was 22px */
  border-radius: 14px;
}

/* nav: the current section stays lit — same treatment the hover gets */
.bw-head-nav a.is-active,
.bw-head-nav .bw-nav-prod-link.is-active {
  color: #c9a24a;
  border-bottom-color: #c9a24a;
}
.page-id-6:not(.bw-scrolled) .bw-head-nav a.is-active {
  color: #e2c888;
  border-bottom-color: #e2c888;
}
.bw-nav-drop .bw-panel-grid a.is-active {
  background: #f4f1e9;
  color: #0a1f4a;
}

/* financials: the statement breathes at 1240, and the auditor note runs
   the same width as the table instead of a narrow strip */
.bw-fin th,
.bw-fin td {
  padding: 17px 24px;
}
.page-id-983 .elementor-element-5a5c8d9,
.page-id-983 .elementor-element-5a5c8d9 .elementor-widget-container {
  max-width: 1240px !important;
  margin-inline: auto;
  width: 100% !important;
}

/* financials: the auditor note runs the full statement width; whatever
   shared its row drops below it */
.page-id-983 .elementor-element-dad9afe {
  width: 100% !important;
  max-width: 1240px !important;
  flex-basis: 100% !important;
  margin-inline: auto;
}

/* =====================================================================
   Financials: the figure rows' left slots — the big HK flag beside the
   parent-company figures, the eight-flag cluster beside group turnover.
   ===================================================================== */
.bw-flagcard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: 12px 6px;
}
.bw-flagcard-flag {
  font-size: 84px;
  line-height: 1;
}
.bw-flagcard-name {
  margin: 16px 0 4px;
  font-family: "Libre Caslon Condensed", Georgia, serif;
  font-size: 1.667em; /* was 30px */
  color: #0a1f4a;
  line-height: 1.1;
}
.bw-flagcard-sub {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: max(0.667em, 12px); /* was 12px; floored so it never drops under 12px on a phone */
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9a24a;
}
.bw-flaggrid {
  display: grid;
  grid-template-columns: repeat(4, 52px);
  gap: 10px;
}
.bw-flaggrid span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.667em; /* was 30px */
  line-height: 1;
  background: #ffffff;
  border: 1px solid #ece5d6;
  border-radius: 14px;
}
@media (max-width: 900px) {
  .bw-flagcard { align-items: center; text-align: center; }
  .bw-flaggrid { grid-template-columns: repeat(4, 46px); }
}






/* ==========================================================================
   Scroll sequence (.bw-scroll-stage)
   --------------------------------------------------------------------------
   The frames are ordinary Elementor containers holding an Image, a Heading
   and a Text Editor, so the client edits them like any other widget. Only
   the mechanics are here: the stage is tall, one child pins to the viewport,
   and the frames stack inside it. Their height is set by the script from the
   number of frames present, so duplicating a frame in the editor lengthens
   the scroll on its own.

   The effect is chosen by a class on the stage:
     .bw-fx-fade  .bw-fx-cards  .bw-fx-curtain  .bw-fx-pan
   ========================================================================== */
.bw-scroll-stage {
  position: relative;
  /* the script overwrites this with (frames x 115vh); the fallback keeps the
     section usable if the script never runs */
  min-height: 100vh;
}

.bw-scroll-stage > .e-con,
.bw-scroll-pin {
  position: sticky;
  top: 0;
  /* 100vh on a phone is the LARGE viewport — the height with the address bar
     hidden — so the pinned frame ends up taller than what is actually on
     screen. A sticky box taller than its scrollport does not hold at top: 0;
     it drifts with the page, which is why the sequence read as "no effect"
     on a phone while it was fine on a desktop. svh is the small viewport,
     so the frame is never taller than the visible area. vh stays first as
     the fallback for anything that does not know svh. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #06111f;
}

.bw-scroll-pin > .e-con,
.bw-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  will-change: transform, opacity, clip-path;
  backface-visibility: hidden;
}

/* the picture fills its frame — Elementor's image widget is a figure inside
   a widget container, so every level of that chain has to be told to fill */
.bw-slide .elementor-widget-image {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
}

.bw-slide .elementor-widget-image > .elementor-widget-container,
.bw-slide .elementor-widget-image figure,
.bw-slide .elementor-widget-image a {
  display: block;
  height: 100%;
  margin: 0;
}

.bw-slide .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text sits over the picture, so the picture is darkened underneath it.
   A single top-to-bottom ramp was not enough: on a bright, busy frame the
   caption still had to compete with whatever happened to be behind it. The
   ramp now stays out of the way through the middle of the image and then
   builds hard from just above the heading down to the bottom edge, which is
   the only band the caption ever occupies. */
.bw-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 17, 31, 0.32) 0%,
    rgba(6, 17, 31, 0) 30%,
    rgba(6, 17, 31, 0.22) 50%,
    rgba(6, 17, 31, 0.62) 74%,
    rgba(6, 17, 31, 0.88) 100%
  );
}

/* The caption used to be two absolutely positioned widgets, each pinned to
   its own fixed `bottom` — 104px for the heading, 66px for the line under it.
   Those two anchors sit only 38px apart, which is enough while the heading is
   the single line it is on a desktop. On a phone the heading wraps to two or
   three lines and grows down past 104px while the description grows up past
   it, so the two crossed and the text sat on top of itself. The client saw
   this on Garments & Textile Products and Handicraft & Homeware.

   They are in normal flow now, in a column anchored to the bottom of the
   frame, so any number of lines simply stacks and the gap is always kept.
   The picture is still absolute, so it fills the frame regardless. */
.bw-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(10px, 1.4vh, 16px);
  /* Longhands, not a `padding:` shorthand. The rule a few lines up already
     sets `padding: 0` on this same element, and a shorthand carrying three
     clamp() values did not survive to override it — the longhands do, and
     they read unambiguously. Elementor only feeds padding-block-* from its
     own custom properties, at the same specificity and earlier in the file,
     so these win on order. */
  padding-top: 0 !important;
  padding-bottom: clamp(66px, 9vh, 98px) !important;
  padding-left: clamp(24px, 6vw, 90px) !important;
  padding-right: clamp(24px, 6vw, 90px) !important;
}

.bw-slide .elementor-widget-heading,
.bw-slide .elementor-widget-text-editor {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(620px, 100%);
  margin: 0;
}

/* frame counter, drawn by the script */
.bw-scroll-count {
  position: absolute;
  left: clamp(24px, 6vw, 90px);
  /*
     The header is 78px tall and sits over the pinned frame, so an offset that
     scales purely with viewport height slides underneath it on a short screen:
     11vh is 63px at 569px tall and 70px at 640px, both behind the header. Only
     above roughly 745px tall did it clear. The floor is now 92px — the 78px
     header plus 14px — so the counter clears it on every screen, while taller
     screens still get the original easing up to 96px. */
  top: clamp(92px, 11vh, 96px);
  /* the driver raises this to (frames + 1) inline; 60 is the baseline so the
     chrome is never under a frame even before that runs */
  z-index: 60;
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
}

.bw-scroll-count b {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-right: 2px;
}

.bw-scroll-rail {
  position: absolute;
  right: clamp(20px, 3vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bw-scroll-rail span {
  position: relative;
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}

.bw-scroll-rail span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #c9a24a;
  transform-origin: top;
  transform: scaleY(var(--f, 0));
}

/* the horizontal variant lays its frames in a row instead of a stack */
.bw-fx-pan .bw-scroll-pin > .e-con {
  position: relative;
  inset: auto;
  flex: 0 0 100vw;
  height: 100%;
}

.bw-fx-pan .bw-scroll-pin {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* Someone who has asked their system for less motion gets the frames as a
   plain stacked list — every picture and caption still readable, nothing
   pinned and nothing animated. */
@media (prefers-reduced-motion: reduce) {
  .bw-scroll-stage {
    height: auto !important;
  }

  .bw-scroll-stage > .e-con,
  .bw-scroll-pin {
    position: static;
    height: auto;
    display: block;
  }

  .bw-scroll-pin > .e-con,
  .bw-slide {
    position: relative;
    inset: auto;
    height: 100vh;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }

  .bw-scroll-count,
  .bw-scroll-rail {
    display: none;
  }
}

/* The last entry in the footer's Products column is a way OUT of the list —
   it goes to the index, not to another category — so it is set apart from
   the six category links above it rather than reading as a seventh one. */
.bw-foot-links a.bw-foot-all {
  color: #c9a24a;
  text-decoration: underline;
  text-decoration-color: rgba(201, 162, 74, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bw-foot-links a.bw-foot-all:hover {
  color: #a8842f;
  text-decoration-color: rgba(168, 132, 47, 0.8);
}

/*
 * A contact email is one unbreakable 30-character token. At 318px it measures
 * 297px against a 303px body, and because the page carries overflow-x: clip
 * (which is what keeps the sticky scroll pin alive) the end is silently cut
 * off rather than scrolled to — the reader just loses the last characters.
 * "anywhere" breaks it only when there is genuinely nowhere else to break, so
 * ordinary prose in these lists is untouched.
 */
.elementor-icon-list-text,
.bw-foot-links a,
.bw-foot-copy {
  overflow-wrap: anywhere;
}

/*
 * Below about 360px the header bar runs out of room.
 *
 * The bar is nowrap with three children that are all `flex: 0 0 auto`, so
 * nothing shrinks: logo 112 + gap 12 + language 91 + gap 12 + margin 10 +
 * burger 44 = 281px asked of a 263px bar. The excess spilled off the right,
 * which put the burger 2px from the screen edge while the logo kept its 20px
 * — the header lost its symmetry exactly where it is tightest.
 *
 * Rather than let it overflow, the three reducible figures come down: the gaps,
 * the burger's own left margin, and the logo, which is the only child with
 * width to spare. That frees 34px, so the row fits with room left over and the
 * 20px inset holds on both sides. 360px and wider are untouched — they already
 * fit with 24px to spare.
 */
@media (max-width: 359px) {
  .bw-header.bw-header-pill {
    gap: 8px !important;
  }

  .bw-header .bw-head-left {
    margin-left: 0 !important;
  }

  .bw-header .bw-head-logo img {
    max-width: 96px;
    height: auto;
  }
}

/*
 * The contact rows (CALL / EMAIL / VISIT / HOURS) under 768px.
 *
 * Each row is an Icon Box widget, and its Mobile "Icon Position" in Elementor
 * already puts the icon above the text, so the text gets the full width back.
 * Only the spacing between rows is set here: 24px between rows against 10px
 * inside one. Space within a group has to be smaller than the space around it
 * or the four rows read as one list of eight items.
 */
@media (max-width: 767px) {
  /*
   * Spacing is set outright rather than added to what is inherited: this same
   * block carries an 18px gap on Contact and 0px on the home page, so a margin
   * on top of the gap produced 24px in one place and 6px in the other.
   */
  .bw-nap {
    row-gap: 0 !important;
  }

  .bw-nap > * + * {
    margin-top: 18px;
  }

  .bw-nap .elementor-widget-icon-box + .elementor-widget-icon-box {
    margin-top: 24px;
  }
}

/*
 * 20px of air above "Read More".
 *
 * It sat flush against the description — a measured 0px gap on every card. The
 * space is added as padding rather than margin on purpose: `margin-top: auto`
 * (above) is what pushes the link to the bottom of the card so the links line
 * up across a row, and a real margin-top would replace that and drop each link
 * straight under its own description instead. Padding gives the same 20px
 * without touching the alignment.
 */
.bw-cat-card > .bw-cat-more {
  padding-top: 20px;
}

/*
 * The back-to-top button hides while the menu panel is open.
 *
 * The panel covers the whole screen, so the button has nothing to scroll back
 * from — it just floats on top of the menu and overlaps the contact lines at
 * the bottom of it. `body.bw-menu-open` is already set by layout.js when the
 * panel opens, and at (0,2,1) it outranks `.bw-to-top.is-visible` (0,2,0)
 * without needing !important. The button keeps its own transition, so it fades
 * out with the panel rather than blinking away.
 */
body.bw-menu-open .bw-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}

/* ---- scroll cue on the pinned sequence -------------------------------------
 * The sequence only advances while the reader keeps scrolling, and nothing on
 * screen said so — the frame just sat there and read as a static picture. This
 * is the affordance: a chevron and a word at the foot of the frame, which fades
 * out as soon as the sequence starts moving so it never nags.
 *
 * Sized off the frame rather than the screen, so the same rule serves phone,
 * tablet and desktop without a breakpoint of its own.
 */
.bw-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 30px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.bw-scroll-cue-text {
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* the chevron is two borders on a rotated square — no icon font needed */
.bw-scroll-cue-arrow {
  width: 11px;
  height: 11px;
  border-right: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: 2px solid rgba(255, 255, 255, 0.78);
  transform: rotate(45deg);
  animation: bw-cue-nudge 1.7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes bw-cue-nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* once the sequence is moving the reader has worked it out */
.bw-scroll-stage.bw-cue-done .bw-scroll-cue {
  opacity: 0;
}

/* a reader who has asked for less motion still gets the cue, just still */
@media (prefers-reduced-motion: reduce) {
  .bw-scroll-cue-arrow {
    animation: none;
    opacity: 0.85;
  }

  /* the sequence is unpinned entirely in reduced motion, so the cue is a lie */
  .bw-scroll-cue {
    display: none;
  }
}

/*
 * The frame counter has to read on any picture.
 *
 * It is white at 72%, and the slide scrim only carries about 0.20 opacity where
 * the counter sits (roughly 11% down, on the way from 0.32 at the very top to
 * 0 at 30%). That is enough over a dark frame and nothing at all over a bright
 * one — on the Desiccated Coconut frame, which is a pale grey machine in its
 * top-left corner, the counter simply vanished. It was never moving or being
 * clipped; it was white on white.
 *
 * A shadow on the glyphs rather than a darker scrim, so the photographs are
 * left exactly as they are.
 */
.bw-scroll-count {
  text-shadow:
    0 1px 12px rgba(6, 17, 31, 0.92),
    0 0 4px rgba(6, 17, 31, 0.75);
}

/*
 * No back-to-top button on the product detail pages.
 *
 * Those pages are one long pinned sequence, so the button sits on top of the
 * frame for the whole scroll and overlaps the caption — and "back to top" is
 * not what a reader wants mid-sequence anyway. `parent-pageid-724` is exactly
 * the twelve category pages: children of the Products index, and not the index
 * itself. Hidden at every width, as asked.
 */
body.parent-pageid-724 .bw-to-top {
  display: none !important;
}

/*
 * The rail fits the frame, however many images there are.
 *
 * It was a fixed 34px segment per image with an 11px gap: two images made a
 * 79px stub, seventeen made 754px — taller than a 568px phone, so it ran off
 * both ends and read as an endless dashed line rather than a count. It also
 * sat centred at 50%, straight through the caption, which on a phone runs
 * right under it.
 *
 * Measured band on the pinned frame: the counter ends by 22% of its height on
 * the shortest phone, the caption starts at 66%. So the rail is centred at 43%
 * and capped at 38% of the frame, and the segments shrink evenly to fit — never
 * below 8px, so seventeen still count. Desktop has room and no caption under
 * the rail, so it gets a taller band there.
 */
.bw-scroll-rail {
  top: 43%;
  max-height: 38vh;
  max-height: 38svh;
  gap: clamp(3px, 0.8vh, 11px);
}

.bw-scroll-rail span {
  flex: 0 1 34px;
  height: auto;
  min-height: 8px;
}

@media (min-width: 1025px) {
  .bw-scroll-rail {
    top: 48%;
    max-height: 50vh;
    max-height: 50svh;
  }
}

/*
 * The rail spans the image, whatever the count.
 *
 * Capping it at 38% made seventeen images into 8px stubs — "itna chhota mat
 * karo". So the rail is now 72% of the frame's height and the segments SHARE
 * it: flex-grow, so two images make two long bars and seventeen make
 * seventeen shorter ones, always the same total length, always readable as a
 * count. A segment never grows past 96px (two bars should not become a pole)
 * and never shrinks under 8px.
 *
 * It sits on the right edge and the counter on the left, so they never meet.
 * The caption is the one thing that could run under it on a phone, so the
 * slide keeps enough right padding there for the text to stop before the line.
 */
.bw-scroll-rail {
  top: 50%;
  height: 72vh;
  height: 72svh;
  max-height: none;
  justify-content: center;
  gap: clamp(4px, 0.9vh, 10px);
}

.bw-scroll-rail span {
  flex: 1 1 0;
  min-height: 8px;
  max-height: 96px;
}

@media (min-width: 1025px) {
  .bw-scroll-rail {
    top: 50%;
    height: 72vh;
    height: 72svh;
    max-height: none;
  }
}

@media (max-width: 767px) {
  /* rail inset 20px + 3px line + 13px of air: the caption stops before it */
  .bw-slide {
    padding-right: 36px !important;
  }
}

/*
 * Rail: anchored to the FRAME, never to the viewport.
 *
 * 72svh looked right in a harness where frame and viewport are the same
 * height, and wrong on a phone where they are not: the rail came out longer
 * than the band it sat in and pushed up into the top edge while there was
 * empty space below. So no height at all now — the rail is pinned by `top`
 * and `bottom` insets of the frame it lives in (percentages of an absolutely
 * positioned box resolve against its containing block, the sticky pin), so it
 * always starts 14% down and ends 14% up, whatever the frame's real height.
 * The images divide what is between: one image fills the band, twenty split
 * it twenty ways, and nothing is ever cut at either end.
 */
.bw-scroll-rail,
.bw-scroll-rail.bw-scroll-rail {
  top: 14%;
  bottom: 14%;
  height: auto;
  max-height: none;
  transform: none;
  justify-content: stretch;
}

.bw-scroll-rail span {
  flex: 1 1 0;
  min-height: 6px;
  max-height: none;
}

@media (min-width: 1025px) {
  .bw-scroll-rail,
  .bw-scroll-rail.bw-scroll-rail {
    top: 14%;
    bottom: 14%;
    height: auto;
    max-height: none;
    transform: none;
  }
}

/* ---- mobile header + buttons ------------------------------------------- */
@media (max-width: 767px) {
  /* the two-letter language code reads oversized next to a smaller logo */
  .bw-offices-button::after {
    font-size: 0.83em;
  }

  /* a button label is one line; the widgets carry 16px on mobile for this */
  .bw-btn .elementor-button-text {
    white-space: nowrap;
  }
}

/*
 * Mobile menu type ladder. Three earlier rules fought over these — a 26px
 * step, a 21px !important, and a clamp() — and the main links ended up at
 * body size while the submenu sat at 18px: the child bigger than the parent.
 * One place, one ladder, relative to the 16px mobile body:
 *   main items 1.3em (21px)  >  submenu items 1em (16px)  >  panel heading 0.8em
 */
@media (max-width: 767px) {
  .bw-menu-primary a,
  .bw-menu-primary button.bw-menu-toggle,
  .bw-menu-list a,
  .bw-menu-toggle {
    font-size: 1.3em !important;
  }

  .bw-menu-sub .bw-panel-grid a,
  .bw-menu-sub .bw-panel-name {
    font-size: 1em !important;
  }

  .bw-menu-sub .bw-menu-heading,
  .bw-menu-heading {
    font-size: 0.8em !important;
  }
}

/*
 * Footer links need a thumb-sized target on a phone.
 *
 * They are inline anchors, so the tappable box is the height of the glyphs —
 * 19px measured, against the 44px a finger expects. `inline-block` lets the
 * 26.4px line box count, and 6px of vertical padding takes it to ~38px without
 * spreading the column the way a full 44px would.
 */
@media (max-width: 767px) {
  .bw-foot-links a,
  .bw-foot-all,
  .bw-foot-legal a {
    display: inline-block;
    padding-block: 6px;
  }
}

/* The breadcrumb links are inline anchors too — same 19px target as the footer
   had. The trail sits on one line, so the padding goes on the block axis only
   and the row grows by 12px, not the whole strip. */
@media (max-width: 767px) {
  /* the trail on a category page carries no class of its own — it is a
     text-editor paragraph whose first link holds the little home icon */
  .bw-crumb a,
  .elementor-widget-text-editor p:has(> a > i.fa-home) a {
    display: inline-block;
    padding-block: 6px;
  }
}

/*
 * About: the picture takes its height from the text, not the other way round.
 *
 * Each row is a picture column beside a text column. The picture was sized by
 * its own aspect (height: auto), so IT set the row height and the text sat in
 * a tall column of empty space — 583px of photograph against 145px of copy on
 * the textile row, and every row was at least 136px out.
 *
 * Taking the image out of flow (absolute inside a relative column) means it no
 * longer contributes a height, so the text decides how tall the row is and the
 * photograph crops to fit. The min-height stops a short paragraph from
 * squeezing the picture into a sliver.
 */
.bw-about-media {
  position: relative;
  /* The height itself is set on the container in Elementor (Layout > Min
     Height: 410 / 410 / 280), so the client can change it without touching
     this file. All the sheet does is take the picture out of flow so it fills
     whatever height is chosen instead of setting one of its own. */
  overflow: hidden;
  border-radius: 18px;
}

.bw-about-media .elementor-widget-image,
.bw-about-media .elementor-widget-container,
.bw-about-media .elementor-widget-image a {
  position: static;
}

.bw-about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/*
 * Footer list rhythm on a phone.
 *
 * The links carry 6px of padding above and below to make a 38px tap target,
 * and that padding ADDS to the 9px margin between items: 6 + 9 + 6 = 21px of
 * white between one label and the next, where the design reads at 9px. The
 * margin comes off here, so the gap is the padding alone — 12px seen, 38px
 * tappable, and the targets stay a couple of pixels apart rather than merging.
 */
@media (max-width: 767px) {
  .bw-foot-links li + li {
    margin-top: 0;
  }

  .bw-foot-legal li + li {
    margin-top: 0;
  }
}

/*
 * The chart's status row on a narrow screen.
 *
 * Four columns of AUDITED / AUDITED / AUDITED / PROJECTED under the year
 * labels. The words are wider than their column and spill sideways into each
 * other — measured, "PROJECTED" needs 95px at the desktop size against a 52px
 * column at 337px, and even at 12px with no letter-spacing it needs 72px.
 *
 * From 480px up the column is wide enough at 12px, so the labels stay and only
 * shed their letter-spacing. Below that no readable size fits, so the row goes:
 * nothing is lost, because the projected year is already drawn as a hatched
 * bar and the lines under the chart say "three audited years" and "projected
 * for the year to".
 */
@media (max-width: 767px) {
  .bw-chart-tag {
    font-size: 12px;
    letter-spacing: 0;
  }
}

@media (max-width: 479px) {
  .bw-chart-tag {
    display: none;
  }
}

/*
 * The intro column stays with the form.
 *
 * On the quote and careers pages a 45% text column sits beside a 55% form that
 * is several times taller, so the text scrolled away and left a tall blank
 * panel next to the remaining fields.
 *
 * `align-self: flex-start` is the part that makes this work: a flex item
 * stretched to the row's height has no room to move inside it, and sticky
 * silently does nothing. Shrinking it to its own height gives it somewhere to
 * travel. The offset clears the 78px sticky header with a little air.
 *
 * Only where the two sit side by side — below 1025px they stack, and a sticky
 * block above a form is just an obstacle.
 */
@media (min-width: 1025px) {
  .bw-sticky-aside {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

/*
 * Capabilities: every picture to the same proportion.
 *
 * The rows carried whatever shape their source happened to be — three at 3:2
 * (389px tall), one at 1.28 (457px) and one square (583px) — so the column
 * jumped about as you scrolled. The 3:2 rows are the ones the client approved,
 * so the shape is fixed at 3:2 and the odd sources crop into it rather than
 * setting their own height.
 *
 * aspect-ratio with width:100% computes the height, so it stays right at every
 * breakpoint without a fixed pixel value.
 */
.bw-cap-media img {
  width: 100%;
  height: auto;
  /* 8:7 rather than 3:2 — at the 583px column that is 510px tall against the
     389px a 3:2 gives, the ~120px more the client asked for. Kept as a ratio
     rather than a pixel height so it scales at every width. */
  aspect-ratio: 8 / 7;
  object-fit: cover;
  border-radius: 18px;
}

/*
 * Contact Form 7's submit button on a phone.
 *
 * This one is the exception to everything else being an Elementor setting:
 * the submit is CF7's own markup, not an Elementor button widget, so there is
 * no control in the editor to reach it. It matches the 15px the Elementor
 * buttons now use, so the two sit at the same size on a form.
 */
@media (max-width: 767px) {
  .wpcf7-submit,
  input[type="submit"].wpcf7-submit {
    font-size: 15px;
  }
}

/*
 * Buttons sit against the left edge on a phone.
 *
 * They were centred on every small screen, which put them out of line with the
 * heading and the paragraph above them — both left aligned. A widget's own
 * Align Self (Elementor > Advanced > Layout) still overrides this, so a button
 * that should be centred can be, one at a time.
 */
@media (max-width: 767px) {
  .bw-btn {
    align-self: var(--align-self, flex-start);
  }

  .bw-btn .elementor-button-wrapper,
  .bw-btn .elementor-widget-container {
    text-align: left;
  }
}