/*
 * Rounded corners.
 *
 * The theme is sharp-edged throughout: cards are set to border-radius 0, buttons to 4px,
 * form inputs to 8px. This softens the corners a little for a more current look without
 * changing anything else about the design.
 *
 * Two values, so everything curves consistently: 12px on the big surfaces, 8px on the
 * small controls. Fixed pixels rather than a percentage, because a percentage is a
 * proportion of the box, so a 350x420 card would get a 70x84 ellipse while a 165x52
 * button got a lopsided 33x10.
 *
 * This file is the CMS's own custom CSS, at Appearance, Custom CSS in the admin. It loads
 * after the theme's stylesheet, so it overrides without editing it. The tracked copy is
 * platform/themes/transp/assets/css/style.integration.css: ./ijana setup and the image build
 * copy it into place, and ./ijana db-save copies an edit made in the admin back into it.
 */

:root {
    --ijana-radius: 12px;
    --ijana-radius-sm: 8px;
}

/*
 * A card with no photograph.
 *
 * .cardService takes its height from the image in .cardImage, and the theme lays .cardInfo
 * over the bottom of that image with position: absolute. Give the block an icon and no
 * photograph and the card is 0px tall, so the panel has nothing to hang off; the overflow
 * below then clips it away entirely. That is what hid all fifteen cards in "Which service
 * do you need?" on /services. Where there is no image, the panel goes back into flow and
 * the card sizes to its own content.
 */
.cardService:not(:has(.cardImage img)) .cardInfo {
    position: static;
}

/* Cards and panels. overflow hides the corners of a photograph that fills the card top. */
.card-offer,
.cardGrid,
.cardService,
.card-testimonial-grid,
.card-testimonial-3,
.box-form-request-quote-2,
.box-info-3-bottom,
.box-map,
.accordion-item {
    border-radius: var(--ijana-radius);
    overflow: hidden;
}

/*
 * Buttons, the tag pills above a heading, and form controls.
 *
 * The theme writes each button variant as a doubled class, `.btn.btn-brand-1`, so a single
 * class here loses on specificity however late it loads. These match that shape, which is
 * also why they are listed one by one rather than covered by `.btn` alone.
 */
.btn,
.btn.btn-brand-1,
.btn.btn-brand-1-big,
.btn.btn-brand-2,
.btn.btn-brand-2-full,
.btn.btn-default,
.btn.btn-tag,
.btn.btn-calculator,
.btn.btn-get-quote,
.form-control,
.select2-container--default .select2-selection--single {
    border-radius: var(--ijana-radius-sm);
}

/*
 * The header logo slot.
 *
 * The theme reserves 150px, which suits its own 150 x 37 lockup. Ours is 552 x 112, so at
 * 150px it renders 30px tall, and the theme's `min-height: 37px` on the image then stretches
 * it out of proportion. 230px puts it at about 47px in an 87px bar, close to the demo's, and
 * clears the minimum so nothing is distorted.
 *
 * The selector has to match the theme's own `.header .main-header .header-left .header-logo`,
 * four classes deep, or it loses on specificity however late it loads. Below 350px the theme
 * narrows this slot to 110px for a phone; that is left alone.
 */
@media (min-width: 350px) {
    .header .main-header .header-left .header-logo {
        max-width: 230px;
        min-width: 230px;
    }
}

/*
 * The topbar band.
 *
 * .bg-grey-900 is #041c2f, hardcoded in the theme's stylesheet and not driven by the
 * secondary_color theme option, so the one dark band on every page stayed the theme's navy.
 * It is used on exactly one element in the whole theme, this bar, so recolouring it by that
 * pair of classes touches nothing else. White on the brand brown measures 15.14, see
 * content/brand.md.
 */
.box-bar.bg-grey-900 {
    background-color: var(--secondary-color);
}

/*
 * Mega panel columns.
 *
 * A heading that wraps to two lines, Technical & Asset Services, pushed its list down out of
 * line with the other columns, so two lines are reserved for every heading. The last column
 * has no heading at all, being the loose links, so it reserves the same space to keep its
 * links on the same baseline as the rest.
 */
.header .main-menu li div.sub-menu.five-col .menu-col > a {
    display: block;
    /* These inherit 56px of vertical padding from a top-level nav link, which made the
       reserved height unpredictable. Zeroed, and two lines reserved: with an icon beside it,
       Technical & Asset Services wraps in a 270px column, and without the reserve its list
       dropped out of line with the other four. */
    padding: 0;
    min-height: 56px;
}

