/* ── SEO Pillar Page ──────────────────────────────────────────────────────
   Built to the "Ute Trays Perth — Desktop v2" Figma. Colours resolve from
   Impreza's scheme variables first so the page follows the theme, with the
   design values as fallbacks.

     navy   #13153b   --color-content-primary
     red    #ec2b30   --color-content-secondary
     grey   #f2f4f7   --color-content-bg-alt
   ───────────────────────────────────────────────────────────────────────── */

.ute-pillar {
    --pillar-max: 1400px;
    --pillar-gap: clamp(18px, 1.8vw, 28px);
    --pillar-radius: 12px;
    --pillar-navy: var(--color-content-primary, #13153b);
    --pillar-red: var(--color-content-secondary, #ec2b30);
    --pillar-grey: var(--color-content-bg-alt, #f2f4f7);
    --pillar-border: var(--color-content-border, #e3e7f0);
    --pillar-shadow: 0 2px 10px rgba(19, 21, 59, 0.06);
    --pillar-display: 'Montserrat', 'Inter', sans-serif;
    --pillar-hero-text: #c7cbe4;
}

/* ── Section shell ──────────────────────────────────────────────────────── */

.ute-pillar .ute-pillar__section.l-section {
    /* Impreza's .l-section.height_medium also matches at (0,2,0) and its
       stylesheet loads later, so go one level higher to win the cascade. */
    padding-top: clamp(44px, 4.6vw, 88px);
    padding-bottom: clamp(44px, 4.6vw, 88px);
}

.ute-pillar .ute-pillar__section--hero.l-section {
    padding-top: clamp(40px, 4.2vw, 80px);
    padding-bottom: clamp(40px, 4.2vw, 80px);
}

.ute-pillar .ute-pillar__section--intro_lead.l-section {
    padding-top: clamp(36px, 3.3vw, 64px);
    padding-bottom: clamp(36px, 3.3vw, 64px);
}

/* The intro sits on the same white as whatever follows it, so its 64px
   bottom and the next section's 88px top read as one 152px gap rather
   than as two separate sections. Tighten the section that follows.
   Keyed off the sibling rather than a layout name so it survives
   reordering and works on future pillar pages. */
.ute-pillar .ute-pillar__section--intro_lead.l-section + .ute-pillar__section.l-section {
    padding-top: clamp(24px, 2.1vw, 40px);
}

.ute-pillar__section > .l-section-h {
    max-width: var(--pillar-max);
}

.ute-pillar .ute-pillar__section h2 {
    padding: 0;
    font-family: var(--pillar-display);
    font-size: clamp(1.6rem, 2.08vw, 40px);
    font-weight: 800;
    line-height: 1.04;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 auto 14px;
    /* the design's header frames run 780-900px wide; 26ch was far narrower
       and forced headings like "Key Features and Specifications" to wrap */
    max-width: 860px;
    color: #0f131f;
}

/* Red eyebrow above every section heading */
.ute-pillar__eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: clamp(0.8125rem, 0.89vw, 17px);
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: var(--pillar-red);
    margin: 0 0 14px;
}

.ute-pillar__eyebrow--light {
    color: #fff;
    text-align: left;
    font-size: clamp(0.8125rem, 0.89vw, 17px);
    font-weight: 700;
    letter-spacing: 1.6px;
    /* hero rhythm is 18; the section headers use 14 */
    margin-bottom: 18px;
}

.ute-pillar__intro {
    max-width: 780px;
    margin: 0 auto clamp(30px, 2.5vw, 48px);
    text-align: center;
    font-size: clamp(0.9375rem, 0.94vw, 18px);
    line-height: 1.55;
    color: #35415b;
}

.ute-pillar__outro {
    max-width: 760px;
    margin: clamp(28px, 3vw, 44px) auto 0;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.ute-pillar__actions {
    margin-top: clamp(28px, 3vw, 40px);
    text-align: center;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.ute-pillar .ute-pillar__btn {
    /* Impreza's .w-btn matches at (0,1,0) and loads later */
    display: inline-block;
    padding: 16px 30px;
    border-radius: 0;
    font-weight: 800;
    font-size: clamp(0.875rem, 0.89vw, 17px);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, transform 0.2s ease;
}

.ute-pillar .ute-pillar__btn.us-btn-style_1 {
    background: var(--pillar-red);
    color: #fff;
    border: 1.5px solid var(--pillar-red);
    box-shadow: 0 8px 20px rgba(236, 43, 48, 0.38);
}

/* Impreza's own .w-btn hover repaints the button in the theme's navy, and
   matches at the same specificity while loading later - hence the scope. */
/* ── Red button hover ──────────────────────────────────────────────────
   One rule for every red button on the page: navy fill, white label.
   The label colour needs forcing because the theme recolours links on
   hover from a stylesheet this cannot out-specify. */

.ute-pillar .ute-pillar__btn.us-btn-style_1:hover,
.ute-pillar .ute-pillar__btn.us-btn-style_1:focus,
.ute-pillar .ute-pillar__product-btn:hover,
.ute-pillar .ute-pillar__product-btn:focus {
    background: var(--pillar-navy);
    border-color: var(--pillar-navy);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(19, 21, 59, 0.32);
    transform: translateY(-1px);
}

.ute-pillar .ute-pillar__btn.us-btn-style_1:hover .w-btn-label,
.ute-pillar .ute-pillar__btn.us-btn-style_1:focus .w-btn-label {
    color: #fff !important;
}

.ute-pillar .ute-pillar__btn.us-btn-style_1:active,
.ute-pillar .ute-pillar__product-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(19, 21, 59, 0.28);
}

.ute-pillar .ute-pillar__btn.us-btn-style_1:hover .w-btn-label,
.ute-pillar .ute-pillar__btn.us-btn-style_1:focus .w-btn-label {
    color: #fff;
}

.ute-pillar .ute-pillar__btn.us-btn-style_2:hover,
.ute-pillar .ute-pillar__btn.us-btn-style_2:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.ute-pillar .ute-pillar__btn.us-btn-style_2:hover .w-btn-label,
.ute-pillar .ute-pillar__btn.us-btn-style_2:focus .w-btn-label {
    color: #fff;
}

/* On the light sections the outline button is dark, so tint instead */
.ute-pillar__section--trusted .ute-pillar__btn.us-btn-style_2:hover,
.ute-pillar__section--material_choice .ute-pillar__btn.us-btn-style_2:hover,
.ute-pillar__section--who_we_supply .ute-pillar__btn.us-btn-style_2:hover {
    background: rgba(15, 19, 31, 0.05);
    border-color: currentColor;
    color: inherit;
}

.ute-pillar .ute-pillar__btn.us-btn-style_2 {
    background: transparent;
    color: currentColor;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.ute-pillar__section--trusted .ute-pillar__btn.us-btn-style_2,
.ute-pillar__section--material_choice .ute-pillar__btn.us-btn-style_2 {
    border-color: currentColor;
}

.ute-pillar .ute-pillar__btn + .ute-pillar__btn {
    margin-left: 16px;
}

/* "Read more" affordance under clamped copy */
.ute-pillar__readmore {
    display: block;
    width: fit-content;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: clamp(0.8125rem, 0.78vw, 15px);
    font-weight: 700;
    line-height: normal;
    color: var(--pillar-red);
    cursor: pointer;
}

.ute-pillar__readmore::after {
    content: '  ▾';
}

.js-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.js-clamp.is-open {
    display: block;
    overflow: visible;
}

/* Red ticks */
.ute-pillar__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pillar-red);
    color: #fff;
}

.ute-pillar__tick--plain {
    width: auto;
    height: auto;
    background: none;
    color: currentColor;
}

.ute-pillar__tick--round {
    width: 20px;
    height: 20px;
}

/* ── Hero — navy ────────────────────────────────────────────────────────── */

.ute-pillar__section--hero {
    background: var(--pillar-navy);
    color: #fff;
}

.ute-pillar__hero {
    display: grid;
    /* Figma: 700px copy + 60px gap + 640px visual inside a 1400px container */
    grid-template-columns: 700fr 640fr;
    gap: clamp(28px, 4.3vw, 60px);
    align-items: center;
}

.ute-pillar .ute-pillar__hero-title {
    /* Impreza sets a heading font on h1; the design calls for Montserrat */
    font-family: var(--pillar-display);
    font-size: clamp(2.1rem, 3.02vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 18px;
    color: #fff;
}

.ute-pillar__hero-body {
    font-size: clamp(0.9375rem, 0.99vw, 19px);
    line-height: 1.6;
    color: var(--pillar-hero-text);
}

.ute-pillar__hero-body p {
    /* zero the theme's paragraph margin so the 18px rhythm is exact */
    margin: 0;
}

.ute-pillar__hero-body p + p {
    margin-top: 18px;
}

.ute-pillar__hero-actions {
    padding-top: 12px;
    margin-top: 18px;
}

/* 2 x 2 trust badges */
.ute-pillar__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 28px;
    list-style: none;
    margin: 18px 0 0;
    padding: 20px 0 0;
}

.ute-pillar__badges > li {
    /* the theme gives list items a bottom margin, which inflates the row gap */
    margin: 0;
}

.ute-pillar__badges-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: clamp(0.8125rem, 0.73vw, 14px);
    font-weight: 700;
    color: #fff;
}

.ute-pillar__badges-item .ute-pillar__tick {
    width: 22px;
    height: 22px;
}

.ute-pillar__hero-media {
    position: relative;
}

.ute-pillar__hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 460;
    object-fit: cover;
    border-radius: var(--pillar-radius);
}

/* Floating caption card over the hero image */
.ute-pillar__hero-caption {
    position: absolute;
    left: 15px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 20px 14px 17px;
    background: #fff;
    border-left: 5px solid var(--pillar-red);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
    line-height: normal;
    white-space: nowrap;
}

.ute-pillar__hero-caption strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #0f131f;
}

