/* ==========================================================================
   CODETICA — Page sections
   ========================================================================== */

/* ================================================================== HERO */

.hero {
    position: relative;
    display: grid;
    align-content: end;
    min-height: min(92vh, 900px);
    padding-top: calc(var(--header-h) + var(--s-10));
    overflow: hidden;
    background: var(--ink-1000);
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg, var(--ink-1000) 0%, rgba(2, 10, 14, .93) 26%, rgba(2, 10, 14, .62) 46%, rgba(2, 10, 14, .12) 66%, transparent 84%),
        linear-gradient(0deg, rgba(2, 10, 14, .92) 0%, rgba(2, 10, 14, .1) 34%, transparent 62%);
}

.hero__inner {
    position: relative;
    display: grid;
    gap: var(--s-8);
    padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.hero__content {
    display: grid;
    gap: var(--s-6);
    /* Grows only past ~2130px, where the display type starts scaling too —
       otherwise the headline would rewrap on very wide screens. */
    max-width: clamp(46rem, 34vw, 68rem);
}

.hero__title {
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

.hero__title span {
    display: block;
}

.hero__lead {
    max-width: 44ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: var(--on-dark-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-2);
}

.hero__aside {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 2px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--on-dark-3);
    pointer-events: none;
}

.hero__aside span:last-child {
    color: var(--accent);
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--s-4);
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.62vw, 11px);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--on-dark-4);
}

.hero__scroll i {
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, var(--accent), transparent);
    animation: scrollPulse 2.6s var(--ease-in-out) infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: .25; transform: scaleY(.55); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ------------------------------------------------------------- Metrics */

.metrics {
    position: relative;
    border-top: 1px solid var(--line-dark);
    background: linear-gradient(180deg, rgba(2, 10, 14, .55), var(--ink-1000));
}

.metrics__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
    position: relative;
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) var(--s-5) clamp(1.75rem, 1rem + 2vw, 2.75rem) 0;
}

.metric + .metric {
    padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
    border-left: 1px solid var(--line-dark);
}

.metric__value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--on-dark);
    font-variant-numeric: tabular-nums;
}

.metric__value em {
    font-style: normal;
    color: var(--accent);
}

.metric__label {
    margin-top: var(--s-3);
    font-size: clamp(13px, 0.75vw, 14px);
    letter-spacing: .01em;
    color: var(--on-dark-3);
}

@media (max-width: 860px) {
    .metrics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .metric:nth-child(n + 3) {
        border-top: 1px solid var(--line-dark);
    }
}

@media (max-width: 900px) {
    .hero {
        min-height: 88vh;
        padding-top: calc(var(--header-h) + var(--s-8));
    }

    .hero__media img {
        object-position: center 16%;
    }

    .hero .eyebrow,
    .hero__title {
        text-shadow: 0 1px 12px rgba(2, 10, 14, .75);
    }

    .hero__scrim {
        background:
            linear-gradient(180deg,
                rgba(2, 10, 14, .55) 0%,
                rgba(2, 10, 14, .18) 22%,
                rgba(2, 10, 14, .72) 42%,
                rgba(2, 10, 14, .94) 60%,
                var(--ink-1000) 78%);
    }

    .hero__aside,
    .hero__scroll {
        display: none;
    }
}

/* ============================================================ INDUSTRIES
   Nine markets on one compact 3x3 wall. Every card is the same wide format, so
   the whole section can be scanned in a single screen. The veil only darkens
   the strip the text sits on — the rest of the photograph stays clear. */

.industries {
    background: var(--ink-1000);
}

.industries__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--s-5) clamp(2rem, 4vw, 4rem);
}

.industries__title {
    margin-top: var(--s-4);
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
}

.industries__head-side {
    display: grid;
    justify-items: start;
    gap: var(--s-4);
}

.industries__head-side .lead {
    max-width: 34rem;
}

.industries__all {
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.8vw, 13px);
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- The wall */

.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(2rem, 2.6vw, 2.5rem);
}

.industry-tile {
    position: relative;
    display: block;
    aspect-ratio: 16 / 7.6;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #061015;
    isolation: isolate;
    transition: box-shadow 320ms var(--ease-out);
}

.industry-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 360ms var(--ease-out);
}

.industry-tile__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(2, 10, 14, .93) 0%,
        rgba(2, 10, 14, .8) 30%,
        rgba(2, 10, 14, .38) 62%,
        rgba(2, 10, 14, .08) 86%,
        rgba(2, 10, 14, 0) 100%);
    transition: opacity 320ms var(--ease-out);
}

.industry-tile__icon {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(2, 10, 14, .34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .84);
    transition: color 300ms var(--ease-out), border-color 300ms var(--ease-out), background 300ms var(--ease-out);
}

.industry-tile__tag {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-radius: var(--r-pill);
    background: rgba(2, 10, 14, .4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--accent-bright);
}

.industry-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 0.9rem 1rem;
    transition: transform 320ms var(--ease-out);
}

.industry-tile__text {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.industry-tile__name {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.25vw, 20px);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: #fff;
}

.industry-tile--feature .industry-tile__name {
    font-size: clamp(16px, 1.15vw, 19px);
}

.industry-tile__count {
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.68vw, 11px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-glow);
}

.industry-tile__count.ph {
    color: rgba(255, 255, 255, .62);
}

.industry-tile__arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: #fff;
    transition: transform 320ms var(--ease-out), border-color 300ms var(--ease-out), background 300ms var(--ease-out);
}

/* ---------------------------------------------------------------- States */

.industry-tile:hover .industry-tile__img,
.industry-tile:focus-visible .industry-tile__img {
    transform: scale(1.03);
}

.industry-tile:hover .industry-tile__veil,
.industry-tile:focus-visible .industry-tile__veil {
    opacity: .9;
}

.industry-tile:hover .industry-tile__icon,
.industry-tile:focus-visible .industry-tile__icon {
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: rgba(2, 10, 14, .5);
}

.industry-tile:hover .industry-tile__arrow,
.industry-tile:focus-visible .industry-tile__arrow {
    transform: translateX(4px);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.industry-tile:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.industry-tile:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
}

.industry-tile--feature {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.industry-tile--feature:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent),
        0 0 30px -14px rgba(35, 180, 95, .45);
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1100px) {
    .industries__head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1023px) {
    .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .industry-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Still horizontal — a stack of tall cards would bury the last industries. */
    .industry-tile {
        aspect-ratio: 16 / 8.4;
    }

    .industry-tile__name { font-size: 19px; }
    .industry-tile__count { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .industry-tile,
    .industry-tile__img,
    .industry-tile__veil,
    .industry-tile__body,
    .industry-tile__arrow {
        transition: none;
    }

    .industry-tile:hover .industry-tile__img,
    .industry-tile:focus-visible .industry-tile__img,
    .industry-tile:hover .industry-tile__arrow {
        transform: none;
    }
}

/* =========================================================== MARKET REACH
   An interactive sales-territory map. Geometry comes from config/mexico-map.php,
   the numbers from App\Data\MarketMap — the CSS only owns the colour scale.

   The scale is ordinal, one hue, five steps, validated light→dark against this
   surface: monotone lightness, adjacent ΔL ≥ 0.06, light end ≥ 2:1 on #F4F7F8.
   Inactive states sit below that floor on purpose so they recede. */

.market {
    --mx-t1: #6FBE80;
    --mx-t2: #4BA762;
    --mx-t3: #2F8E4A;
    --mx-t4: #1F7439;
    --mx-t5: #135B2A;
    --mx-idle: #E5E7E7;
    --mx-select: #0E4522;

    background: var(--paper-alt);
}

/* --------------------------------------------------------------- Header */

/* Both columns start at the same line. With `align-items: end` the shorter
   left column was pushed down by the height of the right one, which is where
   the empty block above the headline came from. */
.market__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-5) clamp(2rem, 5vw, 5rem);
}

.market__title {
    margin-top: var(--s-4);
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    color: var(--on-light);
}

/* On /market-reach the hero already said all of this, so the section opens with
   the hint and the figure side by side instead of repeating the headline. */
.market__head--slim {
    grid-template-columns: minmax(0, 1fr);
}

.market__head--slim .market__head-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
}

.market__head--slim .market__metric {
    margin: 0;
    padding-top: 0;
    border-top: 0;
    text-align: right;
}

