/*
 * Jay's Steel, modern template (jayssteel), on top of Cassiopeia.
 *
 * Built 10 November 2026, using the component library (header, menu, cards, gallery,
 * lightbox, footer) proven on Belaire Suites and Parade Hotel, with Jay's Steel's own
 * logo, content and colour.
 *
 * Colour: the logo (templates/ja_lead/images/logo.png on the old site) is a brushed
 * chrome wordmark with no colour in it at all. Every opaque pixel was read with a
 * small PNG decoder (no image tool was available on this box): the top colours by
 * pixel count are all within a point or two of r=g=b, confirming it is pure
 * neutral grey. So there is no colour to sample, and the accent below is a
 * judgement call: an industrial orange, the colour South African hardware and
 * builders' merchants commonly use, on the ink and grey the logo itself is made of.
 * See REPORT.md for the full reasoning and the contrast numbers.
 * Type: Manrope, self hosted, for everything. One font rather than a heading face and
 * a body face: Jay's Steel is a working merchant's site, not a boutique one, and one
 * family at a bold weight for headings reads as confident rather than soft.
 * Images: every image keeps its own aspect ratio. height:auto is the default
 * everywhere; object-fit:cover appears only in the cards' deliberate 4:3 frame.
 */

/* ------------------------------------------------------------------- fonts */

@font-face {
  font-family: "Manrope var";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Liberation Sans"), local("DejaVu Sans");
  size-adjust: 89%;
  ascent-override: 120.3%;
  descent-override: 33.7%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /*
   * The logo carries no colour (see the note above), so --b2-gold here is not a
   * sampled colour, it is the chosen accent: an industrial orange, #d5541a. It keeps
   * the --b2-gold* names the rest of this stylesheet already uses throughout, rather
   * than a renaming pass across two thousand lines of proven, tested rules.
   *
   * Orange is a mid colour, not a light one like Parade's gold, so the contrast split
   * is different: --b2-gold itself (#d5541a) is for decoration only, underlines, the
   * active menu mark, icon discs, never for text at body size. --b2-gold-dark
   * (#b8460f) is dark enough to carry white text at 5.36:1 and is what every button
   * uses; it is also 5.36:1 as text on white, so it is the link and eyebrow colour
   * too. --b2-gold-deep (#8a3509) is the hover state, 8.10:1 on white. --b2-gold-soft
   * is a pale wash, --b2-gold-dark on it measures 4.54:1. --b2-gold-light is for the
   * dark footer, 8.46:1 on the footer's ink.
   */
  --b2-gold: #d5541a;             /* decoration only: never text at body size */
  --b2-gold-hover: #a83d0c;       /* a button fill under the pointer */
  --b2-gold-dark: #b8460f;        /* buttons (white text, 5.36:1), links, eyebrows */
  --b2-gold-deep: #8a3509;        /* hover for links and text; 8.10:1 on white */
  --b2-gold-soft: #fbe9dd;        /* a wash; --b2-gold-dark on it is 4.54:1 */
  --b2-gold-light: #f2a365;       /* on the dark footer; 8.46:1 on the footer ink */

  --b2-ink: #1a1a1a;              /* headings, footer */
  --b2-body: #3c3c3c;             /* body text; 11.0:1 on white */
  --b2-muted: #6b6b6b;            /* 5.3:1 on white */
  --b2-line: #e2e2e2;
  --b2-line-soft: #efefef;
  --b2-page: #f4f4f4;             /* a cool, neutral, workmanlike page colour */
  --b2-soft: #f4f4f4;
  --b2-white: #ffffff;
  --b2-dark: #1a1a1a;
  --b2-dark-2: #262626;

  --b2-font: "Manrope var", "Manrope", "Manrope fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --b2-display: var(--b2-font);

  --b2-wrap: 1180px;
  --b2-gut: clamp(1.25rem, 4vw, 2.5rem);
  --b2-head-h: 72px;

  --b2-r: 6px;
  --b2-r-lg: 8px;
  --b2-shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 8px 24px rgba(26, 26, 26, .06);
  --b2-shadow-lg: 0 2px 6px rgba(26, 26, 26, .07), 0 18px 46px rgba(26, 26, 26, .12);

  --b2-space: clamp(3rem, 6vw, 5rem);

  /* Cassiopeia and Bootstrap read these */
  --cassiopeia-color-primary: #b8460f;
  --cassiopeia-color-link: #b8460f;
  --cassiopeia-color-hover: #8a3509;
  --link-color: #b8460f;
  --link-hover-color: #8a3509;
  --primary: #b8460f;
  --primary-rgb: 184, 70, 15;
  --bs-primary: #b8460f;
  --bs-link-color: #b8460f;
  --bs-link-hover-color: #8a3509;
  --bs-body-font-family: var(--b2-font);
}

/* -------------------------------------------------------------------- base */

/* The slide in menu is a fixed panel parked just off the right hand edge. Without
   this the parked panel widens the page, and a phone can scroll sideways into it. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body.jayssteel {
  background: var(--b2-page);
  color: var(--b2-body);
  font-family: var(--b2-font);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.jayssteel.nav-open { overflow: hidden; }

.jayssteel h1, .jayssteel h2, .jayssteel h3, .jayssteel h4, .jayssteel h5 {
  color: var(--b2-ink);
  font-family: var(--b2-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}

.jayssteel h1 { font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.05; }
.jayssteel h2 { font-size: clamp(1.875rem, 1.2rem + 2.1vw, 2.625rem); }
.jayssteel h3 { font-size: 1.375rem; }
.jayssteel h4 { font-size: 1.125rem; }
.jayssteel h5 { font-size: 1rem; }
/*
 * Heading level and heading size are two different things. The level says where the
 * heading sits in the page's outline, which is what a screen reader and a search engine
 * read; the size says how loud it is. The old content picked the tag for its size, which
 * left pages that started at h3 or carried a second h1. The levels are in order now, and
 * a heading that had to change level carries the class for the size it had, so nothing
 * on the page moved.
 */
.jayssteel .b2-h1 { font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4.25rem); }
.jayssteel .b2-h2 { font-size: clamp(1.875rem, 1.2rem + 2.1vw, 2.625rem); }
.jayssteel .b2-h3 { font-size: 1.375rem; }
.jayssteel .b2-h4 { font-size: 1.125rem; }
.jayssteel .b2-h5 { font-size: 1rem; }

.jayssteel h6 {
  color: var(--b2-ink);
  font-family: var(--b2-font);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.4;
  margin: 0 0 .6em;
  text-transform: uppercase;
}

/* A heading is already set at its own weight; a strong inside it must not change that. */
.jayssteel h1 strong, .jayssteel h2 strong, .jayssteel h3 strong, .jayssteel h4 strong,
.jayssteel h5 strong, .jayssteel h6 strong, .jayssteel h1 b, .jayssteel h2 b,
.jayssteel h3 b, .jayssteel h4 b, .jayssteel h5 b, .jayssteel h6 b { font-weight: inherit; }