.ute-pillar__hero-caption span {
    display: block;
    font-size: 11px;
    color: #5f6773;
    opacity: 0.9;
}

/* ── Intro lead ─────────────────────────────────────────────────────────── */

/* Figma: 940px column, Inter 23px/1.5, #0f131f, 18px between paragraphs */
.ute-pillar__lead {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(1rem, 1.2vw, 23px);
    line-height: 1.5;
    color: #0f131f;
}

.ute-pillar__lead p {
    margin: 0;
}

.ute-pillar__lead p + p {
    margin-top: 18px;
}

.ute-pillar__lead .read-more {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
    color: var(--pillar-red);
}

/* ── Trusted — numbered cards on grey ───────────────────────────────────── */

.ute-pillar__section--trusted {
    background: var(--pillar-grey);
}

.ute-pillar__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

/* Not a flex container: flex blockifies -webkit-box and kills the line
   clamp on the body. Spacing comes from the lobotomised owl instead.
   No height:100% either, so expanding one card leaves its row-mates
   alone - the design's cards are different heights by row anyway. */
.ute-pillar__card {
    padding: 32px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 18, 31, 0.05);
}

.ute-pillar__card > * + * {
    margin-top: 10px;
}

.ute-pillar__card-num {
    display: block;
    font-family: var(--pillar-display);
    font-size: clamp(1.5rem, 1.56vw, 30px);
    font-weight: 800;
    line-height: normal;
    color: var(--pillar-red);
    margin: 0;
}