.market__head-side {
    display: grid;
    gap: var(--s-4);
    align-content: start;
}

.market__head-side .lead {
    max-width: 34rem;
}

/* How to use the map: a line of help, not an alert. */
.market__hint {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--on-light-3);
}

.market__hint-icon {
    display: inline-flex;
    flex: none;
    color: var(--brand);
    opacity: .85;
}

.market__hint-tap {
    display: none;
}

/* Where the pointer cannot hover, the wording changes with it. */
@media (hover: none) {
    .market__hint-hover { display: none; }
    .market__hint-tap { display: inline; }
}

/* One headline figure. The dataset counts live on /customers. */
.market__metric {
    margin: var(--s-2) 0 0;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-light);
}

.market__metric dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 1.5rem + 1.4vw, 2.625rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.market__metric dt {
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.7vw, 12px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

/* ----------------------------------------------------------- The stage */

.market__stage {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3.5rem);
    margin-top: clamp(2.5rem, 3.2vw, 3.5rem);
}

.market__map {
    position: relative;
}

.mx-map {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.market__credit {
    margin-top: var(--s-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: right;
    color: var(--on-light-3);
    opacity: .7;
}

/* --------------------------------------------------------- The states */

.mx-map__inactive path {
    fill: var(--mx-idle);
    stroke: var(--paper-alt);
    stroke-width: 1.1;
}

.mx-state {
    fill: var(--mx-t1);
    stroke: var(--paper-alt);
    stroke-width: 1.1;
    cursor: pointer;
    transition: fill 170ms var(--ease-out), filter 170ms var(--ease-out);
}

.mx-state--t1 { fill: var(--mx-t1); }
.mx-state--t2 { fill: var(--mx-t2); }
.mx-state--t3 { fill: var(--mx-t3); }
.mx-state--t4 { fill: var(--mx-t4); }
.mx-state--t5 { fill: var(--mx-t5); }

.mx-state:hover,
.mx-state:focus-visible {
    filter: brightness(1.12) drop-shadow(0 2px 6px rgba(19, 91, 42, .28));
    outline: none;
}

.mx-state:focus-visible {
    stroke: var(--mx-select);
    stroke-width: 2;
}

.mx-state[aria-pressed='true'] {
    stroke: var(--mx-select);
    stroke-width: 2.4;
    paint-order: stroke;
}

/* --------------------------------------------------------------- Labels
   Only the states whose inscribed radius can hold one carry a permanent
   label. Everything else gets the live label, which follows hover and lock. */

.mx-label {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-anchor: middle;
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(2, 10, 14, .38);
    stroke-width: 3.4;
    pointer-events: none;
}

.mx-cursor {
    pointer-events: none;
}

.mx-cursor rect {
    fill: var(--on-light);
}

.mx-cursor text {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    fill: #fff;
}

.mx-hq line {
    stroke: var(--mx-select);
    stroke-width: 1.1;
}

.mx-hq circle {
    fill: var(--paper);
    stroke: var(--mx-select);
    stroke-width: 2.2;
}

.mx-hq text {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    fill: var(--mx-select);
}

/* ------------------------------------------------------------ The panel */

.market__panel {
    position: relative;
}

.state-card {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-5);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: 0 18px 44px -34px rgba(6, 16, 21, .35);
    animation: stateIn 180ms var(--ease-out);
}

@keyframes stateIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.state-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line-light);
}

.state-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--on-light);
}

.state-card__sub {
    margin-top: 5px;
    font-size: var(--fs-xs);
    color: var(--on-light-3);
}

.state-card__count {
    flex: none;
    text-align: right;
}

.state-card__count strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.state-card__count span {
    display: block;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.68vw, 12px);
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

.state-card__label {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.7vw, 12px);
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

/* The full count, so the list never looks truncated. */
.state-card__label-count {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--paper-alt);
    letter-spacing: .06em;
    color: var(--on-light-2);
    font-variant-numeric: tabular-nums;
}

.state-card__value {
    font-size: calc(var(--fs-sm) + 1px);
    line-height: 1.55;
    color: var(--on-light-2);
}

.state-card__rep {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--on-light);
}

/* Every company in the state is listed — no preview cut. The list is the
   tallest block of the card, so it scrolls on its own once it passes the
   height of the map beside it instead of stretching the whole section. */

.state-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-light-2) transparent;
}

.state-card__chips::-webkit-scrollbar {
    width: 6px;
}

.state-card__chips::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--line-light-2);
}

.state-card__chips li {
    padding: 5px 11px;
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper-alt);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--on-light-2);
}

.state-card__links {
    display: grid;
    gap: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-light);
}

/* ------------------------------------------------------------ Explore */

.market__explore {
    display: grid;
    gap: var(--s-4);
    margin-top: clamp(2rem, 3.5vw, 3rem);
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line-light);
}

.market__explore-label {
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.7vw, 12px);
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

.market__select {
    display: none;
    max-width: 26rem;
}

.state-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.state-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-pill);
    background: var(--paper);
    font-size: 0.875rem;
    color: var(--on-light-2);
    transition: border-color 170ms var(--ease-out), color 170ms var(--ease-out), box-shadow 170ms var(--ease-out);
}

.state-chip__dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--mx-t1);
}

.state-chip--t1 .state-chip__dot { background: var(--mx-t1); }
.state-chip--t2 .state-chip__dot { background: var(--mx-t2); }
.state-chip--t3 .state-chip__dot { background: var(--mx-t3); }
.state-chip--t4 .state-chip__dot { background: var(--mx-t4); }
.state-chip--t5 .state-chip__dot { background: var(--mx-t5); }

.state-chip em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--on-light-3);
    font-variant-numeric: tabular-nums;
}

.state-chip:hover {
    border-color: var(--line-light-2);
    color: var(--on-light);
}

.state-chip[aria-pressed='true'] {
    border-color: var(--mx-select);
    color: var(--on-light);
    box-shadow: inset 0 0 0 1px var(--mx-select);
}

.market__all {
    justify-self: start;
    margin-top: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
    .market__head,
    .market__stage {
        grid-template-columns: 1fr;
    }

    .market__map { order: -1; }

    .market__panel { order: 1; }

    .market__metrics { margin-top: var(--s-5); }
}

@media (max-width: 760px) {
    .market__map { order: -2; margin-inline: calc(var(--gutter) * -0.5); }

    .market__select {
        display: grid;
        order: -1;
        max-width: none;
        margin-bottom: var(--s-2);
    }

    .market__explore-label { display: none; }

    .mx-label { font-size: 22px; stroke-width: 4.6; }

    .mx-cursor text { font-size: 19px; }

    .mx-hq text { font-size: 17px; }

    .mx-hq line { stroke-width: 2; }

    .mx-hq circle { stroke-width: 4; r: 6; }

    .state-chips {
        flex-wrap: nowrap;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: var(--s-3);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .state-chips::-webkit-scrollbar { display: none; }

    .state-chips li { flex: none; }

    .mx-label { font-size: 17px; }

    .mx-hq text { font-size: 13px; }

    .state-card { padding: var(--s-5); }

    .state-card__count strong { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mx-state,
    .state-card {
        transition: none;
        animation: none;
    }
}

/* ========================================================== MANUFACTURERS */

.principal-grid {
    display: grid;
    gap: 1px;
    background: var(--line-light);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    overflow: hidden;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.principal {
    position: relative;
    display: grid;
    gap: var(--s-3);
    align-content: space-between;
    min-height: 180px;
    padding: var(--s-6);
    background: var(--paper);
    transition: background var(--dur-2) var(--ease-out);
}

.principal:hover {
    background: var(--paper-alt);
}

.principal__name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    color: var(--on-light);
    line-height: 1.1;
}

.principal__logo {
    max-height: 34px;
    width: auto;
    object-fit: contain;
}

.principal__tag {
    font-size: var(--fs-sm);
    color: var(--on-light-2);
}

.principal__families {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

.principal__families span::after {
    content: '·';
    margin-left: 6px;
    opacity: .6;
}

.principal__families span:last-child::after {
    display: none;
}

.principal__arrow {
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    color: var(--on-light-3);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all var(--dur-2) var(--ease-out);
}

.principal:hover .principal__arrow {
    opacity: 1;
    transform: none;
    color: var(--brand);
}

.principal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur-2) var(--ease-out);
}

.principal:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

@media (max-width: 900px) {
    .principal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .principal-grid {
        grid-template-columns: 1fr;
    }

    .principal {
        min-height: 0;
    }
}

/* ========================================================= PRODUCT FINDER */

.finder {
    position: relative;
    overflow: hidden;
    background: var(--ink-1000);
    isolation: isolate;
}

.finder__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.finder__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.finder__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(94deg, var(--ink-1000) 2%, rgba(2, 10, 14, .93) 30%, rgba(2, 10, 14, .55) 52%, rgba(2, 10, 14, .15) 74%, transparent 92%),
        linear-gradient(180deg, transparent 58%, rgba(2, 10, 14, .55) 84%, var(--ink-1000) 100%);
}