.header .main-menu li div.sub-menu.five-col .menu-col.cta > .megamenu:first-child {
    margin-top: 46px;
}

/*
 * The header's paired buttons.
 *
 * Two buttons sharing an edge read as one control, which is how the reference header in
 * ref_images does it. The inner corners are squared so only the outside of the pair is
 * rounded, and the icon sits beside the label rather than above it.
 */
.header-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-cta .btn:first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.header-cta .btn:last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/*
 * The mega panel, rounded and with its last column tinted.
 *
 * Only the bottom corners: the top edge meets the header. The last column is the call to
 * action, so it takes the brand gold, which always carries brown text. Its links are set on
 * it explicitly, because the theme colours a panel link #041c2f.
 */
.header .main-menu li div.sub-menu.five-col,
.header .main-menu > li > ul.sub-menu {
    border-end-start-radius: var(--ijana-radius);
    border-end-end-radius: var(--ijana-radius);
}

/* A nested dropdown flies out beside its parent rather than down from the header, so it is
   rounded on all four corners. */
.header .main-menu li ul.sub-menu ul.sub-menu {
    border-radius: var(--ijana-radius);
}

.header .main-menu li div.sub-menu.five-col .menu-col.cta {
    background-color: var(--primary-color);
    border-radius: var(--ijana-radius);
    padding: 20px 18px;
}

.header .main-menu li div.sub-menu.five-col .menu-col.cta .megamenu li a {
    color: var(--secondary-color);
}

/*
 * Mega panel column icons.
 *
 * A glyph beside the column heading, from the theme's own icon font, sized to the heading
 * rather than to a card.
 */
.header .main-menu li div.sub-menu.five-col .menu-col > a i {
    font-size: 20px;
    margin-inline-end: 8px;
    vertical-align: -2px;
}

/*
 * The footer's bottom strip, and the scroll-up button.
 *
 * `.footer-1` already takes the brand brown from the secondary_color option, but `.footer-2`
 * below it is #041c2f hardcoded, the same problem the topbar had. It takes the brown too,
 * separated by a hairline of the ground lightened rather than by a second colour, which
 * content/brand.md does not allow.
 *
 * The scroll-up button is fixed to the bottom right, so at the foot of the page it sat over
 * the legal links and clipped Cookie Policy. The links get room for it, and the button takes
 * the same radius as everything else.
 */
.footer-2 {
    background-color: var(--secondary-color);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-bottom .menu-bottom {
    padding-inline-end: 76px;
}

#scrollUp {
    border-radius: var(--ijana-radius-sm);
}

/*
 * Icon weight.
 *
 * The theme ships Uicons Regular Rounded and no heavier cut, so a glyph cannot be made bold
 * by picking another file. Three things were making them read washed out instead:
 *
 *   - the theme fades every icon inside a nav link: `.header .main-menu li a i` sets
 *     opacity .38, which was meant for the small decorative icon beside a top-level item.
 *     Every panel icon inherited it, which is what made them look washed out
 *   - a card icon inherited Bootstrap's body colour, rgb(33, 37, 41), rather than a brand
 *     colour, so it was grey on white
 *   - an icon inside a panel list took that list's 12px, which is too small to read as an
 *     icon at all
 *   - the regular cut is a thin stroke at any size
 *
 * So: brand colour stated rather than inherited, panel list icons brought up to 16px, and a
 * hairline stroke of the icon's own colour to thicken the drawing. text-stroke on a font
 * icon is the only way to weight it without a second font file.
 */
.card-offer .card-image i,
.cardService .cardInfo i,
.image-how .img i,
.chart-title i,
.feature-title i,
.header .main-menu li div.sub-menu.five-col .menu-col a i {
    color: var(--secondary-color);
    -webkit-text-stroke: 0.6px currentColor;
}

/* The fade is meant for a top-level item's decorative icon, and ours have none. Any icon
   inside a dropdown, vertical or panel, is there to be read. */
.header .main-menu li .sub-menu a i {
    opacity: 1;
}

/*
 * The vertical dropdown's links are 14px, so their icons are sized to that. The link is a
 * flex row because the panel is 280px at most, and two of these labels wrap: without it the
 * second line ran back under the icon instead of lining up with the first.
 */
.header .main-menu li ul.sub-menu li a {
    display: flex;
    align-items: flex-start;
}

.header .main-menu li ul.sub-menu li a i {
    flex: 0 0 auto;
    line-height: 1.5;
    font-size: 15px;
    margin-inline-end: 8px;
    vertical-align: -2px;
    color: var(--secondary-color);
    -webkit-text-stroke: 0.6px currentColor;
}

