/*======================================================
  CONTACT PAGE
======================================================*/

:root{
    --contact-gold:#f4c542;
    --contact-gold-light:#ffd76a;
    --contact-dark:#070707;
    --contact-card:#111111;
    --contact-border:rgba(255,255,255,.08);
}

/*======================================================
  BREADCRUMB
======================================================*/

.breadcrumb{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:30px;
    color:rgba(255,255,255,.55);
    font-size:14px;
}

.breadcrumb a{
    color:rgba(255,255,255,.7);
    transition:.3s ease;
}

.breadcrumb a:hover{
    color:var(--contact-gold);
}

/*======================================================
  HERO
======================================================*/

.contact-hero-section{

    position:relative;
    overflow:hidden;

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:180px 0 120px;

    background:
    radial-gradient(circle at 80% 20%,
    rgba(244,197,66,.14),
    transparent 35%),

    radial-gradient(circle at 20% 80%,
    rgba(255,255,255,.04),
    transparent 40%),

    linear-gradient(
    180deg,
    #050505,
    #0b0b0b 60%,
    #090909);

}

/*======================================================
 GRID
======================================================*/

.contact-grid-bg{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

    linear-gradient(90deg,
    rgba(255,255,255,.025) 1px,
    transparent 1px);

    background-size:60px 60px;

    opacity:.35;

}

/*======================================================
 GLOW
======================================================*/

.contact-glow{

    position:absolute;
    inset:0;

    background:

    radial-gradient(circle at 75% 25%,
    rgba(244,197,66,.18),
    transparent 28%);

    animation:glowMove 10s ease-in-out infinite;

}

@keyframes glowMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-40px);

}

100%{

transform:translateY(0);

}

}

/*======================================================
 HERO GRID
======================================================*/

.contact-hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:80px;

align-items:center;

position:relative;

z-index:5;

}

/*======================================================
 HERO TEXT
======================================================*/

.contact-hero-content h1{

font-family:"Playfair Display",serif;

font-size:clamp(68px,8vw,108px);

line-height:.9;

margin:28px 0;

letter-spacing:-2px;

max-width:780px;

}

.contact-hero-content h1::first-line{

color:var(--contact-gold);

}

.contact-hero-content p{

font-size:19px;

line-height:1.9;

max-width:680px;

color:rgba(255,255,255,.76);

margin-bottom:40px;

}

.contact-hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:45px;

}

.contact-hero-note{

padding:22px 28px;

border-left:4px solid var(--contact-gold);

background:rgba(255,255,255,.04);

backdrop-filter:blur(12px);

border-radius:18px;

color:rgba(255,255,255,.72);

max-width:650px;

}

/*======================================================
 CONCIERGE CARD
======================================================*/

.contact-hero-visual{

display:flex;

justify-content:center;

align-items:center;

}

.concierge-card{

width:420px;

padding:55px;

border-radius:34px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(22px);

box-shadow:

0 40px 90px rgba(0,0,0,.45),

0 0 60px rgba(244,197,66,.12);

position:relative;

overflow:hidden;

}

.concierge-card::before{

content:"";

position:absolute;

top:-100px;

right:-100px;

width:220px;

height:220px;

background:

radial-gradient(circle,
rgba(244,197,66,.28),
transparent);

}

.concierge-icon{

width:100px;

height:100px;

border-radius:24px;

background:linear-gradient(
145deg,
var(--contact-gold-light),
var(--contact-gold));

display:flex;

justify-content:center;

align-items:center;

margin-bottom:30px;

box-shadow:

0 25px 45px rgba(244,197,66,.25);

}

.concierge-icon i{

font-size:46px;

color:#111;

}

.concierge-card h3{

font-size:34px;

margin-bottom:18px;

font-family:"Playfair Display",serif;

}

.concierge-card p{

line-height:1.8;

color:rgba(255,255,255,.74);

margin-bottom:35px;

}

.concierge-lines{

display:grid;

gap:14px;

}

.concierge-lines span{

height:2px;

background:rgba(255,255,255,.08);

border-radius:30px;

position:relative;

overflow:hidden;

}

.concierge-lines span::after{

content:"";

position:absolute;

left:0;

top:0;

height:100%;

width:35%;

background:var(--contact-gold);

}

