/* ==================================================================
   BRADLEY ADHESIVE APPLICATIONS, INC.
   Industrial design system — graphite, deep navy, safety amber.

   Direction: an adhesives technical datasheet. Monochrome structure,
   hairline rules, mono-spaced labels. Colour appears in exactly one
   place: a short amber tick that opens every rule on the page. That
   tick is the signature; everything else stays quiet.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
    /* Colour ------------------------------------------------------ */
    --ink: #0E1620;          /* graphite — primary text on light      */
    --navy: #16324E;         /* brand navy — buttons, links, bands    */
    --navy-deep: #0A1826;    /* deepest navy — footer and dark bands  */
    --steel: #5C6B7A;        /* secondary text, 5.4:1 on white        */
    --hazard: #E8A013;       /* safety amber — rules and focus only,
                                never used as text on a light ground  */
    --paper: #EFF1F3;        /* cool neutral surface                  */
    --line: #D3D8DD;         /* hairline on light                     */
    --line-dark: #24384C;    /* hairline on dark                      */
    --on-dark: #FFFFFF;
    --on-dark-muted: #A9B6C4;/* 8.6:1 on --navy-deep                  */
    --white: #fff;
    --black: var(--ink);
    --accent: var(--navy);
    --grey: #00000006;

    /* Type -------------------------------------------------------- */
    --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
    --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);
    --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
    --step-2:  clamp(1.4rem, 1.26rem + 0.66vw, 1.8rem);
    --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --step-4:  clamp(2.15rem, 1.7rem + 2.1vw, 3.5rem);

    /* Space ------------------------------------------------------- */
    --gap-xs: 8px;
    --gap-sm: 14px;
    --gap-md: 24px;
    --gap-lg: 40px;
    --gap-xl: clamp(56px, 7vw, 104px);

    --radius: 2px;
    --transition: 160ms cubic-bezier(0.2, 0, 0.1, 1);

    /* Legacy tokens kept so old declarations resolve to the new system */
    --extra-bg: var(--navy-deep);
    --reverse-bg: var(--navy-deep);
    --border-bottom: var(--line-dark);
}

*,
*::before,
*::after{
    box-sizing: border-box;
}

body{
    direction: ltr;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--white);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6{
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0 0 var(--gap-sm);
    text-wrap: balance;
}

h1{ font-size: var(--step-4); font-weight: 800; }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
h5, h6{ font-size: var(--step-0); }

p{ margin: 0 0 var(--gap-sm); }
p:last-child{ margin-bottom: 0; }

a{
    color: var(--navy);
    text-decoration: none;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

a:hover{
    color: var(--ink);
    text-decoration: underline;
}

/* One focus treatment for the whole site: amber ring, always visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
    border-radius: var(--radius);
}

::selection{
    background: var(--navy);
    color: var(--on-dark);
}

/* Keyboard users land here first. */
.skip-link{
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--hazard);
    color: var(--navy-deep);
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus{
    left: 0;
    color: var(--navy-deep);
    text-decoration: none;
}

/* ------------------------------------------------------------------
   Signature: the spec rule.
   A hairline that opens with a short amber tick. Used under every
   section heading and to separate footer columns.
   ------------------------------------------------------------------ */
.title,
.page-title,
.footer-heading,
.section-box-heading,
.section-wrap-heading,
.policy-heading{
    position: relative;
    padding-top: 18px;
    text-align: start;
}

.title::before,
.page-title::before,
.footer-heading::before,
.section-box-heading::before,
.section-wrap-heading::before,
.policy-heading::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
}

.title::after,
.page-title::after,
.footer-heading::after,
.section-box-heading::after,
.section-wrap-heading::after,
.policy-heading::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 3px;
    background: var(--hazard);
}

.title{
    color: var(--ink);
    font-size: var(--step-3);
    margin-bottom: var(--gap-lg);
}

.page-title{
    margin-bottom: var(--gap-md);
}

/* ------------------------------------------------------------------
   Sections and bands
   ------------------------------------------------------------------ */
.section{
    padding: var(--gap-xl) 0;
}

/* Dark bands. These carried a peach gradient before; they are now the
   navy half of the two-tone rhythm. */