.header .main-menu li div.sub-menu.five-col .menu-col .megamenu li a i {
    font-size: 18px;
    margin-inline-end: 10px;
    vertical-align: -3px;
}

/*
 * A panel link is a flex row for the same reason as the vertical dropdown's: a column is
 * 270px and four of these labels wrap, and without it the second line ran back under the
 * marker instead of lining up with the first.
 */
.header .main-menu li div.sub-menu.five-col .menu-col .megamenu li a {
    display: flex;
    align-items: flex-start;
}

.header .main-menu li div.sub-menu.five-col .menu-col .megamenu li a i {
    flex: 0 0 auto;
}

/* A column's own links are 12px, so their marker is sized to the text rather than to the
   18px glyphs in the call-to-action column. */
.header .main-menu li div.sub-menu.five-col .menu-col:not(.cta) .megamenu li a i {
    font-size: 14px;
    margin-inline-end: 6px;
    vertical-align: -2px;
}

/* On the gold column the icons take the same brown as its links. */
.header .main-menu li div.sub-menu.five-col .menu-col.cta a i {
    color: var(--secondary-color);
}

/* The header button is on a dark ground, where the icon inherits the button's white. */
.header-cta .btn-brand-2 i {
    color: inherit;
}

/* The step icons on the dark band were in this rule too, and should not have been. The
   band is dark but the icon is not on it: it sits inside a gold circle, so inheriting gave
   it Bootstrap's body colour, rgb(33, 37, 41), against the brand brown every other icon
   states. Brown on gold is the pairing content/brand.md measures at 9.74 and sanctions. */
.box-how-it-work-2 .image-how .img i {
    color: var(--secondary-color);
}

/*
 * Tables in article and service copy.
 *
 * The theme styles nothing inside .ck-content but the ticked list, so a table came out as
 * two columns of text with no rules at all: the nine-row records table in the crane hiring
 * article was unreadable. Every service page carries one to four comparison tables through
 * the same path, so this is where they get their lines.
 *
 * The header takes the brand brown with white text, rows take a hairline rule, and the
 * whole table scrolls sideways on a narrow screen rather than squeezing its columns to
 * nothing.
 */
.ck-content table {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 24px;
}

.ck-content table th,
.ck-content table td {
    padding: 12px 16px;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid #e8e9ed;
}

.ck-content table th {
    background-color: var(--secondary-color);
    color: #fff;
    font-weight: 600;
}

.ck-content table tr:last-child td {
    border-bottom: 0;
}

/* Rounding the corners needs the overflow, and the overflow is what carries the scroll. */
.ck-content table {
    border-radius: var(--ijana-radius);
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .ck-content table {
        display: block;
        overflow-x: auto;
    }
}

/*
 * Cards in a card row hold one height.
 *
 * A card row puts its cards in a Bootstrap row, so the columns already stretch to the
 * tallest card on the line, but the card inside sits at its own content height. The rule
 * along the card foot then lands at a different place on every card, which is what "Which
 * service do you need?" on /services and every card row on the About pages were doing.
 *
 * Two wrappers, because the two blocks nest differently: the services block puts the card
 * straight in the column, and why-choose-us wraps it in .item-reason first. Both are
 * scoped, so the cards in the header's mega panel, which share the class, are left alone.
 *
 * why-choose-us has two layouts and only one of them wants this. Style 2 puts one card in
 * each col-xl-3 across a row, so the cards should match. Style 1 stacks several cards
 * down a col-xl-6, where filling the column makes a card as tall as the whole stack: the
 * five register cards on /health-safety-environment went to 1349px. So the selector names
 * the four-up column rather than .item-reason on its own.
 */
.box-background-offer .card-offer,
.col-xl-3 > .item-reason,
.col-xl-3 > .item-reason > .card-offer {
    height: 100%;
}

/*
 * The call-to-action band.
 *
 * The block writes its background-image inline, so there is no way to leave the slot
 * empty: with nothing passed the media library answers with its own placeholder, and the
 * theme's demo asset for the slot, backgrounds/bg-get-quote.png, turns out to be a
 * 1000x127 grey "1920 x 243" placeholder the vendor never replaced. The band already
 * carries the brand brown behind it and there is no artwork to put on top, so the
 * decorative layer is dropped rather than filled with something invented. !important
 * because the value it is beating is an inline style.
 */
