/* ========================================================= MAD FITNESS — Site Stylesheet Organized by: Variables > Reset > Layout > Components > Sections > Utilities Every element that a client may want to re-theme individually carries its own class (never relies only on element selectors) so styling can be changed piece by piece without touching markup. ========================================================= */ /* ---------- 1. BRAND VARIABLES ---------- */ /* Theme system: every color below is a variable so the whole site can be re-themed by swapping one block. Section 1a defines alternate color schemes as [data-theme="..."] overrides — add a new one there to try a new palette without touching any other CSS. Both site pages are locked to data-theme="rosewood" (set on the tag) as the final palette. */ :root { /* MAD Fit core palette — default "Midnight" theme (black + gold, from the brand's business card) */ --c-black: #121011; --c-charcoal: #1e1a19; --c-charcoal-soft: #2a2422; --c-gold: #c9a367; --c-gold-light: #e3c895; --c-gold-dark: #9c7a45; --c-cream: #f8f4ee; --c-white: #ffffff; --c-header-bg: rgba(18, 16, 17, 0.96); /* MAD Spa accent palette (pink + purple, from For Her Mind & Body) */ --c-spa-blush: #f3dcea; --c-spa-blush-soft: #faf0f6; --c-spa-purple: #5c2a6b; --c-spa-purple-dark: #3d1c48; --c-spa-pink-accent: #d98cb3; /* Text */ --c-text: #201d1c; --c-text-muted: #6c6560; --c-text-on-dark: #f4efe8; --c-text-on-dark-muted: #c8bfb4; /* Type */ --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-script: "Playfair Display", Georgia, serif; /* Spacing / shape */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --shadow-card: 0 10px 30px rgba(18, 16, 17, 0.08); --shadow-card-dark: 0 10px 30px rgba(0, 0, 0, 0.35); --container-width: 1180px; --header-height: 76px; } /* ---------- 1a. ALTERNATE COLOR SCHEMES ---------- Light, warm palettes for A/B-testing which one feels most inviting. Each block only overrides what needs to change; spa colors, fonts, and layout are untouched so the two brand sections stay in sync. */ /* "Sunrise" — warm terracotta + cream, high energy */ [data-theme="sunrise"] { --c-black: #fbf1e4; --c-charcoal: #f6e3cd; --c-charcoal-soft: #f1d6b6; --c-gold: #c9702f; --c-gold-light: #e2894a; --c-gold-dark: #a8541f; --c-header-bg: rgba(251, 241, 228, 0.94); --c-text-on-dark: #3a2418; --c-text-on-dark-muted: #8a6a53; --shadow-card-dark: 0 10px 30px rgba(168, 84, 31, 0.16); } /* "Honey" — warm amber + ivory, soft and inviting */ [data-theme="honey"] { --c-black: #fbead0; --c-charcoal: #f6dfb3; --c-charcoal-soft: #f0d093; --c-gold: #d99a2b; --c-gold-light: #e8b552; --c-gold-dark: #a8760f; --c-header-bg: rgba(251, 234, 208, 0.94); --c-text-on-dark: #3d2c0f; --c-text-on-dark-muted: #8a7550; --shadow-card-dark: 0 10px 30px rgba(168, 118, 15, 0.16); } /* "Blush" — warm coral + peach, echoes the Just for Her Spa palette for a unified feel */ [data-theme="blush"] { --c-black: #fcede4; --c-charcoal: #f8dccb; --c-charcoal-soft: #f3cab1; --c-gold: #d9724f; --c-gold-light: #e8916c; --c-gold-dark: #b8563a; --c-header-bg: rgba(252, 237, 228, 0.94); --c-text-on-dark: #4a2a1f; --c-text-on-dark-muted: #8f6656; --shadow-card-dark: 0 10px 30px rgba(184, 86, 58, 0.16); } /* "Marigold" — bright warm yellow-gold, cheerful and sunny */ [data-theme="marigold"] { --c-black: #fef6e0; --c-charcoal: #fbebc0; --c-charcoal-soft: #f6e0a0; --c-gold: #e0a728; --c-gold-light: #f0c455; --c-gold-dark: #b8841a; --c-header-bg: rgba(254, 246, 224, 0.94); --c-text-on-dark: #3d2f0a; --c-text-on-dark-muted: #8a7548; --shadow-card-dark: 0 10px 30px rgba(184, 132, 26, 0.16); } /* "Rosewood" — deep warm rose-red-brown, rich and elegant */ [data-theme="rosewood"] { --c-black: #faeae6; --c-charcoal: #f3d6cf; --c-charcoal-soft: #ecc1b7; --c-gold: #b1543f; --c-gold-light: #c97a63; --c-gold-dark: #8a3c2b; --c-header-bg: rgba(250, 234, 230, 0.94); --c-text-on-dark: #3c1f18; --c-text-on-dark-muted: #8a6156; --shadow-card-dark: 0 10px 30px rgba(138, 60, 43, 0.16); } /* "Dusty Rose" — soft warm pink-mauve, gentle and welcoming */ [data-theme="dustyrose"] { --c-black: #fbeff0; --c-charcoal: #f5dde0; --c-charcoal-soft: #eecbd0; --c-gold: #c17888; --c-gold-light: #d69aa7; --c-gold-dark: #995866; --c-header-bg: rgba(251, 239, 240, 0.94); --c-text-on-dark: #402028; --c-text-on-dark-muted: #8a6670; --shadow-card-dark: 0 10px 30px rgba(153, 88, 102, 0.16); } /* "Champagne" — soft neutral warm sand, the calmest and least saturated option */ [data-theme="champagne"] { --c-black: #faf6ee; --c-charcoal: #f3ecdc; --c-charcoal-soft: #ece0c8; --c-gold: #b08a52; --c-gold-light: #c8a877; --c-gold-dark: #8c6a3a; --c-header-bg: rgba(250, 246, 238, 0.94); --c-text-on-dark: #392f20; --c-text-on-dark-muted: #857858; --shadow-card-dark: 0 10px 30px rgba(140, 106, 58, 0.16); } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); } body { margin: 0; font-family: var(--font-body); color: var(--c-text); background: var(--c-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; } p { margin: 0 0 1em; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .link-accent { color: var(--c-gold-dark); text-decoration: underline; text-underline-offset: 2px; } .link-accent:hover { color: var(--c-gold); } .theme-dark .link-accent { color: var(--c-gold-light); } .theme-dark .link-accent:hover { color: var(--c-gold); } /* ---------- 3. LAYOUT HELPERS ---------- */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section-first { padding-top: 160px; } .theme-dark { background: var(--c-black); color: var(--c-text-on-dark); } .theme-dark .section-lead { color: var(--c-text-on-dark-muted); } .theme-spa { background: linear-gradient( 180deg, color-mix(in srgb, var(--c-gold) 8%, var(--c-white)) 0%, color-mix(in srgb, var(--c-gold) 18%, var(--c-white)) 100% ); } .section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; } .mission-copy { max-width: 720px; margin: 0 auto; text-align: left; } .mission-copy .section-lead { margin-top: 0; } .mission-copy .section-lead + .section-lead { margin-top: 20px; } .section-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); text-transform: uppercase; letter-spacing: 0.02em; } .section-lead { color: var(--c-text-muted); font-size: 1.05rem; margin-top: 12px; } .eyebrow { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--c-gold-dark); margin: 0 0 10px; } .theme-dark .eyebrow, .theme-dark .section-title { color: var(--c-gold-light); } .eyebrow-spa { color: var(--c-gold-dark); } .section-title-script { font-family: var(--font-script); font-style: italic; font-weight: 600; text-transform: none; color: var(--c-gold-dark); letter-spacing: 0; } /* ---------- 4. BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: var(--radius-sm); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92rem; border: 2px solid transparent; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn-small { padding: 10px 20px; font-size: 0.8rem; } .btn-primary { background: var(--c-gold); color: var(--c-text); } .btn-primary:hover { background: var(--c-gold-light); } .btn-outline { background: transparent; border-color: currentColor; color: inherit; } .theme-dark .btn-outline { color: var(--c-text-on-dark); border-color: var(--c-gold); } .btn-outline:hover { background: var(--c-gold); color: var(--c-text); border-color: var(--c-gold); } .btn-spa { background: var(--c-gold); color: var(--c-text); } .btn-spa:hover { background: var(--c-gold-light); } /* ---------- 5. HEADER / NAV ---------- */ .site-header { position: sticky; top: 0; z-index: 500; background: var(--c-header-bg); backdrop-filter: blur(6px); height: var(--header-height); transition: background 0.3s ease; } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-gold); } .brand-name { display: flex; flex-direction: column; line-height: 1; } .brand-name-main { font-family: var(--font-display); color: var(--c-gold); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.06em; } .brand-name-sub { font-family: var(--font-display); color: var(--c-text-on-dark); font-size: 0.62rem; letter-spacing: 0.28em; } .main-nav { flex: 1; display: flex; justify-content: center; } .nav-list { display: flex; gap: 28px; } .nav-link { font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-on-dark-muted); padding: 8px 2px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav-link:hover { color: var(--c-gold-light); border-color: var(--c-gold); } .header-actions { display: flex; align-items: center; gap: 16px; } .header-phone { display: flex; align-items: center; gap: 6px; color: var(--c-text-on-dark); font-size: 0.85rem; } .header-phone:hover { color: var(--c-gold-light); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; } .nav-toggle-bar { width: 24px; height: 2px; background: var(--c-text-on-dark); display: block; } /* ---------- 6. ICONS (inline CSS shapes, no external assets needed) ---------- */ .icon { display: inline-block; width: 18px; height: 18px; position: relative; } .icon-phone::before { content: "\260E"; } .icon-mail::before { content: "\2709"; } .icon-linkedin::before { content: "in"; font-weight: 700; font-family: var(--font-display); } .icon-cart::before { content: "\1F6D2"; } .icon-phone::before, .icon-mail::before, .icon-linkedin::before, .icon-cart::before { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; } /* ---------- 7. HERO ---------- */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; color: var(--c-text-on-dark); overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--c-gold) 18%, transparent), transparent 55%), linear-gradient(135deg, var(--c-black) 0%, var(--c-charcoal) 55%, var(--c-charcoal-soft) 100%); z-index: -1; } .hero-inner { padding: 140px 24px 80px; max-width: 760px; } .hero-eyebrow { color: var(--c-gold-light); } .hero-title { font-size: clamp(2.6rem, 6vw, 4.4rem); text-transform: uppercase; letter-spacing: 0.01em; } .hero-title-accent { color: var(--c-gold); } .hero-subtitle { margin-top: 22px; font-size: 1.1rem; color: var(--c-text-on-dark-muted); max-width: 600px; } .hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; } .hero-badges { display: flex; gap: 32px; margin-top: 56px; flex-wrap: wrap; } .hero-badge { display: flex; flex-direction: column; gap: 4px; } .hero-badge-num { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-gold); } .hero-badge-label { font-size: 0.8rem; color: var(--c-text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- 8. CARDS (shared) ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } .card { background: var(--c-white); border-radius: var(--radius-md); padding: 32px 26px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; position: relative; } .card-title { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; } .card-text { color: var(--c-text-muted); font-size: 0.95rem; flex: 1; } .card-price { font-family: var(--font-display); color: var(--c-gold-dark); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- 9. ABOUT ---------- */ .about-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; } .about-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; object-fit: cover; aspect-ratio: 1/1; } .about-role { font-family: var(--font-display); color: var(--c-gold-dark); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; margin-top: 6px; margin-bottom: 18px; } .about-text { color: var(--c-text-muted); font-size: 1.02rem; } .about-points { margin: 20px 0 28px; display: flex; flex-direction: column; gap: 10px; } .about-point { padding-left: 26px; position: relative; color: var(--c-text); font-weight: 500; } .about-point::before { content: "\2713"; position: absolute; left: 0; color: var(--c-gold-dark); font-weight: 700; } /* ---------- 10. TRAINING (MAD FIT) ---------- */ .training-grid { margin-top: 8px; } .training-card { background: var(--c-charcoal); color: var(--c-text-on-dark); border: 1px solid color-mix(in srgb, var(--c-gold) 25%, transparent); box-shadow: var(--shadow-card-dark); } .training-card .card-text { color: var(--c-text-on-dark-muted); } .card-icon { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--c-gold) 15%, transparent); border: 1px solid var(--c-gold); margin-bottom: 6px; } /* ---------- 11. MAD SPA ---------- */ .spa-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } .spa-grid { margin-top: 28px; } .spa-card { background: var(--c-white); border: 1px solid color-mix(in srgb, var(--c-gold) 20%, transparent); } .spa-media { display: grid; gap: 20px; } .spa-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); object-fit: cover; } .spa-photo-1 { aspect-ratio: 932/533; } .spa-photo-2 { aspect-ratio: 932/535; } /* ---------- 12. SHOP + CART ---------- */ .product-card { align-items: flex-start; } .product-badge { align-self: flex-start; background: var(--c-gold); color: var(--c-black); font-family: var(--font-display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; } .product-badge-spa { background: var(--c-spa-purple); color: var(--c-white); } .btn-add-cart { margin-top: 6px; } .shop-note { text-align: center; color: var(--c-text-muted); margin-top: 40px; font-size: 0.92rem; } .cart-toggle { position: fixed; right: 24px; bottom: 24px; z-index: 600; width: 58px; height: 58px; border-radius: 50%; background: var(--c-black); color: var(--c-gold); border: 2px solid var(--c-gold); box-shadow: var(--shadow-card-dark); display: flex; align-items: center; justify-content: center; } .cart-count { position: absolute; top: -4px; right: -4px; background: var(--c-gold); color: var(--c-black); font-size: 0.7rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .cart-overlay { position: fixed; inset: 0; background: rgba(18,16,17,0.55); z-index: 700; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .cart-overlay.is-open { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 92vw); background: var(--c-white); z-index: 800; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,0.2); } .cart-drawer.is-open { transform: translateX(0); } .cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid #eee; } .cart-title { font-size: 1.2rem; text-transform: uppercase; } .cart-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--c-text-muted); } .cart-items { flex: 1; overflow-y: auto; padding: 12px 24px; display: flex; flex-direction: column; gap: 16px; } .cart-empty { color: var(--c-text-muted); text-align: center; padding: 40px 0; } .cart-line { display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid #f0ece6; padding-bottom: 14px; } .cart-line-info { flex: 1; } .cart-line-name { font-weight: 600; font-size: 0.95rem; } .cart-line-meta { color: var(--c-text-muted); font-size: 0.82rem; margin-top: 2px; } .cart-line-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .cart-qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ddd; background: var(--c-white); font-size: 0.9rem; line-height: 1; } .cart-line-remove { background: none; border: none; color: #b23a3a; font-size: 0.78rem; text-decoration: underline; margin-top: 8px; } .cart-footer { padding: 20px 24px 28px; border-top: 1px solid #eee; } .cart-subtotal-row { display: flex; justify-content: space-between; font-family: var(--font-display); text-transform: uppercase; font-size: 0.85rem; margin-bottom: 14px; } .cart-checkout { width: 100%; } .cart-disclaimer { font-size: 0.75rem; color: var(--c-text-muted); margin-top: 10px; margin-bottom: 0; } /* ---------- 13. FAQ / ACCORDION ---------- */ .faq-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 960px; margin: 0 auto; } .faq-group-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-gold-dark); margin-bottom: 16px; } .accordion-item { border-bottom: 1px solid #eee; } .accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 16px 0; text-align: left; font-size: 0.98rem; font-weight: 600; } .accordion-icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; } .accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; background: var(--c-text); transition: transform 0.2s ease; } .accordion-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .accordion-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: translateX(-50%) scaleY(0); } .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .accordion-panel p { padding-bottom: 16px; color: var(--c-text-muted); font-size: 0.92rem; } /* ---------- 14. CONTACT ---------- */ .contact-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; } .contact-details { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } .contact-detail { display: flex; align-items: center; gap: 12px; font-size: 1rem; } .contact-detail .icon { color: var(--c-gold); } .contact-detail a:hover { color: var(--c-gold-light); } .contact-form { background: var(--c-charcoal-soft); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 18px; } .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-label { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-on-dark-muted); margin-bottom: 6px; } .form-input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--c-text-on-dark) 30%, transparent); background: color-mix(in srgb, var(--c-text-on-dark) 8%, transparent); color: var(--c-text-on-dark); } .form-input::placeholder { color: color-mix(in srgb, var(--c-text-on-dark) 55%, transparent); } .form-input:focus { outline: 2px solid var(--c-gold); outline-offset: 1px; } .contact-submit { margin-top: 6px; } .form-status { font-size: 0.85rem; color: var(--c-gold-light); min-height: 1.2em; margin: 8px 0 0; } /* ---------- 15. FOOTER ---------- */ .site-footer { background: var(--c-black); color: var(--c-text-on-dark-muted); padding: 72px 0 0; } .footer-inner { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; } .footer-tagline { max-width: 280px; font-size: 0.92rem; } .footer-heading { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-gold-light); font-size: 0.85rem; margin-bottom: 16px; } .footer-links ul { display: flex; flex-direction: column; gap: 10px; } .footer-links a:hover { color: var(--c-gold-light); } .footer-newsletter p { font-size: 0.9rem; margin-bottom: 14px; } .newsletter-form { display: flex; gap: 10px; } .newsletter-form .form-input { background: color-mix(in srgb, var(--c-text-on-dark) 8%, transparent); border-color: color-mix(in srgb, var(--c-text-on-dark) 30%, transparent); color: var(--c-text-on-dark); } .footer-bottom { display: flex; justify-content: space-between; padding: 22px 0; font-size: 0.82rem; } /* ---------- 16. RESPONSIVE ---------- */ @media (max-width: 980px) { .about-inner, .spa-inner, .contact-inner { grid-template-columns: 1fr; } .spa-media { order: -1; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 860px) { .main-nav { position: fixed; top: var(--header-height); left: 0; right: 0; background: var(--c-black); border-top: 1px solid rgba(255,255,255,0.08); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .main-nav.is-open { max-height: 480px; } .nav-list { flex-direction: column; gap: 0; padding: 8px 24px 20px; } .nav-item { border-bottom: 1px solid rgba(255,255,255,0.06); } .nav-link { display: block; padding: 14px 0; } .nav-toggle { display: flex; } .header-phone-text { display: none; } .faq-groups { grid-template-columns: 1fr; } } @media (max-width: 600px) { .section { padding: 64px 0; } .hero-inner { padding: 120px 20px 64px; } .form-row-split { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 6px; } }