/*
Theme Name: Unlimited Dreams Studio
Theme URI: https://example.com/
Author: Unlimited Dreams Graphic Design Multimedia Studio
Description: Dreamscape luxury one-page WordPress theme for Unlimited Dreams. Updated with a more cinematic celestial background aesthetic, richer clouds, premium glow effects, and the inquiry-safe submission workflow.
Version: 3.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: unlimited-dreams
*/

:root{
  --bg:#04101f;
  --bg-2:#07182f;
  --bg-3:#0b2443;
  --bg-4:#112f57;
  --card:#0a1c34;
  --card-2:#102748;
  --card-3:#143158;
  --gold:#d6a347;
  --gold-soft:#efcb85;
  --gold-deep:#b47b1f;
  --cream:#f6eedf;
  --cream-2:#efe6d7;
  --muted:#afbac8;
  --line:rgba(214,163,71,.24);
  --line-2:rgba(255,255,255,.08);
  --white:#ffffff;
  --shadow:0 26px 70px rgba(0,0,0,.42);
  --glow:0 0 0 1px rgba(214,163,71,.08), 0 24px 70px rgba(0,0,0,.34);
  --radius:28px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, Arial, Helvetica, sans-serif;
  --script: 'Snell Roundhand', 'Brush Script MT', cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--cream);
  background:
    radial-gradient(circle at 14% 12%, rgba(214,163,71,.11), transparent 16%),
    radial-gradient(circle at 88% 7%, rgba(214,163,71,.10), transparent 12%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.04), transparent 18%),
    linear-gradient(180deg, #020b15 0%, #051321 22%, #08192f 58%, #091b32 100%);
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.78;
  background-image:
    radial-gradient(2px 2px at 8% 10%, rgba(255,255,255,.95), transparent 52%),
    radial-gradient(2px 2px at 16% 34%, rgba(214,163,71,.95), transparent 52%),
    radial-gradient(2px 2px at 26% 68%, rgba(255,255,255,.8), transparent 52%),
    radial-gradient(2px 2px at 36% 16%, rgba(214,163,71,.86), transparent 52%),
    radial-gradient(2px 2px at 48% 26%, rgba(255,255,255,.8), transparent 52%),
    radial-gradient(2px 2px at 60% 78%, rgba(214,163,71,.9), transparent 52%),
    radial-gradient(2px 2px at 72% 14%, rgba(255,255,255,.85), transparent 52%),
    radial-gradient(2px 2px at 80% 30%, rgba(214,163,71,.85), transparent 52%),
    radial-gradient(2px 2px at 88% 18%, rgba(255,255,255,.72), transparent 52%),
    radial-gradient(2px 2px at 92% 62%, rgba(255,255,255,.74), transparent 52%),
    radial-gradient(2px 2px at 69% 48%, rgba(214,163,71,.78), transparent 52%),
    radial-gradient(2px 2px at 41% 86%, rgba(214,163,71,.75), transparent 52%);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; left:-12%; right:-12%; bottom:-10%; height:42vh;
  pointer-events:none; z-index:-1; opacity:.95;
  background:
    radial-gradient(ellipse at 14% 74%, rgba(238,242,250,.28) 0 11%, transparent 12%),
    radial-gradient(ellipse at 24% 78%, rgba(245,247,250,.24) 0 10%, transparent 11%),
    radial-gradient(ellipse at 34% 76%, rgba(241,244,249,.22) 0 12%, transparent 13%),
    radial-gradient(ellipse at 50% 80%, rgba(238,242,248,.16) 0 10%, transparent 11%),
    radial-gradient(ellipse at 66% 74%, rgba(240,243,249,.18) 0 12%, transparent 13%),
    radial-gradient(ellipse at 82% 77%, rgba(239,243,249,.22) 0 11%, transparent 12%),
    radial-gradient(ellipse at 92% 79%, rgba(240,243,249,.18) 0 10%, transparent 11%),
    linear-gradient(180deg, transparent 0%, rgba(8,22,41,.35) 100%);
  filter:blur(18px);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1200px, calc(100% - 40px));margin:0 auto}