.section.bg-get-quote {
    background-image: none !important;
}

/*
 * The hero, its video, and the tint over both.
 *
 * The hero paints its photograph as a CSS background. The video sits over that as a real
 * element, so the photograph is what shows while the file loads, on a slow connection and
 * on any browser that refuses to autoplay.
 *
 * The tint was written for the video, on the reasoning that a moving shot cannot hold a
 * dark side steady behind white text. A still cannot either unless it was chosen dark, and
 * most were not: the heading and body copy on /services and /oil-gas were sitting on pale
 * sky and were close to unreadable. So the tint covers every hero, not only the one with
 * footage under it.
 */
.banner-1 .banner-video {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-1::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 24, 32, 0.78) 0%, rgba(16, 24, 32, 0.5) 55%, rgba(16, 24, 32, 0.3) 100%);
    z-index: 1;
}

.banner-1 > .container {
    position: relative;
    z-index: 2;
}

/* The clip the hero's play button opens, inside the theme's own Magnific popup. */
.box-popup-video {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background-color: #000;
    border-radius: var(--ijana-radius);
    overflow: hidden;
}

.box-popup-video video {
    display: block;
    width: 100%;
    height: auto;
}

.box-popup-video .mfp-close {
    color: #fff;
}

/*
 * The card row under the hero.
 *
 * Swiper makes each slide the flex item and leaves the card inside it at its own content
 * height, so a card with a one-line description sat 24px shorter than its neighbours. The
 * card becomes the full height of its slide instead, which holds however long the copy
 * gets.
 */
.box-slider-homepage-4 .swiper-slide {
    display: flex;
    height: auto;
}

.box-slider-homepage-4 .card-offer {
    width: 100%;
}

/*
 * The numbered steps.
 *
 * The theme centres the step's icon by giving the 84px circle a line-height to match,
 * which works for the image it used to hold and not for a glyph: an inline glyph sits on
 * the baseline of that 84px line box, so it rode high in the circle. Centring the circle's
 * own content puts the glyph in the middle of it whatever the glyph's own metrics are.
 */
.list-how-works li .image-how .img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/*
 * The vertical dash under the middle step carries the eye from the end of the first row
 * down to the second. With six steps both rows are full, so it would point from the end of
 * one row to the end of the other, against the reading order. `nth-last-child(4)` is the
 * marked middle step of a list of exactly six: the four-step list on /services keeps its
 * connector.
 */
.list-how-works li.dashed-2:nth-last-child(4)::before {
    display: none;
}

/*
 * The dash between steps runs from each circle to the next, and the theme hides it on the
 * last step only. A step at the end of a row has nothing to its right either, so its dash
 * ran off into the dark. Below 992px the steps stack one per row and the same dash becomes
 * the vertical connector, which is why this is scoped.
 */
@media (min-width: 992px) {
    .list-how-works li:nth-child(3n)::before {
        display: none;
    }
}

/*
 * The footer's five columns: the logo, three link columns (Services, Company, For
 * professionals) and Contact.
 *
 * The theme's own shares do add up to 100%, but they leave Contact at 20%, where the
 * address wraps line by line. From 1400px, where the container is 1320px wide, the link
 * columns give up a point each, the longest entry, "Health, Safety & Environment", still
 * fits on one line, and Contact takes the room. Below 992px Bootstrap's col-lg-3 stacks
 * them and these widths do not apply.
 */
@media (min-width: 992px) {
    .footer-1 .width-23 {
        width: 22%;
    }

    .footer-1 .width-16 {
        width: 18%;
    }

    .footer-1 .width-20 {
        width: 24%;
    }
}

/*
 * Below 1400px the container narrows, the logo ran into the Services heading, the social
 * icons wrapped and the link columns broke every entry. The logo column takes its own row
 * and the four others share the next.
 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .footer-1 .width-23 {
        width: 100%;
    }

    .footer-1 .width-16,
    .footer-1 .width-20 {
        width: 25%;
    }
}

/*
 * The Contact column is the core Text widget, and a link inside it took the site's default
 * link colour, near-black on the brown footer. The menu columns beside it are white.
 */
.footer-1 .text-white a {
    color: #fff;
}

.footer-1 .text-white a:hover {
    color: var(--primary-color);
}

