/* =========================================================================
   VERCHO — premium finish layer
   Loaded LAST on every page. Changes no text and no brand colours — only
   image fit, responsive layout, depth, finish and motion polish.
   ========================================================================= */

/* ---------- 1. Global finish ---------- */
html{-webkit-text-size-adjust:100%;}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;}
::selection{background:var(--red,#e8192c);color:#fff;}
a,button,.btn-gs,.btn-gq,.btn-vm{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid var(--red,#e8192c);outline-offset:3px;border-radius:3px;}

/* thin scroll-progress line under the header (element added by interactions.js) */
.vx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red,#e8192c),#ff5a67);z-index:1000;pointer-events:none;}

/* header gains a soft frosted finish once the page scrolls */
.site-header{transition:box-shadow .35s ease,background-color .35s ease;}
.site-header.vx-scrolled{background:rgba(255,255,255,.94);box-shadow:0 8px 30px rgba(16,20,45,.10);}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .site-header.vx-scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);}
}
.main-nav a{transition:color .25s ease;}

/* buttons: crisper depth + lift */
.btn-gs,.btn-gq,.btn-vm{transition:background .25s ease,transform .25s ease,box-shadow .25s ease!important;}
.btn-gs:hover,.btn-gq:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,25,44,.38);}
.btn-vm:hover{box-shadow:0 10px 22px rgba(26,31,60,.28);}

/* ---------- 2. Home hero slider ---------- */
/* height follows the photo's own shape so the image is shown fully, not zoomed */
.hero .slide{min-height:clamp(440px,min(82vh,56vw),760px);background-repeat:no-repeat;background-position:center center;}
/* stronger, smoother shade only behind the text side for clean legibility */
.hero .slide-ov{background:linear-gradient(90deg,rgba(6,8,20,0) 0%,rgba(6,8,20,.18) 38%,rgba(6,8,20,.62) 70%,rgba(6,8,20,.80) 100%);}
.hero .slide-box{padding-right:max(4%,92px);max-width:640px;}
.hero .slide-box h1,.hero .slide-box p.slide-h1{text-shadow:0 4px 26px rgba(0,0,0,.45);}
.hero .slide-box p{text-shadow:0 2px 12px rgba(0,0,0,.55);}
.hero .s-arr{width:46px;height:46px;background:rgba(232,25,44,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;}
.hero .s-arr:hover{transform:translateY(-50%) scale(1.07);}
.hero .s-dots{right:auto;left:50%;transform:translateX(-50%);}
.hero .s-dot{transition:background .3s,width .3s;}
.hero .s-dot.active{width:22px;border-radius:5px;transform:none;}

/* tablets: text block narrower so it never runs over the arrows */
@media (max-width:1024px) and (min-width:681px){
  .hero .slide-box{max-width:560px;padding:44px max(4%,84px) 56px 2%;}
  .hero .slide-ov{background:linear-gradient(90deg,rgba(6,8,20,.05) 0%,rgba(6,8,20,.45) 30%,rgba(6,8,20,.78) 62%,rgba(6,8,20,.85) 100%);}
  .hero .slide-box h1,.hero .slide-box p.slide-h1{font-size:clamp(2rem,4.6vw,2.8rem);}
}

/* phones: full photo on top (no cropping), text panel below on the dark base */
@media (max-width:680px){
  .hero .slide{min-height:0;flex-direction:column;align-items:stretch;justify-content:flex-start;
    background-size:100% auto,cover!important;background-position:center top,center center!important;padding-top:56vw;}
  .hero .slide-ov{bottom:auto;height:56vw;background:linear-gradient(180deg,rgba(6,8,20,0) 55%,rgba(20,14,22,.95) 100%);}
  .hero .slide-box{margin:0;max-width:none;width:100%;text-align:center;padding:18px 6% 54px;}
  .hero .slide-box h1,.hero .slide-box p.slide-h1{font-size:clamp(1.75rem,8vw,2.2rem);margin-bottom:.6rem;}
  .hero .slide-box p{font-size:.86rem;margin-bottom:1.3rem;}
  .hero .slide-tag{font-size:.72rem;padding:6px 14px;margin-bottom:.8rem;}
  .hero .s-arr{top:28vw;width:36px;height:36px;font-size:1.2rem;}
  .hero .s-arr.prev{left:10px;}.hero .s-arr.next{right:10px;}
  .hero .s-dots{bottom:20px;}
}

/* ---------- 3. Home product cards ---------- */
/* photo box keeps the photo's real 16:9 shape on every screen */
.prod-photo-wrap{height:auto!important;aspect-ratio:16/9;}
@supports not (aspect-ratio:16/9){ .prod-photo-wrap{height:0!important;padding-top:56.25%;} .prod-photo{position:absolute;inset:0;} }
.prod-card{border-radius:10px;transition:box-shadow .35s ease,transform .35s ease,border-color .35s ease;}
.prod-card:hover{border-color:rgba(232,25,44,.25);box-shadow:0 22px 48px rgba(16,20,45,.14);}
.prod-photo{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){ .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .prod-grid{grid-template-columns:1fr;} }

/* ---------- 4. Product listing pages ---------- */
/* equal-height cards, buttons aligned on one line, spec badge always under the title */
.items-grid{align-items:stretch;}
.items-grid .prod-card{display:flex!important;flex-direction:column;border-radius:10px!important;}
.items-grid .prod-card > div:nth-child(2){flex-direction:column!important;align-items:flex-start!important;flex-wrap:nowrap!important;}
.items-grid .prod-card > a:last-child,.items-grid .prod-card > button:last-child{margin-top:auto;align-self:flex-start;}
.items-grid .prod-card > p{flex:0 0 auto;}
@media (max-width:420px){ .items-grid{grid-template-columns:1fr!important;} }

/* category photo blended into the right side of the product page header */
.prod-hero .vx-ph-photo{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 70%);}
.prod-hero .vx-ph-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,31,60,.15),rgba(26,31,60,.55));}
.prod-hero canvas{z-index:1!important;}
@media (max-width:760px){
  .prod-hero .vx-ph-photo{width:100%;opacity:.22;-webkit-mask-image:none;mask-image:none;}
}