.ute-pillar .ute-pillar__card-title {
    /* Impreza uppercases h3; the design keeps these in sentence case */
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1rem, 0.99vw, 19px);
    font-weight: 800;
    line-height: normal;
    margin: 0;
    padding: 0;
    color: #0f131f;
}

.ute-pillar__card-body {
    font-size: clamp(0.875rem, 0.81vw, 15.5px);
    line-height: 1.55;
    color: #35415b;
}

.ute-pillar__card-body p {
    margin: 0;
}

.ute-pillar__card-body p:last-child,
.ute-pillar__card-body ul:last-child {
    margin-bottom: 0;
}

.ute-pillar__card-body ul {
    padding-left: 1.1em;
    margin-top: 10px;
}

/* ── Material choice — grey section, white cards ────────────────────────── */

.ute-pillar__section--material_choice {
    background: var(--pillar-grey);
}

.ute-pillar__duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 684 + 32 + 684 = 1400 in the design; the trusted grid uses 24 */
    gap: 32px;
    align-items: start;
}

.ute-pillar__duo-item {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 18, 31, 0.06);
}

/* fixed 384px band in the design, not a ratio */
.ute-pillar__duo-media img {
    display: block;
    width: 100%;
    height: clamp(220px, 20vw, 384px);
    object-fit: cover;
}

.ute-pillar__duo-copy {
    padding: 32px 38px 34px;
}

.ute-pillar__duo-copy > * + * {
    margin-top: 14px;
}

.ute-pillar__pill {
    display: block;
    width: fit-content;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0;
}

/* Pill palette. The design uses grey for steel and teal for aluminium;
   red and navy are here so further cards have options without new CSS. */
.ute-pillar__pill--grey {
    background: #eceef3;
    color: #0f131f;
}

.ute-pillar__pill--teal {
    background: #eaf3f5;
    color: #0b6b78;
}

.ute-pillar__pill--red {
    background: #fdeaea;
    color: #b81f24;
}

.ute-pillar__pill--navy {
    background: #e8eaf2;
    color: #13153b;
}

.ute-pillar .ute-pillar__duo-title {
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1.25rem, 1.35vw, 26px);
    font-weight: 700;
    line-height: normal;
    /* not margin:0 - that outranks the 14px gap rule on the copy block */
    margin: 14px 0 0;
    padding: 0;
    color: #0f131f;
}

.ute-pillar__duo-body {
    font-size: clamp(0.9375rem, 0.83vw, 16px);
    line-height: 1.5;
    color: #35415b;
}

.ute-pillar__duo-body p {
    margin: 0;
}

.ute-pillar__duo-copy .ute-pillar__readmore {
    font-size: clamp(0.9375rem, 0.83vw, 16px);
}

/* 1px rule between the copy and the "Best for" line */
.ute-pillar__bestfor {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e5ea;
    font-size: clamp(0.875rem, 0.78vw, 15px);
    line-height: normal;
    color: #5f6773;
}

.ute-pillar__bestfor strong {
    font-weight: 700;
    color: #0f131f;
}

/* ── Two brands — white section, dark cards ─────────────────────────────── */