.section{padding:92px 0;position:relative}
.section::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(214,163,71,.16), transparent);
}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;font-weight:800;margin:0 0 1rem}
h1,h2,h3,h4{margin:0;line-height:1.02}
h1,h2{font-family:var(--serif);letter-spacing:-.035em}
h1{font-size:clamp(3.3rem, 7vw, 6.9rem)}
h2{font-size:clamp(2.35rem, 4.9vw, 4.4rem)}
h3{font-size:1.28rem}
p{margin:0}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1rem 1.35rem;border-radius:999px;border:1px solid var(--line);
  color:var(--cream);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:.28s ease;cursor:pointer;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.btn:hover{transform:translateY(-2px);border-color:rgba(214,163,71,.55);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.btn.primary{background:linear-gradient(180deg, #efc466, #c88f2a);color:#08111c;border-color:transparent;box-shadow:0 18px 38px rgba(214,163,71,.25)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.outline{background:rgba(255,255,255,.03)}

.header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(20px);
  background:linear-gradient(180deg, rgba(3,13,24,.92), rgba(5,17,31,.74));
  border-bottom:1px solid rgba(214,163,71,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:1rem}
.brand{display:flex;align-items:center;gap:1rem;min-width:0}
.brand img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
.brand-text{line-height:1}
.brand-text .top{font-family:var(--serif);font-size:1.56rem;font-weight:700;color:var(--cream-2)}
.brand-text .top span{font-family:var(--script);color:var(--gold);font-size:1.15em;font-weight:400}
.brand-text .sub{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:.24rem}
.nav-links{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.nav-links a{padding:.82rem .96rem;border-radius:999px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#d9e1ec}
.nav-links a:hover{background:rgba(255,255,255,.05)}
.mobile-toggle{display:none;background:none;border:0;color:white;font-size:1.7rem}

.hero{position:relative;overflow:hidden;padding-top:6px}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 78% 21%, rgba(214,163,71,.18), transparent 10%),
    radial-gradient(circle at 82% 23%, rgba(243,223,170,.14), transparent 18%),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.04), transparent 16%),
    radial-gradient(circle at 45% 65%, rgba(255,255,255,.02), transparent 12%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 20%),
    radial-gradient(ellipse at 20% 100%, rgba(240,244,248,.10) 0 18%, transparent 19%),
    radial-gradient(ellipse at 48% 98%, rgba(240,244,248,.08) 0 16%, transparent 17%),
    radial-gradient(ellipse at 76% 100%, rgba(240,244,248,.08) 0 18%, transparent 19%);
  opacity:.95;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -110px 0;height:270px;
  background:linear-gradient(180deg, transparent, rgba(4,16,31,.96));pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center;min-height:calc(100vh - 88px);padding:56px 0 118px}
.hero-copy{position:relative;z-index:1}
.hero-copy p:not(.eyebrow){max-width:620px;color:var(--muted);font-size:1.08rem;margin:1.25rem 0 1.9rem}
.hero h1{text-shadow:0 2px 0 rgba(0,0,0,.12), 0 14px 32px rgba(0,0,0,.16)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.4rem}
.hero-pills{display:flex;flex-wrap:wrap;gap:.7rem}
.hero-pills span{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);padding:.58rem .84rem;border-radius:999px;font-size:.76rem;color:#dbe4ee;backdrop-filter:blur(8px)}
.hero-art{
  position:relative;isolation:isolate;padding:28px;border-radius:36px;
  background:linear-gradient(180deg, rgba(10,33,62,.93), rgba(7,20,38,.96));
  border:1px solid rgba(214,163,71,.22); box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.hero-art::before{
  content:"";position:absolute;inset:14px;border-radius:26px;border:1px solid rgba(214,163,71,.14);pointer-events:none
}
.hero-art::after{
  content:"";position:absolute;inset:-18px -14px auto auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(214,163,71,.28), rgba(214,163,71,0) 68%);filter:blur(10px);z-index:-1
}
.hero-art img{border-radius:22px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:32px}
.section-head p{max-width:620px;color:var(--muted)}

.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card,.stat-card,.testimonial,.contact-card,.about-panel,.process-step,.showcase .panel-image,.showcase .panel-copy,.portfolio-card,.contact-form{
  background:
    linear-gradient(180deg, rgba(14,39,73,.86), rgba(8,23,44,.92)),
    radial-gradient(circle at top right, rgba(214,163,71,.07), transparent 26%);
  border:1px solid rgba(214,163,71,.18);
  border-radius:var(--radius);
  box-shadow:var(--glow);
  position:relative;
  overflow:hidden;
}
.service-card::before,.stat-card::before,.testimonial::before,.contact-card::before,.about-panel::before,.process-step::before,.showcase .panel-image::before,.showcase .panel-copy::before,.portfolio-card::before,.contact-form::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent)
}
.service-card,.stat-card,.testimonial,.contact-card,.about-panel,.process-step{padding:26px}
.service-card .icon{font-size:1.8rem;margin-bottom:1rem;color:var(--gold-soft)}
.service-card p{color:var(--muted);margin:.78rem 0 1rem;font-size:.95rem}
.service-card a{color:var(--gold);font-weight:700;font-size:.86rem}
.service-card:hover,.portfolio-card:hover,.testimonial:hover,.process-step:hover{transform:translateY(-4px);transition:.28s ease}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.stat-card strong{display:block;font-size:2rem;font-family:var(--serif);color:var(--gold)}
.stat-card span{color:var(--muted);font-size:.9rem}

