/* Modern look for www.ameinc.com (2026-10-21), after tenaris.com.
   Monochrome: charcoal type on white and a pale grey, no blue accents; square corners and hairlines
   in place of cards; small spaced capitals for labels and links; light, large headlines. The
   header floats see-through over each page's photo or video banner and turns to frosted white
   once the page scrolls (php/header.php sets body.has-hero and body.scrolled).

   head.php links this file after erp.css. It redefines erp.css's colour tokens, so everything
   erp.css paints blue or navy comes out charcoal, then overrides the pieces that change shape.
   To go back to the ERP look, remove the modern.css line from php/head.php. */

:root {
    --ink: #1e2226;
    --navy: #1e2226;
    --text: #2b3035;
    --text-body: #555c62;
    --text-dim: #868c91;
    --bg: #f4f4f4;
    --page-bg: #ffffff;
    --panel: #ffffff;
    --border: #e3e5e7;
    --line: #e8eaec;
    --blue: #1e2226;
    --blue-hover: #000000;
    --soft: #f2f3f4;
    --th-bg: #f4f4f4;
    --row-alt: #fafafa;
    --sky: #c9cdd0;
    --bar: #2b3035;
    --bar-deep: #23272b;
    --footer: #23272b;
    --radius: 0px;
    --shadow: none;
    --shadow-menu: 0 12px 32px rgba(0,0,0,.10);
    --glass: rgba(255,255,255,.82);
    --hairline-light: rgba(255,255,255,.18);
}