/* ── Two brands — gradient cards on a white section ─────────────────────
   Card 684x769: 330px image band, then 32/40/40 copy on a vertical
   gradient, 18px radius, 10px between children. */

.ute-pillar__duo--brands .ute-pillar__brand {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #1b2150 0%, #12153b 100%);
}

.ute-pillar__duo--brands .ute-pillar__brand--2 {
    background: linear-gradient(180deg, #2c3140 0%, #1a1d26 100%);
}

.ute-pillar__brand-media img {
    display: block;
    width: 100%;
    height: clamp(200px, 17.2vw, 330px);
    object-fit: cover;
}

.ute-pillar__brand-copy {
    padding: 32px 40px 40px;
    background: none;
    color: #c7cbe4;
}

.ute-pillar__brand-copy > * + * {
    margin-top: 10px;
}

/* salmon, not the section red */
.ute-pillar__brand-copy .ute-pillar__eyebrow {
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #ff8a8d;
    margin: 0;
}

.ute-pillar .ute-pillar__brand-name {
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1.5rem, 1.77vw, 34px);
    font-weight: 800;
    line-height: normal;
    color: #fff;
    margin: 10px 0 0;
    padding: 0;
}

.ute-pillar__brand-sub {
    font-size: clamp(0.8125rem, 0.73vw, 14px);
    font-weight: 700;
    line-height: normal;
    color: #c7cbe4;
    margin: 10px 0 0;
}

.ute-pillar__brand-body {
    font-size: clamp(0.9375rem, 0.83vw, 16px);
    line-height: 1.5;
    color: #c7cbe4;
}

.ute-pillar__brand-body p {
    margin: 0;
}

.ute-pillar__ticks {
    list-style: none;
    /* not margin:0 - that outranks the 10px stack gap on the copy block */
    margin: 10px 0 0;
    padding: 12px 0 16px;
    width: 100%;
}

.ute-pillar__ticks li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(0.875rem, 0.78vw, 15px);
    line-height: normal;
    color: #e6e9f5;
}

.ute-pillar__ticks li + li {
    margin-top: 10px;
}

.ute-pillar__ticks .ute-pillar__tick {
    width: 14px;
    height: 14px;
    color: #5ad19a;
}

.ute-pillar__ticks .ute-pillar__tick svg {
    width: 14px;
    height: 14px;
}

/* brand button is 15px / 14-28, smaller than the hero's */
.ute-pillar .ute-pillar__brand .ute-pillar__btn {
    margin: 10px 0 0;
    padding: 14px 28px;
    font-size: clamp(0.875rem, 0.78vw, 15px);
    color: #fff;
}

.ute-pillar__footnote {
    margin: clamp(24px, 2.6vw, 36px) 0 0;
    padding: 16px 24px;
    background: var(--pillar-grey);
    border-radius: 8px;
    text-align: center;
    /* was a flat 13px, which read as tiny under the brand cards (Glen,
       25 Sep). Now in line with the body copy around it. */
    font-size: clamp(0.9375rem, 0.89vw, 17px);
    line-height: 1.5;
    color: #5b6478;
}

/* ── Product grid — navy ────────────────────────────────────────────────── */

.ute-pillar__section--product_grid {
    background: var(--pillar-navy);
}

/* These need to match the global section-h2 rule's specificity or the
   dark sections end up with near-black headings. */
.ute-pillar .ute-pillar__section--product_grid h2,
.ute-pillar .ute-pillar__section--reviews h2,
.ute-pillar .ute-pillar__section--quote_cta h2 {
    color: #fff;
}

.ute-pillar__section--product_grid .ute-pillar__intro {
    color: rgba(255, 255, 255, 0.78);
}

/* ── Filter row ─────────────────────────────────────────────────────────── */

.ute-pillar__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: clamp(28px, 2.5vw, 36px);
}

