/* ==========================================================================
   VERSION 3: LUXURY EDITORIAL & MOTION AGENCY
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
   --col-obsidian: #050505;
   --col-charcoal: #121212;
   --col-gold: #D4AF37;
   --col-gold-dim: rgba(212, 175, 55, 0.3);
   --col-alabaster: #F8F8F8;
   --col-gray: #888888;
   --col-border: rgba(255, 255, 255, 0.08);

   --font-serif: 'Playfair Display', serif;
   --font-sans: 'Plus Jakarta Sans', sans-serif;

   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
   --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);

   --header-h: 100px;
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 16px;
   scroll-behavior: auto;
   /* Handled by smooth scroll simulation if needed, but native here for stability */
}

body {
   background-color: var(--col-obsidian);
   color: var(--col-alabaster);
   font-family: var(--font-sans);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

::selection {
   background: var(--col-gold);
   color: var(--col-obsidian);
}

::-webkit-scrollbar {
   width: 6px;
}

::-webkit-scrollbar-track {
   background: var(--col-obsidian);
}

::-webkit-scrollbar-thumb {
   background: var(--col-charcoal);
   border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--col-gold);
}

/* ==========================================================================
      TYPOGRAPHY
      ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 400;
   line-height: 1.1;
}

.title-huge {
   font-family: var(--font-serif);
   font-size: clamp(4rem, 10vw, 9rem);
   letter-spacing: -0.02em;
   line-height: 0.9;
}

.title-lg {
   font-family: var(--font-serif);
   font-size: clamp(3rem, 6vw, 5.5rem);
}

.title-md {
   font-family: var(--font-serif);
   font-size: clamp(2rem, 4vw, 3.5rem);
}

.text-gold {
   color: var(--col-gold);
   font-style: italic;
}

.text-gray {
   color: var(--col-gray);
}

.text-sans {
   font-family: var(--font-sans);
   font-weight: 300;
}

.text-caps {
   text-transform: uppercase;
   letter-spacing: 0.15em;
   font-size: 0.8rem;
   font-weight: 600;
}

.container {
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
   padding: 0 5vw;
}

.section-pad {
   padding: 10rem 0;
}

/* ==========================================================================
      MAGNETIC BUTTONS & LINKS
      ========================================================================== */
.magnetic-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem 3rem;
   background: transparent;
   border: 1px solid var(--col-gold);
   color: var(--col-gold);
   border-radius: 100px;
   font-family: var(--font-sans);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-decoration: none;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   transition: color 0.4s var(--ease-smooth), border-color 0.4s;
   z-index: 1;
}

.magnetic-btn::before {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--col-gold);
   border-radius: 50%;
   transition: transform 0.6s var(--ease-smooth);
   z-index: -1;
}

.magnetic-btn:hover {
   color: var(--col-obsidian);
}

.magnetic-btn:hover::before {
   transform: translateY(-100%) scale(2);
   border-radius: 0;
}

/* ==========================================================================
      HEADER (STRICT CONSISTENCY)
      ========================================================================== */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: var(--header-h);
   display: flex;
   align-items: center;
   z-index: 1000;
   transition: background 0.5s var(--ease-smooth), padding 0.5s var(--ease-smooth);
   border-bottom: 1px solid transparent;
}

.site-header.scrolled {
   background: rgba(5, 5, 5, 0.85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--col-border);
   height: 80px;
}

.nav-wrapper {
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
   padding: 0 5vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo-img {
   height: 90px;
   filter: invert(1);
}

.nav-links {
   display: flex;
   gap: 3vw;
   list-style: none;
}

.nav-links a {
   color: var(--col-alabaster);
   text-decoration: none;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   position: relative;
   overflow: hidden;
   display: inline-block;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 100%;
   height: 1px;
   background: var(--col-gold);
   transform: translateX(-101%);
   transition: transform 0.4s var(--ease-out-expo);
}

.nav-links a:hover::after {
   transform: translateX(0);
}

.menu-toggle {
   display: none;
   color: var(--col-gold);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   cursor: pointer;
}

/* ==========================================================================
      HERO SECTION (Editorial Layout)
      ========================================================================== */
.hero {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   padding-top: var(--header-h);
}

.hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at 80% 20%, var(--col-charcoal) 0%, var(--col-obsidian) 70%);
   z-index: -2;
}

