/* =========================================================================
   WINNER WORLD TRADE LTD — design system

   Grounded in the actual subject matter — shipping manifests, customs
   stamps, trade routes — rather than generic business-site defaults.
   One signature visual (the hub-and-spoke network in the hero) carries
   the design's personality; everything else is disciplined: flat bordered
   labels instead of shadowed cards, one arrow motif used once, a
   monospace reserved strictly for actual reference data.
   ========================================================================= */

:root {
    --ink:          #0a1a2f;
    --ink-deep:     #061121;
    --brass:        #ad8a3d;
    --brass-light:  #d9be7e;
    --signal:       #b23a2e;
    --signal-dark:  #8f2d23;
    --paper:        #f1f3f6;
    --paper-2:      #e6eaef;
    --line:         #d9dfe6;
    --line-dark:    rgba(255,255,255,0.14);
    --ink-faded:    #55637c;
    --white:        #ffffff;
    --accent:       #b23a2e; /* overridden per service page */
    --accent-soft:  rgba(178, 58, 46, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    color: var(--ink-faded);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif; color: var(--ink); }

.mono, .site-footer-reg, .map-address-line {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }
::selection { background: var(--brass-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 12px 20px;
    z-index: 1000; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   SITE HEADER / NAV
   ========================================================================= */

.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.site-header-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.site-header-logo { width: 48px; height: 48px; border-radius: 4px; }
.site-header-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.site-header-tagline { font-size: 0.74rem; font-weight: 500; margin: 2px 0 0; color: var(--ink-faded); }
.site-header-tagline .global-reach { color: var(--ink-faded); }
.site-header-tagline .stronger-together { color: var(--signal); margin-left: 4px; }

.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; background: none; border: 1px solid var(--line); cursor: pointer; flex-shrink: 0;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li { position: relative; }
.site-nav > ul > li > a {
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px;
    font-size: 0.86rem; font-weight: 500; color: var(--ink-faded); text-decoration: none;
    border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav > ul > li > a:hover, .site-nav > ul > li > a.is-active { color: var(--ink); border-bottom-color: var(--signal); }
.dropdown-caret { width: 12px; height: 12px; }

.has-dropdown .dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; background: var(--white);
    border: 1px solid var(--line); min-width: 230px; padding: 6px; list-style: none; margin: 4px 0 0; z-index: 60;
}
.has-dropdown:hover .dropdown-menu, .has-dropdown.is-open .dropdown-menu { display: block; }
.dropdown-menu li a { display: block; padding: 9px 12px; font-size: 0.84rem; font-weight: 500; color: var(--ink-faded); text-decoration: none; }
.dropdown-menu li a:hover { color: var(--signal); background: var(--paper); }

.nav-cta { background: var(--ink) !important; color: #fff !important; border-radius: 2px !important; padding: 9px 18px !important; margin-left: 8px; border-bottom: none !important; }
.nav-cta:hover { background: var(--signal) !important; }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); }
    .site-nav.is-open { display: block; }
    .site-nav > ul { flex-direction: column; align-items: stretch; padding: 8px 20px 18px; }
    .site-nav > ul > li > a { width: 100%; border-bottom: none; border-left: 2px solid transparent; padding: 11px 10px; }
    .site-nav > ul > li > a.is-active, .site-nav > ul > li > a:hover { border-left-color: var(--signal); border-bottom: none; }
    .has-dropdown .dropdown-menu { display: none; position: static; border: none; padding: 0 0 0 16px; }
    .has-dropdown.is-open .dropdown-menu { display: block; }
    .nav-cta-item { margin-top: 10px; }
    .nav-cta { display: block; text-align: center; margin-left: 0; }
}
@media (max-width: 600px) {
    .site-header-logo { width: 130px; height: 130px; }
    .site-header-name { font-size: 1.02rem; }
    .site-header-tagline { font-size: 0.72rem; }
}
@media (max-width: 400px) {
    .site-header-row { gap: 10px; }
    .site-header-brand { gap: 10px; }
    .site-header-logo { width: 150px; height: 150px; }
    .site-header-name { font-size: 0.9rem; }
    .site-header-tagline { font-size: 0.66rem; }
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */

.breadcrumb { display: flex; align-items: center; gap: 8px; padding: 20px 0 0; font-size: 0.8rem; color: var(--ink-faded); }
.breadcrumb a { color: var(--ink-faded); text-decoration: none; }
.breadcrumb a:hover { color: var(--signal); }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }

/* =========================================================================
   HERO — hub-and-spoke network diagram behind rotating left-aligned copy.
   Winner World Trade is the hub; the spokes are the routes. This is the
   one signature visual the whole design spends its boldness on.
   ========================================================================= */

.hero-slider {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 100%);
    isolation: isolate;
}
@media (max-width: 780px) { .hero-slider { min-height: 560px; } }