.finder__inner {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
}

.finder__content {
    display: grid;
    gap: var(--s-6);
    max-width: 40rem;
}

.finder__title {
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: var(--tracking-display);
}

.finder-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.35rem 0.35rem 0.35rem 1.1rem;
    border: 1px solid var(--line-dark-2);
    border-radius: var(--r-md);
    background: rgba(4, 14, 19, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.finder-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(35, 180, 95, .16);
}

.finder-search__icon {
    color: var(--on-dark-3);
    flex: none;
}

.finder-search input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--on-dark);
    font-size: 0.9375rem;
}

.finder-search input::placeholder {
    color: var(--on-dark-4);
}

.finder__popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--on-dark-4);
}

.finder__help {
    display: grid;
    gap: var(--s-4);
    padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    border: 1px solid var(--line-dark-2);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-md);
    background: rgba(4, 14, 19, .74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    justify-self: end;
    width: min(100%, 26rem);
}

.finder__help-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* The three points that sit in the same glass card the finder's help box used. */
.statement__points {
    gap: var(--s-5);
    align-content: start;
    margin: 0;
    list-style: none;
}

.statement__points li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--on-dark-2);
}

.statement__mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: rgba(35, 180, 95, .14);
    color: var(--accent);
}

@media (max-width: 980px) {
    .finder__inner {
        grid-template-columns: 1fr;
    }

    .finder__help {
        justify-self: stretch;
        width: 100%;
    }

    .finder__media img {
        object-position: center 30%;
    }

    .finder__media::after {
        background: linear-gradient(180deg, rgba(2, 10, 14, .82) 0%, rgba(2, 10, 14, .94) 45%, var(--ink-1000) 100%);
    }
}

/* ==================================================== ENGINEERING SUPPORT */

.process {
    position: relative;
}

.process__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-4);
    padding-top: var(--s-12);
}

.process__line {
    position: absolute;
    top: calc(var(--s-12) - 1px);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line-light);
}

.process__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--brand), var(--accent-bright));
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: transform 1.4s var(--ease-out);
}

.step {
    position: relative;
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding-top: var(--s-6);
    cursor: default;
}

.step::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--line-light-2);
    transition: all var(--dur-2) var(--ease-out);
}

.step.is-in::before {
    border-color: var(--brand);
}

.step:hover::before {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 0 5px rgba(44, 124, 66, .16);
    transform: scale(1.15);
}

.step__num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    color: var(--brand);
}

.step__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    transition: color var(--dur-2) var(--ease-out);
}

.step__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
    opacity: .92;
    transition: opacity var(--dur-2) var(--ease-out);
}

.step:hover .step__title {
    color: var(--brand);
}

@media (max-width: 1000px) {
    .process__track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-8) var(--s-5);
    }

    .process__line {
        display: none;
    }

    .step {
        padding-top: var(--s-5);
        border-top: 1px solid var(--line-light);
    }

    .step::before {
        top: -5px;
    }
}

@media (max-width: 620px) {
    .process__track {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}

/* ============================================================== PARTNERS */

.partners {
    position: relative;
    background: var(--ink-950);
    overflow: hidden;
}

.partners::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 55% at 82% 12%, rgba(35, 180, 95, .14), transparent 62%),
        radial-gradient(50% 40% at 8% 92%, rgba(47, 168, 184, .1), transparent 65%);
    pointer-events: none;
}

.partners__inner {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 4vw, 5rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
}

.pillar-grid {
    display: grid;
    gap: 1px;
    background: var(--line-dark);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-md);
    overflow: hidden;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pillar {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-6);
    background: var(--ink-950);
    transition: background var(--dur-2) var(--ease-out);
}

.pillar:hover {
    background: var(--ink-850);
}

.pillar__icon {
    color: var(--accent);
    margin-bottom: var(--s-2);
}

.pillar__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.pillar__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-dark-3);
}

@media (max-width: 980px) {
    .partners__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .pillar-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================== SPOTLIGHT */

.spotlight-grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spot {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-light);
    transition: border-color var(--dur-2) var(--ease-out);
}

.spot:hover {
    border-color: var(--brand);
}

.spot__kicker {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
}

.spot__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.018em;
}

.spot__text {
    font-size: var(--fs-sm);
    color: var(--on-light-2);
    line-height: var(--lh-relaxed);
}

@media (max-width: 860px) {
    .spotlight-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================== RESOURCES */

.resource-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line-light);
}

.resource {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--line-light);
    transition: background var(--dur-2) var(--ease-out);
}

.resource:hover {
    background: rgba(44, 124, 66, .035);
}

.resource__type {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
}

.resource__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.resource__summary {
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--on-light-2);
}

.resource__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.resource__action {
    flex: none;
}

@media (max-width: 780px) {
    .resource {
        grid-template-columns: 1fr;
        gap: var(--s-3);
        padding-block: var(--s-6);
    }
}

/* ============================================================= FINAL CTA */

.final-cta {
    position: relative;
    background: var(--ink-950);
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 100% at 50% 120%, rgba(35, 180, 95, .22), transparent 65%);
    pointer-events: none;
}

.final-cta__inner {
    position: relative;
    display: grid;
    gap: var(--s-6);
    justify-items: center;
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
}

.final-cta__title {
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
    margin-top: var(--s-2);
}

.final-cta__note {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-sm);
    color: var(--on-dark-3);
    width: 100%;
}

/* ============================================================ PAGE HEROES */

.page-hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 5vw, 7rem));
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    background: var(--ink-1000);
    overflow: hidden;
    isolation: isolate;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(72% 120% at 88% 0%, rgba(35, 180, 95, .16), transparent 60%),
        radial-gradient(50% 80% at 10% 100%, rgba(47, 168, 184, .08), transparent 65%);
}

/* ------------------------------------------------------ Technical hero
   Same hero, with a drawn figure and an outline word on the right. The depth
   comes from three stacked radials, all weighted to the right: the page must
   still read as black, so the green never rises above 12% alpha. */