/* Abstract Golden Orbs (Simulated 3D) */
.gold-orb {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, var(--col-gold), transparent 60%);
   filter: blur(60px);
   opacity: 0.15;
   animation: orbFloat 15s ease-in-out infinite alternate;
   z-index: -1;
}

.orb-1 {
   width: 500px;
   height: 500px;
   top: -10%;
   right: -10%;
}

.orb-2 {
   width: 400px;
   height: 400px;
   bottom: 10%;
   left: -5%;
   animation-delay: -5s;
}

@keyframes orbFloat {
   0% {
      transform: translate(0, 0) scale(1);
   }

   100% {
      transform: translate(-100px, 100px) scale(1.2);
   }
}

.hero-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 2rem;
}

.hero-subtitle {
   max-width: 400px;
   color: var(--col-gray);
   font-size: 1.1rem;
}

.hero-title-wrap {
   overflow: hidden;
}

.hero-title-wrap span {
   display: block;
   transform: translateY(110%);
   animation: revealUp 1.2s var(--ease-out-expo) forwards;
}

.hero-title-wrap:nth-child(2) span {
   animation-delay: 0.2s;
}

@keyframes revealUp {
   to {
      transform: translateY(0);
   }
}

/* ==========================================================================
      MARQUEE (Large Outlined Serif)
      ========================================================================== */
.marquee-section {
   padding: 3rem 0;
   border-top: 1px solid var(--col-border);
   border-bottom: 1px solid var(--col-border);
   overflow: hidden;
   display: flex;
   white-space: nowrap;
}

.marquee-inner {
   display: flex;
   animation: marquee 25s linear infinite;
}

.marquee-text {
   font-family: var(--font-serif);
   font-size: 5rem;
   color: transparent;
   -webkit-text-stroke: 1px var(--col-gray);
   padding: 0 2rem;
   font-style: italic;
}

.marquee-text span {
   -webkit-text-stroke: 0;
   color: var(--col-gold);
   font-style: normal;
}

@keyframes marquee {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

/* ==========================================================================
      ABOUT / PHILOSOPHY
      ========================================================================== */
.about-grid {
   display: grid;
   grid-template-columns: 4fr 6fr;
   gap: 8vw;
   align-items: center;
}

.about-text p {
   font-size: clamp(1.2rem, 2vw, 1.8rem);
   line-height: 1.5;
   color: var(--col-alabaster);
   margin-bottom: 2rem;
}

.about-img-wrap {
   position: relative;
   width: 100%;
   height: 600px;
   overflow: hidden;
   border-radius: 4px;
}

.about-img-wrap::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--col-obsidian);
   transition: height 1.5s var(--ease-out-expo);
}

.about-img-wrap.is-visible::after {
   height: 0;
}

.about-abstract {
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, var(--col-charcoal), var(--col-obsidian));
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--col-border);
}

.about-abstract svg {
   width: 50%;
   opacity: 0.5;
   stroke: var(--col-gold);
}

/* ==========================================================================
      SERVICES (HORIZONTAL SCROLL SIMULATION via CSS/JS)
      ========================================================================== */
.h-scroll-container {
   height: 100vh;
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--col-charcoal);
}

.h-scroll-wrap {
   display: flex;
   gap: 5vw;
   padding: 0 5vw;
   width: max-content;
}

.service-card {
   width: 35vw;
   min-width: 400px;
   height: 60vh;
   background: var(--col-obsidian);
   border: 1px solid var(--col-border);
   padding: 4rem 3rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: transform 0.5s var(--ease-out-expo), border-color 0.5s;
}

.service-card:hover {
   transform: translateY(-15px);
   border-color: var(--col-gold);
}

.serv-num {
   font-family: var(--font-serif);
   font-size: 3rem;
   color: var(--col-gold-dim);
}

.serv-title {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   font-family: var(--font-serif);
}

.serv-desc {
   color: var(--col-gray);
   font-size: 1.1rem;
}

/* ==========================================================================
      DATA / CAMPAIGN REPORTS (Editorial Chart)
      ========================================================================== */
.reports-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6vw;
   align-items: center;
}

.chart-editorial {
   width: 100%;
   height: 400px;
   border-bottom: 1px solid var(--col-gold);
   border-left: 1px solid var(--col-gold);
   position: relative;
}

.chart-svg {
   width: 100%;
   height: 100%;
   overflow: visible;
}

.chart-line {
   fill: none;
   stroke: var(--col-gold);
   stroke-width: 3;
   stroke-dasharray: 2000;
   stroke-dashoffset: 2000;
   transition: stroke-dashoffset 2.5s var(--ease-out-expo);
}

