/*

Theme Name: EMBE Method

Theme URI: http://www.giroxbox.com/

Author: Giroxbox

Author URI: http://www.giroxbox.com/

Description: Custom hard-coded theme for EMBE Method. Responsive, lightweight, and built from scratch (no page builder / no ACF).

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: embe-method

Tags: custom, responsive, dark, minimal

*/



*,

*::before,

*::after {

box-sizing: border-box;

}



/* =========================================

Font Loading

========================================= */

@font-face {

font-family: "TanPearl";

src:

url("assets/fonts/tan-pearl.woff") format("woff"),

url("assets/fonts/tan-pearl.woff2") format("woff2");

font-weight: 400;

font-style: normal;

font-display: swap;

}



@font-face {

font-family: "Visby";

src:

url("/assets/fonts/visby-regular.woff") format("woff"),

url("/assets/fonts/visby-regular.woff2") format("woff2");

font-weight: 400;

font-style: normal;

font-display: swap;

}



@font-face {

font-family: "Visby";

src:

url("/assets/fonts/visby-bold.woff") format("woff"),

url("/assets/fonts/visby-bold.woff2") format("woff2");

font-weight: 700;

font-style: normal;

font-display: swap;

}



:root {

/* Brand Colors */

--embe-black: #1f2122; /* Eerie Black */

--embe-white: #ffffff;

--embe-cyan: #13908a; /* Dark Cyan */

--embe-pink: #af2183; /* Fandango */

--embe-gold: #c98433; /* Old Gold */

--embe-vista: #949edb; /* Vista Blue */

--embe-blue: #0a498d; /* Polynesian Blue */

--embe-orange: #df5500; /* Persimmon (optional) */

--muted: rgba(255, 255, 255, 0.72);



/* Typography */

--font-heading: "TanPearl"; /* Headline */

--font-body:

"Visby", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;



/* Type sizes (tune if needed) */

--text-base: 18px; /* Body - 18pts */

--h1: clamp(42px, 6vw, 75px); /* Brand guide headline 75pts */

--h2: clamp(30px, 4vw, 54px);

--h3: clamp(22px, 2.6vw, 34px);



/* Layout */

--container: 1200px;

--gutter: clamp(16px, 3vw, 36px);

--radius: 14px;

}



/* =========================================

Global Defaults

========================================= */



html,

body {

background: var(--embe-black);

color: var(--embe-white);

font-family: var(--font-body);

font-size: var(--text-base);

line-height: 1.6;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

overflow-x: hidden;

margin: 0px;

padding: 0px;

}

/* Prevent scrolling when menu is open */

body.no-scroll {

overflow: hidden;

}



a {

color: var(--embe-white);

text-decoration: none;

transition:

opacity 0.2s ease,

color 0.2s ease;

}

a:hover {

opacity: 0.85;

}



.container {

width: 100%;

max-width: var(--container);

margin-inline: auto;

padding-inline: var(--gutter);

}



/* =========================================

Headings (TAN Pearl)

========================================= */



h1,

h2,

h3,

h4,

h5,

h6 {

font-family: var(--font-heading);

font-weight: 400;

letter-spacing: 0.02em;

margin: 0 0 0.6em 0;

}



h1 {

font-size: var(--h1);

line-height: 1.5em;

}

h2 {

font-size: var(--h2);

line-height: 1.5em;

}

h3 {

font-size: var(--h3);

line-height: 1.5em;

}



/* Subtitle / Strong text = Visby Bold */

.subtitle,

strong,

b {

font-family: var(--font-body);

font-weight: 700;

}



/* Body = Visby Regular */

p {

margin: 0 0 1em 0;

}



.text-black {

color: var(--embe-black);

}



.text-green {

color: var(--embe-cyan);

}

/* =========================

Header (Modern / Glass)

========================= */



/* --- ADMIN BAR OFFSET --- */

body.admin-bar .embe-header {

top: 32px;

}

@media screen and (max-width: 782px) {

body.admin-bar .embe-header {

top: 46px;

}

}



/* --- HEADER CONTAINER --- */

