/* ABRISH 2026 / service circles + experience gallery. Homepage-only; other pages untouched. */
.ccw-site .abr27-services,.ccw-site .abr27-experience{box-sizing:border-box;font-family:Inter,"Segoe UI",Arial,sans-serif}
.ccw-site .abr27-services *,.ccw-site .abr27-experience *{box-sizing:border-box}
.abr27-inner{width:91.6%;max-width:1260px;margin:0 auto}

/* Option 4: bright, airy services row with dual-tone circular picture frames */
.ccw-site .abr27-services{position:relative;isolation:isolate;overflow:hidden;background:#f5f9fe;padding:45px 0 46px;color:#0a294a}
.abr27-services:before{position:absolute;z-index:-1;top:-15%;left:-4%;width:42%;height:105%;content:"";background:radial-gradient(ellipse at center,rgba(201,224,244,.44),transparent 65%);pointer-events:none}
.abr27-services:after{position:absolute;z-index:-1;top:-15%;right:-7%;width:54%;height:106%;content:"";background:linear-gradient(142deg,transparent 30%,rgba(228,239,250,.55) 57%,transparent 58%);pointer-events:none}
.abr27-services-intro{text-align:center;margin-bottom:25px}
.ccw-site .abr27-services-intro h2{font-size:clamp(19px,2.15vw,31px)!important;line-height:1.2;color:#071f3d!important;letter-spacing:-.035em!important;font-weight:900!important;margin:0 0 5px!important;text-transform:uppercase}
.abr27-heading-mark{display:block;margin:0 auto 7px;width:27px;height:3px;border-radius:3px;background:#ff6416}
.ccw-site .abr27-services-intro p{font-size:clamp(9px,.86vw,12px)!important;line-height:1.45;color:#456381!important;font-weight:600;margin:0 auto;max-width:690px}
.abr27-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:clamp(10px,2.6vw,36px)}
.ccw-site .abr27-service{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;max-width:290px;margin:0 auto;text-decoration:none!important;color:#071f3d!important;outline-offset:7px;transition:transform .3s ease}
.abr27-service:hover,.abr27-service:focus-visible{transform:translateY(-5px)}
.abr27-service-portrait{position:relative;display:block;flex:0 0 auto;width:clamp(100px,15vw,195px);height:clamp(100px,15vw,195px);border-radius:50%;padding:5px;border:2px solid #459adf;background:#f6f9fe;box-shadow:0 1px 5px rgba(15,53,94,.06)}
.abr27-ring-orange{border-color:#ff7848}
.abr27-service-portrait:before{position:absolute;inset:2px;content:"";border:1px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;z-index:2}
.ccw-site .abr27-service-portrait img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;object-position:center;transition:transform .4s ease;filter:saturate(1.13) contrast(1.04)}
.ccw-site .abr27-service:hover .abr27-service-portrait img{transform:scale(1.015)}
.abr27-service-badge{position:absolute;bottom:-8px;left:50%;z-index:3;transform:translateX(-50%);width:clamp(36px,5.3vw,63px);height:clamp(36px,5.3vw,63px);border-radius:50%;display:grid;place-items:center;background:#ff6416;color:#fff;box-shadow:0 3px 10px rgba(255,103,27,.22)}
.abr27-service-badge svg{width:53%;height:53%;stroke:#fff}
.ccw-site .abr27-service h3{color:#0b294c!important;font-size:clamp(10px,1.05vw,14px)!important;line-height:1.16!important;font-weight:900!important;letter-spacing:-.025em!important;margin:21px 0 8px!important;text-transform:uppercase;min-height:1.1em}
.ccw-site .abr27-service p{color:#385675!important;font-size:clamp(9px,.93vw,12px)!important;font-weight:500;line-height:1.35!important;max-width:205px;margin:0 auto!important}

/* Option 6: navy experience band, orange accent text, and three genuine project cards. */
.ccw-site .abr27-experience{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#052b4a;padding:43px 0 34px}
.abr27-experience-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(2,25,47,.99) 0%,rgba(3,33,60,.97) 51%,rgba(4,33,58,.79) 100%),url('/assets/img/v14_excavator_hd.jpg') right center/cover no-repeat}
.abr27-experience-intro{text-align:center;max-width:1040px;margin:0 auto 26px}
.abr27-experience-kicker{display:block;color:#ff6d1e;font-size:clamp(8px,.78vw,11px);font-weight:900;line-height:1.5;letter-spacing:.17em;margin:0 0 7px}
.ccw-site .abr27-experience-intro h2{font-size:clamp(23px,2.67vw,38px)!important;line-height:1.16!important;letter-spacing:-.039em!important;font-weight:900!important;color:#fff!important;margin:0 0 8px!important}
.abr27-experience-intro h2 em{font-style:normal;color:#ff6817}
.ccw-site .abr27-experience-intro p{font-size:clamp(9px,.89vw,12px)!important;line-height:1.42!important;color:#e5edf6!important;max-width:790px;margin:0 auto!important}
.abr27-experience-viewport{outline-offset:5px;scrollbar-width:none}
.abr27-experience-viewport::-webkit-scrollbar{display:none}
.abr27-experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,24px)}
.abr27-experience-card{min-width:0;overflow:hidden;border:1px solid rgba(105,167,212,.40);border-radius:9px;background:rgba(1,36,67,.89);box-shadow:0 7px 24px rgba(0,13,30,.15);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.abr27-experience-card:hover,.abr27-experience-card.abr27-selected{border-color:rgba(255,117,31,.8);box-shadow:0 12px 28px rgba(0,10,31,.23)}
.abr27-experience-card:hover{transform:translateY(-4px)}
.ccw-site .abr27-experience-photo{display:block;width:100%;aspect-ratio:2.7/1;overflow:hidden;text-decoration:none!important;background:#275471}
.ccw-site .abr27-experience-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease;filter:saturate(1.12)}
.abr27-experience-card:hover .abr27-experience-photo img{transform:scale(1.055)}
.abr27-experience-copy{position:relative;min-height:145px;padding:15px clamp(12px,1.7vw,24px) 16px;padding-right:clamp(53px,5.3vw,72px);display:flex;flex-direction:column;align-items:flex-start}
.abr27-experience-copy small{font-size:clamp(8px,.83vw,11px)!important;font-weight:800;color:#dfe9f5;letter-spacing:.07em;line-height:1.15}
.ccw-site .abr27-experience-copy h3{font-size:clamp(12px,1.28vw,18px)!important;font-weight:850!important;letter-spacing:-.027em!important;color:#fff!important;line-height:1.23!important;margin:8px 0 6px!important}
.ccw-site .abr27-experience-copy p{font-size:clamp(9px,.88vw,12px)!important;color:#f0f6fd!important;line-height:1.4!important;margin:0!important}
.ccw-site .abr27-experience-arrow{position:absolute;right:clamp(9px,1.3vw,17px);bottom:18px;width:clamp(32px,3.8vw,44px);height:clamp(32px,3.8vw,44px);display:grid;place-items:center;border-radius:50%;background:#ff6918;color:#fff!important;font-size:clamp(19px,2.2vw,25px);font-weight:700;line-height:1;text-decoration:none!important;box-shadow:0 6px 16px rgba(255,92,10,.25);transition:transform .25s ease,background-color .25s ease}
.abr27-experience-arrow:hover,.abr27-experience-arrow:focus-visible{background:#f45208;transform:translateX(3px)}
.abr27-experience-dots{display:flex;align-items:center;justify-content:center;gap:7px;padding:18px 0 0}
.abr27-dot{display:block;width:9px;height:9px;border:0;border-radius:50%;background:#aebdcc;cursor:pointer;padding:0;transition:width .2s ease,background .2s ease}
.abr27-dot.is-active{width:28px;border-radius:20px;background:#ff6a17}
.abr27-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media(min-width:1600px){
 .ccw-site .abr27-services{padding-top:57px;padding-bottom:58px}
 .ccw-site .abr27-experience{padding:60px 0 48px}
 .abr27-experience-copy{min-height:166px}
}
@media(min-width:600px) and (max-width:991px){
 .ccw-site .abr27-services{padding:27px 0 30px}
 .abr27-services-intro{margin-bottom:19px}
 .abr27-service-grid{gap:13px}
 .abr27-service-portrait{width:clamp(99px,15.5vw,142px);height:clamp(99px,15.5vw,142px)}
 .abr27-service-badge{width:clamp(34px,5.7vw,49px);height:clamp(34px,5.7vw,49px)}
 .ccw-site .abr27-experience{padding:24px 0 17px}
 .abr27-experience-intro{margin-bottom:13px}
 .ccw-site .abr27-experience-photo{aspect-ratio:3.05/1}
 .abr27-experience-copy{min-height:105px;padding:10px 33px 10px 12px}
 .ccw-site .abr27-experience-copy h3{margin:6px 0 5px!important}
 .abr27-experience-arrow{bottom:10px!important}
}
@media(max-width:599px){
 .abr27-inner{width:92%}
 .ccw-site .abr27-services{padding:35px 0 39px}
 .abr27-service-grid{gap:24px 13px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .abr27-service-portrait{width:clamp(120px,34vw,170px);height:clamp(120px,34vw,170px)}
 .abr27-service-badge{width:45px;height:45px;bottom:-10px}
 .ccw-site .abr27-service h3{font-size:13px!important;margin-top:22px!important}
 .ccw-site .abr27-service p{font-size:11px!important;max-width:195px}
 .abr27-desktop-break{display:none}
 .ccw-site .abr27-experience{padding:39px 0 27px}
 .abr27-experience-intro{margin-bottom:19px}
 .ccw-site .abr27-experience-intro h2{font-size:clamp(24px,6vw,31px)!important}
 .ccw-site .abr27-experience-intro p{font-size:11px!important;max-width:400px}
 .abr27-experience-viewport{overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;-webkit-overflow-scrolling:touch}
 .abr27-experience-grid{display:flex;gap:12px}
 .abr27-experience-card{min-width:0;flex:0 0 88%;scroll-snap-align:start}
 .ccw-site .abr27-experience-photo{aspect-ratio:2.7/1}
 .abr27-experience-copy{min-height:132px;padding:17px 62px 16px 20px}
 .abr27-experience-copy small{font-size:10px!important}
 .ccw-site .abr27-experience-copy h3{font-size:17px!important}
 .ccw-site .abr27-experience-copy p{font-size:11px!important}
 .ccw-site .abr27-experience-arrow{width:40px;height:40px;right:13px;bottom:15px;font-size:24px}
}
@media(max-width:359px){
 .abr27-service-portrait{width:111px;height:111px}
 .ccw-site .abr27-service h3{font-size:11px!important}
 .ccw-site .abr27-service p{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
 .abr27-service,.abr27-service-portrait img,.abr27-experience-card,.abr27-experience-photo img,.abr27-experience-arrow,.abr27-dot{transition:none!important}
 .abr27-service:hover,.abr27-experience-card:hover,.abr27-experience-card:hover img{transform:none!important}
 .abr27-experience-viewport{scroll-behavior:auto!important}
}