:root {
    --fs-black: #000000;
    --fs-white: #ffffff;
    --fs-gray: #f7f7f7;
    --fs-gray-dark: #1a1a1a;
    --transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.fs_label {
    font-size: 0.875rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.65;
    display: block;
    margin-bottom: 1rem;
}

.fs_section_heading {
    text-align: center;
    margin-bottom: 3rem;
}

.about_cs section {
    position: relative;
}

.about_cs h1 { font-size: clamp(4.2rem, 9vw, 9.5rem); letter-spacing: -0.02em; line-height: 0.92; margin: 1.2rem 0; }
.about_cs h2 {font-size: 48px;line-height: 1.1;margin-bottom: 0.8rem;font-weight: 600;}
.about_cs h3 {font-size: 28px;margin-bottom: 15px;font-weight: 500;}


.fs_about_hero {
    background: #F5F2F2;
    color: var(--fs-black);
    padding: clamp(80px, 10vh, 220px) 0;
    text-align: center;
}

.fs_hero_tagline {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    opacity: 0.85;
    letter-spacing: 0.08em;
}


.fs_about_story,
.fs_about_founder {
    /* padding: clamp(100px, 14vh, 160px) 0; */
    background: #fff;
}

.fs_story_grid,
.fs_founder_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.fs_story_image img,
.fs_founder_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}

.fs_story_content p,
.fs_founder_content p {
    font-size: 1.18rem;
    line-height: 1.78;
    margin-bottom: 1.2rem;
}

.fs_story_signature,
blockquote {
    margin-top: 3rem;
    font-size: 1.5rem;
    font-weight: 500;
}

blockquote {
    font-style: italic;
    border-left: 3px solid var(--fs-black);
    padding-left: 1.5rem;
    margin: 2.5rem 0;
}

.fs_about_values {
    background: #F5F2F2;
    color: var(--fs-black);
    /* padding: clamp(100px, 14vh, 160px) 0; */
}

.fs_values_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
}

.fs_value_card {
    border: 1px solid rgba(255,255,255,0.12);
    padding: 3.5rem 2.2rem;
    text-align: center;
    transition: var(--transition);
    background: #fff;
}

.fs_value_card:hover {
    background: rgba(255,255,255,0.98);
    color: var(--fs-black);
    border-color: transparent;
    transform: translateY(-8px);
}
.fs_icon svg {
    transition: var(--transition);
}
.fs_value_card:hover .fs_icon svg {
    stroke: var(--fs-black);
}
.fs_about_gallery {
    background: #fff;
}
.fs_gallery_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.fs_gallery_grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: grayscale(85%) contrast(1.05);
    transition: filter 0.7s ease, transform 0.6s ease;
}
.fs_gallery_grid img:hover {
    filter: grayscale(0%) contrast(1.1);
    transform: scale(1.03);
}
.fs_about_vision {
    /* padding: clamp(100px, 14vh, 160px) 0; */
    background: var(--fs-gray);
}
.fs_vision_wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(4rem, 6vw, 7rem);
}
.fs_vision_right p {
    font-size: 1.22rem;
    line-height: 1.82;
}
.fs_about_cta {
    background: var(--fs-black);
    color: var(--fs-white);
    /* padding: clamp(80px, 12vh, 180px) 0; */
    text-align: center;
}
.fs_cta_box p {
    font-size: 1.3rem;
    opacity: 0.85;
    margin: 1.2rem 0 2.5rem;
}
.fs_btn_primary {
    display: inline-block;
    padding: 1.1rem 3.2rem;
    border: 1.5px solid var(--fs-white);
    color: var(--fs-white);
    text-decoration: none;
    letter-spacing: 0.15em;
    font-size: 1rem;
    text-transform: uppercase;
    transition: var(--transition);
}
.fs_btn_primary:hover {
    background: var(--fs-white);
    color: var(--fs-black);
    transform: translateY(-3px);
}
.cform_wrap span.wpcf7-form-control-wrap {
    display: block;
    margin-top: 10px;
}
.cform__btn_wrap .wpcf7-submit {
    margin-top: 0 !important;
}
.cform__btn_wrap {
    position: relative;
}
.cform__btn_wrap span.wpcf7-spinner {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 1200px) {
    .about_cs h2 {
        font-size: 38px;
    }
    .fs_story_grid, .fs_founder_grid {
        gap: 50px;
    }
    .fs_values_grid {
        gap: 30px;
    }
    .fs_vision_right p {
        font-size: 17px;
    }
    .fs_vision_wrap {
        gap: 20px;
    }
    .about_cs h3 {
        font-size: 24px;
    }
}

