/* ================================
   Beige Sections — Global 74px vertical padding (desktop)
   ================================ */
.discover,
.ks-ranges,
.about-section--alt,
.about-why,
.sust-hero,
.sust-section--beige,
.sust-testimonial,
.sust-longlife,
.journey,
.project-testimonial,
.neo-experience,
.awards-commitment,
.also-like,
.prod-intro,
.prod-pillar,
.company-journey,
.solution-testimonial,
.related-projects--ranges,
.collection-archive__grid-section,
.collection-description,
.production-page .sust-section--white {
    padding-top: 74px;
    padding-bottom: 74px;
}

/* ================================
   Standalone Paragraphs — 75% width on desktop
   ================================ */
.project-overview__desc--full,
.solution-description__text,
.feature-intro__desc,
.feature-closing__desc,
.about-hero__text,
.about-section__text,
.about-company__text,
.ks-content__text,
.sust-hero__desc,
.sust-section__desc,
.sust-responsibility__desc,
.sust-longlife__desc,
.consult-intro__description,
.collection-description__content {
    max-width: 75%;
}

/* ================================
   Global Reset (Overrides UA + Normalize)
   ================================ */

/* Lenis smooth scroll — override native so JS handles it */
html.lenis, html.lenis body {
    height: auto;
}
html.lenis {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6,
p,
ul, ol,
li,
figure,
blockquote {
    margin: 0;
    padding: 0;
}



/* ================================
   Color Variables
   ================================ */
:root {
    --color-heading: #000000;
    --color-body: #000000;

    --color-heading-inverse: #FFFFFF;
    --color-body-inverse: #929292;

    /* ── Global button height – change here to update all buttons ── */
    --btn-height: 52px;
}

/* ================================
   Base Typography
   ================================ */
body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: var(--color-body);
    background: #ffffff;
    overflow-x: hidden;
}

/* Force full-width layout - override any WordPress block constraints */
body > *,
.site-header,
main,
.site-footer {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Reset any WordPress block editor constraints */
.wp-site-blocks,
.wp-site-blocks > *,
.is-layout-constrained,
.is-layout-constrained > *,
.is-layout-flow,
.is-layout-flow > *,
.has-global-padding,
.has-global-padding > *,
.entry-content,
.entry-content > * {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WordPress core global styles width override */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

body .is-layout-flow > * {
    max-width: none !important;
}


/* ================================
   Global Layout Container
   ================================ */

:root {
    --site-max-width: 1728px;
    --site-padding-x: 160px;
}

.container {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-padding-x);
    padding-right: var(--site-padding-x);
}

/* ================================
   Spacing Utility Classes
   Add to any section to override its padding.

   Base (all screens):  .no-pt  .no-pb  .no-py
   ≤1199px only:        .no-pt--lg  .no-pb--lg  .no-py--lg
   ≤1023px only:        .no-pt--md  .no-pb--md  .no-py--md
   ≤767px only:         .no-pt--sm  .no-pb--sm  .no-py--sm
   ================================ */
.no-pt { padding-top: 0 !important; }
.no-pb { padding-bottom: 0 !important; }
.no-py { padding-top: 0 !important; padding-bottom: 0 !important; }

@media (max-width: 1199px) {
    .no-pt--lg { padding-top: 0 !important; }
    .no-pb--lg { padding-bottom: 0 !important; }
    .no-py--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 1023px) {
    .no-pt--md { padding-top: 0 !important; }
    .no-pb--md { padding-bottom: 0 !important; }
    .no-py--md { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 767px) {
    .no-pt--sm { padding-top: 0 !important; }
    .no-pb--sm { padding-bottom: 0 !important; }
    .no-py--sm { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ================================
   Image Overlay Utilities
   Add to any absolute-positioned overlay div on top of a background image.

   Directions (where the text sits):
     .overlay-bottom  → dark at bottom, fades up     (most common)
     .overlay-top     → dark at top, fades down
     .overlay-left    → dark at left, fades right
     .overlay-full    → uniform dark tint everywhere

   Usage in HTML:
     <div class="some-hero">
       <div class="some-hero__media"><img ...></div>
       <div class="some-hero__overlay overlay-bottom"></div>
       <div class="some-hero__content">...</div>
     </div>
   ================================ */

.overlay-bottom {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.60) 100%) !important;
}

.overlay-top {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.60) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.15) 100%) !important;
}