.main,
.partners,
.workers,
.stat,
.comments,
.cp-form-section,
.header-bg{
    background: var(--navy-deep);
    color: var(--on-dark);
}

.main h1, .main h2, .main h3, .main h4,
.partners h2, .workers h2, .stat h2, .comments h2, .cp-form-section h2{
    color: var(--on-dark);
}

.main-title{
    color: var(--on-dark);
    filter: none;
    -webkit-filter: none;
}

.main .title::before,
.partners .title::before,
.workers .title::before,
.stat .title::before,
.comments .title::before,
.cp-form-section .title::before{
    background: var(--line-dark);
}

.au-section{
    background: var(--white);
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.header-bg{
    background: var(--navy-deep);
    color: var(--on-dark);
}

.contact-header{
    padding: 6px 0;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--font-mono);
}

.contact-header-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--gap-xs);
    height: 100%;
}

.ch-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.ch-icon > svg{
    color: var(--hazard);
    width: 15px;
    height: 15px;
}

.ch-text{
    font-size: var(--step--1);
    letter-spacing: 0.01em;
    color: var(--on-dark-muted);
    text-align: center;
}

a.ch-text:hover,
a.ch-text:focus-visible{
    color: var(--on-dark);
}

.navbar{
    padding: var(--gap-sm) 0;
    border-bottom: 1px solid var(--line-dark);
}

.header-logo{
    display: flex;
    flex-direction: row;
    gap: var(--gap-xs);
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.header-logo:hover{
    text-decoration: none;
}

.header-logo-img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.header-logo-img > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text{
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--on-dark);
    transition: color var(--transition);
    max-width: 22ch;
}

.header-logo:hover > .logo-text{
    color: var(--hazard);
}

.nav-link,
.drop-link{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.nav-link:hover,
.nav-item:hover .nav-link,
.dropdown-item:hover .drop-link,
.drop-link:hover{
    color: var(--on-dark);
    border-bottom-color: var(--hazard);
    text-decoration: none;
}

.dropdown-menu{
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    background: var(--navy-deep);
    padding: 6px 0;
}

.dropdown-item{
    padding: 0;
    background: transparent;
}

.dropdown-item:hover{
    background-color: transparent;
}

.dropdown-item .drop-link{
    display: block;
    border-bottom: none;
    border-left: 2px solid transparent;
    white-space: normal;
}

.dropdown-item:hover .drop-link{
    border-bottom: none;
    border-left-color: var(--hazard);
}

.navbar-toggler,
.of-btn{
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    outline: none;
    background-color: transparent;
    color: var(--on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    transition: border-color var(--transition), color var(--transition);
}

.navbar-toggler:hover,
.of-btn:hover{
    border-color: var(--hazard);
    color: var(--hazard);
}

/* Only while the menu is actually an offcanvas panel; from lg up Bootstrap
   renders it inline and must keep its own layout. */
@media (max-width: 991.98px){
    .offcanvas.offcanvas-top{
        height: auto;
        max-height: 90vh;
        background: var(--navy-deep);
        color: var(--on-dark);
        border-bottom: 1px solid var(--line-dark);
    }

    .offcanvas-body .navbar-nav{
        gap: 4px;
    }
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.hero{
    padding: var(--gap-xl) 0;
    background: var(--navy-deep);
    color: var(--on-dark);
}

.hero-content-box{
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    text-align: start;
    height: 100%;
    justify-content: center;
}

.hero-eyebrow{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hazard);
    margin: 0;
    padding-left: 56px;
    position: relative;
}

.hero-eyebrow::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 44px;
    height: 3px;
    background: var(--hazard);
}

.hero-title{
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--on-dark);
    margin: 0;
    max-width: 18ch;
}

.hero-subtitle{
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    margin: 0;
    max-width: 30ch;
}

.hero-text{
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--on-dark-muted);
    max-width: 62ch;
}

.hero-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-md);
    margin-top: var(--gap-xs);
}

.hero-phone{
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--on-dark);
    border-bottom: 2px solid var(--hazard);
    padding-bottom: 2px;
}

.hero-phone:hover{
    color: var(--hazard);
    text-decoration: none;
}