@media (max-width: 992px) {
    .fs_story_grid,
    .fs_founder_grid,
    .fs_vision_wrap {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .fs_about_hero h1 {
        font-size: clamp(3.8rem, 12vw, 6.5rem);
    }
}

@media (max-width: 640px) {
    .fs_values_grid {
        grid-template-columns: 1fr;
    }
    
    .fs_gallery_grid {
        grid-template-columns: 1fr;
    }
    
    .fs_btn_primary {
        padding: 1rem 2.5rem;
    }
    .about_cs h2 {
        font-size: 26px;
    }
    .fs_story_content p, .fs_founder_content p {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .about_cs h3 {
        font-size: 22px;
    }
    .fs_story_grid, .fs_founder_grid, .fs_vision_wrap {
        gap: 30px;
    }
    .fs_vision_wrap {
        gap: 0;
    }
    .about_cs section {
        padding: 39px 0;
    }
    .fs_hero_tagline {
        font-size: 20px;
    }
    .fs_about_hero h1 {
        margin-bottom: 13px;
    }
}


/* Contact Us Page */
.contact_cs section {
    position: relative;
}

/* HERO - Identical background & feel to About Hero */
.fs_contact_hero {
    background: #F5F2F2;
    color: var(--fs-black);
    padding: clamp(80px, 10vh, 220px) 0;
    text-align: center;
}

/* MAIN SECTION - White like Story & Founder */
.fs_contact_main {
    background: #fff;
    /* padding: 100px 0; */
    color: #000;
}

.fs_contact_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 40px;
}

/* Intro */
.fs_contact_intro h2 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.fs_contact_intro p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 10px;
}

/* Cards */
.fs_contact_card {
    display: flex;
    gap: 1.5rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid #eee;
}

.fs_contact_card h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: .8rem;
}

.fs_contact_card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}

.fs_contact_card a {
    color: #000;
    text-decoration: none;
    position: relative;
}

.fs_contact_card a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: #000;
    transition: .3s ease;
}

.fs_contact_card a:hover::after {
    width: 100%;
}

/* Icons */
.fs_icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #000;
    margin: auto;
}

.fs_icon svg {
    width: 100%;
    height: 100%;
}

/* Social */
.fs_contact_social {
    padding-top: 2rem;
}

.fs_contact_social h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.fs_social_links {
    display: flex;
    gap: 2rem;
}

.fs_social_links a {
    font-size: 1rem;
    text-decoration: none;
    color: #000;
    position: relative;
}

.fs_social_links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: #000;
    transition: .3s ease;
}
.fs_social_links a:hover::after {
    width: 100%;
}
/* Form Column */
.fs_contact_form_wrap {
    padding: 30px;
    border: 1px solid #eee;
    background: #f5f2f2;
}
/* CF7 Minimal Styling */
.fs_contact_form_wrap input,
.fs_contact_form_wrap textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 14px 0;
    font-size: 1rem;
    background: transparent;
    outline: none;
}
.fs_contact_form_wrap input:focus,
.fs_contact_form_wrap textarea:focus {
    border-color: #000;
}
.fs_contact_form_wrap button,
.fs_contact_form_wrap input[type="submit"] {
    background: #000;
    color: #fff;
    padding: 14px 30px;
    border: none;
    margin-top: 2rem;
    cursor: pointer;
    transition: .3s ease;
}
.fs_contact_form_wrap button:hover,
.fs_contact_form_wrap input[type="submit"]:hover {
    background: #222;
}
.social_icons ul {
    list-style: none;
}
/* CF7 Form Styling - Light & clean, matching About */
.wpcf7-form label {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    opacity: 1;
}
.wpcf7-not-valid-tip{
    text-transform: none;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    font-size: 1.05rem;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--fs-black);
    outline: none;
}
.wpcf7-form textarea {
    resize: vertical;
    min-height: 160px;
}
/* Map */
.fs_contact_map {
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
}
/* FAQ - Light grey like Values section */
.fs_contact_faq {
    background: #F5F2F2;
}
.fs_faq_accordion {
    max-width: 820px;
    margin: 0 auto;
}
.fs_faq_item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.fs_faq_question {
    width: 100%;
    padding: 1.6rem 20px 1.6rem 0;
    text-align: left;
    background: none;
    border: none;
    font-size: 1.28rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: self-start;
    justify-content: space-between;
}
.fs_faq_question::after {
    content: '+';
    position: static;
    right: 0;
    font-size: 1.8rem;
    transition: transform 0.4s ease;
    line-height: 1;
}
.fs_faq_question.active::after {
    transform: rotate(135deg);
}
.fs_faq_answer {
    padding-bottom: 1.8rem;
    font-size: 1.08rem;
    line-height: 1.75;
}
.fs_faq_answer a {
    color: #000;
    text-decoration: underline;
}

