{"id":7,"date":"2026-06-11T07:19:48","date_gmt":"2026-06-11T07:19:48","guid":{"rendered":"https:\/\/standoutsociety.net\/?page_id=7"},"modified":"2026-07-03T11:21:16","modified_gmt":"2026-07-03T11:21:16","slug":"home","status":"publish","type":"page","link":"https:\/\/standoutsociety.net\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Standout Society | Premium Creative Agency<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Inter:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- PREMIUM DARK HIGH-CONTRAST SYSTEM --- *\/\r\n :root {\r\n --bg-pure-black: #000000;\r\n --bg-pitch-dark: #070708;\r\n --bg-card: #0f1012;\r\n --text-pure-white: #ffffff;\r\n --text-muted-slate: #8e9196;\r\n --text-dark-grey: #4a4b4f;\r\n --accent-border: #1f2124;\r\n --font-display: 'Anton', sans-serif;\r\n --font-body: 'Inter', sans-serif;\r\n --transition-premium: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n \/* --- GLOBAL RESET & SMOOTH SCROLL --- *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-pure-black);\r\n color: var(--text-pure-white);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 32px;\r\n }\r\n\r\n section {\r\n padding: 140px 0;\r\n border-bottom: 1px solid var(--accent-border);\r\n position: relative;\r\n }\r\n\r\n \/* --- PREMIUM BUTTONS --- *\/\r\n .btn-group {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n margin-top: 48px;\r\n }\r\n\r\n .btn {\r\n position: relative;\r\n padding: 18px 40px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n background: transparent;\r\n color: #fff;\r\n overflow: hidden;\r\n }\r\n\r\n .btn-primary {\r\n background: #ffffff;\r\n color: #000000;\r\n border: 1px solid #ffffff;\r\n }\r\n\r\n .btn-primary:hover {\r\n background: transparent;\r\n color: #ffffff;\r\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .btn-discovery {\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n .btn-discovery:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n color: gray;\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: #fff;\r\n }\r\n\r\n .btn-secondary:hover {\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* --- TYPOGRAPHY PATTERNS --- *\/\r\n .section-tag {\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n letter-spacing: 5px;\r\n color: var(--text-muted-slate);\r\n margin-bottom: 24px;\r\n display: block;\r\n font-weight: 700;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(3rem, 7vw, 5.5rem);\r\n line-height: 1.1;\r\n text-transform: uppercase;\r\n letter-spacing: -0.01em;\r\n margin-bottom: 40px;\r\n font-weight: 500;\r\n }\r\n\r\n .text-highlight {\r\n color: var(--text-dark-grey);\r\n }\r\n\r\n \/* --- HERO SECTION --- *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n background: linear-gradient(to right, rgba(0, 0, 0, 0.98) 30%, rgba(0, 0, 0, 0.8) 100%),\r\n url('http:\/\/standoutsociety.net\/wp-content\/uploads\/2026\/06\/9d6ccf9d52f7c6163995c66ec5d46791.jpg') no-repeat center center\/cover;\r\n padding-top: 105px;\r\n }\r\n\r\n .hero-content {\r\n max-width: 950px;\r\n }\r\n\r\n .hero .section-title {\r\n font-size: clamp(3.8rem, 8vw, 7rem);\r\n }\r\n\r\n .hero-sub {\r\n font-size: clamp(1rem, 2vw, 1.30rem);\r\n color: var(--text-muted-slate);\r\n max-width: 800px;\r\n font-weight: 300;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* --- TRUST \/ COUNTERS --- *\/\r\n .trust-grid {\r\n display: grid;\r\n grid-template-columns: 0.8fr 1.2fr;\r\n gap: 120px;\r\n align-items: flex-start;\r\n }\r\n\r\n .counters-box {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 2px;\r\n background: var(--accent-border);\r\n border: 1px solid var(--accent-border);\r\n }\r\n\r\n .counter-card {\r\n background: var(--bg-pure-black);\r\n padding: 60px 40px;\r\n overflow: hidden;\r\n }\r\n\r\n .counter-num {\r\n font-family: 'Anton';\r\n font-size: 64px;\r\n margin-bottom: 10px;\r\n letter-spacing: -1px;\r\n }\r\n\r\n .counter-label {\r\n font-size: 11px;\r\n color: var(--text-muted-slate);\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n }\r\n\r\n \/* --- FIXED: Counter Animation Classes (No conflict with header toggle) --- *\/\r\n .card-animate {\r\n opacity: 0;\r\n transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .ltr {\r\n transform: translateX(-10px);\r\n }\r\n .rtl {\r\n transform: translateX(10px);\r\n }\r\n\r\n \/* \ud83d\udc47 Changed from .active to .counter-visible to avoid conflict *\/\r\n .counter-visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n \/* --- SERVICES --- *\/\r\n .services-layout {\r\n display: grid;\r\n grid-template-columns: 1.2fr 1fr;\r\n gap: 80px;\r\n align-items: start;\r\n }\r\n\r\n .services-list {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .service-row {\r\n border-bottom: 1px solid var(--accent-border);\r\n padding: 40px 0;\r\n display: grid;\r\n grid-template-columns: 60px 1fr;\r\n transition: var(--transition-premium);\r\n }\r\n\r\n \/* \ud83d\udc47 FIX 3: \u0d85\u0db1\u0dca\u0dad\u0dd2\u0db8 Service \u0d91\u0d9a\u0dda Border \u0d91\u0d9a \u0d85\u0dba\u0dd2\u0db1\u0dca \u0d9a\u0dbb\u0dba\u0dd2 *\/\r\n .service-row:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .service-row:hover {\r\n border-bottom-color: var(--text-pure-white);\r\n }\r\n \/* Hover \u0d91\u0d9a\u0dad\u0dca \u0d85\u0db1\u0dca\u0dad\u0dd2\u0db8 \u0d91\u0d9a\u0da7 \u0db1\u0ddc\u0dba\u0dd9\u0daf\u0dd9\u0db1 \u0dbd\u0dd9\u0dc3 \u0dc4\u0dd0\u0da9\u0d9c\u0dd0\u0dc3\u0dd3\u0db8\u0da7 (optional) *\/\r\n .service-row:last-child:hover {\r\n border-bottom-color: transparent;\r\n }\r\n\r\n .service-index {\r\n font-family: var(--font-display);\r\n font-size: 1.5rem;\r\n color: var(--text-dark-grey);\r\n padding-top: 4px;\r\n }\r\n\r\n .service-name {\r\n font-size: 24px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .service-text {\r\n color: var(--text-muted-slate);\r\n font-size: 15px;\r\n max-width: 520px;\r\n }\r\n\r\n .services-sticky-wrapper {\r\n position: sticky;\r\n top: 160px;\r\n width: 100%;\r\n height: 650px;\r\n border: 1px solid var(--accent-border);\r\n overflow: hidden;\r\n }\r\n\r\n .services-sticky-video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: grayscale(100%) contrast(110%);\r\n }\r\n\r\n \/* --- PROCESS \u2014 FULL FLEX LAYOUT --- *\/\r\n .process-container {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n align-items: stretch;\r\n gap: 24px;\r\n padding-top: 24px;\r\n width: 100%;\r\n }\r\n\r\n .process-item {\r\n flex: 1 1 0;\r\n min-width: 150px;\r\n max-width: 220px;\r\n position: relative;\r\n z-index: 1;\r\n background: var(--bg-card);\r\n border: 1px solid var(--accent-border);\r\n border-radius: 1.5rem;\r\n padding: 2rem 1.25rem 1.75rem;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n transition: var(--transition-premium);\r\n cursor: default;\r\n opacity: 0;\r\n animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n .process-item:hover {\r\n transform: translateY(-8px);\r\n border-color: var(--text-pure-white);\r\n background: var(--bg-pure-black);\r\n }\r\n\r\n .process-item:nth-child(1) {\r\n animation-delay: 0.05s;\r\n }\r\n .process-item:nth-child(2) {\r\n animation-delay: 0.12s;\r\n }\r\n .process-item:nth-child(3) {\r\n animation-delay: 0.19s;\r\n }\r\n .process-item:nth-child(4) {\r\n animation-delay: 0.26s;\r\n }\r\n .process-item:nth-child(5) {\r\n animation-delay: 0.33s;\r\n }\r\n\r\n @keyframes fadeUp {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .process-id {\r\n font-family: var(--font-display);\r\n font-size: 2.4rem;\r\n font-weight: 400;\r\n line-height: 1;\r\n color: var(--text-dark-grey);\r\n margin-bottom: 0.5rem;\r\n letter-spacing: 0.04em;\r\n transition: var(--transition-premium);\r\n }\r\n\r\n .process-item:hover .process-id {\r\n color: var(--text-pure-white);\r\n }\r\n\r\n .process-icon {\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n border-radius: 50%;\r\n background: var(--bg-pitch-dark);\r\n border: 1px solid var(--accent-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 1.25rem;\r\n color: var(--text-muted-slate);\r\n transition: var(--transition-premium);\r\n flex-shrink: 0;\r\n }\r\n\r\n .process-icon svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n stroke: currentColor;\r\n stroke-width: 1.75;\r\n fill: none;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .process-item:hover .process-icon {\r\n color: var(--text-pure-white);\r\n border-color: var(--text-pure-white);\r\n background: var(--bg-card);\r\n }\r\n\r\n .process-title {\r\n font-family: var(--font-display);\r\n font-size: 1.2rem;\r\n font-weight: 400;\r\n text-transform: uppercase;\r\n letter-spacing: 0.04em;\r\n color: var(--text-pure-white);\r\n margin-bottom: 0.4rem;\r\n }\r\n\r\n .process-desc {\r\n font-size: 0.85rem;\r\n font-weight: 400;\r\n color: var(--text-muted-slate);\r\n line-height: 1.5;\r\n max-width: 16ch;\r\n transition: var(--transition-premium);\r\n }\r\n\r\n .process-item:hover .process-desc {\r\n color: var(--text-pure-white);\r\n }\r\n\r\n \/* --- WHO WE WORK WITH (ICON CARDS) --- *\/\r\n .orb-grid {\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n margin-top: 60px;\r\n }\r\n\r\n .orb:nth-child(even) {\r\n margin-top: 70px;\r\n }\r\n\r\n .orb {\r\n width: 150px;\r\n height: 150px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n border-radius: 50%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n position: relative;\r\n cursor: pointer;\r\n transition: 0.5s;\r\n box-shadow: 0 0 15px rgba(255,255,255,0.1),\r\n inset 0 0 15px rgba(255,255,255,0.05);\r\n flex-shrink: 0;\r\n }\r\n\r\n .orb::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n box-shadow: 10px -20px 0 rgba(255,255,255,0.1),\r\n -10px 30px 0 rgba(255,255,255,0.05),\r\n 30px 10px 0 rgba(255,255,255,0.08),\r\n -30px -10px 0 rgba(255,255,255,0.05);\r\n pointer-events: none;\r\n }\r\n\r\n .orb:hover {\r\n border-color: #fff;\r\n box-shadow: 0 0 40px rgba(255,255,255,0.3);\r\n transform: scale(1.05);\r\n }\r\n\r\n .icon { font-size: 1.5rem; margin-bottom: 10px; }\r\n .text { font-size: 0.9rem; font-weight: 600; line-height: 1.2; padding: 0 5px; }\r\n\r\n \/* --- WHY STANDOUT \u2014 ANIMATED CARDS --- *\/\r\n .why-container {\r\n display: grid;\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: 80px;\r\n }\r\n\r\n .why-lead-text {\r\n font-size: 26px;\r\n font-weight: 300;\r\n line-height: 1.5;\r\n color: var(--text-muted-slate);\r\n }\r\n\r\n .why-lead-text strong {\r\n color: var(--text-pure-white);\r\n }\r\n\r\n .why-points-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .why-card {\r\n background: var(--bg-card);\r\n width: 320px;\r\n border: 1px solid var(--accent-border);\r\n border-radius: 12px;\r\n padding: 18px 14px 14px;\r\n transition: var(--transition-premium);\r\n cursor: default;\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),\r\n transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),\r\n border-color 0.4s ease,\r\n background 0.4s ease,\r\n box-shadow 0.4s ease;\r\n }\r\n\r\n .why-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 70%);\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n }\r\n\r\n .why-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .why-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .why-card:nth-child(1) {\r\n transition-delay: 0.04s;\r\n }\r\n .why-card:nth-child(2) {\r\n transition-delay: 0.10s;\r\n }\r\n .why-card:nth-child(3) {\r\n transition-delay: 0.16s;\r\n }\r\n .why-card:nth-child(4) {\r\n transition-delay: 0.22s;\r\n }\r\n .why-card:nth-child(5) {\r\n transition-delay: 0.28s;\r\n }\r\n .why-card:nth-child(6) {\r\n transition-delay: 0.34s;\r\n }\r\n\r\n .why-card:hover {\r\n border-color: var(--text-pure-white);\r\n background: var(--bg-pure-black);\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 40px rgba(255, 255, 255, 0.04);\r\n }\r\n\r\n .why-card-title {\r\n font-size: 16px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1.2px;\r\n color: var(--text-pure-white);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .why-card-title .wc-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid var(--accent-border);\r\n font-size: 14px;\r\n flex-shrink: 0;\r\n transition: var(--transition-premium);\r\n color: var(--text-muted-slate);\r\n }\r\n\r\n .why-card:hover .wc-icon {\r\n border-color: var(--text-pure-white);\r\n color: var(--text-pure-white);\r\n background: rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n .why-card .wc-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--text-dark-grey);\r\n display: inline-block;\r\n transition: var(--transition-premium);\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n }\r\n\r\n .why-card:hover .wc-dot {\r\n background: var(--text-pure-white);\r\n }\r\n\r\n \/* --- PORTFOLIO GRID --- *\/\r\n .portfolio-bento {\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n gap: 20px;\r\n margin-top: 60px;\r\n }\r\n\r\n .portfolio-card {\r\n background-color: var(--bg-card);\r\n height: 420px;\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid var(--accent-border);\r\n display: flex;\r\n align-items: flex-end;\r\n padding: 40px;\r\n transition: var(--transition-premium);\r\n text-decoration: none;\r\n }\r\n\r\n .portfolio-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n filter: grayscale(100%) brightness(50%) contrast(110%);\r\n transition: var(--transition-premium);\r\n z-index: 1;\r\n }\r\n\r\n .portfolio-card::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 10%, transparent 100%);\r\n z-index: 2;\r\n }\r\n\r\n .p-reels::before {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1542038784456-1ea8e935640e?q=80&w=600');\r\n }\r\n .p-brand::before {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=600');\r\n }\r\n .p-photo::before {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1516035069371-29a1b244cc32?q=80&w=600');\r\n }\r\n .p-presenter::before {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1492562080023-ab3db95bfbce?q=80&w=600');\r\n }\r\n .p-bts::before {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1601506521937-0121a7fc2a6b?q=80&w=600');\r\n }\r\n\r\n .portfolio-card:hover::before {\r\n transform: scale(1.05);\r\n filter: grayscale(0%) brightness(60%);\r\n }\r\n\r\n .portfolio-card:hover {\r\n border-color: var(--text-pure-white);\r\n }\r\n\r\n .portfolio-item-title {\r\n position: relative;\r\n z-index: 3;\r\n font-family: var(--font-display);\r\n font-size: 2.2rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n color: var(--text-pure-white);\r\n }\r\n\r\n .bento-wide {\r\n grid-column: span 7;\r\n }\r\n .bento-narrow {\r\n grid-column: span 5;\r\n }\r\n .bento-third {\r\n grid-column: span 4;\r\n }\r\n\r\n \/* --- TESTIMONIALS --- *\/\r\n .testimonial-box {\r\n border: 1px dashed var(--text-dark-grey);\r\n padding: 80px 40px;\r\n text-align: center;\r\n font-size: 14px;\r\n color: var(--text-muted-slate);\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n margin-top: 40px;\r\n }\r\n\r\n \/* --- FINAL CTA --- *\/\r\n .cta-wrap {\r\n text-align: center;\r\n padding: 100px 0;\r\n background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);\r\n }\r\n\r\n .cta-wrap .section-title {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .cta-text {\r\n font-size: 18px;\r\n color: var(--text-muted-slate);\r\n max-width: 620px;\r\n margin: 0 auto 40px auto;\r\n font-weight: 300;\r\n }\r\n\r\n .cta-wrap .btn-group {\r\n justify-content: center;\r\n }\r\n\r\n \/* --- LUXURY MODAL POPUP SYSTEM --- *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.85);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 2000;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s ease;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .modal-box {\r\n background-color: var(--bg-card);\r\n border: 1px solid var(--accent-border);\r\n width: 100%;\r\n max-width: 650px;\r\n padding: 48px;\r\n position: relative;\r\n transform: translateY(40px);\r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .modal-overlay.active .modal-box {\r\n transform: translateY(0);\r\n }\r\n\r\n .modal-close-btn {\r\n position: absolute;\r\n top: 24px;\r\n right: 24px;\r\n background: none;\r\n border: none;\r\n color: var(--text-muted-slate);\r\n font-size: 32px;\r\n cursor: pointer;\r\n transition: var(--transition-premium);\r\n }\r\n\r\n .modal-close-btn:hover {\r\n color: var(--text-pure-white);\r\n }\r\n\r\n .modal-title {\r\n font-family: var(--font-display);\r\n font-size: 2.5rem;\r\n text-transform: uppercase;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .modal-subtitle {\r\n color: var(--text-muted-slate);\r\n font-size: 14px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n \/* --- FORM ELEMENTS --- *\/\r\n .form-grid-2x2 {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .form-label {\r\n display: block;\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n color: var(--text-muted-slate);\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n }\r\n\r\n .form-input {\r\n width: 100%;\r\n background-color: rgba(255, 255, 255, 0.02);\r\n border: 1px solid var(--accent-border);\r\n padding: 16px;\r\n color: var(--text-pure-white);\r\n font-family: var(--font-body);\r\n font-size: 14px;\r\n transition: var(--transition-premium);\r\n }\r\n\r\n .form-input:focus {\r\n outline: none;\r\n border-color: var(--text-pure-white);\r\n background-color: rgba(255, 255, 255, 0.04);\r\n }\r\n\r\n textarea.form-input {\r\n height: 120px;\r\n resize: none;\r\n }\r\n\r\n \/* --- PREMIUM FOOTER --- *\/\r\n footer {\r\n background-color: #000000;\r\n padding: 100px 0 60px 0;\r\n font-size: 14px;\r\n border-top: 1px solid var(--accent-border);\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr;\r\n gap: 80px;\r\n }\r\n\r\n .footer-logo-panel .f-logo {\r\n font-family: var(--font-display);\r\n font-size: 2.8rem;\r\n line-height: 1;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .footer-logo-panel .f-tagline {\r\n color: var(--text-muted-slate);\r\n margin-top: 16px;\r\n display: block;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n }\r\n\r\n .footer-hdr {\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n margin-bottom: 28px;\r\n letter-spacing: 1.5px;\r\n font-size: 12px;\r\n }\r\n\r\n .footer-links-list {\r\n list-style: none;\r\n }\r\n\r\n .footer-links-list li {\r\n margin-bottom: 16px;\r\n }\r\n\r\n .footer-links-list a {\r\n color: var(--text-muted-slate);\r\n text-decoration: none;\r\n transition: var(--transition-premium);\r\n }\r\n\r\n .footer-links-list a:hover {\r\n color: var(--text-pure-white);\r\n padding-left: 6px;\r\n }\r\n\r\n .footer-bottom {\r\n margin-top: 80px;\r\n padding-top: 40px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.02);\r\n display: flex;\r\n justify-content: space-between;\r\n color: var(--text-dark-grey);\r\n font-size: 12px;\r\n }\r\n\r\n \/* ============================================================\r\n HEADER \u2014 FIXED, FULLY RESPONSIVE, NO SLIP\r\n ============================================================ *\/\r\n .standout-premium-header {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n z-index: 99999 !important;\r\n background: rgba(0, 0, 0, 0.85) !important;\r\n backdrop-filter: blur(12px);\r\n padding: 16px 32px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.03);\r\n transition: padding 0.3s ease;\r\n overflow: visible !important;\r\n }\r\n\r\n .nav-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n width: 100%;\r\n min-height: 60px;\r\n overflow: visible !important;\r\n position: relative !important;\r\n }\r\n\r\n .logo {\r\n flex-shrink: 0;\r\n }\r\n .logo img {\r\n height: 70px;\r\n width: auto;\r\n display: block;\r\n transition: height 0.3s ease;\r\n }\r\n\r\n \/* ---- DESKTOP NAV ---- *\/\r\n #navLinks {\r\n display: flex;\r\n align-items: center;\r\n gap: 0;\r\n }\r\n\r\n #navLinks a {\r\n color: #8e9196;\r\n text-decoration: none;\r\n font-size: 13px;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n margin-left: 32px;\r\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n position: relative;\r\n white-space: nowrap;\r\n }\r\n\r\n #navLinks a:hover,\r\n #navLinks a.active {\r\n color: #ffffff;\r\n }\r\n\r\n \/* ---- TOGGLE BUTTON (hidden on desktop) ---- *\/\r\n .standout-toggle {\r\n display: none;\r\n cursor: pointer;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 36px !important;\r\n height: 36px !important;\r\n background: transparent !important;\r\n border: none !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n box-shadow: none !important;\r\n position: relative !important;\r\n z-index: 100000 !important;\r\n flex-shrink: 0 !important;\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n transform: none !important;\r\n pointer-events: auto !important;\r\n right: auto !important;\r\n left: auto !important;\r\n top: auto !important;\r\n bottom: auto !important;\r\n }\r\n\r\n .standout-bar {\r\n display: block !important;\r\n width: 26px !important;\r\n height: 2.5px !important;\r\n background-color: #ffffff !important;\r\n margin: 4px 0 !important;\r\n border-radius: 2px;\r\n transition: all 0.3s ease-in-out !important;\r\n transform-origin: center;\r\n will-change: transform, opacity;\r\n }\r\n\r\n \/* Hamburger \u2192 X animation *\/\r\n .standout-toggle.active .standout-bar:nth-child(2) { opacity: 0 !important; }\r\n .standout-toggle.active .standout-bar:nth-child(1) { transform: translateY(9px) rotate(45deg) !important; }\r\n .standout-toggle.active .standout-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg) !important; }\r\n\r\n \/* ============================================================\r\n MOBILE RESPONSIVE \u2014 FIXED TOGGLE POSITION\r\n ============================================================ *\/\r\n @media (max-width: 768px) {\r\n .standout-premium-header {\r\n padding: 12px 20px;\r\n overflow: visible !important;\r\n }\r\n\r\n .nav-container {\r\n position: relative !important;\r\n overflow: visible !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: space-between !important;\r\n min-height: 60px;\r\n }\r\n\r\n .logo {\r\n flex-shrink: 0 !important;\r\n order: 1 !important;\r\n }\r\n .logo img {\r\n height: 55px;\r\n }\r\n\r\n \/* \ud83d\udc47 FIX 1: Toggle \u0d91\u0d9a \u0dc4\u0dbb\u0dd2\u0dba\u0da7\u0db8 RIGHT \u0db4\u0dd0\u0dad\u0dca\u0dad\u0dda \u0dad\u0db6\u0dcf \u0d9c\u0dd0\u0db1\u0dd3\u0db8\u0da7 ABSOLUTE *\/\r\n .standout-toggle {\r\n position: absolute !important;\r\n top: 50% !important;\r\n right: 0px !important;\r\n transform: translateY(-50%) !important;\r\n display: flex !important;\r\n order: 2 !important;\r\n margin: 0 !important;\r\n width: 36px !important;\r\n height: 36px !important;\r\n overflow: visible !important;\r\n }\r\n\r\n #navLinks {\r\n order: 3 !important;\r\n width: 100% !important;\r\n display: none;\r\n flex-direction: column;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n background: #000000 !important;\r\n padding: 24px 0 32px 0;\r\n text-align: center;\r\n border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);\r\n overflow: visible !important;\r\n margin-top: 0;\r\n }\r\n #navLinks.active {\r\n display: flex !important;\r\n }\r\n\r\n #navLinks a {\r\n margin: 12px 0 !important;\r\n font-size: 14px;\r\n letter-spacing: 2.5px;\r\n padding: 6px 0;\r\n width: 100%;\r\n }\r\n }\r\n\r\n @media (max-width: 400px) {\r\n .standout-premium-header { padding: 10px 14px; }\r\n .logo img { height: 45px; }\r\n .standout-toggle {\r\n width: 32px !important;\r\n height: 32px !important;\r\n }\r\n .standout-bar {\r\n width: 22px !important;\r\n height: 2px !important;\r\n margin: 3.5px 0 !important;\r\n }\r\n }\r\n\r\n \/* \ud83d\udc47 ADDITIONAL SAFETY \u2014 OVERRIDE ANY SITE CONFLICTS *\/\r\n .standout-premium-header,\r\n .standout-premium-header *,\r\n .standout-premium-header *::before,\r\n .standout-premium-header *::after {\r\n overflow: visible !important;\r\n }\r\n\r\n \/* \ud83d\udc47 Ensure nothing hides the toggle *\/\r\n body .standout-premium-header .standout-toggle {\r\n display: none !important;\r\n }\r\n @media (max-width: 768px) {\r\n body .standout-premium-header .standout-toggle {\r\n display: flex !important;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE (existing page styles)\r\n ============================================================ *\/\r\n\r\n \/* --- TABLETS & SMALL LAPTOPS --- *\/\r\n @media (max-width: 992px) {\r\n section {\r\n padding: 80px 0;\r\n }\r\n .container {\r\n padding: 0 24px;\r\n }\r\n .trust-grid,\r\n .services-layout,\r\n .why-container,\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: 50px;\r\n }\r\n .services-sticky-wrapper {\r\n display: none;\r\n }\r\n .services-layout {\r\n grid-template-columns: 1fr;\r\n }\r\n .process-item {\r\n flex: 1 1 calc(50% - 24px);\r\n max-width: 100%;\r\n }\r\n .bento-wide,\r\n .bento-narrow,\r\n .bento-third {\r\n grid-column: span 12;\r\n }\r\n .portfolio-card {\r\n height: 340px;\r\n }\r\n .form-grid-2x2 {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n .modal-box {\r\n padding: 32px 24px;\r\n }\r\n .why-points-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 18px;\r\n }\r\n .why-card {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n .orb {\r\n width: 130px;\r\n height: 130px;\r\n }\r\n .orb:nth-child(even) {\r\n margin-top: 40px;\r\n }\r\n .orb-grid {\r\n gap: 14px;\r\n }\r\n .icon {\r\n font-size: 1.3rem;\r\n }\r\n .text {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n \/* --- MOBILE PHONES (PORTRAIT) --- *\/\r\n @media (max-width: 600px) {\r\n section, \r\n .hero-content, \r\n .services-list, \r\n .process-container, \r\n .why-container, \r\n .cta-wrap {\r\n text-align: center !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n section {\r\n padding: 60px 0;\r\n }\r\n .container {\r\n padding: 0 16px;\r\n }\r\n .section-title, .hero-sub, .cta-text {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .service-row {\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container { text-align: center; }\r\n .footer-grid { \r\n grid-template-columns: 1fr; \r\n gap: 40px; \r\n text-align: center; \r\n }\r\n .footer-logo-panel { \r\n align-items: center; \r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .footer-links-list { \r\n padding: 0;\r\n margin-left: 10px;\r\n }\r\n .footer-hdr { margin-bottom: 10px; }\r\n }\r\n\r\n \/* Hero *\/\r\n .hero {\r\n min-height: 90vh;\r\n padding-top: 80px;\r\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.7) 100%),\r\n url('http:\/\/standoutsociety.net\/wp-content\/uploads\/2026\/06\/9d6ccf9d52f7c6163995c66ec5d46791.jpg') no-repeat center 20%\/cover;\r\n }\r\n .hero .section-title {\r\n font-size: clamp(2.6rem, 12vw, 3.8rem);\r\n }\r\n .hero-sub {\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Buttons *\/\r\n .btn-group {\r\n flex-direction: column;\r\n width: 100%;\r\n gap: 12px;\r\n margin-top: 32px;\r\n }\r\n .btn {\r\n width: 100%;\r\n padding: 16px 24px;\r\n justify-content: center;\r\n font-size: 12px;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n \/* Counters \/ Trust *\/\r\n .trust-grid {\r\n gap: 40px;\r\n }\r\n .trust-grid .section-title {\r\n font-size: clamp(2.2rem, 8vw, 3rem) !important;\r\n }\r\n .counters-box {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 2px;\r\n }\r\n .counter-card {\r\n padding: 32px 16px;\r\n text-align: center;\r\n }\r\n .counter-num {\r\n font-size: 40px;\r\n }\r\n .counter-label {\r\n font-size: 10px;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* Services *\/\r\n .service-row {\r\n padding: 28px 0;\r\n grid-template-columns: 1fr;\r\n gap: 4px;\r\n }\r\n .service-index {\r\n font-size: 1.2rem;\r\n padding-top: 0;\r\n }\r\n .service-name {\r\n font-size: 20px;\r\n }\r\n .service-text {\r\n font-size: 14px;\r\n }\r\n\r\n \/* Process *\/\r\n .process-item {\r\n flex: 1 1 100%;\r\n max-width: 100%;\r\n padding: 1.5rem 1rem 1.25rem;\r\n min-width: unset;\r\n }\r\n .process-container {\r\n gap: 16px;\r\n }\r\n .process-id {\r\n font-size: 2rem;\r\n }\r\n .process-icon {\r\n width: 3rem;\r\n height: 3rem;\r\n }\r\n .process-icon svg {\r\n width: 1.2rem;\r\n height: 1.2rem;\r\n }\r\n .process-title {\r\n font-size: 1.1rem;\r\n }\r\n .process-desc {\r\n font-size: 0.8rem;\r\n max-width: 100%;\r\n }\r\n\r\n \/* Orb grid *\/\r\n .orb-grid {\r\n gap: 16px;\r\n margin-top: 40px;\r\n justify-content: center;\r\n }\r\n .orb {\r\n width: 110px;\r\n height: 110px;\r\n flex-shrink: 0;\r\n }\r\n .orb:nth-child(even) {\r\n margin-top: 30px;\r\n }\r\n .orb:nth-child(odd) {\r\n margin-top: 0;\r\n }\r\n .icon {\r\n font-size: 1.2rem;\r\n margin-bottom: 6px;\r\n }\r\n .text {\r\n font-size: 0.7rem;\r\n line-height: 1.1;\r\n }\r\n\r\n \/* Why section *\/\r\n .why-container {\r\n gap: 36px;\r\n }\r\n .why-lead-text {\r\n font-size: 18px;\r\n line-height: 1.4;\r\n }\r\n .why-points-grid {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n }\r\n .why-card {\r\n width: 100%;\r\n max-width: 100%;\r\n padding: 16px 14px 12px;\r\n border-radius: 10px;\r\n }\r\n .why-card-title {\r\n font-size: 14px;\r\n letter-spacing: 0.8px;\r\n }\r\n .why-card-title .wc-dot {\r\n width: 5px;\r\n height: 5px;\r\n }\r\n\r\n \/* Portfolio *\/\r\n .portfolio-bento {\r\n gap: 14px;\r\n margin-top: 36px;\r\n }\r\n .bento-wide,\r\n .bento-narrow,\r\n .bento-third {\r\n grid-column: span 12;\r\n }\r\n .portfolio-card {\r\n height: 220px;\r\n padding: 24px 20px;\r\n }\r\n .portfolio-item-title {\r\n font-size: 1.6rem;\r\n }\r\n\r\n \/* Testimonial *\/\r\n .testimonial-box {\r\n padding: 40px 20px;\r\n font-size: 12px;\r\n letter-spacing: 2px;\r\n }\r\n\r\n \/* CTA *\/\r\n .cta-wrap {\r\n padding: 60px 0;\r\n }\r\n .cta-wrap .section-title {\r\n font-size: clamp(2.2rem, 10vw, 3.2rem);\r\n }\r\n .cta-text {\r\n font-size: 15px;\r\n padding: 0 4px;\r\n }\r\n\r\n \/* Modal *\/\r\n .modal-box {\r\n padding: 28px 16px;\r\n margin: 0 12px;\r\n max-width: 100%;\r\n }\r\n .modal-title {\r\n font-size: 1.8rem;\r\n }\r\n .modal-subtitle {\r\n font-size: 13px;\r\n margin-bottom: 24px;\r\n }\r\n .modal-close-btn {\r\n top: 16px;\r\n right: 16px;\r\n font-size: 28px;\r\n }\r\n .form-grid-2x2 {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n .form-input {\r\n padding: 14px;\r\n font-size: 13px;\r\n }\r\n textarea.form-input {\r\n height: 100px;\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n padding: 60px 0 40px 0;\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .footer-logo-panel img {\r\n max-width: 150px !important;\r\n }\r\n .footer-logo-panel .f-tagline {\r\n font-size: 10px;\r\n letter-spacing: 2px;\r\n }\r\n .footer-hdr {\r\n font-size: 11px;\r\n margin-bottom: 20px;\r\n }\r\n .footer-links-list li {\r\n margin-bottom: 12px;\r\n }\r\n .footer-bottom {\r\n flex-direction: column;\r\n gap: 10px;\r\n text-align: center;\r\n margin-top: 40px;\r\n padding-top: 24px;\r\n font-size: 11px;\r\n }\r\n\r\n \/* Section titles general *\/\r\n .section-title {\r\n font-size: clamp(2.2rem, 10vw, 3.2rem);\r\n margin-bottom: 28px;\r\n }\r\n .section-tag {\r\n font-size: 10px;\r\n letter-spacing: 3px;\r\n margin-bottom: 16px;\r\n }\r\n }\r\n\r\n \/* --- EXTRA SMALL PHONES (\u2264 400px) --- *\/\r\n @media (max-width: 400px) {\r\n .container {\r\n padding: 0 12px;\r\n }\r\n .hero .section-title {\r\n font-size: clamp(2rem, 14vw, 2.8rem);\r\n }\r\n .hero-sub {\r\n font-size: 0.9rem;\r\n }\r\n .btn {\r\n padding: 14px 20px;\r\n font-size: 11px;\r\n letter-spacing: 1.2px;\r\n }\r\n .counter-num {\r\n font-size: 34px;\r\n }\r\n .counter-card {\r\n padding: 24px 12px;\r\n }\r\n .orb {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n .orb:nth-child(even) {\r\n margin-top: 20px;\r\n }\r\n .icon {\r\n font-size: 1rem;\r\n }\r\n .text {\r\n font-size: 0.6rem;\r\n }\r\n .process-item {\r\n padding: 1.25rem 0.75rem 1rem;\r\n border-radius: 1rem;\r\n }\r\n .process-id {\r\n font-size: 1.6rem;\r\n }\r\n .process-icon {\r\n width: 2.6rem;\r\n height: 2.6rem;\r\n }\r\n .process-icon svg {\r\n width: 1rem;\r\n height: 1rem;\r\n }\r\n .process-title {\r\n font-size: 0.95rem;\r\n }\r\n .process-desc {\r\n font-size: 0.7rem;\r\n }\r\n .portfolio-card {\r\n height: 180px;\r\n padding: 18px 16px;\r\n }\r\n .portfolio-item-title {\r\n font-size: 1.3rem;\r\n }\r\n .modal-box {\r\n padding: 20px 12px;\r\n margin: 0 8px;\r\n }\r\n .modal-title {\r\n font-size: 1.5rem;\r\n }\r\n .modal-close-btn {\r\n top: 12px;\r\n right: 12px;\r\n font-size: 24px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- ========== HEADER (Fixed, No Conflict) ========== -->\r\n <header class=\"standout-premium-header\" id=\"mainHeader\">\r\n <div class=\"nav-container\">\r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"http:\/\/standoutsociety.net\/wp-content\/uploads\/2026\/06\/Standout-Society-Logo-6-e1781496916909.png\" alt=\"STANDOUT Society\" \/>\r\n <\/a>\r\n\r\n <div class=\"standout-toggle\" id=\"mobileMenuToggle\" role=\"button\" aria-label=\"Toggle navigation\" tabindex=\"0\">\r\n <span class=\"standout-bar\"><\/span>\r\n <span class=\"standout-bar\"><\/span>\r\n <span class=\"standout-bar\"><\/span>\r\n <\/div>\r\n\r\n <nav id=\"navLinks\">\r\n <a href=\"#services\" class=\"active\">Services<\/a>\r\n <a href=\"#process\">Process<\/a>\r\n <a href=\"#portfolio\">Our Work<\/a>\r\n <a href=\"https:\/\/www.portfolio.advertigo.online\" target=\"_blank\">Portfolio<\/a>\r\n <a href=\"#cta\">Contact<\/a>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- ========== HERO ========== -->\r\n <section class=\"hero\">\r\n <div class=\"container\">\r\n <div class=\"hero-content\">\r\n <span class=\"section-tag\">Strategic Content \u2022 Real Impact<\/span>\r\n <h1 class=\"section-title\">Content That Makes Brands <br \/><span class=\"text-highlight\">Impossible To Ignore.<\/span><\/h1>\r\n <p class=\"hero-sub\">We create strategic content, commercial visuals, and brand experiences that help businesses stand out, scale up, and show up with confidence.<\/p>\r\n <div class=\"btn-group\">\r\n <a href=\"#portfolio\" class=\"btn btn-primary\">View Our Work<\/a>\r\n <a href=\"https:\/\/wa.me\/94757482017\" class=\"btn btn-discovery trigger-inquiry\" target=\"_blank\">Book a Discovery Call<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== COUNTERS ========== -->\r\n <section>\r\n <div class=\"container\">\r\n <div class=\"trust-grid\">\r\n <h2 class=\"section-title\" style=\"font-size: clamp(3rem, 5vw, 4rem); margin-bottom: 0; letter-spacing: 0px;\">Built For Brands That Want <span class=\"text-highlight\">More Than Just Content<\/span><\/h2>\r\n <div class=\"counters-box\" id=\"counterContainer\">\r\n <div class=\"counter-card card-animate ltr\"><div class=\"counter-num\" data-target=\"50\">0<\/div><div class=\"counter-label\">Projects<\/div><\/div>\r\n <div class=\"counter-card card-animate rtl\"><div class=\"counter-num\" data-target=\"10\">0<\/div><div class=\"counter-label\">Industries<\/div><\/div>\r\n <div class=\"counter-card card-animate ltr\"><div class=\"counter-num\" data-target=\"1000\">0<\/div><div class=\"counter-label\">Assets<\/div><\/div>\r\n <div class=\"counter-card card-animate rtl\"><div class=\"counter-num\" data-target=\"100\">0<\/div><div class=\"counter-label\">Tailored<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== SERVICES ========== -->\r\n <section id=\"services\">\r\n <div class=\"container\">\r\n <span class=\"section-tag\">Expertise<\/span>\r\n <h2 class=\"section-title\">What We Create<\/h2>\r\n <div class=\"services-layout\">\r\n <div class=\"services-list\">\r\n <div class=\"service-row\">\r\n <div class=\"service-index\">01<\/div>\r\n <div>\r\n <h3 class=\"service-name\">Content Creation<\/h3>\r\n <p class=\"service-text\">Strategic short-form content designed to capture attention and drive engagement.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-row\">\r\n <div class=\"service-index\">02<\/div>\r\n <div>\r\n <h3 class=\"service-name\">Videography<\/h3>\r\n <p class=\"service-text\">Commercial videos, brand stories, promotional campaigns, and presenter-led content.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-row\">\r\n <div class=\"service-index\">03<\/div>\r\n <div>\r\n <h3 class=\"service-name\">Photography<\/h3>\r\n <p class=\"service-text\">Professional visuals that elevate your brand and create lasting impressions.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-row\">\r\n <div class=\"service-index\">04<\/div>\r\n <div>\r\n <h3 class=\"service-name\">Brand Campaigns<\/h3>\r\n <p class=\"service-text\">Creative concepts and production tailored to launch, promote, and grow your business.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-row\">\r\n <div class=\"service-index\">05<\/div>\r\n <div>\r\n <h3 class=\"service-name\">Content Strategy<\/h3>\r\n <p class=\"service-text\">Ideas backed by strategy, not guesswork.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"services-sticky-wrapper\">\r\n <video autoplay muted loop playsinline class=\"services-sticky-video\">\r\n <source src=\"http:\/\/standoutsociety.net\/wp-content\/uploads\/2026\/06\/06025ef27230b6e3b0627c5096442484_t1.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== PROCESS ========== -->\r\n <section id=\"process\">\r\n <div class=\"container\">\r\n <span class=\"section-tag\">Workflow<\/span>\r\n <h2 class=\"section-title\">How We Work<\/h2>\r\n <div class=\"process-container\">\r\n <div class=\"process-item\">\r\n <div class=\"process-id\">01<\/div>\r\n <div class=\"process-icon\">\r\n <svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <\/div>\r\n <div class=\"process-content\">\r\n <div class=\"process-title\">Research<\/div>\r\n <div class=\"process-desc\">Understanding your audience, market, and goals.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-item\">\r\n <div class=\"process-id\">02<\/div>\r\n <div class=\"process-icon\">\r\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"process-content\">\r\n <div class=\"process-title\">Strategy<\/div>\r\n <div class=\"process-desc\">Building a content plan designed for your business.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-item\">\r\n <div class=\"process-id\">03<\/div>\r\n <div class=\"process-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M23 7l-7 5 7 5V7z\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\" ry=\"2\"\/><\/svg>\r\n <\/div>\r\n <div class=\"process-content\">\r\n <div class=\"process-title\">Production<\/div>\r\n <div class=\"process-desc\">Photography, videography, and content creation.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-item\">\r\n <div class=\"process-id\">04<\/div>\r\n <div class=\"process-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"process-content\">\r\n <div class=\"process-title\">Editing<\/div>\r\n <div class=\"process-desc\">Crafting visuals that look premium and perform.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"process-item\">\r\n <div class=\"process-id\">05<\/div>\r\n <div class=\"process-icon\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v-3.03a3 3 0 0 0-1.5-2.6l-3.5-2.02a3 3 0 0 0-3 0l-3.5 2.02a3 3 0 0 0-1.5 2.6v3.03a3 3 0 0 0 1.5 2.6l3.5 2.02a3 3 0 0 0 3 0l3.5-2.02a3 3 0 0 0 1.5-2.6z\"\/><path d=\"M2 8.92v3.03a3 3 0 0 0 1.5 2.6l3.5 2.02a3 3 0 0 0 3 0l3.5-2.02a3 3 0 0 0 1.5-2.6V8.92\"\/><\/svg>\r\n <\/div>\r\n <div class=\"process-content\">\r\n <div class=\"process-title\">Delivery<\/div>\r\n <div class=\"process-desc\">Ready-to-publish content delivered efficiently.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== WHO WE WORK WITH ========== -->\r\n <section>\r\n <div class=\"container\">\r\n <span class=\"section-tag\">Niches<\/span>\r\n <h2 class=\"section-title\">Who We Work With<\/h2>\r\n <div class=\"orb-grid\">\r\n <div class=\"orb\"><i class=\"fas fa-graduation-cap icon\"><\/i><div class=\"text\">Education &<br>Visa<\/div><\/div>\r\n <div class=\"orb\"><i class=\"fas fa-shirt icon\"><\/i><div class=\"text\">Fashion &<br>Apparel<\/div><\/div>\r\n <div class=\"orb\"><i class=\"fas fa-hotel icon\"><\/i><div class=\"text\">Hotels &<br>Villas<\/div><\/div>\r\n <div class=\"orb\"><i class=\"fas fa-dumbbell icon\"><\/i><div class=\"text\">Gyms &<br>Fitness<\/div><\/div>\r\n <div class=\"orb\"><i class=\"fas fa-coffee icon\"><\/i><div class=\"text\">Caf\u00e9s &<br>Restaurants<\/div><\/div>\r\n <div class=\"orb\"><i class=\"fas fa-cogs icon\"><\/i><div class=\"text\">Service<br>Businesses<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== WHY ========== -->\r\n <section id=\"why\">\r\n <div class=\"container\">\r\n <span class=\"section-tag\">Philosophy<\/span>\r\n <h2 class=\"section-title\">Why Brands Choose <br \/><span class=\"text-highlight\">Standout Society<\/span><\/h2>\r\n <div class=\"why-container\">\r\n <div class=\"why-lead-text\">\r\n We don't create content for the sake of posting. <br \/><strong>We create content with purpose.<\/strong>\r\n <\/div>\r\n <div class=\"why-points-grid\" id=\"whyGrid\">\r\n <div class=\"why-card\">\r\n <div class=\"why-card-title\">\r\n Strategic Thinking<span class=\"wc-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-card\">\r\n <div class=\"why-card-title\">\r\n Premium Visuals<span class=\"wc-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-card\">\r\n <div class=\"why-card-title\">\r\n Creative Storytelling<span class=\"wc-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-card\">\r\n <div class=\"why-card-title\">\r\n Fast Turnaround<span class=\"wc-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-card\">\r\n <div class=\"why-card-title\">\r\n Personalized Approach<span class=\"wc-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"why-card\">\r\n <div class=\"why-card-title\">\r\n Results-Focused Execution<span class=\"wc-dot\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== PORTFOLIO ========== -->\r\n <section id=\"portfolio\">\r\n <div class=\"container\">\r\n <span class=\"section-tag\">Portfolio<\/span>\r\n <h2 class=\"section-title\">Selected Work<\/h2>\r\n <div class=\"portfolio-bento\">\r\n <a href=\"javascript:void(0)\" class=\"portfolio-card bento-wide p-reels\">\r\n <div class=\"portfolio-item-title\">Reels<\/div>\r\n <\/a>\r\n <a href=\"javascript:void(0)\" class=\"portfolio-card bento-narrow p-brand\">\r\n <div class=\"portfolio-item-title\">Brand Videos<\/div>\r\n <\/a>\r\n <a href=\"javascript:void(0)\" class=\"portfolio-card bento-third p-photo\">\r\n <div class=\"portfolio-item-title\">Photography<\/div>\r\n <\/a>\r\n <a href=\"javascript:void(0)\" class=\"portfolio-card bento-third p-presenter\">\r\n <div class=\"portfolio-item-title\">Presenter Videos<\/div>\r\n <\/a>\r\n <a href=\"javascript:void(0)\" class=\"portfolio-card bento-third p-bts\">\r\n <div class=\"portfolio-item-title\">BTS<\/div>\r\n <\/a>\r\n <\/div>\r\n \r\n <br><br>\r\n <center>\r\n <a href=\"#\">\r\n <button class=\"btn btn-secondary\">See More<\/button>\r\n <\/a>\r\n<\/center>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== TESTIMONIALS ========== -->\r\n <section>\r\n <div class=\"container\">\r\n <span class=\"section-tag\">Endorsements<\/span>\r\n <h2 class=\"section-title\">Testimonials<\/h2>\r\n <div class=\"testimonial-box\">To be added. Client reviews loading shortly\u2026<\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== CTA ========== -->\r\n <section id=\"cta\" class=\"cta-section\">\r\n <div class=\"container\">\r\n <div class=\"cta-wrap\">\r\n <h2 class=\"section-title\">Your Brand Deserves <br \/>Better Content<\/h2>\r\n <p class=\"cta-text\">Whether you're launching a new brand, growing an existing business, or looking to create content that actually stands out \u2014 we're ready to help.<\/p>\r\n <div class=\"btn-group\">\r\n <a href=\"https:\/\/wa.me\/94757482017\" class=\"btn btn-discovery trigger-inquiry\" target=\"_blank\">Book a Call<\/a>\r\n <button class=\"btn btn-secondary trigger-inquiry\">Send an Inquiry<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ========== MODAL ========== -->\r\n <div class=\"modal-overlay\" id=\"inquiryModal\">\r\n <div class=\"modal-box\">\r\n <button class=\"modal-close-btn\" id=\"closeModalBtn\">×<\/button>\r\n <h3 class=\"modal-title\">Send An Inquiry<\/h3>\r\n <p class=\"modal-subtitle\">Tell us about your brand goals and requirements.<\/p>\r\n <form id=\"inquiryForm\" action=\"process-inquiry.php\" method=\"POST\">\r\n <div class=\"form-grid-2x2\">\r\n <div class=\"form-item\">\r\n <label class=\"form-label\">Full Name<\/label>\r\n <input type=\"text\" name=\"Name\" class=\"form-input\" placeholder=\"Your name\" required \/>\r\n <\/div>\r\n <div class=\"form-item\">\r\n <label class=\"form-label\">Email Address<\/label>\r\n <input type=\"email\" name=\"Email\" class=\"form-input\" placeholder=\"name@company.com\" required \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Contact Number \/ Social Handle<\/label>\r\n <input type=\"text\" name=\"Contact\" class=\"form-input\" placeholder=\"+94 7X XXX XXXX or @instagram\" required \/>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Project Details \/ Message<\/label>\r\n <textarea name=\"Message\" class=\"form-input\" placeholder=\"Briefly describe your project or needs\u2026\" required><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width:100%; margin-top:4px; padding:16px 32px;\">\ud83d\ude80 Submit Inquiry<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ========== FOOTER ========== -->\r\n <footer>\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-logo-panel\">\r\n <img decoding=\"async\" src=\"http:\/\/standoutsociety.net\/wp-content\/uploads\/2026\/06\/Standout-Society-Logo-6-e1781498087168.png\"\r\n alt=\"Standout Society Logo\"\r\n style=\"max-width:200px; height:auto; display:block;\" \/>\r\n <span class=\"f-tagline\">Stand Out \u2022 Scale Up \u2022 Show Up<\/span>\r\n <\/div>\r\n <div>\r\n <h4 class=\"footer-hdr\">Services<\/h4>\r\n <ul class=\"footer-links-list\">\r\n <li><a href=\"#services\">Videography<\/a><\/li>\r\n <li><a href=\"#services\">Photography<\/a><\/li>\r\n <li><a href=\"#services\">Content Creation<\/a><\/li>\r\n <li><a href=\"#services\">Brand Campaigns<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"footer-hdr\">Socials<\/h4>\r\n <ul class=\"footer-links-list\">\r\n <li><a href=\"#\">Instagram<\/a><\/li>\r\n <li><a href=\"#\">TikTok<\/a><\/li>\r\n <li><a href=\"#\">Facebook<\/a><\/li>\r\n <li><a href=\"#\">LinkedIn<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <div>© 2026 Standout Society. All Rights Reserved.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- ========== JAVASCRIPT ========== -->\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n \/\/ ----- HEADER TOGGLE -----\r\n const toggleBtn = document.getElementById('mobileMenuToggle');\r\n const navLinks = document.getElementById('navLinks');\r\n\r\n if (toggleBtn && navLinks) {\r\n toggleBtn.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n this.classList.toggle('active');\r\n navLinks.classList.toggle('active');\r\n this.setAttribute('aria-expanded', navLinks.classList.contains('active'));\r\n });\r\n\r\n navLinks.querySelectorAll('a').forEach(link => {\r\n link.addEventListener('click', function() {\r\n toggleBtn.classList.remove('active');\r\n navLinks.classList.remove('active');\r\n toggleBtn.setAttribute('aria-expanded', 'false');\r\n });\r\n });\r\n\r\n document.addEventListener('click', function(e) {\r\n const header = document.querySelector('.standout-premium-header');\r\n if (header && !header.contains(e.target) && navLinks.classList.contains('active')) {\r\n toggleBtn.classList.remove('active');\r\n navLinks.classList.remove('active');\r\n toggleBtn.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n }\r\n\r\n \/\/ ----- COUNTER ANIMATION (FIXED: uses .counter-visible) -----\r\n const counterContainer = document.getElementById('counterContainer');\r\n const cards = document.querySelectorAll('.card-animate');\r\n const numbers = document.querySelectorAll('.counter-num');\r\n\r\n const startCount = (el) => {\r\n const target = parseInt(el.getAttribute('data-target'));\r\n let count = 0;\r\n const incrementStep = target \/ 40;\r\n const update = () => {\r\n count += incrementStep;\r\n if (count < target) {\r\n el.innerText = Math.ceil(count) + (target === 100 ? '%' : '+');\r\n setTimeout(update, 35);\r\n } else {\r\n el.innerText = target + (target === 100 ? '%' : '+');\r\n }\r\n };\r\n update();\r\n };\r\n\r\n const counterObserver = new IntersectionObserver((entries) => {\r\n if (entries[0].isIntersecting) {\r\n cards.forEach((card, index) => {\r\n setTimeout(() => {\r\n \/\/ \ud83d\udc47 FIXED: 'active' \u0dc0\u0dd9\u0db1\u0dd4\u0dc0\u0da7 'counter-visible'\r\n card.classList.add('counter-visible');\r\n startCount(numbers[index]);\r\n }, index * 250);\r\n });\r\n counterObserver.disconnect();\r\n }\r\n }, { threshold: 0.4 });\r\n\r\n if (counterContainer) counterObserver.observe(counterContainer);\r\n\r\n \/\/ ----- WHY CARDS STAGGERED ANIMATION -----\r\n const whyCards = document.querySelectorAll('.why-card');\r\n const whySection = document.getElementById('why');\r\n\r\n const whyObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n whyCards.forEach((card, index) => {\r\n const delay = 60 + index * 45;\r\n setTimeout(() => {\r\n card.classList.add('visible');\r\n }, delay);\r\n });\r\n whyObserver.disconnect();\r\n }\r\n });\r\n }, { threshold: 0.25 });\r\n\r\n if (whySection) whyObserver.observe(whySection);\r\n\r\n \/\/ ----- MODAL LOGIC -----\r\n const modal = document.getElementById('inquiryModal');\r\n const closeBtn = document.getElementById('closeModalBtn');\r\n const triggerButtons = document.querySelectorAll('.trigger-inquiry');\r\n\r\n triggerButtons.forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n if (btn.getAttribute('href') && btn.getAttribute('href').includes('wa.me')) {\r\n return;\r\n }\r\n e.preventDefault();\r\n modal.classList.add('active');\r\n });\r\n });\r\n\r\n if (closeBtn) {\r\n closeBtn.addEventListener('click', () => modal.classList.remove('active'));\r\n }\r\n\r\n window.addEventListener('click', (e) => {\r\n if (e.target === modal) modal.classList.remove('active');\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Standout Society | Premium Creative Agency Services Process Our Work Portfolio Contact Strategic Content \u2022 Real Impact Content That Makes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":500,"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/691"}],"wp:attachment":[{"href":"https:\/\/standoutsociety.net\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}