.hero-img{
    width: 100%;
    height: clamp(240px, 34vw, 420px);
    filter: none;
    -webkit-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    padding: var(--gap-md);
}

.hero-img > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The decorative wave dividers do not belong in this direction.
   The spec rule does the same job with a fraction of the noise. */
.wave,
.wavesHidden,
.main-wave,
.wave-partner,
.wave-finish-wr,
.wave-finish,
.page-wave-finish,
.stat-wave{
    display: none !important;
}

/* ------------------------------------------------------------------
   About / content blocks
   ------------------------------------------------------------------ */
.au-img-box{
    width: 100%;
    height: clamp(220px, 30vw, 420px);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.au-img-box > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.au-content-box{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-sm);
}

.au-text{
    text-align: start;
    color: var(--steel);
    max-width: 60ch;
}

.main-box{
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.main-img-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--gap-md);
}

.main-img,
.page-img-size{
    width: 100%;
    object-fit: cover;
    height: clamp(220px, 32vw, 430px);
    margin: 0 auto;
    border-radius: var(--radius);
}

.main-img{
    border: 1px solid var(--line-dark);
}

.page-img-size{
    border: 1px solid var(--line);
}

/* Long-form body copy. .main-description sits on the navy band,
   .page-content on the white article page. */
.main-description,
.page-content{
    max-width: 78ch;
    filter: none;
    -webkit-filter: none;
}

.main-description{
    color: var(--on-dark-muted);
}

.page-content{
    color: var(--steel);
}

.main-description h2,
.main-description h3,
.main-description h4,
.page-content h2,
.page-content h3,
.page-content h4{
    text-align: start !important;
    margin-top: var(--gap-lg);
}

.main-description h2,
.main-description h3,
.main-description h4,
.main-description strong{
    color: var(--on-dark);
}

.page-content h2,
.page-content h3,
.page-content h4,
.page-content strong{
    color: var(--ink);
}

.main-description strong,
.page-content strong{
    font-weight: 600;
}

.main-description ul,
.page-content ul{
    padding-left: 1.1em;
    margin-bottom: var(--gap-sm);
}

.main-description li,
.page-content li{
    margin-bottom: 6px;
}

.main-description li::marker,
.page-content li::marker{
    color: var(--hazard);
}

.price{
    font-family: var(--font-mono);
    font-size: var(--step-3);
    color: var(--on-dark);
    font-weight: 600;
    filter: none;
    -webkit-filter: none;
}

/* ------------------------------------------------------------------
   Cards: services, articles
   ------------------------------------------------------------------ */
.services-box-wr{
    box-shadow: none;
    padding: 0;
    border-radius: var(--radius);
    height: 100%;
}

.services-box{
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    padding: var(--gap-md);
    height: 100%;
    justify-content: flex-start;
    background: var(--white);
    transition: border-color var(--transition), transform var(--transition);
}

.services-box:hover{
    border-color: var(--navy);
    transform: translateY(-2px);
}

.services-img{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.services-img > svg{
    width: 40px;
    height: 40px;
    color: var(--navy);
    transition: color var(--transition);
}

.services-img > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: none;
}

.services-img:hover > img{
    box-shadow: none;
}

.services-content-title{
    font-family: var(--font-display);
    text-align: start;
    color: var(--ink);
    font-weight: 700;
    font-size: var(--step-1);
    margin-bottom: var(--gap-xs);
    transition: color var(--transition);
}

.services-content-title:hover{
    color: var(--navy);
}

.services-content{
    text-align: start;
    color: var(--steel);
}

.articles-item{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--gap-md);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    padding: var(--gap-md);
    height: 100%;
    background: var(--white);
    transition: border-color var(--transition);
}

.articles-item:hover{
    border-color: var(--navy);
}