.portfolio-controls{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:24px}
.filter-btn{padding:.74rem 1rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--cream);cursor:pointer;font-weight:700;font-size:.82rem}
.filter-btn.active,.filter-btn:hover{background:rgba(214,163,71,.14);border-color:rgba(214,163,71,.4)}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.portfolio-card{display:flex;flex-direction:column}
.portfolio-card img{aspect-ratio:16/11;width:100%;object-fit:cover;border-bottom:1px solid rgba(214,163,71,.14)}
.portfolio-body{padding:20px}
.portfolio-meta{color:var(--gold);text-transform:uppercase;font-size:.72rem;letter-spacing:.16em;margin-bottom:.65rem}
.portfolio-body p{color:var(--muted);margin-top:.65rem;font-size:.95rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.about-panel p,.process-step p,.contact-card p,.testimonial p{color:var(--muted)}
.signature{font-family:var(--script);color:var(--gold-soft);font-size:2rem;margin-top:1rem}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.process-step .count{display:inline-flex;width:42px;height:42px;border-radius:999px;align-items:center;justify-content:center;background:rgba(214,163,71,.12);color:var(--gold);font-weight:800;margin-bottom:1rem}

.showcase{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:start}
.showcase .panel-image,.showcase .panel-copy{border-radius:32px}
.showcase .panel-image img{width:100%;height:100%;object-fit:cover}
.showcase .panel-copy{padding:28px}
.list{display:grid;gap:12px;margin:1.2rem 0 1.4rem}
.list span{display:flex;align-items:flex-start;gap:.7rem;color:#e2e9f2}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stars{color:var(--gold);letter-spacing:.2em;margin-bottom:1rem}
.author{margin-top:1rem;color:#e8eef8;font-weight:700}
.author small{display:block;color:var(--muted);font-weight:400;margin-top:.25rem}

.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}
.contact-form{padding:28px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,textarea,select{
  width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  padding:14px 16px;color:var(--cream);outline:none;backdrop-filter:blur(8px)
}
input:focus,textarea:focus,select:focus{border-color:rgba(214,163,71,.48);box-shadow:0 0 0 3px rgba(214,163,71,.12)}
textarea{min-height:140px;resize:vertical}
label{display:block;font-size:.82rem;color:#dde4ed;margin-bottom:.45rem;font-weight:700}
.field{margin-bottom:14px}

.cta-band{
  padding:30px;border-radius:32px;border:1px solid rgba(214,163,71,.22);
  background:
    linear-gradient(120deg, rgba(214,163,71,.18), rgba(255,255,255,.03)),
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 26%);
  display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:30px;
  box-shadow:var(--glow)
}

footer{padding:42px 0 62px;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:1.2rem;align-items:center;flex-wrap:wrap;border-top:1px solid rgba(214,163,71,.12);padding-top:24px}
.socials{display:flex;gap:.6rem}
.socials a{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--cream);background:rgba(255,255,255,.03)}

.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}

/* WordPress integration */
body.admin-bar .header{top:32px}
.ud-honeypot{position:absolute !important;left:-10000px !important;width:1px !important;height:1px !important;overflow:hidden !important}
.ud-form-status{margin-top:14px;min-height:24px;font-size:.92rem}
.ud-form-status.success{color:#d7b46c}
.ud-form-status.error{color:#ff8c8c}
.contact-form button[disabled]{opacity:.65;cursor:wait}
@media (max-width:782px){body.admin-bar .header{top:46px}}

@media (max-width:1080px){
  .hero-grid,.showcase,.contact-wrap,.split{grid-template-columns:1fr}
  .cards-4,.stats,.process-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid,.testimonials{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .mobile-toggle{display:block}
  .nav-links{display:none;position:absolute;left:20px;right:20px;top:84px;flex-direction:column;align-items:stretch;padding:14px;border-radius:24px;background:rgba(5,16,31,.98);border:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:.95rem 1rem}
  .cards-4,.stats,.process-grid,.portfolio-grid,.testimonials,.grid-2{grid-template-columns:1fr}
  .section{padding:74px 0}
  .container{width:min(100% - 24px, 1200px)}
  .hero-grid{padding-bottom:92px}
  .hero-actions,.hero-pills,.section-head{align-items:flex-start}
}
@media (max-width:640px){
  h1{font-size:clamp(3rem,16vw,4.2rem)}
  h2{font-size:clamp(2.2rem,10vw,3rem)}
  .brand img{width:58px;height:58px}
  .brand-text .top{font-size:1.28rem}
  .brand-text .sub{font-size:.57rem}
  .nav{min-height:78px}
  .nav-links{top:76px}
  .hero-grid{min-height:auto;padding-top:30px}
  .hero-art{padding:18px;border-radius:28px}
}


/* =========================================================
   V2.2 — CLOUD CHILD FIXED DREAMSCAPE
   The child / crescent / balloon / cloud scene stays fixed as
   the page scrolls. This replaces the former watermark concept.
   ========================================================= */
body{isolation:isolate}
main, footer{position:relative;z-index:2}
.header{z-index:30}

.ud-dreamscape-scene{
  position:fixed;
  top:112px;
  right:-2vw;
  width:min(55vw, 860px);
  aspect-ratio:560/430;
  background-image:url('assets/images/dreamscape-cloud-child.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:0;
  opacity:.66;
  filter:saturate(1.04) contrast(1.03) drop-shadow(0 18px 42px rgba(0,0,0,.30));
  -webkit-mask-image:radial-gradient(ellipse at 53% 48%, #000 46%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.38) 79%, transparent 96%);
  mask-image:radial-gradient(ellipse at 53% 48%, #000 46%, rgba(0,0,0,.92) 62%, rgba(0,0,0,.38) 79%, transparent 96%);
  transform:translateZ(0);
}
.ud-dreamscape-scene::after{
  content:"";
  position:absolute;
  inset:10% 7% 6% 8%;
  border-radius:50%;
  background:radial-gradient(circle at 42% 43%, rgba(224,170,72,.12), transparent 49%);
  filter:blur(28px);
}

/* Give the scene room in the hero instead of showing the old website mockup card. */
.hero-grid{grid-template-columns:1.02fr .98fr}
.hero-copy{max-width:650px}
.hero-art{
  min-height:600px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.hero-art::before,.hero-art::after{display:none !important}
.hero-art img{display:none !important}
.hero::before{
  background:
    linear-gradient(90deg, rgba(3,13,24,.78) 0%, rgba(3,13,24,.56) 37%, rgba(3,13,24,.11) 67%, transparent 100%),
    radial-gradient(circle at 78% 21%, rgba(214,163,71,.12), transparent 14%),
    radial-gradient(ellipse at 18% 100%, rgba(240,244,248,.08) 0 18%, transparent 19%);
}

/* Transparent section atmosphere so the fixed scene can peek through while scrolling. */
.section:not(.hero){
  background:linear-gradient(180deg, rgba(4,16,31,.34), rgba(4,16,31,.58));
}
#portfolio,#process,#contact{
  background:linear-gradient(180deg, rgba(4,16,31,.60), rgba(5,18,34,.74));
}
.service-card,.stat-card,.testimonial,.contact-card,.about-panel,.process-step,.portfolio-card,.contact-form,.showcase .panel-image,.showcase .panel-copy{
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

@media(max-width:1080px){
  .ud-dreamscape-scene{
    width:min(74vw,720px);
    right:-11vw;
    top:160px;
    opacity:.48;
  }
  .hero-art{min-height:500px}
}
@media(max-width:780px){
  .ud-dreamscape-scene{
    width:105vw;
    right:-32vw;
    top:160px;
    opacity:.30;
  }
  .hero-grid{grid-template-columns:1fr}
  .hero-art{display:none}
  .hero::before{
    background:linear-gradient(180deg, rgba(3,13,24,.48) 0%, rgba(3,13,24,.78) 64%, rgba(3,13,24,.95) 100%);
  }
}
@media(max-width:520px){
  .ud-dreamscape-scene{
    width:128vw;
    right:-52vw;
    top:150px;
    opacity:.25;
  }
}


/* =========================================================
   V2.3 — SEAMLESS DREAMSCAPE COMPOSITING
   Removes the rectangular/gray cast and blends the celestial
   artwork directly into the site background.
   ========================================================= */

/* Remove the artificial pale fog layer that was making the blend look gray. */
body::after{
  display:none !important;
}

/* Keep one consistent midnight-blue base behind the artwork. */
body{
  background:
    radial-gradient(circle at 14% 12%, rgba(214,163,71,.085), transparent 16%),
    radial-gradient(circle at 88% 7%, rgba(214,163,71,.07), transparent 12%),
    linear-gradient(180deg, #020a14 0%, #04101f 30%, #06162a 66%, #07182d 100%) !important;
}

/* Feathered transparent PNG — no visible box, no gray perimeter. */
.ud-dreamscape-scene{
  top:104px !important;
  right:-1.5vw !important;
  width:min(58vw, 900px) !important;
  aspect-ratio:560/430 !important;
  background-image:url('assets/images/dreamscape-cloud-child-blended.png') !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  opacity:.94 !important;
  filter:saturate(1.08) contrast(1.04) drop-shadow(0 22px 48px rgba(0,0,0,.22)) !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  mix-blend-mode:normal !important;
}

/* Soft atmospheric aura BEHIND the scene, not a rectangle around it. */
.ud-dreamscape-scene::before{
  content:"";
  position:absolute;
  inset:12% 7% 14% 20%;
  border-radius:50%;
  background:
    radial-gradient(circle at 55% 48%, rgba(216,166,72,.11), transparent 46%),
    radial-gradient(circle at 58% 55%, rgba(18,55,92,.20), transparent 66%);
  filter:blur(38px);
  z-index:-1;
}
.ud-dreamscape-scene::after{
  display:none !important;
}

/* Let the hero dissolve naturally into the same navy field. */
.hero::before{
  background:
    linear-gradient(90deg, rgba(2,10,20,.91) 0%, rgba(3,13,24,.76) 28%, rgba(3,13,24,.34) 49%, rgba(3,13,24,.06) 70%, transparent 100%),
    radial-gradient(circle at 80% 25%, rgba(214,163,71,.075), transparent 17%) !important;
}
.hero::after{
  background:linear-gradient(180deg, transparent 0%, rgba(4,16,31,.42) 50%, rgba(4,16,31,.94) 100%) !important;
}

/* Remove any smoky gray cast in section overlays. */
.section:not(.hero){
  background:linear-gradient(180deg, rgba(4,16,31,.22), rgba(4,16,31,.48)) !important;
}
#portfolio,#process,#contact{
  background:linear-gradient(180deg, rgba(4,16,31,.48), rgba(5,18,34,.64)) !important;
}

@media(max-width:1080px){
  .ud-dreamscape-scene{
    width:min(78vw,760px) !important;
    right:-12vw !important;
    top:145px !important;
    opacity:.76 !important;
  }
}
@media(max-width:780px){
  .ud-dreamscape-scene{
    width:108vw !important;
    right:-34vw !important;
    top:145px !important;
    opacity:.48 !important;
  }
}
@media(max-width:520px){
  .ud-dreamscape-scene{
    width:132vw !important;
    right:-54vw !important;
    top:135px !important;
    opacity:.40 !important;
  }
}


/* =========================================================
   V2.4 — ATMOSPHERIC CLOUD GLOW + MOUSE STAR TRAIL
   ========================================================= */

/* Bring back the soft white cloud glow without reintroducing the gray box. */
.ud-cloud-glow{
  position:fixed;
  left:-10vw;
  right:-10vw;
  bottom:-14vh;
  height:52vh;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  transform:translate3d(0,var(--ud-cloud-shift,0px),0);
  will-change:transform;
  background:
    radial-gradient(ellipse at 7% 72%, rgba(246,249,255,.26) 0 9%, rgba(211,226,245,.13) 16%, transparent 31%),
    radial-gradient(ellipse at 19% 78%, rgba(255,255,255,.30) 0 10%, rgba(213,228,247,.13) 17%, transparent 32%),
    radial-gradient(ellipse at 34% 70%, rgba(247,250,255,.24) 0 11%, rgba(206,223,244,.11) 18%, transparent 34%),
    radial-gradient(ellipse at 51% 79%, rgba(255,255,255,.26) 0 10%, rgba(206,223,244,.12) 18%, transparent 33%),
    radial-gradient(ellipse at 68% 72%, rgba(248,251,255,.24) 0 11%, rgba(211,227,246,.11) 19%, transparent 34%),
    radial-gradient(ellipse at 83% 78%, rgba(255,255,255,.28) 0 10%, rgba(213,228,247,.12) 18%, transparent 33%),
    radial-gradient(ellipse at 95% 70%, rgba(248,251,255,.22) 0 9%, rgba(205,222,242,.10) 18%, transparent 31%);
  filter:blur(24px);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 22%,#000 55%,rgba(0,0,0,.80) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 22%,#000 55%,rgba(0,0,0,.80) 100%);
}

/* Canvas inserted by JS for the mouse sparkle trail. */
.ud-star-trail{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:16;
  opacity:.96;
}

@media(max-width:780px){
  .ud-cloud-glow{
    opacity:.25;
    height:44vh;
    bottom:-11vh;
  }
}
@media(prefers-reduced-motion:reduce){
  .ud-cloud-glow{transform:none !important}
  .ud-star-trail{display:none !important}
}


/* =========================================================
   V2.5 — CELESTIAL MOTION EDITION
   ========================================================= */

/* Slow starfield drift for depth. */
body::before{
  animation:udStarDrift 42s linear infinite alternate;
  will-change:background-position;
}
@keyframes udStarDrift{
  0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  100%{background-position:18px -10px,-14px 9px,12px 14px,-9px -13px,14px -8px,-16px 8px,10px -12px,-12px 10px,8px -9px,-10px 12px,14px 7px,-7px -10px}
}

/* Breathing lunar glow aligned with the crescent inside the scene. */
.ud-moon-aura{
  position:fixed;
  top:104px;
  right:-1.5vw;
  width:min(58vw,900px);
  aspect-ratio:560/430;
  z-index:-1;
  pointer-events:none;
}
.ud-moon-aura::before{
  content:"";
  position:absolute;
  left:24%;
  top:13%;
  width:49%;
  height:70%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 54% 52%, rgba(245,210,137,.18) 0 18%, rgba(214,163,71,.12) 34%, rgba(214,163,71,.045) 53%, transparent 72%);
  filter:blur(19px);
  transform:scale(.96);
  animation:udMoonBreathe 5.8s ease-in-out infinite;
}
@keyframes udMoonBreathe{
  0%,100%{opacity:.52;transform:scale(.96)}
  50%{opacity:.88;transform:scale(1.045)}
}

/* Isolated balloon overlay. It moves only a few pixels so it feels alive, not cartoonish. */
.ud-balloon-float{
  position:fixed;
  top:104px;
  right:-1.5vw;
  width:min(58vw,900px);
  aspect-ratio:560/430;
  z-index:1;
  pointer-events:none;
}
.ud-balloon-float::before{
  content:"";
  position:absolute;
  left:76.6%;
  top:1.2%;
  width:15.8%;
  height:31%;
  background:url('assets/images/dreamscape-balloon.png') center/contain no-repeat;
  transform-origin:50% 100%;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.24));
  animation:udBalloonFloat 5.2s ease-in-out infinite;
}
@keyframes udBalloonFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.45deg)}
  45%{transform:translate3d(2px,-7px,0) rotate(.7deg)}
  70%{transform:translate3d(-1px,-4px,0) rotate(.2deg)}
}

/* Shooting-star layer. Individual trails are created by JS. */
.ud-shooting-stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:12;
  overflow:hidden;
}
.ud-shooting-star{
  position:absolute;
  width:126px;
  height:2px;
  border-radius:999px;
  opacity:0;
  transform:rotate(-24deg);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(248,225,168,.20) 15%,rgba(255,248,226,.94) 82%,#fff 100%);
  box-shadow:0 0 9px rgba(239,203,133,.52),0 0 18px rgba(214,163,71,.22);
  animation:udShoot 1.15s cubic-bezier(.13,.67,.34,1) forwards;
}
.ud-shooting-star::after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:5px;
  height:5px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff8df;
  box-shadow:0 0 10px rgba(255,244,211,.95),0 0 20px rgba(214,163,71,.65);
}
@keyframes udShoot{
  0%{opacity:0;translate:-26px 16px;scale:.62}
  10%{opacity:.92}
  72%{opacity:.82}
  100%{opacity:0;translate:360px 186px;scale:1}
}