.page-hero--tech::before {
    background:
        radial-gradient(42% 62% at 78% 46%, rgba(35, 180, 95, .085), transparent 62%),
        radial-gradient(46% 70% at 99% 4%, rgba(35, 180, 95, .05), transparent 64%),
        radial-gradient(42% 60% at 2% 100%, rgba(47, 168, 184, .04), transparent 66%),
        linear-gradient(180deg, var(--ink-1000), #031012 58%, var(--ink-1000));
}

.page-hero__deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Nothing decorative is allowed under the copy: on desktop the whole layer
   starts where the text column ends. */
@media (min-width: 1024px) {
    .page-hero__deco {
        left: 45%;
        /* The word is wider than the column on purpose. Fading the inner edge
           turns the clip into a deliberate horizon instead of a cut. */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 14%);
        mask-image: linear-gradient(to right, transparent, #000 14%);
    }
}

/* The word: outline only, and dark enough that it reads as texture. It is
   anchored to the right edge and clipped there on purpose. */
.page-hero__word {
    position: absolute;
    right: clamp(-1rem, 0vw, 2rem);
    top: 54%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: clamp(110px, 11.5vw, 230px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(35, 180, 95, .68);
    text-stroke: 1px rgba(35, 180, 95, .68);
    opacity: .13;
}

.hero-fig {
    position: absolute;
    top: 50%;
    right: 0;
    /* The drawing owns the whole right half: it is sized off the deco layer,
       not off the viewport, so it fills the column instead of floating in it. */
    width: 100%;
    padding-inline: clamp(1rem, 2.5vw, 3rem);
    transform: translateY(-50%);
}

.hero-fig svg {
    display: block;
    width: 100%;
    height: auto;
}

.hero-fig__grid circle {
    fill: rgba(255, 255, 255, .07);
}

/* Bands of the grid breathe on their own clocks — ambient, not motion you
   would ever catch yourself watching. */
.hero-fig__band {
    animation: figBand 7s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes figBand {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.hero-fig__trace path {
    stroke: rgba(255, 255, 255, .2);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-fig__plate rect {
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1;
    fill: rgba(255, 255, 255, .022);
}

/* Inside the die. Quieter than the package around it. */
.hero-fig__die rect,
.hero-fig__die path {
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 1;
    stroke-linecap: round;
}

.hero-fig__die circle {
    fill: rgba(255, 255, 255, .22);
}

/* ------------------------------------------------- Energy on a conductor
   The same geometry as the base trace, in brand green, reduced to one short
   dash. pathLength is normalised to 100 on every route, so one set of dash
   numbers travels a long diagonal and a short stub at the same pace. */

.hero-fig__spark {
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 14 100;
    animation: figSpark var(--dur, 5s) linear infinite;
    animation-delay: var(--delay, 0s);
    filter: drop-shadow(0 0 4px rgba(35, 180, 95, .45));
}

@keyframes figSpark {
    from { stroke-dashoffset: 14; opacity: 0; }
    8% { opacity: .85; }
    88% { opacity: .85; }
    to { stroke-dashoffset: -100; opacity: 0; }
}

/* The head of the signal, riding the same path through <animateMotion>. */
.hero-fig__pulse {
    fill: var(--accent-bright, var(--accent));
    filter: drop-shadow(0 0 6px rgba(35, 180, 95, .7));
}

.hero-fig__node circle {
    fill: var(--ink-1000);
    stroke: rgba(255, 255, 255, .38);
    stroke-width: 1;
}

/* Only these carry the brand colour, and only two or three per figure. They
   swell briefly, as if something just arrived. */
.hero-fig__node--live circle {
    fill: var(--accent);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 8px rgba(35, 180, 95, .6));
    animation: figNode 4.2s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes figNode {
    0%, 72%, 100% { transform: scale(1); opacity: .85; }
    80% { transform: scale(1.4); opacity: 1; }
    88% { transform: scale(1); opacity: 1; }
}

/* Desktop: the copy keeps the left 45%, the drawing gets the rest. */
@media (min-width: 1024px) {
    .page-hero--tech .page-hero__inner {
        max-width: none;
        width: 100%;
        padding-right: 55%;
    }
}

/* Tablet: smaller figure, quieter word, copy still first. */
@media (max-width: 1023px) {
    .page-hero--tech .page-hero__inner {
        max-width: 40rem;
    }

    .page-hero__word {
        top: 50%;
    }

    /* Below the copy, not behind it: the figure drops to the bottom-right
       corner so the headline never sits on a trace. */
    .hero-fig {
        top: auto;
        bottom: -1rem;
        right: -5rem;
        width: 380px;
        padding-inline: 0;
        transform: none;
        opacity: .45;
    }

    .page-hero__word {
        opacity: .1;
    }
}

/* Phones: the text owns the screen. The grid and the plates go; a trace or
   two stay, far enough down not to sit under the headline. */
@media (max-width: 720px) {
    .hero-fig {
        bottom: -3rem;
        right: -9rem;
        width: 300px;
        opacity: .28;
    }

    .hero-fig__grid,
    .hero-fig__plate {
        display: none;
    }

    .page-hero__word {
        font-size: clamp(78px, 26vw, 130px);
        opacity: .08;
    }
}

.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .68;
}

.page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.page-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(92deg, var(--ink-1000) 4%, rgba(2, 10, 14, .9) 34%, rgba(2, 10, 14, .58) 62%, rgba(2, 10, 14, .34) 100%);
}

.page-hero__inner {
    display: grid;
    gap: var(--s-6);
    max-width: 54rem;
}

/* One entrance, once, on load — no scroll observer and no loop. The copy
   rises 10px, the drawing only fades, and the traces draw themselves. */
.page-hero--tech .page-hero__inner > * {
    animation: heroRise 620ms var(--ease-out) both;
}

.page-hero--tech .page-hero__inner > :nth-child(2) { animation-delay: 70ms; }
.page-hero--tech .page-hero__inner > :nth-child(3) { animation-delay: 140ms; }
.page-hero--tech .page-hero__inner > :nth-child(4) { animation-delay: 210ms; }
.page-hero--tech .page-hero__inner > :nth-child(n+5) { animation-delay: 280ms; }

.page-hero__deco {
    animation: heroFade 1100ms var(--ease-out) both;
    animation-delay: 160ms;
}

/* The board draws itself once, on load. Every trace carries pathLength="100",
   so one pair of numbers works for a long diagonal and a short stub alike. */
.hero-fig__trace path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: heroDraw 1100ms var(--ease-out) forwards;
    animation-delay: 300ms;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes heroFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes heroDraw {
    to { stroke-dashoffset: 0; }
}

/* Parallax: a few pixels of drift under the pointer, set from JS on the hero
   and applied here so the browser keeps it on the compositor. */
.page-hero__deco {
    transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
    transition: transform 420ms var(--ease-out);
    will-change: transform;
}

/* Phones: one signal, not five, and a quieter board behind the copy. */
@media (max-width: 720px) {
    .hero-fig__pulse--extra,
    .hero-fig__spark--extra {
        display: none;
    }

    .hero-fig__band {
        animation: none;
    }
}

/* Everything that moves, stops. The board stays exactly where it is. */
@media (prefers-reduced-motion: reduce) {
    .page-hero--tech .page-hero__inner > *,
    .page-hero__deco,
    .hero-fig__trace path,
    .hero-fig__band,
    .hero-fig__node--live circle {
        animation: none;
    }

    .page-hero__deco {
        transform: none;
        transition: none;
    }

    .hero-fig__trace path {
        stroke-dashoffset: 0;
    }

    /* SMIL ignores this media query, so the signals are hidden here and the
       clock is stopped in JS as well. */
    .hero-fig__pulse,
    .hero-fig__energy {
        display: none;
    }
}

/* The eyebrow gets a longer rule and more air between letters in a hero —
   "────  C O N T A C T" rather than a tag. */
.page-hero--tech .eyebrow {
    letter-spacing: .26em;
}

.page-hero--tech .eyebrow::before {
    width: 34px;
    opacity: .85;
}

/* One step back so it never competes with the headline. */
.page-hero .breadcrumb {
    color: var(--on-dark-4);
}

.page-hero__title {
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
}

.page-hero__title span {
    display: block;
}

/* A statement set between the headline and the intro paragraph. The green
   rule carries it, so it reads as a separate voice without competing with the
   H1 above or the lead below. Opt-in: pass `kicker` to components/page-hero. */

.page-hero__kicker {
    display: grid;
    gap: var(--s-2);
    padding-left: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
    border-left: 2px solid var(--accent);
    max-width: 46rem;
}

.page-hero__kicker-label {
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.7vw, 12px);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

.page-hero__kicker-text {
    font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
    line-height: 1.45;
    letter-spacing: -0.011em;
    color: var(--on-dark);
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    padding-top: var(--s-5);
    margin-top: var(--s-2);
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-xs);
    color: var(--on-dark-3);
}

/* ======================================================= DETAIL LAYOUTS */

.split {
    display: grid;
    gap: clamp(2rem, 4vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
}

/* Two headline figures beside a block of prose. Used by "Our market" on the
   Company page; the values come from config-free copy in lang/*.php. */

.fact-list {
    display: grid;
    gap: var(--s-6);
    margin-top: var(--s-6);
}

.fact-list dt {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
}

.fact-list dd {
    margin-top: var(--s-2);
    max-width: 17rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--on-dark-3);
}

.split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-8));
    display: grid;
    gap: var(--s-4);
}

@media (max-width: 900px) {
    .split,
    .split--even {
        grid-template-columns: 1fr;
    }

    .split__aside {
        position: static;
    }
}