.articles-content-box{
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.article-title{
    font-family: var(--font-display);
    text-align: start;
    color: var(--ink);
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.2;
    margin-bottom: var(--gap-xs);
    transition: color var(--transition);
}

.articles-title:hover .article-title{
    color: var(--navy);
}

.articles-img{
    width: 100%;
    height: clamp(180px, 22vw, 260px);
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.articles-img > img{
    transition: transform var(--transition);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.articles-img:hover > img{
    box-shadow: none;
    transform: scale(1.02);
}

.articles-content{
    text-align: start;
    color: var(--steel);
    margin-bottom: var(--gap-sm);
}

/* ------------------------------------------------------------------
   People, partners, gallery, figures
   ------------------------------------------------------------------ */
.workers-item{
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    align-items: flex-start;
}

.workers-img{
    width: 100%;
    height: clamp(220px, 24vw, 300px);
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line-dark);
}

.workers-img > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: filter var(--transition);
}

.workers-item:hover .workers-img > img{
    filter: grayscale(0);
}

.workers-name{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    color: var(--on-dark);
    text-align: start;
    filter: none;
    -webkit-filter: none;
}

.workers-job{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    text-align: start;
}

.partner-item{
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 96px;
    padding: var(--gap-md);
    background: transparent;
}

.partner-item > img{
    width: 100%;
    height: 100%;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(1) brightness(2.2);
    opacity: 0.8;
    transition: opacity var(--transition);
}

.partner-item:hover > img{
    opacity: 1;
}

.gallery-item{
    width: 100%;
    height: clamp(200px, 22vw, 280px);
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.gallery-item > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.gallery-item:hover > img{
    box-shadow: none;
    transform: scale(1.03);
}

/* Numbers read as instrument readouts, not marketing badges. */
.stat-box{
    height: 100%;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: var(--gap-xs);
    padding: var(--gap-md);
}

.stat-num{
    font-family: var(--font-mono);
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--hazard);
    filter: none;
    -webkit-filter: none;
}

.stat-called{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    filter: none;
    -webkit-filter: none;
}

.comment-box{
    height: 100%;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--gap-md);
}

.author-img{
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line-dark);
}

.author-img > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-name{
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--on-dark);
    filter: none;
    -webkit-filter: none;
}

.comment{
    text-align: start;
    color: var(--on-dark-muted);
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.button-1,
.button-2,
.button-3,
.button-4,
.button-5{
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    background-color: var(--navy);
    border: 1px solid var(--navy);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--on-dark);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    min-height: 46px;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: auto;
}

.button-1:hover,
.button-2:hover,
.button-3:hover,
.button-4:hover,
.button-5:hover{
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--on-dark);
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

.button-1:focus-visible{
    outline: 2px solid var(--hazard);
    outline-offset: 2px;
}

.button-1:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

/* On the navy bands the solid navy button would disappear. */
.main .button-1,
.partners .button-1,
.workers .button-1,
.stat .button-1,
.comments .button-1,
.cp-form-section .button-1,
.hero .button-1{
    background-color: var(--hazard);
    border-color: var(--hazard);
    color: var(--navy-deep);
}

.main .button-1:hover,
.partners .button-1:hover,
.workers .button-1:hover,
.stat .button-1:hover,
.comments .button-1:hover,
.cp-form-section .button-1:hover,
.hero .button-1:hover{
    background-color: var(--on-dark);
    border-color: var(--on-dark);
    color: var(--navy-deep);
}

/* ------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------ */
.form{
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    max-width: 720px;
}

.form-intro{
    color: var(--on-dark-muted);
    margin-bottom: 0;
}

.form-intro a{
    color: var(--hazard);
}

.contact-form-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

.contact-form-item > input,
.contact-form-item > textarea,
.input-inputelementblock,
.textarea-inputelementblock{
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--on-dark);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    transition: border-color var(--transition), background-color var(--transition);
}

.contact-form-item > input::placeholder,
.contact-form-item > textarea::placeholder{
    color: #7C8B9B;
}

.contact-form-item > input:hover,
.contact-form-item > textarea:hover{
    border-color: #3A5169;
}

.contact-form-item > input:focus,
.contact-form-item > textarea:focus{
    border-color: var(--hazard);
    background-color: rgba(255, 255, 255, 0.07);
    outline: 2px solid var(--hazard);
    outline-offset: 1px;
}

.contact-form-item > .is-invalid{
    border-color: #F08A6C;
}