/* Elegant first-load entrance. */
html.ud-page-enter body{
  opacity:0;
  transform:translateY(7px);
}
html.ud-page-ready body{
  opacity:1;
  transform:none;
  transition:opacity .82s ease,transform .82s ease;
}
html.ud-page-ready .header{
  animation:udHeaderIn .8s ease both;
}
html.ud-page-ready .hero-copy{
  animation:udHeroCopyIn .95s .12s ease both;
}
@keyframes udHeaderIn{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}
@keyframes udHeroCopyIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* Tiny shimmer enhancement on primary CTAs. */
.btn.primary{
  position:relative;
  overflow:hidden;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -45%;
  width:34%;
  transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .58s ease;
}
.btn.primary:hover::after{left:118%}

@media(max-width:1080px){
  .ud-moon-aura,.ud-balloon-float{
    width:min(78vw,760px);
    right:-12vw;
    top:145px;
  }
}
@media(max-width:780px){
  .ud-moon-aura{
    width:108vw;
    right:-34vw;
    top:145px;
    opacity:.58;
  }
  .ud-balloon-float{display:none}
  .ud-shooting-stars{display:none}
}
@media(prefers-reduced-motion:reduce){
  body::before,
  .ud-moon-aura::before,
  .ud-balloon-float::before{
    animation:none !important;
  }
  .ud-shooting-stars{display:none !important}
  html.ud-page-enter body,html.ud-page-ready body{
    opacity:1 !important;transform:none !important;transition:none !important
  }
  html.ud-page-ready .header,html.ud-page-ready .hero-copy{
    animation:none !important
  }
}