.chart-line.is-visible {
   stroke-dashoffset: 0;
}

.chart-points circle {
   fill: var(--col-obsidian);
   stroke: var(--col-gold);
   stroke-width: 2;
   opacity: 0;
   transition: opacity 0.5s 2s;
}

.chart-line.is-visible+.chart-points circle {
   opacity: 1;
}

/* ==========================================================================
      ROI CALCULATOR (Minimalist High-End)
      ========================================================================== */
.calc-section {
   background: var(--col-charcoal);
   border-top: 1px solid var(--col-border);
   border-bottom: 1px solid var(--col-border);
}

.calc-wrapper {
   max-width: 900px;
   margin: 0 auto;
   background: var(--col-obsidian);
   padding: 5rem;
   border: 1px solid var(--col-border);
}

.calc-slider-wrap {
   margin-bottom: 4rem;
}

.calc-slider-wrap label {
   display: flex;
   justify-content: space-between;
   font-family: var(--font-serif);
   font-size: 1.5rem;
   color: var(--col-gray);
   margin-bottom: 1rem;
}

#budget-val {
   color: var(--col-gold);
   font-size: 2rem;
}

.lux-slider {
   -webkit-appearance: none;
   width: 100%;
   background: transparent;
}

.lux-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   height: 20px;
   width: 20px;
   background: var(--col-gold);
   border-radius: 50%;
   cursor: pointer;
   margin-top: -9px;
}

.lux-slider::-webkit-slider-runnable-track {
   width: 100%;
   height: 2px;
   background: var(--col-border);
}

.calc-results {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   text-align: center;
}

.res-box {
   padding: 2rem;
   border: 1px solid var(--col-border);
}

.res-title {
   text-transform: uppercase;
   font-size: 0.8rem;
   letter-spacing: 0.1em;
   color: var(--col-gray);
   margin-bottom: 1rem;
}

.res-num {
   font-family: var(--font-serif);
   font-size: 3.5rem;
   color: var(--col-alabaster);
}

/* ==========================================================================
      INDUSTRIES (Accordion / Hover Reveal)
      ========================================================================== */
.industry-list {
   border-top: 1px solid var(--col-border);
}

.industry-row {
   padding: 3rem 0;
   border-bottom: 1px solid var(--col-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   transition: padding 0.4s var(--ease-out-expo);
   position: relative;
   overflow: hidden;
}

.industry-row::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--col-gold-dim);
   transform: scaleY(0);
   transform-origin: bottom;
   transition: transform 0.4s var(--ease-out-expo);
   z-index: -1;
}

.industry-row:hover {
   padding-left: 2rem;
   padding-right: 2rem;
}

.industry-row:hover::before {
   transform: scaleY(1);
}

.industry-row:hover .ind-title {
   color: var(--col-gold);
}

.ind-title {
   font-family: var(--font-serif);
   font-size: 4rem;
   transition: color 0.4s;
}

.ind-meta {
   font-family: var(--font-sans);
   color: var(--col-gray);
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

/* ==========================================================================
      TESTIMONIALS (Large Editorial Serif)
      ========================================================================== */
.testi-wrap {
   max-width: 1000px;
   margin: 0 auto;
   text-align: center;
}

.quote-mark {
   font-family: var(--font-serif);
   font-size: 8rem;
   color: var(--col-gold);
   line-height: 0;
   margin-bottom: 3rem;
   display: block;
}

.testi-text {
   font-family: var(--font-serif);
   font-size: clamp(2rem, 4vw, 3rem);
   line-height: 1.3;
   margin-bottom: 3rem;
   font-style: italic;
}

.testi-author {
   text-transform: uppercase;
   letter-spacing: 0.15em;
   font-size: 0.9rem;
   color: var(--col-gray);
}

/* ==========================================================================
      CONTACT CTA & FORM
      ========================================================================== */
.contact-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   background: var(--col-charcoal);
   border: 1px solid var(--col-border);
}

.contact-left {
   padding: 8vw 5vw;
   border-right: 1px solid var(--col-border);
}

.contact-right {
   padding: 8vw 5vw;
}

.form-group {
   margin-bottom: 3rem;
   position: relative;
}

.lux-input {
   width: 100%;
   background: transparent;
   border: none;
   border-bottom: 1px solid var(--col-border);
   padding: 1rem 0;
   color: var(--col-alabaster);
   font-family: var(--font-sans);
   font-size: 1.1rem;
   transition: border-color 0.4s;
   outline: none;
}