.hero-slider::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 32px);
    pointer-events: none;
    z-index: 1;
}

/* the hub-and-spoke graphic sits once, persistently, behind all slides */
.hero-route {
    position: absolute;
    top: 0; right: -4%;
    width: 68%; height: 100%;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
}
@media (max-width: 780px) { .hero-route { width: 100%; right: 0; opacity: 0.35; } }

.hero-route .spoke { stroke: rgba(217, 190, 126, 0.45); stroke-width: 1.3; fill: none; stroke-dasharray: 5 7; animation: hero-route-move 5s linear infinite; }
.hero-route .node { fill: var(--brass-light); }
.hero-route .node-hub { fill: var(--brass-light); animation: hero-hub-pulse 2.6s ease-in-out infinite; }
.hero-route text { font-family: 'IBM Plex Mono', monospace; font-size: 11px; fill: rgba(217, 190, 126, 0.65); letter-spacing: 0.5px; }

@keyframes hero-route-move { to { stroke-dashoffset: -120; } }
@keyframes hero-hub-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; r: 9; } }

.hero-slide {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.7s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 3; }

.hero-slide-content { position: relative; z-index: 4; max-width: 560px; color: #fff; padding: 40px 0; text-align: left; }

.hero-eyebrow {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem; font-weight: 500;
    color: var(--brass-light);
    margin-bottom: 16px;
    padding-left: 14px;
    border-left: 2px solid var(--brass);
}

.hero-slide h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.14; color: #fff; margin: 0 0 16px; letter-spacing: -0.5px; }
.hero-slide p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.7); margin: 0 0 28px; max-width: 440px; }

.hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: #fff; font-weight: 600; font-size: 0.9rem;
    padding: 13px 4px; border: none; border-bottom: 1px solid var(--brass);
    text-decoration: none; transition: gap 0.2s ease, color 0.2s ease;
}
.hero-cta:hover { gap: 16px; color: var(--brass-light); }
.hero-cta::after { content: '→'; }

.hero-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 38px; height: 38px; background: transparent; border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-nav-btn:hover { border-color: var(--brass); color: var(--brass-light); }
.hero-nav-prev { left: 18px; }
.hero-nav-next { right: 18px; }

.hero-dots { position: absolute; bottom: 24px; left: 24px; z-index: 5; display: flex; gap: 8px; }
@media (min-width: 640px) { .hero-dots { left: calc(50% - 570px + 24px); } }
.hero-dot { width: 20px; height: 2px; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.25s ease; border: none; padding: 0; }
.hero-dot.is-active { background: var(--brass); }

/* =========================================================================
   MANIFEST BAR
   ========================================================================= */

.trust-strip { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.trust-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; font-weight: 500; color: var(--ink-faded);
    padding: 14px 20px 14px 0; margin-right: 20px; border-right: 1px solid var(--line);
}
.trust-pill:last-child { border-right: none; margin-right: 0; }
.trust-dot { width: 5px; height: 5px; background: var(--signal); flex-shrink: 0; }
@media (max-width: 640px) { .trust-pill { font-size: 0.7rem; padding: 10px 12px 10px 0; margin-right: 12px; } }

/* =========================================================================
   SECTION LABELS
   ========================================================================= */

.section-label {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--ink);
    margin: 56px 0 24px; font-size: 1.3rem; display: flex; align-items: center; gap: 12px;
}
.section-label::before { content: ''; width: 20px; height: 2px; background: var(--signal); }
.section-label-centered { justify-content: center; text-align: center; }
.section-label-centered::before { display: none; }

.hero-divider {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-faded);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

/* =========================================================================
   WHY CHOOSE US
   ========================================================================= */

.why-us-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-us-grid { grid-template-columns: 1fr; } }