.embe-header {

background: rgba(30, 32, 33, 0.85);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 999;

border-bottom: 1px solid rgba(255, 255, 255, 0.08);

transition:

transform 0.4s ease,

background 0.3s ease,

border 0.3s ease;

}



.embe-header.header-hidden {

transform: translateY(-100%);

}



/* Optional: Add a stronger shadow when sticky/scrolled up for better contrast */

.embe-header.is-scrolled {

background: rgba(30, 32, 33, 0.95); /* Darker background when scrolling */

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



/* FULL WIDTH INNER CONTAINER */

.embe-header__inner {

width: 100%; /* Full width */

max-width: none; /* Remove container restriction */

padding: 16px 40px; /* Generous side padding */

display: flex;

align-items: center;

justify-content: space-between; /* Pushes Left/Right groups apart */

position: relative;

}



/* --- LEFT GROUP (Logo + Nav) --- */

.embe-header__left {

display: flex;

align-items: center;

gap: 60px; /* Space between Logo and Menu */

z-index: 20; /* Keep interactive */

}



.embe-header__logo img {

max-height: 80px;

width: auto;

display: block;

}



.embe-logo-text {

font-family: var(--font-heading, serif);

font-size: 28px;

color: var(--embe-white, #fff);

line-height: 1;

text-decoration: none;

}



/* Navigation */

.embe-nav__list {

list-style: none;

margin: 0;

padding: 0;

display: flex;

align-items: center;

gap: 30px;

}



.embe-nav__list a {

font-family: var(--font-body, sans-serif);

font-weight: 500;

font-size: 15px;

color: var(--embe-white, #fff);

text-decoration: none;

text-transform: uppercase;

letter-spacing: 0.05em;

opacity: 0.7;

position: relative;

transition: opacity 0.3s ease;

}



.embe-nav__list a:hover {

opacity: 1;

}



.embe-nav__list a::after {

content: "";

position: absolute;

bottom: -4px;

left: 0;

width: 0%;

height: 1px;

background: var(--embe-cyan, #00ffff);

transition: width 0.3s ease;

}

.embe-nav__list a:hover::after {

width: 100%;

}



/* --- CENTER (Switcher) --- */

.embe-header__switcher {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

z-index: 10;

}



.mode-switcher-pill {

display: flex;

background: rgba(255, 255, 255, 0.08);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: 50px;

padding: 4px;

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

}



.switch-btn {

padding: 10px 24px;

font-size: 13px;

font-weight: 600;

color: rgba(255, 255, 255, 0.6);

text-transform: uppercase;

letter-spacing: 0.05em;

text-decoration: none;

border-radius: 40px;

transition: all 0.3s ease;

white-space: nowrap;

font-family: var(--font-body, sans-serif);

}



.switch-btn:hover {

color: var(--embe-white, #fff);

}



.switch-btn.active {

background-color: var(--embe-white, #fff);

color: var(--embe-black, #1f2122);

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

}



/* --- RIGHT GROUP (CTA + Toggle) --- */

.embe-header__right {

display: flex;

align-items: center;

gap: 20px;

z-index: 20;

}



.embe-join {

display: flex;

align-items: center;

gap: 12px;

background: var(--embe-white, #fff);

color: var(--embe-black, #000);

padding: 6px 6px 6px 20px;

border-radius: 50px;

text-decoration: none;

font-family: var(--font-body, sans-serif);

font-weight: 700;

font-size: 14px;

transition:

transform 0.2s ease,

background 0.3s ease;

}



.embe-join:hover {

transform: scale(1.05);

}



.embe-join.shop-btn {

background-color: var(--embe-blue);

color: #fff;

}

.embe-join.shop-btn .embe-join__arrow {

background: rgba(255, 255, 255, 0.2);

}



.embe-join__arrow {

display: inline-flex;

align-items: center;

justify-content: center;

width: 34px;

height: 34px;

background: var(--embe-blue, #007bff);

color: var(--embe-white, #fff);

border-radius: 50%;

font-size: 14px;

}



/* --- MOBILE TOGGLE --- */

.embe-nav-toggle {

display: none;

background: transparent;

border: 0;

padding: 0;

width: 30px;

height: 24px;

position: relative;

cursor: pointer;

z-index: 1002;

}

.embe-nav-toggle__bar {

display: block;

width: 100%;

height: 2px;

background: var(--embe-white, #fff);

position: absolute;

left: 0;

transition: all 0.3s ease;

}

.embe-nav-toggle__bar:nth-child(1) {

top: 0;

}

.embe-nav-toggle__bar:nth-child(2) {

top: 50%;

transform: translateY(-50%);

}

.embe-nav-toggle__bar:nth-child(3) {

bottom: 0;

}



/* Hamburger Active State */

.embe-nav-toggle.active .embe-nav-toggle__bar:nth-child(1) {

top: 50%;

transform: rotate(45deg);

}

.embe-nav-toggle.active .embe-nav-toggle__bar:nth-child(2) {

opacity: 0;

}

.embe-nav-toggle.active .embe-nav-toggle__bar:nth-child(3) {

bottom: auto;

top: 50%;

transform: rotate(-45deg);

}



/* =========================

MOBILE MENU STYLES

========================= */



/* Mobile Menu Container (Hidden by default) */

.embe-mobile-menu {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

background: #1e2021; /* Solid dark background */

z-index: 998; /* Behind the header bar (999) but above content */

padding-top: 100px; /* Space for header */

transform: translateY(-100%); /* Slide up to hide */

transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);

opacity: 0;

visibility: hidden;

}



/* When Active (Added via JS) */

.embe-mobile-menu.active {

transform: translateY(0);

opacity: 1;

visibility: visible;

}



.mobile-menu-inner {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100%;

gap: 40px;

padding-bottom: 80px;

}



/* Mobile Nav Links */

.mobile-nav__list {

list-style: none;

padding: 0;

text-align: center;

}



.mobile-nav__list li {

margin: 20px 0;

opacity: 0;

transform: translateY(20px);

transition: all 0.4s ease;

}



/* Stagger animation when active */

.embe-mobile-menu.active .mobile-nav__list li {

opacity: 1;

transform: translateY(0);

}



.embe-mobile-menu.active .mobile-nav__list li:nth-child(1) {

transition-delay: 0.1s;

}

.embe-mobile-menu.active .mobile-nav__list li:nth-child(2) {

transition-delay: 0.2s;

}

.embe-mobile-menu.active .mobile-nav__list li:nth-child(3) {

transition-delay: 0.3s;

}



.mobile-nav__list a {

font-family: var(--font-heading, serif);

font-size: 32px;

color: #fff;

text-decoration: none;

}



/* Mobile Switcher */

.mobile-switcher-container {

display: flex;

flex-direction: column;

align-items: center;

gap: 15px;

opacity: 0;

transform: translateY(20px);

transition: all 0.4s ease 0.4s; /* Delay after menu items */

}



.embe-mobile-menu.active .mobile-switcher-container {

opacity: 1;

transform: translateY(0);

}



.mobile-label {

font-family: var(--font-body, sans-serif);

font-size: 12px;

text-transform: uppercase;

letter-spacing: 0.1em;

color: rgba(255, 255, 255, 0.5);

}



.mobile-pill {

transform: scale(1.1); /* Make it slightly bigger on mobile for touch */

}



/* Mobile CTA */

.mobile-cta-container {

opacity: 0;

transition: all 0.4s ease 0.5s;

}



.embe-mobile-menu.active .mobile-cta-container {

opacity: 1;

}



.mobile-join {

padding: 12px 12px 12px 30px; /* Bigger button */

font-size: 16px;

}



/* --- UTILITIES --- */

@media screen and (min-width: 993px) {

.embe-mobile-menu {

display: none;

} /* Never show on desktop */

.desktop-only {

display: flex !important;

}

}



@media screen and (max-width: 992px) {

.desktop-only {

display: none !important;

}

}



/* =========================

RESPONSIVENESS

========================= */



/* Tablet & Laptop (1200px) */

/* The switcher might hit the menu here, so we hide the menu or the switcher */

@media screen and (max-width: 1280px) {

/* Hide desktop menu earlier to prevent collision */

.embe-nav {

display: none;

}

.embe-nav-toggle {

display: block;

}

}



/* Mobile (768px) */

@media screen and (max-width: 768px) {

.embe-header__inner {

padding: 12px 20px;

}



.embe-header__switcher {

display: none;

} /* Hide Switcher on Mobile */



.embe-join {

display: none;

} /* Optional: Hide CTA on mobile */



.embe-header__logo img {

max-height: 40px;

} /* Smaller Logo */

}



/* =========================

RESPONSIVENESS

========================= */



/* 1. TABLET CRASH PROTECTION (Important!) */

/* Prevents the center Switcher from overlapping the Menu on medium screens */

@media screen and (max-width: 1200px) {

.embe-header__switcher {

display: none; /* Hide switcher earlier to prevent collision */

}

}



/* 2. MOBILE LAYOUT */

@media screen and (max-width: 992px) {

.embe-nav {

display: none; /* Standard mobile menu hiding */

/* Add your mobile menu open styles here if separate */

}



.embe-nav-toggle {

display: block;

}



.embe-join {

display: none; /* Optional: Hide CTA on mobile to save space, or keep it */

}



/* If you want the CTA on mobile, remove display:none above */

}



/* =========================

Footer (Exact Replica)

========================= */



/* =========================
   Footer (Updated 3-Column)
========================= */

.embe-footer {
  background-color: #1a1a1a; /* Dark charcoal/black match */
  color: #ffffff;
  padding: 100px 0 40px;
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
}

.footer-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Top Section Grid (3 Columns) --- */
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; /* Vertically centers the logo with the menus */
  gap: 40px;
  margin-bottom: 80px;
}

.footer-heading {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px 0;
  letter-spacing: 0.02em;
}

/* Forces the newsletter text to stay on one line */
.nowrap-heading {
  white-space: nowrap; 
}

/* Left Side (Sitemap) */
.sitemap-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: #fff;
}

/* Middle Side (Logo) */
.center-col {
  display: flex;
  justify-content: center;
}

.footer-logo-wrapper {
  text-align: center;
  padding: 0; /* Removed the old large vertical padding */
}

.footer-logo-wrapper img {
  max-width: 100%;
  height: auto;
  width: 200px;
  display: block;
  margin: 0 auto;
}

/* Right Side (Newsletter) */
.newsletter-col {
  display: flex;
  justify-content: flex-end; /* Pushes the form to the far right */
}

.newsletter-block {
  width: 100%;
  max-width: 340px;
}

/* Newsletter Form */
.footer-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 10px;
  position: relative;
  width: 100%;
}

.footer-form input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  width: 100%;
  padding: 5px 0;
  outline: none;
  font-family: inherit;
}

.footer-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer-form button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-weight: 600;
  padding-left: 15px;
  transition: opacity 0.2s;
}

.footer-form button:hover {
  opacity: 0.7;
}

/* --- Bottom Section: Copyright + Legal Links --- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom-right {
  display: flex;
  gap: 30px;
}

.footer-bottom-right a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-bottom-right a:hover {
  color: #fff;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr; /* Stack everything vertically */
    text-align: center;
    gap: 60px;
  }
  
  .sitemap-col {
    align-items: center;
  }

  .newsletter-col {
    justify-content: center;
  }
  
  .newsletter-block {
    margin: 0 auto;
  }

  .footer-bottom {
    flex-direction: column-reverse; /* Puts copyright on bottom, links on top */
    gap: 20px;
    text-align: center;
  }
  
  .footer-bottom-right {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* =========================

MOBILE HEADER & MENU

(Add to bottom of style.css)

========================= */

@media (max-width: 992px) {

/* 1. Header Layout on Mobile */

.embe-header__inner {

width: 100%;

max-width: 100%;

padding: 15px 20px; /* Safe padding */

box-sizing: border-box;

}



.embe-header__cta {

margin-left: auto; /* Pushes it to the right, but keeps it inside */

gap: 15px;

}



/* 3. The Full Screen Mobile Menu Overlay */

.embe-nav {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh; /* Full screen height */

background-color: #1f2122; /* Solid Brand Black */

z-index: 998; /* Under the toggle button */



/* Centering Content */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;



/* Hidden State */

opacity: 0;

visibility: hidden;

pointer-events: none;

transform: translateY(-20px);

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Active State (When JavaScript adds .is-open) */

/* .embe-nav.is-open {

opacity: 1;

visibility: visible;

pointer-events: all;

transform: translateY(0);

} */



/* 4. Mobile Menu Links */

.embe-nav__list {

flex-direction: column;

gap: 30px;

text-align: center;

}



.embe-nav__list a {

font-family: var(--font-heading); /* Use the fancy font for big impact */

font-size: 32px;

color: #fff;

display: block;

}



/* 5. The Hamburger Toggle Button */

.embe-nav-toggle {

display: block; /* Show it */

background: transparent;

border: none;

width: 30px;

height: 24px;

position: relative;

z-index: 1000; /* Above the overlay so you can click to close */

cursor: pointer;

margin-left: 15px;

}



/* Hamburger Bars */

.embe-nav-toggle__bar {

display: block;

width: 100%;

height: 2px;

background-color: #fff;

position: absolute;

left: 0;

transition: all 0.3s ease;

}

.embe-nav-toggle__bar:nth-child(1) {

top: 0;

}

.embe-nav-toggle__bar:nth-child(2) {

top: 50%;

transform: translateY(-50%);

}

.embe-nav-toggle__bar:nth-child(3) {

bottom: 0;

}



/* Hamburger Animation to "X" */

.embe-nav-toggle.active .embe-nav-toggle__bar:nth-child(1) {

top: 50%;

transform: rotate(45deg);

}

.embe-nav-toggle.active .embe-nav-toggle__bar:nth-child(2) {

opacity: 0;

}

.embe-nav-toggle.active .embe-nav-toggle__bar:nth-child(3) {

bottom: auto;

top: 50%;

transform: rotate(-45deg);

}



/* 6. Adjust "Join Us" Button for small screens */

.embe-join span:first-child {

display: none; /* Hide text "Join Us", keep only arrow on mobile */

}

.embe-join {

padding: 5px; /* Shrink button */

gap: 0;

}

.embe-join__arrow {

width: 36px;

height: 36px;

margin: 0;

}

}



/* =========================

WEBGL PRELOADER STYLES

========================= */

#all.preloader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

z-index: 9998; /* High, but behind the text/button */

background: #000;


/* UNCOMMENTED & ACTIVE: This creates the smooth fade */

transition: opacity 1.5s ease, visibility 1.5s ease;

opacity: 1;

visibility: visible;

}



#canvas {

display: block;

width: 100%;

height: 100%;

}



/* The text overlay must be ABOVE the black background to be clickable */

#preloader-text {

position: fixed; /* Ensure it stays put */

z-index: 9999; /* Higher than #all */

transition: opacity 1s ease;

}



/* Hide State (Triggered by JS) */

/* When body has 'site-loaded', fade everything out */

body.site-loaded #all.preloader-wrapper,

body.site-loaded #preloader-text {

opacity: 0;

visibility: hidden;

pointer-events: none; /* Allows clicks to pass through to the site */

}



/* Keep your existing animations below... */

.fade-in-delayed {

opacity: 0;

animation: logoFadeIn 1.5s ease 2.5s forwards;

}



.fade-in-delayed-more {

opacity: 0;

animation: logoFadeIn 1.5s ease 3s forwards;

}



@keyframes logoFadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}



/* Hover effect for Enter button */

#preloader-text-enter:hover {

background: #fff;

color: #000 !important;

border-color: #fff !important;

}



/* =========================================

GLOBAL MOBILE FIXES

========================================= */

@media (max-width: 768px) {

/* 1. FORCE SAFE PADDING ON SIDES */

/* This ensures text never touches the right edge of the phone */

.container {

padding-left: 20px !important;

padding-right: 20px !important;

width: 100%;

max-width: 100%;

overflow: hidden; /* Clips anything internal that tries to break out */

}



/* 2. FIX HERO TITLE OVERFLOW */

/* The large indentation (1.5em) pushes "Move" off-screen on mobile.

We reduce the font size and the indentation. */

.hero-title {

font-size: 48px !important; /* Smaller size for mobile to fit words */

word-wrap: break-word; /* Prevents long words from cutting off */

}



.indent-1 {

margin-left: 20px !important; /* Reduce indent from 1.5em (big) to 20px (small) */

}



html,

body {

overflow-x: hidden !important;

position: relative;

}

}



/* =========================================

LAPTOP / MACBOOK AIR FIX (1024px - 1440px)

========================================= */



@media (min-width: 1025px) and (max-width: 1440px) {

/* Reduce Hero Title specifically for Laptops */

.hero-title {

/* Previously it could reach 130px. We cap it at 90-100px here. */

font-size: clamp(60px, 7vw, 95px) !important;

line-height: 1.1;

}



/* Adjust the 'Move' and 'Evolve' indentation slightly if needed */

.indent-1 {

margin-left: 1em; /* Slightly less indentation to save horizontal space */

}



/* Ensure the container has breathing room */

.hero-container {

padding-left: 40px;

padding-right: 40px;

}

}



/* =========================

MOBILE MENU STYLES

========================= */

/* 4. THE CLOSE ICON */

.mobile-menu-close-btn {

position: absolute;

top: 30px;

right: 30px;

width: 40px;

height: 40px;

cursor: pointer;

color: #fff;

transition:

transform 0.3s ease,

color 0.3s ease;

z-index: 10000;

}



.mobile-menu-close-btn svg {

width: 100%;

height: 100%;

stroke-width: 1.5;

}



.mobile-menu-close-btn:hover {

color: #c4a169; /* Gold accent on hover */

transform: rotate(90deg); /* Spin effect */

}



.mobile-cta-container {

margin-top: 20px;

}



/* 7. Hide Toggle Button on Desktop */

@media (min-width: 901px) {

.embe-nav-toggle {

display: none;

}

.embe-mobile-menu {

display: none;

} /* Ensure it's hidden on desktop */

}



/* 8. Prevent scrolling when menu is open */

body.menu-open {

overflow: hidden;

}



/* Laptop + MacBook 14" sweet spot */

@media (min-width: 1400px) and (max-width: 1600px) {

.embe-header__switcher {

position: absolute;

left: 55%;

top: 50%;

transform: translate(-50%, -50%);

z-index: 10;

}

}



/* =========================

PREMIUM SPLIT TRANSITION

========================= */



/* 1. Container */

.curtain-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

z-index: 99999; /* Highest Z-index */

pointer-events: none; /* Allow clicks when open */

display: flex;

align-items: center;

justify-content: center;

}



