@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap");

/* AVTOPAINT — ROSSO CORSA / CARBON. Design system v2 */
:root{--bg:#0c0d10;--card:#17191d;--gray:#202329;--gold:#E10600;--cream:#F1F0EC;--white:#F5F5F3;--muted:#a5a8ae;--line:rgba(245,245,243,.10);--os:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;--man:'Manrope',sans-serif}
html{scrollbar-color:#383b40 #0c0d10}
body{background:radial-gradient(ellipse 45% 480px at 87% 65px,rgba(225,6,0,.085),transparent 75%),radial-gradient(ellipse 54% 540px at 4% 950px,rgba(92,97,106,.08),transparent 70%),#0c0d10;color:var(--white)}
body:before{background:radial-gradient(ellipse at 74% 12%,rgba(225,6,0,.09),transparent 60%)}
#progress{height:3px;background:linear-gradient(90deg,#9d0706,#f6211c)}
header{background:rgba(10,11,14,.91);border-bottom:1px solid rgba(255,255,255,.075);box-shadow:0 7px 34px rgba(0,0,0,.12)}
header:after{content:"";position:absolute;bottom:-1px;left:0;width:clamp(64px,10%,145px);height:2px;background:var(--gold);box-shadow:0 0 16px rgba(225,6,0,.5)}
.brand{font-family:var(--os);font-weight:700;letter-spacing:.065em;font-size:27px}
.brand-logo{font-size:15px;color:var(--gold);margin-right:11px;text-shadow:0 0 12px rgba(225,6,0,.28)}
.brand span:last-child{color:var(--gold)}
.navbar nav a{font-weight:700;color:#C8C8C9;position:relative;transition:color .3s}
.navbar nav a:after{content:"";position:absolute;height:2px;background:var(--gold);bottom:-10px;left:0;right:100%;transition:right .3s cubic-bezier(.2,.8,.2,1)}
.navbar nav a:hover:after,.navbar nav a:focus-visible:after{right:0}
.nav-button{border-color:rgba(225,6,0,.75);background:rgba(225,6,0,.045);color:#F5F5F3;border-radius:8px;font-weight:800;padding:15px 20px}
.nav-button:hover{background:var(--gold);border-color:var(--gold);color:white;box-shadow:0 6px 32px rgba(225,6,0,.28)}
.eyebrow{color:#EA302B;font-size:10px;letter-spacing:.23em}
.eyebrow:before{width:31px;height:2px}
.intro{position:relative;padding-top:75px;padding-bottom:43px}
.intro:after{content:"";position:absolute;right:0;top:44px;width:95px;height:1px;background:linear-gradient(90deg,transparent,rgba(225,6,0,.7));transform:rotate(-20deg);transform-origin:right}
.intro h1{font-family:var(--os);font-weight:700;letter-spacing:.008em;line-height:.85;font-size:clamp(73px,8.6vw,137px);text-transform:uppercase}
.intro h1 i{-webkit-text-stroke:1px rgba(245,245,243,.73)}
.intro h1 .accent{color:var(--gold);text-shadow:0 0 38px rgba(225,6,0,.15)}
.intro-aside strong{font:700 48px var(--os);color:var(--gold)}
.intro-aside p{color:#9a9da3}
.tile{border-radius:16px;background-color:#17191d;border-color:rgba(237,239,243,.105);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .35s,box-shadow .35s,background-color .35s}
.tile:hover{border-color:rgba(244,47,42,.52);box-shadow:0 10px 44px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)}
.tile:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#E10600,#ff554e);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.16,1,.3,1);z-index:7;pointer-events:none}
.tile:hover:after{transform:scaleX(1)}
.mini,.small-service,.gray-box,.work-message,.contact-message,.location{background-image:radial-gradient(ellipse at var(--mx,78%) var(--my,6%),rgba(225,6,0,.060),transparent 52%),repeating-linear-gradient(115deg,transparent 0px,transparent 8px,rgba(255,255,255,.005) 9px,rgba(255,255,255,.005) 10px)}
.circ{border-radius:9px;width:53px;height:53px;border-color:rgba(255,255,255,.58);font:600 28px var(--os);transition:transform .3s,background .3s,color .3s,border-color .3s}
.tile:hover .circ{background:var(--gold);border-color:var(--gold);color:white;transform:translate(3px,-3px)}
.hero-grid{gap:13px}
.video-tile{background-color:#0f1015}
.video-tile video{filter:saturate(.68) contrast(1.08) brightness(.82)}
.shade{background:linear-gradient(180deg,rgba(6,6,9,.56),transparent 34%,rgba(4,5,8,.91)),linear-gradient(90deg,rgba(5,6,10,.66),transparent 83%)}
.video-tile:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 100% 105%,rgba(225,6,0,.20),transparent 47%);mix-blend-mode:screen}
.video-contents{z-index:2}
.glass-pill{border:1px solid rgba(225,6,0,.55);color:#f5f5f3;background:rgba(12,13,16,.55);font-weight:800;border-radius:6px;letter-spacing:.12em}
.dot{background:#ff251f;box-shadow:0 0 0 3px rgba(225,6,0,.2),0 0 15px rgba(225,6,0,.6);animation:rossoPulse 2.6s ease-in-out infinite}
.video-tile h2{font:700 clamp(53px,5.4vw,87px)/.98 var(--os);letter-spacing:.008em}
.video-tile h2 em{color:#F01D18;text-shadow:0 0 35px rgba(225,6,0,.17)}
.video-end p{font-weight:500;color:#d2d4d7;max-width:365px}
.video-end .circ{background:rgba(13,14,17,.28);backdrop-filter:blur(9px)}
.offer{color:#fff;background:linear-gradient(146deg,#f0120c 0%,#e10600 42%,#a90000 100%);border:1px solid rgba(255,255,255,.13);overflow:hidden}
.offer:before{content:"";position:absolute;width:100%;height:100%;inset:0;pointer-events:none;background:repeating-linear-gradient(127deg,transparent 0,transparent 18px,rgba(0,0,0,.035) 19px,rgba(0,0,0,.035) 21px);opacity:.6}
.offer>*{position:relative;z-index:2}
.offer:after{background:#fff}
.offer h3{font:700 clamp(38px,3.75vw,58px)/.95 var(--os);letter-spacing:.014em;color:#fff}
.offer p{color:rgba(255,255,255,.84);font-weight:500}
.offer .micro.dark{color:rgba(255,255,255,.85)}
.offer .circ{color:#fff;border-color:rgba(255,255,255,.68);background:transparent}
.offer:hover .circ{background:#fff;border-color:#fff;color:#bd0500}
.mini{background-color:#191c20;padding:22px}
.mini-icon{color:var(--gold);font-weight:700}
.mini h3{font:700 29px/.99 var(--os);letter-spacing:.02em}
.mini p{color:#a1a4aa}
.facts{gap:13px}
.fact{position:relative;overflow:hidden;background:#15171b;border-color:var(--line);border-radius:13px}
.fact:before{content:"";position:absolute;top:18px;bottom:18px;left:0;width:2px;background:var(--gold);opacity:.9}
.fact b{font:700 clamp(35px,3.2vw,52px) var(--os);color:#F4221D}
.fact span{color:#afb1b5}
.section{padding-top:150px}
.sec-head h2{font:700 clamp(57px,6.15vw,96px)/.9 var(--os);letter-spacing:.006em}
.sec-head h2 em{color:var(--gold)}
.head-note{color:#a2a4aa}
.services-grid{gap:13px}
.photo-service,.paint-photo{background:#17191c}
.services-grid img{filter:saturate(.65) contrast(1.05) brightness(.82);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s}
.services-grid .tile:hover img{filter:saturate(.86) contrast(1.05) brightness(.9);transform:scale(1.055)}
.photo-shade{background:linear-gradient(0deg,#050508f5,rgba(0,0,0,.08) 75%),linear-gradient(90deg,rgba(225,6,0,.12),transparent 65%)}
.photo-overlay h3{font:700 clamp(38px,3.9vw,59px)/.95 var(--os);letter-spacing:.01em}
.photo-overlay .micro{font-weight:800;color:#f1f1f3}
.gray-box{background-color:#202328}
.gray-box h3{font:700 clamp(33px,3.5vw,48px)/.96 var(--os)}
.gray-box p{color:#adb1b7}
.gray-box a{font-weight:800;letter-spacing:.15em}
.small-service{background-color:#191c20}
.small-service h3{font:700 35px/.98 var(--os)}
.small-service p{color:#a1a4aa}
.gold-box{background:linear-gradient(130deg,#24252a,#16171b);color:#fff;border-color:rgba(225,6,0,.34)}
.gold-box .micro.dark{color:#F1332D}
.gold-box h3{font:700 45px/.93 var(--os);color:#f4f4f3}
.gold-box p{color:#acafb5}
.gold-box .between>span:last-child{color:#E10600;font-size:23px}
.comparison{background:#181b1e;border-color:rgba(255,255,255,.13)}
.comparison .divider{background:#ff2823;width:3px;box-shadow:0 0 19px rgba(225,6,0,.32)}
.comparison .handle{border-color:#f82923;background:#0e0f12e8;color:white;box-shadow:0 4px 24px rgba(225,6,0,.22)}
.compare-labels span{border:1px solid rgba(255,255,255,.15);font-weight:800;letter-spacing:.16em}
.compare-bottom h3{font:700 43px/.98 var(--os)}
.work-message{background-color:#202329}
.work-message h3{font:700 clamp(43px,4.5vw,67px)/.94 var(--os)}
.work-message p{color:#aab0b7}
.work-link{border-radius:16px;background:#F2F1EE;color:#0f1012;transition:background .3s}
.work-link:hover{background:white}
.work-link small{color:#bc120e}
.work-link strong{font:700 29px var(--os)}
.work-link .circ{color:#17191c;border-color:rgba(0,0,0,.23)}
.work-link:hover .circ{color:white}
.price-grid{gap:13px}
.price-tile{background:#181a1e;border-color:rgba(255,255,255,.10)}
.price-tile h3{font:700 clamp(30px,2.7vw,41px)/.97 var(--os)}
.price-tile p{color:#a4a7ad}
.price-tile strong{font:700 43px var(--os);letter-spacing:-.005em}
.price-tile .micro.gold{color:#F12823}
.price-tile.highlight{background:#F1F0ED;border-color:#F1F0ED;color:#151517}
.price-tile.highlight .micro{color:#C50702}
.price-tile.highlight p{color:#555860}
.price-tile.highlight strong small{color:#555860}
.contact-message{background-color:#202329}
.contact-message h3{font:700 clamp(44px,4.7vw,70px)/.96 var(--os)}
.contact-message h3 em{color:var(--gold)}
.contact-message p{color:#acafb4}
.form-box{background:#F0F0EE;border-color:#F0F0EE;color:#111217}
.form-box h3{font:700 41px/.98 var(--os);letter-spacing:.01em}
.form-box>p{color:#555960}
.form-box label{color:#53565c}
.form-box input,.form-box select{background:#fff;border:1px solid rgba(11,12,17,.17);border-radius:7px}
.form-box input:focus,.form-box select:focus{border-color:#E10600;box-shadow:0 0 0 3px rgba(225,6,0,.12)}
.form-end button{background:#D80903;color:#fff;border-radius:8px;letter-spacing:.07em;transition:background .25s,transform .25s,box-shadow .25s}
.form-end button:hover{background:#af0a05;color:#fff;box-shadow:0 8px 28px rgba(225,6,0,.2);transform:translateY(-2px)}
.form-box #formStatus{color:#a60b06}
.location{background-color:#171a1e}
.location h3{font:700 33px/.98 var(--os)}
.location a{transition:color .2s}
.location a:hover{color:#F12620}
footer{background:linear-gradient(0deg,rgba(225,6,0,.025),transparent 60%)}
.footer-big{font:700 clamp(62px,11.4vw,174px)/.83 var(--os);letter-spacing:.008em;color:#303136;white-space:normal}
.footer-top{border-bottom-color:rgba(255,255,255,.12)}
.mobile-cta{background:#E10600;color:#fff;box-shadow:0 12px 34px rgba(108,2,0,.38);border:1px solid rgba(255,255,255,.2);border-radius:9px;letter-spacing:.06em}
:focus-visible{outline:2px solid #f22a24!important;outline-offset:3px}
.reveal{transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .75s,filter .7s}
.js-ready .reveal:not(.visible){opacity:0;transform:translateY(28px);filter:blur(3px)}
.reveal.visible{opacity:1;filter:blur(0)}
@keyframes rossoPulse{0%,100%{box-shadow:0 0 0 3px rgba(225,6,0,.2),0 0 13px rgba(225,6,0,.45)}50%{box-shadow:0 0 0 7px rgba(225,6,0,0),0 0 20px rgba(225,6,0,.7)}}
@media(max-width:1150px){.intro h1{font-size:clamp(63px,8.5vw,112px)}.video-tile h2{font-size:clamp(50px,5.7vw,75px)}}
@media(max-width:900px){.intro{padding-top:56px}.hero-grid{gap:11px}.video-tile h2{font-size:clamp(50px,7vw,76px)}.offer h3{font-size:clamp(38px,5vw,55px)}.section{padding-top:115px}.video-contents{z-index:2}}
@media(max-width:620px){
header:after{width:75px}
.brand{font-size:23px}
.intro{padding:44px 0 28px}
.intro:after{display:none}
.intro h1{font-size:clamp(52px,12.2vw,83px);line-height:.9}
.hero-grid{gap:10px}
.video-tile h2{font-size:clamp(45px,10.5vw,64px)}
.video-contents{padding:20px}
.offer{padding:23px}
.offer h3{font-size:47px}
.mini h3{font-size:27px}
.facts{gap:10px}
.fact b{font-size:39px}
.fact{padding:14px}
.section{padding-top:88px}
.sec-head h2{font-size:clamp(48px,11vw,69px)}
.services-grid{gap:10px}
.photo-overlay h3{font-size:45px}
.gray-box h3{font-size:39px}
.small-service h3{font-size:27px}
.gold-box h3{font-size:45px}
.work-message h3{font-size:50px}
.work-link strong{font-size:25px}
.price-tile h3{font-size:29px}
.price-tile strong{font-size:32px}
.contact-message h3{font-size:48px}
.form-box h3{font-size:36px}
.footer-big{font-size:clamp(55px,14vw,93px)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js-ready .reveal:not(.visible){opacity:1;transform:none;filter:none}}



/* AVTOPAINT / TYPOGRAPHY AND VIDEO COMPOSITION FIX / 2026-10-19 */
/* Keep the motorsport aesthetic, restore negative space and readable headlines. */
.intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,230px);
  align-items:end;
  gap:clamp(22px,3vw,50px);
  padding-top:58px;
  padding-bottom:35px;
}
.intro > div:first-child{min-width:0}
.intro h1{
  font-size:clamp(54px,5.75vw,94px);
  line-height:1.085;
  letter-spacing:.012em;
  font-weight:700;
  max-width:100%;
  width:auto;
  margin:16px 0 0;
  overflow-wrap:normal;
  word-break:normal;
}
.intro h1 i{
  -webkit-text-stroke:1px rgba(245,245,243,.64);
}
.intro-aside{
  width:100%;
  min-width:0;
  padding-bottom:7px;
}
.intro-aside p{
  font-size:12px;
  line-height:1.85;
}
.video-tile{min-height:500px}
.video-tile video{
  filter:saturate(.83) contrast(1.04) brightness(1.08);
  object-position:center center;
}
.shade{
  background:
    linear-gradient(180deg,rgba(6,7,10,.28) 0%,rgba(6,7,10,.04) 38%,rgba(6,7,10,.56) 100%),
    linear-gradient(90deg,rgba(6,7,10,.30),transparent 78%);
}
.video-tile:before{
  background:radial-gradient(ellipse at 98% 105%,rgba(225,6,0,.075),transparent 54%);
}
.video-contents{padding:27px 32px 27px}
.video-tile h2{
  font-family:var(--os);
  font-weight:700;
  font-size:clamp(42px,3.4vw,60px);
  line-height:1.04;
  letter-spacing:.015em;
  max-width:min(690px,87%);
  margin:0 0 14px;
  text-wrap:balance;
}
.video-tile h2 em{text-shadow:0 0 18px rgba(225,6,0,.08)}
.video-end p{
  margin:3px 0 0;
  font-size:11.5px;
  line-height:1.75;
  max-width:320px;
}
@media(min-width:1160px){
  .hero-grid{grid-template-rows:252px 232px}
}
@media(max-width:1150px){
  .intro{gap:24px;grid-template-columns:minmax(0,1fr) 190px}
  .intro h1{font-size:clamp(49px,5.65vw,78px);line-height:1.09}
  .video-tile h2{font-size:clamp(39px,3.65vw,53px);max-width:90%}
}
@media(max-width:900px){
  .intro{display:block;padding-top:43px;padding-bottom:25px}
  .intro h1{font-size:clamp(48px,8.8vw,77px);line-height:1.10;max-width:100%}
  .intro-aside{display:none}
  .video-tile{min-height:390px}
  .video-contents{padding:24px}
  .video-tile h2{font-size:clamp(39px,5.9vw,55px);line-height:1.06;max-width:85%}
}
@media(max-width:620px){
  .intro{padding-top:35px;padding-bottom:24px}
  .intro h1{font-size:clamp(43px,10.3vw,66px);line-height:1.10;letter-spacing:0}
  .video-tile{min-height:400px}
  .video-tile video{object-position:center center}
  .video-contents{padding:20px}
  .video-tile h2{font-size:clamp(35px,8vw,48px);line-height:1.08;max-width:100%;margin-bottom:10px}
  .video-end p{max-width:245px;font-size:10.5px;line-height:1.65}
  .shade{
    background:
      linear-gradient(180deg,rgba(5,6,8,.25) 0%,transparent 40%,rgba(5,6,8,.67) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .video-tile{transition:none}
}