/*======================================================
 ROUTING SECTION
======================================================*/

.contact-routing-section{

padding:120px 0;

background:

linear-gradient(
180deg,
#090909,
#050505);

}

.routing-header{

text-align:center;

max-width:820px;

margin:auto;

margin-bottom:70px;

}

.routing-header h2{

font-family:"Playfair Display",serif;

font-size:clamp(46px,6vw,72px);

margin:25px 0;

}

.routing-header p{

line-height:1.9;

color:rgba(255,255,255,.72);

}

/*======================================================
 ROUTING GRID
======================================================*/

.routing-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

@media (max-width:900px){

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

}

/*======================================================
 CARD
======================================================*/

.routing-card{

padding:42px;

border-radius:28px;

background:#111;

border:1px solid rgba(255,255,255,.08);

transition:.45s;

position:relative;

overflow:hidden;

display:flex;

flex-direction:column;

}

.routing-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:4px;

width:0;

background:var(--contact-gold);

transition:.45s;

}

.routing-card:hover{

transform:translateY(-14px);

border-color:rgba(244,197,66,.30);

box-shadow:

0 30px 70px rgba(0,0,0,.45);

}

.routing-card:hover::before{

width:100%;

}

.routing-card i{

font-size:52px;

color:var(--contact-gold);

margin-bottom:28px;

transition:.4s;

}

.routing-card:hover i{

transform:rotate(-10deg) scale(1.08);

}

.routing-card h3{

font-family:"Playfair Display",serif;

font-size:34px;

margin-bottom:20px;

}

.routing-card p{

color:rgba(255,255,255,.72);

line-height:1.8;

margin-bottom:35px;

flex:1;

}

.routing-card a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--contact-gold);

text-decoration:none;

transition:.35s;

}

.routing-card a:hover{

gap:18px;

}

/*======================================================
 GOLD CARD
======================================================*/

.routing-card.films{

background:

linear-gradient(
145deg,
#f4c542,
#ddb53a);

color:#111;

}

.routing-card.films i,

.routing-card.films h3,

.routing-card.films p,

.routing-card.films a{

color:#111;

}

.routing-card.films:hover{

box-shadow:

0 35px 90px rgba(244,197,66,.28);

}


/*======================================================
CONTACT FORM SECTION
======================================================*/

.contact-form-section{

    padding:140px 0;

    background:
    radial-gradient(circle at 15% 20%,
    rgba(244,197,66,.08),
    transparent 30%),

    radial-gradient(circle at 85% 70%,
    rgba(255,255,255,.03),
    transparent 35%),

    linear-gradient(180deg,#050505,#090909);

}

/*======================================================
GRID
======================================================*/

.contact-form-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:start;

}

/*======================================================
LEFT
======================================================*/

.form-intro{

    position:sticky;

    top:130px;

}

.form-intro h2{

    font-family:"Playfair Display",serif;

    font-size:clamp(48px,6vw,78px);

    line-height:.95;

    margin:25px 0;

}

.form-intro h2::first-line{

    color:var(--contact-gold);

}

.form-intro p{

    color:rgba(255,255,255,.72);

    line-height:1.9;

    margin-bottom:35px;

}

.form-intro-note{

    padding:26px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-left:4px solid var(--contact-gold);

    color:rgba(255,255,255,.72);

}

/*======================================================
FORM CARD
======================================================*/

.premium-form-card{

    position:relative;

    padding:50px;

    border-radius:34px;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03));

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    box-shadow:

    0 35px 90px rgba(0,0,0,.45);

}

.premium-form-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    background:

    linear-gradient(90deg,
    transparent,
    var(--contact-gold),
    transparent);

}

/*======================================================
FORM
======================================================*/

.premium-form-card form{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*======================================================
2 COLUMNS
======================================================*/

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

}

/*======================================================
LABEL
======================================================*/

.premium-form-card label{

    display:flex;

    flex-direction:column;

    gap:12px;

    font-weight:700;

    color:rgba(255,255,255,.86);

}

/*======================================================
INPUTS
======================================================*/

.premium-form-card input,
.premium-form-card select,
.premium-form-card textarea{

    width:100%;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.045);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:16px;

    transition:.35s;

    resize:none;

    outline:none;

}