.jayssteel p { margin: 0 0 1.1em; }
.jayssteel a { color: var(--b2-gold-dark); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.jayssteel a:hover, .jayssteel a:focus { color: var(--b2-gold-deep); }

.jayssteel img, .jayssteel svg, .jayssteel video, .jayssteel iframe { max-width: 100%; }
.jayssteel img { height: auto; }

.jayssteel :focus-visible {
  outline: 3px solid var(--b2-gold-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* `.jayssteel a` is a heavier selector than `.b2-skip`, so without the class on the
   element as well the skip link was gold text on a gold panel, 1 : 1, and the
   keyboard user who tabbed to it could not read it. Measured, not guessed. */
.b2-skip, .jayssteel a.b2-skip {
  background: var(--b2-gold-dark);
  color: #fff;
  left: 50%;
  padding: .75rem 1.25rem;
  position: fixed;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 2000;
}
.b2-skip:focus, .jayssteel a.b2-skip:focus { color: #fff; transform: translate(-50%, 0); }

.b2-wrap {
  margin-inline: auto;
  max-width: var(--b2-wrap);
  padding-inline: var(--b2-gut);
  width: 100%;
}

/* A band is a full width stripe of colour. White alternates with the warm page. */
.b2-band { background: var(--b2-white); padding-block: var(--b2-space); }
.b2-band-soft { background: var(--b2-page); padding-block: var(--b2-space); }

/* ------------------------------------------------------------------ header */

.b2-topbar {
  background: var(--b2-dark);
  color: #e8e4dc;
  font-size: .8125rem;
  padding-block: .4rem;
}

.b2-header {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--b2-line);
  left: 0;
  position: sticky;
  right: 0;
  top: 0;
  transition: box-shadow .2s ease;
  z-index: 900;
}

.b2-header.is-stuck { box-shadow: 0 1px 0 var(--b2-line), 0 8px 22px rgba(21, 20, 26, .07); }

/* Jay's Steel carries four top level items (Home, Products, Steel Fiber, Contact
   Us), so the single content width can be a tighter 1180 px; the header, the hero
   text, every band and the footer all start on that same line. */

.b2-header-in {
  align-items: center;
  display: flex;
  gap: clamp(.6rem, 1.4vw, 1.5rem);
  min-height: var(--b2-head-h);
}

.b2-brand {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 2px;
  line-height: 1;
  text-decoration: none;
}

.b2-brand img, .b2-brand .logo {
  display: block;
  height: auto;
  width: clamp(118px, 11vw, 152px);
}

.b2-brand-tag {
  color: var(--b2-gold-dark);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.b2-header-act {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: .9rem;
  margin-left: .6rem;
}

/* the phone number gives up its place first when the row runs out of room */
@media (max-width: 1399.98px) { .b2-phone { display: none; } }

.b2-phone {
  align-items: center;
  color: var(--b2-ink);
  display: inline-flex;
  font-size: .9375rem;
  font-weight: 600;
  gap: .4rem;
  text-decoration: none;
  white-space: nowrap;
}
.b2-phone:hover { color: var(--b2-gold-dark); }
.b2-ico { fill: currentColor; height: 1.05em; width: 1.05em; }

/* ------------------------------------------------------------------ buttons */

/* The orange accent is a mid colour, not a light one, so the button is the darker
   shade with white text: 5.36:1, well clear of the 4.5:1 body-text minimum. The
   brighter --b2-gold is kept for decoration (the active menu mark, icon discs)
   where it does not have to carry text on its own. */
.jayssteel .b2-btn,
.jayssteel a.b2-btn {
  align-items: center;
  background: var(--b2-gold-dark);
  border: 1px solid var(--b2-gold-dark);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: var(--b2-font);
  font-size: .875rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: .04em;
  line-height: 1.2;
  padding: .78rem 1.45rem;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}

.jayssteel .b2-btn:hover, .jayssteel .b2-btn:focus {
  background: var(--b2-gold-deep);
  border-color: var(--b2-gold-deep);
  color: #fff;
}

.jayssteel .b2-btn-lg, .jayssteel a.b2-btn-lg { font-size: .9375rem; padding: .95rem 2.1rem; }
.jayssteel .b2-btn-sm, .jayssteel a.b2-btn-sm { font-size: .8125rem; padding: .55rem 1.1rem; }
.jayssteel .b2-btn-block, .jayssteel a.b2-btn-block { display: flex; width: 100%; }

.jayssteel .b2-btn-ghost, .jayssteel a.b2-btn-ghost {
  background: transparent;
  border-color: var(--b2-line);
  color: var(--b2-ink);
}
.jayssteel .b2-btn-ghost:hover, .jayssteel .b2-btn-ghost:focus,
.jayssteel a.b2-btn-ghost:hover, .jayssteel a.b2-btn-ghost:focus {
  background: var(--b2-ink);
  border-color: var(--b2-ink);
  color: #fff;
}

/* --------------------------------------------------------------- main menu */

.b2-nav { flex: 1 1 auto; min-width: 0; }

.b2-nav ul { list-style: none; margin: 0; padding: 0; }

.b2-nav > .nav-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: flex-end;
}

.b2-nav .nav-item { position: relative; }

.b2-nav .nav-link {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--b2-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--b2-font);
  font-size: .78125rem;
  font-weight: 600;
  gap: .22rem;
  letter-spacing: .01em;
  padding: .5rem .42rem;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
  white-space: nowrap;
}

.b2-nav .nav-link:hover, .b2-nav .nav-link:focus { background: var(--b2-gold-soft); color: var(--b2-gold-dark); }

/* A top level item with no address of its own is a <button>, and a button does not
   inherit type from the page. It must not set `font` here: that shorthand resets the
   size, the weight and the family that .nav-link has just set, which is the bug that
   showed up on Belaire Suites, where the items with dropdowns rendered at a different
   size and weight to the plain links beside them. Only the button's own oddities are
   reset here, so every top level item stays one size and one weight. */
.b2-nav .nav-heading {
  margin: 0;
  text-align: inherit;
  text-transform: none;
}
.b2-nav .nav-item.is-active > .nav-link, .b2-nav .nav-item.in-path > .nav-link { color: var(--b2-gold-dark); }

.b2-nav .nav-item.is-active > .nav-link::after,
.b2-nav .nav-item.in-path > .nav-link::after {
  background: var(--b2-gold);
  border-radius: 2px;
  bottom: -2px;
  content: "";
  height: 2px;
  left: .42rem;
  position: absolute;
  right: .42rem;
}

.b2-nav .nav-caret {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  display: inline-block;
  height: .4em;
  transform: rotate(45deg) translate(-.1em, -.1em);
  transition: transform .18s ease;
  width: .4em;
}

.b2-nav .nav-toggle {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: none;
  padding: .55rem;
}

/*
 * Desktop: a sub menu is a panel under its parent.
 *
 * It used to sit at `top: calc(100% + 6px)`, a real six pixel hole between the parent
 * and the panel, and the only thing holding it open was :hover on the <li>, whose box
 * ends at the parent link. Moving the pointer down towards the panel left the <li>, so
 * the panel went before it could be reached. Three things fix it: the panel is pulled
 * back against the parent and carries its own six pixel strip of padding, which is
 * inside the <li> and so keeps the hover; a ::before bridge covers the gap anyway, for
 * the moment the pointer travels diagonally; and user.js holds the panel open with
 * .is-open for 250 ms after the pointer leaves, so a wandering hand does not lose it.
 */
@media (min-width: 1200px) {
  .b2-nav .nav-sub {
    left: 0;
    margin: 0;
    min-width: 232px;
    opacity: 0;
    /* the top strip of padding is the bridge: the panel's own box now touches the
       parent, so the pointer never leaves the <li> on its way down */
    padding: calc(6px + .4rem) .4rem .4rem;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
    z-index: 50;
  }

  /* the white panel itself, drawn under the strip of padding */
  .b2-nav .nav-sub::after {
    background: #fff;
    border: 1px solid var(--b2-line);
    border-radius: var(--b2-r);
    box-shadow: var(--b2-shadow);
    content: "";
    inset: 6px 0 0;
    position: absolute;
    z-index: -1;
  }

  /* a little wider than the panel, to catch a pointer moving on the diagonal */
  .b2-nav .nav-sub::before {
    content: "";
    left: -8px;
    position: absolute;
    right: -8px;
    top: -6px;
    height: 14px;
  }

  /* a panel near the right hand edge opens to the left instead */
  .b2-nav > .nav-list > .nav-item:nth-last-child(-n+3) > .nav-sub { left: auto; right: 0; }

  .b2-nav .nav-item.has-sub.is-open > .nav-sub,
  .b2-nav .nav-item.has-sub:hover > .nav-sub,
  .b2-nav .nav-item.has-sub:focus-within > .nav-sub {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .b2-nav .nav-item.has-sub.is-open > .nav-link .nav-caret,
  .b2-nav .nav-item.has-sub.is-open > .nav-toggle .nav-caret,
  .b2-nav .nav-item.has-sub:hover > .nav-link .nav-caret,
  .b2-nav .nav-item.has-sub:hover > .nav-toggle .nav-caret,
  .b2-nav .nav-item.has-sub:focus-within > .nav-link .nav-caret,
  .b2-nav .nav-item.has-sub:focus-within > .nav-toggle .nav-caret {
    transform: rotate(-135deg) translate(-.14em, -.14em);
  }

  /* Every parent gets the same caret, whether it has an address of its own or not,
     and the caret is a button: the sub menu opens on a click and on a tap too. */
  .b2-nav > .nav-list > .nav-item.has-sub > .nav-toggle {
    align-items: center;
    display: inline-flex;
    /* 24 by 24 is the smallest a pointer target should be, and this one was 18 wide. */
    justify-content: center;
    margin-left: -.3rem;
    min-height: 24px;
    min-width: 24px;
    padding: .5rem .3rem;
  }

  .b2-nav > .nav-list > .nav-item.has-sub > .nav-link { padding-right: .18rem; }
  .b2-nav > .nav-list > .nav-item.has-sub > .nav-link::after { right: .18rem; }
  .b2-nav > .nav-list > .nav-item.has-sub > .nav-toggle:hover { color: var(--b2-gold-dark); }

  .b2-nav .nav-sub .nav-link {
    border-radius: var(--b2-r);
    display: flex;
    font-size: .875rem;
    letter-spacing: .02em;
    padding: .5rem .7rem;
    white-space: normal;
    width: 100%;
  }

  .b2-nav .nav-sub .nav-item.is-active > .nav-link::after { content: none; }

  /* a separator at the top of the menu is a heading, so it carries a caret */
  .b2-nav > .nav-list > .nav-item.has-sub > .nav-link::before { content: none; }

  .b2-nav-head, .b2-nav-foot { display: none; }
  .b2-burger { display: none; }
  .b2-nav-dock { display: contents; }
}

/* Phones and small tablets: a clean slide-in panel. */
@media (max-width: 1199.98px) {
  .b2-burger {
    align-items: center;
    background: none;
    border: 0;
    color: var(--b2-ink);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    margin-left: auto;
    order: 3;
    padding: .4rem .2rem;
  }

  .b2-burger-bars, .b2-burger-bars::before, .b2-burger-bars::after {
    background: currentColor;
    border-radius: 2px;
    content: "";
    display: block;
    height: 2px;
    transition: transform .2s ease, opacity .2s ease;
    width: 24px;
  }
  /* the two extra bars are drawn above and below, so the element keeps room for them */
  .b2-burger-bars { position: relative; margin: 7px 0; }
  .b2-burger-bars::before { position: absolute; top: -7px; }
  .b2-burger-bars::after { position: absolute; top: 7px; }

  .b2-burger-label { font-size: .5625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

  .b2-header-act { display: none; }

  /*
   * The header carries `backdrop-filter`, and an element with a backdrop filter
   * becomes the containing block for any `position: fixed` inside it. The slide in
   * panel lives inside the header, so it was being sized to the header: 72 pixels
   * tall, which showed its own title bar and clipped every menu item underneath it.
   * Found by measuring the panel, not by looking at it: Playwright still reported the
   * items visible, because they are only clipped, not hidden.
   *
   * The header's background is already white at 94 per cent, so dropping the blur on
   * a phone costs nothing and gives the panel the whole viewport back.
   */
  .b2-header { backdrop-filter: none; }

  /* The panel lives inside a viewport sized box that clips it, so the version of it
     that is parked off the right hand edge cannot widen the page. */
  .b2-nav-dock {
    display: block;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 1200;
  }

  body.nav-open .b2-nav-dock { pointer-events: auto; }

  .b2-nav {
    background: #fff;
    bottom: 0;
    box-shadow: var(--b2-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(101%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
    width: min(360px, 88vw);
    z-index: 1200;
  }

  .b2-nav.is-open { transform: translateX(0); visibility: visible; }

  .b2-nav-head {
    align-items: center;
    border-bottom: 1px solid var(--b2-line);
    display: flex;
    justify-content: space-between;
    padding: .9rem 1.1rem;
  }

  .b2-nav-title {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .b2-nav-close {
    background: none;
    border: 0;
    color: var(--b2-ink);
    cursor: pointer;
    font-size: 1.9rem;
    line-height: 1;
    padding: 0 .3rem;
  }

  .b2-nav > .nav-list { display: block; padding: .4rem 0; }

  .b2-nav .nav-item {
    align-items: center;
    border-bottom: 1px solid var(--b2-line-soft);
    display: flex;
    flex-wrap: wrap;
  }

  .b2-nav .nav-link {
    border-radius: 0;
    flex: 1 1 auto;
    font-size: .875rem;
    justify-content: flex-start;
    padding: .9rem 1.1rem;
    text-align: left;
    white-space: normal;
  }

  .b2-nav .nav-item.is-active > .nav-link::after,
  .b2-nav .nav-item.in-path > .nav-link::after { content: none; }
  .b2-nav .nav-item.is-active > .nav-link { background: var(--b2-gold-soft); }

  .b2-nav .nav-heading .nav-caret { display: none; }

  .b2-nav .nav-item.has-sub > .nav-link { padding-right: .4rem; }

  .b2-nav .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    padding: .9rem 1.1rem;
  }

  /* A separator is a button that is its own toggle. */
  .b2-nav .nav-heading { justify-content: space-between; }
  .b2-nav .nav-heading .nav-caret { display: inline-block; }

  .b2-nav .nav-sub {
    background: var(--b2-soft);
    display: none;
    flex: 1 0 100%;
    order: 9;
  }

  .b2-nav .nav-item.is-expanded > .nav-sub { display: block; }
  .b2-nav .nav-item.is-expanded > .nav-link .nav-caret,
  .b2-nav .nav-item.is-expanded > .nav-toggle .nav-caret { transform: rotate(-135deg) translate(-.14em, -.14em); }

  .b2-nav .nav-sub .nav-link {
    font-size: .8125rem;
    letter-spacing: .02em;
    padding-left: 1.9rem;
    text-transform: none;
  }

  .b2-nav .nav-sub .nav-item:last-child { border-bottom: 0; }

  .b2-nav-foot {
    border-top: 1px solid var(--b2-line);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: auto;
    padding: 1.1rem;
  }

  .b2-nav-phone {
    color: var(--b2-ink);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

  /* The panel lives inside the header, and the header is a sticky stacking context at
     z-index 900, so the dimmer has to sit below 900 or it covers the panel's own links. */
  .b2-scrim {
    background: rgba(21, 20, 26, .45);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity .26s ease;
    z-index: 850;
  }
  .b2-scrim.is-on { opacity: 1; }
}

/* -------------------------------------------------------------------- hero */

.b2-hero { position: relative; }

.b2-hero-frame {
  background: #eae5dc;
  /*
   * The frame is its own stacking context. Without this, the z-index on a slide is
   * measured against everything else in the hero, and the slide on top (z-index 2)
   * painted over the dark wash and over the headline, which sits outside the frame.
   * Keeping the slides' order inside the frame puts the wash, the caption and the
   * headline back on top of the photograph where they belong.
   */
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  position: relative;
  /* A deliberate frame: the only crop on the site. The eight slide photos are
     940 x 340 and the band is taller than that, so each one is cropped at the
     sides. Every slide was checked in the frame with its subject still in view. */
  min-height: 560px;
  max-height: 78vh;
}

/*
 * One photograph at a time, and only ever one.
 *
 * The photograph coming in is revealed from the right hand edge across to the left,
 * and the one going out stays solid underneath until the reveal has finished. Every
 * pixel of the band therefore shows exactly one photograph at full opacity at every
 * moment of the change, which is what Ridwaan asked for.
 *
 * A crossfade cannot do that: fading one picture up while the other fades down means
 * that halfway through the change both are half on, and a still of the page catches
 * the two of them mixed. That is what the faded double image in his screenshot was.
 * The old stylesheet made it worse again, because `.b2-hero-slide:first-child
 * { opacity: 1 }` carried the same weight as `.b2-hero-slide.is-on` and came after
 * it, so the first photograph was pinned on for good and every change mixed three
 * pictures, not two. The rule meant to switch it off asked for a first child that
 * follows a sibling, which nothing can ever be.
 *
 * To go back to a crossfade: give .b2-hero-slide a transition on opacity, animate
 * opacity rather than clip-path on .is-on, and drop .is-entering.
 */
.b2-hero-slide {
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.b2-hero-slide.is-on {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
  z-index: 2;
}

/* the first frame of the reveal: on, solid, and clipped away to nothing */
.b2-hero-slide.is-entering { clip-path: inset(0 0 0 100%); transition: none; }

/* the one on its way out: still solid, still underneath, and it does not animate */
.b2-hero-slide.is-out { clip-path: inset(0 0 0 0); opacity: 1; transition: none; z-index: 1; }

/* with JavaScript off no slide carries is-on, so the first photograph is the one shown */
.b2-hero-frame:not(:has(.b2-hero-slide.is-on)) .b2-hero-slide:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .b2-hero-slide.is-on { transition: none; }
}

.b2-hero-slide img {
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  width: 100%;
}

.b2-hero-shade {
  background: linear-gradient(180deg, rgba(14, 9, 12, .2) 0%, rgba(14, 9, 12, .1) 26%, rgba(14, 9, 12, .78) 100%);
  inset: 0;
  position: absolute;
  z-index: 3;
}

.b2-hero-body {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  padding-bottom: clamp(1.75rem, 4vw, 3.5rem);
  z-index: 1;
}

.b2-hero-eyebrow {
  color: var(--b2-gold-light);
  font-size: clamp(.625rem, .55rem + .25vw, .75rem);
  font-weight: 700;
  letter-spacing: .22em;
  margin: 0 0 .6rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  text-transform: uppercase;
}

.b2-hero h1, .b2-hero .b2-hero-title {
  color: #fff;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.5rem);
  margin: 0 0 .5rem;
  /*
   * 18em rather than the 19ch this started as. A `ch` is the width of the digit zero in
   * whatever font is drawing at that moment, so the box itself was a different width
   * before and after Marcellus arrived, and the headline wrapped onto a second line in
   * the fallback and back onto one when the real face landed. That was the one
   * measurable layout shift left on the site. An `em` is the font size, which both
   * faces share, so the box is the same either way. The headline is 858 px wide in
   * Marcellus at desktop and never fills this box, so nothing about the approved look
   * changes; it only stops the fallback running out of room.
   */
  max-width: 18em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.b2-hero-sub {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(.9375rem, .85rem + .4vw, 1.1875rem);
  margin: 0 0 1.4rem;
  max-width: 46ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.b2-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.jayssteel .b2-hero-actions .b2-btn-ghost, .jayssteel .b2-hero-actions a.b2-btn-ghost {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.jayssteel .b2-hero-actions .b2-btn-ghost:hover, .jayssteel .b2-hero-actions .b2-btn-ghost:focus,
.jayssteel .b2-hero-actions a.b2-btn-ghost:hover, .jayssteel .b2-hero-actions a.b2-btn-ghost:focus {
  background: #fff;
  border-color: #fff;
  color: var(--b2-ink);
}

.b2-hero-caption {
  z-index: 4;
  background: rgba(10, 9, 12, .5);
  border-radius: 999px;
  bottom: 1rem;
  color: rgba(255, 255, 255, .9);
  font-size: .75rem;
  padding: .3rem .85rem;
  position: absolute;
  right: 1rem;
}

/*
 * On a phone the headline sits under the picture rather than over it. Jay's Steel's
 * one hero photograph is a 960 x 360 panorama, and a tall phone frame would crop
 * away much of its width. A 16:9 band keeps the subject and the words stay easy
 * to read.
 */
@media (max-width: 767.98px) {
  .b2-hero-frame { aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
  .b2-hero-body {
    background: var(--b2-ink);
    bottom: auto;
    left: auto;
    padding-block: 1.6rem 1.9rem;
    position: static;
    right: auto;
  }
  .b2-hero-shade { background: linear-gradient(180deg, rgba(14, 9, 12, .1), rgba(14, 9, 12, .3)); }
  .b2-hero h1, .b2-hero .b2-hero-title, .b2-hero-sub, .b2-hero-eyebrow { text-shadow: none; }
  .b2-hero-caption { display: none; }
}

/* ------------------------------------------------------------------ layout */

.b2-main { padding-block: clamp(2rem, 4vw, 3.5rem) var(--b2-space); }
.jayssteel.is-home .b2-main { padding-top: var(--b2-space); }

.b2-layout { display: grid; gap: var(--b2-space) 2.5rem; grid-template-columns: 1fr; }

@media (min-width: 992px) {
  .jayssteel.has-sidebar .b2-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .jayssteel.has-sidebar .b2-side-left { grid-column: 1; grid-row: 1; }
  .jayssteel.has-sidebar .b2-side-left ~ .b2-content { grid-column: 2; }
}

.b2-content { min-width: 0; }

/* The breadcrumb trail */
.jayssteel .breadcrumb {
  background: none;
  font-size: .8125rem;
  gap: .35rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.jayssteel .breadcrumb a { color: var(--b2-muted); text-decoration: none; }
.jayssteel .breadcrumb a:hover { color: var(--b2-gold-dark); }
.jayssteel .breadcrumb .breadcrumb-item.active { color: var(--b2-ink); }
.jayssteel .breadcrumb .divider { color: var(--b2-line); }

.jayssteel .page-header { margin: 0 0 1.8rem; }
.jayssteel .page-header h1, .jayssteel .page-header h2 {
  font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.9rem);
  margin: 0;
  position: relative;
  padding-bottom: .5rem;
}
.jayssteel .page-header h1::after, .jayssteel .page-header h2::after {
  background: var(--b2-gold);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 54px;
}

.jayssteel main { margin: 0; }

/* The home page already has its own h1 in the hero; the article's own page heading
   above the home content would just repeat "Home" under it. */
.jayssteel.is-home .page-header { display: none; }

/* ------------------------------------------------------------------- prose */
/*
 * The article html came across from Joomla 1.5 with inline fonts, inline sizes,
 * inline line heights and fixed width tables. The content is not edited for those;
 * the rules below pull them onto this template's scale instead.
 */

.b2-content main,
.b2-content .com-content-article__body { font-size: 1.0625rem; }

.b2-content main > *:first-child,
.b2-content .com-content-article__body > *:first-child { margin-top: 0; }

.b2-content main p,
.b2-content main ul,
.b2-content main ol,
.b2-content main dl,
.b2-content main blockquote { max-width: 68ch; }

/* A list that is really a layout (cards, the key figures, the tab strip, a menu or a
   gallery) is not running text, so the comfortable measure above must not shrink it. */
.b2-content main table p, .b2-content main table ul, .b2-content main table ol,
.b2-content main .b2-cards p, .b2-content main .b2-cards ul,
.b2-content main .b2-menu p, .b2-content main .b2-gallery p,
.b2-content main ul.b2-cards, .b2-content main ul.b2-stats, .b2-content main ul.b2-tabs,
.b2-content main ul.b2-menu-list, .b2-content main ul.b2-menu-sub,
.b2-content main ul.b2-card-meta, .b2-content main ul.b2-footer-links,
.b2-content main .b2-gallery, .b2-content main .b2-split p,
.b2-content main .b2-head p, .b2-content main .b2-promo p { max-width: none; }

.b2-content main ul.b2-cards, .b2-content main ul.b2-stats, .b2-content main ul.b2-tabs,
.b2-content main ul.b2-menu-list, .b2-content main ul.b2-card-meta { padding-left: 0; }
.b2-content main ul.b2-cards > li, .b2-content main ul.b2-stats > li,
.b2-content main ul.b2-tabs > li, .b2-content main ul.b2-card-meta > li { margin-bottom: 0; }
.b2-content main ul.b2-cards > li::marker, .b2-content main ul.b2-stats > li::marker,
.b2-content main ul.b2-tabs > li::marker, .b2-content main ul.b2-card-meta > li::marker { content: none; }

.b2-content main h2, .b2-content main h3, .b2-content main h4 { margin-top: 1.9em; }
.b2-content main h2:first-child, .b2-content main h3:first-child { margin-top: 0; }

/* A heading that follows its own eyebrow, or that opens a band or a card, already has
   the space it needs above it. */
.b2-content main .b2-eyebrow + h1, .b2-content main .b2-eyebrow + h2,
.b2-content main .b2-eyebrow + h3, .b2-content main .b2-head h2,
.b2-content main .b2-card-body h3, .b2-content main .b2-feature h3,
.b2-content main .b2-promo-text h2, .b2-content main .b2-promo-text h3,
.b2-content main .b2-split > div > h2:first-of-type,
.b2-content main .b2-band > .b2-wrap > h2:first-of-type { margin-top: 0; }

.b2-content main ul, .b2-content main ol { padding-left: 1.25rem; }
.b2-content main li { margin-bottom: .35rem; }
.b2-content main li::marker { color: var(--b2-gold-dark); }

.b2-content main hr { border: 0; border-top: 1px solid var(--b2-line); margin: 2.4rem 0; }

.b2-content main blockquote {
  border-left: 3px solid var(--b2-gold);
  color: var(--b2-ink);
  font-family: var(--b2-display);
  font-size: 1.2rem;
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.3rem;
}

/* One font, one line height, one set of sizes, whatever the old html asks for. */
.b2-content [style*="font-family"] { font-family: var(--b2-font) !important; }
.b2-content h1[style*="font-family"], .b2-content h2[style*="font-family"],
.b2-content h3[style*="font-family"], .b2-content h4[style*="font-family"],
.b2-content h5[style*="font-family"], .b2-content h6[style*="font-family"] { font-family: var(--b2-display) !important; }
.b2-content [style*="line-height"] { line-height: inherit !important; }
.b2-content [style*="font-size"] { font-size: inherit !important; }

.b2-content main p, .b2-content main li, .b2-content main td, .b2-content main th,
.b2-content main dd, .b2-content main dt, .b2-content main address { line-height: 1.7 !important; }

.b2-content main h1, .b2-content main h2, .b2-content main h3,
.b2-content main h4, .b2-content main h5, .b2-content main h6 { line-height: 1.18 !important; }

/*
 * Every page needs exactly one h1, and on an inner page that is the heading the page
 * opens with. Joomla's own page heading is off, because it would repeat the menu item's
 * name above a heading that already says the same thing, so the article's opening
 * heading is the h1. It is set one step above h2 rather than at the hero's size: the
 * hero h1 is the only one on the site that has a photograph behind it.
 */
.b2-content main h1 { font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.9rem); }

/*
 * The old editor wrote colours and background colours straight into the html: olive
 * headings, grey words inside sentences, and pale grey bars behind the directions on
 * the contact page. None of them belong in this design, so running text takes the
 * page's own colours. Anything this template puts there itself keeps its colour, which
 * now includes the gallery: each photograph's box carries that photograph's own dominant
 * colour as an inline background so the grid is never a page of empty holes, and this
 * rule was quietly throwing all 41 of them away.
 */
.b2-content main [style*="color"]:not(a):not(.b2-price):not(.b2-eyebrow):not(.b2-promo-code) { color: inherit !important; }
.b2-content main [style*="background"]:not(.b2-promo):not(.b2-note):not(.b2-promo-code):not(.b2-gallery-link) {
  background: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* One link colour in running text. */
.b2-content main a, .b2-content main a[style*="color"] { color: var(--b2-gold-deep) !important; }
.b2-content main a:hover, .b2-content main a:focus { color: var(--b2-gold-dark) !important; }
/* A button written into an article keeps the button's own colours: white on the
   dark orange fill, 5.36:1. Joomla's own .btn is the same fill. */
.b2-content main a.b2-btn, .b2-content main a.b2-btn:hover,
.b2-content main a.b2-btn:focus { color: #fff !important; }
.b2-content main a.btn, .b2-content main a.btn:hover { color: #fff !important; }
.b2-content main a.b2-btn-ghost { color: var(--b2-ink) !important; }
.b2-content main a.b2-btn-ghost:hover { color: #fff !important; }
.b2-content main .b2-card a, .b2-content main .b2-gallery a { color: inherit !important; }

/* Pictures in the article text: own aspect ratio, rounded, on the column edge. */
.b2-content main img {
  border-radius: var(--b2-r);
  height: auto;
  max-width: 100%;
}

.b2-content main img[style*="float: left"], .b2-content main img[align="left"] {
  margin: .3rem 1.5rem 1rem 0 !important;
}
.b2-content main img[style*="float: right"], .b2-content main img[align="right"] {
  margin: .3rem 0 1rem 1.5rem !important;
}

@media (max-width: 575.98px) {
  .b2-content main img[style*="float: left"], .b2-content main img[align="left"],
  .b2-content main img[style*="float: right"], .b2-content main img[align="right"] {
    float: none !important;
    margin: 0 0 1rem !important;
  }
}

/* ------------------------------------------------------- tables, old and new */

/* Old fixed width tables keep their own proportions and scroll inside the column. */
.b2-content main table {
  border-collapse: collapse;
  display: block;
  height: auto !important;
  max-width: 100%;
  overflow-x: auto;
  width: fit-content !important;
}

.b2-content main table td, .b2-content main table th {
  height: auto !important;
  padding: .55rem .8rem;
  vertical-align: top;
}

.b2-content main table img { margin: 0; }

.b2-content main table td:has(> img:only-child),
.b2-content main table td:has(> p:only-child > img:only-child),
.b2-content main table td:has(> a:only-child > img:only-child),
.b2-content main table td:has(> h1:only-child > a:only-child > img:only-child),
.b2-content main table td:has(> p:only-child > a:only-child > img:only-child) { padding: 0; }

/*
 * b2-table is the modern table: full width, light rules, a quiet head, and on a
 * phone every row becomes a small stacked card using the data-label on each cell.
 */
.b2-content main table.b2-table,
.jayssteel table.b2-table {
  border-collapse: collapse;
  display: table;
  margin: 1.6rem 0;
  overflow: visible;
  width: 100% !important;
}

.jayssteel table.b2-table caption {
  caption-side: top;
  color: var(--b2-muted);
  font-size: .8125rem;
  padding-bottom: .6rem;
  text-align: left;
}

.jayssteel table.b2-table th,
.jayssteel table.b2-table td {
  border-bottom: 1px solid var(--b2-line);
  padding: .85rem 1rem .85rem 0;
  text-align: left;
  vertical-align: top;
}

.jayssteel table.b2-table thead th {
  border-bottom: 2px solid var(--b2-ink);
  color: var(--b2-ink);
  font-family: var(--b2-font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  padding-bottom: .55rem;
  text-transform: uppercase;
}

.jayssteel table.b2-table tbody tr:hover { background: var(--b2-soft); }
.jayssteel table.b2-table td.num, .jayssteel table.b2-table th.num { text-align: right; padding-right: 0; }
.jayssteel table.b2-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 639.98px) {
  .jayssteel table.b2-table,
  .jayssteel table.b2-table thead,
  .jayssteel table.b2-table tbody,
  .jayssteel table.b2-table tr,
  .jayssteel table.b2-table td,
  .jayssteel table.b2-table th { display: block; width: auto !important; }

  .jayssteel table.b2-table thead { display: none; }

  .jayssteel table.b2-table tbody tr {
    border: 1px solid var(--b2-line);
    border-radius: var(--b2-r);
    margin-bottom: .85rem;
    padding: .35rem .9rem;
  }

  .jayssteel table.b2-table td {
    border-bottom: 1px solid var(--b2-line-soft);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .55rem 0;
    text-align: right;
  }

  .jayssteel table.b2-table td:last-child { border-bottom: 0; }

  .jayssteel table.b2-table td[data-label]::before {
    color: var(--b2-muted);
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
  }

  .jayssteel table.b2-table td.num { padding-right: 0; }
}

/* ------------------------------------------------------------------- cards */

.jayssteel .b2-cards {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  list-style: none;
  margin: 1.8rem 0 2.4rem;
  padding: 0;
}

/*
 * -2 and -3 mean two and three across, not "at least 330 px each". They used to be
 * auto-fill, which in a 1160 px content column laid two cards out in a three column
 * grid and left a third of the row empty, and put the three contact panels in four
 * columns with a hole on the right.
 */
.jayssteel .b2-cards-2 { grid-template-columns: 1fr; }
.jayssteel .b2-cards-3 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .jayssteel .b2-cards-2 { grid-template-columns: repeat(2, 1fr); }
  .jayssteel .b2-cards-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .jayssteel .b2-cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Four across on a desktop, two on a tablet, one on a phone, with the cards in a row
   all the same height (the grid stretches them) and the same gap between every pair. */
.jayssteel .b2-cards-4 { grid-template-columns: 1fr; }

@media (min-width: 600px) { .jayssteel .b2-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .jayssteel .b2-cards-4 { grid-template-columns: repeat(4, 1fr); } }

.jayssteel .b2-card {
  background: var(--b2-white);
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-r-lg);
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.jayssteel .b2-card:hover, .jayssteel .b2-card:focus-within {
  border-color: transparent;
  box-shadow: var(--b2-shadow-lg);
  transform: translateY(-3px);
}

/* A deliberate frame: a 3:2 window on the card photo so a row of cards lines up.
   The photo itself is never squashed, it is cropped to the middle of the frame. */
.jayssteel .b2-card-media {
  aspect-ratio: 4 / 3;
  background: var(--b2-page);
  display: block;
  margin: 0;
  overflow: hidden;
}

.jayssteel .b2-card-media img {
  border-radius: 0 !important;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
  width: 100%;
}

.jayssteel .b2-card:hover .b2-card-media img { transform: scale(1.04); }

.jayssteel .b2-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.15rem 1.25rem 1.3rem; }

.jayssteel .b2-card-body h3,
.jayssteel .b2-card-body h2 { font-size: 1.1875rem; margin: 0 0 .45rem; }

.jayssteel .b2-card-body h3 a, .jayssteel .b2-card-body h2 a { color: var(--b2-ink) !important; text-decoration: none; }
.jayssteel .b2-card-body h3 a:hover, .jayssteel .b2-card-body h2 a:hover { color: var(--b2-gold-dark) !important; }

/* On this site the whole card is the link (a.b2-card wrapping the picture and the title),
   so the anchor itself must not carry running-text underlining: the title is a card
   heading, not a link in a sentence. */
.jayssteel a.b2-card { color: inherit; text-decoration: none; }
.jayssteel a.b2-card .b2-card-body h3, .jayssteel a.b2-card .b2-card-body h2 { color: var(--b2-ink); }
.jayssteel a.b2-card:hover .b2-card-body h3, .jayssteel a.b2-card:focus-visible .b2-card-body h3,
.jayssteel a.b2-card:hover .b2-card-body h2, .jayssteel a.b2-card:focus-visible .b2-card-body h2 { color: var(--b2-gold-dark); }

.jayssteel .b2-card-body p { color: var(--b2-body); font-size: .9375rem; margin: 0 0 .8rem; max-width: none; }
.jayssteel .b2-card-body > *:last-child { margin-bottom: 0; margin-top: auto; }

.jayssteel .b2-card-meta {
  color: var(--b2-gold-dark);
  display: flex;
  flex-wrap: wrap;
  font-size: .75rem;
  font-weight: 700;
  gap: .4rem 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
}

.jayssteel .b2-card-meta li { margin: 0; }
.jayssteel .b2-card-meta li::marker { content: none; }
.jayssteel .b2-card-meta strong { color: inherit; font-weight: 700; }

.jayssteel .b2-card-more {
  align-items: center;
  color: var(--b2-gold-dark) !important;
  display: inline-flex;
  font-size: .875rem;
  font-weight: 700;
  gap: .35rem;
  letter-spacing: .01em;
  text-decoration: none;
}
.jayssteel .b2-card-more::after { content: "\2192"; transition: transform .2s ease; }
.jayssteel .b2-card:hover .b2-card-more::after { transform: translateX(3px); }

/* A feature card with no picture: a line icon, a title and a short line of text. Used
   for the home page highlights and for the contact details. It is a real card, so a
   row of them lines up: the same padding in each, the same gap between each pair, and
   the grid stretches a short card to the height of the tallest in its row. */
.jayssteel .b2-feature {
  background: var(--b2-white);
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-r-lg);
  box-shadow: 0 1px 2px rgba(29, 26, 21, .04);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.5rem 1.35rem 1.6rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.jayssteel .b2-feature:hover {
  border-color: #ded8ca;
  box-shadow: var(--b2-shadow);
  transform: translateY(-2px);
}

/* the icon sits in a soft disc of the house green */
.jayssteel .b2-feature-ico {
  background: var(--b2-gold-soft);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--b2-gold-dark);
  display: block;
  flex: none;
  height: 46px;
  margin: 0 0 1rem;
  padding: 11px;
  width: 46px;
}

.jayssteel .b2-feature h3 {
  font-family: var(--b2-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 .4rem;
}

.jayssteel .b2-feature p { color: var(--b2-muted); font-size: .9375rem; margin: 0; max-width: none; }
.jayssteel .b2-feature p + p { margin-top: .5rem; }

/* ----------------------------------------------------------- page sections */

.jayssteel .b2-section { margin: var(--b2-space) 0; }
.jayssteel .b2-section:first-child { margin-top: 0; }

.jayssteel .b2-section-head { margin-bottom: 1.6rem; max-width: 60ch; }
.jayssteel .b2-section-head h2 { margin-bottom: .4rem; }
.jayssteel .b2-section-head p { color: var(--b2-muted); margin: 0; }

.jayssteel .b2-eyebrow {
  color: var(--b2-gold-dark);
  display: block;
  font-family: var(--b2-font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}

.jayssteel .b2-lead { color: var(--b2-ink); font-size: 1.1875rem; line-height: 1.6; }

.jayssteel .b2-split {
  align-items: center;
  display: grid;
  gap: clamp(1.4rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .jayssteel .b2-split { grid-template-columns: 1fr 1fr; }
  .jayssteel .b2-split-wide { grid-template-columns: 1.25fr 1fr; }
}

.jayssteel .b2-split figure { margin: 0; }
.jayssteel .b2-split img { border-radius: var(--b2-r-lg); display: block; height: auto; width: 100%; }

.jayssteel .b2-promo {
  background: var(--b2-gold-soft);
  border: 1px solid #f0e6c4;
  border-radius: var(--b2-r-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  margin: 1.8rem 0;
  padding: 1.3rem 1.5rem;
}

.jayssteel .b2-promo img { border-radius: var(--b2-r); height: auto; max-width: 260px; }
.jayssteel .b2-promo-text { flex: 1 1 260px; }
.jayssteel .b2-promo-text h2, .jayssteel .b2-promo-text h3 { margin: 0 0 .3rem; }
.jayssteel .b2-promo-text p { margin: 0; max-width: none; }
.jayssteel .b2-promo-code {
  background: #fff;
  border: 1px dashed var(--b2-gold-dark);
  border-radius: var(--b2-r);
  color: var(--b2-gold-dark);
  display: inline-block;
  font-weight: 700;
  letter-spacing: .14em;
  padding: .3rem .8rem;
}

.jayssteel .b2-note {
  background: var(--b2-soft);
  border-left: 3px solid var(--b2-gold);
  border-radius: 0 var(--b2-r) var(--b2-r) 0;
  color: var(--b2-body);
  font-size: .9375rem;
  margin: 1.6rem 0;
  padding: .9rem 1.1rem;
}
.jayssteel .b2-note p:last-child { margin-bottom: 0; }

.jayssteel .b2-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0; }

/* A product line's own list of items, carried over from the live site's category
   descriptions, as a wrap of quiet tags rather than a plain comma list. */
.jayssteel .b2-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
}
.jayssteel .b2-taglist li {
  background: var(--b2-soft);
  border: 1px solid var(--b2-line);
  border-radius: 999px;
  color: var(--b2-body);
  font-size: .875rem;
  margin: 0;
  padding: .4rem .95rem;
}
.jayssteel .b2-taglist li::marker { content: none; }


/* ----------------------------------------------------------------- gallery */
/*
 * A masonry grid built out of CSS columns, so every photo keeps its own aspect
 * ratio exactly: no frame, no crop, nothing stretched. Each figure carries the real
 * width and height of its file, so the row never jumps while the pictures load.
 */

.jayssteel .b2-gallery {
  columns: 2;
  column-gap: .75rem;
  margin: 1.8rem 0 2.4rem;
  padding: 0;
}

@media (min-width: 640px) { .jayssteel .b2-gallery { columns: 3; column-gap: 1rem; } }
@media (min-width: 1100px) { .jayssteel .b2-gallery { columns: 4; column-gap: 1rem; } }

.jayssteel .b2-gallery-item {
  break-inside: avoid;
  margin: 0 0 1rem;
  page-break-inside: avoid;
}

.jayssteel .b2-gallery-link {
  background: var(--b2-soft);
  border-radius: var(--b2-r);
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  position: relative;
}

.jayssteel .b2-gallery-link img {
  border-radius: 0 !important;
  display: block;
  height: auto;
  transition: transform .45s ease, filter .25s ease;
  width: 100%;
}

.jayssteel .b2-gallery-link::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .25s ease;
}

.jayssteel .b2-gallery-link:hover img, .jayssteel .b2-gallery-link:focus-visible img { transform: scale(1.035); }
.jayssteel .b2-gallery-link:hover::after, .jayssteel .b2-gallery-link:focus-visible::after { opacity: 1; }

.jayssteel .b2-gallery-caption {
  color: var(--b2-muted);
  font-size: .8125rem;
  padding: .4rem .1rem 0;
}

.jayssteel .b2-gallery-empty { color: var(--b2-muted); font-style: italic; }

/* a small gallery inside a room page */
.jayssteel .b2-gallery-sm { columns: 2; }
@media (min-width: 640px) { .jayssteel .b2-gallery-sm { columns: 3; } }

/* ---------------------------------------------------------------- lightbox */

.b2-lb {
  background: rgba(12, 11, 14, .94);
  display: none;
  inset: 0;
  position: fixed;
  z-index: 2000;
}

.b2-lb.is-open { display: flex; align-items: center; justify-content: center; }

/* --- the full screen viewer, shared by both sites; ported by scripts/gallery/port-to-belaire.sh --- */
/*
 * The room the photograph is given. It is inset rather than padded so that its own
 * clientWidth and clientHeight are exactly the space a photograph may use, which is what
 * the script measures when it works out the box to put the photograph in.
 */
.b2-lb-stage {
  align-items: center;
  display: flex;
  inset: clamp(2.5rem, 6vw, 4.5rem) clamp(.5rem, 4vw, 5rem);
  justify-content: center;
  position: absolute;
}

/*
 * The frame is the photograph's own shape and the largest that shape will go inside the
 * stage. Its width and height in pixels are worked out by the script from the photograph's
 * real pixel size, which it knows before anything has been fetched, rather than by css:
 * `aspect-ratio` is only honoured when one of the two sides is auto, and a box that has to
 * fit inside a space in both directions has neither.
 *
 * Because the frame is the right shape before anything has loaded, the thumbnail standing
 * in and the large copy that replaces it occupy exactly the same box, and the swap does
 * not move a pixel.
 */
/* `overflow: hidden` so the blur on the thumbnail standing in, and the slight overscan
   that hides its own soft edges, are clipped to the photograph's box rather than glowing
   out onto the backdrop around it. */
.b2-lb-frame { overflow: hidden; position: relative; }

/* The picture element, the img inside it, and the thumbnail standing in behind them. */
.b2-lb-frame > *, .b2-lb-frame img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;      /* contain never changes the shape of the picture */
  position: absolute;
  width: 100%;
}

/*
 * The grid thumbnail, which this page has already fetched and decoded, blown up as a
 * stand in. Softened on purpose: at a sixth of the pixels it would read as a broken
 * photograph otherwise, and softened it reads as one that is still arriving.
 */
.b2-lb-thumb { filter: blur(8px); transform: scale(1.03); }

.b2-lb-pic { opacity: 0; transition: opacity .2s ease; }
.b2-lb-pic.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .b2-lb-pic { transition: none; }
}

/*
 * Where the next and previous photographs are fetched before the visitor asks for them.
 * A real, laid out, one pixel corner of the page rather than display:none, so the browser
 * chooses the same format and the same width it will choose when the photograph is shown.
 */
.b2-lb-pre {
  height: 1px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}

.b2-lb-pre img { height: 1px; width: 1px; }
/* --- end of the full screen viewer --- */

.b2-lb-btn {
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 46px;
  justify-content: center;
  position: absolute;
  transition: background-color .18s ease;
  width: 46px;
}
.b2-lb-btn:hover, .b2-lb-btn:focus-visible { background: var(--b2-gold-dark); }
.b2-lb-btn svg { fill: currentColor; height: 22px; width: 22px; }

.b2-lb-close { right: clamp(.6rem, 2vw, 1.6rem); top: clamp(.6rem, 2vw, 1.6rem); }
.b2-lb-prev { left: clamp(.4rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.b2-lb-next { right: clamp(.4rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }

.b2-lb-bar {
  bottom: 0;
  color: rgba(255, 255, 255, .85);
  display: flex;
  font-size: .8125rem;
  gap: 1rem;
  justify-content: space-between;
  left: 0;
  padding: .9rem clamp(.8rem, 3vw, 2rem) 1.1rem;
  position: absolute;
  right: 0;
}

.b2-lb-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 575.98px) {
  .b2-lb-prev, .b2-lb-next { bottom: 3.4rem; top: auto; transform: none; }
}

/* ------------------------------------------------------------ call to action */

.b2-cta {
  background: var(--b2-gold-dark);
  color: #fff;
  padding-block: var(--b2-space);
  text-align: center;
}

.b2-cta .b2-wrap { display: block; }
/* --b2-gold-dark is a mid colour, not the light gold Parade's hotel had, so white
   carries the text here: 5.36:1 for the heading and the sentence, 4.63:1 for the
   eyebrow at 90 per cent. Measured, not assumed: the bright --b2-gold only manages
   4.24:1 with ink on it and 4.11:1 with white, both short of the 4.5:1 body text
   needs, which is why it stays out of every text-bearing fill on this site. */
.b2-cta .b2-eyebrow { color: rgba(255, 255, 255, .9); }
.b2-cta h2 { color: #fff; margin: 0 0 .4rem; }
.b2-cta p { color: #fff; margin: 0 auto 1.6rem; max-width: 52ch; }
.jayssteel .b2-cta .b2-btn, .jayssteel .b2-cta a.b2-btn { background: var(--b2-ink); border-color: var(--b2-ink); color: #fff; }
.jayssteel .b2-cta .b2-btn:hover, .jayssteel .b2-cta a.b2-btn:hover,
.jayssteel .b2-cta .b2-btn:focus, .jayssteel .b2-cta a.b2-btn:focus { background: #000; border-color: #000; color: #fff; }

/* ------------------------------------------------------------------ footer */

.b2-footer {
  background: var(--b2-dark);
  color: #d6d0c4;
  font-size: .9375rem;
  padding-top: var(--b2-space);
}

.b2-footer h2 {
  color: #fff;
  font-family: var(--b2-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 .85rem;
  text-transform: none;
}

.b2-footer a { color: #fff; text-decoration: none; }
.b2-footer a:hover, .b2-footer a:focus { color: var(--b2-gold-light); text-decoration: underline; }

.b2-footer-grid {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: var(--b2-space);
}

@media (min-width: 600px) { .b2-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .b2-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem clamp(2rem, 5vw, 4rem); } }

.b2-footer-logo {
  background: #fff;
  border-radius: var(--b2-r);
  display: block;
  height: auto;
  margin-bottom: 1rem;
  padding: .55rem .7rem;
  width: 190px;
}

.b2-footer address { font-style: normal; line-height: 1.75; margin: 0; }

.b2-footer-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.b2-footer-list li { display: flex; gap: .6rem; margin-bottom: .35rem; }
.b2-footer-list li > span { color: #b0aa9a; flex: 0 0 2.6rem; font-size: .8125rem; }

.b2-footer-links { list-style: none; margin: 0; padding: 0; }
.b2-footer-links li { margin-bottom: .45rem; }
.b2-footer-links .nav-link { background: none; border: 0; color: #e5e0d4; padding: 0; text-decoration: none; }
.b2-footer-links .nav-link:hover { color: var(--b2-gold-light); text-decoration: underline; }
.b2-footer-links .nav-sub { display: none; }

.b2-social { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.b2-social a {
  align-items: center;
  border: 1px solid #3a362c;
  border-radius: 999px;
  display: inline-flex;
  font-size: .8125rem;
  gap: .4rem;
  padding: .35rem .85rem;
}
.b2-social a:hover { background: var(--b2-dark-2); border-color: var(--b2-gold); text-decoration: none; }

.b2-footer-book p { color: #b0aa9a; margin-bottom: 1rem; }

.b2-footer-modules { padding-bottom: 1.5rem; }
.b2-footer-modules .b2-mod-title, .b2-footer-modules h3 { color: #fff; }

.b2-footer-base {
  border-top: 1px solid #2e2a22;
  color: #b0aa9a;
  font-size: .8125rem;
  padding-block: 1.1rem 1.4rem;
}
.b2-footer-base p { margin: 0; }

/* -------------------------------------------------------------- back to top */

.b2-top {
  align-items: center;
  background: var(--b2-ink);
  border-radius: 999px;
  bottom: 1.1rem;
  box-shadow: var(--b2-shadow);
  color: #fff;
  display: flex;
  height: 42px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 1.1rem;
  transition: opacity .2s ease, background-color .2s ease;
  width: 42px;
  z-index: 800;
}

.b2-top.is-on { opacity: .9; pointer-events: auto; }
.b2-top:hover { background: var(--b2-gold-dark); color: #fff; opacity: 1; }
.b2-top svg { fill: currentColor; height: 20px; width: 20px; }

/* ----------------------------------------------------------- modules, forms */

.jayssteel .b2-mod {
  background: var(--b2-soft);
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-r-lg);
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.35rem;
}

.jayssteel .b2-mod-title {
  font-family: var(--b2-font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  margin: 0 0 .9rem;
  text-transform: uppercase;
}

.jayssteel .b2-mod .mod-menu, .jayssteel .b2-mod ul { list-style: none; margin: 0; padding: 0; }
.jayssteel .b2-mod li { margin: 0; }
.jayssteel .b2-mod li a {
  border-bottom: 1px solid var(--b2-line);
  color: var(--b2-ink) !important;
  display: block;
  font-size: .9375rem;
  padding: .55rem 0;
  text-decoration: none;
}
.jayssteel .b2-mod li:last-child a { border-bottom: 0; }
.jayssteel .b2-mod li a:hover { color: var(--b2-gold-dark) !important; }
.jayssteel .b2-mod li.active > a { color: var(--b2-gold-dark) !important; font-weight: 600; }

.b2-side { min-width: 0; }

@media (min-width: 992px) { .b2-side-right .b2-mod { position: sticky; top: calc(var(--b2-head-h) + 1.5rem); } }

.jayssteel label { font-size: .875rem; font-weight: 600; }

.jayssteel input[type="text"], .jayssteel input[type="email"], .jayssteel input[type="tel"],
.jayssteel input[type="url"], .jayssteel input[type="password"], .jayssteel input[type="search"],
.jayssteel select, .jayssteel textarea, .jayssteel .form-control {
  background: #fff;
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-r);
  color: var(--b2-ink);
  font-family: var(--b2-font);
  font-size: 1rem;
  max-width: 34rem;
  padding: .65rem .85rem;
  width: 100%;
}

.jayssteel input:focus, .jayssteel select:focus, .jayssteel textarea:focus {
  border-color: var(--b2-gold-dark);
  box-shadow: 0 0 0 3px rgba(184, 70, 15, .22);
  outline: none;
}

.jayssteel .btn, .jayssteel button[type="submit"], .jayssteel input[type="submit"],
.jayssteel .btn-primary {
  background: var(--b2-gold-dark);
  border: 1px solid var(--b2-gold-dark);
  border-radius: 999px;
  color: #fff;
  font-family: var(--b2-font);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .72rem 1.4rem;
  text-transform: uppercase;
}

.jayssteel .btn:hover, .jayssteel button[type="submit"]:hover, .jayssteel .btn-primary:hover {
  background: var(--b2-gold-deep);
  border-color: var(--b2-gold-deep);
  color: #fff;
}

.jayssteel .btn-secondary {
  background: #fff;
  border-color: var(--b2-line);
  color: var(--b2-ink);
}
.jayssteel .btn-secondary:hover { background: var(--b2-ink); border-color: var(--b2-ink); color: #fff; }

.jayssteel .alert { border-radius: var(--b2-r); }

.jayssteel .com-contact__container .control-group { margin-bottom: 1rem; }

/* The maps. On this site they are two photographs of printed maps rather than an
   embedded frame, so they sit side by side, each at its own size, centred. */
.jayssteel .b2-map {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  justify-content: center;
  margin: 1.6rem 0;
}

.jayssteel .b2-map figure { margin: 0; max-width: 100%; }
.jayssteel .b2-map img { border-radius: var(--b2-r-lg); display: block; height: auto; width: 100%; }
.jayssteel .b2-map figcaption { color: var(--b2-muted); font-size: .875rem; margin-top: .5rem; }
.jayssteel .b2-map iframe { aspect-ratio: 16 / 9; border: 0; display: block; width: 100%; }
.jayssteel .b2-map-links { font-size: .9375rem; margin-top: .4rem; }

/* ---------------------------------------------------------------- error page */

.b2-error { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; }
.b2-error-code { color: var(--b2-gold); font-family: var(--b2-display); font-size: clamp(4rem, 14vw, 9rem); line-height: 1; margin: 0; }
.b2-error h1 { margin-top: .5rem; }
.b2-error p { margin-inline: auto; max-width: 48ch; }
.b2-error .b2-actions { justify-content: center; }



/* ----------------------------------------------------- an embedded form or map */
/*
 * The reservations form is a Google form in an iframe. Google sets its own height, so
 * the frame is given one and allowed to scroll rather than being squeezed into a ratio
 * box that would cut the Submit button off.
 */
.jayssteel .b2-embed {
  border: 1px solid var(--b2-line);
  border-radius: var(--b2-r-lg);
  margin: 1.5rem 0;
  overflow: hidden;
}

.jayssteel .b2-embed iframe { border: 0; display: block; max-width: 100%; width: 100%; }

/* ------------------------------------------------------------- a highlight note */
/* A quiet panel for a fact worth setting apart, such as a BBBEE or CIDB rating.
   Ink on the pale gold wash is well clear of AA; measured, not assumed. */
.b2-notice {
  background: var(--b2-gold-soft);
  border-left: 3px solid var(--b2-gold);
  border-radius: var(--b2-r);
  padding: .85rem 1.1rem;
}

.b2-notice p { color: var(--b2-ink); margin: 0; }
.jayssteel .b2-band:has(> .b2-wrap > .b2-notice) { padding-block: 1.2rem; }

/* A telephone number, an email address or a web address under a card's text. The card
   meta style above it is uppercase with wide tracking, which suits a short label and
   not an email address. */
.jayssteel .b2-contactline {
  color: var(--b2-muted);
  font-size: .875rem;
  margin: .6rem 0 0;
}

/* --------------------------------------------------------------- print */

@media print {
  .b2-header, .b2-nav, .b2-cta, .b2-footer, .b2-top, .b2-hero-slot, .b2-scrim { display: none !important; }
  body.jayssteel { font-size: 11pt; }
  .jayssteel .b2-menu-cols { columns: 2; }
}