/*
 * One type scale.
 *
 * The theme's utility classes are applied inconsistently by its own templates, so text at
 * the same level came out at different sizes: the description under an item title was 14px
 * in a card, 12px in a feature list and 16px in a step, buttons were 14px or 15px
 * depending on the variant a block reached for, and the footer set its Contact column at
 * 12px beside 16px menu links. These rules state the scale by role.
 *
 *   64  page heading          h1, hero only
 *   48  section heading       h2
 *   32  heading inside block  h3
 *   22  card and step title   h5
 *   18  feature title         h6
 *   16  section lead, footer column body, form controls
 *   15  button label
 *   14  item description, footer bottom bar
 *   12  tag pill, the one label that stays small
 *
 * Those are the desktop sizes. The theme steps the two page-level headings down on a phone,
 * h1 to 34 and h2 to 25, and that is right: a 64px heading in a 400px window is not a
 * heading, it is a wall. Everything below h2 holds its size at every width.
 *
 * Measured rather than read: walking every page at 1440 and 400 and collecting the computed
 * font-size of every element with its own text is what turned up the five that had drifted,
 * three of them behind a selector shared with slots that were already right.
 */

/* The 12px body tier collapses into 14px. .font-xs carries every feature description in
   the theme, and 14/24 is what the cards beside them already use. */
.font-xs {
    font-size: 14px;
    line-height: 24px;
}

/* A step's description is the same thing as a feature's. .font-md is declared !important
   by the theme, so the override has to repeat it. */
.list-how-works li .info-how .font-md {
    font-size: 14px !important;
    line-height: 24px !important;
}

/* Feature titles sat at 16px through .font-md-bold while the service lists on /services
   used the theme's own h6 at 18px. */
.chart-title,
.feature-title {
    font-size: 18px;
    line-height: 22px;
}

/* Three button variants were 14px against the other three at 15px. */
.btn.btn-brand-1,
.btn.btn-brand-1-big,
.btn.btn-link {
    font-size: 15px;
}

/* Form controls were 12px. 16px also stops Safari on iOS zooming the page when a field
   takes focus. The theme's 51px height with 18px of padding fits a 12px line and clipped a
   16px one, so the box grows to the 54px the theme's own first rule sets and the padding
   comes in to match. */
.form-control {
    font-size: 16px;
    line-height: 24px;
    height: 54px;
    padding-top: 14px;
    padding-bottom: 14px;
}

textarea.form-control {
    height: auto;
}

/* Five more that sat off the scale, found by measuring every page rather than reading the
   templates. Each is scoped to where it is actually wrong, because three of the classes are
   shared with slots that are already right. */

/* The FAQ question. A card title, at the theme's 20px. The theme writes it as
   `.accordion .accordion-button`, so a single class here loses, the same way it does on the
   doubled button variants above. */
.accordion .accordion-button {
    font-size: 22px;
    line-height: 30px;
}

/* The byline on an article. .font-xl-bold is used in six places and only this one is a
   feature title, so the rule names the author slot rather than the class. */
.box-author .author-name {
    font-size: 18px;
    line-height: 22px;
}

/* The panel laid over the photograph beside a numbered step list. A bare h4 at the theme's
   26px; it carries a sentence, so it reads as a card title. */
.info-play h4 {
    font-size: 22px;
    line-height: 30px;
}

/* The eyebrow above a call-to-action heading. .font-3xl exists for this one slot and sets
   30px, which competes with the 48px heading under it. */
.font-3xl {
    font-size: 16px;
    line-height: 28px;
}

/* The cookie banner belongs to a plugin rather than the theme, and came in at 13px. It is
   on every page until it is dismissed, so it goes on the scale with everything else. The
   plugin writes its own rules inline as `.site-notice .site-notice__message`, and writes
   them into a style block in the body, which is after this stylesheet in source order. So
   matching its specificity is not enough and this is one of the few places that needs
   !important. */
.site-notice .site-notice__message,
.site-notice .site-notice__message a {
    font-size: 14px !important;
    line-height: 24px !important;
}

/* The footer's Contact column and the blurb under the logo, against 16px menu links. */
.footer-1 .text-white,
.footer-1 .text-white a,
.footer-1 p.font-xs {
    font-size: 16px;
    line-height: 28px;
}

/* The bottom bar: the copyright was 16px beside 14px legal links. */
.footer-bottom .font-md {
    font-size: 14px !important;
    line-height: 24px !important;
}

/*
 * The preloader.
 *
 * The template spins a dark blue square, #034460, which belongs to neither of our two
 * colours. The mark from the logo turns instead: it is a four-blade roundel, so rotation
 * is the motion it already suggests, and the theme loads it anyway as the favicon and as
 * the shape beside every section heading.
 */