/* ---------- 5. About page ---------- */
/* sectors collage: show the whole picture, labels never cut off */
.about-intro-img img{height:auto!important;max-height:none!important;object-fit:contain!important;aspect-ratio:1100/619;display:block;
  box-shadow:0 24px 60px rgba(16,20,45,.18);border-radius:10px;}
/* "Why choose" — 6 cards as 3+3 / 2+2+2 / 1 instead of 4+2 */
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
@media (max-width:960px){ .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr!important;} .why-card{padding:1.5rem 1.2rem!important;} }
/* stats as a tidy 2x2 on phones instead of one tall column */
@media (max-width:700px){ .stat-row{grid-template-columns:1fr 1fr!important;gap:1rem!important;} .stat-card{padding:1.4rem .8rem!important;} }
.stat-card,.sector-card,.vm-card,.why-card{border-radius:10px;}
.sector-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.sector-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,20,45,.10);}

/* ---------- 6. Contact form finish ---------- */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1f3c' stroke-width='1.8'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;padding-right:38px!important;}
input,select,textarea{transition:border-color .25s ease,box-shadow .25s ease;}
input:focus,select:focus,textarea:focus{border-color:var(--red,#e8192c)!important;box-shadow:0 0 0 3px rgba(232,25,44,.12)!important;outline:none;}

/* ---------- 7. Small screens general ---------- */
@media (max-width:480px){
  .wa-float{width:44px;height:44px;right:14px;bottom:70px;}
  .back-top{right:14px;}
}

/* ---------- 8. Respect reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}

/* ---------- 9. Small alignment fixes ---------- */
/* centred section headings get a centred divider ornament */
.why-inner .sec-head-div,.sec-head[style*="center"] .sec-head-div{justify-content:center;margin-left:auto;margin-right:auto;}
/* contact page: never wider than the screen on small phones */
.cgrid > *{min-width:0;}
@media (max-width:768px){ .cgrid{grid-template-columns:minmax(0,1fr)!important;} }
@media (max-width:400px){ .eq-form{padding:1.4rem 1.1rem!important;} .info-card{overflow-wrap:anywhere;} }
/* enquiry form rows: two columns that can shrink, never wider than the card */
.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.frow > *,.fg input,.fg select,.fg textarea{min-width:0;max-width:100%;box-sizing:border-box;}
@media (max-width:560px){ .frow{grid-template-columns:minmax(0,1fr)!important;} }

/* ---------- 10. Contact page imagery ---------- */
.contact-hero{min-height:clamp(240px,30vw,340px);display:flex;align-items:center;}
.contact-hero .chc{position:relative;z-index:2;}
.contact-hero .vx-ph-photo{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center 40%;opacity:.7;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 70%);}
.contact-hero .vx-ph-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,31,60,.1),rgba(26,31,60,.5));}
.contact-hero canvas{z-index:1!important;}
@media (max-width:760px){ .contact-hero .vx-ph-photo{width:100%;opacity:.25;-webkit-mask-image:none;mask-image:none;} }
.c-photo{margin:0;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 18px 44px rgba(16,20,45,.16);aspect-ratio:16/9;background:#0b0d16;}
.c-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.c-photo:hover img{transform:scale(1.04);}
.c-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red,#e8192c);}

/* ---------- 11. Header logo: lightweight animated SVG (draw-on, fill, periodic light sweep — built into logo-anim.svg)
   sized to sit in proportion with the navigation text ---------- */
.site-header .logo-img{height:clamp(30px,2.8vw,40px)!important;max-height:none!important;width:auto!important;}
.foot-bottom .fb-logo-img,.fb-logo-img{height:clamp(30px,2.6vw,38px)!important;max-height:none!important;width:auto!important;}
.nav-wrap .logo-img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease;}
.nav-wrap > div:has(> .logo-img):hover .logo-img{transform:translateY(-1px);filter:drop-shadow(0 6px 10px rgba(232,25,44,.2));}