.field-error{
    font-size: var(--step--1);
    color: #F5A98F;   /* 6.9:1 on the navy band */
    margin: 0;
}

.contact-form-check{
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    color: var(--on-dark-muted);
    font-size: var(--step--1);
}

.com-checkbox{
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 18px;
    accent-color: var(--hazard);
}

.contact-form-check a.privacy{
    color: var(--hazard);
}

.form-btn{
    display: flex;
    justify-content: flex-start;
}

.form-status{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--line-dark);
    background: rgba(255, 255, 255, 0.04);
    color: var(--on-dark-muted);
}

.form-status-success{
    border-left-color: #67C29A;
    color: #9BDCC0;
}

.form-status-error{
    border-left-color: #F08A6C;
    color: #F5A98F;
}

.form-status-pending{
    border-left-color: var(--hazard);
    color: var(--on-dark-muted);
}

/* ------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------ */
.main-block-cont{
    display: flex;
    flex-direction: row;
    gap: var(--gap-lg);
    align-items: stretch;
}

.main-block-cont-adrs,
.main-block-cont-karta{
    flex: 1;
    min-width: 0;
}

.contact-wr{
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    justify-content: flex-start;
    border-top: 1px solid var(--line);
}

.contact-item{
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(140px, 32%) 1fr;
    align-items: baseline;
    gap: var(--gap-sm);
    padding: var(--gap-sm) 0;
    width: 100%;
}

.contact-name{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
    text-align: start;
}

.contact-text,
.contact-item > a{
    text-align: start;
    color: var(--ink);
    font-weight: 500;
}

.map{
    height: 100%;
    width: 100%;
    min-height: 337px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.map > iframe{
    height: 100%;
    width: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.35) contrast(1.05);
}

/* ------------------------------------------------------------------
   Long-form legal and article pages
   ------------------------------------------------------------------ */
.poliarea-block,
.aboutarea-block{
    overflow: visible;
    max-width: 78ch;
    color: var(--steel);
}

.aboutarea-block p,
.poliarea-block p{
    margin-bottom: var(--gap-sm);
}

.section-box-heading,
.section-wrap-heading,
.policy-heading,
.privacy-policy-wrapper h2,
.agreement-container h2{
    font-size: var(--step-2);
    margin-top: var(--gap-lg);
    margin-bottom: var(--gap-sm);
}

.privacy-policy-wrapper,
.privacy-policy-container,
.agreement-container{
    max-width: 78ch;
    color: var(--steel);
}

.privacy-policy-wrapper h2:first-of-type,
.privacy-policy-container .policy-heading:first-of-type,
.agreement-container .section-box-heading:first-of-type{
    margin-top: 0;
}

.page-main-box{
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: var(--gap-lg);
}

.risk-disclaimer{
    max-width: 78ch;
    margin: 0 auto;
    color: var(--steel);
}

.risk-disclaimer-hero{
    padding: var(--gap-lg);
    margin-bottom: var(--gap-lg);
    border: 1px solid var(--line);
    border-left: 3px solid var(--hazard);
    border-radius: var(--radius);
    background: var(--paper);
}

.risk-kicker{
    margin-bottom: var(--gap-xs);
    font-family: var(--font-mono);
    color: var(--steel);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.risk-disclaimer h1{
    margin-bottom: var(--gap-sm);
    color: var(--ink);
    font-weight: 800;
}

.risk-disclaimer-body{
    display: grid;
    gap: var(--gap-md);
    padding: var(--gap-lg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    background-color: var(--white);
}

.risk-disclaimer-body p{
    margin: 0;
    line-height: 1.75;
}

.risk-disclaimer strong{
    color: var(--ink);
    font-weight: 600;
}

/* 404 */
.error-code{
    font-family: var(--font-mono);
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--steel);
    margin-bottom: var(--gap-xs);
}

.error-links{
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm) var(--gap-md);
}

.error-links a{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--hazard);
    padding-bottom: 2px;
}

.error-links a:hover{
    text-decoration: none;
    color: var(--ink);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.footer{
    background-color: var(--navy-deep);
    color: var(--on-dark-muted);
    position: relative;
    padding: var(--gap-xl) 0 var(--gap-lg);
    border-top: 3px solid var(--hazard);
}

.footer::after{
    content: none;
}

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

.footer-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
}

