/* JOMEVO — Internationale Kontakte — FINAL
   Base: "luxe" (no boxes; four columns of air separated by full-height mint hairlines).
   Grafted in: numbered's "01 — 04" counter, editorial's ghost column numerals + mint HQ
   top-rule, the current build's circular mint icon chips, numbered's ruled contact rows.
   Fixed: orphan shield, missing outer gutter, lost HQ hierarchy, white role line,
   broken mobile footnote. */

.contacts {
    --mint: #B2DCD7;
    --hair: rgba(178, 220, 215, .15);
    --frame: rgba(178, 220, 215, .22);
    --hair-soft: rgba(178, 220, 215, .085);
    --ink: rgba(255, 255, 255, .94);
    --ink-soft: rgba(255, 255, 255, .80);
    --gridPadT: 62px;
    --colGut: 2.1rem;
    margin: 0 0 56px;
    text-align: center;
}

/* ---------------------------------------------------------------- masthead */

.contacts-head {
    position: relative;
    margin: 0 0 76px;
    padding-top: 44px;
}

/* a single thin mint stroke dropping into the title — the site's "decoration line" */
.contacts-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 26px;
    background: linear-gradient(to bottom, rgba(178, 220, 215, 0), var(--mint));
}

.contacts-title {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: .026em;
    line-height: 1.14;
}

/* "01 — 04": tells the reader this is a set of four, in a language-neutral glyph */
.contacts-title::before {
    content: "01 — 04";
    display: block;
    margin: 0 0 1.15rem;
    color: rgba(178, 220, 215, .72);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .42em;
    text-indent: .42em;
    line-height: 1;
}

.contacts-claim {
    position: relative;
    margin: 2.6rem 0 0;
    color: rgba(178, 220, 215, .92);
    font-size: .6875rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .38em;
    text-indent: .38em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* the site's outlined four-point sparkle, as the divider between title and claim */
.contacts-claim::before {
    content: "";
    position: absolute;
    top: -1.7rem;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    background: var(--mint);
    opacity: .88;
    clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
}

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

/* the band is framed by two full-width hairlines; the vertical rules between the
   columns run between them, so the whole thing reads as one ruled sheet */
.contacts-grid {
    counter-reset: market;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    padding: var(--gridPadT) 1.9rem 0;
    border-top: 1px solid var(--frame);
    border-bottom: 1px solid var(--frame);
}

.contacts-grid > [class*="col-"] {
    counter-increment: market;
    position: relative;
    display: flex;
    padding-left: 0;
    padding-right: var(--colGut);
    margin-bottom: 0;
}

.contacts-grid > [class*="col-"] + [class*="col-"] {
    padding-left: var(--colGut);
}

/* the column rules are gradients, not flat strokes: brightest where the eye enters
   the band, dissolving toward the baseline */
.contacts-grid > [class*="col-"] + [class*="col-"]::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gridPadT));
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(178, 220, 215, .30) 0%,
        rgba(178, 220, 215, .14) 46%,
        rgba(178, 220, 215, .05) 100%);
}

.contacts-grid > [class*="col-"]:last-child { padding-right: 0; }

.contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 0;
    /* the bottom air sits inside the column, so the vertical rules reach the baseline */
    padding: 0 0 2.6rem;
    transition: none;
}
.contact-card:hover { transform: none; background: none; }

/* a barely-there wash on hover — light falling on the column, not a panel */
.contact-card::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gridPadT));
    bottom: 0;
    left: -.9rem;
    right: -.9rem;
    background: linear-gradient(to bottom, rgba(178, 220, 215, .055), rgba(178, 220, 215, 0) 58%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease;
}
.contact-card:hover::before,
.contact-card:focus-within::before { opacity: 1; }

/* ghost index in the column gutter — set, not decoration */
.contact-card::after {
    content: counter(market, decimal-leading-zero);
    position: absolute;
    top: -.55rem;
    right: 0;
    color: rgba(178, 220, 215, .14);
    font-size: 2.125rem;
    font-weight: 300;
    letter-spacing: .02em;
    line-height: 1;
    pointer-events: none;
    transition: color .5s ease;
}
.contact-card:hover::after,
.contact-card:focus-within::after { color: rgba(178, 220, 215, .26); }
.contact-card--hq::after { color: rgba(178, 220, 215, .24); }

/* ------------------------------------------------------------------ region */