.preloader-mark {
    width: 72px;
    height: 72px;
    animation: ijana-preloader-spin 1.4s linear infinite;
}

@keyframes ijana-preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .preloader-mark {
        animation: none;
    }
}

/*
 * The footer logo rendered 343px wide against the header's 230px, because the theme lets
 * it fill its column. The mark reads as the smaller, quieter one of the two.
 */
.footer-logo img {
    max-width: 220px;
}

/*
 * Prose pages: the legal pages, which are written as HTML rather than assembled from
 * blocks. The theme styles almost nothing inside .ck-content, so a page of headings,
 * paragraphs and lists came out as one unbroken wall: no space under a paragraph, no
 * bullets, and every h2 at the 48px the theme uses for a section title on a landing page.
 * At twenty-two headings that reads as a stack of banners rather than a document.
 *
 * Scoped to .page-prose so the fifteen service pages, which share the .ck-content class
 * and were signed off as they are, keep the sizes they were approved with.
 */
.page-prose .ck-content h2 {
    font-size: 32px;
    line-height: 40px;
    margin-top: 48px;
    margin-bottom: 16px;
}

.page-prose .ck-content h3 {
    font-size: 22px;
    line-height: 30px;
    margin-top: 32px;
    margin-bottom: 12px;
}

.page-prose .ck-content > :first-child {
    margin-top: 0;
}

.page-prose .ck-content ul,
.page-prose .ck-content ol {
    margin-bottom: 24px;
    padding-left: 22px;
}

.page-prose .ck-content ul {
    list-style: disc;
}

.page-prose .ck-content ol {
    list-style: decimal;
}

.page-prose .ck-content li {
    font-size: 16px;
    line-height: 28px;
    color: #041c2f;
    margin-bottom: 8px;
}

/* The theme underlines no link in body copy, which inside a legal page leaves a
   cross-reference looking like bold text. */
.page-prose .ck-content a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.page-prose .ck-content table {
    margin-bottom: 32px;
}

@media (max-width: 767.98px) {
    .page-prose .ck-content h2 {
        font-size: 25px;
        line-height: 35px;
        margin-top: 36px;
    }

    .page-prose .ck-content h3 {
        font-size: 18px;
        line-height: 26px;
    }
}

/*
 * The equipment catalogue.
 *
 * A machine shows a public availability status on its card and its page, and the theme has
 * no component for one. The badge takes the size of the btn-tag pill and one of three
 * grounds: brand green for available, brand gold for available on request and reserved,
 * and the theme's pale grey for on hire and under maintenance. Gold carries the brown text,
 * as it does everywhere else on the site.
 */
.equipment-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--ijana-radius-sm);
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
}

.equipment-status--green {
    background-color: #3e7742;
    color: #fff;
}

.equipment-status--amber {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.equipment-status--grey {
    background-color: #e8e9ed;
    color: var(--secondary-color);
}

/* A hero-banner style 4 with no cards, as on the Cranes page, still prints its slider's
   prev and next arrows over the bottom edge of the banner. Nothing to slide, nothing shown. */
.box-slider-homepage-4:not(:has(.swiper-slide)) {
    display: none;
}

/* The figures on a machine card, one to a line with a hairline between them. */
.equipment-card-specs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.equipment-card-specs li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #e8e9ed;
}

.equipment-card-specs li:last-child {
    border-bottom: 0;
}

/*
 * The machine card is the theme's cardGrid, which reserves 172px under the photograph and
 * pins a 90%-wide caption panel over its bottom edge. A machine's panel carries a status,
 * make and model, spec lines and a base, so it is taller than that: without a photograph
 * the card clipped the status and the name off its top, and with one it would cover most
 * of the picture. Here the panel goes back into flow below the photograph instead.
 */
.cardGrid.equipment-card {
    padding-bottom: 0;
}

.cardGrid.equipment-card .cardInfo {
    position: static;
    width: 100%;
}

/*
 * The machine page, laid out like the equipment catalogues it was benchmarked against: a
 * gallery, title and tabs on the left, an enquiry box on the right.
 */
.equipment-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    font-size: 14px;
}

.equipment-trail li + li::before {
    content: "/";
    margin-inline-end: 8px;
    color: #8c92a1;
}

.equipment-trail a {
    color: var(--secondary-color);
}

/* The theme's main.js already turns these two into a Slick slider and its thumbnails. */
.equipment-detail-gallery .product-image-slider img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ijana-radius);
}