.ute-pillar__filter {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border: 1px solid #e2e5ea;
    border-radius: 999px;
    background: #fff;
    color: #0f131f;
    font-size: clamp(0.875rem, 0.78vw, 15px);
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ute-pillar__filter:hover {
    border-color: #c9ced8;
}

.ute-pillar__filter.is-active {
    background: var(--pillar-red);
    border-color: var(--pillar-red);
    color: #fff;
}

.ute-pillar__filter--select {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* chevron on the wrapper, not the select: the theme resets the select's
   background shorthand on focus, which was wiping a background-image arrow */
.ute-pillar__filter--select::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 7px;
    margin-top: -3px;
    pointer-events: none;
    background: currentColor;
    clip-path: polygon(0 0, 12% 0, 50% 62%, 88% 0, 100% 0, 50% 100%);
}

.ute-pillar__filter--select select {
    appearance: none;
    -webkit-appearance: none;
    padding: 11px 38px 11px 20px;
    border: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: normal;
    cursor: pointer;
}

.ute-pillar__filter--select:focus-within {
    border-color: var(--pillar-red);
    box-shadow: 0 0 0 3px rgba(236, 43, 48, 0.18);
}

.ute-pillar__filter--select select:focus {
    outline: none;
}

.ute-pillar__filter-empty {
    margin-top: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
}

/* Custom card, not Woo's loop card: 332px columns with 24px gutters,
   a 332px image well, brand badge, meta line and full-width button. */

.ute-pillar__products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 1fr rows so every card matches, not just the ones sharing a row */
    grid-auto-rows: 1fr;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

/* Fewer products than a full row, as on a new range like Canopies: centre
   them at the design card width instead of leaving them hard left under a
   centred heading. Flex rather than grid so any count from 1 to 3 centres,
   and the .ute-pillar step outranks the tablet and mobile column rules. */
.ute-pillar .ute-pillar__products.is-few {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ute-pillar .ute-pillar__products.is-few > .ute-pillar__product {
    flex: 0 1 332px;
}

/* Visibility is owned by one class so nothing races the cascade. `is-extra`
   is the server-rendered state for no-JS; the script swaps to `is-hidden`
   on init and drives both filtering and Load More from there. */
.ute-pillar__product.is-extra,
.ute-pillar__product.is-hidden {
    display: none;
}

.ute-pillar__product {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 14px;
    overflow: hidden;
}

.ute-pillar__product-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #f6f6f6;
    padding: 21px;
}

.ute-pillar__product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ute-pillar__product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #12153b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ute-pillar__product-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.ute-pillar .ute-pillar__product-title {
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1rem, 0.89vw, 17px);
    font-weight: 700;
    line-height: 1.3;
    color: #0f131f;
    margin: 0;
    padding: 0;
}

.ute-pillar__product-title a {
    color: inherit;
    text-decoration: none;
}

.ute-pillar__product-meta {
    margin: 0;
    font-size: clamp(0.75rem, 0.68vw, 13px);
    line-height: normal;
    color: #5f6773;
}

.ute-pillar__product-btn {
    display: block;
    /* pushes to the card foot so buttons align across a row */
    margin-top: auto;
    padding: 12px;
    background: var(--pillar-red);
    box-shadow: 0 8px 20px rgba(236, 43, 48, 0.38);
    color: #fff;
    font-size: clamp(0.875rem, 0.78vw, 15px);
    font-weight: 800;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, transform 0.2s ease;
}

/* Impreza's "links_underline" site setting underlines links on hover from a
   stylesheet this can't out-specify, so force it off for buttons only. */
.ute-pillar a.ute-pillar__product-btn,
.ute-pillar a.ute-pillar__product-btn:hover,
.ute-pillar a.ute-pillar__product-btn:focus,
.ute-pillar a.ute-pillar__btn,
.ute-pillar a.ute-pillar__btn:hover,
.ute-pillar a.ute-pillar__btn:focus,
.ute-pillar .ute-pillar__product-title a:hover,
.ute-pillar .ute-pillar__product-title a:focus {
    text-decoration: none !important;
}

.ute-pillar .ute-pillar__product-title a:hover,
.ute-pillar .ute-pillar__product-title a:focus {
    color: var(--pillar-red);
}

/* ── Who we supply — icon tiles on grey ─────────────────────────────────── */

.ute-pillar__section--who_we_supply {
    background: var(--pillar-grey);
}

/* three 453px cards on 20px gutters */
.ute-pillar__supply {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ute-pillar__supply-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 26px 22px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 14px;
    text-align: center;
}

.ute-pillar__supply-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #ebeef7;
}

.ute-pillar__supply-icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

.ute-pillar__supply-text {
    font-size: clamp(0.9375rem, 0.83vw, 16px);
    font-weight: 400;
    line-height: 1.3;
    color: #0f131f;
}

.ute-pillar__supply-text strong {
    font-weight: 700;
}

/* ── Key features ───────────────────────────────────────────────────────
   Red-dash sub-heading, then either a two-column tick list (Trays) or
   two-column icon cards (Accessories), optionally closed by a navy box. */

.ute-pillar__feature-group + .ute-pillar__feature-group {
    margin-top: 36px;
}

.ute-pillar .ute-pillar__feature-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1.25rem, 1.3vw, 25px);
    font-weight: 800;
    line-height: normal;
    color: #0f131f;
    margin: 0;
    padding: 0;
}

.ute-pillar__dash {
    display: inline-block;
    flex: 0 0 auto;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--pillar-red);
}

.ute-pillar__feature-group-intro {
    margin: 20px 0 0;
    font-size: clamp(0.9375rem, 0.83vw, 16px);
    line-height: 1.55;
    color: #35415b;
}

.ute-pillar__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    align-items: start;
}

/* tick list */

.ute-pillar__features--ticks {
    gap: 16px;
}

.ute-pillar__feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
}

.ute-pillar__feature-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--pillar-red);
}

.ute-pillar__feature-tick svg {
    display: block;
    width: 13px;
    height: 13px;
}