.tile-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.tile {
    position: relative;
    display: grid;
    gap: var(--s-2);
    align-content: start;
    padding: var(--s-5);
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper);
    transition: all var(--dur-2) var(--ease-out);
}

.tile:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tile__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
}

.tile__title svg {
    color: var(--on-light-3);
    flex: none;
    transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.tile:hover .tile__title svg {
    color: var(--brand);
    transform: translateX(3px);
}

.tile__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

.tile__icon {
    color: var(--brand);
    margin-bottom: var(--s-2);
}

.tile--dark {
    background: rgba(255, 255, 255, .025);
    border-color: var(--line-dark);
}

.tile--dark .tile__text {
    color: var(--on-dark-3);
}

.tile--dark:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: rgba(35, 180, 95, .07);
    box-shadow: none;
}

.tile--dark .tile__title svg {
    color: var(--on-dark-4);
}

.tile--dark:hover .tile__title svg {
    color: var(--accent-bright);
}

/* ------------------------------------------------------- Product detail */

.product-actions {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-6);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: var(--paper-alt);
}

.product-hero {
    display: grid;
    gap: var(--s-4);
}

.product-pn {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    letter-spacing: -0.01em;
    color: var(--on-dark);
}

/* ----------------------------------------------------------- Rep finder */

.rep-card {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-6);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: var(--paper);
}

.rep-card__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.rep-card__photo {
    width: 64px;
    height: 80px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--paper-deep);
    border: 1px solid var(--line-light);
    color: var(--on-light-3);
    overflow: hidden;
}

.rep-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rep-card__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.018em;
}

.rep-card__role {
    font-size: var(--fs-xs);
    color: var(--on-light-3);
}

.rep-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* ------------------------------------------------------------- RFQ steps */

.steps-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

.steps-bar__dot {
    width: 22px;
    height: 2px;
    background: var(--line-light-2);
    border-radius: 2px;
    transition: background var(--dur-2) var(--ease-out);
}

.steps-bar__dot.is-done {
    background: var(--brand);
}

/* The RFQ is one form, read top to bottom: three labelled blocks separated by
   a rule, not three screens. Only the middle block changes, and it changes
   with the option chosen in the first one. */

.rfq-block {
    display: grid;
    gap: var(--s-6);
}

/* The rule goes on the bottom of each block, never the top: a fieldset's top
   border is interrupted by its own legend, and the gap looks like a mistake. */
.rfq-block:not(:last-of-type) {
    padding-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    border-bottom: 1px solid var(--line-light);
}

.rfq-block + .rfq-block {
    margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.rfq-block__legend {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--on-light);
}

/* The step number lives in CSS so the markup stays copy only. */
.rfq-block__legend::before {
    counter-increment: rfq-block;
    content: counter(rfq-block, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: .14em;
    color: var(--brand);
}

form[data-rfq] {
    counter-reset: rfq-block;
}

.rfq-block [hidden],
[data-intent][hidden],
[data-intent-hide][hidden] {
    display: none;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding-top: var(--s-2);
}

/* --------------------------------------------------------------- Filters */

.filter-bar {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    padding: var(--s-6);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: var(--paper);
}

.result-count {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: var(--on-light-3);
}

.empty-state {
    display: grid;
    gap: var(--s-4);
    justify-items: start;
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    border: 1px dashed var(--line-light-2);
    border-radius: var(--r-md);
    background: var(--paper);
}

.section--dark .empty-state,
.section--deep .empty-state {
    border-color: var(--line-dark-2);
    background: rgba(255, 255, 255, .02);
}

/* ------------------------------------------------------------ Prose */

.prose {
    display: grid;
    gap: var(--s-5);
    max-width: 68ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

.prose h2 {
    font-size: var(--fs-h3);
    color: var(--on-light);
    margin-top: var(--s-6);
}

/* .prose was written for white sections. On a dark surface its grey drops to
   roughly 1.5:1 and the copy all but disappears, so the palette flips. */

.section--dark .prose,
.section--deep .prose {
    color: var(--on-dark-2);
}

.section--dark .prose h2,
.section--deep .prose h2 {
    color: var(--on-dark);
}

/* --------------------------------------------------------- Stat callout */

.stat-row {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-dark);
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat__label {
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--on-dark-3);
}

/* ========================================================== PRODUCT CARDS */

.product-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.product-card {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-5);
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.product-card:hover {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line-light));
    box-shadow: var(--shadow-sm);
}

.product-card__link {
    display: grid;
    gap: 6px;
}

.product-card__pn {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: var(--brand);
}

.product-card__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--on-light);
}

.product-card__meta {
    font-size: var(--fs-xs);
    color: var(--on-light-3);
}

.product-card__meta a:hover,
.product-card__meta .linkish:hover {
    color: var(--brand);
}

.product-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-3);
    margin-top: auto;
    border-top: 1px solid var(--line-light);
}

.product-card--dark {
    background: rgba(255, 255, 255, .025);
    border-color: var(--line-dark);
}

.product-card--dark .product-card__pn { color: var(--accent); }
.product-card--dark .product-card__name { color: var(--on-dark); }
.product-card--dark .product-card__meta { color: var(--on-dark-3); }
.product-card--dark .product-card__actions { border-color: var(--line-dark); }

.product-card--dark:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: none;
}

/* ============================================================== LINE CARD */

.line-card {
    display: grid;
    border-top: 1px solid var(--line-light);
}

.line-card__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--line-light);
    transition: background var(--dur-2) var(--ease-out);
}

.line-card__row:hover {
    background: rgba(44, 124, 66, .03);
}

.line-card__label {
    margin-bottom: var(--s-3);
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.62vw, 11px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

.line-card__brand .principal__name {
    display: block;
    margin-bottom: 4px;
}

.line-card__brand a.principal__name:hover {
    color: var(--brand);
}

@media (max-width: 980px) {
    .line-card__row {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }
}

/* ==================================================== PRODUCT FINDER PAGE */

.finder--page {
    padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem)) clamp(3rem, 2rem + 3vw, 5rem);
}

.results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin: clamp(2rem, 1.5rem + 1.6vw, 3rem) 0 var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line-light);
}

.grouped-results {
    display: grid;
    gap: var(--s-5);
    margin-top: var(--s-6);
    padding: var(--s-6);
    border: 1px solid var(--line-light);
    border-left: 2px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--paper-alt);
}

.finder-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    border-top: 1px solid var(--line-light);
}

.finder-cta .lead {
    margin-top: var(--s-3);
}

/* ============================================================ APP GROUPS */

.app-group + .app-group {
    margin-top: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}

.app-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line-light);
}

.app-group__head .link-arrow {
    margin-left: auto;
}

/* The industry mark: the same square as the cards below it, one size up, so
   the head reads as the parent of the grid rather than a separate element. */
.app-group__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    border-radius: var(--r-card);
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--accent) 11%, transparent),
        color-mix(in srgb, var(--accent) 4%, transparent));
    color: var(--brand);
    flex: none;
}

/* The step in the rule: it sits where the border would be, between the title
   and the link, so the head reads as one line of circuitry. */
.app-group__trace {
    flex: 1;
    align-self: flex-end;
    min-width: 90px;
    height: 14px;
    /* Pulled down so the horizontal run of the trace lands on the rule the
       head already draws, instead of floating above it. */
    margin-bottom: calc(var(--s-4) * -1 - 1px);
    fill: var(--line-light);
    stroke: var(--line-light);
    stroke-width: 1;
}

.app-group__trace path {
    fill: none;
}

@media (max-width: 720px) {
    .app-group__trace {
        display: none;
    }
}

/* ====================================================== APPLICATION CARDS
   One card design for every place applications are listed: the /applications
   index and the "what are you working on?" block of an industry page. No
   photography — the card is carried by the icon, the spacing and two
   hairlines. Route, copy and data are untouched; this is presentation only. */

.app-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

.app-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 13px;
    align-content: start;
    padding: var(--s-4) var(--s-4) 3.4rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-card);
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(2, 10, 14, .04);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}

.app-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line-light));
    box-shadow: 0 2px 4px rgba(2, 10, 14, .05), 0 14px 28px -14px rgba(2, 10, 14, .18);
}

.app-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
    border-radius: 12px;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--accent) 12%, transparent),
        color-mix(in srgb, var(--accent) 4%, transparent));
    color: var(--brand);
    transition: transform var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out);
}

