/* Architectural direction. All 3D geometry stays on the visitor's device. */
.design-studio { background: #ffffff; --primary-navy:#1a365d; --primary-navy-dark:#0f2341; --primary-orange:#ea580c; --gray-dark:#4b5563; --gray-lighter:#e5e7eb; }
.design-studio .navbar { background: #0f2341ed; color: #ffffff; border-bottom: 1px solid #ffffff12; backdrop-filter: blur(18px); }
.design-studio .nav-container { height: 88px; }
.design-studio .logo-text { font-weight: 700; letter-spacing: -.7px; }
.design-studio .logo-text small { color: #b6c7de; font-size: 12px; letter-spacing: 2px; }
.design-studio .nav-link { font-size: 14px; color: #d8e3ef; }
.design-studio .nav-link:hover { color: #fed7aa; }
.design-studio .nav-cta { background: #f97316; border-color: #f97316; border-radius: 4px; color: #ffffff; padding: 10px 22px; }
.design-studio .bar { background: #ffffff; }
.design-studio .hero { position: relative; padding: 42px 0 52px; overflow: hidden; background: #0f2341; color: #ffffff; }
.design-studio .hero-layout { grid-template-columns: .9fr 1.3fr; gap: 20px; position: relative; }
.design-studio .hero-content { padding: 35px 0; z-index: 1; }
.design-studio .eyebrow { color: #c1d0e4; font-size: 12px; letter-spacing: 1px; font-weight: 500; margin-bottom: 28px; }
.design-studio .hero-title { color: #ffffff; font-size: 48px; line-height: 1.15; font-weight: 500; letter-spacing: -2px; }
.design-studio .hero-subtitle { color: #c1d0e4; font-size: 16px; max-width: 390px; line-height: 1.8; }
.design-studio .hero-buttons { gap: 24px; margin: 32px 0 40px; }
.design-studio .hero .btn-primary { background: linear-gradient(135deg,#f97316,#ea580c); color: #ffffff; border: 1px solid #f97316; border-radius: 4px; box-shadow: inset 0 1px 0 #fff8,0 5px 18px #0004; }
.design-studio .hero .btn-primary:hover { background: #ea580c; }
.design-studio .hero .btn-secondary { color: #ffffff; border-color: #7892b3; background: transparent; }
.design-studio .hero .btn-secondary:hover { background: #ffffff0d; border-color: #ffffff; }
.design-studio .hero-note { color: #b6c7de; font-size: 12px; }
.architecture-stage { position: relative; min-width: 0; height: 540px; isolation: isolate; }
.architecture-stage::before { content:''; position: absolute; inset: 8% -15% 0; z-index:-1; background: radial-gradient(ellipse at 50% 50%,#4775b330,transparent 65%); }
.architecture-stage::after { content:''; position: absolute; bottom: 88px; left: 18%; width: 65%; height: 45px; border-radius:50%; background:#0008; filter: blur(23px); z-index:-1; }
#architecture { display:none; width: 100%; height: 100%; cursor: default; outline-offset:-15px; }
.model-ready #architecture { display:block; }.model-ready .model-fallback { display:none; }
.model-fallback { width:100%; height:100%; object-fit:cover; border-radius:6px; }
.design-studio .location-strip { background:#1a365d; border:0; border-top:1px solid #ffffff10; color:#d8e3ef; padding:22px 0; }
.design-studio .location-strip span { color:#b6c7de; }
.design-studio .services { padding:90px 0; }
.design-studio .section-tag { color:#ea580c; font-weight:500; letter-spacing:1px; font-size:12px; }
.design-studio .section-title { font-size:32px; letter-spacing:-1px; font-weight:500; }
.design-studio .section-subtitle { font-size:16px; }
.design-studio .services-grid { gap:32px 24px; }
.design-studio .service-card { position:relative; border:1px solid #e5e7eb; background:#ffffff; padding:0; border-radius:6px; overflow:hidden; box-shadow:0 2px 3px #17200c03; transition:border-color .2s; }
.design-studio .service-card:hover { border-color:#7892b3; }
.design-studio .service-card { display:flex; flex-direction:column; }
.design-studio .service-card-content { padding:24px; display:flex; flex-direction:column; flex:1; }
.design-studio .service-card-image { flex-shrink:0; }
/* Hide the black strip embedded in the carport thumbnail. */
.design-studio [data-service="carport"] .service-card-image img { height:104%; object-position:center top; }
.design-studio .service-card h3 { font-size:20px; font-weight:600; }
.design-studio .service-card p { font-size:14px; line-height:1.7; }.design-studio .service-link { font-size:14px; color:#c2410c; margin-top:auto; padding-top:8px; }
.design-studio .about-feature { font-size:14px; }
.design-studio .about-text { font-size:16px; line-height:1.8; }
.design-studio .about { background:#f1f5f9; }.design-studio .about-image>img { border-radius:6px; }.design-studio .experience-badge { border:1px solid #ffffff20; background:#1a365deb; border-radius:5px; backdrop-filter:blur(10px); box-shadow:0 20px 40px #18220c20; }
.design-studio .portfolio-image { border-radius:5px; }.design-studio .portfolio-grid { gap:20px; }.design-studio .testimonials { background:#f3f4f6; }
.design-studio .review-card { border-radius:5px; box-shadow:0 8px 25px #19220f05; }.design-studio .review-text { font-size:16px; }.design-studio .slider-arrow { border-radius:4px; }
.design-studio .cta-section { background:#1a365d; }.design-studio .contact-form { border-radius:6px; box-shadow:0 18px 45px #1d29100a; }
.design-studio .footer { background:#0f2341; }.design-studio .btn { border-radius:4px; }
@media(min-width:1450px) { .design-studio .hero-layout { gap:50px; }.architecture-stage { height:580px; } }
@media(max-width:1050px) { .design-studio .hero-layout { grid-template-columns:1fr 1.1fr; }.design-studio .hero-title { font-size:40px; }.architecture-stage { height:470px; } }
@media(max-width:800px) {
 .design-studio .nav-container { height:78px; }.design-studio .nav-menu { top:78px; background:#1a365d; border-color:#36567e; }
 .design-studio .hero { padding:36px 0 30px; }.design-studio .hero-layout { grid-template-columns:1fr; gap:0; }.design-studio .hero-content { padding:0; }.design-studio .hero-title { font-size:40px; letter-spacing:-1.5px; max-width:520px; }
 .design-studio .hero-subtitle { max-width:480px; }.design-studio .hero-buttons { margin:24px 0; flex-direction:row; }.design-studio .hero-note { display:none; }.architecture-stage { height:440px; margin:0 -10px; }.design-studio .services { padding:64px 0; }
}
@media(max-width:480px) { .design-studio .hero-title { font-size:36px; }.architecture-stage { height:365px; margin:8px -20px 0; }.design-studio .hero .btn { padding:12px 18px; }.design-studio .hero-buttons { gap:18px; }.design-studio .section-title { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { .design-studio .service-card:hover { transform:none; } }

.model-name { display:none; position:absolute; bottom:14px; left:0; right:0; margin:0; text-align:center; font-size:14px; font-weight:500; color:#d8e3ef; pointer-events:none; }
.model-ready .model-name { display:block; }