.contact-region {
    position: static;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.45rem;
    /* clearance for the ghost index sitting in the gutter */
    padding-right: 2.8rem;
    min-height: 3.3em;
    color: rgba(178, 220, 215, .85);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .19em;
    text-transform: uppercase;
    line-height: 1.65;
}

/* headquarters: a mint segment laid over the frame hairline above the column.
   One stroke, no box — the quietest possible way to say "this one is primary". */
.contact-card--hq {
    --hq: 1;
}
.contact-card--hq .contact-region {
    gap: .5rem;
    /* the crest already fills the gutter, so the index needs less clearance here */
    padding-right: 2.5rem;
    color: var(--mint);
    font-weight: 500;
    letter-spacing: .2em;
}
.contact-card--hq .contact-region::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gridPadT) - 1px);
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--mint) 0%, var(--mint) 58%, rgba(178, 220, 215, .25) 100%);
}

/* the shield now sits in the kicker line as a round mint chip — the gallery-button
   shape — instead of floating unattached above the grid */
.contact-shield {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid rgba(178, 220, 215, .45);
    border-radius: 50%;
    color: var(--mint);
}
.contact-shield svg { width: .75rem; height: .75rem; display: block; }

/* -------------------------------------------------------------------- name */

.contact-name {
    position: relative;
    margin: 0;
    padding: 0 0 1.5rem;
    min-height: calc(2.6em + 1.5rem);
    color: #fff;
    font-size: 1.3125rem;
    font-weight: 300;
    letter-spacing: .012em;
    line-height: 1.3;
}
/* the one accent: a mint rule that grows under the name on hover */
.contact-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .6rem;
    width: 22px;
    height: 1px;
    background: var(--mint);
    opacity: .42;
    transition: width .55s cubic-bezier(.22, .61, .36, 1), opacity .55s ease;
}
.contact-card:hover .contact-name::after,
.contact-card:focus-within .contact-name::after {
    width: 66px;
    opacity: 1;
}
.contact-card--hq .contact-name { font-weight: 400; }
.contact-card--hq .contact-name::after { width: 44px; opacity: .9; }

/* role returns to the site's mint italic so it stops competing with the name */
.contact-role {
    margin: 0 0 1.55rem;
    min-height: 3.1em;
    color: rgba(178, 220, 215, .88);
    font-size: .8125rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: .035em;
    line-height: 1.55;
}

.contact-address {
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
    color: var(--ink-soft);
    font-size: .875rem;
    font-weight: 300;
    letter-spacing: .012em;
    line-height: 1.85;
}

/* -------------------------------------------------------------------- rows */

/* the contact data hangs from the baseline of the band, so the last row of every
   column lands on the same line no matter how long the address above it runs */
.contact-rows {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--hair);
}

/* each value on its own ruled row — the fastest place to land on a number */
.contact-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--hair-soft);
}
.contact-row:last-child { border-bottom: 0; }

/* round mint chip — the same shape as the gallery buttons */
.contact-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(178, 220, 215, .3);
    border-radius: 50%;
    background: none;
    color: rgba(178, 220, 215, .85);
    transition: color .4s ease, border-color .4s ease, background-color .4s ease;
}
.contact-icon svg { width: .875rem; height: .875rem; display: block; }
.contact-row:hover .contact-icon,
.contact-row:focus-within .contact-icon {
    background: rgba(178, 220, 215, .1);
    border-color: var(--mint);
    color: var(--mint);
}

