/* =========================================================
   THE INSIDE VIEW WITH NANA
   SHOFT — INDIVIDUAL PROJECT PAGE
   ========================================================= */


/* =========================================================
   01. PROJECT VARIABLES
   ========================================================= */

:root {

    --tiv-navy: #293981;
    --tiv-navy-dark: #1c285e;
    --tiv-navy-deep: #111a40;

    --tiv-gold: #c9a227;
    --tiv-gold-light: #dfc35b;
    --tiv-gold-soft: #f3e8bd;

    --tiv-white: #ffffff;
    --tiv-off-white: #f8f9fc;
    --tiv-soft: #f2f4f8;

    --tiv-text: #1b1d24;
    --tiv-muted: #687080;
    --tiv-border: rgba(41, 57, 129, 0.12);

    --tiv-radius-sm: 10px;
    --tiv-radius-md: 18px;
    --tiv-radius-lg: 28px;

    --tiv-shadow:
        0 20px 60px rgba(16, 25, 62, 0.10);

    --tiv-shadow-heavy:
        0 30px 90px rgba(12, 21, 58, 0.18);

    --tiv-container: 1240px;

    --tiv-transition:
        280ms cubic-bezier(.2, .7, .2, 1);

}


/* =========================================================
   02. BASE
   ========================================================= */

.tiv-section,
.tiv-hero,
.tiv-impact,
.tiv-closing,
.tiv-cta {

    position: relative;

    overflow: hidden;

}


.tiv-section *,
.tiv-hero *,
.tiv-impact *,
.tiv-closing *,
.tiv-cta * {

    box-sizing: border-box;

}


.tiv-section p,
.tiv-hero p,
.tiv-impact p,
.tiv-closing p,
.tiv-cta p {

    max-width: 760px;

}


.tiv-section img,
.tiv-hero img {

    display: block;

    width: 100%;

}


/* =========================================================
   03. CONTAINER
   ========================================================= */

.tiv-section > .container,
.tiv-hero > .container,
.tiv-impact > .container,
.tiv-closing > .container,
.tiv-cta > .container {

    width: min(
        calc(100% - 48px),
        var(--tiv-container)
    );

    margin-inline: auto;

}


/* =========================================================
   04. EYEBROW
   ========================================================= */

.tiv-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    line-height: 1.3;

    text-transform: uppercase;

    color: var(--tiv-navy);

}


.tiv-eyebrow::before {

    content: "";

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background:
        var(--tiv-gold);

}


.tiv-eyebrow--light {

    color: rgba(255, 255, 255, 0.82);

}


.tiv-eyebrow--light::before {

    background:
        var(--tiv-gold-light);

}


/* =========================================================
   05. HERO
   ========================================================= */

.tiv-hero {

    min-height: 760px;

    display: flex;

    align-items: center;

    isolation: isolate;

    background:
        var(--tiv-navy-deep);

}


.tiv-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(10, 17, 44, 0.98) 0%,
            rgba(17, 26, 64, 0.91) 42%,
            rgba(17, 26, 64, 0.42) 72%,
            rgba(17, 26, 64, 0.15) 100%
        );

}


.tiv-hero::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -170px;

    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 162, 39, 0.18),
            transparent 68%
        );

    z-index: -1;

}


.tiv-hero__inner {

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 0.78fr);

    align-items: center;

    gap: clamp(48px, 7vw, 100px);

    padding-block: 90px;

}


.tiv-hero__content {

    position: relative;

    z-index: 2;

}


.tiv-hero h1 {

    margin: 0;

    max-width: 760px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(4rem, 7vw, 7.4rem);

    font-weight: 800;

    line-height: 0.91;

    letter-spacing: -0.065em;

    color:
        var(--tiv-white);

}


.tiv-hero h1 span {

    display: block;

    color:
        var(--tiv-gold-light);

}


.tiv-hero__lead {

    margin:
        34px 0 0;

    max-width: 650px;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(1.05rem, 1.35vw, 1.28rem);

    line-height: 1.85;

    color:
        rgba(255, 255, 255, 0.80);

}


.tiv-hero__tags {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 30px;

}


.tiv-hero__tags span {

    display: inline-flex;

    align-items: center;

    min-height: 36px;

    padding:
        7px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.055);

    backdrop-filter:
        blur(12px);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.02em;

    color:
        rgba(255, 255, 255, 0.86);

}


.tiv-hero__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 38px;

}


.tiv-hero__actions .btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding-inline: 22px;

}


.tiv-hero__media {

    position: relative;

    margin: 0;

    min-width: 0;

}


.tiv-hero__media::before {

    content: "";

    position: absolute;

    inset: -16px 16px 16px -16px;

    border:
        1px solid rgba(201, 162, 39, 0.48);

    border-radius:
        var(--tiv-radius-lg);

    pointer-events: none;

}


.tiv-hero__media img {

    position: relative;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius:
        var(--tiv-radius-lg);

    box-shadow:
        var(--tiv-shadow-heavy);

}