/* 2. Panels (Black Screens) */

.curtain-panel {

width: 51%; /* Slight overlap to prevent gap line */

height: 100%;

background-color: #1a1c1d; /* Your Theme Black */

position: absolute;

top: 0;



/* The Secret Sauce: Quartic Easing for luxury feel */

transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);

will-change: transform;

}



.curtain-panel.left-panel {

left: 0;

transform-origin: left center;

/* Default: CLOSED (0%) */

transform: translateX(0);

}



.curtain-panel.right-panel {

right: 0;

transform-origin: right center;

/* Default: CLOSED (0%) */

transform: translateX(0);

}



/* 3. Center Logo */

/* .curtain-logo {

z-index: 100000;

color: #fff;

font-family: var(--font-heading);

font-size: 2rem;

letter-spacing: 0.2em;

opacity: 1;

transform: scale(1);

transition:

opacity 0.5s ease 0.2s,

transform 1.2s ease;

} */



/* --- STATE: PAGE LOADED (OPEN) --- */

/* This class is added by JS after load, or by PHP on Homepage */

body.page-loaded .curtain-panel.left-panel {

transform: translateX(-100%); /* Slide Left */

}



body.page-loaded .curtain-panel.right-panel {

transform: translateX(100%); /* Slide Right */

}