.contact-value {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-label {
    color: rgba(178, 220, 215, .88);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1.45;
}

.contact-value a,
.contact-value > span.notranslate {
    display: block;
    margin-top: .22rem;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 300;
    letter-spacing: .015em;
    line-height: 1.35;
    white-space: nowrap;
}

/* links get a hairline that fills in on hover, instead of an underline */
.contact-value a {
    position: relative;
    text-decoration: none;
    transition: color .35s ease;
}
.contact-value a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.contact-value a:hover { color: var(--mint); }
.contact-value a:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- footnote */

.contacts-footnote {
    margin: 46px auto 0;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, .74);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.9;
    text-align: center;
}
.contacts-footnote-shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .6rem;
    vertical-align: -.5em;
    border: 1px solid rgba(178, 220, 215, .3);
    border-radius: 50%;
    color: rgba(178, 220, 215, .85);
}
.contacts-footnote-shield svg { width: .8rem; height: .8rem; display: block; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1399.98px) {
    .contacts { --colGut: 1.8rem; }
    .contacts-grid { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 1199.98px) {
    .contacts { --colGut: 1.45rem; }
    .contacts-title { font-size: 2.3rem; }
    .contact-name { font-size: 1.18rem; }
    .contact-region { letter-spacing: .18em; padding-right: 2.2rem; }
    .contact-card::after { font-size: 1.75rem; }

}

/* two up */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contacts { --colGut: 1.6rem; --gridPadT: 50px; }
    .contacts-grid { padding-left: 0; padding-right: 0; }
    .contacts-grid > [class*="col-"]:nth-child(odd) {
        padding-left: 15px;
        padding-right: var(--colGut);
    }
    .contacts-grid > [class*="col-"]:nth-child(odd)::before { display: none; }
    .contacts-grid > [class*="col-"]:nth-child(even) {
        padding-left: var(--colGut);
        padding-right: 15px;
    }
    .contacts-grid > [class*="col-"]:nth-child(even)::before { display: block; }
    .contacts-grid > [class*="col-"]:nth-child(n + 3)::before { top: 0; }
    .contacts-grid > [class*="col-"]:nth-child(n + 3) {
        margin-top: 46px;
        padding-top: 46px;
        border-top: 1px solid var(--hair);
    }
    .contact-rows { min-height: 0; }
    .contact-card { padding-bottom: 2.4rem; }
    .contact-region,
    .contact-name,
    .contact-role { min-height: 0; }
    .contact-name { padding-bottom: 1.2rem; }
}

@media (max-width: 991.98px) {
    .contacts { margin-bottom: 40px; }
    .contacts-head { margin-bottom: 56px; }
    .contacts-title { font-size: 2rem; }
    .contacts-claim { letter-spacing: .3em; text-indent: .3em; }
}

/* stacked — the hairline turns horizontal and separates the entities */
@media (max-width: 767.98px) {
    .contacts { margin-bottom: 32px; --gridPadT: 42px; }
    .contacts-head { padding-top: 34px; margin-bottom: 46px; }
    .contacts-title { font-size: 1.6rem; letter-spacing: .02em; }
    .contacts-title::before { letter-spacing: .34em; text-indent: .34em; margin-bottom: .95rem; }
    .contacts-claim {
        margin-top: 2.2rem;
        font-size: .625rem;
        letter-spacing: .26em;
        text-indent: .26em;
    }

    .contacts-grid {
        padding: var(--gridPadT) 0 0;
        margin-left: 0;
        margin-right: 0;
    }
    .contacts-grid > [class*="col-"],
    .contacts-grid > [class*="col-"]:last-child {
        padding-left: 15px;
        padding-right: 15px;
    }
    .contacts-grid > [class*="col-"]::before { display: none; }
    .contacts-grid > [class*="col-"] + [class*="col-"] {
        padding-left: 15px;
        margin-top: 36px;
        padding-top: 36px;
        border-top: 1px solid var(--hair);
    }

    .contact-card { padding-bottom: 36px; }
    .contact-card::after { top: -.4rem; right: 0; font-size: 1.625rem; }
    .contact-card--hq .contact-region::before { left: 0; right: 0; }

    .contact-region {
        min-height: 0;
        margin-bottom: 1.15rem;
        padding-right: 2.4rem;
        letter-spacing: .18em;
    }
    .contact-name { min-height: 0; font-size: 1.25rem; padding-bottom: 1rem; }
    .contact-name::after { width: 32px; opacity: .6; }
    .contact-card--hq .contact-name::after { width: 40px; }
    .contact-role { min-height: 0; margin-bottom: 1.15rem; }
    .contact-address { margin-bottom: 1.5rem; }
    .contact-rows { min-height: 0; }

    .contacts-footnote {
        margin-top: 42px;
        max-width: 19.5rem;
        font-size: .625rem;
        letter-spacing: .1em;
        line-height: 2.1;
    }
    /* the crest sits on its own line so the sentence can break naturally */
    .contacts-footnote-shield {
        display: block;
        margin: 0 auto .9rem;
        vertical-align: baseline;
    }
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
    .contact-card::before,
    .contact-card::after,
    .contact-name::after,
    .contact-icon,
    .contact-value a,
    .contact-value a::after { transition: none; }
}

/* ---------------------------------------------------- second claim line
   "Pure power from nature" under the brand line, as in the client's PDF. */
.contacts-subclaim {
    margin: .85rem 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: .8125rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: .06em;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .contacts-subclaim { font-size: .75rem; margin-top: .7rem; }
}