/* V2.5.1 — consultation dropdown readability fix ONLY */
.contact-form select{
  color-scheme:dark;
  background-color:#102748 !important;
  color:#f6eedf !important;
  border-color:rgba(214,163,71,.28) !important;
}
.contact-form select option{
  background:#102748 !important;
  color:#f6eedf !important;
}
.contact-form select option:checked,
.contact-form select option:hover{
  background:#17365f !important;
  color:#ffffff !important;
}

/* V2.6 editable studio */
main{display:flex;flex-direction:column}


/* =========================================================
   V2.6.1 — BALLOON ANIMATION FIX ONLY
   Correct balloon sprite + aligned positioning.
   ========================================================= */
.ud-balloon-float::before{
  left:61.05% !important;
  top:1.63% !important;
  width:12.86% !important;
  height:22.10% !important;
  background-image:url('assets/images/dreamscape-balloon.png') !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  transform-origin:50% 100% !important;
  will-change:transform;
  animation:udBalloonFloatFixed 4.7s ease-in-out infinite !important;
}
@keyframes udBalloonFloatFixed{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-0.7deg) scale(1);
  }
  32%{
    transform:translate3d(3px,-8px,0) rotate(0.8deg) scale(1.008);
  }
  58%{
    transform:translate3d(-2px,-12px,0) rotate(1.15deg) scale(1.015);
  }
  78%{
    transform:translate3d(2px,-6px,0) rotate(0.15deg) scale(1.006);
  }
}

/* Keep balloon alive on tablet-sized layouts too. */
@media(max-width:780px){
  .ud-balloon-float{
    display:block !important;
    width:108vw !important;
    right:-34vw !important;
    top:145px !important;
    opacity:.58;
  }
}
@media(max-width:520px){
  .ud-balloon-float{
    width:132vw !important;
    right:-54vw !important;
    top:135px !important;
    opacity:.42;
  }
}

/* Accessibility setting remains respected. */
@media(prefers-reduced-motion:reduce){
  .ud-balloon-float::before{
    animation:none !important;
  }
}


/* =========================================================
   V2.6.5 — HEADER FINAL FIX ONLY
   Clean brand markup + visible light header symbol.
   Everything else remains V2.6.1.
   ========================================================= */
.brand{
  gap:1.02rem !important;
}
.brand img{
  width:72px !important;
  height:72px !important;
  object-fit:contain !important;
  flex:0 0 72px !important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.25)) !important;
}
.brand-text{
  display:block !important;
  min-width:205px;
}
.brand-text .top{
  display:block !important;
  font-size:1.58rem !important;
  line-height:1 !important;
}
.brand-text .sub{
  display:block !important;
  margin-top:.28rem !important;
}
.nav-links .btn.primary{
  min-width:max-content !important;
  white-space:nowrap !important;
}
@media(max-width:640px){
  .brand img{
    width:58px !important;
    height:58px !important;
    flex-basis:58px !important;
  }
  .brand-text{
    min-width:0;
  }
  .brand-text .top{
    font-size:1.28rem !important;
  }
}


/* =========================================================
   V2.7 — DREAM LIST POPUP
   ========================================================= */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.ud-dream-popup{
  position:fixed;
  inset:0;
  z-index:9998;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.ud-dream-popup.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.ud-dream-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,8,16,.78);
  backdrop-filter:blur(9px);
}
.ud-dream-popup-card{
  position:relative;
  width:min(720px,100%);
  border:1px solid rgba(214,163,71,.34);
  border-radius:34px;
  overflow:hidden;
  box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 70px rgba(214,163,71,.08);
  background:
    radial-gradient(circle at 82% 14%,rgba(214,163,71,.13),transparent 18%),
    linear-gradient(145deg,rgba(8,28,53,.98),rgba(3,13,25,.995));
  transform:translateY(20px) scale(.985);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.ud-dream-popup.is-open .ud-dream-popup-card{
  transform:none;
}
.ud-dream-popup-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 15% 18%,rgba(255,255,255,.95),transparent 55%),
    radial-gradient(2px 2px at 31% 12%,rgba(214,163,71,.9),transparent 55%),
    radial-gradient(2px 2px at 68% 21%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(2px 2px at 87% 37%,rgba(214,163,71,.88),transparent 55%),
    radial-gradient(2px 2px at 58% 69%,rgba(255,255,255,.72),transparent 55%);
  opacity:.7;
}
.ud-dream-popup-close{
  position:absolute;
  top:15px;
  right:15px;
  z-index:4;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:#f6eedf;
  font-size:1.65rem;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}
