/* =========================================================
ANIMATED CSS CUSTOM PROPERTY
Used for rotating gradient border animation
========================================================= */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
    }
    
    /* =========================================================
    CUSTOM FONT : UHUDSCRIPT
    Used for handwritten CTA button styling
    ========================================================= */
    @font-face {
    font-family: "Uhudscript";
    src: url("/-global-assets/fonts/Uhudscript-Demo.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }
    
    /* =========================================================
    CUSTOM FONT : GALANO
    Main website font
    ========================================================= */
    @font-face {
    font-family: "Galano";
    src: url("/-global-assets/fonts/GalanoGrotesque-Medium.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }
    
    /* =========================================================
    CUSTOM FONT : BAHAGIA
    ========================================================= */
    @font-face {
    font-family: "Bahagia";
    src: url("/-global-assets/fonts/Bahagia.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }
    
    /* =========================================================
    GLOBAL COLOR VARIABLES
    ========================================================= */
    :root {
    --navy: #02253d;
    --ink: #02253d;
    --paper: #fcfcfc;
    
    /* Decorative top border gradient */
    --paper-gradient: linear-gradient(
    90deg,
    #0baae6 0%,
    #70f0a4 40%,
    #fae806 63%,
    #fbb413 73%,
    #f778d6 86%,
    #c37ce9 100%
    );
    }
    
    /* =========================================================
    GLOBAL BOX SIZING RESET
    ========================================================= */
    *,
    *::before,
    *::after {
    box-sizing: border-box;
    }
    
    /* =========================================================
    HTML + BODY RESET
    ========================================================= */
    html,
    body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    }
    
    /* Prevent horizontal scrolling */
    html {
    overflow-x: hidden;
    }
    
    body {
    color: var(--ink);
    
    /* Dark radial background */
    background: radial-gradient(
    118.38% 101.85% at 50% 0%,
    #000000 44.82%,
    #01243c 92.63%
    );
    
    /* Main site font */
    font-family: Galano, Arial, sans-serif;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    }
    
    body.preloader-active {
    overflow: hidden;
    }
    
    
    /* =========================================================
    GLOBAL LINK RESET
    ========================================================= */
    a {
    color: inherit;
    text-decoration: none;
    }
    
    /* =========================================================
    MAIN PAGE WRAPPER
    ========================================================= */
    .founder-page {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100dvh;
    overflow-y: visible;
    align-items: flex-start;
    justify-content: center;
    padding: 112px 24px 0;
    /*overflow: hidden;*/
    isolation: isolate;
    }
    
    /* =========================================================
    MAIN FOUNDERS NOTE CARD
    ========================================================= */
    .founder-note {
    position: relative;
    z-index: 2;
    width: 650px;
    max-width: calc(100vw - 48px);
    min-height: 400px;
    max-height: none !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 38px;
    background: var(--paper);
    box-shadow: inset -2px -2px 4px 2px rgba(0, 0, 0, 0.3),
    0 10px 18px rgba(0, 0, 0, 0.28);
    }
    
    /* =========================================================
    TOP GRADIENT STRIP ON NOTE CARD
    ========================================================= */
    .founder-note::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 14px;
    content: "";
    background: var(--paper-gradient);
    }
    
    /* =========================================================
    CONTENT INSIDE NOTE CARD
    ========================================================= */
    
    .founder-note__content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: auto;
    max-width: 95%;
    padding: 42px 36px 32px;
    color: var(--ink);
    font-family: Galano, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    }
    
    
    /* =========================================================
    RESET DEFAULT MARGINS
    ========================================================= */
    .founder-note h1,
    .founder-note p {
    margin: 0;
    font: inherit;
    }
    
    .founder-note h1,
    .founder-name {
    font-family: Galano, Arial, sans-serif;
    }
    
    /* =========================================================
    MAIN HEADING
    ========================================================= */
    .founder-note h1 {
    margin-bottom: 12px;
    }
    
    /* =========================================================
    PARAGRAPH SPACING
    ========================================================= */
    .founder-note p + p {
    margin-top: 12px;
    }
    
    .quote {
    font-family: "Uhudscript", cursive !important;
    font-size: 30px !important;
    line-height: 1.00 !important;
    font-weight: 300 !important;
    letter-spacing: 1.25 !important;
    }
    
    /* =========================================================
    FOUNDERS SIGNATURE IMAGE
    ========================================================= */
    .signature {
    display: block;
    width: 78px;
    height: auto;
    margin: 5px 0;
    }
    
    /* =========================================================
    FOUNDERS NAME
    ========================================================= */
    .founder-name {
    font-size: 16.4px;
    }
    
    /* =========================================================
    DECORATIVE FLOWER IMAGE
    ========================================================= */
    .flower {
    position: absolute;
    right: -2px;
    bottom: 10px;
    z-index: 2;
    width: 150px;
    pointer-events: none;
    }
    
    /* =========================================================
    DESKTOP DECORATIVE ASSETS
    ========================================================= */
    .desk-asset {
    position: fixed;
    z-index: 1;
    display: block;
    pointer-events: none;
    user-select: none;
    }
    
    /* Coffee cup decorative image */
    .desk-asset--coffee {
    top: 28.5%;
    left: 14%;
    width: 180px;
    }
    
    /* Leaves decorative image */
    .desk-asset--leaves {
    left: -62px;
    bottom: 15px;
    width: 300px;
    }
    
    /* Laptop decorative image */
    .desk-asset--laptop {
    top: 10px;
    right: -135px;
    width: 415px;
    }
    
    /* Paper clips decorative image */
    .desk-asset--clips {
    top: 34.5%;
    right: 18.2%;
    width: 100px;
    }
    
    /* =========================================================
    CTA SYMBOL (decorative — mirrors 504 pattern)
    ========================================================= */
    .founder-cta-symbol {
    position: fixed;
    right: 15px;
    bottom: 124px;
    width: 160px;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 4;
    }
    
    /* =========================================================
    CTA BUTTON WRAPPER
    ========================================================= */
    .btn-wrapper {
    position: fixed;
    right: -24px;
    bottom: 145px;
    z-index: 5;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    padding: 2px;
    border-radius: 999px;
    
    cursor: pointer;
    }
    
    /* =========================================================
    ANIMATED OUTER BUTTON BORDER
    ========================================================= */
    .btn-wrapper::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 52px;
    
    background: conic-gradient(
    from var(--angle, 0deg),
    #02bcdd,
    #06d1e5,
    #64eda8,
    #d0f88d,
    #64eda8,
    #06d1e5,
    #02bcdd
    );
    
    content: "";
    
    /* Infinite rotation animation */
    animation: spin 2s linear infinite;
    }
    
    /* =========================================================
    INNER BUTTON BACKGROUND
    ========================================================= */
    .btn-wrapper::after {
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: 48px;
    background: #0d1f3c;
    content: "";
    }
    
    /* =========================================================
    BUTTON TEXT
    ========================================================= */
    .btn-inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    height: 50px;
    padding: 4px 62px;
    border-radius: inherit;
    
    /* Gradient text */
    background: linear-gradient(
    90deg,
    #02bcdd 0%,
    #06d1e5 20.71%,
    #64eda8 48.26%,
    #d0f88d 100%
    );
    
    background-clip: text;
    -webkit-background-clip: text;
    
    color: transparent;
    -webkit-text-fill-color: transparent;
    
    /* Handwritten font */
    font-family: Uhudscript, cursive;
    
    font-size: 42px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    
    white-space: nowrap;
    }
    
    /* Hidden hover text */
    .text-hover {
    display: none;
    }
    
    /* =========================================================
    BUTTON HOVER EFFECTS
    ========================================================= */
    .btn-wrapper:hover::before {
    background: linear-gradient(
    90deg,
    #02bcdd 0%,
    #06d1e5 20.71%,
    #64eda8 48.26%,
    #d0f88d 100%
    );
    
    animation: none;
    }
    
    .btn-wrapper:hover::after {
    inset: 2px;
    
    background: linear-gradient(
    90deg,
    #02bcdd 0%,
    #06d1e5 20.71%,
    #64eda8 48.26%,
    #d0f88d 100%
    );
    }
    
    /* Button text hover inversion */
    .btn-wrapper:hover .btn-inner {
    background: none;
    color: #0a1628;
    -webkit-text-fill-color: #0a1628;
    }
    
    /* Hide default text on hover */
    .btn-wrapper:hover .text-default {
    display: none;
    }
    
    /* Show alternate hover text */
    .btn-wrapper:hover .text-hover {
    display: inline;
    padding-top: 5px;
    }
    
    /* =========================================================
    ROTATION ANIMATION
    ========================================================= */
    @keyframes spin {
    to {
    --angle: 360deg;
    }
    }
    
    /* =========================================================
    RESPONSIVE MEDIA QUERIES START HERE
    ========================================================= */
    
    /* Large tablet / small desktop */
    @media (max-width: 1100px) {
    
    /* Main page spacing */
    .founder-page {
    padding: 104px 24px 0;
    }
    
    /* Slightly smaller note card */
    .founder-note {
    width: 620px;
    max-width: 94vw;
    height: 525px;
    max-height: 74dvh;
    border-radius: 34px;
    }
    
    /* Thicker top gradient strip */
    .founder-note::before {
    height: 16px;
    }
    
    /* Smaller content spacing */
    .founder-note__content {
    padding: 50px 44px 34px;
    font-size: 15px;
    line-height: 1.62;
    }
    
    /* Decorative assets resized */
    .desk-asset--coffee {
    left: 9%;
    width: 160px;
    }
    
    .desk-asset--leaves {
    left: -70px;
    width: 270px;
    }
    
    .desk-asset--laptop {
    right: -125px;
    width: 390px;
    }
    
    .desk-asset--clips {
    right: 11%;
    width: 100px;
    }
    }
    
    /* =========================================================
    TABLET + MOBILE LAYOUT
    ========================================================= */
    @media (max-width: 1024px) {
    
    /* Reset layout sizing */
    html,
    body {
    width: 100%;
    min-width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: #00111a;
    }
    
    /* Flex layout structure (robust to any number of
    placeholder/decorative sibling elements in body) */
    body {
    display: flex;
    flex-direction: column;
    }
    
    /* Remove max-width limitations from wrappers */
    .page,
    .main,
    .container,
    .site-main,
    .site-wrapper,
    .page-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    }
    
    /* Hide desktop decorative assets */
    .desk-asset {
    display: none;
    }
    
    /* Main page layout adjustments */
    .founder-page {
    width: 100vw;
    max-width: none;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow: visible;
    margin-top: 30px;
    }
    
    /* Founder note card */
    .founder-note {
    /*width: 560px;*/
    max-width: 95vw;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 24px;
    }
    
    /* Content spacing and typography */
    .founder-note__content {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 65px 46px 34px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.76;
    }
    
    /* Normalize font weights */
    .founder-note__content * {
    font-weight: 400;
    }
    
    /* Heading spacing */
    .founder-note h1 {
    margin-bottom: 15px;
    }
    
    /* Paragraph spacing */
    .founder-note p + p {
    margin-top: 15px;
    }
    
    /* Signature size */
    .signature {
    width: 72px;
    margin: 9px 0 6px;
    }
    
    /* Founder name size */
    .founder-name {
    font-size: 14px;
    }
    
    /* Decorative flower size */
    .flower {
    width: 112px;
    right: -4px;
    bottom: 8px;
    }
    }
    
    /* =========================================================
    CTA BUTTON — TABLET/MOBILE FLOW LAYOUT
    (kept below 1024px so iPad Pro / 1024px keeps the fixed
    desktop-style button that sits near the flower)
    ========================================================= */
    @media (max-width: 1023px) {
    
    /* Hide decorative symbol on tablet/mobile */
    .founder-cta-symbol {
    display: none;
    }
    
    /* CTA button — anchored inside the card, near the flower */
    .btn-wrapper {
    position: absolute;
    right: 24px;
    bottom: 65px;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    padding: 2px;
    box-shadow: none;
    }
    
    /* Keep spinning animated border */
    .btn-wrapper::before {
    background: conic-gradient(from var(--angle), #02bcdd, #06d1e5, #64eda8, #d0f88d, #64eda8, #06d1e5, #02bcdd);
    animation: spin 2s linear infinite;
    }
    
    /* Dark inner fill */
    .btn-wrapper::after {
    inset: 1px;
    background: #0d1f3c;
    }
    
    /* Gradient text */
    .btn-inner {
    min-width: 220px;
    height: 52px;
    padding: 4px 48px;
    font-size: 32px;
    line-height: 1;
    background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20.71%, #64eda8 48.26%, #d0f88d 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    }
    
    /* Hover: stop spin */
    .btn-wrapper:hover::before {
    animation: none;
    }
    
    /* Hover: fill with gradient */
    .btn-wrapper:hover::after {
    inset: 2px;
    background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20.71%, #64eda8 48.26%, #d0f88d 100%);
    }
    
    /* Hover: dark text on gradient fill */
    .btn-wrapper:hover .btn-inner {
    background: none;
    color: #0a1628;
    -webkit-text-fill-color: #0a1628;
    }
    }
    
    /* =========================================================
    CTA BUTTON — LARGE TABLET FIX (e.g. iPad Pro 1024px)
    Anchors the button to the card itself instead of the
    viewport, so it stays attached near the flower instead of
    floating away / clipping off-screen on tall, narrow viewports.
    ========================================================= */
    @media (min-width: 1000px) and (max-width: 1024px) {
    
    .btn-wrapper {
    position: absolute;
    right: 24px;
    bottom: 70px;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    }
    }
    
    /* =========================================================
    TABLET FULL WIDTH FIX
    ========================================================= */
    @media (min-width: 769px) and (max-width: 1024px) {
    
    .founder-page {
    width: 100vw;
    margin-left: -1px;
    margin-right: -1px;
    padding-left: 24px;
    padding-right: 24px;
    }
    }
    
    /* =========================================================
    TABLET LANDSCAPE BREATHING SPACE FIX
    Keeps the note clear of the header and footer on iPad/tablet
    landscape screens such as 1024 x 768.
    ========================================================= */
    @media (min-width: 769px) and (max-width: 1024px) and (max-height: 900px) {
    
    .founder-page {
    min-height: auto;
    height: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 128px;
    padding-bottom: 34px;
    }
    
    .founder-note {
    width: 582px;
    max-width: 86vw;
    }
    
    .founder-note__content {
    padding: 50px 42px 26px;
    font-size: 15px;
    line-height: 1.5;
    }
    
    .founder-note p + p {
    margin-top: 10px;
    }
    
    .quote {
    font-size: 27px !important;
    }
    
    .signature {
    width: 62px;
    margin: 6px 0 4px;
    }
    
    .flower {
    width: 94px;
    }
    
    .btn-wrapper {
    right: 22px;
    bottom: 52px;
    }
    }
    
    /* =========================================================
    MOBILE LAYOUT
    ========================================================= */
    @media (max-width: 768px) {
    
    .quote {
    font-family: "Uhudscript", cursive !important;
    font-size: 24px !important;
    }
    
    /* Mobile note card */
    .founder-note {
    width: 390px;
    max-width: 86vw;
    border-radius: 20px;
    }
    
    /* Mobile typography */
    .founder-note__content {
    padding: 52px 25px 30px;
    font-size: 12px;
    line-height: 1.78;
    }
    
    /* Heading spacing */
    .founder-note h1 {
    margin-bottom: 13px;
    }
    
    /* Paragraph spacing */
    .founder-note p + p {
    margin-top: 13px;
    }
    
    /* Signature size */
    .signature {
    width: 62px;
    margin: 8px 0 5px;
    }
    
    /* Founder name */
    .founder-name {
    font-size: 12.6px;
    }
    
    /* Decorative flower */
    .flower {
    width: 78px;
    right: -4px;
    bottom: 7px;
    }
    
    /* CTA button */
    .btn-wrapper {
    left: auto;
    right: 18px;
    bottom: 50px;
    width: 175px;
    height: 42px;
    transform: none;
    }
    }
    
    /* =========================================================
    SMALL MOBILE DEVICES
    ========================================================= */
    @media (max-width: 640px) {
    
    /* Smaller note card */
    .founder-note {
    width: 370px;
    max-width: 86vw;
    }
    
    /* Smaller typography */
    .founder-note__content {
    padding: 50px 24px 30px;
    font-size: 11px;
    line-height: 1.76;
    }
    
    /* Paragraph spacing */
    .founder-note p + p {
    margin-top: 12px;
    }
    
    /* Signature */
    .signature {
    width: 60px;
    }
    
    /* Founder name */
    .founder-name {
    font-size: 12.2px;
    }
    
    /* Button */
    .btn-wrapper {
    left: auto;
    right: 16px;
    bottom: 50px;
    width: 175px;
    height: 42px;
    }
    
    /* Button text */
    .btn-inner {
    font-size: 20px;
    }
    }
    
    /* =========================================================
    EXTRA SMALL MOBILE DEVICES
    ========================================================= */
    @media (max-width: 480px) {
    
    /* Note card */
    .founder-note {
    width: 350px;
    max-width: 84vw;
    border-radius: 20px;
    }
    
    /* Typography */
    .founder-note__content {
    padding: 50px 22px 30px;
    font-size: 12px;
    line-height: 1.74;
    }
    
    /* Heading spacing */
    .founder-note h1 {
    margin-bottom: 12px;
    }
    
    /* Paragraph spacing */
    .founder-note p + p {
    margin-top: 11px;
    }
    
    /* Signature */
    .signature {
    width: 58px;
    margin: 7px 0 5px;
    }
    
    /* Founder name */
    .founder-name {
    font-size: 11.8px;
    }
    
    /* Decorative flower */
    .flower {
    width: 74px;
    }
    
    /* CTA button */
    .btn-wrapper {
    left: auto;
    right: 14px;
    bottom: 65px;
    width: 180px;
    height: 42px;
    }
    
    /* Button text */
    .btn-inner {
    font-size: 20px;
    }
    }
    
    /* =========================================================
    ULTRA SMALL DEVICES
    ========================================================= */
    @media (max-width: 360px) {
    
    /* Smallest card */
    .founder-note {
    width: 320px;
    max-width: 88vw;
    border-radius: 18px;
    }
    
    /* Smallest typography */
    .founder-note__content {
    padding: 48px 18px 30px;
    font-size: 11px;
    line-height: 1.72;
    }
    
    /* Heading spacing */
    .founder-note h1 {
    margin-bottom: 10px;
    }
    
    /* Paragraph spacing */
    .founder-note p + p {
    margin-top: 10px;
    }
    
    /* Signature */
    .signature {
    width: 54px;
    }
    
    /* Founder name */
    .founder-name {
    font-size: 11px;
    }
    
    /* Decorative flower */
    .flower {
    width: 68px;
    }
    
    /* CTA button */
    .btn-wrapper {
    left: auto;
    right: 12px;
    bottom: 36px;
    width: 175px;
    height: 42px;
    }
    
    /* CTA button text */
    .btn-inner {
    font-size: 20px;
    }
    }
    
    @media (max-width: 480px) and (max-height: 720px) {
    .founder-note__content {
    font-size: 10px;
    line-height: 1.5;
    }
    .quote {
    font-family: "Uhudscript", cursive !important;
    font-size: 24px !important;
    line-height: 1 !important;
    }
    }
    
    @media (max-width: 380px) {
    .btn-wrapper {
    left: auto;
    right: 13px;
    bottom: 38px;
    width: 175px;
    height: 42px;
    }
    }
    
    @media (max-width: 360px) {
    .btn-wrapper {
    bottom: 60px;
    }
    }
    
    /*Small screen laptops*/
    
    @media (min-width: 1025px) and (max-height: 650px) {
    
    .founder-page {
    padding-top: 100px;
    }
    
    .founder-note {
    height: 78dvh;
    }
    
    .founder-note__content {
    padding: 30px 28px;
    font-size: 13px;
    line-height: 1.45;
    }
    
    .quote {
    font-size: 24px !important;
    }
    
    .signature {
    width: 60px;
    }
    
    .flower {
    width: 100px;
    }
    }
    
    @media (max-width: 480px) and (max-height: 760px) {
    .btn-wrapper {
    bottom: 14%;
    }
    
    .founder-note__content {
    font-size: 10px;
    line-height: 1.45;
    }
    }
    
    /* =========================================================
    LARGE TABLET TOP SPACING FIX
    Adds breathing room below the centered logo on Surface Pro /
    large tablet landscape screens without affecting full desktop.
    ========================================================= */
    @media (min-width: 1025px) and (max-width: 1400px) and (max-height: 1100px) {
    
    .founder-page {
        padding: 0 24px 0;
    align-items: center;
    }
    
    .founder-note {
    margin-left: auto;
    margin-right: auto;
    }
    }
    
    
    @media (max-width: 1024px) {
    .btn-wrapper .text-default {
    font-size: 0;
    padding-top: 5px;
    }
    
    .btn-wrapper .text-default::after {
    content: "Take a Peek";
    font-size: 24px; 
    letter-spacing: 2px;
    }
    
    .btn-wrapper:hover .text-default {
    font-size: 0;
    }
    
    .btn-wrapper .text-hover {
    font-size: 0;
    padding-top: 5px;
    }
    
    .btn-wrapper .text-hover::after {
    content: "Take a Peek";
    font-size: 24px;
    letter-spacing: 2px;
    color: #0a1628;
    }
    
    .btn-wrapper:hover .text-hover::after {
    font-size: 24px;
    }
    
    }
    
    .mobile-break {
    display: none;
    }
    
    @media (max-width: 767px) {
    .mobile-break {
    display: inline;
    }
    }