.ute-pillar__feature-text {
    flex: 1;
    font-size: clamp(0.9375rem, 0.83vw, 16px);
    font-weight: 500;
    line-height: 1.4;
    color: #0f131f;
}

/* icon cards */

.ute-pillar__features--cards {
    gap: 24px;
    grid-auto-rows: 1fr;
}

.ute-pillar__feature-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 18, 31, 0.05);
}

.ute-pillar__feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ebeef7;
}

.ute-pillar__feature-ico svg {
    display: block;
    width: 24px;
    height: 24px;
}

.ute-pillar .ute-pillar__feature-card-title {
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1rem, 0.94vw, 18px);
    font-weight: 800;
    line-height: normal;
    color: #0f131f;
    margin: 0;
    padding: 0;
}

.ute-pillar__feature-card-body {
    margin: 0;
    font-size: clamp(0.875rem, 0.81vw, 15.5px);
    line-height: 1.55;
    color: #35415b;
}

/* navy callout */

.ute-pillar__callout {
    margin-top: 36px;
    padding: 34px 48px;
    background: #12153b;
    border-radius: 16px;
    color: #dfe3f2;
    font-size: clamp(0.9375rem, 0.94vw, 18px);
    line-height: 1.6;
    text-align: center;
}

.ute-pillar__callout strong {
    font-weight: 700;
    color: #dfe3f2;
}

.ute-pillar__callout p {
    margin: 0;
}

/* ── Built on-site ──────────────────────────────────────────────────────
   670x440 image with a red stat badge overlapping its lower left, 60px
   gutter, then an 18px stack of eyebrow, heading, body and Read more. */

.ute-pillar__section--built_on_site {
    background: var(--pillar-grey);
}

.ute-pillar__split {
    display: grid;
    grid-template-columns: 670fr 670fr;
    gap: 60px;
    align-items: center;
}

.ute-pillar__split--flip .ute-pillar__split-media {
    order: 2;
}

.ute-pillar__split-media {
    position: relative;
}

.ute-pillar__split-media img {
    display: block;
    width: 100%;
    height: clamp(260px, 22.9vw, 440px);
    object-fit: cover;
    border-radius: 20px;
}

/* red stat badge, sitting 24px in from the lower left of the image */
.ute-pillar__stat {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 22px;
    background: var(--pillar-red);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(236, 43, 48, 0.38);
    color: #fff;
    line-height: normal;
    white-space: nowrap;
}

.ute-pillar__stat strong {
    font-family: var(--pillar-display);
    font-size: clamp(1.5rem, 1.77vw, 34px);
    font-weight: 800;
    line-height: normal;
}

.ute-pillar__stat span {
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}

.ute-pillar__split-copy > * + * {
    margin-top: 18px;
}

/* The eyebrow is a <p> in this block, so the body-text rule below would
   otherwise size AND colour it. The .ute-pillar step keeps the red ahead
   of that rule, which sets #35415b on every p in the column. */
.ute-pillar .ute-pillar__split-copy .ute-pillar__eyebrow {
    text-align: left;
    margin: 0;
    font-size: clamp(0.8125rem, 0.89vw, 17px);
    color: var(--pillar-red);
}

/* Carries the extra .ute-pillar__section step so it outweighs the generic
   centred-heading rule (.ute-pillar .ute-pillar__section h2), which is one
   element more specific and would otherwise centre this heading. */
.ute-pillar .ute-pillar__section .ute-pillar__split-title {
    text-align: left;
    max-width: none;
    margin: 18px 0 0;
    padding: 0;
    font-family: var(--pillar-display);
    font-size: clamp(1.6rem, 2.08vw, 40px);
    font-weight: 800;
    line-height: 1.04;
    color: #0f131f;
}

.ute-pillar__split-copy .js-clamp,
.ute-pillar__split-copy p {
    font-size: clamp(0.9375rem, 0.94vw, 18px);
    line-height: 1.6;
    color: #35415b;
}

.ute-pillar__split-copy p {
    margin: 0;
}

/* Multi-block body copy inside a Read more wrapper. The trays page only ever
   had one paragraph per body, so nothing spaced paragraphs from each other
   or from a list, and the wrapper's overflow:hidden clipped list numbers
   that hung outside it. Applies to every section that clamps its body. */
.ute-pillar .js-clamp > * + * {
    margin-top: 14px;
}

.ute-pillar .js-clamp ol,
.ute-pillar .js-clamp ul {
    padding-left: 1.4em;
}

.ute-pillar .js-clamp li + li {
    margin-top: 6px;
}

.ute-pillar__split-copy .ute-pillar__readmore {
    margin-top: 18px;
    font-size: clamp(0.9375rem, 0.83vw, 16px);
}

/* ── Reviews ────────────────────────────────────────────────────────────
   Navy band with a 44px heading and a star line; the cards themselves are
   the Trustindex widget's own markup, nudged toward the design's spacing. */