.lux-input:focus {
   border-color: var(--col-gold);
}

.lux-input::placeholder {
   color: var(--col-gray);
}

textarea.lux-input {
   resize: none;
   height: 120px;
}

.contact-details {
   margin-top: 4rem;
}

.detail-item {
   margin-bottom: 2rem;
}

.detail-label {
   display: block;
   color: var(--col-gray);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 0.5rem;
}

.detail-val {
   font-family: var(--font-serif);
   font-size: 1.5rem;
   color: var(--col-alabaster);
}

/* ==========================================================================
      FOOTER (STRICT CONSISTENCY)
      ========================================================================== */
.site-footer {
   background: var(--col-obsidian);
   padding: 6rem 0 2rem;
   border-top: 1px solid var(--col-border);
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.5fr;
   gap: 4rem;
   margin-bottom: 6rem;
}

.footer-logo {
   height: 90px;
   filter: invert(1);
   margin-bottom: 2rem;
}

.footer-desc {
   color: var(--col-gray);
   font-size: 1rem;
   max-width: 300px;
   line-height: 1.8;
}

.footer-col h4 {
   font-family: var(--font-sans);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: var(--col-alabaster);
   margin-bottom: 2rem;
}

.footer-links {
   list-style: none;
}

.footer-links li {
   margin-bottom: 1rem;
}

.footer-links a,
.footer-links span {
   color: var(--col-gray);
   text-decoration: none;
   font-size: 1rem;
   transition: color 0.3s;
}

.footer-links a:hover {
   color: var(--col-gold);
}

.footer-bottom {
   border-top: 1px solid var(--col-border);
   padding-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: var(--col-gray);
   font-size: 0.85rem;
}

.legal-links {
   display: flex;
   gap: 2rem;
}

.legal-links a {
   color: var(--col-gray);
   text-decoration: none;
   transition: color 0.3s;
}

.legal-links a:hover {
   color: var(--col-gold);
}

/* ==========================================================================
      LIVE CHAT WIDGET
      ========================================================================== */
.chat-widget {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   z-index: 9999;
}

.chat-btn {
   width: 65px;
   height: 65px;
   background: var(--col-gold);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
   transition: transform 0.3s;
}

.chat-btn:hover {
   transform: scale(1.05);
}

.chat-btn svg {
   width: 30px;
   height: 30px;
   fill: var(--col-obsidian);
}

/* ==========================================================================
      LEGAL PAGES
      ========================================================================== */
.legal-hero {
   padding: 15rem 0 5rem;
   border-bottom: 1px solid var(--col-border);
}

.legal-content-wrap {
   max-width: 900px;
   margin: 0 auto;
   padding: 6rem 0;
}

.legal-content-wrap h2 {
   font-family: var(--font-serif);
   font-size: 2.5rem;
   color: var(--col-gold);
   margin: 4rem 0 1.5rem;
}

.legal-content-wrap p {
   color: var(--col-gray);
   font-size: 1.1rem;
   margin-bottom: 1.5rem;
   line-height: 1.8;
}

/* ==========================================================================
      ANIMATION UTILS
      ========================================================================== */
.reveal-text {
   overflow: hidden;
}

.reveal-text>* {
   transform: translateY(100%);
   transition: transform 1s var(--ease-out-expo);
}

.reveal-text.is-visible>* {
   transform: translateY(0);
}

.fade-up {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.fade-up.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* ==========================================================================
      MEDIA QUERIES
      ========================================================================== */
@media (max-width: 1200px) {
   .about-grid {
      grid-template-columns: 1fr;
      gap: 4rem;
   }

   .reports-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 992px) {
   .contact-split {
      grid-template-columns: 1fr;
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
   }

   .marquee-text {
      font-size: 3rem;
   }
}

@media (max-width: 768px) {
   .nav-links {
      display: none;
   }

   .menu-toggle {
      display: block;
   }

   .footer-grid {
      grid-template-columns: 1fr;
   }

   .footer-bottom {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
   }

   .h-scroll-container {
      height: auto;
      padding: 5rem 0;
      overflow-x: auto;
      background: var(--col-obsidian);
   }

   .h-scroll-wrap {
      padding: 0 5vw;
   }

   .service-card {
      width: 80vw;
      height: auto;
      min-height: 400px;
   }

   .ind-title {
      font-size: 2.5rem;
   }
}