.app-card:hover .app-card__icon {
    transform: scale(1.06);
    border-color: color-mix(in srgb, var(--brand) 34%, transparent);
}

.app-card__body {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 0;
}

.app-card__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.25;
    color: var(--on-light);
}

.app-card__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

/* The board trace: two hairlines and two pads, top right, almost invisible
   until the card is hovered. */
.app-card__trace {
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 34px;
    z-index: -1;
    fill: var(--line-light);
    stroke: var(--line-light);
    stroke-width: 1;
    transition: fill var(--dur-2) var(--ease-out), stroke var(--dur-2) var(--ease-out);
}

.app-card__trace path {
    fill: none;
}

.app-card:hover .app-card__trace {
    fill: color-mix(in srgb, var(--accent) 42%, transparent);
    stroke: color-mix(in srgb, var(--accent) 42%, transparent);
}

/* The rule grows sideways on hover — the only motion in the lower half. */
.app-card__rule {
    position: absolute;
    left: var(--s-4);
    bottom: var(--s-4);
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transition: width var(--dur-2) var(--ease-out);
}

.app-card:hover .app-card__rule {
    width: 48px;
}

.app-card__go {
    position: absolute;
    right: 14px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--on-light);
    transition: background var(--dur-2) var(--ease-out),
                color var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
}

.app-card:hover .app-card__go {
    background: var(--brand);
    color: #FFFFFF;
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .app-card,
    .app-card:hover,
    .app-card:hover .app-card__icon,
    .app-card:hover .app-card__go {
        transform: none;
    }
}

/* Phones: the icon steps down so the copy keeps its width. */
@media (max-width: 560px) {
    .app-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .app-card {
        padding: var(--s-4) var(--s-4) 3.25rem;
        column-gap: 12px;
    }

    .app-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    .app-card__rule {
        left: var(--s-4);
        bottom: var(--s-4);
    }
}

/* ========================================================== CLUSTER CARDS */

.cluster-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cluster-card {
    display: grid;
    gap: var(--s-4);
    align-content: start;
    padding: var(--s-6);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: var(--paper);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.cluster-card:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line-light));
    box-shadow: var(--shadow-sm);
}

.cluster-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding-top: var(--s-4);
    margin-top: auto;
    border-top: 1px solid var(--line-light);
}

.section--light .tag-mono,
.section--alt .tag-mono {
    background: rgba(44, 124, 66, .1);
    color: var(--brand);
}

/* ==================================================================== TEAM
   One team, one row. Every member gets the same frame, the same crop and the
   same weight — hierarchy comes from the copy, never from photo size. */

.team {
    background: var(--paper-alt);
}

.team__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: var(--s-6) clamp(2rem, 4vw, 4rem);
}

.team__intro {
    max-width: 42rem;
}

.team__title {
    margin-top: var(--s-4);
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    color: var(--on-light);
}

.team__intro .lead {
    margin-top: var(--s-4);
    max-width: 36rem;
}

.team__aside {
    display: grid;
    justify-items: start;
    align-content: end;
    gap: var(--s-5);
    padding-left: clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--line-light);
}

.team__aside-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 0.95rem + 1vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--on-light);
}

.team__aside-lead {
    max-width: 24rem;
    font-size: clamp(14px, 0.9vw, 16px);
    line-height: 1.5;
    color: var(--on-light-2);
}

.team__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) clamp(1.5rem, 2.6vw, 2.75rem);
    margin: var(--s-2) 0 0;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-light);
}

.team__facts dt {
    font-family: var(--font-display);
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--brand);
}

.team__facts dd {
    margin: 6px 0 0;
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.66vw, 11px);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-light-2);
}

.team__find {
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.8vw, 13px);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.team__aside .team__find {
    margin-top: var(--s-2);
}

.team__note {
    margin-top: var(--s-8);
}

/* ------------------------------------------------------------------ Row */

.team-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.1vw, 1.25rem);
    margin-top: clamp(2rem, 3.5vw, 3rem);
    align-items: stretch;
}

/* One card = one photo. Name, role and territory live inside it, so the row
   stays perfectly aligned whatever the copy length. */

.team-member {
    position: relative;
    aspect-ratio: 4 / 6.2;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--paper);
    isolation: isolate;
}

.team-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 520ms var(--ease-out);
}

.team-photo__grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(44, 124, 66, .11) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(to bottom, rgba(44, 124, 66, .11) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--paper-alt);
}

.team-photo__monogram {
    position: absolute;
    inset: 0 0 43% 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--line-light-2);
}

.team-photo__pending {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    font-family: var(--font-mono);
    font-size: clamp(9px, 0.6vw, 11px);
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--on-light-3);
}

/* ---------------------------------------------------- Information panel */

.team-member__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 120px;
    padding: 1.05rem 0.7rem 0.5rem;
    background: linear-gradient(to top,
        rgba(6, 33, 15, .97) 0%,
        rgba(6, 33, 15, .965) 70%,
        rgba(6, 33, 15, .93) 84%,
        rgba(6, 33, 15, .55) 93%,
        rgba(6, 33, 15, 0) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.team-member__panel {
    flex: none;
}

.team-member__name {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.05;
    text-transform: uppercase;
    color: #fff;
}

.team-member__role {
    margin-top: 3px;
    font-size: clamp(13px, 0.82vw, 15px);
    line-height: 1.2;
    color: rgba(255, 255, 255, .92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.team-member__scope {
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.64vw, 11px);
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--accent-glow);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.team-member__actions {
    display: grid;
    gap: 5px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), margin-top var(--dur-2) var(--ease-out);
}

.team-member__actions a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-family: var(--font-mono);
    font-size: clamp(9px, 0.6vw, 11px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    transition: color var(--dur-1) var(--ease-out);
}

.team-member__actions a:hover,
.team-member__actions a:focus-visible {
    color: var(--accent-glow);
}

.team-member:hover .team-member__info,
.team-member:focus-within .team-member__info {
    height: auto;
    min-height: 120px;
}

.team-member:hover .team-member__actions,
.team-member:focus-within .team-member__actions {
    max-height: 4rem;
    opacity: 1;
    margin-top: var(--s-3);
}

.team-member:hover .team-photo img,
.team-member:focus-within .team-photo img {
    transform: scale(1.02);
}

.team-member:hover {
    box-shadow: 0 0 0 1px rgba(44, 124, 66, .3), 0 20px 40px -26px rgba(2, 10, 14, .55);
}

/* ------------------------------------------------------------ Responsive */

/* Wider cards need a proportionally shorter panel, or the copy floats in a
   void of green. The photo simply shows more of the person instead. */

@media (max-width: 1499px) {
    .team-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(1.1rem, 2vw, 2rem);
    }

    .team-member { aspect-ratio: 4 / 5.2; }

    .team-member__info { height: 118px; }

    .team-member:hover .team-member__info,
    .team-member:focus-within .team-member__info { min-height: 118px; }
}

@media (max-width: 1100px) {
    .team-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-member__info { height: 29%; }

    .team-member:hover .team-member__info,
    .team-member:focus-within .team-member__info { min-height: 29%; }
}

@media (max-width: 1040px) {
    .team__head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .team__aside {
        padding-left: 0;
        padding-top: var(--s-6);
        border-left: 0;
        border-top: 1px solid var(--line-light);
    }
}

@media (max-width: 860px) {
    .team-row {
        display: flex;
        gap: var(--s-4);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: var(--s-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .team-row::-webkit-scrollbar { display: none; }

    .team-member {
        flex: 0 0 min(72vw, 17rem);
        scroll-snap-align: start;
    }

    .team-member { aspect-ratio: 4 / 5.4; }

    .team-member__info { height: 132px; }

    .team-member:hover .team-member__info,
    .team-member:focus-within .team-member__info { height: 132px; min-height: 132px; }

    .team-member__actions {
        max-height: 4rem;
        opacity: 1;
        margin-top: var(--s-3);
    }

    .team-member__name { font-size: 20px; }
    .team-member__role { font-size: 15px; }
    .team-member__scope { font-size: 11px; }
    .team-member__actions a { font-size: 11px; }

    .team__pillars {
        gap: var(--s-2) var(--s-4);
    }

    .team__pillars span + span::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    .team-photo img,
    .team-member__actions {
        transition: none;
    }

    .team-member:hover .team-photo img,
    .team-member:focus-within .team-photo img {
        transform: none;
    }
}

/* ====================================================== CUSTOMER DIRECTORY */

.directory {
    display: grid;
    gap: var(--s-8);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
}

.directory__group {
    display: grid;
    gap: var(--s-4);
    align-content: start;
}

.directory__state {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line-light);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.018em;
}

.directory__state span {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--brand);
}