.why-us-card { text-align: left; padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
.why-us-grid > .why-us-card:nth-child(4n) { border-right: none; }
@media (max-width: 900px) {
    .why-us-grid > .why-us-card:nth-child(2n) { border-right: none; }
    .why-us-grid > .why-us-card:nth-child(odd) { padding-right: 24px; }
}
@media (max-width: 560px) {
    .why-us-card { border-right: none; border-bottom: 1px solid var(--line); }
    .why-us-grid > .why-us-card:last-child { border-bottom: none; }
}

.why-us-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 8px;
    background: linear-gradient(145deg, var(--brass), #8f7230);
    color: #fff; margin-bottom: 18px; overflow: hidden;
    box-shadow: 0 6px 14px -4px rgba(173, 138, 61, 0.5);
}
.why-us-icon svg { width: 20px !important; height: 20px !important; }
.why-us-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.why-us-card p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-faded); margin: 0; }

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 10px 0 20px; }
@media (max-width: 720px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { text-align: center; padding: 10px 16px; }
.step-number {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 50%; border: 1px solid var(--brass); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line);
    color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 1rem; margin-bottom: 18px;
}
.step-card h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 8px; }
.step-card p { color: var(--ink-faded); line-height: 1.65; font-size: 0.92rem; margin: 0; }

/* =========================================================================
   SERVICE GRID — shipping-label cards
   ========================================================================= */

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 10px 0 60px; }
@media (max-width: 720px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(10, 26, 47, 0.07);
    padding: 36px 20px 32px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 28px rgba(10, 26, 47, 0.14); }

.service-icon {
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--card-color, var(--brass));
    color: #fff !important;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 10px 22px -6px var(--card-color, rgba(0,0,0,0.4)), 0 0 0 4px rgba(255,255,255,0.9), 0 0 0 5px var(--card-color, var(--brass));
}
.service-icon svg { width: 36px !important; height: 36px !important; }

.service-card-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.08rem; color: var(--ink); }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */

