/*!
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: site.css
 * @TITLE: Funky Uncle Charlies Kittens - Contact Form Behaviour Styles
 * @DESCRIPTION: Small, self-contained additions layered on top of the vendored
 *               Divi stylesheets (css/divi/theme.css + css/divi/pages/*.css) to
 *               support the JS-driven contact form: hides the honeypot field,
 *               and styles the inline validation states that site.js toggles.
 *               Loaded only by contact.html - no other page needs it. Not
 *               derived from design-tokens.css, which belonged to the previous
 *               Earthwood Craft skeleton and no longer applies to this site.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.2
 * - File Modified | Ary van der Pijl | 2026-07-02 | FUCK-001 | Replaced the Earthwood Craft brochure stylesheet with the small contact-form behaviour styles needed on top of the vendored Divi CSS |
 * VERSION 1.0.0.1
 * - File Created | Ary van der Pijl | 2026-07-02 | EWC-001 | Initial brochure site stylesheet |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* Honeypot field - hidden from sighted users, still reachable by bots/screen-reader-agnostic scrapers */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field-invalid {
  border-color: #dc2626 !important;
}

.contact-field-error {
  display: block;
  color: #dc2626;
  font-size: 13px;
  margin-top: 4px;
  text-align: left;
}

#contact-alert.et-pb-contact-message {
  display: none;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
}

#contact-alert.contact-alert-show { display: block; }

#contact-alert.contact-alert-success {
  background-color: #f0fdf4;
  color: #16a34a;
}

#contact-alert.contact-alert-danger {
  background-color: #fef2f2;
  color: #dc2626;
}


/* ================================
   RESET
================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #111;
    color: #fff;
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ================================
   VARIABLES
================================ */

:root {
    --black: #111111;
    --dark: #181818;
    --white: #ffffff;
    --off-white: #f3f0eb;
    --accent: #d8c5a6;
    --max-width: 1240px;
}


/* ================================
   HEADER
================================ */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.site-header-inner {
    width: min(100% - 48px, var(--max-width));
    min-height: 78px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo img {
    width: 92px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
    transition: color .2s ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .2s ease;
}

.site-nav a:hover,
.site-nav a.active {
    color: #fff;
}

.site-nav a:hover::after,
.site-nav a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    margin: 5px 0;
    background: #fff;
}


/* ================================
   BUTTONS
================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--accent);
    color: var(--black);
}

.btn-primary:hover {
    background: #fff;
}

.btn-secondary {
    border: 1px solid rgba(255,255,255,.7);
    color: #fff;
}

.btn-secondary:hover {
    background: #fff;
    color: var(--black);
}

.btn-dark {
    background: var(--black);
    color: #fff;
}

.btn-dark:hover {
    background: var(--accent);
    color: var(--black);
}


/* ================================
   HERO
================================ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.2) 100%),
        url("../images/uploads/2026/03/hero_bg_home.png") center/cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 35%, rgba(0,0,0,.55) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, var(--max-width));
    margin: auto;
    padding-top: 70px;
}

.hero-eyebrow,
.section-label {
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
}

.hero h1 {
    max-width: 780px;
    font-size: clamp(52px, 7vw, 100px);
    line-height: .92;
    letter-spacing: -4px;
    font-weight: 900;
    text-transform: uppercase;
}

.hero h1 span {
    color: var(--accent);
}

.hero-text {
    max-width: 460px;
    margin: 28px 0 32px;
    font-size: 17px;
    color: rgba(255,255,255,.75);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ================================
   INTRO
================================ */

.home-intro {
    background: var(--off-white);
    color: var(--black);
}

.home-intro-inner {
    width: min(100% - 48px, var(--max-width));
    margin: auto;
    padding: 90px 0;
}

.home-intro .section-label,
.home-feature .section-label {
    color: #777;
}

.intro-content {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 80px;
    align-items: end;
}