body.page-loaded .curtain-logo {

opacity: 0;

transform: scale(1.1); /* Subtle zoom out */

}



/* --- STATE: EXITING (CLOSE) --- */

/* Added by JS when you click a Service Link */

body.page-exiting .curtain-panel.left-panel {

transform: translateX(0) !important;

}



body.page-exiting .curtain-panel.right-panel {

transform: translateX(0) !important;

}



body.page-exiting .curtain-logo {

opacity: 1 !important;

transform: scale(1) !important;

transition-delay: 0s; /* Show immediately */

}



.reveal-overlay {

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

background: #ffffff; /* Or your preferred brand color */

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;


/* This creates the "Oval/Circle" starting state */

clip-path: circle(0% at center);

transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);


visibility: hidden;

pointer-events: none;

}



/* When active, the circle expands to cover the screen */

.reveal-overlay.is-active {

visibility: visible;

pointer-events: all;

clip-path: circle(150% at center);

}



.close-btn {

position: absolute;

top: 30px;

right: 30px;

font-size: 40px;

background: none;

border: none;

cursor: pointer;

}







.curtain-logo {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 10002;

font-size: 4rem;

font-weight: 700;

color: #fff;

opacity: 0;

pointer-events: none;

/* Removed transition from here - it's set dynamically in JS */

}