.ute-pillar__section--reviews {
    background: var(--pillar-navy);
}

.ute-pillar .ute-pillar__section--reviews h2 {
    font-size: clamp(1.75rem, 2.29vw, 44px);
    color: #fff;
    /* keep the auto side margins: margin:0 drops the centring and the
       860px heading block ends up hard left in the 1400 container */
    margin: 0 auto;
}

.ute-pillar__stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 0;
    line-height: normal;
}

.ute-pillar__stars-mark {
    color: var(--pillar-red);
    font-size: clamp(1rem, 1.15vw, 22px);
    font-weight: 700;
    letter-spacing: 1px;
}

.ute-pillar__stars-text {
    color: #fff;
    font-size: clamp(0.875rem, 0.89vw, 17px);
}

.ute-pillar__stars-text strong {
    font-weight: 700;
}

.ute-pillar__reviews-widget {
    margin-top: 40px;
}

/* Trustindex draws its own cards; hold them to the design's 335px on a
   20px gutter and keep the plugin's white cards off the navy edge. */
.ute-pillar__reviews-widget .ti-widget {
    margin: 0 auto;
}

.ute-pillar__reviews-widget .ti-review-item {
    border-radius: 12px;
}

.ute-pillar__badge {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* ── Quote CTA — navy ───────────────────────────────────────────────────── */

.ute-pillar__section--quote_cta {
    background: var(--pillar-navy);
    color: #fff;
}

.ute-pillar__section--quote_cta h2 {
    color: #fff;
    max-width: 26ch;
}

.ute-pillar__cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.ute-pillar__cta-body {
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

.ute-pillar__cta-body p + p {
    margin-top: 14px;
}

.ute-pillar__cta-body p:last-child {
    margin-bottom: 0;
}

.ute-pillar__section--quote_cta .ute-pillar__btn.us-btn-style_2 {
    color: #fff;
}

/* ── FAQ ────────────────────────────────────────────────────────────────
   900px column, rows divided by shared 1px rules, and a +/x circle toggle:
   grey with a red plus when closed, red with a white cross when open. */

.ute-pillar__section--faq .category-faq-section {
    margin: 0;
    padding: 0;
}

.ute-pillar__section--faq .faq-list {
    max-width: 900px;
    margin-inline: auto;
}

.ute-pillar__section--faq .faq-item {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-top: 1px solid #e2e5ea;
}

.ute-pillar__section--faq .faq-item:last-child {
    border-bottom: 1px solid #e2e5ea;
}

.ute-pillar__section--faq .faq-item:hover {
    background: none;
}

.ute-pillar__section--faq .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    margin: 0;
    cursor: pointer;
}

.ute-pillar .ute-pillar__section--faq .faq-question h3 {
    flex: 1;
    text-transform: none;
    font-family: var(--pillar-display);
    font-size: clamp(1rem, 0.99vw, 19px);
    font-weight: 700;
    line-height: normal;
    color: #0f131f;
    margin: 0;
    padding: 0;
}

/* toggle: the character swaps with the accordion's own .active class */
.ute-pillar__section--faq .faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #f2f4f7;
    color: var(--pillar-red);
    font-size: 20px;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ute-pillar__section--faq .faq-toggle::after {
    content: '+';
}

.ute-pillar__section--faq .faq-item.active .faq-toggle {
    background: var(--pillar-red);
    color: #fff;
}

.ute-pillar__section--faq .faq-item.active .faq-toggle::after {
    content: '×';
}

.ute-pillar__section--faq .faq-answer {
    padding: 0 0 26px;
    margin: 0;
}

.ute-pillar__section--faq .faq-answer,
.ute-pillar__section--faq .faq-answer p {
    font-size: clamp(0.9375rem, 0.86vw, 16.5px);
    line-height: 1.55;
    color: #35415b;
}

.ute-pillar__section--faq .faq-answer p:last-child {
    margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────
   The design ships desktop (1400 container) and mobile (360 frame) only,
   so tablet interpolates: the wide grids drop a column at a time instead
   of jumping straight to one.

   Every selector below carries the .ute-pillar prefix because the base
   rules above do. Without it these sit at lower specificity than what
   they are trying to override and silently do nothing. */

/* Tablet — step the wide grids down one column. */

@media (max-width: 1024px) {

    .ute-pillar .ute-pillar__products {
        grid-template-columns: repeat(3, 1fr);
    }

    .ute-pillar .ute-pillar__cards,
    .ute-pillar .ute-pillar__supply {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Narrow tablet — the image/copy splits run out of room before the card
   grids do, so they stack here rather than waiting for the mobile step. */

@media (max-width: 900px) {

    .ute-pillar .ute-pillar__hero,
    .ute-pillar .ute-pillar__split {
        grid-template-columns: 1fr;
    }

    /* image above copy regardless of the desktop order */
    .ute-pillar .ute-pillar__hero-media,
    .ute-pillar .ute-pillar__split--flip .ute-pillar__split-media {
        order: -1;
    }
}

/* Mobile — Figma frame 2194:576 is 360 wide with 24px margins, so every
   section is a single column apart from the product grid. */

@media (max-width: 767px) {

    .ute-pillar .ute-pillar__section {
        padding-block: 40px;
    }

    .ute-pillar .ute-pillar__section h2 {
        max-width: none;
    }

    .ute-pillar .ute-pillar__cards,
    .ute-pillar .ute-pillar__duo,
    .ute-pillar .ute-pillar__supply,
    .ute-pillar .ute-pillar__features {
        grid-template-columns: 1fr;
    }

    /* Figma 2194:645 — 148px cards at x=0 and x=164, so two columns
       sharing a 16px gutter, not the desktop four. */
    .ute-pillar .ute-pillar__products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* The card keeps its desktop type by default, which at half a 360px
       screen wraps a product name over five lines and pushes every row
       to match. Figma 2194:646 scales the whole card down instead. */

    .ute-pillar .ute-pillar__product-media {
        padding: 14px; /* 120px image inside a 148px well */
    }

    .ute-pillar .ute-pillar__product-copy {
        padding: 12px;
        gap: 10px;
    }

    .ute-pillar .ute-pillar__product-title {
        font-size: 13px;
        line-height: 1.28;
    }

    .ute-pillar .ute-pillar__product-meta {
        font-size: 11px;
    }

    .ute-pillar .ute-pillar__product-btn {
        padding: 10px;
        font-size: 12px;
    }

    .ute-pillar .ute-pillar__product-badge {
        top: 8px;
        left: 8px;
        padding: 4px 7px;
        border-radius: 5px;
        font-size: 9px;
    }

    /* Figma 2194:734 — the supply card turns on its side on mobile: a 44px
       icon tile on the left with the text beside it, 89px tall against the
       217px the desktop stack produces once it is one per row.
       Rows size to content because the design lets the long "rental and
       commercial" item run to 166 while the rest stay at 89. */

    .ute-pillar .ute-pillar__supply {
        grid-auto-rows: auto;
        gap: 12px;
    }

    .ute-pillar .ute-pillar__supply-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 16px;
    }

    .ute-pillar .ute-pillar__supply-icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    .ute-pillar .ute-pillar__supply-icon svg {
        width: 24px;
        height: 24px;
    }

    .ute-pillar .ute-pillar__supply-text {
        font-size: 15px;
    }

    /* Figma 2194:598 — four rows on a 32px rhythm, items 20px tall. */
    .ute-pillar .ute-pillar__badges {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ute-pillar .ute-pillar__hero-title {
        font-size: 1.9rem;
    }

    .ute-pillar .ute-pillar__callout {
        padding: 20px;
        text-align: left;
    }

    /* Stacked full-width buttons in the hero and the quote CTA.
       Flex + gap replaces the sibling margin the desktop rules use, so
       those margins are zeroed rather than left to cascade and offset
       the second button. */

    .ute-pillar .ute-pillar__hero-actions,
    .ute-pillar .ute-pillar__section--quote_cta .ute-pillar__actions {
        display: flex;
        flex-direction: column;
    }

    .ute-pillar .ute-pillar__hero-actions {
        gap: 20px; /* Figma 2194:594 → 2194:596 */
    }

    .ute-pillar .ute-pillar__section--quote_cta .ute-pillar__actions {
        gap: 14px; /* Figma 2194:984 → 2194:986 */
    }

    .ute-pillar .ute-pillar__hero-actions .ute-pillar__btn,
    .ute-pillar .ute-pillar__section--quote_cta .ute-pillar__btn,
    .ute-pillar .ute-pillar__duo-item .ute-pillar__btn,
    .ute-pillar .ute-pillar__brand .ute-pillar__btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ute-pillar .ute-pillar__hero-actions .ute-pillar__btn + .ute-pillar__btn,
    .ute-pillar .ute-pillar__section--quote_cta .ute-pillar__btn + .ute-pillar__btn {
        margin-left: 0;
        margin-top: 0;
    }

    /* Load More keeps its own width and stays centred (Figma 2194:726,
       170x43), so it is deliberately left out of the full-width rule. */
    .ute-pillar .ute-pillar__section--product_grid .ute-pillar__actions {
        text-align: center;
    }

    .ute-pillar .ute-pillar__reviews-widget {
        max-width: 100%;
    }
}

/* ── Footer on pillar pages ─────────────────────────────────────────────
   The global footer carries three pre-footer marketing blocks (a reviews
   slot, "Compatible With" and "Quick Contact") ahead of the real footer.
   The design ends this page at the FAQ, so only the footer proper is kept.
   Scoped to the pillar body class, so every other page is untouched. */

.ute-pillar-page .l-footer > section.l-section:not(.color_footer-bottom) {
    display: none;
}