:root{--navy:#020b16;--navy2:#061322;--gold:#d9a35e;--pale:#f1d093;--white:#f5f2ea}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;background:var(--navy);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body.menu-open{overflow:hidden}
.progress{position:fixed;inset:0 0 auto 0;height:2px;background:rgba(255,255,255,.05);z-index:200;pointer-events:none}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#a8763c,#f0cf94);box-shadow:0 0 12px #d9a35e}
.art-section{position:relative;width:100%;overflow:hidden;background:#020b16;line-height:0;isolation:isolate;scroll-margin-top:70px}
.art-section img{display:block;width:100%;height:auto;transform:scale(1.002);transition:transform 1.6s cubic-bezier(.2,.75,.2,1),filter 1.2s ease;will-change:transform}
.art-section.is-visible img{transform:scale(1.012);filter:brightness(1.025)}
.hero img{transform:scale(1)}.hero.is-visible img{transform:scale(1.007)}
.hotspot{position:absolute;z-index:8;display:block;border:0;background:transparent;cursor:pointer}
.hotspot:focus-visible{outline:2px solid #e6c393;outline-offset:3px;background:rgba(217,163,94,.08)}
.hs-home-solutions{left:3.25%;top:51.5%;width:14.5%;height:5.7%}.hs-home-tech{left:19%;top:51.5%;width:14%;height:5.7%}.hs-home-contact{right:3.3%;top:2.6%;width:12.5%;height:5.3%}.hs-home-insights{left:58.5%;top:2.5%;width:7.8%;height:5.4%}
.hs-solutions-cta{right:7.5%;bottom:8.8%;width:20%;height:5.2%}.hs-tech-next{left:41%;bottom:4%;width:18%;height:8%}.hs-principles-next{left:39%;bottom:0;width:22%;height:13%}.hs-insights-contact{left:0;bottom:0;width:100%;height:22%}
.floating-contact{position:fixed;right:22px;bottom:22px;z-index:60;border:1px solid rgba(217,163,94,.8);background:rgba(2,11,22,.86);backdrop-filter:blur(12px);color:#dba867;padding:13px 18px;border-radius:8px;font-size:15px;cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.35);transition:.25s}.floating-contact:hover{background:#d9a35e;color:#07111e;transform:translateY(-2px)}.floating-contact span{margin-left:12px}
.mobile-menu-button,.mobile-menu{display:none}
.site-header{position:fixed;top:0;left:0;right:0;z-index:130;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 40px;background:rgba(2,11,22,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(217,163,94,.18);transform:translateY(-100%);opacity:0;transition:transform .35s ease,opacity .35s ease;line-height:normal}
.site-header.visible{transform:translateY(0);opacity:1}
.site-header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white)}
.site-header .brand-mark{height:34px;width:auto;display:block}
.site-header .brand-text{display:flex;flex-direction:column;font-size:14px;font-weight:600;letter-spacing:.03em}
.site-header .brand-text small{font-size:9px;font-weight:400;letter-spacing:.16em;color:#9a8f7c}
.site-header .site-nav{display:flex;gap:26px}
.site-header .site-nav a{color:#e9e4da;text-decoration:none;font-size:15px}
.site-header .site-nav a:hover{color:var(--gold)}
.site-header-cta{border:1px solid rgba(217,163,94,.8);background:transparent;color:var(--gold);padding:9px 16px;border-radius:8px;font-size:14px;cursor:pointer;white-space:nowrap;font:inherit}
.site-header-cta:hover{background:var(--gold);color:#07111e}
.site-header-cta span{margin-left:8px}
@media(max-width:800px){
  .site-header{display:flex!important;opacity:1!important;transform:none!important;padding:12px 68px 12px 16px;z-index:140}
  .site-header .site-nav,.site-header-cta{display:none}
}
@media(max-width:800px){
  .mobile-menu a.cta-accent{color:#d9a35e}
}
@media(max-width:800px){
 .floating-contact{display:none}.mobile-menu-button{display:flex;position:fixed;right:16px;top:14px;z-index:151;width:46px;height:42px;padding:10px;border:1px solid rgba(231,161,42,.55);border-radius:8px;background:rgba(2,11,22,.88);flex-direction:column;justify-content:space-around}.mobile-menu-button span{display:block;height:1px;background:#d9a35e;width:100%;transition:.25s}
 .mobile-menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-button[aria-expanded="true"] span:nth-child(2){opacity:0}.mobile-menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .mobile-menu{display:flex;position:fixed;inset:0;z-index:150;background:rgba(1,7,14,.97);backdrop-filter:blur(14px);padding:90px 34px 35px;flex-direction:column;gap:5px;transform:translateX(100%);transition:.35s ease}.mobile-menu.open{transform:translateX(0)}.mobile-menu a,.mobile-menu button{padding:17px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:#f4efe6;text-decoration:none;text-align:left;font-size:22px}.mobile-menu button{color:#d9a35e}
 .art-section{height:auto;min-height:0}.art-section img{width:100%;height:auto;min-width:0;transform:none!important;filter:none!important}
 .art-section picture,.art-section .hotspots,.art-section .hotspot{display:none!important}
}
@media(min-width:801px){.mobile-content{display:none}}
@media(max-width:800px){
 .mobile-content{display:block;padding:84px 22px 54px;max-width:600px;margin:0 auto;line-height:1.5}
 .m-eyebrow{color:var(--gold);letter-spacing:.2em;font-size:11px;font-weight:700;margin:0 0 12px;line-height:normal}
 .m-heading{font-size:clamp(28px,8vw,38px);font-weight:300;line-height:1.15;margin:0 0 16px}
 .m-heading em{font-style:normal;color:var(--gold)}
 .m-intro{color:#c8c0b4;line-height:1.7;font-size:15px;margin:0 0 26px}
 .m-grid{display:grid;gap:14px;margin-bottom:26px}
 .m-grid-3{grid-template-columns:1fr}
 .m-card{border:1px solid rgba(217,163,94,.25);border-radius:14px;padding:20px;background:rgba(255,255,255,.02)}
 .m-card h3{margin:0 0 8px;font-size:17px;font-weight:600;line-height:1.3}
 .m-card p{margin:0;color:#b7b0a4;font-size:14px;line-height:1.6}
 .m-icon-img{height:40px;width:40px;display:block;margin-bottom:12px;color:var(--gold)}
 .m-tag{display:block;color:var(--gold);font-size:11px;letter-spacing:.08em;font-weight:700;margin-bottom:8px}
 .m-article-photo{width:100%;height:110px;border-radius:10px;display:block;margin-bottom:14px;color:var(--gold);background:rgba(217,163,94,.06)}
 .m-steps{display:flex;flex-direction:column;gap:20px}
 .m-step{display:flex;gap:16px;align-items:flex-start;border:1px solid rgba(217,163,94,.2);border-radius:14px;padding:18px}
 .m-step-icon{height:40px;width:40px;flex-shrink:0;margin-top:2px;color:var(--gold)}
 .m-step .num{color:var(--gold);font-weight:700;min-width:26px;font-size:15px;display:block;margin-bottom:4px}
 .m-step h3{margin:0 0 6px;font-size:16px}
 .m-step p{margin:0;color:#b7b0a4;font-size:14px;line-height:1.6}
 .m-cta-box{border:1px solid rgba(217,163,94,.3);border-radius:14px;padding:22px;text-align:center;margin-bottom:6px}
 .m-cta-box h3{margin:0 0 8px;font-size:19px;font-weight:600}
 .m-cta-box p{margin:0;color:#b7b0a4;font-size:14px;line-height:1.6}
 .m-cta-box .m-buttons{justify-content:center;margin-top:16px;margin-bottom:0}
 .m-contact-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(217,163,94,.15)}
 .m-contact-row .m-icon{flex-shrink:0;width:40px;height:40px;border:1px solid rgba(217,163,94,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px}
 .m-contact-row a{color:var(--white);text-decoration:none;font-size:15px}
 .m-contact-row .label{color:var(--gold);letter-spacing:.1em;font-size:11px;font-weight:700;display:block;margin-bottom:4px}
 .m-contact-row small{color:#8f887c;font-size:12px}

 /* Hero background art behind the mobile home content */
 .mobile-hero-bg{position:relative;overflow:hidden;isolation:isolate}
 .mobile-hero-bg .hero-art{position:absolute;top:-40px;right:-60px;width:340px;height:340px;color:var(--gold);opacity:.5;z-index:-2}
 .mobile-hero-bg::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 85% 10%,rgba(2,11,22,.2),rgba(2,11,22,.96) 60%),linear-gradient(180deg,rgba(2,11,22,.55) 0%,rgba(2,11,22,.95) 55%,rgba(2,11,22,1) 78%)}

 /* Faint section-art texture behind Solutions/Technology/Principles/Insights content */
 .mobile-bg-texture{position:relative;isolation:isolate;background-image:radial-gradient(rgba(217,163,94,.22) 1px,transparent 1px);background-size:24px 24px;background-position:0 0}

 /* Scroll-in fade for mobile content and contact section */
 .mobile-content{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
 .art-section.is-visible .mobile-content{opacity:1;transform:translateY(0)}
 .contact-wrap{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
 .contact-section.is-visible .contact-wrap{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art-section img,.mobile-menu,.floating-contact{transition:none!important}}

/* Responsive artwork treatment
   Every section — hero included — scales the same way: width:100%, height:auto.
   This keeps the image's own aspect ratio intact at any viewport width, so nothing
   is ever cropped (object-fit:cover) or letterboxed (object-fit:contain), and the
   percentage-based hotspot coordinates always line up with the rendered image. */
.art-section picture{display:block;width:100%;line-height:0}
.art-section{max-width:1360px;margin:0 auto}
.hs-nav-home{left:35.7%;top:2.1%;width:4.5%;height:5.7%}
.hs-nav-tech{left:41.6%;top:2.1%;width:7.4%;height:5.7%}
.hs-nav-solutions{left:49.9%;top:2.1%;width:6.8%;height:5.7%}
.hs-nav-insights{left:58.2%;top:2.1%;width:6.1%;height:5.7%}
.hs-nav-about{left:65.5%;top:2.1%;width:5.2%;height:5.7%}
.hs-nav-contact{left:71.8%;top:2.1%;width:5.7%;height:5.7%}

.m-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.m-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:8px;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;font:inherit;line-height:normal}
.m-btn-primary{background:var(--gold);color:#0b1119;font-weight:600}
.m-btn-secondary{border-color:rgba(217,163,94,.6);color:var(--gold);background:transparent}

/* Contact section — real HTML at every breakpoint, replacing the old image */
.contact-section{background:#020b16;padding:120px 24px 100px;scroll-margin-top:70px}
.contact-wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.c-eyebrow{color:var(--gold);letter-spacing:.2em;font-size:12px;font-weight:700;margin:0 0 16px;line-height:normal}
.c-eyebrow::before{content:'';display:block;width:34px;height:2px;background:var(--gold);margin-bottom:16px}
.c-heading{font-size:clamp(32px,4.2vw,50px);font-weight:300;line-height:1.1;margin:0 0 20px;color:var(--white)}
.c-heading em{font-style:normal;color:var(--gold)}
.c-intro{color:#c8c0b4;line-height:1.7;font-size:16px;margin:0 0 30px;max-width:480px}
.c-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid rgba(217,163,94,.15)}
.c-row:first-of-type{border-top:1px solid rgba(217,163,94,.15)}
.c-icon{flex-shrink:0;width:44px;height:44px;border:1px solid rgba(217,163,94,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px}
.c-row a{color:var(--white);text-decoration:none;font-size:16px}
.c-row .c-label{color:var(--gold);letter-spacing:.1em;font-size:11px;font-weight:700;display:block;margin-bottom:5px}
.c-row small{color:#8f887c;font-size:13px}
.contact-form{border:1px solid rgba(217,163,94,.35);border-radius:16px;padding:34px;background:linear-gradient(145deg,rgba(5,17,31,.9),rgba(1,8,16,.9))}
.c-form-intro{color:#bdb6aa;line-height:1.6;margin:0 0 20px;font-size:14px}
.c-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:block;color:#c6bdae;font-size:12px;letter-spacing:.04em;margin-top:15px}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:7px;border:1px solid rgba(217,163,94,.35);border-radius:6px;background:#040d18;color:white;padding:14px 15px;font:inherit;outline:none;box-sizing:border-box}
.contact-form input:focus,.contact-form textarea:focus{border-color:#d9a35e;box-shadow:0 0 0 3px rgba(217,163,94,.1)}
.c-submit{width:100%;margin-top:18px;padding:15px 20px;border:0;border-radius:6px;background:linear-gradient(100deg,#e9c48f,#c98a45);color:#0b1119;font-size:17px;cursor:pointer;font:inherit}
.c-submit span{margin-left:14px}
.c-disclaimer{display:block;margin-top:14px;color:#aaa195;font-size:12px}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;gap:36px}}
@media(max-width:800px){.contact-section{padding:96px 20px 60px}}
@media(max-width:520px){.c-form-grid{grid-template-columns:1fr}}

@media (min-width:801px){
  main{background:#020b16}
}
@media (max-width:800px){
  body{background:#020b16}
  .art-section{width:100%;max-width:none;margin:0;border-bottom:1px solid rgba(231,161,42,.12)}
  .art-section picture{width:100%;overflow:hidden}
  .art-section picture img{display:block;width:100%;height:auto;max-width:none;transform:none!important;filter:none!important}
  .progress{height:3px}
  .mobile-menu a,.mobile-menu button{cursor:pointer;pointer-events:auto}
}

/* Performance section — real HTML at every breakpoint */
.performance-section{background:#020b16;padding:120px 24px 100px;scroll-margin-top:70px}
.perf-wrap{max-width:820px;margin:0 auto;opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.performance-section.is-visible .perf-wrap{opacity:1;transform:translateY(0)}
.perf-widget-frame{border:1px solid rgba(217,163,94,.3);border-radius:16px;padding:28px;margin:36px 0;background:rgba(255,255,255,.02);text-align:center}
.perf-widget-frame img{max-width:100%;height:auto;border-radius:8px;display:inline-block}
.perf-widget-caption{margin:16px 0 0;color:#9a8f7c;font-size:12px;letter-spacing:.02em}
.perf-disclaimer{border:1px solid rgba(217,163,94,.35);border-radius:10px;padding:16px 18px;color:#c8c0b4;font-size:13px;line-height:1.6;background:rgba(217,163,94,.05)}
.perf-disclaimer strong{color:var(--gold)}
@media(max-width:700px){
  .performance-section{padding:96px 20px 60px}
  .perf-widget-frame{padding:18px}
}