/* Enable View Transitions */

@view-transition {

navigation: auto;

}



/* 1. The Mask Definition */

:root {

--tilted-oval: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><ellipse cx="50" cy="50" rx="25" ry="45" transform="rotate(45 50 50)" fill="black"/></svg>');

}



/* 2. The Animation Logic (Scoped to .oval-active) */

html.oval-active::view-transition-old(root) {

animation: none;

z-index: -1;

opacity: 1; /* Keep old page visible behind */

}



html.oval-active::view-transition-new(root) {

z-index: 9999; /* Force on top */

mask-image: var(--tilted-oval);

mask-position: center;

mask-repeat: no-repeat;

animation: oval-open 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards; /* Increased from 1.2s to 1.8s */

}



@keyframes oval-open {

from { mask-size: 0; }

to { mask-size: 400vmax; }

}
/* =========================
   Footer
========================= */

.embe-footer {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 100px 0 40px;
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
}

.footer-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- Top Section Grid (3 Equal Columns) --- */
.footer-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
  margin-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

.footer-heading {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px 0;
  letter-spacing: 0.02em;
}

.nowrap-heading {
  white-space: normal;
  word-break: break-word;
}

/* Left Side (Sitemap) */
.sitemap-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: #fff;
}

/* Middle (Logo) */
.center-col {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.footer-logo-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo-wrapper img {
  max-width: 100%;
  width: 200px;
  height: auto;
  display: block;
}

/* Right Side (Newsletter) */
.newsletter-col {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.newsletter-block {
  width: 100%;
  max-width: 340px;
}

.footer-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 10px;
  width: 100%;
}

.footer-form input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  width: 100%;
  padding: 5px 0;
  outline: none;
  font-family: inherit;
}