.premium-form-card textarea{

    min-height:180px;

}

/*======================================================
PLACEHOLDER
======================================================*/

.premium-form-card input::placeholder,
.premium-form-card textarea::placeholder{

    color:rgba(255,255,255,.35);

}

/*======================================================
FOCUS
======================================================*/

.premium-form-card input:focus,
.premium-form-card textarea:focus,
.premium-form-card select:focus{

    border-color:rgba(244,197,66,.5);

    background:rgba(255,255,255,.065);

    box-shadow:

    0 0 0 5px rgba(244,197,66,.08);

}

/*======================================================
SELECT
======================================================*/

.premium-form-card select{

    cursor:pointer;

}

/*======================================================
FILM ROUTING PANEL
======================================================*/

/* Updated for smooth transition layout */
.film-routing-message {
    display: flex; /* Keep it flex permanently so responsive layouts work */
    align-items: center;
    gap: 22px;
    
    /* Hide the element smoothly using heights and opacity */
    max-height: 0;
    opacity: 0;
    padding: 0 28px; /* Remove top/bottom padding while closed */
    overflow: hidden;
    
    border-radius: 22px;
    background: linear-gradient(135deg, #f4c542, #ddb53a);
    transition: max-height 0.45s ease, opacity 0.35s ease, padding 0.45s ease;
}

/* When active, smoothly expand it */
.film-routing-message.active {
    max-height: 250px; /* Give it enough room to grow */
    opacity: 1;
    padding: 28px; /* Restore full padding */
}

.film-routing-message i{

    font-size:42px;

    color:#111;

}

.film-routing-message p{

    flex:1;

    color:#111;

    line-height:1.7;

    margin:0;

}

.film-routing-message a{

    padding:14px 22px;

    border-radius:14px;

    background:#111;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.film-routing-message a:hover{

    transform:translateY(-3px);

}

/*======================================================
DISCLAIMER
======================================================*/

.form-disclaimer{

    padding:22px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border-left:4px solid var(--contact-gold);

    color:rgba(255,255,255,.65);

    line-height:1.8;

    font-size:14px;

}

/*======================================================
BUTTON
======================================================*/

.premium-form-card .btn{

    width:100%;

    justify-content:center;

    padding:18px;

    font-size:17px;

    border-radius:18px;

    margin-top:10px;

}

/*======================================================
ANIMATION
======================================================*/

@keyframes slideDown{

from{

    opacity:0;

    transform:translateY(-20px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

/*======================================================
RESPONSIVE - HERO
======================================================*/

@media (max-width:992px){

.contact-hero-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:60px;
}

.breadcrumb,
.contact-hero-buttons{
    justify-content:center;
}

.contact-hero-content p,
.contact-hero-note{
    margin-left:auto;
    margin-right:auto;
}

.contact-hero-note{
    text-align:left;
}

.concierge-card{
    width:100%;
    max-width:420px;
}

}

@media (max-width:600px){

.contact-hero-content h1{
    font-size:50px;
}

.contact-hero-buttons{
    flex-direction:column;
}

.concierge-card{
    padding:36px;
}

}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1100px){

.contact-form-grid{

    grid-template-columns:1fr;

}

.form-intro{

    position:relative;

    top:auto;

    text-align:center;

}

.form-intro-note{

    text-align:left;

    max-width:600px;

    margin:0 auto;

}

}

@media(max-width:768px){

.form-row{

    grid-template-columns:1fr;

}

.premium-form-card{

    padding:30px;

}

.film-routing-message{

    flex-direction:column;

    text-align:center;

}

}

.fade-up{

opacity:0;

transform:translateY(45px);

transition:1s cubic-bezier(.22,1,.36,1);

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* NEW CLEAN FOCUS STYLE */
label.focused {
    color: var(--contact-gold);
    transition: color 0.3s ease;
}

.btn{

position:relative;

overflow:hidden;

}

.btn-ripple{

position:absolute;

width:12px;

height:12px;

background:rgba(255,255,255,.55);

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .65s ease-out;

pointer-events:none;

}

@keyframes ripple{

from{

width:0;

height:0;

opacity:.7;

}

to{

width:420px;

height:420px;

opacity:0;

}

}


/*======================================================
  OFFICIAL CONTACT SECTION
======================================================*/
.official-contact-section {
    padding: 100px 0;
    background: #050505;
}

.official-contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.official-contact-header h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 5vw, 56px);
    margin: 20px 0;
}

.official-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.official-card {
    padding: 35px;
    border-radius: 22px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.official-card:hover {
    transform: translateY(-8px);
    border-color: rgba(244, 197, 66, .3);
}

.official-card i {
    font-size: 36px;
    color: var(--contact-gold);
    margin-bottom: 20px;
}

.official-card span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 8px;
}

.official-card strong {
    font-size: 18px;
    color: #ffffff;
    word-break: break-all;
}

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

  
}

