/* =============================================================
   HOX Media — team profile pages (/team/{profile})
   Premium, mobile-first. EVERY rule is scoped to .team-profile-page
   so it can never affect any other page. Uses the existing brand
   tokens (--theme #FC3, black, white) and faces (ZonaPro / Montserrat)
   already loaded by main.min.css.
   ============================================================= */

.team-profile-page {
    background-color: var(--black, #000);
    color: var(--white, #fff);
}

/* Keep the profile clear of the transparent fixed header. */
.team-profile-page .tp-hero {
    padding-top: clamp(7rem, 18vw, 11rem);
}

.team-profile-page .container {
    max-width: 1120px;
}

/* ---- Reveal (restrained) ---------------------------------------------- */
.team-profile-page [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.19, 1, .22, 1);
    will-change: opacity, transform;
}

.team-profile-page [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .team-profile-page [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Sections --------------------------------------------------------- */
.team-profile-page .tp-section {
    padding: clamp(3.5rem, 9vw, 7rem) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.team-profile-page .tp-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: clamp(.82rem, 1.5vw, .95rem);
    color: var(--dark-text, #afafaf);
    margin: 0 0 1.6rem;
}

.team-profile-page .tp-heading span {
    color: var(--theme, #fc3);
    font-size: .55em;
    font-weight: 700;
}

/* ---- Hero ------------------------------------------------------------- */
.team-profile-page .tp-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
}

/* Large ghosted initials on the right — RH for Rina, TH for Teuta. */
.team-profile-page .tp-hero__watermark {
    position: absolute;
    right: -.06em;
    top: 50%;
    transform: translateY(-47%);
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 900;
    font-size: clamp(10rem, 38vw, 27rem);
    line-height: .8;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .13);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Give the mark a bit more presence at wider sizes without hurting the text. */
@media (min-width: 768px) {
    .team-profile-page .tp-hero__watermark {
        color: rgba(255, 255, 255, .16);
    }
}

/* No portrait in front of it: nothing breaks up the monogram, so at the tuned
   weight it reads as a slab beside the name rather than as a backdrop. */
.team-profile-page .tp-hero__watermark--bare {
    color: rgba(255, 255, 255, .07);
    font-size: clamp(8rem, 30vw, 22rem);
}

@media (min-width: 768px) {
    .team-profile-page .tp-hero__watermark--bare {
        color: rgba(255, 255, 255, .085);
    }
}

.team-profile-page .tp-hero__inner {
    position: relative;
    z-index: 1;
}

/* Hero cutout photo — sits at the RH/TH monogram position on the right via
   absolute positioning, so the text, monogram and single-column layout stay
   completely untouched. Transparent PNG bleeds into the black hero and overlaps
   the monogram. Shown on wide screens only (clear room beside the name). */
.team-profile-page .tp-hero__photo {
    display: none;
}

/* Shown on wide screens only (clear room beside the name). Anchored just to the
   RIGHT of the name — via the container's left edge plus roughly the name width
   — so the figure sits close to the TEXT, not out by the far-right initials. */
@media (min-width: 1200px) {
    .team-profile-page .tp-hero__photo {
        display: block;
        position: absolute;
        /* Per-profile nudge, set inline from the portrait's `drop` in
           config/team_profiles.php. Every cutout is framed differently — one
           ends at the waist, another at the hip — so where the figure sits in
           the hero is a property of the photo, not of the layout. Unset means
           flush with the hero's bottom edge, as before. The hero clips, so a
           negative value lowers the figure and takes the overhang with it. */
        bottom: var(--tp-photo-drop, 0);
        left: calc((100% - 1120px) / 2 + 43rem);
        height: clamp(26rem, 33vw, 34rem);
        width: auto;
        object-fit: contain;
        object-position: bottom center;
        z-index: 1;
    }
}

.team-profile-page .tp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.75rem, 12vw, 5rem);
    height: clamp(3.75rem, 12vw, 5rem);
    border-radius: 1rem;
    border: 1.5px solid var(--theme, #fc3);
    color: var(--theme, #fc3);
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
}

.team-profile-page .tp-eyebrow {
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: .72rem;
    color: var(--dark-text, #afafaf);
    margin: 0 0 .75rem;
}

.team-profile-page .tp-name {
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.01em;
    font-size: clamp(2.75rem, 12vw, 6rem);
    margin: 0;
}

.team-profile-page .tp-role {
    color: var(--theme, #fc3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(.95rem, 3.4vw, 1.25rem);
    margin: .75rem 0 0;
}

.team-profile-page .tp-tagline {
    color: rgba(255, 255, 255, .82);
    max-width: 34ch;
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    line-height: 1.5;
    margin: 1.5rem 0 0;
}

/* ---- Buttons ---------------------------------------------------------- */
.team-profile-page .tp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

.team-profile-page .tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.6rem;
    border-radius: 10rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
    text-decoration: none;
    transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
    border: 1.5px solid transparent;
}

.team-profile-page .tp-btn--solid {
    background-color: var(--theme, #fc3);
    color: #111;
}

.team-profile-page .tp-btn--solid:hover {
    background-color: #FFD65B;
    transform: translateY(-2px);
    color: #111;
}

.team-profile-page .tp-btn--ghost {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.team-profile-page .tp-btn--ghost:hover {
    border-color: var(--theme, #fc3);
    color: var(--theme, #fc3);
    transform: translateY(-2px);
}

/* ---- Story ------------------------------------------------------------ */
.team-profile-page .tp-story,
.team-profile-page .tp-about__inner {
    max-width: 46rem;
}

.team-profile-page .tp-lead {
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 1.15rem;
}

.team-profile-page .tp-lead--lg {
    font-size: clamp(1.2rem, 4.2vw, 1.6rem);
    color: #fff;
}

/* HOX Media — copy on the left, decorative emblem on the right. */
.team-profile-page .tp-hox-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: center;
}

@media (min-width: 768px) {
    .team-profile-page .tp-hox-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 3.5rem);
    }
}

/* On a phone the two halves stack, and the button was landing between the
   sentence and the emblem it belongs under — you were asked to go and look at
   the portfolio before being shown what HOX does.

   The text block dissolves into the grid so its three parts can be ordered
   around the emblem: heading, sentence, emblem, then the button. */
@media (max-width: 767.98px) {
    .team-profile-page .tp-hox-grid {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        /* The grid rule above sets align-items: center. Down a column that is
           the cross axis, so every item shrank to its content — and the emblem,
           which sizes itself at width: 100% of that, resolved to nothing. */
        align-items: stretch;
    }
    .team-profile-page .tp-hox-grid > .tp-about__inner {
        display: contents;
    }
    .team-profile-page .tp-hox-grid #tp-hox-h { order: 1; }
    .team-profile-page .tp-hox-grid .tp-lead { order: 2; }
    .team-profile-page .tp-hox-emblem { order: 3; }
    .team-profile-page .tp-hox-grid .tp-actions { order: 4; margin-top: 0; }

    /* Scaled, not narrowed. The labels are pinned to the ring's corners by
       percentage, so a narrower ring keeps them in place — but their text does
       not shrink with it, and at a phone's width "Social Media Management" then
       wraps over three lines and lands on the label above it. Scaling takes the
       ring, the spokes and the six names down together.

       The wrapper is given the height the scale actually leaves — 70% of a
       square is 70% of its width — so the button below it sits against the
       emblem rather than against the space the emblem used to need. */
    .team-profile-page .tp-hox-emblem {
        display: block;
        /* .66, not .7: the ring is scaled to 70% but its lowest labels sit at
           6% off the bottom of the unscaled box, so the last thing you can see
           ends at about 66% and the rest was empty. */
        aspect-ratio: 1 / .66;
        /* aspect-ratio only states a preference: the unscaled child is still a
           full square and was stretching the box back to its own height, which
           left 110px of nothing between the emblem and the button. These two
           make the ratio the final word. Nothing is lost to the clip — the
           scaled emblem ends exactly at 70%. */
        min-height: 0;
        overflow: hidden;
    }
    .team-profile-page .tp-emblem {
        transform: scale(.7);
        transform-origin: top center;
    }
}

.team-profile-page .tp-hox-emblem {
    display: flex;
    justify-content: center;
}

/* Emblem with one label per service, placed around its outer points. */
.team-profile-page .tp-emblem {
    position: relative;
    width: 100%;
    max-width: 33rem;
    aspect-ratio: 1;
    margin: 0 auto;
}

.team-profile-page .tp-emblem__svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
    color: rgba(255, 255, 255, .9);   /* currentColor for the whole emblem */
    overflow: visible;
}

.team-profile-page .tp-emblem__label {
    position: absolute;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(.72rem, 1.4vw, .84rem);
    line-height: 1.25;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    max-width: 8rem;
}

/* Three down each side. The service names run two lines where the old
   discipline labels ran one, so the vertical positions are pulled apart to
   keep clear air between them. */
.team-profile-page .tp-emblem__label--tl { top: 6%; left: 0; }
.team-profile-page .tp-emblem__label--tr { top: 6%; right: 0; text-align: right; }
.team-profile-page .tp-emblem__label--l  { top: 50%; left: 0; transform: translate(-0.6rem, -50%); }
.team-profile-page .tp-emblem__label--r  { top: 50%; right: 0; transform: translate(0.6rem, -50%); text-align: right; }
.team-profile-page .tp-emblem__label--bl { bottom: 6%; left: 0; }
.team-profile-page .tp-emblem__label--br { bottom: 6%; right: 0; text-align: right; }

/* Hover a label → the label and its spoke light up yellow (pure CSS). */
.team-profile-page .tp-emblem__label {
    cursor: pointer;
    transition: color .2s ease;
}

.team-profile-page .tp-emblem__label:hover {
    color: var(--theme, #fc3);
}

/* Spokes are real lines inside the emblem SVG; on hover they recolour in place. */
.team-profile-page .tp-emblem__spoke {
    transition: stroke .2s ease;
}

.team-profile-page .tp-emblem__label--tl:hover ~ .tp-emblem__svg .tp-emblem__spoke--tl,
.team-profile-page .tp-emblem__label--tr:hover ~ .tp-emblem__svg .tp-emblem__spoke--tr,
.team-profile-page .tp-emblem__label--l:hover ~ .tp-emblem__svg .tp-emblem__spoke--l,
.team-profile-page .tp-emblem__label--r:hover ~ .tp-emblem__svg .tp-emblem__spoke--r,
.team-profile-page .tp-emblem__label--bl:hover ~ .tp-emblem__svg .tp-emblem__spoke--bl,
.team-profile-page .tp-emblem__label--br:hover ~ .tp-emblem__svg .tp-emblem__spoke--br {
    stroke: var(--theme, #fc3);
    stroke-width: 2.4;
}

.team-profile-page .tp-focus {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.team-profile-page .tp-focus li {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10rem;
    padding: .5rem 1rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .78);
}

/* Industries — the real client sectors, as a quiet labelled line under About. */
.team-profile-page .tp-industries {
    margin: 1.5rem 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: clamp(.92rem, 3vw, 1.02rem);
    letter-spacing: .01em;
}

.team-profile-page .tp-industries__label {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .7rem;
    color: var(--theme, #fc3);
    margin-right: .65rem;
}

/* About two-column: a DMEXCO "let's meet" call-out on the LEFT, story on right. */
.team-profile-page .tp-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
    .team-profile-page .tp-about-grid {
        grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4rem);
        /* Stretch, not start. The text column is the taller of the two, so with
           `start` the event cards stopped short and the channels below the text
           hung on past them — the section had no bottom edge, it had two. Both
           columns run to the same line now, and the card's CTA is pinned with
           its own margin-top: auto, so the height a card gains opens above the
           button rather than under it. */
        align-items: stretch;
    }

    /* The aside is stretched by the rule above; these pass that height down to
       the cards themselves, which is where it has to land to be visible. */
    .team-profile-page .tp-meet,
    .team-profile-page .tp-meet__grid {
        height: 100%;
    }
}

/* DMEXCO event card — icons, grid dots, event title, facts, note, primary CTA
   and direct channels. Uses the site's Font Awesome 6 + brand colors. */
/* The card's border sits on the container's left edge, level with the ABOUT
   heading above it. Its inner text therefore starts a padding-width further in,
   which is correct: the edge is the line that runs down the page, not the text
   inside a box that sits on it. Do not pull the card left to line the two up. */
/* `.tp-meet` is now only the column: the chrome moved onto the cards inside it,
   because with two events there are two boxes, not one box with two halves. */
.team-profile-page .tp-meet {
    position: relative;
}

/* Side by side from the tablet breakpoint up, stacked below it. auto-fit rather
   than a fixed two, so a third event would wrap instead of being squeezed. */
.team-profile-page .tp-meet__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 480px) {
    .team-profile-page .tp-meet__grid {
        grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    }
}

.team-profile-page .tp-meet__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.1rem;
    padding: clamp(1.1rem, 2.2vw, 1.4rem);
    background: rgba(255, 255, 255, .015);
}

/* EVENT 01 — the amber rule under it is what makes the two cards read as a
   numbered pair rather than as two unrelated boxes. */
.team-profile-page .tp-meet__index {
    position: relative;
    align-self: flex-start;
    margin: 0 0 1rem;
    padding-bottom: .45rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .66rem;
    font-weight: 700;
    color: var(--theme, #fc3);
}

.team-profile-page .tp-meet__index::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1.6rem;
    height: 2px;
    background: var(--theme, #fc3);
}

.team-profile-page .tp-meet__title {
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: clamp(1.4rem, 3vw, 1.95rem);
    line-height: .95;
    color: #fff;
    margin: 0;
}

/* One line, always. The column below is widened to hold the longest name at
   this size; without the nowrap "WEB SUMMIT" broke after "WEB" and the two
   cards stopped rhyming. */
.team-profile-page .tp-meet__name {
    display: block;
    white-space: nowrap;
}

/* On its own line under the name, not trailing it: the year is the thing the
   eye checks second, and at this width a trailing year pushed the wrap. */
.team-profile-page .tp-meet__year {
    display: block;
    color: var(--theme, #fc3);
}

/* The place, set across the card as an outlined watermark. It starts on the same
   left edge as everything else in the card — the index, the name, the facts all
   line up down one column, and the watermark is not an exception to that.
   A hairline stroke, so it stays a ghost behind the content rather than a second
   heading competing with the event name above it. */
.team-profile-page .tp-meet__ghost {
    display: block;
    margin: .45rem 0 -.35rem;
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5.4vw, 3.15rem);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    /* A hairline stroke in white, not amber: amber is the site's interaction
       colour, and a watermark nobody can click should not be wearing it. */
    -webkit-text-stroke: .5px rgba(255, 255, 255, .22);
    pointer-events: none;
    user-select: none;
}

.team-profile-page .tp-meet__facts {
    list-style: none;
    padding: 0;
    margin: 1rem 0 .9rem;
    display: grid;
    gap: .45rem;
}

.team-profile-page .tp-meet__facts li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .82);
}

.team-profile-page .tp-meet__facts i {
    color: var(--theme, #fc3);
    font-size: .9rem;
    width: 1rem;
    text-align: center;
}

.team-profile-page .tp-meet__note {
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .62);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 1.05rem;
}

/* Primary CTA — one per card. `margin-top: auto` pins it to the bottom, so with
   notes of different lengths the two buttons still line up across the row. */
.team-profile-page .tp-meet__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: auto;
    background: var(--theme, #fc3);
    color: #111;
    border-radius: 10rem;
    padding: .6rem 1.1rem;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
    transition: background-color .2s ease, transform .2s ease;
}

.team-profile-page .tp-meet__cta:hover {
    background: #FFD65B;
    transform: translateY(-2px);
}

/* The arrow rides with the label now rather than sitting in its own dark disc:
   at this button width the disc took a third of the pill. */
.team-profile-page .tp-meet__cta-icon {
    display: inline-flex;
    align-items: center;
    font-size: .78em;
    flex: 0 0 auto;
}

/* The events column gets more room when it is carrying two cards. Sized to the
   longest event name on one line at the title size above, not picked by eye:
   below this the nowrap would push the name past the card's edge. */
@media (min-width: 768px) {
    .team-profile-page .tp-about-grid--events {
        grid-template-columns: minmax(0, 37rem) minmax(0, 1fr);
    }
}

/* Icon inside a hero pill, beside .82rem uppercase text. */
.team-profile-page .tp-btn__ico {
    margin-right: .55rem;
    font-size: .95em;
}

/* ---- Booking dialog ---------------------------------------------------- */
/* Scoped to .tp-book, not to .team-profile-page: Bootstrap moves the modal to
   the end of <body>, outside the page wrapper, so a body-class selector would
   never match it. */
.tp-book .modal-content {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
}

.tp-book .modal-body {
    padding: 2rem 1.5rem 2.25rem;
}

@media (min-width: 576px) {
    .tp-book .modal-body { padding: 2.25rem 2.5rem 2.5rem; }
}

.tp-book__close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 10;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--theme, #fc3);
    transition: opacity .2s ease;
}

.tp-book__close:hover { opacity: .7; }

/* Head block centred, as the Reach Out dialog sets it. */
.tp-book__eyebrow {
    font-family: "Montserrat", sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    color: var(--theme, #fc3);
    margin: 0 0 .5rem;
}

.tp-book__title {
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.05;
    text-align: center;
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    color: #fff;
    margin: 0;
}

.tp-book__lead {
    font-family: "Montserrat", sans-serif;
    text-align: center;
    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
    margin: .7rem auto 0;
    max-width: 28rem;
}


/* Two columns from 576px; the consent line and the submit span both. */
.tp-book__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem 1.5rem;
    margin-top: 1.75rem;
}

@media (min-width: 576px) {
    .tp-book__form { grid-template-columns: 1fr 1fr; }
}

.tp-book__field--full { grid-column: 1 / -1; }

.tp-book__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tp-book__field { display: block; position: relative; }

/* Inputs and buttons do not inherit font-family, so the site face is restated
   on each — otherwise the form renders in the browser's default UI font.
   color-scheme keeps the native date picker and its calendar dark. */
.tp-book__input {
    width: 100%;
    font-family: "Montserrat", sans-serif;
    padding: .6rem 0;
    background: transparent;
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    font-size: .875rem;
    transition: border-color .3s ease;
    color-scheme: dark;
}

.tp-book__input::placeholder { color: rgba(255, 255, 255, .45); }
.tp-book__input:hover { border-bottom-color: rgba(255, 204, 51, .5); }

.tp-book__input:focus {
    outline: none;
    border-bottom-color: var(--theme, #fc3);
}

.tp-book__input option { background: #0a0a0a; color: #fff; }

.tp-book__textarea {
    resize: vertical;
    min-height: 3.25rem;
    line-height: 1.6;
}

/* Phone: the dial-code select and the number share one underline, as the Reach
   Out dialog draws it. Must come after .tp-book__field — that rule also matches
   this element and sets display: block, so at equal specificity it would win on
   order alone and stack the two apart. */
.tp-book__phone {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: .5rem;
}

.tp-book__dialwrap { position: relative; display: block; }
.tp-book__dial { width: auto; min-width: 6rem; }

/* ---- Date field + own calendar ---------------------------------------- */
/* Same note as .tp-book__phone: this must sit after .tp-book__field, which
   also matches and would otherwise win on order. */
.tp-book__date { position: relative; }

.tp-book__datebtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    text-align: left;
    cursor: pointer;
}

.tp-book__datebtn--empty { color: rgba(255, 255, 255, .45); }
.tp-book__datebtn-ico { color: rgba(255, 255, 255, .55); font-size: .85rem; }
.tp-book__datebtn.is-open { border-bottom-color: var(--theme, #fc3); }
.tp-book__datebtn.is-open .tp-book__datebtn-ico { color: var(--theme, #fc3); }

/* Floats over the fields below rather than pushing them down, so opening the
   panel does not make the dialog jump. */
.tp-book__cal {
    position: absolute;
    z-index: 5;
    top: calc(100% + .5rem);
    left: 0;
    width: min(20rem, calc(100vw - 3rem));
    background: #111;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .9rem;
    padding: .9rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .6);
}

.tp-book__cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.tp-book__cal-month {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.tp-book__cal-nav {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    transition: border-color .2s ease, color .2s ease;
}

.tp-book__cal-nav:hover:not(:disabled) { border-color: var(--theme, #fc3); color: var(--theme, #fc3); }
.tp-book__cal-nav:disabled { opacity: .3; }

.tp-book__cal-dows,
.tp-book__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .15rem;
}

.tp-book__cal-dows {
    margin-bottom: .3rem;
    font-family: "Montserrat", sans-serif;
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    text-align: center;
}

/* Wider than tall on purpose. A square grid pushes the panel well past the
   bottom of the dialog; six rows at this height keep it close to inside. */
.tp-book__cal-day {
    font-family: "Montserrat", sans-serif;
    height: 1.95rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    transition: background-color .18s ease, color .18s ease;
}

.tp-book__cal-day:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.tp-book__cal-day.is-muted { color: rgba(255, 255, 255, .28); }

/* Past days stay in place so the weeks keep their shape, but read as closed. */
.tp-book__cal-day:disabled {
    color: rgba(255, 255, 255, .18);
    cursor: default;
}

.tp-book__cal-day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 1px rgba(255, 204, 51, .5);
    color: var(--theme, #fc3);
}

.tp-book__cal-day.is-selected {
    background: var(--theme, #fc3);
    color: #111;
    font-weight: 700;
}

.tp-book__cal-foot {
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.tp-book__cal-link {
    font-family: "Montserrat", sans-serif;
    background: none;
    border: 0;
    color: var(--theme, #fc3);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: opacity .2s ease;
}

.tp-book__cal-link:hover { opacity: .75; }

/* Native select arrow dropped so the field reads as the same underline as the
   text inputs; a chevron is drawn on the wrapper instead. */
.tp-book__select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25rem;
}

.tp-book__select::after {
    content: "";
    position: absolute;
    right: .1rem;
    top: 50%;
    width: .45rem;
    height: .45rem;
    border-right: 1.5px solid rgba(255, 255, 255, .6);
    border-bottom: 1.5px solid rgba(255, 255, 255, .6);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.tp-book__consent {
    font-family: "Montserrat", sans-serif;
    font-size: .7rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .45);
    margin: 0;
}

.tp-book__error {
    font-family: "Montserrat", sans-serif;
    color: #ff6b6b;
    font-size: .8rem;
    margin: 0;
}

/* Full-width gold slab, as the Reach Out dialog ends on. */
.tp-book__submit {
    font-family: "Montserrat", sans-serif;
    display: block;
    width: 100%;
    border: 0;
    background: linear-gradient(135deg, #FFCC33 0%, #D4A928 100%);
    color: #4D3D0D;
    padding: 1rem;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: opacity .3s ease;
}

.tp-book__submit:hover { opacity: .9; }
.tp-book__submit:disabled { opacity: .6; }
.tp-book__submit-busy { display: none; }
.tp-book__submit:disabled .tp-book__submit-idle { display: none; }
.tp-book__submit:disabled .tp-book__submit-busy { display: inline; }

/* Success state */
.tp-book__done { text-align: center; padding: 1.75rem 0 .5rem; }

.tp-book__disc {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #FFCC33 0%, #D4A928 100%);
    box-shadow: 0 0 40px rgba(255, 204, 51, .4);
}

.tp-book__done-title {
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    color: #fff;
    margin: 0;
}

.tp-book__done-text {
    font-family: "Montserrat", sans-serif;
    margin: .75rem auto 0;
    max-width: 24rem;
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}

.tp-book__close-text {
    font-family: "Montserrat", sans-serif;
    margin-top: 1.4rem;
    background: none;
    border: 0;
    color: var(--theme, #fc3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .85rem;
    transition: opacity .2s ease;
}

.tp-book__close-text:hover { opacity: .8; }

/* Direct channels — side by side, in the intro column where the pillars were. */
.team-profile-page .tp-meet__channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1.5rem;
    /* Set down from the paragraph above rather than sitting against it: these
       are a separate offer, not the last line of the text. Smaller than it was:
       the gap is also what pushes the bottom of the whole section down, and the
       event cards beside it now stretch to whatever that comes to. */
    margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
}

/* A rule over each channel rather than a box around it — yellow along the top,
   nothing down the sides and nothing underneath. The radius goes with the box:
   a corner radius on a single edge only bends the ends of that line downward,
   which reads as a broken frame rather than a rule. The horizontal padding goes
   too, so the icon starts where the yellow starts. */
.team-profile-page .tp-meet__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 0;
    border-top: 2px solid var(--theme, #fc3);
    border-radius: 0;
    padding: .85rem 0 0;
    text-decoration: none;
    color: #fff;
    font-size: .88rem;
    min-width: 0;
}

.team-profile-page .tp-meet__row-label {
    transition: color .2s ease;
}

/* Only the label has anywhere to go on hover — the rule and the arrow are
   already the brand yellow. */
.team-profile-page .tp-meet__row:hover .tp-meet__row-label {
    color: var(--theme, #fc3);
}

.team-profile-page .tp-meet__row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .08);
    font-size: .9rem;
    flex: 0 0 auto;
}

.team-profile-page .tp-meet__row-label {
    font-weight: 500;
}

.team-profile-page .tp-meet__row-ext {
    margin-left: auto;
    color: var(--theme, #fc3);
    font-size: .78rem;
}

.team-profile-page .tp-diag {
    transform: rotate(45deg);
}

/* Right side — strong statement, concise support, 3 contribution pillars. */
.team-profile-page .tp-intro__statement {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
    line-height: 1.22;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 1.2rem;
    max-width: 26ch;
}

.team-profile-page .tp-intro__support {
    font-size: clamp(1.02rem, 2.4vw, 1.18rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    margin: 0;
    max-width: 40rem;
}

/* The reserved line boxes are gone from both the statement and the paragraph.
   They kept every profile's block to the same height whatever way the words
   wrapped, but they bought it with empty space on every profile — 44px under
   the statement and 91px under the paragraph on a desktop, which is what
   pushed the paragraph away from the heading and the channels away from the
   paragraph.

   The copy is still written to the same length for all six — 54 characters for
   the statement, 421 for the paragraph — so what remains between them is at
   most a line, where one person's words happen to wrap sooner than another's.
   A line of difference is worth far less than 135px of air on every page. */

.team-profile-page .tp-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 620px) {
    .team-profile-page .tp-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

.team-profile-page .tp-pillar__label {
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--theme, #fc3);
    margin: 0 0 .5rem;
}

.team-profile-page .tp-pillar__text {
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

/* ---- Selected work ---------------------------------------------------- */
/* Top row: heading + "View all projects". */
.team-profile-page .tp-work-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.team-profile-page .tp-work-top .tp-heading {
    margin-bottom: 0;
}

/* Slightly smaller "View all projects" / "Our portfolio" buttons. */
.team-profile-page .tp-work-top .theme-hover-button,
.team-profile-page .tp-actions .theme-hover-button {
    font-size: .8rem;
    padding: .7rem 1.5rem;
    letter-spacing: .1rem;
}

.team-profile-page .tp-work-intro {
    margin: 1rem 0 2.25rem;
    max-width: 46rem;
    color: rgba(255, 255, 255, .62);
    font-size: clamp(.95rem, 3vw, 1.05rem);
    line-height: 1.6;
}

.team-profile-page .tp-work-grid {
    row-gap: 2.25rem;
}

/* One project at a time on a phone, swiped.

   Stacked, the four cards ran four screens deep and the section became the
   longest thing on the page. Below the breakpoint where two fit side by side
   they become a snapping row instead: each card takes the full width, the
   strip scrolls sideways and stops squarely on the next one. No script — the
   snap does the whole job, so it keeps working with the page still loading. */
@media (max-width: 575.98px) {
    .team-profile-page .tp-work-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .team-profile-page .tp-work-grid::-webkit-scrollbar {
        display: none;
    }
    .team-profile-page .tp-work-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }
}

/* Card — framed image, name with yellow dot, category, tech tags, arrow. */
.team-profile-page .tp-work-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    height: 100%;
}

.team-profile-page .tp-work-card__frame {
    display: block;
    overflow: hidden;
    border-radius: .4rem;   /* match the homepage "Our Team" photo frame */
    background: #141310;
    aspect-ratio: 4 / 3;
    margin-bottom: 1.1rem;
}

.team-profile-page .tp-work-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform .6s cubic-bezier(.19, 1, .22, 1);
}

.team-profile-page .tp-work-card:hover .tp-work-card__img {
    transform: scale(1.1);
}

.team-profile-page .tp-work-card__name {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: .03em;
    color: var(--white, #fff);
}

.team-profile-page .tp-work-card__cat {
    display: block;
    margin: .35rem 0 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dark-text, #afafaf);
    font-size: .82rem;
}

.team-profile-page .tp-work-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1rem;
}

.team-profile-page .tp-work-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.team-profile-page .tp-work-card__tag {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .45rem;
    padding: .25rem .55rem;
    font-size: .72rem;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.team-profile-page .tp-work-card__arrow {
    color: var(--theme, #fc3);
    font-size: .9rem;
    flex: 0 0 auto;
    transition: transform .3s ease;
}

.team-profile-page .tp-work-card:hover .tp-work-card__arrow {
    transform: translateX(5px);
}

/* ---- Connect chips ---------------------------------------------------- */
.team-profile-page .tp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.team-profile-page .tp-chip {
    display: inline-flex;
    align-items: center;
    padding: .7rem 1.3rem;
    border-radius: 10rem;
    border: 1.5px solid rgba(255, 255, 255, .28);
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    letter-spacing: .03em;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.team-profile-page .tp-chip:hover {
    border-color: var(--theme, #fc3);
    color: var(--theme, #fc3);
    transform: translateY(-2px);
}

.team-profile-page .tp-chip--accent {
    background-color: var(--theme, #fc3);
    border-color: var(--theme, #fc3);
    color: #111;
}

.team-profile-page .tp-chip--accent:hover {
    background-color: #FFD65B;
    color: #111;
}

/* ---- About (editorial) ----------------------------------------------- */
/* Premium, minimal, typography-led. No cards, boxes, borders, dividers,
   gradients, icons or shapes — only spacing, scale and alignment do the work.
   Strong left alignment; yellow only as a restrained accent (01 + Focus). */
.team-profile-page .tp-abx {
    max-width: 48rem;
}

/* The oversized statement — the section's single visual anchor. */
.team-profile-page .tp-abx__statement {
    font-family: "ZonaPro", "Montserrat", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 6.4vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
    max-width: 20ch;
    margin: 0;
}

/* Supporting copy — noticeably smaller and quieter than the statement. */
.team-profile-page .tp-abx__supporting {
    max-width: 42rem;
    margin: clamp(1.4rem, 3.2vw, 1.9rem) 0 0;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, .66);
}

/* Closing line — subtle but intentional (quiet editorial caption). */
.team-profile-page .tp-abx__closing {
    margin: clamp(1.6rem, 3.5vw, 2.1rem) 0 0;
    font-size: clamp(.78rem, 2vw, .86rem);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .48);
}

/* Focus — an editorial capability list: no pills, no markers, just type. */
.team-profile-page .tp-abx__focus {
    margin-top: clamp(2.5rem, 5.5vw, 3.5rem);
}

.team-profile-page .tp-abx__focus-label {
    margin: 0 0 1.15rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--theme, #fc3);
}

.team-profile-page .tp-abx__focus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem 3.5rem;
}

@media (min-width: 560px) {
    .team-profile-page .tp-abx__focus-list {
        grid-template-columns: repeat(2, minmax(0, max-content));
    }
}

.team-profile-page .tp-abx__focus-list li {
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
}

/* ---- Larger screens --------------------------------------------------- */
@media (min-width: 768px) {
    .team-profile-page .tp-hero__inner {
        max-width: 60rem;
    }
}

/* ------------------------------------------------------------------ contact
   Personal contact block closing each profile. Replaces the generic footer
   "CONTACT US" strip, which is suppressed on these pages (see footer.blade.php).
   Form on the left, the three ways to reach the person on the right, divided by
   hairlines exactly as the columns are in the reference. */
.team-profile-page .tp-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .team-profile-page .tp-contact__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
}

.team-profile-page .tp-contact__eyebrow {
    margin: 0 0 .9rem;
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--dark-text, #afafaf);
}

.team-profile-page .tp-contact__title {
    font-family: "ZonaPro", "Gilam", "Montserrat", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.02em;
    line-height: 1.05;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    color: var(--white, #fff);
    margin: 0 0 1.75rem;
}

/* The three ways. Hairlines sit between them rather than around them, so the
   group reads as one row split into three, not three separate cards. */
/* Three across at every width. Stacked, the three ways to reach one person took
   three screens of a phone to offer what is really one choice, and the third
   was below the fold — a visitor had to scroll past Book and Call to learn that
   Email existed. */
.team-profile-page .tp-contact__ways {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain fr will not shrink a column below its
       content, and rina@hoxmedia.net has no break in it, so the mail column
       took 154px of a 390px phone and left the other two 105 each. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-profile-page .tp-contact__way + .tp-contact__way {
    border-left: 1px solid rgba(255, 255, 255, .12);
}


.team-profile-page .tp-contact__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: 1.5rem 1rem;
    background: none;
    border: 0;
    text-align: center;
    text-decoration: none;
    transition: opacity .3s ease;
}
.team-profile-page .tp-contact__link:hover { opacity: .75; }

.team-profile-page .tp-contact__icon {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--theme, #fc3);
}

.team-profile-page .tp-contact__label {
    font-family: "ZonaPro", "Gilam", "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--white, #fff);
}

.team-profile-page .tp-contact__meta {
    font-size: .82rem;
    line-height: 1.6;
    color: var(--dark-text, #afafaf);
}
/* A third of a phone is about 120px, and inside the padding it is 90. The
   number and the address are the longest things here and neither fits at the
   desktop size, so the whole card steps down rather than letting either of
   them break mid-word. */
@media (max-width: 575.98px) {
    .team-profile-page .tp-contact__link {
        padding: 1.1rem .3rem;
        gap: .4rem;
    }
    .team-profile-page .tp-contact__icon {
        font-size: 1.35rem;
    }
    .team-profile-page .tp-contact__label {
        font-size: .78rem;
        line-height: 1.25;
    }
    .team-profile-page .tp-contact__meta {
        font-size: .6rem;
        line-height: 1.45;
        /* The address is one unbreakable run of characters; without this it
           would push its column wide again or spill out of it. */
        overflow-wrap: anywhere;
    }
}

/* Compact pass on the contact block. The legacy .footer-form gives every input
   `margin: 2.5em 0` — around 160px of pure margin across the two fields — and
   .tp-section adds up to 7rem top and bottom. Both are right for the full-width
   footer this form was built for, but here the three columns beside it finish
   far higher, leaving the row bottom-heavy. Scoped to .tp-contact so the real
   footer form is untouched. */
.team-profile-page .tp-contact {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.team-profile-page .tp-contact .footer-form input {
    margin: .5rem 0 1.4rem;
    padding: .5rem .1rem;
}

.team-profile-page .tp-contact .footer-form button {
    margin-top: 0;
}

.team-profile-page .tp-contact .tp-contact__title {
    margin-bottom: 1.25rem;
}

/* The columns are top-aligned with the form, so their own padding only needs to
   separate them from the hairlines, not to fill the row. */
.team-profile-page .tp-contact__link {
    padding: 1rem .75rem 1.25rem;
}

/* The "HOX Media" section heading in amber. .tp-heading is shared by About,
   Selected work and this one, so the colour is pinned to this heading's id
   rather than the class — the other two stay in the muted grey that keeps them
   reading as quiet section labels. */
.team-profile-page #tp-hox-h {
    color: var(--theme, #fc3);
}

/* The foot of a profile on a phone. The contact block closed with 40px under
   the three cards and the footer opened with another 48, so seventy pixels of
   black sat between the last thing offered and the first thing listed — and on
   these pages the footer's own contact strip is suppressed, so nothing filled
   it. */
@media (max-width: 767.98px) {
    .team-profile-page .tp-contact {
        padding-bottom: .75rem;
    }
    .team-profile-page footer.hox-footer {
        /* Bootstrap's pt-5 carries !important, so this has to as well. */
        padding-top: 1.25rem !important;
    }
}