.tiv-hero__media figcaption {

    position: absolute;

    right: 22px;

    bottom: 22px;

    left: 22px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 17px 18px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius:
        15px;

    background:
        rgba(14, 21, 49, 0.74);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.16);

}


.tiv-hero__media figcaption strong {

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.73rem;

    letter-spacing: 0.13em;

    color:
        var(--tiv-gold-light);

}


.tiv-hero__media figcaption span {

    font-size: 0.82rem;

    line-height: 1.5;

    color:
        rgba(255, 255, 255, 0.78);

}


/* =========================================================
   06. GENERAL CONTENT
   ========================================================= */

.tiv-content h2,
.tiv-heading h2,
.tiv-impact-heading h2,
.tiv-closing h2,
.tiv-cta h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.35rem, 4.2vw, 4.35rem);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -0.045em;

    color:
        var(--tiv-text);

}


.tiv-content h2 span,
.tiv-heading h2 span,
.tiv-impact-heading h2 span,
.tiv-closing h2 span,
.tiv-cta h2 span {

    color:
        var(--tiv-navy);

}


.tiv-content p {

    margin:
        20px 0 0;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        1rem;

    line-height: 1.85;

    color:
        var(--tiv-muted);

}


.tiv-content .tiv-lead {

    margin-top: 27px;

    font-size:
        clamp(1.05rem, 1.35vw, 1.2rem);

    line-height: 1.75;

    color:
        #343947;

}


.tiv-light-text {

    color:
        rgba(255, 255, 255, 0.74) !important;

}


/* =========================================================
   07. SPLIT SECTIONS
   ========================================================= */

.tiv-section {

    padding-block:
        clamp(90px, 10vw, 150px);

}


.tiv-context {

    background:
        var(--tiv-white);

}


.tiv-split {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 105px);

}


.tiv-split--reverse {

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

}


.tiv-split--reverse .tiv-photo {

    order: 2;

}


.tiv-split--reverse .tiv-content {

    order: 1;

}


/* =========================================================
   08. PHOTO BLOCKS
   ========================================================= */

.tiv-photo {

    position: relative;

    margin: 0;

    min-width: 0;

}


.tiv-photo img {

    width: 100%;

    aspect-ratio: 4 / 4.5;

    object-fit: cover;

    border-radius:
        var(--tiv-radius-lg);

    box-shadow:
        var(--tiv-shadow);

}


.tiv-photo::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    right: -18px;

    bottom: -18px;

    border-right:
        2px solid var(--tiv-gold);

    border-bottom:
        2px solid var(--tiv-gold);

    border-radius:
        0 0 18px 0;

    pointer-events: none;

}


.tiv-photo--border::before {

    content: "";

    position: absolute;

    inset:
        17px auto auto -17px;

    width: 110px;

    height: 110px;

    border-left:
        2px solid var(--tiv-gold);

    border-top:
        2px solid var(--tiv-gold);

    border-radius:
        18px 0 0 0;

    pointer-events: none;

}


.tiv-photo figcaption {

    position: absolute;

    left: 22px;

    bottom: 22px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding:
        14px 17px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        13px;

    background:
        rgba(16, 24, 58, 0.77);

    backdrop-filter:
        blur(14px);

}


.tiv-photo figcaption strong {

    font-size: 0.68rem;

    letter-spacing: 0.14em;

    color:
        var(--tiv-gold-light);

}


.tiv-photo figcaption span {

    font-size: 0.8rem;

    color:
        rgba(255, 255, 255, 0.76);

}


/* =========================================================
   09. HIGHLIGHT
   ========================================================= */

.tiv-highlight {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 34px;

    padding:
        22px 24px;

    border-left:
        3px solid var(--tiv-gold);

    background:
        linear-gradient(
            90deg,
            rgba(201, 162, 39, 0.08),
            transparent
        );

}


.tiv-highlight strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1rem;

    line-height: 1.5;

    color:
        var(--tiv-navy);

}


.tiv-highlight span {

    font-size:
        0.86rem;

    line-height: 1.6;

    color:
        var(--tiv-muted);

}


/* =========================================================
   10. DARK SECTIONS
   ========================================================= */

.tiv-dark {

    background:
        var(--tiv-navy);

}


.tiv-dark .tiv-content h2,
.tiv-dark .tiv-heading h2 {

    color:
        var(--tiv-white);

}


.tiv-dark .tiv-content h2 span,
.tiv-dark .tiv-heading h2 span {

    color:
        var(--tiv-gold-light);

}


.tiv-dark-statement {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 35px;

    padding:
        24px 25px;

    border:
        1px solid rgba(201, 162, 39, 0.25);

    border-radius:
        15px;

    background:
        rgba(255, 255, 255, 0.035);

}


.tiv-dark-statement span {

    font-size:
        0.68rem;

    font-weight: 800;

    letter-spacing:
        0.17em;

    color:
        var(--tiv-gold-light);

}


.tiv-dark-statement strong {

    max-width: 600px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(1.15rem, 1.8vw, 1.45rem);

    line-height: 1.45;

    color:
        var(--tiv-white);

}


/* =========================================================
   11. SOFT SECTIONS
   ========================================================= */