/*======================================================
  SECURITY NOTICE SECTION
======================================================*/
.contact-security-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #050505, #090909);
}

.contact-security-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.security-copy h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 5vw, 52px);
    margin: 20px 0;
}

.security-copy p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 35px;
}

.security-email-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.security-email-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
}

.security-email-list span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
}

.security-email-list strong {
    color: var(--contact-gold);
}

.security-panel {
    padding: 45px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 4px solid #ef4444; /* Alert Crimson accent line */
    border-radius: 28px;
    text-align: center;
}

.security-panel i {
    font-size: 48px;
    color: #ef4444;
    margin-bottom: 22px;
}

.security-panel h3 {
    font-size: 24px;
    margin-bottom: 14px;
}

.security-panel p {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    font-size: 15px;
}

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

/*======================================================
  FINAL CTA SECTION
======================================================*/
.contact-cta-section {
    padding: 140px 0;
    background: radial-gradient(circle at 50% 50%, rgba(244, 197, 66, 0.08), transparent 60%), #090909;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-cta-content {
    max-width: 750px;
    margin: 0 auto;
}

.contact-cta-content h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.1;
    margin: 25px 0;
}

.contact-cta-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 40px;
}

.contact-cta-content .btn {
    display: inline-flex;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 18px;
    background: var(--contact-gold);
    color: #111;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-cta-content .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(244, 197, 66, 0.2);
}

/*======================================================
  UNIFIED OFFICIAL CONTACT STYLE (Matches Grid Aesthetics)
======================================================*/
.official-contact-section {
    padding: 120px 0;
    background: #050505;
}

.official-contact-header {
    text-align: center;
    margin-bottom: 70px;
}

.official-contact-header h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(46px, 6vw, 72px);
    margin: 25px 0;
}

.official-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.official-card {
    padding: 42px;
    border-radius: 28px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), border-color 0.45s ease;
}

.official-card:hover {
    transform: translateY(-10px);
    border-color: rgba(244, 197, 66, .35);
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

.official-card i {
    font-size: 48px;
    color: var(--contact-gold);
    margin-bottom: 24px;
}

.official-card span {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 12px;
}

.official-card strong {
    font-size: 19px;
    color: #ffffff;
    word-break: break-all;
}

/*======================================================
  UNIFIED SECURITY NOTICE STYLE (Matches Transparency)
======================================================*/
.contact-security-section {
    padding: 140px 0;
    background: linear-gradient(180deg, #050505, #090909);
}

.contact-security-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 90px;
    align-items: center;
}

.security-copy h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 6vw, 78px);
    line-height: .95;
    margin: 25px 0;
}

.security-copy p {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.9;
    margin-bottom: 35px;
}

.security-email-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.security-email-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.security-email-list span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
}

.security-email-list strong {
    color: var(--contact-gold);
}

.security-panel {
    padding: 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border-radius: 34px;
    text-align: center;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
}

.security-panel i {
    font-size: 56px;
    color: #ef4444; /* Premium crimson warning color */
    margin-bottom: 24px;
}

.security-panel h3 {
    font-family: "Playfair Display", serif;
    font-size: 28px;
    margin-bottom: 16px;
}

.security-panel p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
    font-size: 16px;
}

/*======================================================
  RESPONSIVE UNIFICATION RESPONSES
======================================================*/
@media (max-width: 992px) {
    .official-contact-grid,
    .contact-security-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .security-panel {
        padding: 35px;
    }
}