/* ========================================== TWENTYFIVE SOCIAL - CORE DESIGN SYSTEM ========================================== */ /* Custom Typography & Google Fonts Font files are requested from index.html / 404.html via plus preconnect. Keeping the @import here would re-introduce the render-blocking request chain it replaced. */ :root { /* Color Palette */ --color-primary-blush: #d99ea6; --color-secondary-blush: #deabb2; /* Accessible blush for SMALL TEXT on light grounds only. #d99ea6 measures 2.06:1 on warm ivory, well under the 4.5:1 AA floor. This variant keeps the same hue (352deg) and saturation but drops lightness to 43%, measuring 6.0:1 on ivory and 5.3:1 on the darker packages band. The extra headroom above 4.5:1 is deliberate: these labels sit inside scroll-reveal wrappers whose opacity composites them, so they must still clear AA at the reveal's minimum opacity, not only at full strength. Decorative blush - borders, rules, large display numerals, fills, and blush text on the charcoal footer/CTA/marquee (already ~8.7:1) - deliberately keeps --color-primary-blush. */ --color-blush-text: #9d3d4a; /* Soft blush for LARGE decorative numerals that still have to meet WCAG. The workflow 01/02/03 numerals are rendered text, so axe holds them to the 3:1 large-text floor; the brand blush measured 2.03:1 on the workflow card. Same hue (352deg) and saturation as the brand blush, lightness dropped to 58%, giving 3.45:1 against the card once the reveal's resting opacity is composited in. Deliberately far lighter than --color-blush-text so the numerals stay decorative rather than reading as body copy. */ --color-blush-decor: #c36572; --color-primary-blush-light: rgba(217, 158, 166, 0.45); --color-primary-blush-transparent: rgba(217, 158, 166, 0.08); --color-charcoal: #0c0c0c; --color-charcoal-light: #141414; --color-charcoal-border: rgba(255, 255, 255, 0.08); --color-warm-ivory: #FAF5EE; /* Rich warm parchment ivory */ --color-warm-ivory-dark: #EFE9DE; /* Support contrast shade */ --color-warm-ivory-card: rgba(248, 245, 238, 0.7); --color-warm-ivory-border: rgba(217, 158, 166, 0.25); --color-text-dark: #121212; --color-text-muted: #3d3d3d; /* Confident text contrast */ --color-text-light: #ffffff; --color-text-light-muted: #cccccc; /* Font Families */ --font-serif: 'Cormorant Garamond', serif; --font-sans: 'Plus Jakarta Sans', sans-serif; /* Transitions & Shadows */ --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.25s ease; --shadow-soft: 0 12px 32px rgba(217, 158, 166, 0.12); --shadow-editorial: 0 20px 40px rgba(12, 12, 12, 0.04); } /* Reset & Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--color-warm-ivory); overflow-x: clip; } body { font-family: var(--font-sans); color: var(--color-text-dark); line-height: 1.6; font-size: 1rem; overflow-x: clip; background: radial-gradient(circle at 10% 8%, rgba(222, 171, 178, 0.14) 0%, rgba(250, 245, 238, 0) 50%), radial-gradient(circle at 90% 20%, rgba(217, 158, 166, 0.16) 0%, rgba(250, 245, 238, 0) 50%), radial-gradient(circle at 15% 40%, rgba(222, 171, 178, 0.12) 0%, rgba(250, 245, 238, 0) 50%), radial-gradient(circle at 85% 60%, rgba(217, 158, 166, 0.15) 0%, rgba(250, 245, 238, 0) 50%), radial-gradient(circle at 20% 75%, rgba(222, 171, 178, 0.12) 0%, rgba(250, 245, 238, 0) 50%), radial-gradient(circle at 80% 90%, rgba(217, 158, 166, 0.14) 0%, rgba(250, 245, 238, 0) 50%), linear-gradient(180deg, var(--color-warm-ivory) 0%, #FAF6F0 50%, var(--color-warm-ivory) 100%); } /* ========================================== GRAIN ISOLATION & DYNAMIC BACKGROUND ========================================== */ /* Film Grain Overlay */ .film-grain { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; opacity: 0.022; /* Subtle texture overlay */ mix-blend-mode: overlay; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); animation: grain-animation 8s steps(10) infinite; } @keyframes grain-animation { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-0.5%, -0.5%); } 20% { transform: translate(-1%, 0.5%); } 30% { transform: translate(0.5%, -1%); } 40% { transform: translate(-0.5%, 1.5%); } 50% { transform: translate(-1%, 0.5%); } 60% { transform: translate(0.5%, 1.5%); } 70% { transform: translate(1.5%, -1%); } 80% { transform: translate(-0.5%, -0.5%); } 90% { transform: translate(1%, -1.5%); } } /* Isolation stack so buttons and text remain crisp */ .btn-glossy, .btn-outline, h1, h2, h3, h4, .logo, .nav-link, .marquee-item { position: relative; z-index: 10000; } /* Background Glow - No multiply blending to preserve warm pink tones */ .bg-glow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; pointer-events: none; } .bg-glow-sphere { position: absolute; border-radius: 50%; filter: blur(140px); pointer-events: none; } .bg-glow-1 { width: 55vw; height: 55vw; background: radial-gradient(circle, var(--color-primary-blush) 0%, rgba(217, 158, 166, 0) 70%); top: -10%; right: -5%; opacity: 0.65; animation: float-1 25s ease-in-out infinite alternate; } .bg-glow-2 { width: 60vw; height: 60vw; background: radial-gradient(circle, var(--color-secondary-blush) 0%, rgba(222, 171, 178, 0) 70%); bottom: -15%; left: -5%; opacity: 0.55; animation: float-2 30s ease-in-out infinite alternate; } .bg-glow-3 { width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(217, 158, 166, 0.4) 0%, transparent 60%); top: 40%; left: 30%; opacity: 0.4; animation: float-3 20s ease-in-out infinite alternate; } @keyframes float-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 4%) scale(1.05); } 100% { transform: translate(-4%, -2%) scale(0.95); } } @keyframes float-2 { 0% { transform: translate(0, 0) scale(0.95); } 50% { transform: translate(-3%, 5%) scale(1.05); } 100% { transform: translate(5%, -1%) scale(1); } } @keyframes float-3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(3%, -3%) scale(1.08); } } /* Respect Reduced Motion */ @media (prefers-reduced-motion: reduce) { .film-grain { animation: none; top: 0; left: 0; width: 100%; height: 100%; } .bg-glow-1, .bg-glow-2, .bg-glow-3 { animation: none !important; } } /* ========================================== COMMON COMPONENTS & LAYOUT UTILITIES ========================================== */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 4%; position: relative; } /* Retain hero container at 1400px to keep hero visually unchanged */ .hero .container { max-width: 1400px; } section { padding: clamp(80px, 8vw, 120px) 0; position: relative; z-index: 10; } @media (max-width: 768px) { section { padding: clamp(55px, 6vw, 75px) 0; } } /* Headings */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--color-charcoal); line-height: 1.15; } .section-tag { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-blush-text); margin-bottom: 20px; display: block; } .section-title-wrapper { margin-bottom: 70px; max-width: 700px; } .section-title { font-size: 3.5rem; font-weight: 300; } .section-subtitle { font-family: var(--font-sans); font-size: 1.15rem; color: var(--color-text-muted); margin-top: 15px; max-width: 550px; font-weight: 300; } @media (max-width: 768px) { .section-title { font-size: 2.6rem; } } /* Premium Glossy Buttons - 100% Consistent Layout */ .btn-glossy { display: inline-flex; align-items: center; justify-content: center; padding: 16px 36px; font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; background: linear-gradient(180deg, #222222 0%, #080808 100%); border: 1px solid #000000; border-top-color: rgba(255, 255, 255, 0.18); border-bottom-color: rgba(0, 0, 0, 0.6); border-radius: 50px; cursor: pointer; overflow: hidden; transition: var(--transition-smooth); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.12); text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform; } .btn-glossy::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .btn-glossy::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--color-primary-blush-light) 0%, transparent 60%); opacity: 0; transform: scale(0.5); transition: var(--transition-smooth); mix-blend-mode: screen; pointer-events: none; } .btn-glossy:hover { transform: translate3d(0, -2px, 0); border-color: rgba(217, 158, 166, 0.55); box-shadow: 0 6px 20px rgba(217, 158, 166, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.15); background: linear-gradient(180deg, #222222 0%, #080808 100%); color: #ffffff; } .btn-glossy:hover::after { opacity: 0.65; transform: scale(1); } .btn-glossy:active { transform: translate3d(0, 0, 0); } /* Secondary Button - Subtle blush border */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 14px 34px; font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-charcoal); background: rgba(248, 245, 238, 0.2); border: 1px solid rgba(217, 158, 166, 0.6); border-radius: 50px; cursor: pointer; overflow: hidden; transition: var(--transition-smooth); text-decoration: none; box-shadow: 0 2px 10px rgba(217, 158, 166, 0.05); } .btn-outline::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary-blush-transparent); transform: scaleX(0); transform-origin: right; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; } .btn-outline:hover { color: var(--color-text-dark); border-color: var(--color-secondary-blush); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 158, 166, 0.15); } .btn-outline:hover::after { transform: scaleX(1); transform-origin: left; } /* ========================================== NAVIGATION BAR ========================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; padding: 24px 0; background-color: transparent; border-bottom: 2px solid transparent; transition: var(--transition-smooth); } .header.scrolled { padding: 14px 0; background-color: #FAF5EE; border-bottom: 2px solid var(--color-primary-blush); /* Static pink line */ box-shadow: 0 4px 20px rgba(217, 158, 166, 0.05); } .header-container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .header-action { display: none; } @media (min-width: 992px) { .header-container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 100%; padding: 0 4%; } .logo { grid-column: 1; justify-self: start; } .nav { grid-column: 2; justify-self: center; display: flex; gap: 55px; } .header-action { grid-column: 3; justify-self: end; display: block; } .header-action .btn-book-call { padding: 11px 26px; font-size: 0.8rem; } } .logo { font-family: var(--font-serif); font-size: 1.95rem; font-weight: 300; font-style: italic; /* Entire logo italic */ color: var(--color-charcoal); text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; transition: opacity 0.3s ease; } .logo-word-primary { color: var(--color-text-dark); font-family: var(--font-serif); font-weight: 300; font-style: italic; transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .logo-word-secondary { color: var(--color-primary-blush); font-family: var(--font-serif); font-weight: 300; font-style: italic; transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .logo:hover .logo-word-primary { color: var(--color-primary-blush); } .logo:hover .logo-word-secondary { color: var(--color-text-dark); } .nav { display: flex; align-items: center; gap: 45px; } .nav-link { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-charcoal); text-decoration: none; position: relative; padding: 8px 0; transition: var(--transition-fast); opacity: 0.9; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5px; background-color: var(--color-primary-blush); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Hover affordances are reserved for true mouse pointers so that a tap on a touch device cannot leave a link permanently coloured / underlined. */ @media (hover: hover) and (pointer: fine) { .nav-link:hover { opacity: 1; color: var(--color-primary-blush); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } } .nav-link:focus-visible { opacity: 1; color: var(--color-primary-blush); outline: 2px solid var(--color-blush-text); outline-offset: 4px; border-radius: 4px; } .burger { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; background: transparent; border: none; cursor: pointer; z-index: 10003; } .burger span { display: block; width: 100%; height: 2px; background-color: var(--color-charcoal); border-radius: 2px; transition: var(--transition-fast); } /* NOTE: the legacy <=991px side-drawer nav and the 3-line burger toggle rules that used to live here were removed. They fought the full-screen drawer defined in the "Responsive Scope: viewports up to 1279px" block and left `.burger.toggle span:nth-child(2) { opacity: 0 }` unopposed, which reduced the open state icon to a single hanging diagonal line. See the burger block below. */ /* ========================================== HERO SECTION & COLLAGE ========================================== */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 130px; padding-bottom: 90px; overflow: hidden; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; align-items: center; gap: 30px; } .hero-content { opacity: 0; transform: translateY(20px); animation: fade-settle 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; } .hero-tag { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-blush-text); margin-bottom: 25px; display: block; } .hero-title { font-size: 5.6rem; font-weight: 300; line-height: 1.02; margin-bottom: 30px; letter-spacing: -0.03em; } .hero-title span.italic-brand { font-family: var(--font-serif); font-style: italic; color: var(--color-primary-blush); } .hero-text { font-size: 1.2rem; color: var(--color-text-muted); max-width: 580px; margin-bottom: 45px; font-weight: 300; line-height: 1.75; } /* Collage Container & Coordinates */ .hero-visual { position: relative; width: 100%; height: 540px; display: flex; justify-content: center; align-items: center; opacity: 0; transform: translateY(25px); margin-right: -40px; /* Shift right to bleed off-screen premium-style */ animation: fade-settle 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; } .hero-collage { position: relative; width: 100%; height: 100%; max-width: 500px; transform: scale(1.12); transform-origin: center center; } /* Dotted path lines */ .collage-path-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .path-node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary-blush); box-shadow: 0 0 10px var(--color-primary-blush); z-index: 1; } .node-a { top: 150px; left: 50px; animation: pulse-glow 2s infinite alternate; } .node-b { top: 140px; left: 430px; animation: pulse-glow 2s infinite alternate 0.6s; } .node-c { top: 260px; left: 110px; animation: pulse-glow 2s infinite alternate 1.2s; } .node-d { top: 380px; left: 280px; animation: pulse-glow 2s infinite alternate 0.4s; } .node-e { top: 60px; left: 250px; animation: pulse-glow 2s infinite alternate 0.8s; } @keyframes pulse-glow { 0% { transform: scale(1); box-shadow: 0 0 5px var(--color-primary-blush); opacity: 0.7; } 100% { transform: scale(1.3); box-shadow: 0 0 12px var(--color-primary-blush); opacity: 1; } } /* Floating Card Base Styles */ .collage-card { position: absolute; background: rgba(250, 245, 238, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(217, 158, 166, 0.28); border-radius: 18px; padding: 16px; box-shadow: 0 12px 35px rgba(217, 158, 166, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.4); z-index: 2; will-change: transform; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .collage-card:hover { border-color: rgba(217, 158, 166, 0.6); box-shadow: 0 20px 45px rgba(217, 158, 166, 0.16), inset 0 1px 2px rgba(255, 255, 255, 0.5); z-index: 10; } /* Card 1: Reach Analytics */ .card-reach { top: 20px; left: -10px; width: 190px; } .reach-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .reach-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(217, 158, 166, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-primary-blush); } .reach-icon svg { width: 16px; height: 16px; } .reach-info { display: flex; flex-direction: column; } .reach-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .reach-val { font-size: 1.15rem; font-weight: 700; color: var(--color-charcoal); line-height: 1.1; } .reach-percentage { font-size: 0.72rem; font-weight: 700; color: #55b760; margin-left: auto; } .reach-chart { width: 100%; height: 42px; margin-top: 5px; overflow: visible; } /* Card 2: Editorial Quote Card (Dark Glassmorphic) */ .card-quote { top: -20px; right: 20px; width: 210px; padding: 24px; background: rgba(12, 12, 12, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.12); } .card-quote:hover { border-color: rgba(217, 158, 166, 0.45); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15); } .quote-mark { font-family: var(--font-serif); font-size: 3.5rem; line-height: 1; color: var(--color-primary-blush); display: block; margin-top: -15px; margin-bottom: -15px; opacity: 0.85; } .quote-text { font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; line-height: 1.35; margin-bottom: 12px; font-weight: 300; letter-spacing: -0.01em; } .quote-author { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary-blush); } /* Card 3: Reel Video Preview Frame */ .card-reel { top: 140px; left: -50px; width: 160px; padding: 12px; } .reel-header { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; padding-left: 4px; } .reel-video-container { position: relative; width: 100%; aspect-ratio: 0.72; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #181515 0%, #0a0909 100%); border: 1px solid rgba(217, 158, 166, 0.15); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6); } .reel-glass-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .art-sphere-1 { position: absolute; top: 20%; left: 15%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, var(--color-primary-blush) 20%, var(--color-secondary-blush) 100%); filter: blur(8px); opacity: 0.85; } .art-sphere-2 { position: absolute; bottom: 15%; right: 10%; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, #FAF5EE 10%, var(--color-primary-blush) 100%); filter: blur(12px); opacity: 0.6; } .art-backdrop-blur { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 12px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2); z-index: 2; } .art-shadow-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.4) 100%); z-index: 3; pointer-events: none; } .reel-play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 4; } .reel-play-button { width: 44px; height: 44px; border-radius: 50%; background: rgba(250, 245, 238, 0.95); border: none; display: flex; align-items: center; justify-content: center; color: var(--color-charcoal); box-shadow: 0 6px 15px rgba(0,0,0,0.3); cursor: pointer; transition: var(--transition-fast); } .reel-play-button:hover { transform: scale(1.1); background: #ffffff; color: var(--color-primary-blush); } .reel-play-button svg { width: 16px; height: 16px; margin-left: 2px; } .reel-stats-bar { position: absolute; bottom: 10px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 12px; z-index: 4; } .stat-item { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 600; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .stat-item svg { width: 12px; height: 12px; } /* Card 4: Engagement Rate */ .card-engagement { top: 320px; left: -30px; width: 140px; text-align: center; padding: 16px; } .engagement-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 12px; } .engagement-circle-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto 10px auto; } .engagement-ring { transform: rotate(-90deg); width: 100%; height: 100%; } .ring-bg { fill: none; stroke: rgba(217, 158, 166, 0.15); } .ring-progress { fill: none; stroke: var(--color-primary-blush); stroke-linecap: round; } .engagement-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.15rem; font-weight: 700; color: var(--color-charcoal); } .engagement-subtext { font-size: 0.72rem; font-weight: 700; color: #55b760; } /* Card 5: Content Plan Card */ .card-plan { top: 80px; right: -40px; width: 245px; } .plan-header { display: flex; align-items: center; gap: 8px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 12px; border-bottom: 1px solid rgba(217, 158, 166, 0.15); padding-bottom: 8px; } .plan-icon { color: var(--color-primary-blush); width: 14px; height: 14px; } .plan-icon svg { width: 14px; height: 14px; } .plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .plan-day { display: flex; flex-direction: column; gap: 6px; } .day-name { font-size: 0.6rem; font-weight: 700; text-align: center; color: var(--color-text-muted); margin-bottom: 2px; } .plan-item { width: 100%; min-height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .item-glass-art { width: 100%; height: 24px; border-radius: 6px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.35); } .item-glass-art.art-blush { background: linear-gradient(135deg, rgba(217, 158, 166, 0.8) 0%, rgba(222, 171, 178, 0.4) 100%); box-shadow: 0 4px 10px rgba(217, 158, 166, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .item-glass-art.art-ivory { background: linear-gradient(135deg, rgba(250, 245, 238, 0.9) 0%, rgba(239, 233, 222, 0.5) 100%); border-color: rgba(217, 158, 166, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .item-glass-art.art-charcoal { background: linear-gradient(135deg, rgba(12, 12, 12, 0.8) 0%, rgba(30, 30, 30, 0.5) 100%); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .item-glass-art.art-blush-light { background: linear-gradient(135deg, rgba(217, 158, 166, 0.4) 0%, rgba(217, 158, 166, 0.15) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); } .item-glass-art.art-ivory-light { background: linear-gradient(135deg, rgba(250, 245, 238, 0.5) 0%, rgba(250, 245, 238, 0.15) 100%); border-color: rgba(217, 158, 166, 0.15); } .item-glass-art.art-charcoal-light { background: linear-gradient(135deg, rgba(12, 12, 12, 0.4) 0%, rgba(12, 12, 12, 0.15) 100%); border-color: rgba(255, 255, 255, 0.05); } .plan-item.item-text-accent { background: var(--color-primary-blush-transparent); border: 1px solid rgba(217, 158, 166, 0.25); font-size: 0.5rem; font-weight: 700; color: var(--color-primary-blush); text-align: center; line-height: 1.1; padding: 4px; } .plan-item.item-text-post { background: var(--color-charcoal); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.45rem; font-weight: 700; color: var(--color-primary-blush); text-align: center; line-height: 1.1; padding: 4px; } /* Card 6: Audience Growth */ .card-growth { bottom: -15px; left: 15px; width: 210px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; } .growth-info { display: flex; flex-direction: column; } .growth-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .growth-val { font-size: 1.25rem; font-weight: 700; color: var(--color-charcoal); line-height: 1.1; } .growth-chart { width: 90px; height: 30px; overflow: visible; } /* Card 7: Top Performing Post */ .card-top-post { bottom: -30px; right: 10px; width: 220px; } /* Card 6: Feed Grid Planner Card */ .card-grid-preview { top: 250px; right: -25px; width: 200px; padding: 14px; } .grid-preview-header { display: flex; align-items: center; gap: 8px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 12px; border-bottom: 1px solid rgba(217, 158, 166, 0.15); padding-bottom: 8px; } .grid-preview-header .grid-icon { color: var(--color-primary-blush); width: 14px; height: 14px; } .grid-preview-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .slot-item { aspect-ratio: 1; background: rgba(217, 158, 166, 0.08); border-radius: 8px; border: 1px solid rgba(217, 158, 166, 0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .slot-art { width: 60%; height: 60%; opacity: 0.85; } .slot-art.art-circle { border-radius: 50%; background: radial-gradient(circle, var(--color-primary-blush) 30%, var(--color-secondary-blush) 100%); } .slot-art.art-rect { border-radius: 3px; background: linear-gradient(135deg, var(--color-warm-ivory) 0%, var(--color-primary-blush) 100%); } .slot-art.art-tri { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 20px solid var(--color-secondary-blush); background: none; } .slot-art.art-lines { display: flex; flex-direction: column; justify-content: space-around; width: 70%; height: 70%; } .slot-art.art-lines::before, .slot-art.art-lines::after { content: ''; height: 2px; width: 100%; background-color: var(--color-primary-blush); border-radius: 2px; } .slot-art.art-cross { position: relative; } .slot-art.art-cross::before, .slot-art.art-cross::after { content: ''; position: absolute; background-color: var(--color-primary-blush); } .slot-art.art-cross::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .slot-art.art-cross::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); } .slot-art.art-dots { display: flex; flex-wrap: wrap; gap: 3px; width: 80%; height: 80%; justify-content: center; align-content: center; } .slot-art.art-dots::before, .slot-art.art-dots::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-secondary-blush); } .top-post-header { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 12px; } .top-post-body { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .top-post-thumb { width: 75px; height: 55px; border-radius: 8px; overflow: hidden; position: relative; background: linear-gradient(45deg, #161213 0%, #2b1f21 100%); border: 1px solid rgba(217, 158, 166, 0.15); flex-shrink: 0; } .thumb-glass-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.02); } .thumb-glass-art::before { content: ''; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, var(--color-primary-blush) 0%, transparent 70%); filter: blur(5px); position: absolute; top: 10px; left: 10px; } .thumb-glass-art::after { content: ''; position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; border-radius: 5px; background: rgba(250, 245, 238, 0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .top-post-metrics { display: flex; flex-direction: column; gap: 6px; } .metric-item { display: flex; flex-direction: column; } .m-label { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); } .m-val { font-size: 0.85rem; font-weight: 700; color: var(--color-charcoal); line-height: 1.1; } .top-post-chart { width: 100%; height: 20px; overflow: visible; border-top: 1px solid rgba(217, 158, 166, 0.15); padding-top: 8px; } /* NOTE: the legacy responsive collage rules that used to live here were removed. They set arbitrary per-breakpoint `transform: scale(0.85 / 0.7 / 0.55)` values on `.hero-collage` (the element that now carries the decorative float transform) and hid `.hero-visual` outright below 421px. The collage stage/scale/motion layers are now defined once, in the "RESPONSIVE HERO COLLAGE ARCHITECTURE" block. */ /* ========================================== BRAND KEYWORD MARQUEE (ELEGANT BLACK BACKGROUND) ========================================== */ .marquee-section { padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid rgba(217, 158, 166, 0.22); border-bottom: 1px solid rgba(217, 158, 166, 0.22); overflow: hidden; background-color: var(--color-charcoal); /* Turn black/charcoal */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .marquee-container { overflow: hidden; display: flex; width: 100%; } .marquee-content { display: flex; flex-shrink: 0; width: max-content; animation: marquee-scroll 32s linear infinite; will-change: transform; } .marquee-item { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-style: italic; font-weight: 300; color: var(--color-primary-blush); /* Primary Blush */ padding: 0 clamp(20px, 3vw, 40px); display: inline-flex; align-items: center; letter-spacing: -0.01em; } .marquee-item:nth-child(even) { font-family: var(--font-sans); font-style: normal; font-weight: 300; text-transform: uppercase; font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: 0.18em; opacity: 0.85; color: var(--color-warm-ivory); /* Warm Ivory contrast */ } .marquee-item::after { content: '•'; margin-left: clamp(40px, 6vw, 80px); font-style: normal; font-family: var(--font-sans); color: var(--color-secondary-blush); opacity: 0.6; } @keyframes marquee-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } /* Continuous horizontal motion with no pause affordance. Under reduced motion it renders statically; the duplicated second strip is hidden so the row does not read as repeated words sitting still. */ @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; transform: none; will-change: auto; } .marquee-content[aria-hidden="true"] { display: none; } } @media (max-width: 768px) { .marquee-item { font-size: 2rem; } .marquee-item:nth-child(even) { font-size: 1.4rem; letter-spacing: 0.12em; } } .values-section { background-color: #FAF5EE; /* Warm ivory background */ color: var(--color-text-dark); padding: clamp(90px, 9.5vw, 140px) 0; overflow: visible; /* Crucial to allow sticky positioning to function */ } .values-layout-grid { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(480px, 1.25fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .values-sticky-col { position: -webkit-sticky; position: sticky; top: clamp(120px, 15vh, 180px); align-self: start; will-change: transform; } .values-sticky-col .section-title { max-width: 520px; font-size: clamp(40px, 4.2vw, 64px); line-height: 1.05; font-weight: 300; margin-top: 15px; color: var(--color-charcoal); letter-spacing: -0.02em; } .values-heading-decoration { width: 65px; height: 1.5px; background-color: var(--color-primary-blush); margin-top: 25px; } .values-panels-col { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); } /* Core Value Pillars Reveal Animations */ .values-reveal-heading, .values-reveal-pillar { opacity: 1; transform: none; } .values-panel::before { transform: scaleX(1); } /* Reveal opacity is split by role. CSS opacity on a wrapper composites everything inside it, so the wrapper can never be more transparent than its least forgiving descendant. Measured against the rendered colours, the binding element is .section-tag (#a94250 on ivory = 5.4:1 at full strength): below 0.91 it drops under the 4.5:1 AA floor. The old 0.35 resting value put every word in this section at roughly 1.7:1 while it was on screen. So readable content now fades only across a safe range, and the visible drama of the reveal is carried by the decorative layer below, which is free to fade from nothing. Movement, timing and reversibility are untouched. */ .motion-ready .values-reveal-heading, .motion-ready .values-reveal-pillar { opacity: var(--values-opacity, 0.97); transform: translate3d(var(--values-translate-x, -40px), 0, 0); will-change: transform, opacity; } /* Decorative layer — no text-contrast obligation, so it keeps the full fade. */ .motion-ready .value-card-num { opacity: calc(0.45 * var(--values-decor-opacity, 0)); } .motion-ready .values-heading-decoration { opacity: var(--values-decor-opacity, 0); } .motion-ready .values-panel::before { transform: scaleX(var(--pillar-line-scale, 0)); } /* ======================================================== VALUES PANELS DESIGN ======================================================== */ .values-panel { background-color: rgba(250, 246, 240, 0.72); border: 1px solid rgba(217, 158, 166, 0.32); border-radius: 12px; padding: clamp(36px, 4vw, 54px); position: relative; } /* Asymmetric editorial padding variations - max 6px variance */ #valueCard1 { padding: clamp(38px, 4.2vw, 56px) clamp(38px, 4.2vw, 56px) clamp(38px, 4.2vw, 56px) clamp(34px, 3.8vw, 50px); margin-left: 0; margin-right: 0; } #valueCard2 { padding: clamp(34px, 3.8vw, 50px) clamp(34px, 3.8vw, 50px) clamp(38px, 4.2vw, 56px) clamp(38px, 4.2vw, 56px); margin-left: 24px; } #valueCard3 { padding: clamp(38px, 4.2vw, 56px) clamp(36px, 4vw, 54px) clamp(34px, 3.8vw, 50px) clamp(36px, 4vw, 54px); margin-left: -12px; margin-right: 12px; } /* Thin blush accent line drawing on scroll */ .values-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1.5px; background-color: rgba(217, 158, 166, 0.45); transform-origin: left center; will-change: transform; } /* soft accent variation on pillar 02 */ .values-panel--accent { background-color: rgba(217, 158, 166, 0.07); border-color: rgba(217, 158, 166, 0.38); } .value-card-num { font-family: var(--font-serif); font-size: clamp(3.8rem, 5vw, 5rem); color: var(--color-primary-blush); opacity: 0.45; line-height: 1; margin-bottom: 20px; display: block; } .value-card-title { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400; margin-bottom: 12px; color: var(--color-charcoal); } .value-card-desc { font-size: 1.02rem; color: var(--color-text-dark); line-height: 1.75; font-weight: 300; } @media (max-width: 1200px) { .values-layout-grid { grid-template-columns: minmax(280px, 0.85fr) minmax(440px, 1.25fr); gap: 40px; } } @media (max-width: 991px) { .values-layout-grid { grid-template-columns: 1fr; gap: 45px; } .values-sticky-col { position: relative; top: auto; } .values-panels-col { gap: 30px; } #valueCard1, #valueCard2, #valueCard3 { padding: clamp(24px, 4vw, 36px); margin-left: 0; margin-right: 0; } } /* ========================================== SERVICES SECTION (UPGRADED EDITORIAL CARDS) ========================================== */ .services-section { background-color: #171414; /* Warm charcoal, premium dark look */ padding-top: clamp(90px, 8vw, 125px); padding-bottom: clamp(70px, 7vw, 105px); overflow: visible; /* Allow 3D card scale overflows */ position: relative; } /* Restrained blush glow behind the carousel */ .services-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 80vw); height: min(400px, 60vh); background: radial-gradient(circle, rgba(217, 158, 166, 0.08) 0%, rgba(21, 19, 19, 0) 70%); pointer-events: none; z-index: 1; } /* Heading contrasts in dark section */ .services-section .section-tag { color: var(--color-primary-blush); } .services-section .section-title { color: var(--color-warm-ivory) !important; } /* Inactive cards styling on dark background */ .services-section .service-card:not([data-active="true"]) { background: rgba(28, 25, 25, 0.85) !important; border-color: rgba(217, 158, 166, 0.22) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; } .services-section .service-card:not([data-active="true"]) .service-card-title { color: var(--color-warm-ivory) !important; } .services-section .service-card:not([data-active="true"]) .service-card-number { color: rgba(217, 158, 166, 0.25) !important; } .services-section .service-card:not([data-active="true"]) .service-icon-wrapper svg { color: rgba(217, 158, 166, 0.7) !important; } .services-section .service-card:not([data-active="true"]) .service-card-graphic svg rect, .services-section .service-card:not([data-active="true"]) .service-card-graphic svg line { stroke: rgba(217, 158, 166, 0.2) !important; } /* Active card stays cream */ .services-section .service-card[data-active="true"] { background-color: #FAF5EE !important; border-color: rgba(217, 158, 166, 0.65) !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important; } /* Navigation controls contrast */ .services-section .carousel-nav-btn { background: rgba(28, 25, 25, 0.95); border: 1.5px solid rgba(217, 158, 166, 0.35); color: var(--color-warm-ivory); } .services-section .carousel-nav-btn:hover { background: var(--color-primary-blush); color: var(--color-charcoal); border-color: var(--color-primary-blush); } .services-section .carousel-dot { background-color: rgba(255, 255, 255, 0.22); } .services-section .carousel-dot.active { background-color: var(--color-primary-blush); } /* Services Coverflow Carousel Layout */ .services-carousel-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1100px; margin: 40px auto 30px auto; perspective: 1200px; transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); } .services-carousel-viewport { position: relative; width: 100%; height: clamp(540px, 48vh, 600px); overflow: visible; } .services-carousel-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; cursor: grab; } .services-carousel-track:active { cursor: grabbing; } /* Service Card Core Styles */ .service-card { --offset: 0; --abs-offset: 0; --direction: 0; position: absolute; top: 50%; left: 50%; width: clamp(380px, 45vw, 550px); max-width: 90%; background: rgba(250, 246, 240, 0.95); border: 1.5px solid rgba(217, 158, 166, 0.3); border-radius: 24px; padding: 40px 35px; box-shadow: 0 12px 32px rgba(217, 158, 166, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; min-height: 180px; /* 3D transforms with responsive side spacing - active card scale(1.05) and adjacent cards closer */ transform: translate(-50%, -50%) translate3d(calc(var(--offset) * clamp(120px, 13vw, 150px)), 0, calc(var(--abs-offset) * -150px)) rotateY(calc(var(--offset) * -18deg)) scale(calc(1.05 - var(--abs-offset) * 0.15)); z-index: calc(10 - var(--abs-offset)); opacity: var(--service-opacity, 1); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; cursor: pointer; user-select: none; overflow: hidden; } /* Inactive cards should hide far off ones completely */ .service-card[style*="--abs-offset: 3"], .service-card[style*="--abs-offset: 4"], .service-card[style*="--abs-offset: 5"] { opacity: 0; pointer-events: none; } /* Inactive cards hover treatment */ .service-card:not([data-active="true"]):hover { border-color: rgba(217, 158, 166, 0.5); background-color: #FAF5EE; box-shadow: 0 15px 35px rgba(217, 158, 166, 0.1); } /* Active State Card */ .service-card[data-active="true"] { border-color: rgba(217, 158, 166, 0.65); background-color: #FAF5EE; box-shadow: 0 25px 60px rgba(217, 158, 166, 0.18); cursor: default; pointer-events: auto; } .service-card-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } /* Compact layout inside cards */ .service-card-compact { display: flex; flex-direction: column; position: relative; z-index: 2; } .service-card-number { font-family: var(--font-serif); font-size: 3.5rem; line-height: 1; color: rgba(217, 158, 166, 0.25); font-weight: 300; margin-bottom: 5px; transition: color 0.4s ease; } .service-card[data-active="true"] .service-card-number { color: rgba(217, 158, 166, 0.55); } .service-icon-wrapper { margin-bottom: 20px; color: var(--color-primary-blush); background: rgba(217, 158, 166, 0.1); width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(217, 158, 166, 0.4); box-shadow: 0 4px 12px rgba(217, 158, 166, 0.05); transition: var(--transition-smooth); } .service-card:hover .service-icon-wrapper { transform: scale(1.05); border-color: var(--color-primary-blush); } .service-icon-svg { width: 24px; height: 24px; stroke-width: 1.5; transition: var(--transition-smooth); } .service-card-compact .service-card-title { font-size: 1.8rem; font-weight: 400; letter-spacing: -0.01em; margin: 10px 0 0 0; color: var(--color-text-dark); } .service-card-compact .service-card-title::after { content: ''; display: block; width: 40px; height: 1.5px; background-color: var(--color-primary-blush); margin-top: 15px; transition: var(--transition-smooth); } .service-card:hover .service-card-title::after { width: 60px; } .service-card[data-active="true"] .service-card-title::after { width: 75px; background-color: var(--color-secondary-blush); } /* Expanded layout (Active only) */ .service-card-expanded-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0; position: relative; z-index: 2; overflow: hidden; } .service-card[data-active="true"] .service-card-expanded-wrapper { grid-template-rows: 1fr; opacity: 1; } .service-card-expanded { min-height: 0; } .service-card-desc { font-size: 0.98rem; color: var(--color-text-muted); font-weight: 300; line-height: 1.6; margin-top: 20px; } .service-benefits { list-style: none; padding: 0; margin: 20px 0 0 0; display: flex; flex-direction: column; gap: 12px; } .service-benefits li { font-size: 0.9rem; font-weight: 400; color: var(--color-text-dark); display: flex; align-items: center; gap: 10px; } .benefit-check { width: 14px; height: 14px; color: var(--color-primary-blush); flex-shrink: 0; } /* Abstract Graphic Accent */ .service-card-graphic { position: absolute; bottom: 25px; right: 25px; width: 100px; height: 100px; opacity: 0.15; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; z-index: 1; } .service-card[data-active="true"] .service-card-graphic { opacity: 0.45; transform: scale(1.05); } .abstract-graphic-svg { width: 100%; height: 100%; } .abstract-graphic-svg stroke { stroke: var(--color-primary-blush); } /* Subtle Card CTA */ /* Now a real