.equipment-detail-gallery .slider-nav-thumbnails {
    position: relative;
    margin: 12px -6px 0;
    padding: 0 36px;
}

.equipment-detail-gallery .slider-nav-thumbnails .slick-slide {
    padding: 0 6px;
    cursor: pointer;
}

.equipment-detail-gallery .slider-nav-thumbnails img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: var(--ijana-radius-sm);
    opacity: 0.7;
}

.equipment-detail-gallery .slider-nav-thumbnails .slick-current img {
    border-color: var(--primary-color);
    opacity: 1;
}

.equipment-detail-gallery .slick-prev,
.equipment-detail-gallery .slick-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--secondary-color);
    background-color: var(--primary-color);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.equipment-detail-gallery .slick-prev {
    left: 0;
}

.equipment-detail-gallery .slick-next {
    right: 0;
}

/* The theme's h1 is sized for page heroes; a machine name sits in a two-thirds column. */
.equipment-detail-title {
    font-size: 40px;
    line-height: 48px;
}

@media (max-width: 767.98px) {
    .equipment-detail-title {
        font-size: 30px;
        line-height: 38px;
    }
}

.equipment-tabs {
    gap: 8px 28px;
    border-bottom: 1px solid #e8e9ed;
}

.equipment-tabs .nav-link {
    padding: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.equipment-tabs .nav-link.active {
    color: var(--secondary-color);
    border-bottom-color: var(--primary-color);
}

.equipment-enquiry {
    position: sticky;
    top: 110px;
}

.equipment-enquiry-box {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e8e9ed;
    border-radius: var(--ijana-radius);
}

.equipment-enquiry-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    font-weight: 600;
    color: #fff;
    background-color: var(--secondary-color);
}

.equipment-enquiry-box__body {
    padding: 24px;
}

.equipment-periods,
.equipment-documents {
    list-style: none;
    padding: 0;
}

.equipment-periods li {
    padding: 8px 0;
    border-bottom: 1px solid #e8e9ed;
}

/*
 * The catalogue at /equipment.
 *
 * The theme has no listing page with filters, so these few rules give the search band and
 * the sidebar panels a ground and an edge, in the brand brown and the theme's hairline grey,
 * at the corners every other card uses.
 */
.equipment-search {
    padding: 24px;
    background-color: var(--secondary-color);
    border-radius: var(--ijana-radius);
}

/* The theme's inputs render 54px tall with 12px text, and its button about 32px, so side
   by side the button sat short of the fields and the keyword text read smaller than the sort. */
.equipment-search .form-control {
    font-size: 15px;
}

.equipment-search .btn-brand-1 {
    height: 54px;
    font-size: 16px;
}

.equipment-filter {
    padding: 24px;
    background-color: #fff;
    border: 1px solid #e8e9ed;
    border-radius: var(--ijana-radius);
}

.equipment-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.equipment-filter__list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 15px;
    color: var(--secondary-color);
}

.equipment-filter__list a.active {
    font-weight: 700;
    text-decoration: underline;
}

/*
 * Personnel doors: the first screen of /personnel. Two halves in the brand's brown and a
 * warm light stone, as the FundiHub reference splits hiring from joining.
 */
.personnel-doors {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.personnel-doors__half {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 380px;
    padding: 64px 40px;
    text-align: center;
}

.personnel-doors__half--client {
    background-color: var(--secondary-color);
}

.personnel-doors__half--professional {
    background-color: #f3f0ec;
}

.personnel-doors__icon {
    font-size: 52px;
    line-height: 1;
}

.personnel-doors__half--client .personnel-doors__icon {
    color: var(--primary-color);
}

.personnel-doors__half--professional .personnel-doors__icon {
    color: var(--secondary-color);
}

.personnel-doors__title {
    margin: 0;
    font-size: 40px;
    line-height: 48px;
    text-wrap: balance;
}

.personnel-doors__text {
    max-width: 40ch;
    margin: 0 0 8px;
}

.personnel-doors__half--client .personnel-doors__text {
    color: #ebdcd6;
}

.personnel-doors__half--professional .personnel-doors__text {
    color: #6b625d;
}

@media (max-width: 767.98px) {
    .personnel-doors {
        grid-template-columns: 1fr;
    }

    .personnel-doors__half {
        min-height: 0;
        padding: 48px 20px;
    }

    .personnel-doors__title {
        font-size: 30px;
        line-height: 38px;
    }
}

/*
 * Request form: /personnel/request. Five steps on one page, a step list at the top that
 * jumps to each, and a honeypot kept out of sight.
 */
.request-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.request-steps a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border: 1px solid #e8e9ed;
    border-radius: 999px;
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 600;
}