.directory__list {
    display: grid;
    gap: 2px;
}

.directory__item {
    padding: 5px 0;
    font-size: var(--fs-sm);
    color: var(--on-light-2);
}

/* ==================================================== DISTRIBUTION NETWORK
   Page-specific blocks for /distributors. Nothing here overrides a shared
   class; the page otherwise runs on the existing design system. */

.dist-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.dist-card {
    display: grid;
    align-content: start;
    gap: var(--s-3);
    padding: var(--s-5);
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper);
    transition: border-color var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}

.dist-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* One fixed frame for every mark, so no logo can dwarf another. The supplied
   logos all sit on the same 2:1 canvas, so the artwork fills the frame edge to
   edge and the seven cards read identically. A family without a logo falls
   back to the wordmark inside the same frame. */
.dist-card__mark {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 1;
    margin: 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--paper-alt);
    overflow: hidden;
}

.dist-card__mark:has(img) {
    padding: 0;
}

.dist-card__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dist-card__wordmark {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--on-light-2);
}

.dist-card__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

.dist-card__actions {
    display: grid;
    justify-items: start;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

/* The card is now a plate for the mark and nothing else. There is nothing to
   click, so it does not lift or change colour under the pointer. */
.dist-card--mark-only {
    padding: var(--s-4);
}

.dist-card--mark-only:hover {
    border-color: var(--line-light);
    transform: none;
    box-shadow: none;
}

/* ------------------------------------------------------------ Flow steps */

.flow-steps {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-top: clamp(2rem, 3vw, 3rem);
    counter-reset: flow;
    list-style: none;
}

.flow-step {
    position: relative;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-dark);
}

.flow-step::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 34px;
    height: 2px;
    background: var(--accent);
}

.flow-step__n {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .16em;
    color: var(--accent-bright);
}

.flow-step__title {
    margin-top: var(--s-3);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--on-dark);
}

.flow-step__text {
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-dark-3);
}

/* --------------------------------------------------------- Channel picker
   Radios plus :has() — the panels switch with no JavaScript. Where :has() is
   unsupported every panel simply stays visible, which still answers the
   question. */

.channel {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
    margin-top: clamp(2rem, 3vw, 3rem);
}

.channel__options {
    display: grid;
    gap: var(--s-2);
    border: 0;
    padding: 0;
    margin: 0;
}

.channel__legend {
    margin-bottom: var(--s-4);
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.7vw, 12px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-light-3);
}

.channel__option {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: var(--fs-sm);
    color: var(--on-light-2);
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.channel__option:hover {
    border-color: var(--on-light-3);
    color: var(--on-light);
}

.channel__mark {
    width: 15px;
    height: 15px;
    flex: none;
    border: 1px solid var(--line-light-2);
    border-radius: 50%;
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.channel__radio:checked + .channel__option {
    border-color: var(--brand);
    color: var(--on-light);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.channel__radio:checked + .channel__option .channel__mark {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 4px var(--brand);
}

.channel__radio:focus-visible + .channel__option {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.channel__panel {
    display: grid;
    justify-items: start;
    gap: var(--s-4);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    background: var(--paper);
}

.channel__panels {
    display: grid;
    gap: var(--s-4);
}

@supports selector(:has(*)) {
    .channel__panel { display: none; }

    .channel:has(#need-availability:checked) .channel__panel[data-need='availability'],
    .channel:has(#need-samples:checked) .channel__panel[data-need='samples'],
    .channel:has(#need-production:checked) .channel__panel[data-need='production'],
    .channel:has(#need-bom:checked) .channel__panel[data-need='bom'],
    .channel:has(#need-alternative:checked) .channel__panel[data-need='alternative'],
    .channel:has(#need-talk:checked) .channel__panel[data-need='talk'] {
        display: grid;
    }
}

.channel__answer {
    font-size: calc(var(--fs-sm) + 1px);
    line-height: var(--lh-relaxed);
    color: var(--on-light);
}

.channel__fallback {
    padding-left: var(--s-4);
    border-left: 2px solid var(--brand);
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

/* -------------------------------------------------------- Part-number search */

.part-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.part-search__input {
    flex: 1 1 18rem;
    min-width: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line-dark);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .04);
    color: var(--on-dark);
    font-size: 0.9375rem;
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.part-search__input::placeholder {
    color: var(--on-dark-4);
}

.part-search__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(35, 180, 95, .16);
}

.part-search__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    font-size: var(--fs-sm);
    color: var(--on-dark-3);
}

/* ------------------------------------------------------------- Role chain */

.role-chain {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: clamp(2rem, 3vw, 3rem);
    list-style: none;
}

.role {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    padding: var(--s-5);
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper);
}

/* A chevron between the cards turns four boxes into one path. Decorative, so
   it is drawn in CSS and never announced to a screen reader. */
@media (min-width: 901px) {
    .role-chain {
        position: relative;
    }

    .role + .role::before {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(var(--s-4) * -1);
        width: var(--s-4);
        height: 1px;
        background: var(--line-light-2);
    }

    .role {
        position: relative;
    }
}

/* CODETICA is the link in the chain, so it reads as the link. */
.role--us {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.role__icon {
    color: var(--brand);
}

.role__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--on-light);
}

.role__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

.center {
    text-align: center;
}

@media (max-width: 900px) {
    .channel {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ====================================================== INDUSTRY HERO (white)
   One template for all nine industry pages: same height, same type scale,
   same breadcrumb and metric positions. The photograph and the copy are the
   only things that change, and the photograph is optional — an industry
   without one gets the identical hero, just without the picture. */

.industry-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* 580-680px on desktop, as specified. */
    min-height: clamp(34rem, 31rem + 4.5vw, 39rem);
    padding-block: clamp(2rem, 1.5rem + 1.6vw, 3rem);
    padding-top: calc(var(--header-h) + clamp(1.25rem, 0.9rem + 2vw, 2.5rem));
    background: var(--paper);
    overflow: hidden;
    isolation: isolate;
}

.industry-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--s-4);
}

/* The copy keeps to the left 55% so it never runs over the subject. */
.industry-hero__inner > * {
    max-width: min(55%, 42rem);
}

.breadcrumb--light {
    color: var(--on-light-3);
}

.breadcrumb--light a:hover {
    color: var(--brand);
}

.industry-hero .eyebrow {
    color: var(--brand);
}

/* --accent is tuned for ink backgrounds and only reaches 2.7:1 on white.
   On this hero the highlight uses --brand, which clears AA at 5.2:1. */
.industry-hero .text-accent {
    color: var(--brand);
}

.industry-hero__title {
    font-size: var(--fs-h1);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    color: var(--on-light);
}

.industry-hero__title span {
    display: block;
}

.industry-hero__lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
    max-width: 52ch;
}

.industry-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    padding-top: var(--s-5);
    margin-top: var(--s-2);
    border-top: 1px solid var(--line-light);
    font-size: var(--fs-xs);
    color: var(--on-light-3);
}

/* The photograph. Absolutely placed behind the copy on desktop; on phones the
   rules below turn it back into a normal block underneath the text. */
.industry-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.industry-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-pos, center right);
}

/* A veil, never an overlay: it fades the picture into the white page exactly
   where the type sits and leaves the subject untouched. */
.industry-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, .98) 35%,
        rgba(255, 255, 255, .72) 55%,
        rgba(255, 255, 255, 0) 75%
    );
}

@media (max-width: 1100px) {
    .industry-hero__veil {
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .99) 45%,
            rgba(255, 255, 255, .85) 65%,
            rgba(255, 255, 255, .35) 85%,
            rgba(255, 255, 255, 0) 100%
        );
    }
}

/* Phones: the picture is not a backdrop behind the words — text first, whole
   image underneath, nothing cropped and nothing to read through. */
