/* ===========================================================================
   Stena Steel — brand layer
   The red/silver identity taken from the Stena Steel logo, the light/dark
   section system, the video hero, and every responsive and cross-browser
   override. Loads last, so equal-specificity rules here win.
   =========================================================================== */
:root{
    --brand-red: #e4032e;
    --brand-red-bright: #ff4155;
    --brand-red-deep: #a80020;
    --brand-red-soft: rgba(228, 3, 46, .12);
    --steel: #c9ced6;

    /* Light surface system — used to break up the dark palette */
    --light-bg: #f5f2ec;
    --light-bg-2: #ebe6dc;
    --light-ink: #24221f;
    --light-muted: #5b554b;
    --light-line: rgba(36, 34, 31, .14);

    /* Slightly brighter muted tone for readability on dark */
    --muted: #b4ab97;
}

/* ---------------------------------------------------------------- Header  */
.site-head-wrap{ position: absolute; z-index: 40; top: 0; left: 0; width: 100%; }
.site-header{ position: relative; top: auto; left: auto; }
.site-header.is-scrolled{ position: fixed; top: 0; left: 0; }

/* The mobile drawer is a position:fixed child of .site-header, and it must
   anchor to the viewport to fill the screen height.
   `backdrop-filter` on the scrolled header breaks that: per the Filter Effects
   spec any value other than `none` makes the element a containing block for
   fixed-position descendants. Once the page was scrolled, the drawer stopped
   measuring itself against the viewport and collapsed into the ~70px header
   strip — so opening the menu appeared to do nothing.
   Dropping the blur only while the drawer is open costs nothing visually (the
   panel covers the header anyway) and restores the viewport anchoring. */
.site-header.is-nav-open,
.site-header.is-scrolled.is-nav-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.admin-bar .site-header{ top: auto; }
.admin-bar .site-head-wrap{ top: 32px; }
.admin-bar .site-header.is-scrolled{ top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-head-wrap, .admin-bar .site-header.is-scrolled{ top: 46px; }
}