.intro-content h2,
.feature-content h2,
.home-cta h2 {
    font-size: clamp(42px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.intro-content h2 em,
.feature-content h2 em,
.home-cta h2 em {
    color: #888;
    font-style: normal;
}

.intro-copy p {
    max-width: 440px;
    margin-bottom: 24px;
    color: #555;
    font-size: 16px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 24px;
    background: var(--black);
    color: #f7f4ee;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--black);
}

.text-link span {
    font-size: 18px;
    line-height: 1;
}

/* ================================
   FEATURE
================================ */

.home-feature {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 680px;
    background: #111;
}

.feature-visual {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    background: #111;
    padding: 48px;
    display: flex;
    flex-direction: column;
}

.feature-visual::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 38%, transparent 72%);
    pointer-events: none;
}

.feature-heading {
    position: relative;
    z-index: 3;
}

.feature-heading span {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #d9cbb7;
}

.feature-heading h3 {
    margin: 0;
    font-size: 52px;
    line-height: .95;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: #f7f4ee;
}

.feature-cats {
    position: absolute;
    z-index: 2;
    width: 86%;
    max-width: 780px;
    height: auto;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    display: block;
}

.feature-visual::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 48px;
    right: 48px;
    bottom: 84px;
    height: 1px;
    background: rgba(247,244,238,.18);
}

.band-members {
    position: absolute;
    z-index: 5;
    left: 48px;
    right: 48px;
    bottom: 38px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
}

.band-member {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #f7f4ee;
}

.band-member strong {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f7f4ee;
}

.band-member span {
    display: block;
    margin: 0;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d9cbb7;
}

.feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 70px 60px;
    background: #e5e1da;
    color: var(--black);
}

.feature-content .section-label {
    margin-bottom: 22px;
}

.feature-content h2 {
    margin: 0;
    max-width: 520px;
    font-size: 78px;
    line-height: .9;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.feature-content h2 em {
    display: block;
    color: #8f8f8f;
    font-style: normal;
}

.feature-content p {
    max-width: 440px;
    margin: 32px 0 34px;
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.feature-content .btn {
    margin-top: 0;
}

/* ================================
   CTA
================================ */

.home-cta {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url("../images/uploads/2026/03/hero_cta.png") center/cover no-repeat;
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-cta h2 {
    margin-bottom: 30px;
}


/* ================================
   FOOTER
================================ */

.site-footer {
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,.1);
}

.footer-inner {
    width: min(100% - 48px, var(--max-width));
    margin: auto;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer-brand img {
    width: 75px;
}

.footer-links {
    display: flex;
    gap: 22px;
}

.footer-links a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-inner p {
    font-size: 10px;
    color: rgba(255,255,255,.4);
}

/* ================================
   ABOUT HERO
================================ */

.about-hero {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58)),
        url("../images/uploads/2026/03/about_hero.png") center/cover no-repeat;
}

.about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,rgba(255,255,255,.08),transparent 60%);
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-hero .section-label {
    margin-bottom: 22px;
    color: #d9cbb7;
}

.about-hero h1 {
    margin: 0;
    color: #f7f4ee;
    font-size: clamp(72px,8vw,130px);
    line-height: .84;
    letter-spacing: -6px;
    text-transform: uppercase;
}

.about-hero h1 em {
    display: block;
    color: #a0a0a0;
    font-style: normal;
}

.about-hero-content > p:last-child {
    margin: 30px 0 0;
    color: rgba(247,244,238,.8);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ================================
   ABOUT STORY
================================ */

.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    min-height: 600px;
    padding: 100px max(48px,calc((100% - var(--max-width)) / 2));
    background: #e5e1da;
    color: #111;
    align-items: center;
}

.about-story-intro .section-label {
    margin-bottom: 22px;
    color: #777;
}

