```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM INNER PAGE HERO SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/page-hero.css
   Full Path:
   /public_html/assets/css/components/page-hero.css

   Version: 1.0

   Used On:
   - About
   - Our Products
   - Product Categories
   - Product Detail
   - Production
   - Export
   - Founder
   - Contact
   - Future Inner Pages

   Important:
   - Homepage hero remains in /assets/css/hero.css
   - This file is only for inner-page hero sections

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - buttons.css
   - badges.css
   - breadcrumbs.css
   ============================================================ */


/* ============================================================
   01. PAGE HERO
   ============================================================ */

.page-hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 470px;

    padding:
        clamp(7rem, 11vw, 9.5rem)
        0
        clamp(4.5rem, 7vw, 6.5rem);

    color: var(--text-white);

    background:
        var(--color-primary-deep);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   02. PAGE HERO BACKGROUND
   ============================================================ */

.page-hero-bg {
    position: absolute;

    inset: 0;

    z-index: -5;

    background:
        var(--color-primary-deep);

    overflow: hidden;
}


/* ============================================================
   03. PAGE HERO BACKGROUND IMAGE
   ============================================================ */

.page-hero-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: 0.36;

    transform: scale(1.02);
}


/* ============================================================
   04. PAGE HERO BACKGROUND COVER
   ============================================================ */

.page-hero-bg-cover {
    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;
}


/* ============================================================
   05. PRIMARY DARK OVERLAY
   ============================================================ */

.page-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            105deg,
            rgba(4, 19, 14, 0.98) 0%,
            rgba(7, 34, 24, 0.94) 38%,
            rgba(11, 43, 32, 0.78) 68%,
            rgba(11, 43, 32, 0.60) 100%
        );

    pointer-events: none;
}


/* ============================================================
   06. GOLD AMBIENT GLOW
   ============================================================ */

.page-hero::after {
    content: "";

    position: absolute;

    top: -240px;
    right: -180px;

    z-index: -3;

    width: 620px;
    height: 620px;

    border-radius: var(--radius-circle);

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 104, 0.20) 0%,
            rgba(183, 138, 61, 0.08) 35%,
            rgba(183, 138, 61, 0) 72%
        );

    pointer-events: none;
}


/* ============================================================
   07. PAGE HERO DECORATIONS
   ============================================================ */

.page-hero-decor {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   08. DECORATIVE GRID
   ============================================================ */

.page-hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.055;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.40) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.40) 1px,
            transparent 1px
        );

    background-size:
        58px
        58px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 45%,
            #000
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 45%,
            #000
        );
}


/* ============================================================
   09. GOLD ORB
   ============================================================ */

.page-hero-orb {
    position: absolute;

    border-radius: var(--radius-circle);

    border:
        1px solid rgba(212, 175, 104, 0.14);

    background:
        rgba(212, 175, 104, 0.025);

    box-shadow:
        inset 0 0 50px rgba(212, 175, 104, 0.025);
}


/* ============================================================
   10. GOLD ORB LARGE
   ============================================================ */

.page-hero-orb-lg {
    top: 70px;
    right: 8%;

    width: 270px;
    height: 270px;
}


/* ============================================================
   11. GOLD ORB SMALL
   ============================================================ */

.page-hero-orb-sm {
    right: 25%;
    bottom: -50px;

    width: 130px;
    height: 130px;
}


/* ============================================================
   12. DECORATIVE GOLD LINE
   ============================================================ */

.page-hero-line {
    position: absolute;

    top: 0;
    right: 16%;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212, 175, 104, 0.20),
            transparent
        );
}


/* ============================================================
   13. PAGE HERO CONTAINER
   ============================================================ */

.page-hero-container {
    position: relative;

    z-index: 5;

    width: 100%;
}


/* ============================================================
   14. PAGE HERO INNER
   ============================================================ */

.page-hero-inner {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(2rem, 6vw, 5rem);
}


/* ============================================================
   15. PAGE HERO CONTENT
   ============================================================ */

.page-hero-content {
    position: relative;

    z-index: 3;

    max-width: 850px;
}


/* ============================================================
   16. PAGE HERO BREADCRUMB
   ============================================================ */

.page-hero-breadcrumb {
    margin-bottom:
        var(--space-5);
}


/* ============================================================
   17. PAGE HERO EYEBROW
   ============================================================ */

.page-hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: var(--space-3);

    margin-bottom:
        var(--space-5);

    color: var(--color-secondary-light);

    font-family: var(--font-ui);

    font-size: 0.58rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* ============================================================
   18. EYEBROW LINE
   ============================================================ */

.page-hero-eyebrow::before {
    content: "";

    width: 38px;
    height: 1px;

    flex: 0 0 38px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   19. PAGE HERO TITLE
   ============================================================ */

.page-hero-title {
    max-width: 850px;

    margin: 0;

    color: var(--text-white);

    font-family: var(--font-heading);

    font-size:
        clamp(2.8rem, 5.5vw, 5.4rem);

    font-weight: var(--font-semibold);

    line-height: 0.98;

    letter-spacing: -0.045em;

    text-wrap: balance;
}


/* ============================================================
   20. TITLE GOLD TEXT
   ============================================================ */

.page-hero-title .text-gold,
.page-hero-title-gold {
    color: var(--color-secondary-light);
}


/* ============================================================
   21. TITLE ITALIC
   ============================================================ */

.page-hero-title .text-italic {
    font-style: italic;

    font-weight: var(--font-medium);
}


/* ============================================================
   22. PAGE HERO DESCRIPTION
   ============================================================ */

.page-hero-description {
    max-width: 680px;

    margin:
        var(--space-5)
        0
        0;

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

    font-size:
        clamp(0.7rem, 1vw, 0.78rem);

    line-height: 1.8;
}


/* ============================================================
   23. PAGE HERO ACTIONS
   ============================================================ */

.page-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top:
        var(--space-6);
}


/* ============================================================
   24. PAGE HERO META
   ============================================================ */

.page-hero-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-3)
        var(--space-6);

    margin-top:
        var(--space-6);
}


/* ============================================================
   25. PAGE HERO META ITEM
   ============================================================ */

.page-hero-meta-item {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

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

    font-family: var(--font-ui);

    font-size: 0.56rem;

    font-weight: var(--font-semibold);

    line-height: 1.4;
}


/* ============================================================
   26. META ICON
   ============================================================ */

.page-hero-meta-item i {
    color: var(--color-secondary-light);

    font-size: 0.62rem;
}


/* ============================================================
   27. PAGE HERO SIDE
   ============================================================ */

.page-hero-side {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


/* ============================================================
   28. PAGE HERO MONOGRAM
   ============================================================ */

.page-hero-monogram {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        clamp(190px, 20vw, 280px);

    aspect-ratio: 1;

    border:
        1px solid rgba(212, 175, 104, 0.18);

    border-radius: var(--radius-circle);

    color:
        rgba(212, 175, 104, 0.12);

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

    box-shadow:
        inset 0 0 70px rgba(212, 175, 104, 0.025);

    font-family: var(--font-heading);

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

    font-weight: var(--font-semibold);

    line-height: 1;

    letter-spacing: -0.08em;

    -webkit-backdrop-filter:
        blur(3px);

    backdrop-filter:
        blur(3px);
}


/* ============================================================
   29. MONOGRAM INNER BORDER
   ============================================================ */

.page-hero-monogram::before {
    content: "";

    position: absolute;

    inset: 16px;

    border:
        1px solid rgba(212, 175, 104, 0.10);

    border-radius: inherit;
}


/* ============================================================
   30. MONOGRAM GOLD DOT
   ============================================================ */

.page-hero-monogram::after {
    content: "";

    position: absolute;

    top: 17%;
    right: 10%;

    width: 8px;
    height: 8px;

    border-radius: var(--radius-circle);

    background: var(--color-secondary);

    box-shadow:
        0 0 0 8px rgba(212, 175, 104, 0.07);
}


/* ============================================================
   31. PAGE HERO IMAGE
   ============================================================ */

.page-hero-image {
    position: relative;

    width:
        clamp(230px, 25vw, 350px);

    aspect-ratio: 4 / 5;

    border:
        1px solid rgba(212, 175, 104, 0.18);

    border-radius:
        var(--radius-2xl);

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

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

    overflow: hidden;
}


/* ============================================================
   32. PAGE HERO IMAGE IMG
   ============================================================ */

.page-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* ============================================================
   33. PAGE HERO IMAGE OVERLAY
   ============================================================ */

.page-hero-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 19, 14, 0.45),
            transparent 55%
        );

    pointer-events: none;
}


/* ============================================================
   34. PAGE HERO IMAGE BADGE
   ============================================================ */

.page-hero-image-badge {
    position: absolute;

    right: var(--space-4);
    bottom: var(--space-4);

    z-index: 5;
}


/* ============================================================
   35. PAGE HERO STAT
   ============================================================ */

.page-hero-stat {
    position: relative;

    min-width: 190px;

    padding:
        var(--space-5);

    border:
        1px solid rgba(212, 175, 104, 0.14);

    border-radius:
        var(--radius-xl);

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

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.08);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}


/* ============================================================
   36. PAGE HERO STAT NUMBER
   ============================================================ */

.page-hero-stat-number {
    display: block;

    color: var(--color-secondary-light);

    font-family: var(--font-heading);

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

    font-weight: var(--font-semibold);

    line-height: 1;
}


/* ============================================================
   37. PAGE HERO STAT LABEL
   ============================================================ */

.page-hero-stat-label {
    display: block;

    margin-top:
        var(--space-2);

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

    font-family: var(--font-ui);

    font-size: 0.54rem;

    font-weight: var(--font-semibold);

    line-height: 1.5;
}


/* ============================================================
   38. PAGE HERO BOTTOM LINE
   ============================================================ */

.page-hero-bottom-line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 5;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 104, 0.45),
            transparent
        );
}


/* ============================================================
   39. PAGE HERO SCROLL INDICATOR
   ============================================================ */

.page-hero-scroll {
    position: absolute;

    right:
        clamp(1rem, 3vw, 3rem);

    bottom:
        var(--space-6);

    z-index: 6;

    display: inline-flex;

    align-items: center;

    gap: var(--space-3);

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

    font-family: var(--font-ui);

    font-size: 0.48rem;

    font-weight: var(--font-bold);

    letter-spacing: 0.10em;

    text-transform: uppercase;

    writing-mode: vertical-rl;
}


/* ============================================================
   40. SCROLL INDICATOR LINE
   ============================================================ */

.page-hero-scroll::after {
    content: "";

    width: 1px;
    height: 38px;

    background:
        linear-gradient(
            to bottom,
            var(--color-secondary),
            transparent
        );
}


/* ============================================================
   41. CENTER HERO
   ============================================================ */

.page-hero-center {
    text-align: center;
}

.page-hero-center
.page-hero-inner {
    display: block;
}

.page-hero-center
.page-hero-content {
    max-width: 900px;

    margin:
        0
        auto;
}

.page-hero-center
.page-hero-title,
.page-hero-center
.page-hero-description {
    margin-right: auto;
    margin-left: auto;
}

.page-hero-center
.page-hero-eyebrow,
.page-hero-center
.page-hero-actions,
.page-hero-center
.page-hero-meta {
    justify-content: center;
}

.page-hero-center
.breadcrumb {
    justify-content: center;
}


/* ============================================================
   42. COMPACT HERO
   ============================================================ */

.page-hero-compact {
    min-height: 360px;

    padding:
        clamp(6.5rem, 9vw, 8rem)
        0
        clamp(3rem, 5vw, 4.5rem);
}

.page-hero-compact
.page-hero-title {
    font-size:
        clamp(2.4rem, 4.5vw, 4.2rem);
}


/* ============================================================
   43. LARGE HERO
   ============================================================ */

.page-hero-large {
    min-height: 590px;

    padding:
        clamp(8rem, 12vw, 10.5rem)
        0
        clamp(5rem, 8vw, 7rem);
}


/* ============================================================
   44. LIGHT HERO
   ============================================================ */

.page-hero-light {
    color: var(--color-primary-deep);

    background:
        linear-gradient(
            135deg,
            #f8f6ef 0%,
            #ffffff 52%,
            #f4efe3 100%
        );
}


/* ============================================================
   45. LIGHT HERO OVERLAY
   ============================================================ */

.page-hero-light::before {
    background:
        linear-gradient(
            105deg,
            rgba(248, 246, 239, 0.96),
            rgba(255, 255, 255, 0.88)
        );
}


/* ============================================================
   46. LIGHT HERO TITLE
   ============================================================ */

.page-hero-light
.page-hero-title {
    color: var(--color-primary-deep);
}


/* ============================================================
   47. LIGHT HERO DESCRIPTION
   ============================================================ */

.page-hero-light
.page-hero-description {
    color: var(--text-body);
}


/* ============================================================
   48. LIGHT HERO META
   ============================================================ */

.page-hero-light
.page-hero-meta-item {
    color: var(--text-muted);
}


/* ============================================================
   49. LIGHT HERO ORBS
   ============================================================ */

.page-hero-light
.page-hero-orb {
    border-color:
        rgba(183, 138, 61, 0.14);

    background:
        rgba(183, 138, 61, 0.03);
}


/* ============================================================
   50. GOLD HERO
   ============================================================ */

.page-hero-gold {
    color: var(--color-primary-deep);

    background:
        linear-gradient(
            125deg,
            #ead09b 0%,
            #c99b4f 52%,
            #a87930 100%
        );
}


/* ============================================================
   51. GOLD HERO OVERLAY
   ============================================================ */

.page-hero-gold::before {
    background:
        linear-gradient(
            105deg,
            rgba(234, 208, 155, 0.94),
            rgba(183, 138, 61, 0.74)
        );
}


/* ============================================================
   52. GOLD HERO TITLE
   ============================================================ */

.page-hero-gold
.page-hero-title {
    color: var(--color-primary-deep);
}


/* ============================================================
   53. GOLD HERO DESCRIPTION
   ============================================================ */

.page-hero-gold
.page-hero-description {
    color:
        rgba(4, 19, 14, 0.68);
}


/* ============================================================
   54. PRODUCT PAGE HERO
   ============================================================ */

.page-hero-product {
    min-height: 430px;
}


/* ============================================================
   55. PRODUCT HERO CATEGORY
   ============================================================ */

.page-hero-product-category {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-bottom:
        var(--space-4);

    color: var(--color-secondary-light);

    font-family: var(--font-ui);

    font-size: 0.55rem;

    font-weight: var(--font-bold);

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* ============================================================
   56. PRODUCT HERO CATEGORY DOT
   ============================================================ */

.page-hero-product-category::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: var(--radius-circle);

    background: var(--color-secondary);

    box-shadow:
        0 0 0 6px rgba(212, 175, 104, 0.07);
}


/* ============================================================
   57. FOUNDER PAGE HERO
   ============================================================ */

.page-hero-founder {
    min-height: 590px;
}


/* ============================================================
   58. FOUNDER HERO IMAGE
   ============================================================ */

.page-hero-founder
.page-hero-image {
    width:
        clamp(250px, 27vw, 380px);

    aspect-ratio: 4 / 5;
}


/* ============================================================
   59. FOUNDER HERO EXPERIENCE
   ============================================================ */

.page-hero-experience {
    position: absolute;

    left: -55px;
    bottom: 35px;

    z-index: 7;

    min-width: 150px;

    padding:
        var(--space-4);

    border:
        1px solid rgba(212, 175, 104, 0.25);

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

    color: var(--color-primary-deep);

    background:
        var(--gradient-gold);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   60. EXPERIENCE NUMBER
   ============================================================ */

.page-hero-experience-number {
    display: block;

    font-family: var(--font-heading);

    font-size: 2rem;

    font-weight: var(--font-bold);

    line-height: 1;
}


/* ============================================================
   61. EXPERIENCE LABEL
   ============================================================ */

.page-hero-experience-label {
    display: block;

    margin-top: 5px;

    font-family: var(--font-ui);

    font-size: 0.48rem;

    font-weight: var(--font-bold);

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* ============================================================
   62. CONTACT HERO
   ============================================================ */

.page-hero-contact {
    min-height: 420px;
}


/* ============================================================
   63. EXPORT HERO
   ============================================================ */

.page-hero-export::after {
    width: 760px;
    height: 760px;

    top: -330px;
    right: -210px;
}


/* ============================================================
   64. PAGE HERO FLOAT CARD
   ============================================================ */

.page-hero-float-card {
    position: absolute;

    right: 8%;
    bottom: -42px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: var(--space-4);

    min-width: 260px;

    padding:
        var(--space-4)
        var(--space-5);

    border:
        1px solid rgba(183, 138, 61, 0.18);

    border-radius:
        var(--radius-xl);

    color: var(--color-primary-deep);

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

    box-shadow:
        0 22px 60px rgba(11, 43, 32, 0.14);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);
}


/* ============================================================
   65. FLOAT CARD ICON
   ============================================================ */

.page-hero-float-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 15px;

    color: var(--color-primary-deep);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);
}


/* ============================================================
   66. FLOAT CARD CONTENT
   ============================================================ */

.page-hero-float-content {
    min-width: 0;
}


/* ============================================================
   67. FLOAT CARD LABEL
   ============================================================ */

.page-hero-float-label {
    display: block;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.48rem;

    font-weight: var(--font-bold);

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ============================================================
   68. FLOAT CARD VALUE
   ============================================================ */

.page-hero-float-value {
    display: block;

    margin-top: 4px;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: var(--font-semibold);

    line-height: 1.25;
}


/* ============================================================
   69. PAGE HERO WAVE
   ============================================================ */

.page-hero-wave {
    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    z-index: 4;

    width: 100%;

    line-height: 0;

    pointer-events: none;
}

.page-hero-wave svg {
    display: block;

    width: 100%;
    height: auto;
}


/* ============================================================
   70. PAGE HERO ANIMATION
   ============================================================ */

.page-hero-animate
.page-hero-eyebrow,
.page-hero-animate
.page-hero-title,
.page-hero-animate
.page-hero-description,
.page-hero-animate
.page-hero-actions,
.page-hero-animate
.page-hero-meta {
    opacity: 0;

    transform:
        translateY(18px);

    animation:
        pageHeroReveal 0.8s forwards;
}


/* ============================================================
   71. ANIMATION DELAYS
   ============================================================ */

.page-hero-animate
.page-hero-eyebrow {
    animation-delay: 0.08s;
}

.page-hero-animate
.page-hero-title {
    animation-delay: 0.16s;
}

.page-hero-animate
.page-hero-description {
    animation-delay: 0.24s;
}

.page-hero-animate
.page-hero-actions {
    animation-delay: 0.32s;
}

.page-hero-animate
.page-hero-meta {
    animation-delay: 0.40s;
}


/* ============================================================
   72. HERO REVEAL KEYFRAMES
   ============================================================ */

@keyframes pageHeroReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   73. PAGE HERO IMAGE ANIMATION
   ============================================================ */

.page-hero-animate
.page-hero-side {
    opacity: 0;

    transform:
        translateX(24px);

    animation:
        pageHeroSideReveal 1s 0.22s forwards;
}


/* ============================================================
   74. SIDE REVEAL KEYFRAMES
   ============================================================ */

@keyframes pageHeroSideReveal {

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* ============================================================
   75. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .page-hero {
        min-height: 500px;
    }

    .page-hero-large {
        min-height: 620px;
    }

    .page-hero-founder {
        min-height: 620px;
    }

}


/* ============================================================
   76. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .page-hero {
        min-height: 430px;
    }

    .page-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(190px, 0.32fr);

        gap: var(--space-6);
    }

    .page-hero-title {
        font-size:
            clamp(2.7rem, 7vw, 4.5rem);
    }

    .page-hero-monogram {
        width:
            clamp(170px, 23vw, 220px);
    }

    .page-hero-image {
        width:
            clamp(210px, 27vw, 280px);
    }

    .page-hero-scroll {
        display: none;
    }

    .page-hero-experience {
        left: -35px;
    }

}


/* ============================================================
   77. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .page-hero {
        min-height: auto;

        padding:
            clamp(6.5rem, 22vw, 8rem)
            0
            clamp(3.5rem, 12vw, 4.5rem);
    }

    .page-hero-inner {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }

    .page-hero-content {
        max-width: 100%;
    }

    .page-hero-title {
        max-width: 620px;

        font-size:
            clamp(2.45rem, 12vw, 4rem);

        line-height: 1.02;
    }

    .page-hero-description {
        max-width: 580px;

        font-size: 0.68rem;
    }

    .page-hero-side {
        justify-content: flex-start;
    }

    .page-hero-monogram {
        width: 180px;
    }

    .page-hero-image {
        width:
            min(100%, 320px);
    }

    .page-hero-founder
    .page-hero-image {
        width:
            min(100%, 330px);
    }

    .page-hero-experience {
        right: -20px;
        bottom: 25px;
        left: auto;
    }

    .page-hero-float-card {
        position: relative;

        right: auto;
        bottom: auto;

        width: 100%;
        min-width: 0;

        margin-top:
            var(--space-6);
    }

    .page-hero-orb-lg {
        top: 100px;
        right: -100px;
    }

    .page-hero-orb-sm {
        right: 30px;
    }

    .page-hero-line {
        right: 20%;
    }

    .page-hero-compact {
        min-height: auto;
    }

    .page-hero-large,
    .page-hero-founder {
        min-height: auto;
    }

}


/* ============================================================
   78. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .page-hero {
        padding:
            6.5rem
            0
            3.5rem;
    }

    .page-hero-title {
        font-size:
            clamp(2.2rem, 13vw, 3.25rem);

        letter-spacing: -0.035em;
    }

    .page-hero-eyebrow {
        gap: var(--space-2);

        margin-bottom:
            var(--space-4);

        font-size: 0.52rem;

        letter-spacing: 0.12em;
    }

    .page-hero-eyebrow::before {
        width: 28px;

        flex-basis: 28px;
    }

    .page-hero-description {
        margin-top:
            var(--space-4);

        line-height: 1.75;
    }

    .page-hero-actions {
        align-items: stretch;

        flex-direction: column;

        margin-top:
            var(--space-5);
    }

    .page-hero-actions
    .btn {
        width: 100%;
    }

    .page-hero-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: var(--space-3);

        margin-top:
            var(--space-5);
    }

    .page-hero-monogram {
        width: 155px;
    }

    .page-hero-image {
        width: 100%;

        max-width: 290px;
    }

    .page-hero-founder
    .page-hero-image {
        width: 100%;

        max-width: 300px;
    }

    .page-hero-experience {
        right: -8px;
        bottom: 18px;

        min-width: 130px;

        padding:
            var(--space-3);
    }

    .page-hero-experience-number {
        font-size: 1.65rem;
    }

    .page-hero-stat {
        width: 100%;
        min-width: 0;
    }

}


/* ============================================================
   79. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .page-hero-title {
        font-size: 2.15rem;
    }

    .page-hero-image {
        max-width: 260px;
    }

    .page-hero-experience {
        position: relative;

        right: auto;
        bottom: auto;

        width: 100%;

        margin-top:
            var(--space-3);
    }

}


/* ============================================================
   80. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .page-hero-image,
    .page-hero-monogram {
        transform: none;
    }

}


/* ============================================================
   81. REDUCED MOTION
   ============================================================ */

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

    .page-hero-animate
    .page-hero-eyebrow,

    .page-hero-animate
    .page-hero-title,

    .page-hero-animate
    .page-hero-description,

    .page-hero-animate
    .page-hero-actions,

    .page-hero-animate
    .page-hero-meta,

    .page-hero-animate
    .page-hero-side {
        opacity: 1;

        transform: none;

        animation: none;
    }

}


/* ============================================================
   END OF INNER PAGE HERO SYSTEM
   ============================================================ */
```