.tiv-soft {

    background:
        var(--tiv-soft);

}


.tiv-heading {

    max-width: 820px;

    margin-bottom:
        55px;

}


.tiv-heading > p {

    margin:
        25px 0 0;

    font-size:
        1rem;

    line-height: 1.85;

    color:
        var(--tiv-muted);

}


.tiv-heading--center {

    margin-inline: auto;

    text-align: center;

}


.tiv-heading--center > p {

    margin-inline: auto;

}


/* =========================================================
   12. CONVERSATION CARDS
   ========================================================= */

.tiv-conversation-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        16px;

}


.tiv-conversation-card {

    min-height: 290px;

    padding:
        30px 27px;

    border:
        1px solid var(--tiv-border);

    border-radius:
        var(--tiv-radius-md);

    background:
        var(--tiv-white);

    box-shadow:
        0 12px 35px rgba(20, 30, 75, 0.055);

    transition:
        transform var(--tiv-transition),
        box-shadow var(--tiv-transition),
        border-color var(--tiv-transition);

}


.tiv-conversation-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(201, 162, 39, 0.42);

    box-shadow:
        var(--tiv-shadow);

}


.tiv-conversation-card > span {

    display: block;

    margin-bottom: 45px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.75rem;

    font-weight: 800;

    letter-spacing:
        0.15em;

    color:
        var(--tiv-gold);

}


.tiv-conversation-card h3 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.45rem;

    font-weight: 800;

    color:
        var(--tiv-navy);

}


.tiv-conversation-card p {

    margin:
        15px 0 0;

    font-size:
        0.91rem;

    line-height:
        1.7;

    color:
        var(--tiv-muted);

}


/* =========================================================
   13. CHECK LIST
   ========================================================= */

.tiv-checks {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px 20px;

    margin:
        30px 0 0;

    padding: 0;

    list-style: none;

}


.tiv-checks li {

    position: relative;

    padding-left:
        27px;

    font-size:
        0.9rem;

    line-height:
        1.55;

    color:
        var(--tiv-muted);

}


.tiv-checks li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    font-weight: 800;

    color:
        var(--tiv-gold);

}


/* =========================================================
   14. PERSPECTIVES
   ========================================================= */

.tiv-perspectives {

    background:
        var(--tiv-white);

}


.tiv-perspective-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.65fr);

    gap:
        70px;

    align-items: stretch;

}


.tiv-perspective-main {

    min-height: 430px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding:
        50px;

    border-radius:
        var(--tiv-radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--tiv-navy-deep),
            var(--tiv-navy)
        );

    box-shadow:
        var(--tiv-shadow-heavy);

}


.tiv-perspective-number {

    margin-bottom: auto;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.75rem;

    font-weight: 800;

    letter-spacing:
        0.15em;

    color:
        var(--tiv-gold-light);

}


.tiv-perspective-main h3 {

    margin:
        0 0 16px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2rem, 4vw, 3.7rem);

    line-height:
        1;

    letter-spacing:
        -0.04em;

    color:
        var(--tiv-white);

}


.tiv-perspective-main p {

    max-width:
        570px;

    margin: 0;

    font-size:
        0.98rem;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.72);

}


.tiv-perspective-side {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.tiv-perspective-side article {

    padding:
        25px 0;

    border-bottom:
        1px solid var(--tiv-border);

}


.tiv-perspective-side article:first-child {

    padding-top: 0;

}


.tiv-perspective-side article:last-child {

    border-bottom: 0;

}


.tiv-perspective-side span {

    display: block;

    margin-bottom: 8px;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--tiv-gold);

}


.tiv-perspective-side strong {

    display: block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.18rem;

    line-height:
        1.45;

    color:
        var(--tiv-navy);

}


/* =========================================================
   15. VIEWER
   ========================================================= */

.tiv-viewer {

    padding-block:
        clamp(100px, 11vw, 170px);

}


.tiv-viewer-inner {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap:
        80px;

}


.tiv-viewer-content h2 {

    max-width:
        850px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.6rem, 5vw, 5rem);

    line-height:
        1;

    letter-spacing:
        -0.05em;

    color:
        var(--tiv-white);

}


.tiv-viewer-content h2 span {

    color:
        var(--tiv-gold-light);

}


.tiv-viewer-content p {

    max-width:
        700px;

    margin:
        24px 0 0;

    font-size:
        1rem;

    line-height:
        1.8;

}


.tiv-viewer-words {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap:
        4px;

}


.tiv-viewer-words span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(1.8rem, 3.2vw, 3.5rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.05em;

    color:
        rgba(255, 255, 255, 0.13);

}


.tiv-viewer-words span:nth-child(2),
.tiv-viewer-words span:nth-child(4) {

    color:
        rgba(201, 162, 39, 0.68);

}


/* =========================================================
   16. JOURNEY
   ========================================================= */

.tiv-journey {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        18px;

}


.tiv-journey::before {

    content: "";

    position: absolute;

    top: 28px;

    right: 10%;

    left: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 162, 39, 0.48),
            transparent
        );

}