.ud-dream-popup-close:hover{
  border-color:rgba(214,163,71,.5);
  color:var(--gold-soft);
  transform:rotate(6deg);
}
.ud-dream-popup-sky{
  position:absolute;
  inset:0 0 0 auto;
  width:42%;
  pointer-events:none;
  overflow:hidden;
}
.ud-popup-crescent{
  position:absolute;
  width:210px;
  height:210px;
  right:-42px;
  top:53px;
  border-radius:50%;
  box-shadow:-25px 10px 0 1px rgba(231,190,105,.92);
  filter:drop-shadow(0 0 17px rgba(214,163,71,.25));
  opacity:.72;
  transform:rotate(-17deg);
}
.ud-popup-balloon{
  position:absolute;
  width:34px;
  height:43px;
  border-radius:52% 48% 47% 53% / 58% 58% 42% 42%;
  right:92px;
  top:50px;
  background:radial-gradient(circle at 33% 25%,#ff6958 0 8%,#dc281e 30%,#8f0d0a 78%);
  box-shadow:0 0 18px rgba(214,40,30,.34);
  animation:udPopupBalloon 4.4s ease-in-out infinite;
}
.ud-popup-balloon::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:7px;
  height:8px;
  transform:translateX(-50%);
  background:#8f0d0a;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.ud-popup-balloon::after{
  content:"";
  position:absolute;
  top:48px;
  left:50%;
  width:1px;
  height:110px;
  background:linear-gradient(#c99f5d,transparent);
  transform:translateX(-50%) rotate(-7deg);
  transform-origin:top;
}
@keyframes udPopupBalloon{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(3px,-8px,0) rotate(1.4deg)}
}
.ud-popup-star{
  position:absolute;
  color:var(--gold-soft);
  text-shadow:0 0 12px rgba(214,163,71,.55);
  animation:udPopupTwinkle 2.8s ease-in-out infinite;
}
.ud-popup-star.s1{right:165px;top:92px;font-size:19px}
.ud-popup-star.s2{right:70px;top:202px;font-size:15px;animation-delay:.8s}
.ud-popup-star.s3{right:184px;top:280px;font-size:13px;animation-delay:1.5s}
@keyframes udPopupTwinkle{0%,100%{opacity:.32;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

.ud-dream-popup-content{
  position:relative;
  z-index:2;
  padding:58px 280px 46px 48px;
}
.ud-dream-popup-content h2{
  font-size:clamp(2.55rem,5vw,4.2rem);
  max-width:430px;
  margin-bottom:.8rem;
}
.ud-dream-popup-copy{
  max-width:430px;
  color:#c7d1dc;
  font-size:1.04rem;
  line-height:1.65;
  margin-bottom:1.45rem;
}
.ud-dream-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  max-width:430px;
}
.ud-dream-input-row input{
  height:54px;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
}
.ud-dream-input-row .btn{
  width:100%;
  min-height:52px;
}
.ud-dream-list-note{
  max-width:430px;
  margin-top:12px;
  color:#8f9baa;
  font-size:.76rem;
  line-height:1.5;
}
.ud-dream-list-status{
  min-height:23px;
  margin-top:8px;
  font-size:.86rem;
  color:var(--gold-soft);
}
.ud-dream-list-status.error{color:#ff9898}
.ud-dream-popup-skip{
  margin-top:7px;
  padding:0;
  border:0;
  background:none;
  color:#758294;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:.74rem;
  cursor:pointer;
}
.ud-dream-popup-skip:hover{color:#b7c2cf}

.ud-dream-popup.is-success .ud-dream-popup-content .eyebrow,
.ud-dream-popup.is-success .ud-dream-popup-copy,
.ud-dream-popup.is-success .ud-dream-list-note,
.ud-dream-popup.is-success .ud-dream-popup-skip,
.ud-dream-popup.is-success .ud-dream-input-row{
  display:none;
}
.ud-dream-popup.is-success .ud-dream-popup-content{
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ud-dream-popup.is-success h2::before{
  content:"You’re Officially In the Dream.";
  display:block;
  color:var(--cream);
}
.ud-dream-popup.is-success h2{
  font-size:0;
}
.ud-dream-popup.is-success h2::before{
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1;
}
.ud-dream-popup.is-success .ud-dream-list-status{
  font-size:1rem;
  color:#cbd6e0;
  max-width:400px;
  line-height:1.6;
}

@media(max-width:700px){
  .ud-dream-popup{padding:14px}
  .ud-dream-popup-card{border-radius:28px}
  .ud-dream-popup-sky{
    width:100%;
    opacity:.42;
  }
  .ud-popup-crescent{right:-65px;top:68px}
  .ud-popup-balloon{right:92px;top:34px}
  .ud-dream-popup-content{
    padding:54px 28px 38px;
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .ud-dream-popup-content h2,
  .ud-dream-popup-copy,
  .ud-dream-input-row,
  .ud-dream-list-note{
    max-width:100%;
  }
}
@media(prefers-reduced-motion:reduce){
  .ud-popup-star,.ud-popup-balloon{animation:none!important}
  .ud-dream-popup,.ud-dream-popup-card{transition:none!important}
}


/* V2.8 — portfolio category experience + animated track record + project viewer */
.track-record{
  margin-top:42px;
  padding:34px;
  border:1px solid rgba(214,163,71,.24);
  border-radius:32px;
  background:
    radial-gradient(circle at 12% 18%,rgba(214,163,71,.13),transparent 30%),
    linear-gradient(145deg,rgba(11,36,67,.86),rgba(4,16,31,.92));
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  overflow:hidden;
  position:relative;
}
.track-record::after{
  content:"";position:absolute;inset:-45% -10% auto 45%;height:220px;
  background:radial-gradient(circle,rgba(239,203,133,.14),transparent 68%);
  pointer-events:none;
}
.track-record-head{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:end;margin-bottom:24px;position:relative;z-index:1}
.track-record-head h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;max-width:760px}
.track-record-head>p{color:var(--muted);line-height:1.7;margin:0}
.track-record-grid{position:relative;z-index:1;margin-top:0}
.track-record .stat-card{min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(4,16,31,.46)}
.track-record .stat-card strong{font-size:clamp(2.3rem,4.3vw,4.4rem);line-height:.95;letter-spacing:-.045em}
.track-record .stat-card span{margin-top:12px;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;line-height:1.45}

.portfolio-nav-wrap{position:relative;margin:10px 0 30px}
.portfolio-controls{
  position:sticky;top:82px;z-index:12;
  padding:10px;
  border:1px solid rgba(214,163,71,.18);
  border-radius:22px;
  background:rgba(4,16,31,.82);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 46px rgba(0,0,0,.18);
}
.filter-btn{transition:.25s ease;white-space:nowrap}
.filter-btn.active{box-shadow:inset 0 0 0 1px rgba(239,203,133,.12),0 8px 24px rgba(0,0,0,.15)}
.portfolio-category-stage{
  margin-top:18px;padding:22px 24px;border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(214,163,71,.08),transparent 70%);
}
.portfolio-category-kicker{display:block;color:var(--gold-soft);font-size:.69rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px}
.portfolio-category-stage h3{font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.25rem);margin:0;color:var(--cream)}
.portfolio-category-stage p{margin:.45rem 0 0;color:var(--muted);max-width:760px;line-height:1.65}
.portfolio-grid{scroll-margin-top:180px}
.portfolio-card{position:relative;cursor:pointer;outline:none;overflow:hidden}
.portfolio-card[hidden]{display:none!important}
.portfolio-card:focus-visible{box-shadow:0 0 0 2px var(--gold-soft),var(--shadow)}
.portfolio-view-project{
  position:absolute;right:16px;top:16px;z-index:2;
  padding:.58rem .8rem;border-radius:999px;
  background:rgba(4,16,31,.82);border:1px solid rgba(239,203,133,.35);
  color:var(--cream);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:translateY(-6px);transition:.25s ease;backdrop-filter:blur(10px);
}
.portfolio-card:hover .portfolio-view-project,.portfolio-card:focus-visible .portfolio-view-project{opacity:1;transform:none}
.portfolio-card img{transition:transform .45s ease,filter .45s ease}
.portfolio-card:hover img,.portfolio-card:focus-visible img{transform:scale(1.025);filter:saturate(1.04) contrast(1.02)}

body.ud-modal-open{overflow:hidden}
.ud-project-modal{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:24px}
.ud-project-modal.is-open{display:flex}
.ud-project-modal-backdrop{position:absolute;inset:0;background:rgba(1,7,16,.88);backdrop-filter:blur(14px)}
.ud-project-modal-card{
  width:min(1120px,96vw);max-height:90vh;overflow:auto;position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
  border:1px solid rgba(214,163,71,.3);border-radius:30px;background:linear-gradient(145deg,#07182f,#04101f 68%);
  box-shadow:0 36px 120px rgba(0,0,0,.64);animation:udProjectIn .28s ease both;
}
@keyframes udProjectIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ud-project-modal-media{min-height:520px;background:#061426;overflow:hidden;border-radius:29px 0 0 29px}
.ud-project-modal-media img{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}
.ud-project-modal-copy{padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:center}
.ud-project-modal-copy h2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,4rem);line-height:1.02;margin:.3rem 0 1rem}
.ud-project-modal-copy>p:last-of-type{color:var(--muted);line-height:1.75;font-size:1rem}
.ud-project-modal-close{position:absolute;right:16px;top:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(4,16,31,.78);color:var(--cream);font-size:1.6rem;cursor:pointer;backdrop-filter:blur(10px)}
.ud-project-modal-actions{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:28px}
.ud-project-modal-actions span{text-align:center;color:var(--gold-soft);font-weight:800;font-size:.8rem;letter-spacing:.12em}

@media(max-width:900px){
  .track-record-head{grid-template-columns:1fr}
  .portfolio-controls{position:relative;top:auto;display:flex;overflow-x:auto;flex-wrap:nowrap;padding:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .portfolio-controls::-webkit-scrollbar{display:none}
  .ud-project-modal-card{grid-template-columns:1fr;max-height:92vh}
  .ud-project-modal-media{min-height:300px;border-radius:29px 29px 0 0}
  .ud-project-modal-media img{min-height:300px;max-height:42vh}
}
@media(max-width:600px){
  .track-record{padding:24px 18px;border-radius:24px}
  .track-record-grid{grid-template-columns:1fr 1fr!important;gap:12px}
  .track-record .stat-card{min-height:135px;padding:18px}
  .track-record .stat-card strong{font-size:2.2rem}
  .portfolio-category-stage{padding:18px 16px}
  .ud-project-modal{padding:10px}
  .ud-project-modal-copy{padding:28px 20px}
  .ud-project-modal-actions{grid-template-columns:1fr 1fr}
  .ud-project-modal-actions span{grid-column:1/-1;grid-row:1}
  .ud-project-modal-actions .btn{padding:.78rem .85rem;font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){.ud-project-modal-card{animation:none}.portfolio-card img,.portfolio-view-project{transition:none}}


/* =========================================================
   V2.9 — EXPANDABLE PORTFOLIO MANAGER
   ========================================================= */
.portfolio-card.is-featured{border-color:rgba(239,203,133,.42);box-shadow:0 24px 72px rgba(0,0,0,.36),inset 0 0 0 1px rgba(239,203,133,.06)}
.portfolio-featured-badge{position:absolute;left:16px;top:16px;z-index:3;padding:.56rem .78rem;border-radius:999px;background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#071426;font-size:.69rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.portfolio-client{margin:.4rem 0 .15rem;color:var(--gold-soft);font-size:.78rem;font-weight:700;letter-spacing:.04em}
.portfolio-empty-state{margin:18px 0 0;padding:34px;border:1px dashed rgba(214,163,71,.35);border-radius:22px;text-align:center;background:rgba(4,16,31,.45)}
.portfolio-empty-state[hidden]{display:none}.portfolio-empty-state span{font-family:var(--serif);font-size:1.5rem;color:var(--cream)}.portfolio-empty-state p{margin:.45rem 0 0;color:var(--muted)}
.ud-project-modal-media{position:relative;display:flex;flex-direction:column}
.ud-project-modal-media>img{flex:1;min-height:460px}
.ud-project-modal-thumbs{display:flex;gap:9px;padding:12px;background:rgba(2,10,20,.86);overflow-x:auto;scrollbar-width:thin}
.ud-project-modal-thumbs[hidden]{display:none}
.ud-project-thumb{flex:0 0 74px;width:74px;height:58px;padding:0;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:#061426;cursor:pointer;opacity:.62;transition:.2s ease}
.ud-project-thumb:hover,.ud-project-thumb.active{opacity:1;border-color:var(--gold-soft);box-shadow:0 0 0 1px rgba(239,203,133,.22)}
.ud-project-thumb img{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important}
.ud-project-modal-client{margin:-.35rem 0 .8rem;color:var(--gold-soft)!important;font-size:.86rem!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
@media(max-width:900px){.ud-project-modal-media>img{min-height:340px}.ud-project-modal-thumbs{padding:10px}.portfolio-featured-badge{top:12px;left:12px}}


/* ==========================================================
   V3.0 — 12-door Portfolio Category Showroom
   ========================================================== */
.portfolio-showroom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.portfolio-category-card{position:relative;isolation:isolate;min-height:430px;border-radius:24px;overflow:hidden;border:1px solid rgba(214,163,71,.18);box-shadow:0 24px 70px rgba(0,0,0,.32);text-decoration:none;background:#071426;transform:translateZ(0)}
.portfolio-category-card::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid transparent;border-radius:inherit;transition:.35s ease;pointer-events:none}
.portfolio-category-card:hover::after,.portfolio-category-card:focus-visible::after{border-color:rgba(239,203,133,.62);box-shadow:inset 0 0 0 1px rgba(239,203,133,.16)}
.portfolio-category-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .5s ease;z-index:0}
.portfolio-category-card:hover>img,.portfolio-category-card:focus-visible>img{transform:scale(1.055);filter:saturate(1.06) contrast(1.04)}
.portfolio-category-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,10,21,.08) 10%,rgba(3,10,21,.35) 48%,rgba(3,10,21,.96) 100%)}
.portfolio-category-number{position:absolute;right:20px;top:18px;z-index:3;color:rgba(255,255,255,.52);font-size:.74rem;font-weight:800;letter-spacing:.14em}
.portfolio-category-content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.portfolio-category-label{color:var(--gold-soft);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;font-weight:850;margin-bottom:8px}
.portfolio-category-content strong{font-family:var(--serif);font-size:clamp(1.65rem,2.3vw,2.25rem);line-height:1.05;color:var(--cream);font-weight:650}
.portfolio-category-description{color:rgba(238,240,244,.72);font-size:.91rem;line-height:1.55;margin-top:10px;max-width:31rem}
.portfolio-category-link{display:flex;align-items:center;gap:.55rem;margin-top:17px;color:var(--cream);font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.portfolio-category-link b{color:var(--gold-soft);font-size:1rem;transition:transform .3s ease}
.portfolio-category-card:hover .portfolio-category-link b,.portfolio-category-card:focus-visible .portfolio-category-link b{transform:translate(3px,-3px)}
.portfolio-category-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}

.ud-category-page-main{position:relative;z-index:2;min-height:70vh}
.ud-category-hero{padding:160px 0 56px;position:relative}
.ud-category-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:56px;align-items:center}
.ud-category-hero-copy h1{font-family:var(--serif);font-size:clamp(3rem,6vw,6rem);line-height:.92;letter-spacing:-.045em;margin:.55rem 0 1.2rem;color:var(--cream)}
.ud-category-hero-copy>p:not(.eyebrow){max-width:720px;color:var(--muted);font-size:1.07rem;line-height:1.75}
.ud-category-back{display:inline-flex;align-items:center;gap:.55rem;color:var(--gold-soft);text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;margin-bottom:22px}
.ud-category-back:hover{color:var(--cream)}
.ud-category-hero-art{position:relative;border-radius:28px;overflow:hidden;min-height:460px;border:1px solid rgba(214,163,71,.24);box-shadow:0 32px 90px rgba(0,0,0,.42)}
.ud-category-hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ud-category-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,29,.03),rgba(5,15,29,.55))}
.ud-category-count{display:inline-flex;margin-top:22px;padding:.72rem 1rem;border:1px solid rgba(214,163,71,.25);border-radius:999px;color:var(--gold-soft);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;background:rgba(6,20,38,.55);backdrop-filter:blur(10px)}
.ud-category-projects{padding-top:36px}
.ud-category-projects-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:28px}
.ud-category-projects-head h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.4rem);color:var(--cream);margin:.3rem 0 0}
.ud-category-projects-head p{max-width:520px;color:var(--muted);margin:0}
.ud-category-cta{margin:68px 0 10px;padding:34px 36px;border:1px solid rgba(214,163,71,.2);border-radius:24px;background:linear-gradient(135deg,rgba(12,34,58,.78),rgba(8,20,38,.58));display:flex;justify-content:space-between;align-items:center;gap:24px}
.ud-category-cta h3{font-family:var(--serif);font-size:1.8rem;color:var(--cream);margin:0}.ud-category-cta p{color:var(--muted);margin:.35rem 0 0}
.ud-category-page-footer{position:relative;z-index:2}