::selection { background: #1e2226; color: #fff; }

p { color: var(--text-body); line-height: 170%; }

h1, h2, h3, h4 {
    color: var(--ink);
    letter-spacing: -.01em;
}

/* Small spaced capitals: section labels and text links. */
.eyebrow,
.solutions .eyebrow {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ── Masthead: top strip + header ─────────────────────────────────────── */
.masthead {
    position: sticky;
    top: -32px;
    z-index: 1000;
}

.top_header {
    background-color: var(--bg);
    border-bottom: 1px solid var(--line);
}

/* header.php adds header-ready a frame after load, so the fades run on scroll but not on open. */
body.header-ready .masthead { transition: top .35s ease; }

body.header-ready .top_header,
body.header-ready header { transition: background-color .35s ease, border-color .35s ease; }

.top_header .slogan { color: var(--text-dim); letter-spacing: .04em; }

.top_header ul li,
.top_header ul li a { color: var(--text-body); }

.top_header ul li a img { filter: brightness(0); opacity: .45; }
.top_header ul li a:hover img { opacity: .8; }
.top_header .th-email:hover { color: var(--ink); }

.dot { width: 3px; height: 3px; background: #b5babe; }

header {
    position: relative;
    top: auto;
    height: 72px;
    background-color: var(--glass);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid rgba(0,0,0,.07);
    box-shadow: none !important;
}

header .mobile_contain { height: 72px; }

header .mobile_a { gap: 0; }

/* Two logos: black lettering on the frosted header, white lettering over a banner. The white
   file carries extra space around the mark, hence the larger box and negative margin. */
header .logo-on-light {
    display: block;
    height: 38px;
    width: auto;
}

header .logo-on-dark {
    display: none;
    height: 52px;
    width: auto;
    margin: -7px 0;
}

/* Over a banner: no fill, white type, a soft shade at the top so the type reads on any photo. */
body.has-hero .masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

body.has-hero:not(.scrolled) .masthead {
    background: linear-gradient(180deg, rgba(10,12,14,.62) 0%, rgba(10,12,14,.25) 70%, rgba(10,12,14,0) 100%);
}

body.has-hero:not(.scrolled) .top_header {
    background-color: transparent;
    border-bottom-color: var(--hairline-light);
}

body.has-hero:not(.scrolled) .top_header .slogan { color: rgba(255,255,255,.7); }

body.has-hero:not(.scrolled) .top_header ul li,
body.has-hero:not(.scrolled) .top_header ul li a { color: rgba(255,255,255,.85); }

body.has-hero:not(.scrolled) .top_header ul li a img { filter: none; opacity: .8; }

body.has-hero:not(.scrolled) .dot { background: rgba(255,255,255,.4); }

body.has-hero:not(.scrolled) header {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--hairline-light);
}

body.has-hero:not(.scrolled) header .logo-on-light { display: none; }
body.has-hero:not(.scrolled) header .logo-on-dark { display: block; }

body.has-hero.scrolled .masthead { top: -32px; }

/* Desktop navigation: spaced capitals, a hairline under the hovered item, Contact outlined. */
@media screen and (min-width: 1101px) {
    nav { height: 72px; }

    nav > ul { height: 72px; }

    nav ul .parent_li {
        height: 72px;
        padding-top: 18px;
        margin-left: 6px;
    }

    nav ul .parent_li .parent_a {
        height: 36px;
        line-height: 36px;
        padding: 0 12px;
        border-radius: 0;
        background-color: transparent;
        color: var(--ink);
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        box-shadow: inset 0 -1px 0 transparent;
        transition: box-shadow .2s ease, color .2s ease, background-color .2s ease;
    }

    nav ul .parent_li .parent_a:hover,
    nav .parent_li:hover > .parent_a {
        background-color: transparent;
        color: var(--ink);
        box-shadow: inset 0 -1px 0 currentColor;
    }

    nav .arrow,
    nav .parent_li:hover .arrow {
        margin: -4px 0 0 8px;
        padding: 2px;
        border: solid currentColor;
        border-width: 0 1px 1px 0;
        opacity: .7;
        transition: transform .25s ease, opacity .2s ease;
    }

    /* The caret turns over while its menu is open, like the ERP side menu's group caret. */
    nav .parent_li:hover .arrow,
    nav .parent_li:focus-within .arrow {
        transform: translateY(3px) rotate(225deg);
        opacity: 1;
    }

    /* The section the current page sits in keeps its underline (header.php marks it). */
    nav .parent_li.current > .parent_a { box-shadow: inset 0 -1px 0 currentColor; }

    /* Contact: a solid charcoal button, set off from the links by a hairline. style.css gives the
       link width:100%, which with a margin pushed the label off centre; the gap is on the li now,
       and the left padding carries one letter-space more so the tracked label sits centred. */
    nav ul li.parent_li:last-child {
        margin-left: 18px;
        padding-left: 22px;
        border-left: 1px solid rgba(0,0,0,.12);
        height: 36px;
        margin-top: 18px;
        padding-top: 0;
    }

    nav ul li:last-child .parent_a {
        width: auto;
        margin-left: 0;
        justify-content: center;
        padding: 0 20px 0 calc(20px + .14em);
        background-color: var(--ink);
        border: 1px solid var(--ink);
        color: #fff;
        font-weight: 500;
        line-height: 34px;
    }

    nav ul .parent_li:last-child .parent_a:hover,
    nav .parent_li:last-child:hover > .parent_a {
        background-color: #3a4046;
        border-color: #3a4046;
        color: #fff;
        box-shadow: none;
    }

    body.has-hero:not(.scrolled) nav ul .parent_li .parent_a { color: #fff; }

    /* Over a banner: outlined white, filled white on hover. */
    body.has-hero:not(.scrolled) nav ul li.parent_li:last-child { border-left-color: var(--hairline-light); }

    body.has-hero:not(.scrolled) nav ul li:last-child .parent_a {
        background-color: transparent;
        border-color: rgba(255,255,255,.75);
    }

    body.has-hero:not(.scrolled) nav ul .parent_li:last-child .parent_a:hover,
    body.has-hero:not(.scrolled) nav .parent_li:last-child:hover > .parent_a {
        background-color: #fff;
        border-color: #fff;
        color: var(--ink);
    }

    /* Dropdowns, after the ERP side menu: rounded rows that tint on hover, the current page
       tinted with a 3px bar on its left edge, muted links that darken on hover. On top of
       that: the panel fades and rises into place, its rows arrive one after another, and the
       hovered row's bar grows in, its label steps right and an arrow slides in at the end.
       style.css switches the menu with display, which can't animate, so it stays display:block
       here and is hidden with visibility/opacity instead. */
    nav .sub-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        top: 62px;
        width: 290px;
        padding: 8px;
        background-color: rgba(255,255,255,.97);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border: 1px solid var(--line);
        border-radius: 0;
        box-shadow: var(--shadow-menu);
        transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility 0s linear .26s;
    }

    nav li:hover > .sub-menu,
    nav li:focus-within > .sub-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }

    nav .sub-menu li {
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .24s ease, transform .24s ease;
    }

    nav li:hover > .sub-menu li,
    nav li:focus-within > .sub-menu li {
        opacity: 1;
        transform: none;
    }

    nav li:hover > .sub-menu li:nth-child(2), nav li:focus-within > .sub-menu li:nth-child(2) { transition-delay: .03s; }
    nav li:hover > .sub-menu li:nth-child(3), nav li:focus-within > .sub-menu li:nth-child(3) { transition-delay: .06s; }
    nav li:hover > .sub-menu li:nth-child(4), nav li:focus-within > .sub-menu li:nth-child(4) { transition-delay: .09s; }
    nav li:hover > .sub-menu li:nth-child(5), nav li:focus-within > .sub-menu li:nth-child(5) { transition-delay: .12s; }
    nav li:hover > .sub-menu li:nth-child(6), nav li:focus-within > .sub-menu li:nth-child(6) { transition-delay: .15s; }
    nav li:hover > .sub-menu li:nth-child(7), nav li:focus-within > .sub-menu li:nth-child(7) { transition-delay: .18s; }
    nav li:hover > .sub-menu li:nth-child(n+8), nav li:focus-within > .sub-menu li:nth-child(n+8) { transition-delay: .21s; }

    nav .sub-menu li a {
        position: relative;
        display: flex;
        align-items: center;
        padding: 10px 14px 10px 16px;
        border-radius: 6px;
        color: var(--text-body);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        transition: background-color .18s ease, color .18s ease, padding-left .22s ease;
    }

    nav .sub-menu li a:before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 2px;
        background: var(--ink);
        transform: scaleY(0);
        transition: transform .22s ease;
    }

    nav .sub-menu li a:after {
        content: '\2192';
        margin-left: auto;
        padding-left: 12px;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity .2s ease, transform .22s ease;
    }

    nav .sub-menu li a:hover,
    nav .sub-menu li a:focus-visible {
        background-color: #f0f2f4;
        color: var(--ink);
        padding-left: 22px;
    }

    nav .sub-menu li a:hover:before,
    nav .sub-menu li a:focus-visible:before,
    nav .sub-menu li a.active:before { transform: scaleY(1); }

    nav .sub-menu li a:hover:after,
    nav .sub-menu li a:focus-visible:after {
        opacity: .6;
        transform: none;
    }

    /* The page you're on, as the ERP marks its active link: tinted, bar on, a little bolder. */
    nav .sub-menu li a.active {
        background-color: #eceef0;
        color: var(--ink);
        font-weight: 500;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav .sub-menu,
    nav .sub-menu li,
    nav .sub-menu li a,
    nav .sub-menu li a:before,
    nav .sub-menu li a:after,
    nav .arrow { transition: none !important; }
}

/* Narrow desktops: the 12.5px menu nearly meets the logo at 1101px, so the links pull in. */
@media screen and (min-width: 1101px) and (max-width: 1250px) {
    nav ul .parent_li { margin-left: 2px; }
    nav ul .parent_li .parent_a { padding: 0 9px; }
    nav ul li.parent_li:last-child { margin-left: 10px; padding-left: 14px; }
}

/* Mobile: no top strip, so the header sits at the very top; the open menu is frosted white. */
@media screen and (max-width: 1100px) {
    .masthead,
    body.has-hero.scrolled .masthead { top: 0; }

    header { height: 60px; }
    header .mobile_contain { height: 60px; }
    header .logo-on-light { height: 30px; }
    header .logo-on-dark { height: 42px; margin: -6px 0; }

    #nav-toggle span,
    #nav-toggle span:before,
    #nav-toggle span:after,
    #nav-toggle.active span:before,
    #nav-toggle.active span:after {
        height: 2px;
        background: var(--ink);
    }

    #nav-toggle.active span { background-color: transparent; }

    body.has-hero:not(.scrolled) #nav-toggle span,
    body.has-hero:not(.scrolled) #nav-toggle span:before,
    body.has-hero:not(.scrolled) #nav-toggle span:after { background: #fff; }

    body.has-hero:not(.scrolled) #nav-toggle.active span { background: transparent; }

    /* Menu open over a banner: the header goes solid so the menu below it reads as one panel. */
    body.has-hero:not(.scrolled) header:has(#nav-toggle.active) {
        background-color: rgba(255,255,255,.97);
        border-bottom-color: var(--line);
    }

    body.has-hero:not(.scrolled) header:has(#nav-toggle.active) .logo-on-light { display: block; }
    body.has-hero:not(.scrolled) header:has(#nav-toggle.active) .logo-on-dark { display: none; }

    body.has-hero:not(.scrolled) header:has(#nav-toggle.active) #nav-toggle span:before,
    body.has-hero:not(.scrolled) header:has(#nav-toggle.active) #nav-toggle span:after { background: var(--ink); }

    nav.showing {
        background-color: rgba(255,255,255,.97);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 12px 24px rgba(0,0,0,.08);
    }

    nav ul { background-color: transparent; }

    nav ul .parent_li .parent_a {
        color: var(--ink);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--line);
    }

    nav .arrow { border-color: var(--text-dim); border-width: 0 1.5px 1.5px 0; }

    nav .sub-menu { background-color: var(--bg); }

    nav .sub-menu li a {
        color: var(--text);
        font-size: 15px;
        border-bottom: 1px solid var(--line);
    }

    nav .sub-menu li a:hover { color: var(--ink); }

    /* Phone menu: the ERP's guide line beside an open group, and the current page barred. */
    nav .sub-menu.showing {
        box-shadow: inset 2px 0 0 var(--line);
    }

    nav .sub-menu li a.active {
        color: var(--ink);
        font-weight: 500;
        box-shadow: inset 3px 0 0 var(--ink);
    }
}

/* ── Banners ──────────────────────────────────────────────────────────── */
/* Photo banner with the page title: full height, shaded at the foot, the title large and light. */
.page_banner {
    height: 86vh;
    min-height: 480px;
    background-color: #1e2226;
}

.page_banner:before {
    background: linear-gradient(0deg, rgba(10,12,14,.72) 0%, rgba(10,12,14,.15) 55%, rgba(10,12,14,0) 100%);
}

.page_banner #page_title {
    max-width: 900px;
    margin-bottom: 9vh;
    padding-left: 0;
    border-left: none;
    font-size: 64px;
    font-weight: 300;
    line-height: 108%;
    letter-spacing: -.02em;
    color: #fff;
}

/* Product pages: the photo or video runs full width behind the text instead of beside a
   navy panel, with a shade from the left for the type. */
@media screen and (min-width: 901px) {
    .new-banner {
        position: relative;
        height: 92vh;
        min-height: 560px;
        background-color: #1e2226;
        overflow: hidden;
    }

    .new-banner .new-image,
    .new-banner .new-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
    }

    .new-banner .new-video video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
    }

    .new-banner:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: linear-gradient(90deg, rgba(10,12,14,.78) 0%, rgba(10,12,14,.45) 45%, rgba(10,12,14,.05) 80%);
        pointer-events: none;
    }

    .new-banner .new-text {
        position: relative;
        z-index: 2;
        width: 44%;
        max-width: 640px;
        padding: 80px 5% 0;
        justify-content: flex-start;
    }
}