.footer-col{
    min-width: 0;
}

.footer-logo{
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

.footer-logo:hover{
    text-decoration: none;
}

.footer-logo-img{
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.footer-logo-img > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-logo-text{
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--on-dark);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
    transition: color var(--transition);
}

.footer-logo:hover .footer-logo-text{
    color: var(--hazard);
}

.footer-heading{
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-dark);
    margin-bottom: var(--gap-sm);
}

.footer-heading::before{
    background: var(--line-dark);
}

.footer-heading-gap{
    margin-top: var(--gap-md);
}

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

.footer-address a{
    font-family: var(--font-mono);
    color: var(--on-dark);
    border-bottom: 1px solid var(--hazard);
}

.footer-address a:hover{
    color: var(--hazard);
    text-decoration: none;
}

.footer-line{
    margin: 0 0 4px;
    line-height: 1.7;
}

.footer-privacy-wr{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-privacy > a{
    color: var(--on-dark-muted);
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.footer-privacy > a:hover{
    color: var(--on-dark);
    border-bottom-color: var(--hazard);
    text-decoration: none;
}

.footer-legal{
    margin: var(--gap-lg) 0 0;
    padding-top: var(--gap-md);
    border-top: 1px solid var(--line-dark);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    color: var(--on-dark-muted);
}

.footer-legal a{
    color: var(--on-dark);
}

/* ------------------------------------------------------------------
   Cookie consent (overrides cookie.min.css)
   ------------------------------------------------------------------ */
.privacy-popup{
    background: var(--navy-deep) !important;
    color: var(--on-dark-muted) !important;
    border: 1px solid var(--line-dark) !important;
    border-top: 3px solid var(--hazard) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-body) !important;
}

.privacy-popup a{
    color: var(--hazard) !important;
}

.privacy-popup .accept-btn,
.privacy-popup .decline-btn{
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: var(--radius) !important;
}

.privacy-popup .accept-btn{
    background: var(--hazard) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--hazard) !important;
}

.privacy-popup .decline-btn{
    background: transparent !important;
    color: var(--on-dark-muted) !important;
    border: 1px solid var(--line-dark) !important;
}

/* ------------------------------------------------------------------
   Layout direction resets.
   Bootstrap rows in this template were reversed to fake a layout; the
   grid now reads in source order at every breakpoint.
   ------------------------------------------------------------------ */
/* Only the Bootstrap rows that were reversed in the original template are
   reset here. Component flex directions are declared with their component
   above and must not be overridden from this block. */
.row-box-md,
.row-box-lg,
.row-articles{
    flex-direction: row;
}

/* ------------------------------------------------------------------
   Responsive: 360px → 1920px
   ------------------------------------------------------------------ */
@media (max-width: 991px){
    .drop-link{
        white-space: break-spaces;
    }

    .row-articles,
    .articles-item{
        flex-direction: column !important;
    }

    .row-articles > .col-12{
        width: 100% !important;
    }

    .main-block-cont{
        flex-direction: column !important;
    }

    .contact-item{
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .hero-title{
        max-width: none;
    }
}

@media (max-width: 767px){
    .contact-header-box{
        justify-content: flex-start;
    }

    .ch-text{
        text-align: start;
    }

    .hero-actions{
        gap: var(--gap-sm);
    }

    .hero-actions .button-1{
        width: 100%;
    }
}

@media (max-width: 420px){
    .main-img,
    .page-img-size{
        height: clamp(180px, 52vw, 240px);
    }

    .hero-eyebrow{
        padding-left: 0;
    }

    .hero-eyebrow::before{
        display: none;
    }
}

@media (min-width: 768px){
    .footer-row{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px){
    .form{
        width: 100%;
    }

    .main-box{
        flex-direction: row;
    }

    .footer-row{
        grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
        gap: var(--gap-lg);
    }
}

@media (min-width: 1400px){
    .container{
        max-width: 1280px;
    }
}

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

    .articles-img:hover > img,
    .gallery-item:hover > img,
    .services-box:hover{
        transform: none;
    }
}