/* 1. Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; background: #ffffff; color: #000000; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* 2. Typography */
h2 { font-size: 36px; font-weight: 700; margin-bottom: 40px; }
h3 { font-size: 32px; font-weight: 700; margin: 24px 0 16px; }
p { font-size: 24px; color: #2B2B2B; margin: 8px 0 24px; }
ul li { font-size: 24px; color: #2B2B2B; margin: 8px 0 10px; list-style: none; }

/* 3. Container */
.container { max-width: 1548px; margin: 0 auto; padding: 0 20px; }
h2 { letter-spacing: -0.5px; }
h1 { line-height: 1.1; }
p { line-height: 1.5; }

/* 4. Header */
header { padding-top: 40px; padding-bottom: 30px; }
.logo { width: 250px; height: auto; display: block; }

/* 5. Hero */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 60px; min-height: calc(100vh - 150px); flex-wrap: wrap; }
.hero-text { flex: 1; min-width: 400px; }
.hero-text h1 { font-size: 48px; font-weight: 600; margin-bottom: 24px; }
.subtitle { font-size: 24px; color: #2B2B2B; margin-bottom: 24px; }
.testimonial { font-size: 24px; font-style: italic; color: #595959; margin-bottom: 32px; max-width: 600px; line-height: 2; }
blockquote::before { content: "“"; font-family: 'Georgia', serif; font-size: 48px; color: #595959; margin-right: 6px; line-height: 0px; }
blockquote::after { content: "”"; font-family: 'Georgia', serif; font-size: 48px; color: #595959; margin-left: 6px; line-height: 0px; }
.hero-img { flex: 1; min-width: 300px; display: flex; z-index: -1; }
.hero-img img, .hero-img picture { width: 830px; height: auto; border-radius: 8px; }

/* 6. Button */
.button { display: inline-block; background: #000000; color: #ffffff; border: 1px solid #595959; border-radius: 33px; padding: 18px 42px; font-size: 16px; font-weight: bold; text-decoration: none; transition: background 0.3s; }
.button:hover { background: #2B2B2B; }

/* 7. Storyboard */
.storyboard-section { min-height: 100vh; padding: 100px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.storyboard-slide { display: none; flex-direction: column; align-items: center; }
.storyboard-slide h2 { margin: 0; font-style: italic; }
.storyboard-slide blockquote::before, .storyboard-slide blockquote::after { color: #000; }
.storyboard-slide.active { display: flex; }
.lamp-icon { width: 128px; height: 128px; margin-bottom: 30px; }
.section-subtitle { font-size: 32px; font-weight: 500; color: #2B2B2B; margin-bottom: 20px; }
.section-description { max-width: 70%; font-size: 32px; color: #2B2B2B; margin-bottom: 40px; }
.storyboard-dots { display: flex; gap: 10px; margin-bottom: 30px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: #D3D3D3; transition: background 0.3s; }
.dot.active { background: #000000; }
.slide-navigation button { display: none; }

/* 8. Common Section Styles */
.content-section { padding: 100px 0; text-align: left; }
.content-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-top: 60px; }
.content-text { flex: 1; }
.content-image { flex-shrink: 0; }
.content-image img, .content-image picture { width: 100%; height: auto; max-width: 300px; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-item { display: flex; align-items: flex-start; margin-bottom: 20px; gap: 20px; }
.feature-icon { width: 75px; height: 75px; margin-right: 20px; flex-shrink: 0; }
.feature-title { font-size: 24px; font-weight: 700; color: #000; margin: 0 0 8px; }
.feature-description { font-size: 24px; color: #2B2B2B; margin: 8px 0 24px; line-height: 1.6; }

/* 9. Services Section */
.services { padding: 80px 0; }
.services-grid { display: flex; flex-wrap: wrap; }
.service-card { padding: 20px; flex: 1; min-width: 50%; text-align: center; }
.service-brand { border-right: 3px solid #000; }
.service-full { border-top: 3px solid #000; display: flex; align-items: center; width: 100%; }
.service-full .content-text { text-align: left; margin-left: 32px; }
.service-full .service-link { float: right; }
.service-icon { height: 128px; margin-bottom: 24px; }
.service-title { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.service-subtitle { font-size: 24px; font-weight: 700; color: #2B2B2B; margin-bottom: 16px; }
.service-description { font-size: 24px; color: #2B2B2B; margin-bottom: 24px; }
.service-link { font-size: 24px; font-weight: 700; text-decoration: underline; color: #000000; }
.service-link-mobile { display: none; }

/* 10. Design Psychology Section */
.psychology-list { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.psychology-item { display: flex; align-items: flex-start; gap: 40px; }
.psychology-icon { width: 162px; height: auto; flex-shrink: 0; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; justify-items: center; align-items: center; }
.logo-grid img { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; transition: transform 0.3s ease; filter: grayscale(100%); }
.logo-grid img:hover { transform: scale(1.05); filter: grayscale(0%); transition: filter 0.3s ease; }

/* 11. Footer */
.footer { margin-top: 40px; padding: 40px 20px; border-top: 1px solid #E0E0E0; text-align: center; font-size: 16px; color: #000; }
.footer a { color: #000; text-decoration: none; }

/* 12. Responsive */
@media (max-width: 992px) {
.container { padding: 0 40px; }
.hero { flex-direction: column-reverse; text-align: center; }
.hero-img { margin-top: 40px; justify-content: center; }
.hero-img img, .hero-img picture { width: 100%; }
.storyboard-section { padding: 60px 20px; }
.content-grid { flex-direction: column; }
.service-card { min-width: 100%; border-right: none !important; }
.service-full { flex-direction: column; text-align: center; }
.service-full .content-text { margin-left: 0; text-align: center; }
.psychology-item { flex-direction: column; align-items: center; text-align: center; }
}

/* Fluid typography - scales between 1440px and 1920px */
:root { --min-width: 1440px; --max-width: 1920px; --min-font: 0.9; /* 90% scale at 1440px */ --max-font: 1; /* 100% scale at 1920px+ */ }

@media (min-width: 1440px) {
html { font-size: calc( var(--min-font) * 1rem + (var(--max-font) - var(--min-font)) * (100vw - var(--min-width)) / (var(--max-width) - var(--min-width)) ); }
}

.container { max-width: 1300px; /* Reduced from 1548px */ padding: 0 40px; margin: 0 auto; }

/* Service Section */
.service-title { font-size: 28px; /* Reduced from 32px */ }
.service-subtitle,
.service-description,
.service-link { font-size: 20px; /* Reduced from 24px */ }

/* Other Text Elements */
.subtitle,
.testimonial,
.feature-description { font-size: 21px; /* Slightly reduced */ }

/* ===== image control ===== */
/* Vertical Images */
.numerology-left img,
.numerology-left picture,
.service-icon { height: auto; width: fit-content; }

/* Hero Image */
.hero-img img, .hero-img picture { max-width: 700px; /* Reduced from 830px */ height: auto; }

/* ===== spacing fixes ===== */
/* Section Padding */
.content-section,
.services,
.design-psychology,
.numerology-branding { padding: 80px 0; }

/* Prevent Image-Section Collision */
.service-full,
.numerology-content { margin-bottom: 40px; }

/* ===== 1440px OPTIMIZATION ===== */
@media (max-width: 1600px) {
.container { max-width: 1200px; /* Slightly narrower for 1440px */ }
.hero-img img, .hero-img picture { max-width: 600px; }
.service-icon { max-height: 100px; }
}

@media (max-width: 768px) {
.content-grid { gap: 30px; }
.feature-item { align-items: center; }
.hero-text,
.hero-img { min-width: 100%; }
h2 { font-size: 32px; margin-bottom: 40px; }
}

/* ===== center-aligned mobile layouT ===== */
@media (max-width: 767px) {
/* Base Centering */
body { text-align: center; }

/* Container Adjustments */
.container { display: flex; flex-direction: column; align-items: center; /*padding: 0 20px !important;*/ }

/* Text Elements */
.hero-text,
.content-text,
.service-card,
.psychology-item > div,
.feature-item > div { text-align: center !important; display: flex; flex-direction: column; align-items: center; }

/* Images */
.hero-img,
.content-image,
.psychology-icon,
.feature-icon { margin-left: auto; margin-right: auto; }
.lamp-icon { height: auto; width: 60px; }

/* Special Cases */
.service-full .content-text { margin-left: 0 !important; }
.service-title { font-size: 24px; }
.service-link-mobile { display: block; }
.service-description a { display: none; }
.feature-item { flex-direction: column; align-items: center; }

/* Lists */
.feature-list,
.psychology-list { align-items: center; }

/* Testimonial Quotes */
.testimonial { margin-left: auto; margin-right: auto; }

/* Storyboard */
.storyboard-slide { align-items: center; }

/* Spacing */
section { padding-left: 20px !important; padding-right: 20px !important; }

/* Button Alignment */
.button { align-self: center; }
}

/* ===== mobile responsiveness (Under 768px) ===== */
@media (max-width: 767px) {
.container { padding: 0 24px !important; max-width: 95vw !important; }
section:not(.hero, .storyboard-section) { display: flex; flex-direction: column; justify-content: center; max-width: 95vw !important; }
h1 { font-size: 2.2rem !important; margin-bottom: 1.5rem !important; }
h2 { font-size: 1.8rem; margin: 2rem 0 1.5rem; padding-top: 1rem; }
.hero { flex-direction: column-reverse; min-height: 100vh; gap: 2rem; padding: 2rem 0; }
.hero-img { margin: 0 auto 2rem; justify-content: center; }
.hero-img img, .hero-img picture { width: 90%; max-width: 400px; }
.service-icon { height: auto; width: 100px; }
.content-image img[src*="numerology"],
.content-image img[src*="brand"],
.content-image img[src*="clarity"],
.content-image img[src*="nocost"],
.content-image picture[src*="numerology"],
.content-image picture[src*="brand"],
.content-image picture[src*="clarity"],
.content-image picture[src*="nocost"] { display: none !important; }
.service-card { padding: 2rem 0; margin-bottom: 1.5rem; border: none; }
.service-brand { border-right: none; }
.psychology-item { flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.psychology-icon { width: 80px; margin: 0 auto; }
.storyboard-section { padding: 10vh 3vw !important; }
.section-description { max-width: 90%; font-size: 1.2rem; }
.content-section > *:first-child,
.services > *:first-child,
.design-psychology > *:first-child { margin-top: 3rem !important; }
.content-grid { margin: 2rem 0 !important; }

header { padding-top: 30px; padding-bottom: 0px; }
.container { padding: 0px 1rem 1rem 1rem !important; }
nav { display: flex; width: 100%; }
.footer { margin-top: 10px; }
}

/*menu design*/
.menu-button { display: none; }
nav { display: flex; justify-content: space-between; align-items: center; z-index: 1; top: 0; background-color: #fff; }
.nav-collapse { padding-top: 5px !important; transition: 0.5s; padding-bottom: 5px; }
nav img { width: 150px; }
.nav-links { flex: 1; text-align: right; }
.nav-links ul li { list-style: none; display: inline-block; padding: 5px 20px; position: relative; margin:0px; }
.nav-links ul li a { color: #504e4e; text-decoration: none; font-size: 24px; font-weight: 400; }
.nav-links ul li a:hover { color: #000; text-decoration: none; font-size: 24px; font-weight: 500; }
.nav-links ul li a[active] { color: #000; text-decoration: none; font-size: 24px; font-weight: 700; }
.nav-links ul li:last-child { padding-right: 0px; }

@media only screen and (max-width: 767px) {
.logo { width: 200px; }
.menu-button { display: block; background: none; border: none; cursor: pointer; font-size: 36px; font-weight: 700; color: #333333; padding: 0px 0px 0px 30px; margin-top: -18px; }
body.menu-active .nav-links { display: block; }
.nav-links { display: none; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: absolute; top: 90px; right: 20px; width: 220px; }
.nav-links ul { list-style: none; padding: 0; margin: 0; }
.nav-links ul li { text-align: left; padding: 10px 20px !important; border-bottom: 1px solid #ddd; width: 220px; margin-bottom: 0px; }
.nav-links ul li:last-child { border-bottom: none; }
.nav-links a { text-decoration: none; color: #333333; display: block; font-size: 16px; font-weight: 500; background: none; outline: none; }
.nav-links .active { display: block; background: none; outline: none; }
.nav-links ul li a { font-size: 20px; }
.nav-links ul li a[active] { font-size: 20px; }
.nav-links ul li a:hover { font-size: 20px; }
}

@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
.logo { width: 200px; }
.menu-button { display: block; background: none; border: none; cursor: pointer; font-size: 36px; font-weight: 700; color: #333333; padding: 0px 0px 0px 30px; margin-top: -42px; }
body.menu-active .nav-links { display: block; }
.nav-links { display: none; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 10%); position: absolute; top: 62px; right: 2px; width: 230px; }
.nav-links ul { list-style: none; padding: 0; margin: 0; }
.nav-links ul li { text-align: left; padding: 20px 25px !important; border-bottom: 1px solid #ddd; width: 220px; margin-bottom: 0px; }
.nav-links ul li:last-child { border-bottom: none; }
.nav-links a { text-decoration: none; color: #333333; display: block; font-size: 18px; font-weight: 500; background: none; outline: none; }
.nav-links .active { display: block; background: none; outline: none; }
.nav-links ul li a { font-size: 24px; }
.nav-links ul li a[active] { font-size: 24px; }
}