.new-banner .new-text h1 {
    padding-top: 0;
    font-size: 58px;
    font-weight: 300;
    line-height: 106%;
    letter-spacing: -.02em;
}

.new-banner .new-text h1:before { display: none; }

.new-banner .new-text p {
    margin-top: 24px;
    font-size: 16px;
    line-height: 170%;
    color: rgba(255,255,255,.78);
}

/* Banner buttons: outlined white, filled on hover. */
.new-banner .new-text a,
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: 46px;
    line-height: 46px;
    margin-top: 36px;
    padding: 0 26px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.new-banner .new-text a:hover,
.hero-link:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--ink);
}

.new-banner .new-text a:after,
.hero-link:after { content: '\2192'; font-size: 14px; letter-spacing: 0; }

@media screen and (max-width: 900px) {
    .new-banner .new-text { padding-top: 140px; }
    .new-banner .new-text h1 { font-size: 40px; }
}

.banner-flex {
    position: relative;
    height: 86vh;
    min-height: 480px;
}

.banner-flex:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(10,12,14,.70) 0%, rgba(10,12,14,.1) 55%, rgba(10,12,14,.25) 100%);
    pointer-events: none;
}

.banner-flex h1 {
    z-index: 2;
    margin-bottom: 4vh;
    padding-left: 0;
    border-left: none;
    font-size: 64px;
    font-weight: 300;
    line-height: 108%;
    letter-spacing: -.02em;
}

