/* ==========================================================================
   AGHAJANYANS AGENCY PREMIUM WEBSITE INTERFACE DESIGN
   ========================================================================== */

:root {
    --gold-base: #c5a880;
    --gold-light: #f3e3cd;
    --gold-dark: #8c714c;
    --gold-glow: rgba(197, 168, 128, 0.12);
    --bg-absolute: #030303;
    --bg-card-dark: #09090b;
    --text-white: #ffffff;
    --text-editorial: #f4f4f6;
    --text-muted: #8e8e93;
    --text-dimmed: #48484a;
    --font-serif: 'Cinzel', serif;
    --font-sans: 'Montserrat', sans-serif;
    --space-gutter: clamp(16px, 5vw, 80px);
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hard resetting margins, word paddings, preventing scrolling overflows */
*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0; outline: none; border: none;
    list-style: none; text-decoration: none; -webkit-font-smoothing: antialiased;
    word-break: break-word;
}

html, body {
    width: 100%; height: 100%; height: -webkit-fill-available;
    background-color: var(--bg-absolute); font-family: var(--font-sans);
    color: var(--text-editorial); overflow: hidden; position: relative;
    font-weight: 300; line-height: 1.6;
}

/* Premium System Preloader layout */
#agency-preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-absolute); z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s var(--ease-premium), visibility 0.8s var(--ease-premium);
}
#agency-preloader.fade-out { opacity: 0; visibility: hidden; }
.loader-content-wrap { display: flex; flex-direction: column; align-items: center; width: 85%; max-width: 360px; text-align: center; }
.gold-matrix-spinner { width: 50px; height: 50px; border: 1px solid var(--gold-base); border-top-color: transparent; border-radius: 50%; animation: matrixSpin 1s infinite linear; margin-bottom: 24px; }
@keyframes matrixSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loader-brand { font-family: var(--font-serif); font-size: 2rem; letter-spacing: 0.25em; color: var(--text-white); font-weight: 600; }
.loader-sub { font-size: 0.65rem; letter-spacing: 0.5em; color: var(--gold-base); margin-top: 6px; text-transform: uppercase; }
.loader-track { width: 100%; height: 1px; background: rgba(255,255,255,0.06); margin: 24px 0; overflow: hidden; position: relative; }
.loader-fill { position: absolute; top:0; left:0; height:100%; width:0%; background: var(--gold-base); }
.loader-status { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; }

/* Interactive Three.js WebGL Core Viewport */
#luxury-3d-canvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index: 1; pointer-events: none; }
.cinematic-overlay-rig { position: fixed; top:0; left:0; width:100%; height:100%; z-index: 2; pointer-events: none; }
.vignette-layer { position: absolute; width:100%; height:100%; background: radial-gradient(circle, transparent 20%, rgba(3,3,3,0.4) 60%, rgba(3,3,3,0.95) 100%); }
.grain-layer { position: absolute; width:100%; height:100%; opacity: 0.01; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ffilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95'/%3E%3Ffilter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Luxury Header Matrix */
.agency-header { position: fixed; top:0; left:0; width:100%; height:clamp(70px, 11vh, 100px); z-index: 500; display: flex; align-items: center; }
.header-glass-bg { position: absolute; width:100%; height:100%; background: linear-gradient(to bottom, rgba(3,3,3,0.9), transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.header-inner { width:100%; max-width:1700px; margin:0 auto; padding: 0 var(--space-gutter); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 5; }

.brand-txt { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.5vw, 1.5rem); letter-spacing: 0.2em; color: var(--text-white); display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; }
.brand-txt small { font-family: var(--font-sans); font-size: 0.6rem; color: var(--gold-base); letter-spacing: 0.45em; margin-top: 3px; font-weight: 300; }

.desktop-navigation ul { display: flex; gap: 32px; }
.nav-link { font-size: 0.7rem; letter-spacing: 0.25em; color: var(--text-muted); text-transform: uppercase; position: relative; padding: 6px 0; transition: color 0.3s; }
.nav-link:hover, .nav-link.active { color: var(--text-white); }
.nav-link::after { content:''; position: absolute; bottom:0; left:0; width:0; height:1px; background: var(--gold-base); transition: width 0.4s var(--ease-premium); }
.nav-link.active::after { width: 100%; }

.quick-call-anchor { display: inline-flex; border: 1px solid rgba(197,168,128,0.3); padding: 8px 18px; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-white); background: var(--gold-glow); transition: all 0.3s; }
.quick-call-anchor:hover { border-color: var(--gold-base); transform: translateY(-1px); }

.mobile-hamburger { display: none; flex-direction: column; justify-content: space-between; width: 22px; height: 14px; background: none; cursor: pointer; }
.mobile-hamburger span { width: 100%; height: 1px; background: var(--text-white); transition: all 0.3s; }
.mobile-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(-45deg); }
.mobile-hamburger.active span:nth-child(2) { opacity: 0; }
.mobile-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(45deg); }