.about-story-intro h2 {
    margin: 0;
    font-size: clamp(62px,5.5vw,88px);
    line-height: .88;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.about-story-intro h2 em {
    display: block;
    color: #8f8f8f;
    font-style: normal;
}

.about-story-copy {
    max-width: 520px;
}

.about-story-copy p {
    margin: 0 0 26px;
    color: #555;
    font-size: 17px;
    line-height: 1.75;
}

.about-story-copy p:last-child {
    margin-bottom: 0;
}

/* ================================
   ABOUT SOUND
================================ */

.about-sound {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 700px;
    background: #111;
}

.about-sound-image {
    position: relative;
    min-height: 700px;
    overflow: hidden;
}

.about-sound-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.3));
}

.about-sound-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-sound-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 70px;
    background: #111;
}

.about-sound-content .section-label {
    margin-bottom: 22px;
    color: #d9cbb7;
}

.about-sound-content h2 {
    margin: 0;
    color: #f7f4ee;
    font-size: clamp(62px,5vw,88px);
    line-height: .88;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.about-sound-content h2 em {
    display: block;
    color: #888;
    font-style: normal;
}

.about-sound-content p:not(.section-label) {
    max-width: 460px;
    margin: 32px 0 0;
    color: rgba(247,244,238,.68);
    font-size: 16px;
    line-height: 1.7;
}

.about-sound-content p + p {
    margin-top: 18px;
}

/* ================================
   ABOUT PHILOSOPHY
================================ */

.about-philosophy {
    background: #f0ede7;
    color: #111;
    padding: 110px max(48px,calc((100% - var(--max-width)) / 2));
}

.about-philosophy-content {
    max-width: 1200px;
    margin: 0 auto;
}

.about-philosophy .section-label {
    margin-bottom: 22px;
    color: #777;
}

.about-philosophy h2 {
    margin: 0;
    font-size: clamp(64px,6vw,100px);
    line-height: .86;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.about-philosophy h2 em {
    color: #8f8f8f;
    font-style: normal;
}

.about-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
    margin-top: 90px;
    padding-top: 30px;
    border-top: 1px solid rgba(17,17,17,.2);
}

.about-philosophy-item strong {
    display: block;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-philosophy-item p {
    max-width: 280px;
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

/* ================================
   ABOUT EXPERIENCE
================================ */

.about-experience {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 680px;
    background: #111;
}

.about-experience-image {
    position: relative;
    min-height: 680px;
    overflow: hidden;
}

.about-experience-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.35));
}

.about-experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-experience-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 90px;
}

.about-experience-content .section-label {
    margin-bottom: 22px;
    color: #d9cbb7;
}

.about-experience-content h2 {
    margin: 0;
    color: #f7f4ee;
    font-size: clamp(60px,5vw,86px);
    line-height: .88;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.about-experience-content h2 em {
    display: block;
    color: #888;
    font-style: normal;
}

.about-experience-content p:not(.section-label) {
    max-width: 480px;
    margin: 34px 0 0;
    color: rgba(247,244,238,.7);
    font-size: 17px;
    line-height: 1.7;
}

/* ================================
   ABOUT CLOSING
================================ */

.about-closing {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),
        url("../images/uploads/2026/05/kittens_01.png") center/cover no-repeat;
}

.about-closing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,rgba(217,203,183,.1),transparent 60%);
    pointer-events: none;
}

.about-closing-content {
    position: relative;
    z-index: 2;
    max-width: 950px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-closing .section-label {
    margin-bottom: 22px;
    color: #d9cbb7;
}

.about-closing h2 {
    margin: 0;
    color: #f7f4ee;
    font-size: clamp(64px,7vw,110px);
    line-height: .86;
    letter-spacing: -5px;
    text-transform: uppercase;
    padding-bottom: 20px;
}

.about-closing h2 em {
    display: block;
    color: #999;
    font-style: normal;
}

.about-closing-content > p:not(.section-label) {
    max-width: 560px;
    margin: 30px 0 34px;
    color: rgba(247,244,238,.75);
    font-size: 16px;
    line-height: 1.6;
}