/* News page banner. */
.latest_news_banner { min-height: 520px; }

.latest_news_banner h1 {
    font-size: 64px;
    font-weight: 300;
    letter-spacing: -.02em;
}

.latest_news_banner p {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}

/* ── Home: the video fills the screen with the headline over it ──────── */
.video {
    position: relative;
    height: 100vh;
    min-height: 560px;
    background-color: #1e2226;
}

.video video {
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: cover;
}

.video:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(10,12,14,.70) 0%, rgba(10,12,14,.15) 60%, rgba(10,12,14,0) 100%);
    pointer-events: none;
}

/* The video carries its own titles, so only a hairline bar sits at its foot. */
.hero-bar {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 84px;
    border-top: 1px solid rgba(255,255,255,.28);
}

.hero-bar .eyebrow {
    margin: 0;
    color: rgba(255,255,255,.75);
}

.hero-bar .hero-link {
    height: auto;
    line-height: normal;
    margin: 0;
    padding: 0;
    border: none;
    color: #fff;
}

.hero-bar .hero-link:after { content: '\2193'; transition: transform .2s ease; }

.hero-bar .hero-link:hover {
    background: none;
    color: #fff;
}

.hero-bar .hero-link:hover:after { transform: translateY(3px); }

html { scroll-behavior: smooth; }