.tiv-journey article {

    position: relative;

    z-index: 1;

    padding:
        0 4px;

}


.tiv-journey-number {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        28px;

    border:
        1px solid rgba(201, 162, 39, 0.35);

    border-radius:
        50%;

    background:
        var(--tiv-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        800;

    color:
        var(--tiv-gold);

}


.tiv-journey h3 {

    margin:
        0 0 12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.08rem;

    font-weight:
        800;

    color:
        var(--tiv-navy);

}


.tiv-journey p {

    margin: 0;

    font-size:
        0.85rem;

    line-height:
        1.7;

    color:
        var(--tiv-muted);

}


/* =========================================================
   17. PURPOSE
   ========================================================= */

.tiv-purpose {

    background:
        var(--tiv-navy-deep);

}


.tiv-purpose-inner {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.55fr);

    gap:
        90px;

    align-items: center;

}


.tiv-purpose-content h2 {

    max-width:
        850px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.5rem, 4.5vw, 4.7rem);

    line-height:
        1;

    letter-spacing:
        -0.05em;

    color:
        var(--tiv-white);

}


.tiv-purpose-content h2 span {

    color:
        var(--tiv-gold-light);

}


.tiv-purpose-content p {

    max-width:
        730px;

    margin:
        25px 0 0;

    font-size:
        1rem;

    line-height:
        1.85;

}


.tiv-purpose-visual {

    min-height:
        430px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(201, 162, 39, 0.18);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 162, 39, 0.12),
            transparent 65%
        );

}


.tiv-purpose-word {

    display: flex;

    flex-direction: column;

    gap:
        4px;

    transform:
        rotate(-7deg);

}


.tiv-purpose-word span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(1.65rem, 3vw, 3rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.05em;

    color:
        rgba(255, 255, 255, 0.15);

}


.tiv-purpose-word span:nth-child(2) {

    color:
        rgba(201, 162, 39, 0.8);

}


.tiv-purpose-word span:nth-child(3) {

    color:
        rgba(255, 255, 255, 0.65);

}


/* =========================================================
   18. IMPACT
   ========================================================= */

.tiv-impact {

    padding-block:
        clamp(90px, 10vw, 140px);

    background:
        var(--tiv-white);

}


.tiv-impact-heading {

    max-width:
        820px;

    margin-bottom:
        55px;

}


.tiv-impact-heading p {

    max-width:
        700px;

    margin:
        25px 0 0;

    font-size:
        1rem;

    line-height:
        1.8;

    color:
        var(--tiv-muted);

}


.tiv-impact-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid var(--tiv-border);

    border-bottom:
        1px solid var(--tiv-border);

}


.tiv-impact-grid article {

    min-height:
        300px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        35px 30px;

    border-right:
        1px solid var(--tiv-border);

}


.tiv-impact-grid article:last-child {

    border-right:
        0;

}


.tiv-impact-grid strong {

    display:
        block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(3.5rem, 5.5vw, 6rem);

    font-weight:
        800;

    line-height:
        0.9;

    letter-spacing:
        -0.07em;

    color:
        var(--tiv-navy);

}


.tiv-impact-grid span {

    display:
        block;

    margin-top:
        18px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.05rem;

    font-weight:
        800;

    line-height:
        1.3;

    color:
        var(--tiv-navy);

}


.tiv-impact-grid small {

    display:
        block;

    max-width:
        210px;

    margin-top:
        10px;

    font-size:
        0.79rem;

    line-height:
        1.6;

    color:
        var(--tiv-muted);

}


/* =========================================================
   19. GALLERY
   ========================================================= */

.tiv-gallery {

    background:
        var(--tiv-soft);

}

.tiv-gallery__carousel {

    width:
        100%;

}


.tiv-gallery__stage {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #e7e9ee;

    box-shadow:
        var(--tiv-shadow);

}


.tiv-gallery__slides {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

}


.tiv-gallery__slide {

    position:
        absolute;

    inset:
        0;

    margin:
        0;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(1.015);

    transition:
        opacity .4s ease,
        transform .55s cubic-bezier(.22,1,.36,1),
        visibility .4s ease;

}


.tiv-gallery__slide.is-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);

}


.tiv-gallery__slide img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/* =========================================================
   ARROWS
   ========================================================= */

.tiv-gallery__arrow {

    position:
        absolute;

    top:
        50%;

    z-index:
        5;

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.30);

    border-radius:
        50%;

    background:
        rgba(18,27,65,.84);

    color:
        #fff;

    font:
        inherit;

    font-size:
        1.25rem;

    line-height:
        1;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(10px);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.tiv-gallery__arrow:hover {

    background:
        var(--tiv-navy);

    box-shadow:
        0 12px 30px
        rgba(18,27,65,.25);

}


.tiv-gallery__arrow:active {

    transform:
        translateY(-50%) scale(.94);

}


.tiv-gallery__arrow:focus-visible {

    outline:
        3px solid var(--tiv-gold);

    outline-offset:
        4px;

}


.tiv-gallery__arrow--prev {

    left:
        22px;

}