/* CTA - Exact same as About Us CTA */
.fs_contact_cta {
    background: var(--fs-black);
    color: var(--fs-white);
    text-align: center;
}

.fs_cta_box p {
    font-size: 1.3rem;
    opacity: 0.85;
    margin: 1.2rem 0 2.5rem;
}

/* Contact Form Styles */

.wpcf7-form {
    max-width: 680px;           /* Keeps form focused & premium */
    margin: 0 auto;
}
.wpcf7-form br {
    display: none;
}
.wpcf7-form p,
.wpcf7-form label {
    margin: 0 0 10px 0;
}

.wpcf7-form label {
    display: block;
    font-size: 0.875rem;        /* matches your .fs_label size */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /* opacity: 0.7; */
    margin-bottom: 0.7rem;
    font-weight: 500;
    color: var(--fs-black);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 0;           /* sharp corners = modern/minimal */
    font-size: 1.05rem;
    line-height: 1.5;
    background: #fff;
    color: var(--fs-black);
    transition: border-color 0.35s ease;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--fs-black);
    outline: none;
    box-shadow: none;
}

.wpcf7-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9l4-4H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 12px;
    padding-right: 2.8rem;
}

.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

.wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 1.1rem 3.2rem;
    border: 1.5px solid var(--fs-black);
    background: #000;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.wpcf7-form input[type="submit"]:hover {
    background: var(--fs-black);
    color: var(--fs-white);
}

.wpcf7-response-output {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid;
    font-size: 1rem;
}

.wpcf7-mail-sent-ok {
    border-color: #4CAF50;
    color: #2e7d32;
    background: rgba(76,175,80,0.08);
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    border-color: #f44336;
    color: #c62828;
    background: rgba(244,67,54,0.08);
}
.fs_contact_card .fs_icon {
    margin: 0;
}
.fs_icon img {
    width: 100%;
}

.fs_value_card .fs_icon {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
}
html[dir="rtl"] .cms_content h2::after {
    left: auto;
    right: 0;
}


/* Mobile adjustments ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Å“ extend your existing @media */
@media (max-width: 640px) {
    .wpcf7-form input[type="submit"] {
        width: 100%;
        padding: 1rem;
    }
}

@media (max-width: 1200px) {
    .contact_cs h2 { font-size: 38px; }
    .fs_contact_grid { gap: 50px; }
}

@media (max-width: 992px) {
    .fs_contact_grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .contact_cs h1 {
        font-size: clamp(3.8rem, 12vw, 6.5rem);
    }
    .fs_contact_grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .fs_contact_form_wrap {
        padding: 2rem;
    }
    
}
@media (min-width: 641px) and (max-width: 992px) {
    .fs_contact_cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        text-align: center;
    }
    .fs_contact_card {
        flex-direction: column;
        align-items: center;
        gap: 11px;
    }
    .fs_contact_intro {
        text-align: center;
    }
    .fs_contact_card h3 {
        margin-bottom: 6px;
        margin-top: 5px;
    }
    .fs_contact_social {
        text-align: center;
    }
    .fs_contact_social ul {
        justify-content: center;
    }
}
@media (max-width: 640px) {
    .fs_contact_form_wrap {
        padding: 30px 19px;
    }
    .contact_cs h2 { font-size: 26px; }
    .fs_contact_info p { font-size: 16px; }
    .contact_cs h3 { font-size: 22px; }
    .fs_contact_grid { gap: 30px; }
    .fs_hero_tagline { font-size: 20px; }
    .fs_contact_intro h2 {
        font-size: 28px;
    }
    .fs_faq_question {
        font-size: 19px;
        padding: 1.1rem 20px 1.1rem 0;
    }
    .fs_faq_answer {
        font-size: 16px;
        line-height: 1.4;
    }
    .fs_section_heading {
        margin-bottom: 2rem;
    }
}