#solutions { scroll-margin-top: 72px; }

@media screen and (max-width: 1400px) {
    .video { height: 100vh; }
}

/* Small screens: the whole video, uncropped, so its titles stay readable; no bar. */
@media screen and (max-width: 900px) {
    .video { height: auto; min-height: 0; padding-top: 60px; }
    .video video { height: auto; object-fit: initial; }
    .video:after { display: none; }
    .hero-bar { display: none; }
}

/* Partnership intro: white, the photo flat, a text link in place of the button. */
.partnership,
.partnership .picture {
    background: #fff;
}

.partnership .picture img {
    border-radius: 0;
    box-shadow: none;
}

.partnership .text .text-container h1 {
    margin-bottom: 24px;
    font-size: 44px;
    font-weight: 300;
    line-height: 112%;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* Text links: spaced capitals over a hairline, an arrow that moves on hover. */
.partnership .text .learn,
.solutions a,
.component-content div a,
.link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    line-height: normal;
    margin-top: 32px;
    padding: 0 0 8px;
    border: none;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.partnership .text .learn:after,
.component-content div a:after { content: '\2192'; font-size: 14px; letter-spacing: 0; transition: transform .2s ease; }

.partnership .text .learn:hover,
.solutions a:hover,
.component-content div a:hover,
.link:hover {
    background: none;
    border: none;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
}

.partnership .text .learn:hover:after,
.component-content div a:hover:after { transform: translateX(4px); }

/* The site's chevron arrows inside those links become thin lines in the text colour. */
.solutions .link-arrow,
.solutions a:hover .link-arrow,
.link .news-arrow,
.link:hover .news-arrow {
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    padding: 2.5px;
    margin-left: 2px;
}

/* Solutions: the pale grey band, headings to the left, borderless cards. */
.solutions {
    padding: 110px 5% 120px;
    background: var(--bg);
    border-top: none;
}

.solutions .eyebrow,
.solutions h1,
.solutions .top-p { text-align: left; }

.solutions h1 {
    font-size: 44px;
    font-weight: 300;
    letter-spacing: -.02em;
    color: var(--ink);
}

.solutions h1:after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 22px;
    background: var(--ink);
}

.solutions .top-p { margin-top: 18px; color: var(--text-body); }

.solutions .boxes { margin-top: 56px; }

.solutions .boxes div {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    padding-bottom: 0;
}

.solutions .boxes div:hover { box-shadow: none; }

.solutions .boxes div img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity .3s ease;
}

.solutions .boxes div:hover img { opacity: .88; }

.solutions h2,
.solutions p,
.solutions a { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

.solutions h2 {
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}

.solutions p {
    font-size: 14.5px;
    color: var(--text-body);
    min-height: 72px;
}

.solutions a { margin-top: 18px; }

@media screen and (max-width: 950px) {
    .solutions .eyebrow,
    .solutions h1,
    .solutions .top-p,
    .solutions h2,
    .solutions p { text-align: left; }

    .solutions a { display: inline-flex; margin: 10px 0 0; width: auto; }
}

/* ── Content sections ─────────────────────────────────────────────────── */
.intro-content h2:before,
.page-content h2:before {
    width: 28px;
    border-top-width: 2px;
}

.intro-content {
    background-color: #fff;
    border-bottom: 1px solid var(--line);
}

.intro-content .right-contain img,
.intro-content .right-contain img:hover { box-shadow: none; }

.two-column h2,
.page-features h2,
.page-content h2,
.intro-content h2 {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -.02em;
}

.two-column p { color: var(--text-body); }

/* Two-column sections on one grid: text and photo share the page's 5% gutters on both sides,
   the photo fills its half to the edge of the gutter, the text sits centred beside it. Before,
   style.css's 40% + 5% padding columns left the photo hanging off a different edge each row. */
@media screen and (min-width: 1101px) {
    .two-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 6vw;
        align-items: center;
        padding: 56px 5%;
    }

    .two-column div,
    .two-column .tc-text,
    .two-column .tc-image {
        width: auto;
        margin: 0;
        padding: 0;
        border: none;
    }

    .two-column .tc-image {
        align-self: stretch;
        min-height: 480px;
        box-shadow: none;
    }

    .two-column .tc-text > h2:first-child { margin-top: 0; }
}

/* Narrow screens: one column, each section's photo above its text (style.css hid the photos
   and left 50px white borders that read as gaps). */