.tiv-gallery__arrow--next {

    right:
        22px;

}


/* =========================================================
   THUMBNAILS + COUNTER
   ========================================================= */

.tiv-gallery__controls {

    margin-top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}


.tiv-gallery__thumbnails {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.tiv-gallery__thumbnails::-webkit-scrollbar {

    display:
        none;

}


.tiv-gallery__thumbnail {

    flex:
        0 0 88px;

    width:
        88px;

    height:
        64px;

    padding:
        0;

    overflow:
        hidden;

    border:
        2px solid transparent;

    border-radius:
        10px;

    background:
        #e7e9ee;

    cursor:
        pointer;

    opacity:
        .55;

    transition:
        opacity .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.tiv-gallery__thumbnail:hover {

    opacity:
        .85;

    transform:
        translateY(-2px);

}


.tiv-gallery__thumbnail.is-active {

    border-color:
        var(--tiv-gold);

    opacity:
        1;

}


.tiv-gallery__thumbnail:focus-visible {

    outline:
        3px solid var(--tiv-navy);

    outline-offset:
        3px;

}


.tiv-gallery__thumbnail img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.tiv-gallery__counter {

    flex:
        0 0 auto;

    color:
        var(--tiv-muted);

    font:
        800 .76rem/1 "Manrope",
        sans-serif;

    letter-spacing:
        .08em;

    white-space:
        nowrap;

}


.tiv-gallery__counter [data-tiv-current] {

    color:
        var(--tiv-navy);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .tiv-gallery__slides {

        aspect-ratio:
            4 / 3;

    }


    .tiv-gallery__arrow {

        width:
            46px;

        height:
            46px;

        font-size:
            1.05rem;

    }


    .tiv-gallery__arrow--prev {

        left:
            12px;

    }


    .tiv-gallery__arrow--next {

        right:
            12px;

    }


    .tiv-gallery__controls {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;

    }


    .tiv-gallery__thumbnails {

        width:
            100%;

    }


    .tiv-gallery__counter {

        align-self:
            flex-end;

    }

}


@media (max-width: 430px) {

    .tiv-gallery__slides {

        aspect-ratio:
            1 / 1;

    }


    .tiv-gallery__arrow {

        width:
            42px;

        height:
            42px;

    }


    .tiv-gallery__thumbnail {

        flex-basis:
            72px;

        width:
            72px;

        height:
            54px;

    }

}


/* =========================================================
   20. VIDEO SECTION
   ========================================================= */

.tiv-video {

    background:
        var(--tiv-white);

}


.tiv-video-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        22px;

}


.tiv-video-card {

    overflow:
        hidden;

    border:
        1px solid var(--tiv-border);

    border-radius:
        var(--tiv-radius-md);

    background:
        var(--tiv-white);

    box-shadow:
        0 15px 45px rgba(18, 27, 65, 0.07);

    transition:
        transform var(--tiv-transition),
        box-shadow var(--tiv-transition);

}


.tiv-video-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--tiv-shadow);

}


.tiv-video-card > a {

    position:
        relative;

    display:
        block;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        var(--tiv-navy-deep);

}


.tiv-video-card > a::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(10, 16, 42, 0.30)
        );

    pointer-events:
        none;

}


.tiv-video-card > a img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 600ms cubic-bezier(.2, .7, .2, 1);

}


.tiv-video-card:hover > a img {

    transform:
        scale(1.045);

}


.tiv-video-play {

    position:
        absolute;

    z-index:
        2;

    top:
        50%;

    left:
        50%;

    width:
        62px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(255, 255, 255, 0.55);

    border-radius:
        50%;

    background:
        rgba(201, 162, 39, 0.95);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20);

    font-size:
        1.05rem;

    line-height:
        1;

    color:
        var(--tiv-navy-deep);

    transition:
        transform var(--tiv-transition),
        background var(--tiv-transition);

}


.tiv-video-card:hover .tiv-video-play {

    transform:
        translate(-50%, -50%) scale(1.08);

    background:
        var(--tiv-gold-light);

}


.tiv-video-card__body {

    padding:
        25px 24px 27px;

}


.tiv-video-card__body small {

    display:
        block;

    margin-bottom:
        10px;

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--tiv-gold);

}


.tiv-video-card__body h3 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1.22rem;

    line-height:
        1.35;

    color:
        var(--tiv-navy);

}


.tiv-video-card__body p {

    margin:
        14px 0 0;

    font-size:
        0.87rem;

    line-height:
        1.7;

    color:
        var(--tiv-muted);

}


.tiv-video-link {

    display:
        inline-flex;

    margin-top:
        18px;

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.02em;

    color:
        var(--tiv-navy);

}


/* =========================================================
   21. CLOSING
   ========================================================= */

.tiv-closing {

    padding-block:
        clamp(110px, 13vw, 190px);

    text-align:
        center;

    background:
        var(--tiv-soft);

}


.tiv-closing .tiv-eyebrow {

    justify-content:
        center;

}


.tiv-closing .tiv-eyebrow::before {

    display:
        none;

}