.testimonials-section { background: var(--paper); padding: 60px 0; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
@media (max-width: 860px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card { border-left: 2px solid var(--brass); padding: 2px 0 2px 20px; }
.testimonial-quote-mark { display: none; }
.testimonial-card p.testimonial-text { font-size: 0.95rem; line-height: 1.7; color: var(--ink); margin: 0 0 14px; }
.testimonial-author { font-weight: 600; color: var(--ink); font-size: 0.86rem; }
.testimonial-role { display: block; color: var(--ink-faded); font-size: 0.8rem; margin-top: 2px; }
.testimonial-placeholder-flag {
    display: inline-block; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 500;
    color: var(--signal-dark); border: 1px solid var(--signal); padding: 3px 8px;
}

/* =========================================================================
   INFO BAND — one weight throughout the headline; no mid-sentence colour
   accent. The emphasis comes from the supporting line below instead.
   ========================================================================= */

.info-band { background: var(--ink); color: #dde3ea; padding: 60px 0; }
.info-band .eyebrow { font-family: 'IBM Plex Mono', monospace; color: var(--brass-light); font-weight: 500; font-size: 0.76rem; }
.info-band h2 { font-size: 1.7rem; font-weight: 700; color: #fff; margin: 10px 0 10px; max-width: 700px; }
.info-band .highlight { display: block; color: var(--signal); font-weight: 600; font-size: 1.1rem; margin-top: 6px; font-family: 'Space Grotesk', sans-serif; }
.info-band p.lead { max-width: 680px; color: #aab6c6; line-height: 1.7; margin-top: 14px; }

.email-list { margin-top: 28px; display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.email-row { display: flex; justify-content: space-between; align-items: center; background: var(--ink); padding: 15px 20px; flex-wrap: wrap; gap: 8px; }
.email-row strong { color: #fff; font-weight: 500; font-size: 0.92rem; }
.email-row a { color: var(--brass-light); text-decoration: none; font-weight: 500; font-size: 0.88rem; }
.email-row a:hover { color: #fff; }

/* =========================================================================
   SITE FOOTER
   ========================================================================= */

.site-footer { background: var(--ink); color: #aab6c6; padding: 56px 0 0; }
.site-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 860px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer-grid { grid-template-columns: 1fr; } }

.site-footer-logo { width: 52px; height: 52px; border-radius: 4px; margin-bottom: 14px; }
@media (max-width: 600px) { .site-footer-logo { width: 150px; height: 150px; } }
.site-footer-tagline { color: #fff; font-weight: 600; margin: 0 0 10px; font-family: 'Space Grotesk', sans-serif; }
.site-footer-desc { font-size: 0.86rem; line-height: 1.7; color: #8694a8; max-width: 320px; }
.site-footer-col h4 { color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; font-weight: 500; margin: 0 0 16px; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer-col ul li { margin-bottom: 10px; }
.site-footer-col ul li a { color: #aab6c6; text-decoration: none; font-size: 0.88rem; }
.site-footer-col ul li a:hover { color: var(--brass-light); }
.site-footer-contact li { font-size: 0.88rem; }
.site-footer-note-line { color: #78859c; font-size: 0.8rem; margin-top: 6px; line-height: 1.6; }
.site-footer-bottom { padding: 20px 0; }
.site-footer-bottom-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: #6e7c93; }
.site-footer-reg { font-size: 0.74rem; }
.site-footer-credit {
    text-align: center;
    font-size: 0.76rem;
    color: #6e7c93;
    margin: 10px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line-dark);
}
.site-footer-credit a { color: var(--brass-light); text-decoration: none; font-weight: 600; }
.site-footer-credit a:hover { color: #fff; text-decoration: underline; }

/* =========================================================================
   GENERIC PAGE HERO / PROSE
   ========================================================================= */

.page-hero { padding: 28px 0 8px; }
.page-hero h1 { font-size: 2rem; font-weight: 700; margin: 10px 0 14px; letter-spacing: -0.5px; }
.page-lead { max-width: 640px; line-height: 1.7; font-size: 1rem; color: var(--ink-faded); }
.page-lead a { color: var(--signal); font-weight: 600; }

.prose-section { max-width: 720px; padding: 20px 0 56px; line-height: 1.75; }
.prose-section h2 { font-size: 1.25rem; font-weight: 600; margin: 36px 0 12px; }
.prose-section p { margin: 0 0 16px; }
.prose-section a { color: var(--signal); font-weight: 600; }
.prose-list { margin: 0 0 16px; padding-left: 20px; line-height: 1.8; }
.prose-list li { margin-bottom: 6px; }

.legal-disclaimer { background: #fdf6e8; border: 1px solid var(--brass); color: #6b5420; padding: 16px 20px; font-size: 0.88rem; line-height: 1.6; margin: 20px 0 8px; }

/* About page: two-column layout with a pull-quote callout */
.about-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding: 20px 0 56px; align-items: start; }
@media (max-width: 860px) { .about-layout { grid-template-columns: 1fr; } }
.about-pullquote { background: var(--paper); border-left: 3px solid var(--brass); padding: 24px 24px; position: sticky; top: 24px; }
.about-pullquote p { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.5; margin: 0; }
.about-pullquote span { display: block; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; color: var(--ink-faded); }

/* =========================================================================
   INDUSTRIES
   ========================================================================= */

.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 10px 0 20px; }
@media (max-width: 860px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries-grid { grid-template-columns: 1fr; } }
.industry-card { background: var(--white); padding: 28px 24px; }
.industry-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 8px;
    background: var(--ink); color: #fff; margin-bottom: 16px; overflow: hidden;
    box-shadow: 0 6px 14px -4px rgba(10, 26, 47, 0.4);
}
.industry-icon svg { width: 19px !important; height: 19px !important; }
.industry-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.industry-card p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-faded); margin: 0; }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq-list { max-width: 740px; padding: 10px 0 60px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; text-align: left; padding: 20px 2px; font-family: 'Space Grotesk', sans-serif; font-size: 0.98rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.faq-toggle { flex-shrink: 0; width: 22px; height: 22px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--ink-faded); transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: var(--ink-faded); line-height: 1.7; }
.faq-answer p { padding: 0 2px 20px; margin: 0; }
.faq-answer a { color: var(--signal); font-weight: 600; }
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-item.is-open .faq-toggle { transform: rotate(45deg); border-color: var(--signal); color: var(--signal); }

/* =========================================================================
   404
   ========================================================================= */

.error-404 { text-align: center; padding: 60px 0 70px; }
.error-404-code { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 3.5rem; font-weight: 500; color: var(--line); line-height: 1; }
.error-404 h1 { font-size: 1.8rem; font-weight: 700; margin: 10px 0 14px; }
.error-404 .page-lead { margin: 0 auto 28px; text-align: center; }
.error-404-cta { display: inline-flex; background: var(--ink); color: #fff; border: none; padding: 14px 24px; text-decoration: none; font-weight: 600; margin-bottom: 50px; }
.error-404-cta:hover { background: var(--signal); }
.error-404-cta::after { content: ' →'; }
.error-404-grid { max-width: 900px; margin: 0 auto; }

/* =========================================================================
   COOKIE BANNER
   ========================================================================= */

.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--ink); color: #dde3ea; padding: 18px 0; border-top: 1px solid var(--brass); }
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cookie-banner-inner p { margin: 0; font-size: 0.86rem; line-height: 1.6; max-width: 640px; }
.cookie-banner-inner a { color: var(--brass-light); font-weight: 600; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { border: 1px solid rgba(255,255,255,0.3); border-radius: 0; background: transparent; color: #dde3ea; padding: 10px 18px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cookie-btn-reject:hover { background: rgba(255,255,255,0.08); }
.cookie-btn-accept { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.cookie-btn-accept:hover { background: var(--brass-light); }
@media (max-width: 640px) { .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; } .cookie-banner-actions { justify-content: center; } }

/* =========================================================================
   SERVICE PAGE
   ========================================================================= */

.service-banner {
    margin-top: 20px;
    height: 360px;
    background-size: cover;
    background-position: center;
    position: relative;
}
@media (max-width: 640px) { .service-banner { height: 280px; margin-top: 10px; } }

.service-banner-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    background: linear-gradient(0deg, var(--ink) 0%, rgba(10,26,47,0.55) 55%, rgba(10,26,47,0.15) 100%);
    padding-bottom: 32px;
}
.service-banner-overlay h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}

.service-hero-with-banner { padding-top: 28px; }

.service-hero { padding: 24px 0 8px; }
.service-hero h1 { font-size: 1.9rem; font-weight: 700; margin: 14px 0 4px; letter-spacing: -0.5px; }
.service-headline { display: block; font-weight: 600; font-size: 1.02rem; color: var(--accent); border-left: 2px solid var(--accent); padding-left: 16px; max-width: 700px; line-height: 1.5; margin: 16px 0 24px; }
.service-intro { max-width: 700px; line-height: 1.75; font-size: 1rem; padding-bottom: 8px; }

.handle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 640px) { .handle-grid { grid-template-columns: 1fr; } }
.handle-item { background: var(--white); padding: 18px 20px; display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--ink); font-size: 0.92rem; }
.handle-dot { width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; margin-top: 8px; }

.note-box { background: var(--ink); color: #dde3ea; padding: 22px 26px; font-weight: 400; line-height: 1.7; margin: 40px 0 0; border-left: 3px solid var(--brass); }

.send-section { margin-top: 48px; }
.send-section p.lead { line-height: 1.7; }
.field-list { columns: 2; column-gap: 32px; margin: 18px 0 0; padding-left: 0; line-height: 2; list-style: none; }
.field-list li { position: relative; padding-left: 20px; font-size: 0.92rem; }
.field-list li::before { content: '–'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .field-list { columns: 1; } }

.cta-button { display: block; text-align: center; background: var(--accent); color: #fff; text-decoration: none; border-radius: 2px; padding: 24px 20px; margin: 32px 0 20px; }
.cta-button:hover { background: var(--ink); }
.cta-button .cta-label { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; }
.cta-button .cta-email { display: block; margin-top: 6px; font-weight: 400; opacity: 0.9; font-size: 0.92rem; }

.alt-contact-line { text-align: center; color: var(--ink-faded); font-size: 0.86rem; margin: 0 0 20px; }
.alt-contact-line a { color: var(--signal); font-weight: 600; }

.b2b-note { border: 1px solid var(--line); padding: 16px 20px; text-align: center; color: var(--ink-faded); font-size: 0.84rem; margin: 0 0 48px; }
.b2b-note strong { display: block; color: var(--ink); margin-bottom: 4px; font-family: 'Space Grotesk', sans-serif; }
.b2b-note a { color: var(--signal); font-weight: 600; }

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */

.contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding: 20px 0 50px; align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

.form-row { margin-bottom: 22px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 500px) { .form-row-split { grid-template-columns: 1fr; } }
.form-row label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; color: var(--ink-faded); margin-bottom: 8px; }
.form-row label .optional { color: var(--ink-faded); opacity: 0.7; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%; padding: 10px 2px; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
    font-family: inherit; font-size: 0.98rem; color: var(--ink); background: transparent; transition: border-color 0.2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--signal); }
.form-row textarea { resize: vertical; border: 1px solid var(--line); padding: 12px; }
.form-row textarea:focus { border-color: var(--signal); }
.contact-submit-btn { width: 100%; border: none; cursor: pointer; --accent: var(--signal); margin-top: 10px; }

.form-alert { padding: 16px 20px; margin-bottom: 24px; font-size: 0.9rem; line-height: 1.6; border-left: 3px solid; }
.form-alert-success { background: #eef6ef; border-color: #3f7a4d; color: #275030; }
.form-alert-error { background: #fbecea; border-color: var(--signal); color: #7a241a; }
.form-alert ul { margin: 8px 0 0; padding-left: 20px; }

.contact-info-col { display: flex; flex-direction: column; gap: 1px; }
.contact-card { background: var(--ink); color: #dde3ea; padding: 28px; }
.contact-card h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 500; color: var(--brass-light); margin: 0 0 20px; }
.info-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.info-row:last-of-type { margin-bottom: 0; }
.info-row-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
    background: var(--brass); color: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.info-row-text { font-size: 0.9rem; line-height: 1.65; color: #c3cbd6; padding-top: 5px; }
.info-row-text a { color: #fff; font-weight: 600; text-decoration: none; }
.info-row-text a:hover { color: var(--brass-light); }
.contact-card-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: 0.78rem; font-weight: 500; color: #8694a8; text-align: center; }

.team-card { background: var(--paper); color: var(--ink); }
.team-card h3 { color: var(--ink-faded); }
.team-list { display: grid; }
.team-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: none; }
.team-row-name { font-weight: 600; color: var(--ink); font-size: 0.88rem; }
.team-row-email { color: var(--signal); font-weight: 500; font-size: 0.84rem; text-decoration: none; }
.team-row-email:hover { text-decoration: underline; }

.map-section { margin-top: 20px; padding-bottom: 60px; }
.map-frame-wrap { border: 1px solid var(--line); }
.map-frame-wrap iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(0.15); }
.map-address-line { text-align: left; color: var(--ink-faded); font-size: 0.84rem; margin-top: 12px; }

/* =========================================================================
   FRONT-END LAYER — loaded AFTER app.css (see partials/frontend-head).
   Adds motion, a sticky header, the world network map and related-service
   links. Everything here is additive: it works on top of the existing
   stylesheet without changing it, and respects "reduced motion" settings.
   ========================================================================= */

/* ---- 0. Phone layout fixes ---------------------------------------------
   Several rules use a "padding: Npx 0" shorthand on elements that also carry
   .container, which silently removed the 24px side padding on phones (header,
   page titles, contact/about layouts). Two-class selectors win regardless of
   order, so this restores it. */
.container.site-header-row,
.container.page-hero,
.container.prose-section,
.container.about-layout,
.container.contact-layout,
.container.service-hero,
.container.error-404 { padding-left: 24px; padding-right: 24px; }

.service-hero.service-hero-with-banner { padding-top: 28px; }

/* Slider arrows sat on top of the hero text on phones: move them beside the dots */
@media (max-width: 780px) {
    .hero-dots { bottom: 30px; }
    .hero-nav-btn { top: auto; bottom: 12px; transform: none; }
    .hero-nav-prev { left: auto; right: 64px; }
    .hero-nav-next { right: 18px; }
}

/* anchors (#quote, #services-grid) must not hide under the sticky header */
html { scroll-padding-top: 84px; }

/* ---- 1. Sticky header that shrinks on scroll ------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.25s ease;
}
.site-header-row,
.site-header-logo { transition: padding 0.25s ease, width 0.25s ease, height 0.25s ease; }

.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(10, 26, 47, 0.09); }
.site-header.is-scrolled .site-header-row { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-scrolled .site-header-logo { width: 42px; height: 42px; }

@media (max-width: 600px) {
    .site-header.is-scrolled .site-header-logo { width: 56px; height: 56px; }
    .site-header.is-scrolled .site-header-tagline { display: none; }
}

/* Footer logo: the file has a white background, so show it as a deliberate badge at a
   size where the crest is actually readable (it was a tiny 52px tile). */
.site-footer-logo { box-sizing: content-box; width: 84px; height: 84px; padding: 8px; background: #fff; border-radius: 10px; }
@media (max-width: 600px) { .site-footer-logo { width: 130px; height: 130px; } }

/* ---- 2. Scroll-progress line + back-to-top --------------------------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; pointer-events: none; }
.scroll-progress span {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--brass), var(--brass-light));
    transform-origin: left center; transform: scaleX(0);
}

.to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 140;
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--brass-light);
    border: 1px solid var(--brass); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease, color 0.2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brass); color: var(--ink); }
@media (max-width: 780px) { .to-top { right: 14px; bottom: 76px; } }   /* clear of a call bar if present */

/* ---- 3. Scroll reveal --------------------------------------------------
   JS adds .reveal only to elements that start below the fold, so nothing flashes.
   The animation uses "backwards" fill, so after it ends the element returns to its
   normal styles and its own hover effects keep working. */
.reveal { opacity: 0; }
.reveal.is-revealed {
    opacity: 1;
    animation: reveal-up 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- 4. Hero: staggered text entrance on every slide ----------------- */
.hero-slide.is-active .hero-eyebrow,
.hero-slide.is-active h2,
.hero-slide.is-active p,
.hero-slide.is-active .hero-cta { animation: hero-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.hero-slide.is-active h2 { animation-delay: 0.08s; }
.hero-slide.is-active p { animation-delay: 0.18s; }
.hero-slide.is-active .hero-cta { animation-delay: 0.28s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---- 5. "How it works": connector line draws between the steps ------- */
.steps-grid { position: relative; }
.steps-grid::before {
    content: ''; position: absolute; top: 44px; left: 16.66%; right: 16.66%; z-index: 0;
    border-top: 1px dashed var(--brass);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
.steps-grid.is-revealed::before { transform: scaleX(1); }
.step-card { position: relative; z-index: 1; }
.step-number { background: var(--white); }
@media (max-width: 720px) { .steps-grid::before { display: none; } }

/* ---- 6. World network map -------------------------------------------- */
.world-section { background: var(--ink); color: #dde3ea; padding: 76px 0 64px; position: relative; overflow: hidden; }
.world-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 70% 45%, rgba(173, 138, 61, 0.14), transparent 60%);
}
.world-grid { position: relative; display: grid; grid-template-columns: 0.78fr 1.85fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .world-grid { grid-template-columns: 1fr; gap: 28px; } }

.world-copy .eyebrow { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; font-weight: 500; color: var(--brass-light); margin-bottom: 12px; }
.world-copy h2 { color: #fff; font-size: 1.95rem; line-height: 1.18; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.4px; }
.world-copy p { color: #aab6c6; line-height: 1.75; max-width: 420px; margin: 0 0 26px; }

.world-map { display: block; width: 100%; height: auto; overflow: visible; }
.world-map .land { fill: none; stroke: rgba(217, 190, 126, 0.52); stroke-width: 3.6; stroke-linecap: round; }
.world-map .route { fill: none; stroke: var(--brass-light); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: 0.9; animation: world-flow 7s linear infinite; }
.world-map .node { fill: var(--brass-light); }
.world-map .hub { fill: #fff; }
.world-map .hub-pulse { fill: none; stroke: var(--brass-light); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; animation: world-pulse 3s ease-out infinite; }
.world-map .hub-pulse-2 { animation-delay: 1.5s; }
.world-map text { font-family: 'IBM Plex Mono', monospace; font-size: 17px; fill: rgba(255, 255, 255, 0.78); letter-spacing: 0.3px; }
.world-map .hub-label { fill: #fff; font-weight: 500; }
@keyframes world-flow { to { stroke-dashoffset: -96; } }
@keyframes world-pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(3.6); opacity: 0; } }
@media (max-width: 560px) {
    .world-map text { display: none; }
    .world-map .land { stroke-width: 4.8; stroke: rgba(217, 190, 126, 0.58); }   /* dots shrink with the map, so thicken them */
    .world-map .route { stroke-width: 2.4; }
}

/* ---- 7. Related services on service pages ---------------------------- */
.related-section { padding-bottom: 8px; }
.related-grid { grid-template-columns: repeat(3, 1fr); margin: 6px 0 72px; }
@media (max-width: 720px) { .related-grid { grid-template-columns: 1fr; } }

/* ---- 8. Respect "reduce motion" -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal.is-revealed { opacity: 1; animation: none; }
    .hero-slide.is-active .hero-eyebrow, .hero-slide.is-active h2,
    .hero-slide.is-active p, .hero-slide.is-active .hero-cta { animation: none; }
    .steps-grid::before { transform: scaleX(1); transition: none; }
    .world-map .route, .world-map .hub-pulse { animation: none; }
    .site-header, .site-header-row, .site-header-logo, .to-top { transition: none; }
}

/* =========================================================================
   ROUND 2 — "find the right service" helper, sticky quote card on service
   pages, industry cards that link to their services, illustrated banners.
   ========================================================================= */

/* ---- A. "Not sure which service?" helper (homepage) ------------------ */
.problem-section { background: var(--paper); padding: 0 0 68px; }
.problem-intro { text-align: center; color: var(--ink-faded); margin: -8px 0 30px; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-card {
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
    background: #fff; border-left: 3px solid var(--card-color, var(--brass));
    padding: 22px 22px 20px; text-decoration: none; color: var(--ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.problem-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(10, 26, 47, 0.1); }
.problem-text { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.problem-service { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: var(--ink-faded); }
.problem-service::after { content: '\2192'; margin-left: 2px; transition: margin-left 0.2s ease; }
.problem-card:hover .problem-service::after { margin-left: 8px; }
.problem-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-color, var(--brass)); flex-shrink: 0; }

/* ---- B. Service page: content + sticky quote card ------------------- */
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; padding-top: 0; padding-bottom: 0; }
.service-main { min-width: 0; }
.service-aside { position: sticky; top: 88px; margin-top: 62px; }
@media (max-width: 1023px) {
    .service-layout { display: block; }
    .service-aside { display: none; }
}
.quote-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 26px 24px 22px; box-shadow: 0 14px 30px rgba(10, 26, 47, 0.08); }
.quote-card-eyebrow { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; font-weight: 500; color: var(--ink-faded); margin-bottom: 8px; }
.quote-card h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.3px; }
.quote-card p { color: var(--ink-faded); font-size: 0.92rem; line-height: 1.6; margin: 0 0 20px; }
.quote-card-btn { display: block; text-align: center; background: var(--accent-ink, var(--accent)); color: #fff; font-weight: 600; padding: 13px 16px; text-decoration: none; margin-bottom: 10px; border: 1px solid transparent; }
.quote-card-btn:hover { background: var(--ink); }
.quote-card-btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.quote-card-btn-outline:hover { background: var(--ink); color: #fff; }
.quote-card-link { display: block; text-align: center; font-size: 0.86rem; font-weight: 600; color: var(--signal); margin-top: 8px; }
.quote-card p.quote-card-note { font-size: 0.78rem; color: var(--ink-faded); text-align: center; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---- C. Industry cards link to the services that help --------------- */
.industry-card p.industry-links-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--ink-faded); margin: 20px 0 8px; }
.industry-links { display: flex; flex-wrap: wrap; gap: 8px; }
.industry-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 7px 11px; border: 1px solid var(--line); background: #fff; transition: border-color 0.2s ease, background 0.2s ease; }
.industry-link:hover { border-color: var(--ink); background: var(--paper); }

/* ---- D. Illustrated service banners (real photos override these) ---- */
.service-banner-art { background: linear-gradient(120deg, #0a1a2f 0%, #0d2340 55%, #12304f 100%); overflow: hidden; }
.service-banner-svg { position: absolute; inset: 0; }
.service-banner-svg svg { display: block; width: 100%; height: 100%; }
.service-banner-art .service-banner-overlay { background: linear-gradient(0deg, rgba(10, 26, 47, 0.82) 0%, rgba(10, 26, 47, 0) 62%); }
.banner-dash { stroke-dasharray: 10 14; animation: banner-dash 3.2s linear infinite; }
@keyframes banner-dash { to { stroke-dashoffset: -96; } }
@media (prefers-reduced-motion: reduce) { .banner-dash { animation: none; } }
@media (max-width: 700px) { .service-banner-art .service-banner-overlay { background: linear-gradient(0deg, rgba(10, 26, 47, 0.94) 0%, rgba(10, 26, 47, 0.62) 44%, rgba(10, 26, 47, 0) 84%); } }

/* =========================================================================
   ACCESSIBILITY — keyboard and contrast fixes
   ========================================================================= */

/* the Services dropdown must open for keyboard users, not only on mouse hover */
.has-dropdown:focus-within .dropdown-menu { display: block; }

/* focus rings need to be visible on dark backgrounds too */
.hero-slider :focus-visible, .world-section :focus-visible, .info-band :focus-visible,
.site-footer :focus-visible, .cookie-banner :focus-visible, .contact-card :focus-visible,
.note-box :focus-visible { outline-color: var(--brass-light); }

/* text that sits on / in the service colour must still pass contrast (orange is the problem one) */
.cta-button { background: var(--accent-ink, var(--accent)); }
.service-headline { color: var(--accent-ink, var(--accent)); }

/* ---- contrast fixes found by the automated audit --------------------- */
.site-footer-bottom-row, .site-footer-reg, .site-footer-credit { color: #9eabbf; }
.info-band .highlight { color: #ff8277; }
.form-row label .optional { color: var(--ink-faded); opacity: 1; }
.cta-button .cta-email { opacity: 1; }
.industry-card .industry-title { font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.error-404-code { color: #8794a8; }