/* Built Beyond Boundaries V5 — user-selected celestial-sky background.
   Everything is live HTML/CSS; the source mockup is NOT used as a flattened page.
   Imagery is used only for clean atmospheric/architectural backgrounds. */
:root{--ink:#3d3036;--muted:#675963;--gold:#cda264;--gold-dark:#96682c;--cloud:#f4e6ef;--pearl:#fffaf6;--line:rgba(196,153,135,.30)}
html{scroll-padding-top:82px}
body{color:var(--ink);background:#f9edf3 url('assets/pastel-cloudscape.jpg') center top / 100% auto repeat-y}
.site-header{background:rgba(255,249,247,.79);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);border-bottom:1px solid rgba(255,255,255,.86);box-shadow:0 7px 24px rgba(125,81,100,.045)}
.brand{color:#b48a51}.brand-name{color:#3e3035}.brand-name span{color:#b08750}.brand-name small{color:#977783}
.desktop-nav a{font-weight:600;color:#45373c}.desktop-nav a:hover{color:#987038}
.nav-studio{color:#533b36;background:rgba(255,251,248,.64);border-color:#c39c68;border-radius:10px}
.nav-studio:hover{color:#fff;background:#ae8550}
.hero{min-height:600px;background:linear-gradient(90deg,rgba(255,244,250,.16),rgba(255,239,242,.05)),url('assets/pastel-cloudscape.jpg') center 24% / cover;isolation:isolate;color:var(--ink)}
.hero::before{background:linear-gradient(90deg,rgba(255,245,246,.59) 0%,rgba(255,245,247,.45) 32%,rgba(255,244,248,.25) 48%,transparent 67%);z-index:-1}
.hero-photo{width:51%;height:100%;right:0;background-image:linear-gradient(90deg,rgba(248,231,243,.48),transparent 25%),url('assets/sky-arches.jpg');background-size:cover;background-position:center 40%;opacity:1;z-index:-2;filter:saturate(1.1) brightness(1.025)}
.hero-silk{opacity:.25}
.hero-layout{min-height:600px;padding-top:52px;padding-bottom:120px}
.hero-copy{max-width:645px;text-shadow:0 2px 18px rgba(255,250,250,.65)}
.hero-overline{color:#966f69}
.hero-lockup h1{font-size:clamp(3.5rem,5.1vw,5.2rem);color:#463239;letter-spacing:-.055em;line-height:1.01}
.hero-lockup h1 span{color:#c3944e}
.hero-brand-symbol{filter:drop-shadow(0 8px 10px rgba(170,116,67,.13))}
.hero-tagline{color:#533c3f;font-size:clamp(1.4rem,2.3vw,2.6rem);font-style:italic;margin:18px 0 12px}
.hero-tagline .rule{background:#bd925b}
.hero-description{font-size:.91rem;letter-spacing:.05em;line-height:1.65;max-width:600px;color:#514348}
.hero-footnote{color:#84646c;letter-spacing:.14em}
.hero-buttons .btn{border-radius:7px;font-size:.84rem;min-height:52px}
.btn-gold{background:linear-gradient(120deg,#dfbf8b,#b1854b);color:#fff}
.btn-outline{background:rgba(255,251,250,.84);color:#463838;border-color:#b68c59}
.btn-outline:hover{background:#fff2e3}
/* Consistent, sky-painted background follows the visitor through every section. */
.how-section,.featured-section,.catalog-section,.dashboard-showcase,.vision-section,.cta-section{
 background-image:linear-gradient(180deg,rgba(255,248,251,.18),rgba(255,249,251,.20)),url('assets/pastel-cloudscape.jpg')!important;
 background-position:center center!important;
 background-size:cover!important;
 background-repeat:no-repeat!important;
}
.how-section{padding-top:0;padding-bottom:37px;position:relative}
.how-section .container{position:relative}
.method-grid{top:-78px;margin-bottom:-78px;gap:21px}
.method-card{min-height:240px;border-radius:18px;border:1px solid rgba(255,255,255,.94);background:linear-gradient(150deg,rgba(255,253,252,.88),rgba(255,246,244,.82));box-shadow:0 16px 44px rgba(121,85,104,.15);padding:24px 25px;backdrop-filter:blur(10px)}
.method-card h2{font-size:2.3rem;letter-spacing:.16em;color:#463238}
.method-card p:not(.method-index){font-size:.98rem;color:#66545a}
.method-icon svg{stroke:#b87f35}
.method-after{padding-top:55px;padding-bottom:0}
.method-after h2{color:#45343b}
.method-after p:not(.kicker){color:#66565f}
.featured-section{padding-top:56px;padding-bottom:70px}
.featured-card{background:rgba(255,253,251,.89);box-shadow:0 16px 42px rgba(120,86,106,.16);border:1px solid rgba(255,255,255,.91);border-radius:16px;min-height:188px}
.featured-card::before{background:linear-gradient(104deg,rgba(255,251,250,.97),rgba(255,250,247,.32)),url('assets/sky-arches.jpg') center / cover}
.feature-creative::before{background:linear-gradient(104deg,rgba(255,251,250,.97),rgba(255,250,247,.30)),url('assets/sky-arches.jpg') 58% 100% / cover}
.feature-career::before{background:linear-gradient(104deg,rgba(255,251,250,.98),rgba(255,250,247,.42)),url('assets/pastel-cloudscape.jpg') 70% 60% / cover}
.featured-icon,.featured-copy em{color:#b17e39}
.featured-copy strong{color:#48343d}
.featured-copy small{color:#5e4e56}
.kicker{color:#a87638}
.section-heading h2,.catalog-top h2{color:#49383c}
.catalog-section{padding-top:80px;padding-bottom:95px}
.catalog-top .section-subtitle{color:#63535c}
.project-card{background:rgba(255,251,249,.92);border:1px solid rgba(255,255,255,.94);box-shadow:0 15px 40px rgba(124,87,110,.12)}
.card-top{background:linear-gradient(90deg,rgba(247,220,231,.45),rgba(255,247,224,.25)),url('assets/sky-arches.jpg') center 34% / cover!important}
.card-category{color:#72534b;text-shadow:0 1px 4px white}
.card-number{color:#72534b;text-shadow:0 1px 4px white}
.card-symbol{color:#b28749}
.filter-chip.selected,.filter-chip:hover{background:#ae8351;border-color:#ae8351}
.dashboard-showcase{padding-top:75px;padding-bottom:90px}
.dashboard-showcase-copy h2{color:#49363d}
.dashboard-showcase-copy>p:not(.kicker){color:#604e58}
.dashboard-preview{border:1px solid rgba(255,255,255,.98);border-radius:19px;background:rgba(255,253,251,.88);box-shadow:0 17px 45px rgba(122,86,111,.15);backdrop-filter:blur(11px)}
.preview-project{background:rgba(255,248,245,.87)}
.preview-track i{background:linear-gradient(90deg,#d1a46d,#a97b39)}
.vision-section{border-color:rgba(192,148,131,.25)}
.cta-panel{background:rgba(255,249,248,.87);border:1px solid #fff}
.footer{background:linear-gradient(90deg,#f2e5ee,#fcf1e9);border-top-color:#edd9dc}
#studio-view{background:linear-gradient(120deg,rgba(255,245,251,.53),rgba(255,247,239,.65)),url('assets/pastel-cloudscape.jpg') center top / cover;min-height:85vh}
.studio-empty,.workspace-main,.export-panel{background:rgba(255,253,251,.91);border-color:rgba(208,170,161,.36)}
.guide-panel{background:linear-gradient(128deg,#af879b,#ac8a69)}
.modal{background:#fffcfc}
@media(max-width:900px){
 .hero::before{background:linear-gradient(90deg,rgba(255,246,249,.83),rgba(255,246,249,.62) 65%,rgba(255,246,249,.21))}
 .hero-photo{width:70%;opacity:.65}
 .mobile-nav:not([hidden]){background:rgba(255,247,249,.97)}
 .method-card{padding:22px 18px}
}
@media(max-width:680px){
 body{background-size:auto 1800px}
 .site-header{height:74px}
 .hero{min-height:580px;background-size:auto 100%}
 .hero-photo{height:51%;width:100%;opacity:.39;background-position:65% 32%;-webkit-mask-image:linear-gradient(#000 0%,transparent 100%);mask-image:linear-gradient(#000 0%,transparent 100%)}
 .hero::before{background:linear-gradient(180deg,rgba(255,244,249,.40),rgba(255,246,248,.66) 35%,rgba(255,248,251,.79) 90%)}
 .hero-layout{min-height:580px;padding-top:35px;padding-bottom:90px}
 .hero-lockup h1{font-size:clamp(2.8rem,10.7vw,3.8rem)}
 .hero-tagline{font-size:1.65rem}
 .hero-description{font-size:.84rem;line-height:1.7}
 .hero-buttons .btn{min-height:48px}
 .method-grid{top:-55px;margin-bottom:-55px;gap:14px}
 .method-card{padding:21px 18px;min-height:190px;background:rgba(255,253,252,.89)}
 .method-card h2{font-size:1.8rem}
 .method-after{padding-top:38px}
 .featured-section{padding-top:38px}
 .featured-card{min-height:150px}
 .catalog-section{padding-top:66px}
 .dashboard-showcase{padding-top:65px}
}
/* Final fidelity pass: visible celestial clouds under the hero heading, as in the approved design. */
.hero::before{
  content:"";position:absolute;left:0;top:0;width:60%;height:100%;
  background-image:linear-gradient(90deg,rgba(255,244,251,.50),rgba(255,241,247,.52) 66%,rgba(255,245,245,.75)),url('assets/sky-window.jpg');
  background-size:cover;background-position:center 37%;opacity:.97;z-index:-1;pointer-events:none;
}
.hero-lockup h1,.hero-tagline,.hero-description{filter:drop-shadow(0 1px 9px rgba(255,252,255,.46))}
@media(max-width:900px){.hero::before{width:100%;opacity:.75;background-image:linear-gradient(90deg,rgba(255,244,251,.68),rgba(255,241,247,.67)),url('assets/sky-window.jpg')}}
@media(max-width:680px){.hero::before{width:100%;opacity:.79;background-image:linear-gradient(180deg,rgba(255,244,251,.63),rgba(255,245,251,.77)),url('assets/sky-window.jpg');background-position:center 58%}}