.tiv-closing h2 {

    max-width:
        950px;

    margin:
        0 auto;

    font-size:
        clamp(3.2rem, 7vw, 7rem);

    line-height:
        0.94;

}


.tiv-closing p {

    max-width:
        760px;

    margin:
        32px auto 0;

    font-size:
        1.05rem;

    line-height:
        1.85;

    color:
        var(--tiv-muted);

}


/* =========================================================
   22. FINAL CTA
   ========================================================= */

.tiv-cta {

    padding-block:
        clamp(70px, 8vw, 110px);

    background:
        var(--tiv-navy);

}


.tiv-cta-inner {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        60px;

}


.tiv-cta h2 {

    max-width:
        760px;

    color:
        var(--tiv-white);

}


.tiv-cta h2 span {

    color:
        var(--tiv-gold-light);

}


.tiv-cta p {

    margin:
        24px 0 0;

    max-width:
        680px;

    font-size:
        0.98rem;

    line-height:
        1.8;

    color:
        rgba(255, 255, 255, 0.72);

}


.tiv-cta-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    min-width:
        190px;

}


.tiv-cta-actions .btn {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    white-space:
        nowrap;

}


/* =========================================================
   23. GOLD SOCIAL LINKS
   ========================================================= */

.tiv-cta a,
.tiv-video-link {

    text-decoration:
        none;

}


/*
   The footer social classes below intentionally override
   generic footer link styling from the global stylesheet.
*/

.site-footer__social .site-footer__instagram,
.site-footer__social .site-footer__facebook {

    color:
        var(--tiv-gold) !important;

    font-weight:
        700;

    transition:
        color var(--tiv-transition),
        opacity var(--tiv-transition);

}


.site-footer__social .site-footer__instagram:hover,
.site-footer__social .site-footer__facebook:hover {

    color:
        var(--tiv-gold-light) !important;

    opacity:
        1;

}


/* =========================================================
   24. RESPONSIVE — LARGE TABLETS
   ========================================================= */

@media (max-width: 1100px) {

    .tiv-hero__inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.75fr);

        gap:
            55px;

    }


    .tiv-conversation-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .tiv-video-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .tiv-impact-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .tiv-impact-grid article:nth-child(2) {

        border-right:
            0;

    }


    .tiv-impact-grid article:nth-child(-n + 2) {

        border-bottom:
            1px solid var(--tiv-border);

    }


    .tiv-gallery-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .tiv-gallery-grid figure:nth-child(1),
    .tiv-gallery-grid figure:nth-child(5) {

        grid-column:
            span 2;

    }


    .tiv-gallery-grid figure:nth-child(4) {

        grid-column:
            span 1;

    }


    .tiv-journey {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        row-gap:
            45px;

    }


    .tiv-journey::before {

        display:
            none;

    }

}