@media (max-width: 860px) {
    .industry-hero {
        display: block;
        min-height: 0;
        padding-bottom: 0;
        overflow: visible;
    }

    .industry-hero__inner > * {
        max-width: none;
    }

    .industry-hero__media {
        position: static;
        margin-top: clamp(2rem, 5vw, 3rem);
    }

    .industry-hero__media img {
        height: auto;
        object-fit: contain;
    }

    .industry-hero__veil {
        display: none;
    }
}

/* ===================================================== Component family card
   Picture on top, copy on paper underneath. The two are one composition —
   the artwork fades into the card's own white — but the type never sits on
   the photograph, so a two-line name stays as readable as a one-line one.
   Opt in per family with `hero_image` in config/technologies.php; a family
   without one keeps the same card, just without the picture. */

.fam-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.fam-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 15.5rem;
    border: 1px solid var(--line-light);
    border-radius: var(--r-sm);
    background: var(--paper);
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}

.fam-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* No picture yet: the copy still sits where every other card's copy sits. */
.fam-card--plain {
    grid-template-rows: 1fr;
    align-content: end;
}

/* A fixed ratio, not the leftover space: every picture in the grid is the
   same height whatever the length of the name beneath it. */
.fam-card__art {
    position: relative;
    aspect-ratio: 16 / 7.4;
    overflow: hidden;
}

/* The picture lives on a pseudo-element so hover can scale it without moving
   the fade that blends it into the card. */
.fam-card__art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--fam-photo);
    background-size: cover;
    background-position: var(--fam-pos, 50% 50%);
    background-repeat: no-repeat;
    /* --fam-zoom magnifies the crop from the point named in --fam-pos, for the
       photographs that leave part of the frame empty. 1 = the photo as it is. */
    transform-origin: var(--fam-pos, 50% 50%);
    transform: scale(var(--fam-zoom, 1));
    transition: transform 320ms var(--ease-out);
}

/* A hairline of softening where the picture meets the card, nothing more:
   anything longer reads as empty space between the photograph and the name. */
.fam-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 90%,
        var(--paper) 100%
    );
}

.fam-card:hover .fam-card__art::before {
    transform: scale(calc(var(--fam-zoom, 1) * 1.04));
}

@media (prefers-reduced-motion: reduce) {
    .fam-card__art::before,
    .fam-card:hover .fam-card__art::before {
        transition: none;
        transform: scale(var(--fam-zoom, 1));
    }
}

.fam-card__body {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-5) var(--s-5);
    background: var(--paper);
}

.fam-card__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.fam-card__icon {
    display: inline-flex;
    flex: none;
    color: var(--brand);
}

.fam-card__title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.2;
    color: var(--on-light);
}

.fam-card__arrow {
    display: inline-flex;
    flex: none;
    color: var(--on-light-3);
    transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

/* The mark is a plus, not an arrow: the card opens a dialog, it does not go
   anywhere. So it grows on hover instead of sliding forward. */
.fam-card:hover .fam-card__arrow,
button.tile:hover .tile__title svg {
    color: var(--brand);
    transform: scale(1.18);
}

.fam-card__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

/* ======================================================== CONTACT SECTION
   Two columns on desktop: the reference material on the left, the form —
   the reason anyone is on this page — on the right and twice as wide. The
   form comes first in the markup, so a phone shows the action first and the
   grid only reorders on wide screens. */

.contact__grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .contact__grid {
        grid-template-columns: 36fr 64fr;
        align-items: start;
    }

    .contact__side { grid-column: 1; grid-row: 1; }
    .contact__main { grid-column: 2; grid-row: 1; }
}

.contact__side {
    display: grid;
    gap: 24px;
    align-content: start;
}

/* -------------------------------------------------------------- Panels */

.panel {
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
    border: 1px solid var(--line-light);
    border-radius: 15px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(2, 10, 14, .04);
}

.panel--form {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

/* The board behind the form: two hairlines and a pad in the top corner, at
   an opacity that survives a screenshot and nothing more. */
.panel--form::before,
.panel--form::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.panel--form::before {
    top: 0;
    right: 0;
    width: 180px;
    height: 120px;
    background-image:
        linear-gradient(to right, var(--line-light) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-light) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(120px 90px at 100% 0%, #000, transparent 72%);
    mask-image: radial-gradient(120px 90px at 100% 0%, #000, transparent 72%);
}

.panel--form::after {
    left: 0;
    top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    width: 42px;
    height: 2px;
    background: var(--accent);
    opacity: .55;
}

.panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-8);
}

.panel__head--stack {
    display: grid;
    gap: 2px;
    margin-bottom: var(--s-5);
}

.panel__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--on-light);
}

.panel__title--sm {
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
}

.panel__lead {
    margin-top: var(--s-2);
    max-width: 32rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--on-light-2);
}

.panel__head--stack .panel__lead {
    margin-top: 0;
}

.panel__note {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: .04em;
    color: var(--on-light-3);
}

/* ------------------------------------------------------------ Locations */

.loc-list {
    list-style: none;
    display: grid;
}

/* Two columns, not three: the row no longer ends in an arrow button. The
   telephone number and the addresses inside it are the links. */
.loc {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    margin-inline: calc(var(--s-4) * -1);
    border-radius: 11px;
    transition: background var(--dur-1, 160ms) var(--ease-out);
}

.loc + .loc {
    box-shadow: 0 -1px 0 var(--line-light);
}

.loc--link:hover {
    background: rgba(35, 180, 95, .05);
    box-shadow: none;
}

.loc--link:hover + .loc {
    box-shadow: none;
}

.loc__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
    border-radius: 12px;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--accent) 12%, transparent),
        color-mix(in srgb, var(--accent) 4%, transparent));
    color: var(--brand);
}

.loc__body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.loc__name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--on-light);
}

.loc__meta {
    font-size: var(--fs-xs);
    color: var(--on-light-3);
}

.loc__line {
    font-size: var(--fs-xs);
    color: var(--on-light-2);
    width: fit-content;
    transition: color var(--dur-1, 160ms) var(--ease-out);
}

.loc__line:hover {
    color: var(--brand);
}

/* ---------------------------------------------------------- Find my rep */

.rep-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    border-radius: 15px;
    background: var(--ink-1000);
    isolation: isolate;
}

.rep-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(64% 90% at 88% 6%, rgba(35, 180, 95, .16), transparent 62%),
        linear-gradient(180deg, var(--ink-1000), #031012);
}

/* The same drawing as the heroes, scaled down and pushed into the corner. */
.rep-cta .hero-fig {
    top: auto;
    bottom: -34%;
    right: -24%;
    width: 300px;
    transform: none;
    opacity: .5;
    z-index: -1;
}

.rep-cta__body {
    display: grid;
    gap: var(--s-3);
    justify-items: start;
}

.rep-cta__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--on-dark);
}

.rep-cta__text {
    max-width: 24rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--on-dark-2);
}

.rep-cta .btn {
    margin-top: var(--s-2);
}

/* ------------------------------------------------------------ Form grid */

.form-grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid .field--full {
    grid-column: 1 / -1;
}

/* Industry and company type read as a pair, so they take half the row each
   and leave the third column empty rather than orphaning one field. */
.form-grid [data-field="industry"],
.form-grid [data-field="company_type"] {
    grid-column: span 1;
}

@media (max-width: 1200px) and (min-width: 561px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Only the required fields are marked, and they are marked once — the label
   carries a star instead of every other field carrying the word "optional". */
.panel--form .field__label .opt {
    display: none;
}

@supports selector(:has(*)) {
    .panel--form .field:has([required]) .field__label::after {
        content: ' *';
        color: var(--brand);
        font-weight: 700;
    }
}

.panel--form textarea.field__control {
    min-height: 150px;
}

/* ------------------------------------------------------------ Send row */

.form-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
    margin-top: var(--s-8);
}

.btn--send {
    min-height: 54px;
    padding-inline: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    border-radius: 8px;
    font-size: 1rem;
}

.btn--send:hover {
    transform: translateY(-1px);
}

.form-send .form-note {
    flex: 1 1 260px;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--on-light-3);
}

@media (max-width: 560px) {
    .form-send {
        gap: var(--s-4);
    }

    .btn--send {
        width: 100%;
        justify-content: center;
    }

    .form-send .form-note {
        flex: 1 1 100%;
    }
}