/* ==========================================================================
   JADY DESIGN BASELINE CSS v4.4
   Updated: March 21, 2026
   CHANGES: Added Section 0 design tokens and :root block, added Antapani
            font-face declarations (200/300/500), restored Layout B sticky,
            removed thin-caps, deduplicated CTA block, cleaned Section 8,
            restored global animated-cta as Section 10, zeroed et_pb_row
            default padding
   ========================================================================== */


/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */

:root {
    /* SPACING */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 120px;

    /* SECTION RHYTHM */
    --section-tight:  40px;
    --section-normal: 80px;
    --section-loose:  120px;
}

/* ==========================================================================
   1. FONT DECLARATIONS
   ========================================================================== */

@font-face {
    font-family: 'Instrument Serif';
    src: url('https://jady-design.com/wp-content/uploads/2025/11/InstrumentSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Instrument Serif';
    src: url('https://jady-design.com/wp-content/uploads/2025/11/InstrumentSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Riposte Light";
    src: url("https://jady-design.com/wp-content/uploads/2025/12/RiposteLight.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'messina-sans-mono-regular';
    src: url('https://jady-design.com/wp-content/uploads/2026/03/messina-sans-mono-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Antapani';
    src: url('https://jady-design.com/wp-content/uploads/2025/12/antapani-extralight-webfont.woff2') format('woff2'),
         url('https://jady-design.com/wp-content/uploads/2025/12/antapani-extralight-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Antapani';
    src: url('https://jady-design.com/wp-content/uploads/2026/03/antapani-light-webfont.woff2') format('woff2'),
         url('https://jady-design.com/wp-content/uploads/2026/03/antapani-light-webfont.woff') format('woff'),
         url('https://jady-design.com/wp-content/uploads/2026/03/Antapani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Antapani';
    src: url('https://jady-design.com/wp-content/uploads/2025/12/antapani-medium-webfont.woff2') format('woff2'),
         url('https://jady-design.com/wp-content/uploads/2025/12/antapani-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}


/* ==========================================================================
   2. DIVI RESETS
   ========================================================================== */

/* Safety Net - Force Proper Widths */
.et_pb_section {
    width: 100% !important;
}

.et_pb_row {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* DIVI 5 FIX: Force modules to block display by default */
.et_pb_module {
    display: block !important;
}

/* EXCEPTION: Restore flex for menu and other layout-dependent modules */
/* Divi 5 uses BEM double-underscore syntax (__) for child elements */
.et_pb_menu,
.et_pb_menu .et_pb_menu__wrap,
.et_pb_menu__inner_container,
.et_pb_menu_0_tb_header .et_pb_menu__wrap {
    display: flex !important;
}

/* Text Module Headings */
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Blurb Module Headings */
.et_pb_blurb h1,
.et_pb_blurb h2,
.et_pb_blurb h3,
.et_pb_blurb h4,
.et_pb_blurb h5,
.et_pb_blurb h6,
.et_pb_blurb .et_pb_module_header {
    margin: 0 !important;
    padding: 0 !important;
}

/* Button Resets - Allow Divi styling controls */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
    font-size: initial !important;
    font-weight: initial !important;
    line-height: initial !important;
    color: initial !important;
}

/* Prevent Responsive Font-Family Changes */
@media (max-width: 980px) {
    .et_pb_text h1,
    .et_pb_text h2,
    .et_pb_text h3,
    .et_pb_text h4,
    .et_pb_text h5,
    .et_pb_text h6,
    .et_pb_blurb h1,
    .et_pb_blurb h2,
    .et_pb_blurb h3,
    .et_pb_blurb h4,
    .et_pb_blurb h5,
    .et_pb_blurb h6,
    .et_pb_blurb .et_pb_module_header,
    .et_pb_button,
    .et_pb_button_module_wrapper .et_pb_button {
        font-family: inherit !important;
    }
}

@media (max-width: 767px) {
    .et_pb_text h1,
    .et_pb_text h2,
    .et_pb_text h3,
    .et_pb_text h4,
    .et_pb_text h5,
    .et_pb_text h6,
    .et_pb_blurb h1,
    .et_pb_blurb h2,
    .et_pb_blurb h3,
    .et_pb_blurb h4,
    .et_pb_blurb h5,
    .et_pb_blurb h6,
    .et_pb_blurb .et_pb_module_header,
    .et_pb_button,
    .et_pb_button_module_wrapper .et_pb_button {
        font-family: inherit !important;
    }
}


/* ==========================================================================
   3. SPACING SYSTEM
   ========================================================================== */

/* Header Spacing Control */
.et_pb_section_0_tb_header.et_pb_section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Utility: Apply manually to any section that needs zero top spacing */
/* Usage: add class "no-top-padding" to the section in Divi builder */
.no-top-padding {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Section Spacing */
.hero-section {
    padding: 220px 0 !important;
}

.content-section {
    padding: 120px 0 !important;
}

/* Rhythm variants — token-driven */
.section-tight  { padding: var(--section-tight)  0 !important; }
.section-normal { padding: var(--section-normal) 0 !important; }
.section-loose  { padding: var(--section-loose)  0 !important; }

/* Row Width System */
.text-row,
.content-row,
.showcase-row,
.cta-row,
.hero-row,
.split-content-row {
    width: 100% !important;
    margin: 0 auto !important;
}

.text-row        { max-width: 800px !important; }
.content-row     { max-width: 1000px !important; }
.showcase-row    { max-width: 1200px !important; }
.cta-row         { max-width: 600px !important; }
.hero-row        { max-width: 100% !important; min-height: 80vh !important; }
.split-content-row { max-width: 1200px !important; }

/* Module Spacing - Force block display for spacing to work */
.standard-text,
.heder-text,
.standard-button,
.last-module {
    display: block !important;
}

.standard-text   { margin-bottom: 30px !important; }
.heder-text      { margin-bottom: 10px !important; }
.standard-button { margin-bottom: 40px !important; }
.last-module     { margin-bottom: 0 !important; }


/* ==========================================================================
   4. CUSTOM UTILITIES
   ========================================================================== */

/* Custom Span Text Classes */
.serif-caps {
    font-family: "Instrument Serif", serif !important;
    display: inline !important;
}

.serif-ital {
    font-family: "Instrument Serif", serif !important;
    font-style: italic !important;
    display: inline !important;
}

.serif-caps-ital {
    font-family: "Instrument Serif", serif !important;
    font-style: italic !important;
    display: inline !important;
}

/* Text Highlight Style */
.text-highlight {
    background-image: linear-gradient(
        rgba(225, 254, 196, 0.79),
        rgba(225, 254, 196, 0.79)
    );
    background-size: 100% 0.6em;
    background-repeat: no-repeat;
    background-position: 0 0.35em;
    padding: 0 0.3em;
    border-radius: 8px;
    display: inline;
}

/* SEO Hidden H1 */
.seo-hidden {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* Add space to the right of the icon in a specific button */
.my-button-with-icon .et-pb-icon {
    margin-right: 15px;
}


/* ==========================================================================
   5. HERO SECTION
   ========================================================================== */

.hero-video-column {
    position: relative !important;
    min-height: 100vh !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.hero-video-column .et_pb_video_box,
.hero-video-column video,
.hero-video-column iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.hero-video-column .et_pb_video_overlay,
.hero-video-column .et_pb_video_play {
    display: none !important;
}

.hero-video-column video::-webkit-media-controls,
.hero-video-column video::-webkit-media-controls-enclosure {
    display: none !important;
}

.hero-video-column video {
    pointer-events: none !important;
}

@media (max-width: 980px) {
    .hero-section {
        padding: 110px 0 !important;
    }

    .hero-row {
        min-height: 60vh;
    }

    .hero-video-column {
        min-height: 50vh !important;
        max-height: 70vh !important;
    }
}


/* ==========================================================================
   6. SPLIT CONTENT ROW (Photo + Text Side by Side)
   Desktop: Photo (left) matches text column height | Text (right)
   Tablet: Stacked, photo natural height, body text in 2 CSS columns
   Mobile: Stacked, photo natural height, single column text
   ========================================================================== */

@media (min-width: 981px) {
    .split-content-row {
        display: flex !important;
        align-items: stretch !important;
    }

    .split-content-row .et_pb_column_0 {
        position: relative !important;
        overflow: hidden !important;
    }

    .split-content-row .et_pb_column_0 .et_pb_image_wrap img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (max-width: 980px) {
    .split-content-row .et_pb_column_0,
    .split-content-row .et_pb_column_1 {
        width: 100% !important;
    }

    .split-content-row .et_pb_column_0 {
        margin-bottom: 30px !important;
    }

    .split-content-row .et_pb_column_0 .et_pb_image_wrap img {
        width: 100% !important;
        height: auto !important;
    }

    .split-content-row .body-text-module {
        column-count: 2 !important;
        column-gap: 30px !important;
        padding: 0 30px !important;
    }
}

@media (max-width: 767px) {
    .split-content-row .et_pb_column_0,
    .split-content-row .et_pb_column_1 {
        width: 100% !important;
        padding: 0 !important;
    }

    .split-content-row .et_pb_column_0 {
        margin-bottom: 20px !important;
    }

    .split-content-row .body-text-module {
        column-count: 1 !important;
        padding: 0 30px !important;
    }
}


/* ==========================================================================
   7. FOUR-COLUMN CARD LAYOUTS (WITH INTEGRATED CTA STYLES)
   ========================================================================== */

/* ---------------------------------------------------------------------
   LAYOUT A: "What I Do" - Center-Aligned Cards
   Desktop: 4 columns | Tablet: 2x2 grid | Mobile: Single stack
   --------------------------------------------------------------------- */

@media (min-width: 981px) {
    .four-column-cards-centered.et_pb_row {
        display: flex !important;
        align-items: stretch !important;
        gap: 2em !important;
    }

    .four-column-cards-centered .et_pb_column {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .four-column-cards-centered .et_pb_column .et_pb_text {
        flex-grow: 1 !important;
    }
}

@media (max-width: 980px) and (min-width: 768px) {
    .four-column-cards-centered.et_pb_row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 2em !important;
    }

    .four-column-cards-centered .et_pb_column,
    .four-column-cards-centered [class*="et_pb_column"] {
        width: calc((100% - 2em) / 2) !important;
        max-width: calc((100% - 2em) / 2) !important;
        flex: 0 0 calc((100% - 2em) / 2) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 0 30px !important;
    }

    .four-column-cards-centered .et_pb_column .et_pb_text {
        flex-grow: 1 !important;
    }
}

@media (max-width: 767px) {
    .four-column-cards-centered .et_pb_column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .four-column-cards-centered .et_pb_column .et_pb_text {
        flex-grow: 0 !important;
    }
}

/* ---------------------------------------------------------------------
   LAYOUT B: "My Process" - Left-Aligned Cards with Sticky Mobile Effect
   Desktop: 4 columns | Tablet: 2x2 grid | Mobile: Sticky stack
   --------------------------------------------------------------------- */

@media (min-width: 981px) {
    .four-column-cards-sticky.et_pb_row {
        display: flex !important;
        align-items: stretch !important;
        gap: 2em !important;
    }

    .four-column-cards-sticky .et_pb_column {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .four-column-cards-sticky .et_pb_column .et_pb_text {
        flex-grow: 1 !important;
    }
}

@media (max-width: 980px) and (min-width: 768px) {
    .four-column-cards-sticky.et_pb_row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 2em !important;
    }

    .four-column-cards-sticky .et_pb_column,
    .four-column-cards-sticky [class*="et_pb_column"] {
        width: calc((100% - 2em) / 2) !important;
        max-width: calc((100% - 2em) / 2) !important;
        flex: 0 0 calc((100% - 2em) / 2) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .four-column-cards-sticky .et_pb_column .et_pb_text {
        flex-grow: 1 !important;
    }
}

@media (max-width: 767px) {
    .four-column-cards-sticky {
        position: relative !important;
    }

    .four-column-cards-sticky .et_pb_column {
        width: 100% !important;
        position: sticky !important;
        top: 0 !important;
    }

    .four-column-cards-sticky .et_pb_column:nth-child(1) { z-index: 4 !important; }
    .four-column-cards-sticky .et_pb_column:nth-child(2) { z-index: 3 !important; }
    .four-column-cards-sticky .et_pb_column:nth-child(3) { z-index: 2 !important; }
    .four-column-cards-sticky .et_pb_column:nth-child(4) { z-index: 1 !important; }

    .four-column-cards-sticky .et_pb_column .et_pb_text {
        flex-grow: 0 !important;
    }
}

/* ---------------------------------------------------------------------
   SHARED CTA STYLES FOR BOTH CARD LAYOUTS
   --------------------------------------------------------------------- */

.four-column-cards-centered .cta-wrapper,
.four-column-cards-sticky .cta-wrapper {
    display: block !important;
    margin: 20px 0 !important;
    text-align: center !important;
}

.four-column-cards-centered .animated-cta,
.four-column-cards-sticky .animated-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-family: 'Riposte Light', sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    transition: all 0.3s ease !important;
}

.four-column-cards-centered .animated-cta .cta-text,
.four-column-cards-sticky .animated-cta .cta-text {
    display: inline-block !important;
    position: relative !important;
}

.four-column-cards-centered .animated-cta .cta-text::after,
.four-column-cards-sticky .animated-cta .cta-text::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background-color: currentColor !important;
    transition: width 0.3s ease !important;
}

.four-column-cards-centered .animated-cta:hover .cta-text::after,
.four-column-cards-sticky .animated-cta:hover .cta-text::after {
    width: 100% !important;
}

.four-column-cards-centered .animated-cta .arrow-icon,
.four-column-cards-sticky .animated-cta .arrow-icon {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

.four-column-cards-centered .animated-cta .arrow-icon svg,
.four-column-cards-sticky .animated-cta .arrow-icon svg {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    display: block !important;
}

.four-column-cards-centered .animated-cta:hover .arrow-icon,
.four-column-cards-sticky .animated-cta:hover .arrow-icon {
    transform: translateX(5px) !important;
}

@media (max-width: 767px) {
    .four-column-cards-centered .animated-cta,
    .four-column-cards-sticky .animated-cta {
        font-size: 14px !important;
        gap: 6px !important;
    }

    .four-column-cards-centered .animated-cta .arrow-icon,
    .four-column-cards-sticky .animated-cta .arrow-icon {
        width: 9px !important;
        height: 9px !important;
        max-width: 9px !important;
        max-height: 9px !important;
        min-width: 9px !important;
        min-height: 9px !important;
    }

    .four-column-cards-centered .animated-cta .arrow-icon svg,
    .four-column-cards-sticky .animated-cta .arrow-icon svg {
        width: 9px !important;
        height: 9px !important;
        max-width: 9px !important;
        max-height: 9px !important;
    }
}


/* ==========================================================================
   8. GLOBAL RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 980px) {
    .content-section {
        padding: 60px 0 !important;
    }

    .text-row,
    .content-row,
    .showcase-row,
    .cta-row,
    .split-content-row {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 30px !important;
    }

    .section-tight  { padding: 24px 0 !important; }
    .section-normal { padding: 48px 0 !important; }
    .section-loose  { padding: 72px 0 !important; }
}

@media (max-width: 767px) {
    .content-section {
        padding: 40px 0 !important;
    }

    .text-row,
    .content-row,
    .showcase-row,
    .cta-row,
    .split-content-row {
        max-width: 100% !important;
        padding: 0 20px !important;
    }

    .standard-text   { margin-bottom: 20px !important; }
    .heder-text      { margin-bottom: 8px !important; }
    .standard-button { margin-bottom: 30px !important; }

    .section-tight  { padding: 20px 0 !important; }
    .section-normal { padding: 36px 0 !important; }
    .section-loose  { padding: 56px 0 !important; }
}


/* ==========================================================================
   9. PLUGIN-SPECIFIC OVERRIDES (Divi Torque)
   ========================================================================== */

.dtq-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.dtq-card-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-grow: 1 !important;
}

.dtq-card-desc {
    font-family: initial !important;
    font-size: initial !important;
    font-weight: initial !important;
    line-height: initial !important;
    color: initial !important;
    letter-spacing: initial !important;
}


/* ==========================================================================
   10. GLOBAL ANIMATED CTA
   Applies to any .animated-cta used outside of card layout wrappers
   ========================================================================== */

.cta-wrapper {
    display: block !important;
    margin: 20px 0 !important;
    text-align: center !important;
}

.animated-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-family: 'Riposte Light', sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    transition: all 0.3s ease !important;
}

.animated-cta .cta-text {
    display: inline-block !important;
    position: relative !important;
}

.animated-cta .cta-text::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background-color: currentColor !important;
    transition: width 0.3s ease !important;
}

.animated-cta:hover .cta-text::after {
    width: 100% !important;
}

.animated-cta .arrow-icon {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

.animated-cta .arrow-icon svg {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    display: block !important;
}

.animated-cta:hover .arrow-icon {
    transform: translateX(5px) !important;
}

@media (max-width: 767px) {
    .animated-cta {
        font-size: 14px !important;
        gap: 6px !important;
    }

    .animated-cta .arrow-icon {
        width: 9px !important;
        height: 9px !important;
        max-width: 9px !important;
        max-height: 9px !important;
        min-width: 9px !important;
        min-height: 9px !important;
    }

    .animated-cta .arrow-icon svg {
        width: 9px !important;
        height: 9px !important;
        max-width: 9px !important;
        max-height: 9px !important;
    }
}