@media(max-width:1100px){.portfolio-showroom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ud-category-hero-grid{grid-template-columns:1fr}.ud-category-hero-art{min-height:390px}}
@media(max-width:680px){.portfolio-showroom-grid{grid-template-columns:1fr}.portfolio-category-card{min-height:390px}.portfolio-category-content{padding:24px}.ud-category-hero{padding:125px 0 36px}.ud-category-hero-art{min-height:320px}.ud-category-projects-head,.ud-category-cta{align-items:flex-start;flex-direction:column}.ud-category-cta{padding:26px 22px}}
@media(prefers-reduced-motion:reduce){.portfolio-category-card>img,.portfolio-category-link b{transition:none}}


/* ==========================================================
   V3.1 — Link Preview + Premium Mouse Experience
   ========================================================== */
@media (hover:hover) and (pointer:fine){
  .ud-mouse-spotlight{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    background:radial-gradient(540px circle at var(--ud-mouse-x,50%) var(--ud-mouse-y,45%),rgba(214,163,71,.055),rgba(64,115,172,.025) 34%,transparent 70%);
    mix-blend-mode:screen;
  }
  .ud-cursor-aura{
    position:fixed;
    left:0;top:0;
    width:280px;height:280px;
    border-radius:50%;
    pointer-events:none;
    z-index:15;
    opacity:.52;
    background:radial-gradient(circle,rgba(239,203,133,.105) 0%,rgba(214,163,71,.05) 24%,rgba(98,143,193,.026) 45%,transparent 70%);
    filter:blur(2px);
    will-change:transform;
  }
  html[data-ud-mouse-motion="subtle"] .ud-cursor-aura{opacity:.36;width:230px;height:230px}
  html[data-ud-mouse-motion="bold"] .ud-cursor-aura{opacity:.72}

  .ud-magnetic{
    transform:translate3d(var(--ud-mag-x,0),var(--ud-mag-y,0),0);
    transition:transform .18s ease,box-shadow .28s ease,border-color .28s ease,filter .28s ease;
    will-change:transform;
  }
  .ud-magnetic:hover{transform:translate3d(var(--ud-mag-x,0),calc(var(--ud-mag-y,0) - 2px),0)}

  .ud-mouse-tilt{
    --ud-card-x:50%;--ud-card-y:50%;
    transform-style:preserve-3d;
    transition:transform .18s ease-out,border-color .3s ease,box-shadow .3s ease;
    will-change:transform;
  }
  .ud-pointer-light{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    border-radius:inherit;
    opacity:0;
    background:radial-gradient(340px circle at var(--ud-card-x) var(--ud-card-y),rgba(255,244,211,.16),rgba(214,163,71,.055) 30%,transparent 68%);
    transition:opacity .25s ease;
    mix-blend-mode:screen;
  }
  .ud-mouse-tilt:hover>.ud-pointer-light{opacity:1}
  .service-card.ud-mouse-tilt{position:relative;overflow:hidden}

  .ud-dreamscape-scene{
    transform:translate3d(var(--ud-scene-x,0px),calc(var(--ud-cloud-shift,0px) + var(--ud-scene-y,0px)),0) !important;
    transition:transform .08s linear;
  }
  .ud-moon-aura{
    transform:translate3d(var(--ud-moon-x,0px),var(--ud-moon-y,0px),0);
    transition:transform .1s linear;
  }
}

@media (max-width:780px), (hover:none), (pointer:coarse){
  .ud-mouse-spotlight,.ud-cursor-aura{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .ud-mouse-spotlight,.ud-cursor-aura{display:none!important}
  .ud-magnetic,.ud-mouse-tilt,.ud-dreamscape-scene,.ud-moon-aura{transform:none!important;transition:none!important}
}