/* =========================================================
   25. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .tiv-hero {

        min-height:
            auto;

    }


    .tiv-hero__inner {

        grid-template-columns:
            1fr;

        padding-block:
            75px 90px;

    }


    .tiv-hero__content {

        max-width:
            760px;

    }


    .tiv-hero__media {

        width:
            min(100%, 620px);

        margin-inline:
            auto;

    }


    .tiv-split,
    .tiv-split--reverse {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    /*
       Important mobile ordering:
       the image follows the description when the split
       section is converted to one column.
    */

    .tiv-split .tiv-content,
    .tiv-split--reverse .tiv-content {

        order:
            1;

    }


    .tiv-split .tiv-photo,
    .tiv-split--reverse .tiv-photo {

        order:
            2;

    }


    .tiv-perspective-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .tiv-viewer-inner {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .tiv-viewer-words {

        align-items:
            flex-start;

    }


    .tiv-purpose-inner {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .tiv-purpose-visual {

        width:
            min(100%, 440px);

        min-height:
            440px;

        margin-inline:
            auto;

    }


    .tiv-cta-inner {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .tiv-cta-actions {

        flex-direction:
            row;

        flex-wrap:
            wrap;

    }

}


/* =========================================================
   26. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .tiv-section > .container,
    .tiv-hero > .container,
    .tiv-impact > .container,
    .tiv-closing > .container,
    .tiv-cta > .container {

        width:
            min(
                calc(100% - 32px),
                var(--tiv-container)
            );

    }


    .tiv-section {

        padding-block:
            76px;

    }


    /* HERO */

    .tiv-hero__inner {

        gap:
            52px;

        padding-block:
            58px 70px;

    }


    .tiv-hero h1 {

        font-size:
            clamp(3.25rem, 16vw, 5rem);

        letter-spacing:
            -0.07em;

    }


    .tiv-hero__lead {

        margin-top:
            25px;

        font-size:
            0.98rem;

        line-height:
            1.75;

    }


    .tiv-hero__tags {

        margin-top:
            24px;

    }


    .tiv-hero__actions {

        margin-top:
            30px;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .tiv-hero__actions .btn {

        width:
            100%;

    }


    .tiv-hero__media {

        width:
            calc(100% - 14px);

        margin-left:
            14px;

    }


    .tiv-hero__media::before {

        inset:
            -10px 10px 10px -10px;

        border-radius:
            20px;

    }


    .tiv-hero__media img {

        aspect-ratio:
            4 / 4.8;

        border-radius:
            20px;

    }


    .tiv-hero__media figcaption {

        right:
            12px;

        bottom:
            12px;

        left:
            12px;

        padding:
            12px 13px;

    }


    .tiv-hero__media figcaption strong {

        font-size:
            0.61rem;

    }


    .tiv-hero__media figcaption span {

        font-size:
            0.72rem;

    }


    /* GENERAL TYPOGRAPHY */

    .tiv-eyebrow {

        margin-bottom:
            17px;

        font-size:
            0.63rem;

        letter-spacing:
            0.15em;

    }


    .tiv-content h2,
    .tiv-heading h2,
    .tiv-impact-heading h2 {

        font-size:
            clamp(2.25rem, 11vw, 3.35rem);

        line-height:
            1;

    }


    .tiv-content p,
    .tiv-heading > p,
    .tiv-impact-heading p {

        font-size:
            0.93rem;

        line-height:
            1.78;

    }


    .tiv-content .tiv-lead {

        margin-top:
            21px;

        font-size:
            1rem;

    }


    /* PHOTOS */

    .tiv-photo img {

        aspect-ratio:
            4 / 4.8;

        border-radius:
            20px;

    }


    .tiv-photo::after {

        width:
            65px;

        height:
            65px;

        right:
            -10px;

        bottom:
            -10px;

    }


    .tiv-photo--border::before {

        width:
            70px;

        height:
            70px;

        top:
            10px;

        left:
            -10px;

    }


    .tiv-photo figcaption {

        left:
            12px;

        bottom:
            12px;

        padding:
            11px 12px;

    }


    .tiv-photo figcaption strong {

        font-size:
            0.6rem;

    }


    .tiv-photo figcaption span {

        font-size:
            0.7rem;

    }


    /* HIGHLIGHT */

    .tiv-highlight {

        margin-top:
            27px;

        padding:
            18px 18px;

    }


    /* CONVERSATION */

    .tiv-heading {

        margin-bottom:
            36px;

    }


    .tiv-conversation-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .tiv-conversation-card {

        min-height:
            auto;

        padding:
            25px 22px;

    }


    .tiv-conversation-card > span {

        margin-bottom:
            28px;

    }


    /* CHECKS */

    .tiv-checks {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    /* PERSPECTIVES */

    .tiv-perspective-main {

        min-height:
            360px;

        padding:
            30px 25px;

    }


    .tiv-perspective-main h3 {

        font-size:
            2.4rem;

    }


    /* VIEWER */

    .tiv-viewer-content h2 {

        font-size:
            clamp(2.5rem, 12vw, 3.7rem);

    }


    .tiv-viewer-words {

        gap:
            6px;

    }


    .tiv-viewer-words span {

        font-size:
            clamp(1.9rem, 9vw, 2.7rem);

    }


    /* JOURNEY */

    .tiv-journey {

        grid-template-columns:
            1fr;

        gap:
            34px;

    }


    .tiv-journey article {

        display:
            grid;

        grid-template-columns:
            56px 1fr;

        column-gap:
            17px;

    }


    .tiv-journey-number {

        grid-row:
            span 2;

        margin:
            0;

    }


    .tiv-journey h3 {

        align-self:
            end;

        margin:
            0 0 7px;

    }


    .tiv-journey p {

        grid-column:
            2;

    }


    /* PURPOSE */

    .tiv-purpose-content h2 {

        font-size:
            clamp(2.4rem, 11vw, 3.5rem);

    }


    .tiv-purpose-visual {

        width:
            100%;

        min-height:
            310px;

    }


    .tiv-purpose-word span {

        font-size:
            clamp(1.65rem, 9vw, 2.5rem);

    }


    /* IMPACT */

    .tiv-impact {

        padding-block:
            78px;

    }


    .tiv-impact-heading {

        margin-bottom:
            38px;

    }


    .tiv-impact-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .tiv-impact-grid article {

        min-height:
            230px;

        padding:
            27px 18px;

    }


    .tiv-impact-grid article:nth-child(2) {

        border-right:
            0;

    }


    .tiv-impact-grid article:nth-child(3) {

        border-right:
            1px solid var(--tiv-border);

    }


    .tiv-impact-grid article:nth-child(3),
    .tiv-impact-grid article:nth-child(4) {

        border-bottom:
            0;

    }


    .tiv-impact-grid strong {

        font-size:
            clamp(3rem, 14vw, 4.3rem);

    }


    .tiv-impact-grid span {

        margin-top:
            14px;

        font-size:
            0.86rem;

    }


    .tiv-impact-grid small {

        font-size:
            0.68rem;

        line-height:
            1.5;

    }


    /* GALLERY */

    .tiv-gallery-grid {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        grid-auto-rows:
            170px;

        gap:
            8px;

    }


    .tiv-gallery-grid figure,
    .tiv-gallery-grid figure:nth-child(1),
    .tiv-gallery-grid figure:nth-child(5) {

        grid-column:
            span 1;

        grid-row:
            span 1;

        border-radius:
            12px;

    }


    .tiv-gallery-grid figure:nth-child(1) {

        grid-column:
            span 2;

        grid-row:
            span 2;

    }


    .tiv-gallery-grid figure:nth-child(5) {

        grid-column:
            span 2;

    }


    /* VIDEOS */

    .tiv-video-grid {

        grid-template-columns:
            1fr;

        gap:
            17px;

    }


    .tiv-video-card__body {

        padding:
            21px 19px 23px;

    }


    .tiv-video-card__body h3 {

        font-size:
            1.08rem;

    }


    .tiv-video-card__body p {

        font-size:
            0.83rem;

    }


    /* CLOSING */

    .tiv-closing {

        padding-block:
            100px;

    }


    .tiv-closing h2 {

        font-size:
            clamp(3rem, 15vw, 4.8rem);

    }


    .tiv-closing p {

        font-size:
            0.94rem;

        line-height:
            1.8;

    }


    /* CTA */

    .tiv-cta-inner {

        gap:
            35px;

    }


    .tiv-cta h2 {

        font-size:
            clamp(2.4rem, 11vw, 3.5rem);

    }


    .tiv-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .tiv-cta-actions .btn {

        width:
            100%;

    }

}


/* =========================================================
   27. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .tiv-section > .container,
    .tiv-hero > .container,
    .tiv-impact > .container,
    .tiv-closing > .container,
    .tiv-cta > .container {

        width:
            calc(100% - 26px);

    }


    .tiv-hero__inner {

        padding-top:
            48px;

    }


    .tiv-hero h1 {

        font-size:
            3rem;

    }


    .tiv-hero__media {

        width:
            calc(100% - 8px);

        margin-left:
            8px;

    }


    .tiv-impact-grid article {

        min-height:
            215px;

        padding:
            22px 14px;

    }


    .tiv-impact-grid strong {

        font-size:
            2.75rem;

    }


    .tiv-impact-grid span {

        font-size:
            0.8rem;

    }


    .tiv-impact-grid small {

        font-size:
            0.64rem;

    }


    .tiv-gallery-grid {

        grid-auto-rows:
            145px;

    }


    .tiv-gallery-grid figure:nth-child(1) {

        grid-row:
            span 2;

    }

}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tiv-conversation-card,
    .tiv-video-card,
    .tiv-video-card > a img,
    .tiv-video-play,
    .tiv-gallery-grid img {

        transition:
            none;

    }

}


/* =========================================================
   29. PRINT
   ========================================================= */

@media print {

    .tiv-hero {

        min-height:
            auto;

        background:
            #ffffff;

    }


    .tiv-hero__overlay {

        display:
            none;

    }


    .tiv-hero h1,
    .tiv-dark .tiv-content h2,
    .tiv-purpose-content h2,
    .tiv-viewer-content h2,
    .tiv-cta h2 {

        color:
            #000000;

    }


    .tiv-hero h1 span,
    .tiv-dark .tiv-content h2 span,
    .tiv-purpose-content h2 span,
    .tiv-viewer-content h2 span,
    .tiv-cta h2 span {

        color:
            #000000;

    }


    .tiv-hero__media,
    .tiv-video,
    .tiv-cta,
    .tiv-viewer {

        break-inside:
            avoid;

    }

}

/* =========================================================
   THE INSIDE VIEW — HERO EXPLORE BUTTON FIX
   ========================================================= */

.tiv-hero .tiv-hero__actions .btn.btn-light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;

    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    padding: 14px 22px !important;
    border-radius: 999px !important;

    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.tiv-hero .tiv-hero__actions .btn.btn-light span {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tiv-hero .tiv-hero__actions .btn.btn-light:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: #dfc35b !important;
    transform: translateY(-2px);
}

.tiv-hero .tiv-hero__actions .btn.btn-light:hover span {
    color: #dfc35b !important;
}

/* =========================================================
   THE INSIDE VIEW — FINAL CTA BUTTONS
   ========================================================= */

.tiv-cta .tiv-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}


/* Light CTA — Watch the Show */

.tiv-cta .tiv-cta-actions .btn.btn-light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    color: #ffffff !important;
    background: transparent !important;

    border: 1px solid rgba(255, 255, 255, 0.75) !important;

    text-decoration: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    padding: 14px 24px !important;
    min-height: 50px !important;

    border-radius: 999px !important;

    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    position: relative;
    z-index: 2;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Arrow */

.tiv-cta .tiv-cta-actions .btn.btn-light span {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* Hover */

.tiv-cta .tiv-cta-actions .btn.btn-light:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: #dfc35b !important;

    transform: translateY(-2px);
}


.tiv-cta .tiv-cta-actions .btn.btn-light:hover span {
    color: #dfc35b !important;
}


/* Gold CTA */

.tiv-cta .tiv-cta-actions .btn.btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* Mobile */

@media (max-width: 640px) {

    .tiv-cta .tiv-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tiv-cta .tiv-cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

}