/* selected-concept.css */
/* Local preview only. Existing Joomla website is not modified. */
:root{--wine:#980e29;--blue:#0068b4}
header{position:absolute;inset:0 0 auto;z-index:3;color:#fff}
.wrap{max-width:1440px;padding-left:5%;padding-right:5%}
.utility .wrap{min-height:40px;font-size:13px}
.masthead{background:linear-gradient(90deg,#17131330,#ffffff12,#15101055)}
.masthead .wrap{min-height:124px}
.brand img{width:143px;filter:drop-shadow(0 0 18px #ffffffe0)}
.callback button{background:var(--wine);color:#fff;padding:14px 28px;border-radius:28px;font-size:14px}
.callback span{display:none}
.phone{font-size:23px;text-shadow:0 1px 6px #0009}
.header-email{display:block;font-size:13px;margin-top:3px;color:#fff}
.contacts .social{margin-top:10px}
.contacts .social a{border:0;border-radius:22px;padding:6px 10px;font-size:12px;gap:7px;min-height:36px}
.contacts .social img{width:24px;height:24px}
.nav{background:#151515ac;border:0}
.nav .wrap{min-height:52px;font-size:15px;gap:50px}
.nav a:hover{color:#ffd1d5}
.hero{min-height:694px;padding-top:216px}
.shade{background:linear-gradient(180deg,#0002 0%,#0001 21%,#10141778 42%,#10141770 80%,#10141745)}
.hero-copy{max-width:1100px;width:100%;padding:62px 25px 36px}
.hero h1{font-size:clamp(38px,4.45vw,68px);font-weight:900;letter-spacing:-1.4px;line-height:1.06;text-shadow:0 2px 16px #0004}
.hero h1 span{margin-top:3px}
.hero h1 em{color:#fa382a;border:0;padding:0}
.intro{font-size:24px;margin:15px 0 35px;color:#fff}
.actions{gap:25px}
.actions .btn{min-width:295px;min-height:57px;border-radius:7px;font-size:17px;gap:28px;background:linear-gradient(110deg,#a90928,#8f1225);border:1px solid #ef3f4c}
.actions .btn span{font-size:25px;font-weight:400}
.actions .btn.secondary{background:#ffffff08;border-color:#fff;min-width:270px}
.actions .btn:hover{filter:brightness(1.15)}
.proof{font-size:14px;margin-top:25px;gap:0;line-height:1.5}
.proof span:before{content:none}
.proof span+span:before{content:'·';margin:0 19px;color:white}
.route{display:flex;align-items:center;justify-content:center;gap:10px;max-width:610px;margin:23px auto 0;text-transform:uppercase;font-size:13px;font-weight:700}
.route svg{width:440px;max-width:70%;height:48px}
.video-control{bottom:12px;font-size:10px;color:#eee;background:#0004}
.photo-band{display:grid;grid-template-columns:1.18fr 1fr 1fr 1fr;background:white;border-bottom:1px solid #e8e4e4;padding:0 3% 0 0;gap:18px}
.experience{background:linear-gradient(125deg,#ab2941,#740d21);color:white;display:flex;flex-direction:column;justify-content:center;padding:32px clamp(25px,5vw,78px);position:relative;overflow:hidden}
.experience:after{content:'';position:absolute;width:250px;height:250px;border:1px solid #ffffff12;border-radius:50%;right:-65px;bottom:-120px;box-shadow:0 0 0 38px #ffffff05,0 0 0 80px #ffffff04}
.experience h2{margin:0;font-size:clamp(28px,3.3vw,48px);letter-spacing:-1px;font-weight:900}
.experience p{font-size:clamp(23px,2.35vw,34px);line-height:1.1;font-weight:700;margin:6px 0 0}
.photo-band figure{min-width:0;margin:16px 0 0}
.photo-band figure img{width:100%;height:176px;object-fit:cover;border-radius:3px;display:block;object-position:center 57%}
.photo-band figure:nth-child(3) img{object-position:center 47%}
.photo-band figcaption{font-size:20px;font-weight:700;color:#900d26;display:flex;align-items:center;gap:12px;padding:11px 0 15px}
.photo-band figcaption span{font-size:32px;line-height:1;font-weight:400}
.floating-contact{position:fixed;bottom:25px;right:25px;width:58px;height:58px;display:grid;place-items:center;background:var(--wine);color:white;border:4px solid #fff;border-radius:50%;box-shadow:0 3px 18px #0002;z-index:5}
.services{padding-top:55px}.preview-note{padding-right:90px}
@media(min-width:1600px){.hero{min-height:740px}.hero-copy{padding-top:75px;padding-bottom:45px}.photo-band figure img{height:200px}}
@media(max-width:760px){
 .utility .wrap{min-height:33px;font-size:10px}.masthead .wrap{min-height:118px;grid-template-columns:92px 1fr;padding:0 16px;gap:8px}
 .brand img{width:92px}.phone{font-size:18px}.header-email{font-size:11px}
 .contacts .social a{font-size:10px;padding:5px 7px;gap:4px;min-height:31px}.contacts .social img{width:18px;height:18px}
 .nav .wrap{min-height:45px;gap:24px;font-size:12px}.hero{padding-top:196px;min-height:680px}
 .hero-copy{padding:48px 16px 40px}.hero h1{font-size:clamp(29px,7.7vw,52px);letter-spacing:-.9px}
 .intro{font-size:16px;max-width:320px;margin:19px auto 25px;line-height:1.5}
 .actions{gap:11px}.actions .btn,.actions .btn.secondary{min-width:0;width:100%;min-height:49px;font-size:14px}
 .proof{font-size:10px;gap:0;margin-top:24px}.proof span+span:before{margin:0 7px}
 .route{font-size:10px;max-width:300px;margin-top:16px;gap:6px}.route svg{height:40px}
 .photo-band{grid-template-columns:repeat(3,1fr);padding:0 12px;gap:10px}
 .experience{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;padding:24px;margin:0 -12px;gap:20px}
 .experience h2{font-size:32px}.experience p{font-size:21px;margin:0}.photo-band figure{margin-top:5px}
 .photo-band figure img{height:115px}.photo-band figcaption{font-size:12px;gap:5px;padding:10px 0 15px}.photo-band figcaption span{font-size:23px}
 .floating-contact{width:50px;height:50px;right:15px;bottom:15px}.services{padding-top:32px}
}
@media(max-width:360px){.contacts .social a{padding:5px;font-size:9px}.contacts .social img{width:16px;height:16px}.masthead .wrap{grid-template-columns:80px 1fr}.brand img{width:80px}}

/* static.css */
/* One-screen composition study; retained alternatives are unchanged. */
body{background:#252729}
.wrap{max-width:1320px;padding-left:48px;padding-right:48px}
.utility .wrap{min-height:38px;font-size:12px}
.masthead{background:#15181b38}
.masthead .wrap{min-height:114px;grid-template-columns:1fr 160px 1fr}
.brand{justify-self:center;position:relative}
.brand:before{content:'';position:absolute;inset:-16px -40px;background:radial-gradient(ellipse,#fff9,transparent 70%);z-index:-1}
.brand img{width:124px;filter:none}
.callback button{border-radius:5px;font-size:13px;padding:13px 22px}
.contacts .phone{font-size:22px;line-height:1.1}
.header-email{font-size:12px;margin-top:5px}
.contacts .social a{font-size:11px;padding:5px 10px;min-height:31px}
.contacts .social img{width:20px;height:20px}
.nav{background:#161a1fcc;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff16}
.nav .wrap{min-height:48px;gap:45px;font-size:14px}
.hero{height:calc(100svh - 42px);min-height:690px;max-height:1000px;padding-top:200px;display:flex;align-items:center;justify-content:center}
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.shade{background:linear-gradient(180deg,#1013182b 0%,#10131840 25%,#10131880 50%,#10131880 80%,#1013189c)}
.hero-copy{width:100%;max-width:1050px;padding:40px 24px 44px}
.hero h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(44px,4.35vw,66px);font-weight:800;letter-spacing:-1.8px;line-height:1.09}
.hero h1 span{margin-top:4px}
.hero h1 em{color:#f34034}
.intro{font-size:21px;line-height:1.5;margin:20px 0 32px}
.actions{gap:16px}
.actions .btn,.actions .btn.secondary{min-width:265px;min-height:54px;padding:12px 24px;border-radius:5px;font-size:15px;justify-content:space-between}
.actions .btn{background:#9c1730;border-color:#cf3049}
.actions .btn.secondary{background:#ffffff08;border-color:#ffffffa6}
.proof{margin-top:28px;font-size:13px;color:#eae5e5}
.proof span+span:before{margin:0 17px}
.route{margin-top:33px;max-width:460px;font-size:11px;letter-spacing:1px;opacity:.85}
.route svg{width:300px;height:35px}
.photo-band,.services,.contact-band,footer,.floating-contact{display:none}
.preview-note{height:42px;display:flex;align-items:center;justify-content:center;padding:8px 20px;border:0;color:#aaa;background:#202326;font-size:11px}
@media(max-width:760px){
 .wrap{padding-left:18px;padding-right:18px}.utility .wrap{min-height:32px;font-size:10px}
 .masthead .wrap{min-height:117px;grid-template-columns:86px 1fr;gap:12px}
 .brand img{width:86px}.brand:before{inset:-14px -20px}.contacts .phone{font-size:18px}
 .contacts .social a{font-size:10px;padding:5px 7px}.contacts .social img{width:18px;height:18px}
 .nav .wrap{min-height:44px;font-size:12px;gap:25px}
 .hero{padding-top:193px;height:calc(100svh - 48px);min-height:670px;max-height:none}
 .hero-copy{padding:38px 18px}.hero h1{font-size:clamp(29px,7.8vw,48px);letter-spacing:-.8px}
 .hero h1 span{margin-top:8px}.intro{font-size:15px;margin:20px auto 25px;max-width:290px}
 .actions{max-width:300px;gap:10px}.actions .btn,.actions .btn.secondary{min-width:0;min-height:48px;font-size:14px}
 .proof{font-size:10px;margin-top:23px}.proof span+span:before{margin:0 6px}.route{max-width:285px;margin-top:24px;font-size:10px}
 .preview-note{height:48px;font-size:10px;padding:8px 22px}
}

/* lower-panel.css */
.photo-band{display:grid;grid-template-columns:1.08fr 1fr 1fr 1fr;gap:20px;padding:0 32px 0 0;background:#fff;border:0}
.photo-band .experience{padding:35px clamp(28px,4vw,72px);background:linear-gradient(125deg,#a8243c,#770f24);min-height:245px}
.photo-band .experience h2{font-size:clamp(30px,3vw,46px);line-height:1.1}
.photo-band .experience p{font-size:30px;line-height:1.12;margin-top:8px}
.photo-band figure{margin:18px 0 0;min-width:0}
.photo-band figure img{display:block;width:100%;height:180px;object-fit:cover;object-position:center;border-radius:3px}
.photo-band figure .cargo-photo{object-position:15% 50%}
.photo-band figcaption{font-size:19px;line-height:1.2;color:#8b1029;display:flex;align-items:center;gap:13px;margin:0;padding:14px 0 18px;font-weight:700}
.photo-band figcaption svg{width:29px;height:29px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
@media(min-width:1700px){.photo-band figure img{height:210px}.photo-band .experience{min-height:278px}}
@media(max-width:760px){.photo-band{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 14px}.photo-band .experience{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;padding:24px;margin:0 -14px}.photo-band .experience h2{font-size:32px}.photo-band .experience p{font-size:22px;margin:0}.photo-band figure{margin:6px 0 0}.photo-band figure img{height:115px}.photo-band figcaption{font-size:12px;gap:5px;padding:12px 0 16px}.photo-band figcaption svg{width:21px;height:21px}}
@media(max-width:360px){.photo-band figcaption{font-size:11px;gap:4px}.photo-band figcaption svg{width:17px;height:17px}.photo-band figure img{height:95px}}

/* Scale by composition width, not by available viewport height. */
@media(min-width:761px){
 header .wrap{max-width:1800px;padding-left:4.5%;padding-right:4.5%}
 .utility .wrap{min-height:38px;font-size:13px}
 .masthead .wrap{min-height:122px;grid-template-columns:1fr 170px 1fr}
 .brand img{width:145px}
 .callback button{font-size:15px;padding:15px 28px;border-radius:24px}
 .contacts .phone{font-size:26px}
 .header-email{font-size:14px}
 .contacts .social a{font-size:13px;min-height:37px;padding:6px 12px}
 .contacts .social img{width:24px;height:24px}
 .nav .wrap{min-height:52px;font-size:16px;gap:54px}
 .hero{height:auto;min-height:0;max-height:none;padding-top:214px}
 .hero-copy{max-width:1350px;padding:clamp(42px,4vw,70px) 28px 38px}
 .hero h1{font-size:clamp(44px,4.85vw,86px);font-weight:900;letter-spacing:-1.8px;line-height:1.04}
 .intro{font-size:clamp(19px,1.7vw,28px);margin:20px 0 32px}
 .actions{gap:24px}
 .actions .btn,.actions .btn.secondary{min-width:310px;min-height:60px;padding:14px 28px;font-size:18px}
 .proof{margin-top:26px;font-size:15px}
 .route{max-width:580px;margin-top:26px;font-size:12px}
 .route svg{width:410px;height:36px}
 .photo-band{height:auto;grid-template-columns:1.08fr 1fr 1fr 1fr;gap:20px;padding-right:24px}
 .photo-band .experience{min-height:0;padding:28px clamp(28px,4vw,78px)}
 .photo-band .experience h2{font-size:clamp(32px,3.15vw,54px)}
 .photo-band .experience p{font-size:clamp(26px,2.35vw,38px)}
 .photo-band figure{margin:18px 0 0;display:block;min-height:0}
 .photo-band figure img{height:auto;aspect-ratio:1.8;object-fit:cover}
 .photo-band figcaption{font-size:21px;padding:15px 0 19px;gap:12px}
 .photo-band figcaption svg{width:29px;height:29px}
 .preview-note{height:30px;padding:5px 16px;font-size:10px}
}
@media(min-width:761px) and (max-width:1050px){
 .masthead .wrap{grid-template-columns:1fr 120px 1fr;gap:12px;min-height:112px}
 .brand img{width:116px}.contacts .phone{font-size:21px}
 .contacts .social a{font-size:11px;padding:5px 7px}.contacts .social img{width:20px;height:20px}
 .callback button{font-size:13px;padding:13px 18px}
 .hero{padding-top:204px}.actions .btn,.actions .btn.secondary{min-width:270px;font-size:16px}
 .photo-band{gap:12px;padding-right:14px}.photo-band figcaption{font-size:16px;gap:7px}
}