.footer-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer-form button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-weight: 600;
  padding-left: 15px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.footer-form button:hover {
  opacity: 0.7;
}

/* --- Bottom Section --- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom-right {
  display: flex;
  gap: 30px;
}

.footer-bottom-right a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-bottom-right a:hover {
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 60px;
  }

  .sitemap-col {
    align-items: center;
  }

  .newsletter-col {
    justify-content: center;
  }

  .newsletter-block {
    margin: 0 auto;
  }

  .footer-bottom {
    flex-direction: column-reverse;
    gap: 20px;
    text-align: center;
  }

  .footer-bottom-right {
    justify-content: center;
    flex-wrap: wrap;
  }
}
/* =========================================
   IPAD PRO & LAPTOP HEADER COLLISION FIX
   (Screens 1440px and below)
========================================= */
@media screen and (max-width: 1440px) {
    /* 1. Reduce the outer edges of the header */
    .embe-header__inner {
        padding: 16px 20px; 
    }
    
    /* 2. Bring the navigation menu closer to the logo */
    .embe-header__left {
        gap: 20px; 
    }
    
    /* 3. Tighten the space between ABOUT, SERVICES, and CONTACT */
    .embe-nav__list {
        gap: 15px; 
    }
    
    /* 4. Slightly shrink the navigation text so it takes up less width */
    .embe-nav__list a {
        font-size: 13px; 
    }

    /* 5. Slightly tighten the Coaching/Shop toggle pill */
    .switch-btn {
        padding: 10px 18px; 
    }
}
body.no-scroll {
    overflow: hidden !important;
    position: fixed;       /* ← this is the key trick */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
html.no-scroll {
    overflow: hidden !important;
}