/* Main Rigid UI Panels */
#storyboard-matrix-wrapper { position: relative; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.story-panel {
    position: absolute; top:0; left:0; width:100%; height:100%; display: flex; align-items: center;
    padding: 0 var(--space-gutter); opacity: 0; visibility: hidden; transform: translateY(30px);
    transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium), visibility 0.8s var(--ease-premium);
}
.story-panel.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.panel-inner { 
    width: 100%; max-width: 700px; text-shadow: 0 4px 20px rgba(0,0,0,0.95);
    max-height: 72vh; overflow-y: auto; padding-right: 8px;
}
.panel-inner::-webkit-scrollbar { width: 2px; }
.panel-inner::-webkit-scrollbar-thumb { background: var(--gold-base); }

.section-tagline { font-size: clamp(0.65rem, 1.5vw, 0.75rem); letter-spacing: 0.4em; color: var(--gold-base); text-transform: uppercase; display: block; margin-bottom: 12px; font-weight: 500; }
.panel-headline { font-family: var(--font-serif); font-size: clamp(1.8rem, 5.5vw, 3.5rem); line-height: 1.2; color: var(--text-white); font-weight: 400; }
.gold-gradient-txt { color: var(--gold-light); background: linear-gradient(135deg, var(--gold-white), var(--gold-base)); }
.geometric-separator { width: 80px; height: 1px; background: linear-gradient(90deg, var(--gold-base), transparent); margin: clamp(15px, 4vh, 30px) 0; }
.panel-paragraph { font-size: clamp(0.85rem, 2vw, 1rem); line-height: 1.8; color: var(--text-editorial); margin-bottom: 35px; font-weight: 300; }

.luxury-action-btn {
    display: inline-flex; border: 1px solid rgba(255,255,255,0.15); padding: 14px 28px;
    color: var(--text-white); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
    background: rgba(10,10,10,0.5); backdrop-filter: blur(5px); transition: all 0.3s;
}
.luxury-action-btn:hover { border-color: var(--gold-base); background: var(--gold-glow); transform: translateX(3px); }