.top-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .5rem clamp(1.4rem, 4vw, 5rem);
    background: #131211;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #a7a08f;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: .04em;
}
.top-bar-info, .top-bar-social{ display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.top-bar a:hover{ color: var(--brand-red-bright); }
.top-bar-divider{ width: 1px; height: 12px; background: rgba(255, 255, 255, .16); }
.social-dot{
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    color: #b7b0a0;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.social-dot svg{ width: 15px; height: 15px; fill: currentColor; }
.social-dot:hover{ color: #fff; border-color: var(--brand-red); background: var(--brand-red); }

/* Brand lockup: circular mark from the logo + live text wordmark */
.brand{ gap: .7rem; }
.site-header .brand{ height: auto; }
.brand-mark{
    /* style.css styles .brand-mark as a filled gold square for the old
       text logo — reset that so the transparent PNG corners stay clear. */
    width: 52px;
    height: 52px;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 0;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
    transition: width .35s ease, height .35s ease;
}
.brand-word{ display: flex; flex-direction: column; gap: .1rem; line-height: 1; }
.brand-word strong{
    color: var(--brand-red);
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    transition: font-size .35s ease;
}
.brand-word small{
    color: #b8b0a1;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: .16em;
}
.site-header.is-scrolled .brand-mark{ width: 42px; height: 42px; }
.site-header.is-scrolled .brand-word strong{ font-size: 1.12rem; }

/* An uploaded Site Logo replaces the mark + wordmark lockup entirely, so it is
   sized by height and keeps its own proportions rather than being squeezed into
   the square the circular mark occupies. */
.brand-logo-custom {
    width: auto;
    height: 52px;
    max-width: min(300px, 48vw);
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
    transition: height .35s ease;
}
.site-header.is-scrolled .brand-logo-custom { height: 42px; }
.footer-brand-lockup .brand-logo-custom { height: 60px; max-width: min(320px, 70vw); }

.site-nav{ gap: clamp(.9rem, 1.5vw, 1.65rem); margin-right: 1.5rem; }
.site-nav a{ font-size: 0.74rem; letter-spacing: .11em; white-space: nowrap; }
.site-nav a::after{ background: linear-gradient(90deg, var(--brand-red-bright), var(--brand-red-deep)); }
.site-nav a:hover, .site-nav a.is-active{ color: #fff; }
.nav-drawer-foot{ display: none; }

.header-actions{ display: flex; align-items: center; gap: 1.1rem; }
.header-phone{ display: flex; flex-direction: column; gap: .12rem; text-align: right; }
.header-phone span{ color: #948d7e; font: 0.66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.header-phone strong{ color: var(--paper); font-size: 0.94rem; font-weight: 700; }
.header-phone:hover strong{ color: var(--brand-red-bright); }
.header-cta{
    border-color: rgba(228, 3, 46, .5);
    background: var(--brand-red);
    color: #fff;
    font-size: 0.73rem;
}
.header-cta span{ color: #fff; }
.header-cta:hover{ color: #fff; border-color: var(--brand-red-bright); background: var(--brand-red-bright); }
.header-cta:hover span{ color: #fff; }

/* ------------------------------------------------------------------ Hero  */
.hero{
    height: auto;
    min-height: 0;
    padding: clamp(9.5rem, 16vh, 12.5rem) clamp(1.4rem, 7.5vw, 9rem) clamp(3.5rem, 6vh, 5.5rem);
    display: grid;
    align-items: center;
    background: #161513;
}
.hero::after{ display: none; }
.hero-media{ position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.hero-media img{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: 62% center; }
.hero-media::after{
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(15, 14, 13, .95) 0%, rgba(17, 16, 14, .88) 32%, rgba(19, 17, 15, .45) 62%, rgba(19, 17, 15, .18) 100%),
        linear-gradient(0deg, rgba(15, 14, 13, .82), transparent 42%);
}
.hero .hero-copy{
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    width: min(62ch, 100%);
    max-width: 100%;
    padding: 0;
}
.hero h1{
    margin: 1.5rem 0 1.3rem;
    font-size: clamp(3rem, 5.6vw, 6.1rem);
    line-height: .94;
    letter-spacing: -.055em;
}
.hero h1 span{ display: block; white-space: normal; }
.hero h1 em{ color: var(--brand-red-bright); font-style: normal; font-family: var(--sans); font-weight: 800; }
.hero-intro{ max-width: 56ch; font-size: clamp(1rem, 1.05vw, 1.14rem); color: #d3ccbe; }
.hero-actions{ flex-wrap: wrap; gap: 1rem 1.2rem; margin-top: 1.9rem; }
.eyebrow-dot{ background: var(--brand-red); box-shadow: 0 0 0 6px rgba(228, 3, 46, .16), 0 0 24px rgba(228, 3, 46, .5); }

.hero-chips{
    display: grid;
    /* auto-fit rather than fixed counts: the chips reflow on their own at every
       width instead of jamming four across on tablets. */
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 0;
    margin: 2.6rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.hero-chips li{
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .95rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    background: rgba(20, 19, 17, .42);
}
.hero-chips strong{ color: #fff; font-size: 0.93rem; font-weight: 700; }
.hero-chips span{ color: #a9a191; font: 0.72rem var(--mono); letter-spacing: .06em; }

/* --------------------------------------------------------- Button variants */
.button-solid{ color: #fff; background: linear-gradient(135deg, var(--brand-red-bright), var(--brand-red)); box-shadow: 0 14px 34px rgba(168, 0, 32, .3); }
.button-solid:hover{ color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)); transform: translateY(-3px); }
.hero .button-solid:hover{ color: #fff; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)); }
.button-ghost{ border-color: rgba(255, 255, 255, .3); color: var(--paper); background: rgba(255, 255, 255, .04); }
.button-ghost:hover{ border-color: #fff; background: rgba(255, 255, 255, .12); transform: translateY(-3px); }
.button-whatsapp{ color: #fff; background: #1faa54; box-shadow: 0 14px 30px rgba(20, 120, 60, .28); }
.button-whatsapp:hover{ color: #fff; background: #179045; transform: translateY(-3px); }
.text-link{ border-bottom-color: var(--brand-red); }
.text-link span{ color: var(--brand-red-bright); }
.text-link:hover{ color: #fff; }
/* style.css sets `.story .text-link{ color: var(--ink) }` from the days when
   the story section had a light background. It is dark now, so that rule
   rendered the links near-black on near-black. */
.story .text-link{ color: var(--paper); }
.story .text-link:hover{ color: #fff; }
.story .text-link span{ color: var(--brand-red-bright); }

.inline-cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.3rem 2rem;
    margin-top: 1.3rem;
    padding: 1.6rem clamp(1.3rem, 2.5vw, 2.2rem);
    background: linear-gradient(120deg, #302c26, #2a2724);
    border: 1px solid var(--line);
}
.inline-cta > p{ margin: 0; color: var(--paper); font-size: 1.1rem; font-weight: 600; }
.inline-cta-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.contact-side-actions, .story-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; }
.contact-side-actions{ margin: 1.25rem 0; }
.contact-side .button{ margin: 0; }
.story-actions{ margin-top: 1.6rem; }

/* --------------------------------------------------- Light section system */
.section-light{ background: var(--light-bg); color: var(--light-ink); border-top: 1px solid var(--light-line); border-bottom: 1px solid var(--light-line); }
.section-light h2, .section-light .section-heading h2, .section-light h3{ color: var(--light-ink); }
.section-light h2 em, .section-light .section-heading h2 em{ color: var(--brand-red); }
.section-light p{ color: var(--light-muted); }
.section-light .section-heading p{ color: var(--light-muted); }
.section-light .section-kicker{ color: var(--brand-red); }
.section-light .section-kicker span:last-child{ color: var(--light-muted); }
.light-heading{ margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
/* Cards sitting inside a light section need light surfaces too */
.section-light .page-card{
    background: #fff;
    border-color: var(--light-line);
    color: var(--light-ink);
    box-shadow: 0 12px 34px rgba(36, 34, 31, .07);
}
.section-light .page-card:hover{ background: #fff; border-color: rgba(228, 3, 46, .35); box-shadow: 0 20px 46px rgba(36, 34, 31, .13); }
.section-light .page-card > span{ color: var(--brand-red); }
.section-light .page-card h3{ color: var(--light-ink); }
.section-light .page-card p{ color: var(--light-muted); }
.section-light .company-register{ border-color: var(--light-line); }
.section-light .company-register > div{ border-color: var(--light-line); }
.section-light .company-register span{ color: var(--brand-red); }
.section-light .company-register p{ color: var(--light-ink); }
.section-light .company-register p.is-code{ color: var(--brand-red-deep); }
.text-link-dark{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--brand-red);
    color: var(--light-ink);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.text-link-dark span{ color: var(--brand-red); }
.text-link-dark:hover{ color: var(--brand-red); }
.is-placeholder{
    display: inline-block;
    margin-top: .5rem;
    padding: .2rem .5rem;
    border: 1px dashed rgba(228, 3, 46, .45);
    border-radius: 4px;
    color: #a2405a;
    font: 0.7rem var(--mono);
    font-style: normal;
    letter-spacing: .04em;
}
.section-light .is-placeholder{ background: rgba(228, 3, 46, .05); }

/* ------------------------------------------------------- Trust badge grid */
.badge-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.badge-card{
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.6rem 1.5rem;
    background: #fff;
    border: 1px solid var(--light-line);
    border-radius: 3px;
    box-shadow: 0 12px 34px rgba(36, 34, 31, .07);
    transition: transform .35s ease, box-shadow .35s ease;
}
.badge-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 46px rgba(36, 34, 31, .13); }
.badge-icon{
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 1.15rem;
}
.badge-card h3{ margin: 0; font-size: 1.09rem; line-height: 1.3; }
.badge-card p{ margin: 0; font-size: 0.95rem; line-height: 1.65; }
.badge-card small{ margin-top: auto; padding-top: .6rem; font-size: 0.8rem; }

/* --------------------------------------------------------- Testimonials  */
.testimonial-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.testimonial-card{
    margin: 0;
    padding: 1.8rem 1.7rem;
    background: #fff;
    border: 1px solid var(--light-line);
    border-radius: 3px;
    box-shadow: 0 12px 34px rgba(36, 34, 31, .07);
}
.stars{ color: var(--brand-red); font-size: 1rem; letter-spacing: .16em; }
.testimonial-card blockquote{ margin: .9rem 0 1.2rem; padding: 0; }
.testimonial-card blockquote p{ margin: 0; color: var(--light-ink); font-size: 1.04rem; line-height: 1.65; }
.testimonial-card figcaption{ display: flex; flex-direction: column; gap: .2rem; padding-top: 1rem; border-top: 1px solid var(--light-line); }
.testimonial-card figcaption strong{ color: var(--light-ink); font-size: 0.98rem; }
.testimonial-card figcaption span{ color: var(--light-muted); font: 0.83rem var(--mono); }
.testimonial-note{ margin: 2rem 0 0; color: var(--light-muted); font-size: 1rem; }
.testimonial-note a{ margin-left: .4rem; }

/* --------------------------------------------------- Floating action dock */
.floating-dock{ position: fixed; z-index: 60; right: 1.1rem; bottom: 1.1rem; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.dock-btn{
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}
.dock-btn svg{ width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; }
.dock-whatsapp{ background: #1faa54; }
.dock-whatsapp:hover{ background: #179045; transform: translateY(-2px); }
.dock-call{ width: 46px; height: 46px; justify-content: center; padding: 0; background: var(--brand-red); }
.dock-call:hover{ background: var(--brand-red-bright); transform: translateY(-2px); }

/* -------------------------------------------------------------- Footer   */
.site-footer > .footer-main{ grid-template-columns: minmax(260px, 1.25fr) repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 4rem); padding-top: clamp(3.5rem, 5.5vw, 5.5rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.footer-brand-lockup{ display: inline-flex !important; align-items: center; gap: .75rem; max-width: none !important; margin-bottom: 1.2rem; }
.footer-brand-lockup .brand-mark{ width: 56px; height: 56px; }
.footer-brand p{ font-size: 0.97rem; }
.footer-social{ margin-top: 1.4rem; }
.footer-social-label{ display: block; margin-bottom: .7rem; color: var(--brand-red-bright); font: 0.74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-social-row{ display: flex; align-items: center; gap: .55rem; }
.social-chip{
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: #b3ab9a;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.social-chip svg{ width: 19px; height: 19px; fill: currentColor; }
.social-chip:hover{ color: #fff; border-color: var(--brand-red); background: var(--brand-red); transform: translateY(-3px); }
.footer-label{ color: var(--brand-red-bright); }
.footer-label::after{ background: linear-gradient(90deg, var(--brand-red), transparent); }
.footer-column a, .footer-column > span:not(.footer-label){ font-size: 0.95rem; }
.footer-column a:hover{ color: var(--brand-red-bright); }
.footer-wa{ margin-top: .6rem; color: #6fd694 !important; font-weight: 600; }
.footer-enquire{ border-bottom-color: var(--brand-red); }
.site-footer > .footer-bottom{ flex-wrap: wrap; font-size: 0.82rem; text-transform: none; letter-spacing: .02em; }
.footer-legal{ display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.footer-legal a{ color: #9a9285; }
.footer-legal a:hover{ color: var(--brand-red-bright); }
.back-top{ color: var(--brand-red-bright); }

/* =========================================================================
   Client review: reduce empty space
   ========================================================================= */
.section-pad{ padding: clamp(4rem, 6vw, 6.8rem) clamp(1.4rem, 7.5vw, 9rem); }
.inner-section{ padding: clamp(3.6rem, 5.5vw, 6.2rem) clamp(1.4rem, 7.5vw, 9rem); }
.section-kicker{ margin: 0 0 clamp(1.5rem, 2.8vw, 2.4rem); }
.section-heading{ margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.compact-heading{ margin-bottom: clamp(1.9rem, 3.4vw, 3rem); }
.proof-item{ min-height: 0; padding: 1.8rem clamp(1.4rem, 2.8vw, 3.2rem); }
.proof-item > span{ margin-bottom: 1.1rem; }
.principles{ margin-top: clamp(2.6rem, 4.5vw, 4.2rem); }
.product-card, .product-card.featured{ min-height: 415px; }
.range-support > div{ min-height: 0; padding: 1.35rem; }
.range-support span{ margin-bottom: .75rem; }
.application-card{ min-height: 285px; }
.application-card h3{ margin-bottom: .7rem; }
.process-image{ min-height: 460px; }
.quality-content{ padding-top: 1.2rem; }
.quality-lead{ margin-bottom: 2rem; }
.quality-list > div{ padding: 1.25rem 0; }
.contact-inner{ gap: 4vw; }
.contact-side{ padding-top: 1.2rem; }
.page-hero{ min-height: 0; padding: clamp(9.5rem, 15vh, 11.5rem) clamp(1.4rem, 7.5vw, 9rem) clamp(3.2rem, 6vh, 4.6rem); gap: 5vw; }
.page-kicker{ margin-bottom: 1.6rem; }
.aside-index{ margin-bottom: 1.5rem; }
.page-hero-aside{ padding: .9rem 0 .9rem 1.4rem; }
.rich-copy{ padding-top: 1.1rem; }
.company-stats > div{ min-height: 0; padding: 1.7rem clamp(1.4rem, 2.6vw, 3rem); gap: 1.1rem; }
.page-card{ min-height: 0; padding: 1.6rem; }
.page-card h3{ margin: 1.5rem 0 .8rem; }
.page-card > span{ margin-bottom: 0; }
.sector-list article, .supply-grid article{ min-height: 0; padding: 1.6rem; }
.sector-list h3, .supply-grid h3{ margin: 1.6rem 0 .8rem; }
.content-band{ padding: clamp(3rem, 5vw, 5rem) clamp(1.4rem, 7.5vw, 9rem); }
.content-band > div > span{ margin-bottom: 1.1rem; }
.page-cta{ padding: clamp(3rem, 5vw, 5rem) clamp(1.4rem, 7.5vw, 9rem); }
.grade-card{ min-height: 0; gap: 1.6rem; padding: clamp(1.5rem, 2.5vw, 2.4rem); }
.test-grid article{ min-height: 0; padding: 1.6rem; }
.test-grid h3{ margin: 1.6rem 0 .7rem; }
.contact-methods article{ min-height: 0; padding: 1.6rem; }
.contact-methods h3{ margin: 1.6rem 0 .8rem; }
.contact-panel{ padding: clamp(3.6rem, 6vw, 6.5rem) clamp(1.4rem, 7.5vw, 9rem); gap: clamp(2.5rem, 5vw, 6rem); }
.direct-contact{ margin-top: 2rem; }
.map-frame{ margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.process-timeline{ padding-bottom: clamp(3.6rem, 5.5vw, 6.2rem); }
.timeline-step{ padding: 1.7rem 0; }
.page-content-wrapper{ padding: clamp(9.5rem, 15vh, 11rem) clamp(1.4rem, 7.5vw, 9rem) clamp(3.6rem, 6vw, 5.5rem); }

/* =========================================================================
   Client review: raise small text sizes for readability
   ========================================================================= */
.eyebrow, .section-kicker, .page-kicker, .product-top, .footer-label{ font-size: 0.79rem; }
.proof-item p{ font-size: 0.98rem; }
.proof-item strong{ font-size: 1.22rem; }
.principles p{ font-size: 0.96rem; }
.principles strong{ font-size: 1.18rem; }
.product-card p{ font-size: 1rem; }
.product-tags li{ font-size: 0.74rem; }
.range-support strong{ font-size: 0.98rem; }
.application-card p{ font-size: 0.98rem; }
.application-card > strong{ font-size: 0.78rem; }
.process-steps strong{ font-size: 1rem; }
.process-steps small{ font-size: 0.9rem; }
.quality-list strong{ font-size: 1.06rem; }
.quality-list p{ font-size: 0.96rem; }
.quality-band span{ font-size: 0.78rem; }
.contact-side .small-note{ font-size: 0.9rem; }
.contact-side .small-note a{ border-bottom: 1px solid rgba(16, 12, 5, .4); font-weight: 700; }
.page-hero-aside p{ font-size: 1.06rem; }
.company-stats span{ font-size: 0.77rem; }
.company-register span{ font-size: 0.74rem; }
.company-register p, .company-register p.is-code{ font-size: 0.99rem; }
.page-card p{ font-size: 0.97rem; }
.page-card > span{ font-size: 0.76rem; }
.page-card h3{ font-size: 1.24rem; }
.sector-list p, .supply-grid p{ font-size: 0.96rem; }
.sector-list h3, .supply-grid h3{ font-size: 1.18rem; }
.grade-features span{ font-size: 0.76rem; }
.grade-use p{ font-size: 0.95rem; }
.grade-use span{ font-size: 0.75rem; }
.technical-note{ font-size: 0.93rem; }
.test-grid p{ font-size: 0.97rem; }
.test-grid span{ font-size: 0.75rem; }
.timeline-step p{ font-size: 0.96rem; }
.timeline-step small{ font-size: 0.75rem; }
.contact-methods p{ font-size: 0.97rem; }
.direct-contact span{ font-size: 0.74rem; }
.direct-contact a, .direct-contact p{ font-size: 0.99rem; }
.enquiry-form label > span{ font-size: 0.76rem; }
.form-submit p{ font-size: 0.85rem; }
.band-list p{ font-size: 0.95rem; }

/* =========================================================================
   New pages: FAQ, Gallery, Careers, Blog, legal
   ========================================================================= */
/* FAQ accordion */
.faq-list{ max-width: 900px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-question{
    width: 100%;
    padding: 1.4rem 3rem 1.4rem 0;
    position: relative;
    display: block;
    border: 0;
    background: none;
    color: var(--paper);
    font-size: 1.08rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.faq-question:hover{ color: var(--brand-red-bright); }
.faq-question::after{
    content: '+';
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);
    color: var(--brand-red-bright);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform .3s ease;
}
.faq-question[aria-expanded="true"]::after{ content: '−'; }
.faq-answer{ overflow: hidden; }
.faq-answer[hidden]{ display: none; }
.faq-answer > div{ padding: 0 2.5rem 1.5rem 0; }
.faq-answer p{ margin: 0 0 .8rem; color: var(--muted); font-size: 0.99rem; line-height: 1.75; }
.faq-answer p:last-child{ margin-bottom: 0; }

/* Gallery */
.gallery-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gallery-tile{
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #302d28;
}
.gallery-tile img{ width: 100%; height: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.gallery-tile:hover img{ transform: scale(1.05); }
.gallery-tile figcaption{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.5rem 1.1rem .9rem;
    background: linear-gradient(0deg, rgba(14, 13, 12, .9), transparent);
    color: #fff;
    font-size: 0.93rem;
    font-weight: 600;
}
.gallery-tile.is-empty{ display: grid; place-items: center; aspect-ratio: 4 / 3; border-style: dashed; text-align: center; padding: 1.5rem; }
.gallery-tile.is-empty span{ color: var(--muted-dark); font: 0.85rem var(--mono); line-height: 1.7; }
.media-note{ margin: 1.6rem 0 0; color: var(--muted); font-size: 0.95rem; }

/* Video block */
.video-frame{
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px dashed var(--line-strong);
    background: linear-gradient(135deg, #322e28, #2a2825);
    text-align: center;
}
.video-frame p{ max-width: 420px; margin: 0 auto; padding: 0 1.2rem; color: var(--muted); font-size: 0.97rem; }

/* Brochure / download row */
.download-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.download-card{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, #332f28, #2d2b27);
    border: 1px solid var(--line);
}
.download-card span{ color: var(--brand-red-bright); font: 0.74rem var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.download-card strong{ color: var(--paper); font-size: 1.08rem; }
.download-card p{ margin: 0; color: var(--muted); font-size: 0.94rem; }
.download-card .is-placeholder{ align-self: flex-start; margin-top: .6rem; }

/* Careers */
.job-list{ border-top: 1px solid var(--line); }
.job-row{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}
.job-row h3{ margin: 0; color: var(--paper); font-size: 1.14rem; }
.job-row span{ color: var(--muted); font: 0.9rem var(--mono); }
.perk-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.perk-card{ padding: 1.5rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.perk-card strong{ display: block; margin-bottom: .5rem; color: var(--paper); font-size: 1.06rem; }
.perk-card p{ margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Blog */
.post-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.post-card{ display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; background: linear-gradient(145deg, #332f28, #2d2b27); border: 1px solid var(--line); }
.post-card time{ color: var(--brand-red-bright); font: 0.76rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.post-card h3{ margin: 0; color: var(--paper); font-size: 1.2rem; line-height: 1.3; }
.post-card p{ margin: 0; color: var(--muted); font-size: 0.96rem; }
.empty-state{ padding: 3rem 1.5rem; border: 1px dashed var(--line-strong); text-align: center; }
.empty-state p{ margin: 0 auto; max-width: 520px; color: var(--muted); font-size: 1rem; }

/* Legal / long-form copy */
.legal-body{ max-width: 820px; }
.legal-body h2{ margin: 2.4rem 0 .9rem; color: var(--paper); font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.25; }
.legal-body h2:first-child{ margin-top: 0; }
.legal-body p, .legal-body li{ color: var(--muted); font-size: 1rem; line-height: 1.8; }
.legal-body ul{ margin: 0 0 1.2rem; padding-left: 1.2rem; }
.legal-body li{ margin-bottom: .45rem; }
.legal-updated{ display: inline-block; margin-bottom: 2rem; padding: .4rem .7rem; border: 1px solid var(--line); color: var(--muted); font: 0.8rem var(--mono); }
.sitemap-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.sitemap-col h3{ margin: 0 0 .9rem; color: var(--brand-red-bright); font: 0.8rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sitemap-col ul{ margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sitemap-col li{ border-bottom: 1px solid var(--line-soft); }
.sitemap-col a{ display: block; padding: .7rem 0; color: #c3bbab; font-size: 0.98rem; }
.sitemap-col a:hover{ color: var(--brand-red-bright); }

/* Product media split — even 2x2 plate of captioned images beside the copy, both columns aligned to the top so neither floats in the middle. */
.product-visual{
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.6rem, 3.5vw, 3.4rem);
    align-items: start;
}
.product-visual-media{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.product-visual-media figure{ position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); background: #302d28; }
.product-visual-media img{ width: 100%; height: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.product-visual-media figure:hover img{ transform: scale(1.05); }
.product-visual-media figcaption{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: 1.4rem .85rem .7rem;
    background: linear-gradient(0deg, rgba(14, 13, 12, .92), transparent);
    color: #fff;
    font-size: 0.87rem;
    font-weight: 600;
}
.product-visual-media figcaption span{ color: var(--brand-red-bright); font: 0.72rem var(--mono); }
.product-visual-copy{ max-width: none; padding-top: 0; }
.spec-list{ margin: 1.6rem 0 1.8rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.spec-list li{ display: flex; flex-direction: column; gap: .25rem; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.spec-list span{ color: var(--brand-red-bright); font: 0.72rem var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.spec-list strong{ color: #d5cdbd; font-size: 0.99rem; font-weight: 500; }

/* =========================================================================
   Accent bands rebranded from gold to the logo red
   ========================================================================= */
.content-band, .contact-inner{
    color: #fff;
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 116, 134, .26), transparent 32%),
        linear-gradient(130deg, #c30227, #8d0019 70%, #5c0011);
    border-color: rgba(255, 130, 148, .3);
}
.content-band h2, .contact h2{ color: #fff; }
.content-band h2 em, .contact h2 em{ color: #ffd3d9; }
.content-band > div > span, .content-band > p{ color: rgba(255, 255, 255, .78); }
.contact .section-kicker, .contact .section-kicker span:last-child{ color: rgba(255, 255, 255, .72); }
.contact-side > p{ color: rgba(255, 255, 255, .88); }
.contact-side .small-note{ color: rgba(255, 255, 255, .72); }
.contact-side .small-note a{ color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.content-band .button, .contact-side .button-solid{
    color: #fff;
    background: #1b1a18;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.content-band .button:hover, .contact-side .button-solid:hover{ color: #1b1a18; background: #fff; }
.contact-side .button-whatsapp, .content-band .button-whatsapp{ color: #fff; background: #12833f; }
.contact-side .button-whatsapp:hover, .content-band .button-whatsapp:hover{ color: #fff; background: #0d6c33; }
.band-list{ border-top-color: rgba(255, 255, 255, .3); }
.band-list p{ border-bottom-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .86); }
.band-list span{ color: #ffd3d9; }
.band-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; justify-self: end; }
.product-band .band-actions, .content-band .band-actions{ align-self: center; }

/* =========================================================================
   Odds and ends for the new markup
   ========================================================================= */
/* Thirteen diameters no longer fit a fixed 4-column grid */
.diameter-grid{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.diameter-grid > span{ font-size: clamp(1.5rem, 2.2vw, 2.4rem); }
.rich-copy-inline{ max-width: 46ch; margin: 1.4rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.contact-quick{ display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.contact-faq-note{ margin: 1.5rem 0 0; color: var(--muted); font-size: 0.96rem; }
.contact-faq-note .text-link{ margin-left: .3rem; }
.faq-heading{ margin: 0; font-size: inherit; font-weight: inherit; }
.job-row h3 .is-placeholder{ margin-left: .5rem; vertical-align: middle; }
.gallery-tile.is-empty em{ display: block; margin-top: .6rem; }
.blog-pagination{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.blog-pagination .page-numbers{
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 .8rem;
    border: 1px solid var(--line);
    color: var(--paper);
    font: 0.9rem var(--mono);
}
.blog-pagination .page-numbers.current, .blog-pagination .page-numbers:hover{ border-color: var(--brand-red); background: var(--brand-red); color: #fff; }
.post-card h3 a:hover{ color: var(--brand-red-bright); }
.video-section .video-frame{ margin-top: .5rem; }
.download-section .media-note{ margin-top: 1.6rem; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1300px){
    .site-nav { gap: .9rem; margin-right: 1rem; }
    .header-phone { display: none; }
}
@media (max-width: 1200px) {
    .badge-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perk-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer > .footer-main{ grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(0, 1fr)); }
}

/* Collapse to the drawer earlier — eight nav items need the room */
@media (max-width: 1100px){
    .header-cta, .header-phone { display: none; }
    .nav-toggle {
        position: relative;
        z-index: 45;
        width: 42px;
        height: 42px;
        display: grid;
        place-content: center;
        gap: 6px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: rgba(228, 3, 46, .07);
        cursor: pointer;
    }
    .nav-toggle-line { width: 17px; height: 1px; display: block; background: var(--brand-red-bright); transition: transform .3s ease; }
    .site-nav {
        position: fixed;
        z-index: 42;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 400px);
        margin: 0;
        padding: 6.5rem 2rem 2.5rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        overflow-y: auto;
        background: radial-gradient(circle at 100% 0, rgba(228, 3, 46, .16), transparent 40%), #221f1d;
        border-left: 1px solid var(--line);
        box-shadow: -30px 0 90px rgba(0, 0, 0, .55);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .38s cubic-bezier(.2, .75, .2, 1), visibility .38s;
    }
    .site-nav a { width: 100%; padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); color: var(--paper); font-size: 0.95rem; }
    .site-nav a::after { display: none; }
    .site-nav .nav-contact { display: block; color: var(--brand-red-bright); }
    .nav-drawer-foot { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; margin-top: 1.8rem; }
    .nav-drawer-foot .button { width: 100%; }
    .nav-drawer-wa { color: #6fd694; font-size: 0.9rem; font-weight: 700; }
    .site-header.is-nav-open .site-nav { transform: translateX(0); visibility: visible; }
    .site-header.is-nav-open .nav-toggle-line:first-of-type { transform: translateY(3.5px) rotate(45deg); }
    .site-header.is-nav-open .nav-toggle-line:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
    .job-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
    .hero{ padding-top: clamp(8.5rem, 14vh, 10.5rem); }
    .hero-media img{ object-position: 68% center; }
    .testimonial-grid{ grid-template-columns: 1fr; }
    .gallery-grid, .post-grid, .download-row, .sitemap-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-visual{ grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .top-bar{ justify-content: center; padding: .45rem 6vw; font-size: 0.74rem; }
    .top-bar-hide-sm, .top-bar-mail{ display: none; }
    .site-header{ padding: 1.05rem 6vw; }
    .brand-mark, .site-header.is-scrolled .brand-mark{ width: 42px; height: 42px; }
    .brand-word strong, .site-header.is-scrolled .brand-word strong{ font-size: 1.02rem; }
    .brand-logo-custom, .site-header.is-scrolled .brand-logo-custom { height: 40px; max-width: 54vw; }
    .brand-word small{ font-size: 0.64rem; letter-spacing: .12em; }
    .hero{ min-height: 0; padding: 8.5rem 7vw 3rem; }
    .hero h1{ max-width: none; font-size: clamp(2.5rem, 10.5vw, 3.8rem); }
    .hero-media::after{ background: linear-gradient(0deg, rgba(15, 14, 13, .95) 0%, rgba(16, 15, 13, .78) 45%, rgba(18, 16, 14, .68) 100%); }
    .badge-grid, .job-row, .perk-grid{ grid-template-columns: 1fr; }
    .job-row{ gap: .5rem; padding: 1.3rem 0; }
    .inline-cta{ flex-direction: column; align-items: flex-start; }
    .floating-dock{ right: .75rem; bottom: .75rem; }
    .dock-whatsapp span{ display: none; }
    .dock-whatsapp{ width: 46px; height: 46px; justify-content: center; padding: 0; }
    .footer-legal{ gap: .9rem; }
}
@media (max-width: 560px) {
    .gallery-grid, .post-grid, .download-row, .sitemap-grid{ grid-template-columns: 1fr; }
    .hero-actions .button{ width: 100%; }
    .product-visual-media{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .badge-card:hover, .social-chip:hover, .dock-btn:hover, .gallery-tile:hover img{ transform: none; }
    .product-visual-media figure:hover img{ transform: none; }
}

/* ===========================================================================
   Hero video
   The hero media slot now takes a muted, looping clip with the still frame as
   its poster. Everything degrades to the photograph: no video configured, a
   codec the browser cannot play, reduced-motion, or Save-Data all end up
   showing the same image the section used before.
   =========================================================================== */
/* `z-index: 0` on a positioned element opens a stacking context, which would
   trap the pause button underneath .hero-copy (z-index 2) and make it
   unclickable where the two overlap. `auto` keeps the media painting behind
   the copy — DOM order already guarantees that — while letting the button
   rise above it. */
.hero-media{ z-index: auto; }
.hero-media video, .hero-media .hero-video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 62% center;
    background: #161513;
}
/* The <img> inside <video> is the last-resort fallback for browsers that
   cannot play any source at all. */
.hero-media video > img{ width: 100%; height: 100%; object-fit: cover; }

/* Bottom-LEFT, not bottom-right. Two things already live in that corner: the
   Stena brand bug burned into the video, and the fixed WhatsApp / call dock. */
.hero-video-toggle{
    position: absolute;
    z-index: 4;
    left: clamp(1rem, 3vw, 2.4rem);
    right: auto;
    bottom: clamp(1rem, 3vw, 2.4rem);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(14, 13, 12, .55);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.hero-video-toggle:hover{ border-color: var(--brand-red-bright); background: rgba(228, 3, 46, .8); }

/* ===========================================================================
   In-page anchors
   =========================================================================== */
/* Zero-height marker at the very top of the document. The Back to top link
   targets this instead of the header, which goes position:fixed on scroll and
   therefore cannot be scrolled to. */
.page-top-anchor { position: static; display: block; width: 0; height: 0; }

/* ===========================================================================
   Floating back to top — bottom-left
   The contact dock owns the bottom-right corner, so this sits opposite it.
   It only appears once the reader is about a screen down, which is both the
   conventional behaviour and what keeps it clear of the hero video's pause
   button at the bottom-left of the first screen.
   =========================================================================== */
.back-top-float {
    position: fixed;
    z-index: 60;
    left: max(1.1rem, env(safe-area-inset-left, 0px));
    bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(20, 19, 17, .82);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease, border-color .25s ease;
}
.back-top-float svg { width: 20px; height: 20px; fill: currentColor; }
.back-top-float:hover { border-color: var(--brand-red); background: var(--brand-red); color: #fff; }
/* Hidden state is scoped to html.js, so with JavaScript off the control is
   simply always available rather than permanently invisible. */
.js .back-top-float { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.js .back-top-float.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

@media (max-width: 800px) {
    .back-top-float { left: max(.75rem, env(safe-area-inset-left, 0px)); bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .back-top-float { transition: opacity .2s ease, visibility .2s; transform: none; }
    .js .back-top-float { transform: none; }
}

/* Content typed into the WordPress page editor, rendered above the designed
   sections so an edit is immediately visible. */
.editable-content { border-bottom: 1px solid var(--line-soft); }
.editable-content .entry-content > *:first-child { margin-top: 0; }
.editable-content .entry-content > *:last-child { margin-bottom: 0; }

/* ===========================================================================
   Grade range — seven cards
   The two-column product grid was built for four large cards. Seven denser
   tiles need to reflow on their own, so the track count comes from the
   available width rather than a fixed number.
   =========================================================================== */
.grade-range { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.grade-range .product-card { min-height: 0; padding: 1.5rem 1.4rem; }
.grade-range .product-card h3 { font-size: clamp(3rem, 4.2vw, 4.4rem); line-height: .92; margin-bottom: .7rem; }
.grade-range .product-content { max-width: none; }
.grade-range .product-card p { max-width: none; font-size: 0.95rem; line-height: 1.6; }
/* The rotated bar decoration was drawn for a much taller card. */
.grade-range .bar-visual { right: -34px; bottom: 20px; opacity: .16; }
.grade-range .bar-visual span { height: 170px; }
.grade-range .bar-visual span:nth-child(2) { height: 200px; }

.grade-specs { margin: 1.1rem 0 0; padding: .9rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.grade-specs li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .32rem 0; }
.grade-specs span { color: var(--muted); font: 0.74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.grade-specs strong { color: var(--paper); font-size: 0.92rem; font-weight: 600; text-align: right; }

.grade-range .product-tags { margin-top: 1rem; }
.grade-note { margin: .9rem 0 0 !important; padding: .55rem .7rem; border-left: 2px solid var(--brand-red); background: rgba(228, 3, 46, .07); color: #d8b3ba !important; font-size: 0.84rem !important; line-height: 1.55 !important; }
.grade-tile.is-non-standard { border-color: rgba(228, 3, 46, .38); }
.grade-tile.is-non-standard .product-top span:last-child { color: var(--brand-red-bright); }
.grade-footnote { max-width: 96ch; margin: 1.3rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.grade-card.is-non-standard { border-color: rgba(228, 3, 46, .38); }
.grade-card.is-non-standard .grade-card-top span:first-child, .grade-card.is-non-standard .grade-name { color: var(--brand-red-bright); }
.grade-card.is-non-standard .grade-card-top strong { color: rgba(228, 3, 46, .45); }

/* Five cells now, so let the strip tile itself instead of using fixed tracks. */
.range-support { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

@media (max-width: 620px) {
    .grade-range { grid-template-columns: 1fr; }
    .grade-range .bar-visual { display: none; }
    .grade-specs li { flex-direction: column; align-items: flex-start; gap: .1rem; }
    .grade-specs strong { text-align: left; }
}

/* The header is fixed once scrolled, so anything an in-page link jumps to
   would otherwise land underneath it. */
:target { scroll-margin-top: 7.5rem; }
#main-content, .page-hero, .hero, section[id], div[id] { scroll-margin-top: 7.5rem; }
#top { scroll-margin-top: 0; }
@media (max-width: 800px) {
    :target, #main-content, .page-hero, .hero, section[id], div[id] { scroll-margin-top: 6rem; }
    #top { scroll-margin-top: 0; }
}
/* Two bars = pause. The play triangle is drawn by the [aria-pressed] state. */
.hero-video-toggle-icon{
    width: 12px;
    height: 13px;
    display: block;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.hero-video-toggle[aria-pressed="true"] .hero-video-toggle-icon{
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 0;
    border-left: 12px solid currentColor;
}

/* ===========================================================================
   FAQ accordion — no open/close flash on load
   The markup ships every answer expanded so the page is usable without
   JavaScript. Previously the footer script then collapsed nine of them, which
   yanked the page upward after first paint. Scoping the collapsed state to
   html.js means the accordion renders in its final shape immediately.
   =========================================================================== */
.js .faq-answer:not(.is-open){ display: none; }
.no-js .faq-question::after{ content: ''; }

/* ===========================================================================
   Plant video (Products page)
   =========================================================================== */
.video-frame.has-video{ display: block; padding: 0; border-style: solid; border-color: var(--line); background: #000; }
.video-frame.has-video video{ width: 100%; height: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.video-frame.is-placeholder-frame .video-frame-mark{
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: 50%;
    color: var(--muted);
    font-size: 1.5rem;
}

/* ===========================================================================
   Post, archive, search and 404 templates
   These views previously fell through to index.php, which rendered a bare
   title and excerpt with no layout, no navigation and no styling.
   =========================================================================== */
.entry-layout{ max-width: 820px; }
.page-entry-header{ margin-bottom: 2rem; }
.page-entry-title{ margin: 0; font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; }
.entry-meta{ display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin: 0 0 1.6rem; color: var(--brand-red-bright); font: 0.78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.entry-thumb{ margin: 0 0 2rem; overflow: hidden; border: 1px solid var(--line); }
.entry-thumb img{ width: 100%; height: auto; display: block; }
.entry-content{ color: var(--muted); font-size: 1.03rem; line-height: 1.8; }
.entry-content > *{ max-width: 100%; }
.entry-content h2{ margin: 2.4rem 0 .9rem; color: var(--paper); font-size: 1.6rem; line-height: 1.25; letter-spacing: -.01em; }
.entry-content h3{ margin: 2rem 0 .8rem; color: var(--paper); font-size: 1.3rem; line-height: 1.3; }
.entry-content h4, .entry-content h5, .entry-content h6{ margin: 1.6rem 0 .6rem; color: var(--paper); font-size: 1.08rem; }
.entry-content p{ margin: 0 0 1.3rem; }
.entry-content a:not(.button){ color: var(--paper); border-bottom: 1px solid var(--brand-red); }
.entry-content a:not(.button):hover{ color: var(--brand-red-bright); }
.entry-content ul, .entry-content ol{ margin: 0 0 1.4rem; padding-left: 1.3rem; }
.entry-content li{ margin-bottom: .5rem; }
.entry-content img, .entry-content figure{ max-width: 100%; height: auto; }
.entry-content figure{ margin: 2rem 0; }
.entry-content figcaption{ margin-top: .6rem; color: var(--muted-dark); font-size: 0.87rem; }
.entry-content blockquote{ margin: 2rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 2px solid var(--brand-red); color: var(--paper); font-size: 1.12rem; }
.entry-content blockquote p:last-child{ margin-bottom: 0; }
.entry-content pre{ overflow-x: auto; padding: 1.2rem; background: #221f1d; border: 1px solid var(--line); }
.entry-content code{ padding: .1rem .35rem; background: rgba(255, 255, 255, .06); font: 0.9em var(--mono); }
.entry-content pre code{ padding: 0; background: none; }
.entry-content table{ width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.entry-content th, .entry-content td{ padding: .7rem; border: 1px solid var(--line); text-align: left; }
.entry-content hr{ margin: 2.4rem 0; border: 0; border-top: 1px solid var(--line); }
.entry-tags{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.4rem; }
.entry-tags a{ padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: #bdb5a4; font: 0.72rem var(--mono); text-transform: uppercase; }
.entry-tags a:hover{ border-color: var(--brand-red); color: #fff; }
.post-navigation{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.post-navigation a{ display: flex; flex-direction: column; gap: .4rem; padding: 1.2rem; border: 1px solid var(--line); color: var(--paper); font-size: 1rem; }
.post-navigation a:hover{ border-color: var(--brand-red); }
.post-navigation span{ color: var(--brand-red-bright); font: 0.72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.post-navigation .is-next{ text-align: right; align-items: flex-end; }

.search-form{ display: flex; flex-wrap: wrap; gap: .8rem; max-width: 520px; margin: 0 0 2.4rem; }
.search-form label{ flex: 1 1 220px; }
.search-form input[type="search"]{
    width: 100%;
    min-height: 48px;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0;
    outline: 0;
    color: var(--paper);
    background: rgba(255, 255, 255, .03);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}
.search-form input[type="search"]:focus{ border-color: var(--brand-red-bright); }
.search-form .button{ flex: 0 0 auto; }

.error-404-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.error-404-links{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: 2.6rem; padding: 0; list-style: none; }
.error-404-links a{ display: block; padding: 1rem 1.1rem; border: 1px solid var(--line); color: var(--paper); font-size: 0.98rem; }
.error-404-links a:hover{ border-color: var(--brand-red); color: var(--brand-red-bright); }

@media (max-width: 800px) {
    /* Line the control up with the hero copy's left edge on small screens. */
    .hero-video-toggle{ right: auto; left: 7vw; bottom: 1rem; }
}

@media (max-width: 620px) {
    .post-navigation{ grid-template-columns: 1fr; }
    .post-navigation .is-next{ text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-toggle{ transition: none; }
}

/* ===========================================================================
   RESPONSIVE + CROSS-BROWSER HARDENING
   This block must stay LAST in the file. Equal-specificity rules are resolved
   by source order, so anything here outranks the earlier breakpoints — the
   media queries below are therefore ordered widest -> narrowest.
   =========================================================================== */

/* --- Stop iOS inflating text in landscape --- */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- Long unbroken strings (emails, addresses, URLs) must not force scroll --- */
.footer-column a, .direct-contact a, .direct-contact p, .company-register p, .legal-body a, .legal-body p, .top-bar a, .badge-card p, .job-row span{
    overflow-wrap: anywhere;
}

/* --- Grid/flex children default to min-width:auto, which makes wide content
       push the page sideways. Allow them to shrink. --- */
.footer-main > *, .badge-grid > *, .testimonial-grid > *, .gallery-grid > *, .post-grid > *, .download-row > *, .perk-grid > *, .hero-chips > *, .product-visual > *, .product-visual-media > *, .sitemap-grid > *, .page-grid > *, .job-row > *, .company-register > *, .diameter-grid > *, .inline-cta > *, .band-actions > *, .hero-actions > *{ min-width: 0; }

/* --- Nothing may exceed the viewport --- */
img, iframe, video, svg, table{ max-width: 100%; }
.map-frame iframe{ max-width: none; }

/* --- Safari still needs the prefix for the scrolled-header blur --- */
.site-header.is-scrolled{ -webkit-backdrop-filter: blur(20px) saturate(130%); }

/* --- Older Safari (<14.1) does not support the `inset` shorthand --- */
.hero-media{ top: 0; right: 0; bottom: 0; left: 0; }

/* --- Consistent form controls across iOS / Android / Firefox --- */
.enquiry-form input, .enquiry-form textarea, .enquiry-form select{
    -webkit-appearance: none;
    appearance: none;
    max-width: 100%;
    border-radius: 0;
}
.enquiry-form select{
    padding-right: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ff4155'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2rem center;
    background-size: 10px 6px;
}
.enquiry-form textarea{ -webkit-appearance: none; }

/* --- Floating dock clears the iOS home indicator when viewport-fit is used --- */
.floating-dock{
    right: max(1.1rem, env(safe-area-inset-right, 0px));
    bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
}

/* --- aspect-ratio fallback for iOS 14 / older Safari --- */
@supports not (aspect-ratio: 4 / 3){
    .gallery-tile img, .gallery-tile.is-empty { height: 230px; }
    .product-visual-media img { height: 200px; }
    .diameter-grid > span { min-height: 92px; padding: 1.1rem 0; }
    .video-frame { min-height: 320px; }
}

/* --- Coarse pointers: enlarge small hit areas to a comfortable target --- */
@media (hover: none) and (pointer: coarse){
    .social-dot { width: 34px; height: 34px; }
    .footer-column a { padding: .2rem 0; }
    .faq-question { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .text-link, .card-link, .text-link-dark { padding-bottom: .55rem; }
    /* iOS zooms the viewport when a focused control is under 16px. Targeting
       the device rather than a width also covers iPad portrait (820/834/1024). */
    .enquiry-form input, .enquiry-form textarea, .enquiry-form select { font-size: 16px; }
}

@media (max-width: 1200px) {
    /* Eight nav items need to stay on one line down to the drawer breakpoint */
    .site-nav{ gap: .8rem; margin-right: 1rem; }
    .site-nav a{ font-size: 0.72rem; letter-spacing: .08em; }
    /* Footer drops to brand + 2 columns; neutralise the base layer's 4-column
       span rules, which assumed a different column count. */
    .site-footer > .footer-main{ grid-template-columns: minmax(210px, 1.15fr) repeat(2, minmax(0, 1fr)); }
    .footer-contact, .footer-brand{ grid-column: auto; }
}

@media (max-width: 1100px) {
    /* .header-actions keeps both children hidden here, but the empty flex item
       still occupies the right end of `justify-content: space-between`, which
       parks the burger in the middle of the header. Remove it from the flow. */
    .header-actions{ display: none; }
}

@media (max-width: 980px) {
    .testimonial-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer > .footer-main{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem; }
    .footer-brand{ grid-column: 1 / -1; }
    .footer-contact{ grid-column: auto; }
    .product-visual-media{ max-width: 640px; }
}

@media (max-width: 800px) {
    /* iOS zooms the page when a focused control's text is under 16px */
    .enquiry-form input, .enquiry-form textarea, .enquiry-form select{ font-size: 16px; }
    .testimonial-grid{ grid-template-columns: 1fr; }
    .product-visual-media{ max-width: none; }
    .inline-cta-actions, .contact-side-actions, .band-actions, .contact-quick{ width: 100%; }
    .inline-cta-actions .button, .contact-side-actions .button, .band-actions .button, .contact-quick .button{ flex: 1 1 auto; }
    .page-cta-actions{ flex-wrap: wrap; }
    /* Keep the last footer row clear of the floating WhatsApp / call dock */
    .site-footer > .footer-bottom{ padding-bottom: 4.5rem; }
}

@media (max-width: 620px) {
    .site-footer > .footer-main{ grid-template-columns: 1fr; }
    .footer-brand, .footer-contact{ grid-column: auto; }
    .footer-legal{ gap: .75rem 1rem; }
}

@media (max-width: 480px) {
    .top-bar{ gap: .35rem .5rem; flex-wrap: wrap; font-size: 0.72rem; }
    .top-bar-info, .top-bar-social{ gap: .5rem; }
    .brand-word small{ letter-spacing: .09em; }
    .inline-cta-actions .button, .contact-side-actions .button, .band-actions .button, .contact-quick .button{ width: 100%; flex: 1 1 100%; }
    .job-row a.text-link{ justify-self: start; }
    .legal-body h2{ font-size: 1.3rem; }
}

/* --- Short landscape viewports (phones turned sideways) --- */
@media (max-height: 520px) and (orientation: landscape){
    .hero { padding-top: 7rem; padding-bottom: 2.5rem; }
    .hero h1 { font-size: clamp(2rem, 6vw, 3rem); margin: .9rem 0 .8rem; }
    .hero-chips { margin-top: 1.4rem; }
    .page-hero { padding-top: 7.5rem; padding-bottom: 2.5rem; }
    .site-nav { padding-top: 5rem; gap: 0; }
    .site-nav a { padding: .7rem 0; }
}