.overlay-left {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.60) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.05) 100%) !important;
}

.overlay-full {
    background: rgba(0, 0, 0, 0.45) !important;
}


/* ================================
   Display / Page Titles
   ================================ */
.text-display {
    font-family: 'Inter', sans-serif;
    font-size: 68px;
    font-weight: 500;
    line-height: normal;
    color: var(--color-heading);
}

/* ================================
   Section Headings
   ================================ */
.text-heading {
    font-family: 'Albert Sans', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 52px;
    color: var(--color-heading);
}

.text-heading--upper {
    font-family: 'Albert Sans', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: var(--color-heading);
}

/* ================================
   Body Text
   ================================ */
.text-body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--color-body);
}

/* ================================
   Tiny Upper Titles / Labels
   ================================ */
.text-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20.74px;
    text-transform: uppercase;
    letter-spacing: 4.8px;
    color: var(--color-heading);
}

/* ================================
   UI / Meta Labels
   ================================ */
.text-ui {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: var(--color-heading);
}

/* ================================
   Inverse (Dark Background Sections)
   ================================ */
.section-dark {
    background: #0D0D0D;
    color: var(--color-body-inverse);
}

.section-dark .text-display,
.section-dark .text-heading,
.section-dark .text-heading--upper,
.section-dark .text-eyebrow,
.section-dark .text-ui {
    color: var(--color-heading-inverse);
}

.section-dark .text-body {
    color: var(--color-body-inverse);
}



/* ================================
   Buttons – Base
   ================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0px 19px;
    height: var(--btn-height);

    border-radius: 100px;
    border: none;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-transform: capitalize;

    cursor: pointer;
    text-decoration: none;

    box-shadow: 0px 1px 4px rgba(24.73, 32.61, 60.56, 0.08);
}

/* ================================
   Button Icon
   ================================ */


.btn__icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-image: url("../images/arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
    transform: rotate(-45deg);
}

/* Arrow (simple version – SVG or pseudo later) */

.btn--arrow-right .btn__icon {
  transform: rotate(135deg);
}

/* ================================
   Primary Button – Light Background
   (Black button)
   ================================ */

.btn-primary {
    background-color: #2F2622;
    color: #FFFFFF;
}

.btn-primary .btn__icon {
    filter: brightness(0) invert(1);
}

/* ================================
   Primary Button – Dark Background
   (White button)
   ================================ */

.btn-primary--inverse {
    background-color: #FFFFFF;
    color: #000000;
}

.btn-primary--inverse .btn__icon {
    color: #000000;
}


/* ================================
   Button – Neutral (Image / Overlay)
   ================================ */

.btn-neutral {
    background-color: #EAE1DC;
    color: #000000;
}

.btn-neutral .btn__icon {
    color: #000000;
}

/* ================================
   Button – Hover & Focus States
   ================================ */

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
}

.btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.3);
    outline-offset: 3px;
}

.btn {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

/* ================================
   Mobile Typography Override (≤768px)
   All headings: 20px / 28px
   All body text: 14px / 22px
   ================================ */
@media (max-width: 768px) {

    /* --- Global body text --- */
    body,
    .text-body,
    p {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    /* --- All headings --- */
    h1, h2, h3, h4, h5, h6,
    .text-display,
    .text-heading,
    .text-heading--upper,
    .hero__title,
    .hero--full .hero__title,
    .hero--split .hero__title,
    .hero--half .hero__title,
    .ks-hero__title,
    .kitchen-card__title,
    .kitchen-card__default-title,
    .projects-slider__card-title,
    .kstyles__title,
    .experience__title,
    .contact-cta__title,
    .production-hero__title,
    .about-hero__title,
    .mfn-hero__title,
    .archive-hero__title,
    .professionals-hero__title,
    .project-hero__title,
    .single-post__title,
    .owners-why__title,
    .owners-layouts__title,
    .owners-handles__title,
    .owners-scheme__title,
    .feature-columns__title,
    .feature-columns__title--large,
    .ks-content__title,
    .ks-ranges__title,
    .collection-hero__title,
    .fk-hero__title,
    .techdetails-specs__card-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}