/* Premium Grid Elements */
.metrics-premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; width: 100%; }
.metric-card { background: rgba(9, 9, 11, 0.4); border-left: 1px solid var(--gold-base); padding: 20px; backdrop-filter: blur(4px); }
.metric-val { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold-light); font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.metric-lbl { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

.three-instruction-box { display: flex; align-items: center; gap: 16px; padding: 20px; background: rgba(197,168,128,0.03); border: 1px dashed rgba(197,168,128,0.3); }
.pulsing-radar-dot { width: 8px; height: 8px; background: var(--gold-base); border-radius: 50%; box-shadow: 0 0 10px var(--gold-base); animation: radarPulse 2s infinite ease-in-out; }
@keyframes radarPulse { 0% { transform: scale(0.9); opacity: 0.4; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.4; } }
.instruction-txt { font-size: 0.85rem; color: var(--text-white); }

.address-luxury-badge { display: flex; align-items: center; gap: 20px; background: var(--bg-card-dark); border: 1px solid rgba(197,168,128,0.2); padding: 20px; width: 100%; }
.badge-icon-wrap { font-size: 1.8rem; }
.badge-title { display: block; font-family: var(--font-serif); font-size: 1.3rem; color: var(--text-white); letter-spacing: 0.1em; }
.badge-sub { font-size: 0.75rem; color: var(--text-muted); }

/* Form/Interactive Contact terminal link cards */
.contact-terminal-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.phone-links-cluster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.phone-terminal-card { display: flex; flex-direction: column; background: #070708; border: 1px solid rgba(255,255,255,0.06); padding: 18px; transition: all 0.3s; }
.phone-terminal-card:hover { border-color: var(--gold-base); background: var(--gold-glow); }
.terminal-lbl { font-size: 0.6rem; color: var(--gold-base); letter-spacing: 0.15em; }
.terminal-num { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.5vw, 1.4rem); color: var(--text-white); margin-top: 4px; }
.messenger-grid-api { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.msg-box-api { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 0.75rem; color: var(--text-white); text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid rgba(255,255,255,0.08); transition: background 0.3s; }
.wa-api:hover { background: rgba(37, 211, 102, 0.1); border-color: #25D366; }
.vb-api:hover { background: rgba(115, 98, 163, 0.1); border-color: #7362a3; }

/* Timeline Core Overlays */
.luxury-sidebar-timeline { position: fixed; right: var(--space-gutter); top: 50%; transform: translateY(-50%); z-index: 400; height: 260px; display: flex; align-items: center; }
.timeline-rail { position: absolute; right: 0; top:0; width:1px; height:100%; background: rgba(255,255,255,0.06); }
.timeline-indicator-core { position: absolute; right:0; top:0; width:1px; height:0%; background: var(--gold-base); transition: height 0.4s var(--ease-premium); }
.timeline-bullet-nodes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position: relative; }
.bullet-node { display: flex; align-items: center; gap: 16px; cursor: pointer; opacity: 0.2; transition: opacity 0.3s; }
.bullet-node.active { opacity: 1; }
.bullet-label { font-size: 0.55rem; letter-spacing: 0.15em; color: var(--text-white); opacity: 0; transform: translateX(10px); transition: all 0.3s; }
.bullet-node:hover .bullet-label { opacity: 1; transform: translateX(0); }
.bullet-idx { font-family: var(--font-serif); font-size: 0.7rem; color: var(--text-white); width: 16px; text-align: right; }
.bullet-node.active .bullet-idx { color: var(--gold-base); font-weight: bold; }

/* Mechanical Button Wheel Overlays */
.matrix-navigation-wheels { position: fixed; left: var(--space-gutter); bottom: clamp(20px, 5vh, 50px); z-index: 400; display: flex; gap: 8px; }
.wheel-action-btn { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.08); background: rgba(3,3,3,0.8); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: all 0.3s; }
.wheel-action-btn:hover { border-color: var(--gold-base); color: var(--gold-base); }

/* Architectural Fixed Footer block */
.cinematic-screen-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; padding: 0 var(--space-gutter); z-index: 100; display: flex; justify-content: space-between; align-items: center; font-size: 0.6rem; letter-spacing: 0.12em; color: var(--text-dimmed); pointer-events: none; }

/* Mobile Overlay Matrix Override */
.mobile-navigation-matrix-overlay { position: fixed; top:0; left:0; width:100%; height:100%; z-index: 450; visibility: hidden; opacity: 0; transition: all 0.4s ease; }
.mobile-navigation-matrix-overlay.open { visibility: visible; opacity: 1; }
.overlay-mesh-bg { position: absolute; width:100%; height:100%; background: rgba(3,3,3,0.98); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.overlay-content-center { position: relative; width:100%; height:100%; display: flex; justify-content: center; align-items: center; }
.mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.mobile-anchor { font-family: var(--font-serif); font-size: 1.6rem; letter-spacing: 0.1em; color: var(--text-white); text-transform: uppercase; }
.mobile-anchor.active { color: var(--gold-base); }

/* Full Media Responsive Balancing Layout Convergence */
@media (max-width: 1024px) {
    .desktop-navigation, .luxury-sidebar-timeline { display: none !important; }
    .mobile-hamburger { display: flex; }
    .quick-call-anchor { display: none !important; }
    .story-panel { justify-content: center; }
    .panel-inner { text-align: center; display: flex; flex-direction: column; align-items: center; max-height: 65vh; }
    .geometric-separator { margin: 15px auto; }
    .matrix-navigation-wheels { left: 50%; transform: translateX(-50%); bottom: clamp(50px, 8vh, 75px); }
    .cinematic-screen-footer { justify-content: center; }
    .footer-segment-right { display: none !important; }
}

@media (max-width: 480px) {
    :root { var(--space-gutter): 16px; }
    .panel-inner { max-height: 60vh; }
    .luxury-action-btn, .address-luxury-badge, .messenger-grid-api { width: 100%; justify-content: center; }
}

/* Landscape Mobile Layout Adjustment Clamping matrix */
@media (max-height: 440px) {
    .agency-header { height: 50px; }
    .panel-inner { max-height: 55vh; }
    .panel-headline { font-size: 1.4rem; }
    .panel-paragraph, .geometric-separator, .matrix-navigation-wheels { display: none !important; }
}