.request-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 13px;
}

.page-anchor {
    display: block;
    position: relative;
    /* The header is fixed, so a section jumped to from the menu would otherwise
       sit under it. Matches the offset .request-step uses. */
    scroll-margin-top: 110px;
}

.request-step {
    margin: 0 0 48px;
    padding: 0;
    border: 0;
    scroll-margin-top: 110px;
}

.request-step > legend {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e9ed;
    color: var(--secondary-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.request-label {
    display: block;
    margin-bottom: 6px;
    color: #101828;
    font-size: 15px;
    font-weight: 600;
}

.request-help {
    margin: 6px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 20px;
}

.request-error {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

.request-form .is-invalid {
    border-color: #b42318;
}

.request-alert {
    padding: 14px 18px;
    border-left: 4px solid #b42318;
    background-color: #fef3f2;
    color: #7a271a;
    font-weight: 600;
}

.request-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.request-choices--stack {
    flex-direction: column;
}

.request-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: #101828;
    font-size: 15px;
    cursor: pointer;
}

.request-choice input {
    margin-top: 4px;
    accent-color: var(--secondary-color);
}

.request-role {
    padding: 20px;
    border: 1px solid #e8e9ed;
    border-radius: var(--ijana-radius);
    background-color: #fff;
}

.request-role__title {
    margin: 0 0 16px;
    color: var(--secondary-color);
    font-size: 18px;
}

.request-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.request-links {
    margin: 0;
    padding-left: 18px;
}

.request-received {
    max-width: 760px;
}

.request-received__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 30px;
}

.request-received__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.request-next li {
    margin-bottom: 12px;
}

/*
 * Account pages: create account, sign in, reset password, my profile. The forms use the
 * request form's field classes; these add the narrow column and the confirmation notice.
 */
.request-notice {
    padding: 14px 18px;
    border-left: 4px solid #3e7742;
    background-color: #ecf6ed;
    color: #1f4a22;
    font-weight: 600;
}

.account-banner {
    padding: 20px 24px;
    border-radius: var(--ijana-radius);
    background-color: #f3f0ec;
    border-left: 4px solid var(--primary-color);
}

.account-banner h2 {
    margin: 0 0 6px;
    color: var(--secondary-color);
    font-size: 22px;
}

/*
 * Account area: the seven section cards, the state chips used for sections, items and
 * verification areas, and the verification table.
 */
.account-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.account-section {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #e8e9ed;
    border-radius: var(--ijana-radius);
    background-color: #fff;
}

.account-section__title {
    margin: 0;
    color: var(--secondary-color);
    font-size: 18px;
    line-height: 26px;
}

.account-section__link {
    margin-top: auto;
    color: var(--secondary-color);
    font-weight: 700;
    text-decoration: underline;
}

.account-heading {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e9ed;
    color: var(--secondary-color);
    font-size: 24px;
    line-height: 32px;
}

.account-state {
    display: inline-block;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #eef0f3;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.account-state--incomplete,
.account-state--expiring_soon,
.account-state--submitted,
.account-state--under_review {
    background-color: #fef6e0;
    color: #7a4b00;
}

.account-state--complete {
    background-color: #f3f0ec;
    color: var(--secondary-color);
}

.account-state--verified {
    background-color: #ecf6ed;
    color: #1f4a22;
}

.account-state--needs_attention,
.account-state--rejected,
.account-state--expired {
    background-color: #fef3f2;
    color: #7a271a;
}

.account-table {
    width: 100%;
    border-collapse: collapse;
}

.account-table th,
.account-table td {
    padding: 10px 0;
    border-bottom: 1px solid #e8e9ed;
    vertical-align: middle;
}

.account-table th {
    color: var(--secondary-color);
    font-weight: 600;
}

.account-table td {
    text-align: right;
}

.account-table--grid th,
.account-table--grid td {
    padding-right: 16px;
    text-align: left;
}

.account-table--grid thead th {
    color: #475467;
    font-size: 13px;
    white-space: nowrap;
}

.account-edit > summary,
.account-add > summary {
    display: inline-block;
    cursor: pointer;
    color: var(--secondary-color);
    font-weight: 700;
    text-decoration: underline;
}

.account-add > summary {
    padding: 10px 18px;
    border: 1px solid var(--secondary-color);
    border-radius: var(--ijana-radius);
    text-decoration: none;
}

.account-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--ijana-radius);
}