/* CMS Pages */
/* =========================================
   CMS CONTENT SYSTEM
   Scope: .cms_content
========================================= */

.cms_content {
    --cms-text: #1f2937;
    --cms-muted: #6b7280;
    --cms-heading: #111827;
    --cms-accent: #393939;
    --cms-border: #e5e7eb;
    --cms-bg-soft: #f9fafb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cms-text);
    font-size: 16px;
    line-height: 1.75;
    word-break: break-word;
}

/* Vertical Rhythm */
.cms_content > * + * {
    margin-top: 1.4em;
}

/* =========================================
   HEADINGS
========================================= */

.cms_content h1,
.cms_content h2,
.cms_content h3,
.cms_content h4,
.cms_content h5,
.cms_content h6 {
    color: var(--cms-heading);
    font-weight: 500;
    line-height: 1.3;
    margin-top: 1rem;
    margin-bottom: 0.5em;
}

.cms_content h1 { font-size: 2.2rem; }
.cms_content h2 { font-size: 1.8rem; }
.cms_content h3 { font-size: 1.5rem; }
.cms_content h4 { font-size: 1.25rem; }
.cms_content h5 { font-size: 1.1rem; }
.cms_content h6 { font-size: 1rem; }

/* Add subtle underline accent for H2 */
.cms_content h2 {
    position: relative;
    padding-bottom: 8px;
}

.cms_content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--cms-accent);
    border-radius: 2px;
}

/* =========================================
   PARAGRAPHS
========================================= */

.cms_content p {
    margin: 0;
    color: var(--cms-text);
}

/* Lead Paragraph (if added manually) */
.cms_content .lead {
    font-size: 1.2rem;
    color: var(--cms-muted);
}

/* =========================================
   LINKS
========================================= */

.cms_content a {
    color: var(--cms-accent);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cms_content a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* =========================================
   LISTS
========================================= */

.cms_content ul, .cms_content ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
    padding-right: 1.5rem;
}
.cms_content ul li {
    list-style: disc;
}

.cms_content ol li {
    list-style: decimal;
}

.cms_content li {
    margin-bottom: 0.5rem;
}

/* Nested lists */
.cms_content ul ul,
.cms_content ol ol {
    margin-top: 0.5rem;
}

/* =========================================
   BLOCKQUOTE
========================================= */

.cms_content blockquote {
    border-left: 4px solid var(--cms-accent);
    padding: 1rem 1.5rem;
    background: var(--cms-bg-soft);
    font-style: italic;
    color: var(--cms-muted);
    border-radius: 6px;
}

/* =========================================
   IMAGES
========================================= */

.cms_content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.2rem 0;
}

.cms_content figure {
    margin: 1.5rem 0;
}

.cms_content figcaption {
    font-size: 0.9rem;
    color: var(--cms-muted);
    text-align: center;
    margin-top: 0.5rem;
}

/* =========================================
   TABLES
========================================= */

.cms_content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.cms_content th,
.cms_content td {
    border: 1px solid var(--cms-border);
    padding: 12px;
    text-align: left;
}

.cms_content th {
    background: var(--cms-bg-soft);
    font-weight: 600;
}

/* =========================================
   CODE
========================================= */

.cms_content code {
    background: #f3f4f6;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.cms_content pre {
    background: #111827;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
}

/* =========================================
   HR
========================================= */

.cms_content hr {
    border: none;
    height: 1px;
    background: var(--cms-border);
    margin: 2rem 0;
}

/* =========================================
   ALIGNMENT CLASSES (WP Default)
========================================= */

.cms_content .alignleft {
    float: left;
    margin-right: 1.5rem;
}

.cms_content .alignright {
    float: right;
    margin-left: 1.5rem;
}

.cms_content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   BUTTONS (Gutenberg + Classic)
========================================= */

.cms_content .wp-block-button__link,
.cms_content .button {
    display: inline-block;
    background: var(--cms-accent);
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.cms_content .wp-block-button__link:hover,
.cms_content .button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVE TYPOGRAPHY
========================================= */

@media (max-width: 768px) {
    .cms_content {
        font-size: 15px;
    }

    .cms_content h1 { font-size: 1.8rem; }
    .cms_content h2 { font-size: 1.5rem; }
    .cms_content h3 { font-size: 1.3rem; }
}