@media screen and (max-width: 1100px) {
    .two-column {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;   /* style.css's wrap sized the column to its widest table */
        align-items: stretch;
        padding: 40px 5% 8px;
    }

    .two-column div,
    .two-column .tc-text,
    .two-column .tc-image {
        width: auto;
        margin: 0;
        padding: 0;
        border: none;
    }

    .two-column .tc-image {
        display: block;
        order: -1;
        height: 56vw;
        min-height: 0;
        max-height: 420px;
        margin-bottom: 28px;
        box-shadow: none;
    }
}

.two-column .tc-text-alt { background-color: var(--bg); }
.two-column .tc-text-alt h2 { color: var(--ink); }
.two-column .tc-text-alt p { color: var(--text-body); }

/* Bullet lists (benefits, features): zebra rows with a charcoal check badge on each, framed
   top and bottom by a hairline. */
.two-column ul,
.page-features ul {
    background: transparent;
    border: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.two-column li,
.page-features li,
.two-column li:nth-child(even),
.page-features li:nth-child(even),
.page-features li:nth-child(odd),
.two-column li:last-child,
.page-features li:last-child {
    padding: 14px 18px 14px 52px;
    background: transparent;
    color: var(--text);
    border-bottom: none;
}

.two-column li:nth-child(odd),
.page-features li:nth-child(odd) { background-color: #f5f6f7; }

.two-column ul { margin-bottom: 0; }

.two-column li:before,
.page-features li:before {
    left: 18px;
    top: 15px;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231e2226'/%3E%3Cpath d='M6 10.3l2.6 2.6 5.6-5.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

/* Tables: no frame, hairline rows, a grey heading row in spaced capitals. */
.two-column table,
.page-features table,
table.prod-table {
    border: none;
    border-top: 1px solid var(--ink);
}

.two-column table th,
.page-features table th,
table.prod-table th {
    background-color: transparent;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    border-bottom: 1px solid var(--line);
}

/* Zebra rows to match the check lists (the heading row, if it sits in the same tbody, is row 1). */
.two-column table tr:nth-child(odd) td,
.page-features table tr:nth-child(odd) td { background-color: transparent; }

.two-column table tr:nth-child(even) td,
.page-features table tr:nth-child(even) td { background-color: #f5f6f7; }

.two-column table td,
.page-features table td { border-top: none; }

.two-column table tr:hover td,
.page-features table tr:hover td { background-color: #eceef0; }

.two-column table,
.page-features table { border-bottom: 1px solid var(--line); }

/* Range bars (js/range-bars.js), after the 2026 brochures' spec tables: a thin track under
   each range with the brochure's blue bar for tube size, its sky blue for wall / strip width,
   and the column's 0″–max scale under the heading. The only colour on the page besides photos. */
.range-table td.has-range { min-width: 150px; }

.range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dim);
}

.range-bar {
    position: relative;
    display: block;
    height: 6px;
    margin-top: 7px;
    border-radius: 3px;
    background: #e3e9ee;
}

.range-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 6px;
    border-radius: 3px;
    background: #1868a8;
}

.range-bar.range-alt i { background: #8db9de; }

/* Grid and flex columns otherwise grow to fit a wide table instead of letting it scroll. */
.two-column > div { min-width: 0; }

/* Phones: tighter cells, and a table still wider than the screen scrolls inside itself
   instead of pushing the whole page sideways. */
@media screen and (max-width: 700px) {
    table.range-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .range-table td.has-range { min-width: 120px; }

    .range-table th,
    .range-table td { padding: 10px 10px; font-size: 13px; }

    .range-table th { font-size: 10px; }
}

/* Component jump menu and component cards. */
.link-menu a {
    border-color: var(--border);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.link-menu a:hover,
.tig-link-li:hover > .tig-link-a {
    background-color: var(--bg);
    border-color: var(--ink);
}

.link-menu ul ul li a { letter-spacing: 0; text-transform: none; }

.component-content { background-color: var(--bg); }

.component-content div {
    background-color: transparent;
    border: none;
    padding-bottom: 8px;
}

.component-content div h3,
.component-content div p,
.component-content div a { padding-left: 0; padding-right: 0; }

.component-content div a { margin-top: 6px; margin-left: 0; }

.component-content div h3 { font-weight: 500; }

/* Galleries: square photos, a gentler hover. */
.our-work,
.page-images { background-color: #fff; }

.our-work a:hover img,
.page-images a:hover img { transform: scale(1.02); }

/* ── Buttons elsewhere: outlined charcoal, filled on hover ─────────────── */
.latest_news_button,
.booth-button {
    background-color: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.latest_news_button:hover,
.booth-button:hover {
    background-color: var(--ink);
    border: 1px solid var(--ink);
    color: #fff;
}

.news-list { border: none; border-top: 1px solid var(--line); }

/* News page filter: underlined tabs instead of a segmented box. */
.buttons { border: none; border-bottom: 1px solid var(--line); }

.buttons button,
.buttons button:hover,
.buttons .active,
.buttons .active:hover {
    border: none;
    background-color: transparent;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.buttons button { color: var(--text-dim); }
.buttons button:hover { color: var(--ink); background-color: transparent; }

.buttons .active,
.buttons .active:hover {
    color: var(--ink);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--ink);
}

/* ── Latest news ──────────────────────────────────────────────────────── */
#news { background-color: #fff; }

.title {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -.02em;
}

.story {
    background-color: transparent;
    border: none;
}

.story .image { margin-bottom: 20px; }

.story h1,
.story .date,
.story .desc,
.story > a,
.story .link { padding-left: 0; padding-right: 0; }

.story h1 { font-weight: 500; }

.story .date { font-weight: 400; letter-spacing: .14em; }

.story .link { margin-top: 18px; }

/* ── A news story (news/article.php → news/lib/render.php) ────────────────
   The page banner already carries the photo and the title, so the story below is a reading
   column: a back link, the date and category in spaced capitals over a hairline, the text at
   a comfortable measure, then the photos in a wider grid and the standard closing block. */

/* style.css gives this empty band 300px on smaller screens; the page banner is the hero now. */
.news-banner { display: none; }

.news-story {
    box-sizing: border-box;
    width: auto;
    max-width: 808px;
    margin: 0 auto;
    padding: 72px 24px 0;
}

.news-back {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
    color: var(--text-dim);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: color .2s ease;
}

.news-back:before { content: '\2190'; font-size: 14px; letter-spacing: 0; transition: transform .2s ease; }
.news-back:hover { color: var(--ink); }
.news-back:hover:before { transform: translateX(-4px); }

/* The title is the banner's h1; this repeat of it is only kept for older markup. */
.news-story #newstitle { display: none; }

.news-story .date,
.news-story .category {
    display: inline-block;
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.news-story .category:before {
    content: '\00b7';
    margin: 0 12px;
    color: #b0b5b9;
}

.news-story .date + p:not(.category),
.news-story .category + p {
    margin-top: 28px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

.news-story .news-text,
.news-story > p:not(.date):not(.category) {
    margin-bottom: 22px;
    font-size: 17px;
    font-weight: 400;
    line-height: 180%;
    color: var(--text-body);
}

/* The dateline ("Reedsburg, WI - ") and "Addison" in the closing block. */
.news-story .news-text span.bold,
.news-story .news-text span.bold-ame {
    font-size: inherit;
    font-weight: 500;
    color: var(--ink);
}

.news-story .news-link,
.news-story .news-text a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: #b0b5b9;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}

.news-story .news-link:hover,
.news-story .news-text a:hover { text-decoration-color: var(--ink); }

.news-story .booth-button,
.news-story .booth-button:hover { margin: 10px 0 24px; }

.news-story .youtube-contain {
    position: relative;
    margin: 36px 0;
    aspect-ratio: 16 / 9;
    background: var(--bg);
}

.news-story .youtube-contain iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Photos: wider than the text, a grid of 3:2 tiles that zoom a little and open the lightbox. */
.news-story .news-pictures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    position: relative;
    left: 50%;
    width: min(1200px, 90vw);
    margin: 48px 0;
    transform: translateX(-50%);
    background: none;
}

.news-story .news-pictures a {
    display: block;
    width: auto;   /* style.css (≤700px) sets 50%, which in the grid is half a cell */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg);
    cursor: zoom-in;
}

.news-story .news-pictures img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    background: none;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.news-story .news-pictures a:hover img { transform: scale(1.04); }

/* The standard closing block: a hairline, the product list as check rows, then call / email. */
.news-story .news-border {
    margin: 56px 0 40px;
    border-top: 1px solid var(--line);
}

.news-story .news-list {
    margin: 0 0 28px;
    padding: 0;
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.news-story .news-list li {
    position: relative;
    margin: 0;
    padding: 12px 18px 12px 48px;
    list-style: none;
    font-size: 15px;
    line-height: 150%;
    color: var(--text);
}

.news-story .news-list li:nth-child(odd) { background-color: #f5f6f7; }

.news-story .news-list li:before {
    content: '';
    position: absolute;
    left: 16px;
    top: 13px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%231e2226'/%3E%3Cpath d='M6 10.3l2.6 2.6 5.6-5.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}

.news-story .news-phone,
.news-story .news-email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 28px 0 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    background: none;
    width: auto;
    height: auto;
    text-align: left;
    color: var(--ink);
    font-size: 15px;
    line-height: 150%;
    cursor: pointer;
}

.news-story .news-phone:after,
.news-story .news-email:after { content: '\2192'; transition: transform .2s ease; }

.news-story .news-phone:hover,
.news-story .news-email:hover { color: var(--ink); text-decoration: none; }

.news-story .news-phone:hover:after,
.news-story .news-email:hover:after { transform: translateX(4px); }

.news-story br { display: none; }

.news-padding { height: 96px; }

@media screen and (max-width: 900px) {
    .news-story { width: auto; padding: 44px 5% 0; max-width: none; }

    .news-back { margin-bottom: 26px; }

    .news-story .news-text,
    .news-story > p:not(.date):not(.category) { font-size: 16px; }

    .news-story .category { display: block; margin-top: 6px; }
    .news-story .category:before { display: none; }

    .news-story .news-pictures { width: 90vw; grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* style.css (≤700px) makes these light-blue 75%-wide buttons; here they stack as links. */
    .news-story .news-phone,
    .news-story .news-email { display: flex; width: max-content; margin: 0 0 16px; }

    .news-padding { height: 64px; }
}

/* ── Call to action: a quiet, large line on white ─────────────────────── */
.cta {
    padding: 120px 5% 130px;
    background-color: var(--bg);
    border-top: none;
}

.cta h2 {
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -.02em;
}

.cta h4 { color: var(--text-body); }

/* ── Footer: charcoal ─────────────────────────────────────────────────── */
footer div h3 { color: #8b9196; font-weight: 500; letter-spacing: .16em; }
footer div:first-child h3 { color: #fff; font-weight: 500; }
footer div p { color: #b4b9bd; }
footer div:first-child { border-right-color: #3a3f44; }

footer div:nth-child(2) ul li a,
footer div:first-child a { color: #d6d9db; }

.bottom_footer {
    background-color: #1b1e21;
    border-top: 1px solid #33383c;
}

.bottom_footer p { color: #8b9196; }
.bottom_footer span { color: #b4b9bd; }
.bottom_footer a { color: #d6d9db; }

/* style.css (≤1100px) centres the page title with margin: 0 auto; keep it at the left like
   every other banner title. */
@media screen and (max-width: 1100px) {
    .page_banner #page_title {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    /* style.css pads it 150px/100px and sets height: auto here, which made tablets' banner
       taller than the screen. The phone sizes below take over at 900px. */
    .page_banner {
        box-sizing: border-box;
        height: 70vh;
        min-height: 420px;
        max-height: 640px;
        padding: 0 5%;
    }
}

/* ── Small screens: shorter heroes ───────────────────────────────────────
   Every banner type is about half the screen (340–460px) with its title at the foot, left.
   The product banner (.new-banner) shows only its text panel here, over the page photo that
   head.php sets on it; before, the panel's padding made it taller than the banner and it ran
   over the section below. */
@media screen and (max-width: 900px) {
    .page_banner,
    .banner-flex,
    .latest_news_banner {
        box-sizing: border-box;
        height: 52vh;
        min-height: 340px;
        max-height: 460px;
    }

    /* style.css (≤700px) and news/index.css pad these 150–250px, which was adding to the height. */
    .page_banner {
        box-sizing: border-box;
        padding: 0 5%;
    }

    .page_banner #page_title { margin: 0 0 36px; max-width: none; text-align: left; }

    .latest_news_banner {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 5% 36px;
        margin-bottom: 0;
    }

    .latest_news_banner h1,
    .latest_news_banner p {
        max-width: none;
        margin: 0;
        padding-top: 0;
        text-align: left;
    }

    .latest_news_banner p { margin-top: 12px; }

    .new-banner {
        height: auto;
        min-height: 0;
    }

    .new-banner .new-text {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;
        height: 52vh;
        min-height: 340px;
        max-height: 460px;
        padding: 0 5% 36px;
        box-shadow: none;
    }

    .new-banner .new-text:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(10,12,14,.72) 0%, rgba(10,12,14,.15) 60%, rgba(10,12,14,.35) 100%);
    }

    .new-banner .new-text .container { position: relative; }

    .new-banner .new-text h1 { text-align: left; }

    .banner-flex h1 { display: block; bottom: 36px; margin-bottom: 0; }
}

/* ── Small screens: headline sizes (last, so they win over the sizes above) ── */
@media screen and (max-width: 900px) {
    .page_banner #page_title,
    .banner-flex h1,
    .latest_news_banner h1 { font-size: 40px; }

    .partnership .text .text-container h1,
    .solutions h1,
    .cta h2,
    .title { font-size: 32px; }

    .two-column h2,
    .page-features h2,
    .page-content h2,
    .intro-content h2 { font-size: 28px; }
}