/* =================================
   RENI UPVC — SHARED STYLESHEET
   Theme: white · dark slate · bronze accent · neutral light backgrounds

   Loaded by every page (index, about, products, faq, testimonials,
   our-clients, contact) and by the 403 / 404 error pages.
   Structure: tokens/base -> components -> page sections -> responsive
   -> utilities (formerly inline styles) -> error pages.
   Page-specific rules are scoped by section class or body[data-page].
================================= */

/* =================================
   DESIGN TOKENS / BASE
================================= */
:root{
  --white:#FFFFFF;
  --paper:#F5F4F1;
  --paper-2:#EFEDE8;
  --ink:#1A2129;
  --ink-soft:#4B5560;
  --slate:#33495A;
  --slate-dark:#22323F;
  --bronze:#A9784C;
  --bronze-dark:#8C6039;
  --line:#E2DFD9;
  --radius-s:4px;
  --radius-m:6px;
  --maxw:1240px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:110px;}
body{
  margin:0;
  font-family:'Work Sans', -apple-system, sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t);
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:'Fraunces', Georgia, serif; font-weight:600; margin:0; line-height:1.08; letter-spacing:-0.01em;}
p{line-height:1.65; color:var(--ink-soft); margin:0;}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{position:relative;}
/* =================================
   TYPOGRAPHY HELPERS
================================= */
.eyebrow-tag{display:inline-flex; align-items:center; gap:10px; font-size:0.8rem; color:var(--bronze-dark); font-weight:600;}
.eyebrow-tag::before{content:""; width:22px; height:1.5px; background:var(--bronze); display:inline-block;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-top:14px;}
.section-head p{margin-top:16px; font-size:1.02rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow-tag::before{display:none;}
/* =================================
   BUTTONS
================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:2px; font-weight:600; font-size:0.95rem;
  cursor:pointer; border:1.5px solid transparent; transition:transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
  font-family:'Work Sans', sans-serif;
}
.btn-primary{background:var(--slate); color:var(--white);}
.btn-primary:hover{background:var(--slate-dark); transform:translateY(-2px);}
.header-actions .btn-shiny{position:relative; overflow:hidden; isolation:isolate; transition:transform .24s ease, background .24s ease, box-shadow .24s ease;}
.header-actions .btn-shiny::after{content:""; position:absolute; z-index:-1; top:-50%; bottom:-50%; left:-45%; width:32%; background:rgba(255,255,255,.24); transform:skewX(-22deg) translateX(-180%); transition:transform .55s ease;}
.header-actions .btn-shiny:hover{background:var(--slate-dark); transform:translateY(-3px); box-shadow:0 8px 18px rgba(20,26,32,.22);}
.header-actions .btn-shiny:hover::after{transform:skewX(-22deg) translateX(520%);}
.header-actions .btn-shiny:active{transform:translateY(-1px) scale(.98); box-shadow:0 3px 8px rgba(20,26,32,.18);}
.header-actions .btn-shiny:focus-visible{outline:3px solid var(--bronze); outline-offset:3px;}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--white); transform:translateY(-2px);}
.btn-bronze{background:var(--bronze); color:var(--white);}
.btn-bronze:hover{background:var(--bronze-dark); transform:translateY(-2px);}
.btn-light{border-color:rgba(255,255,255,0.7); color:#fff; background:transparent;}
.btn-light:hover{background:rgba(255,255,255,0.15); transform:translateY(-2px);}

/* =================================
   SCROLL REVEAL ANIMATION
================================= */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
/* Respect users who ask the OS for less motion: disable smooth scroll and entrance animation */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .who-card.reveal.in{animation:none;}
  .why-item:hover, .vm-card:hover, .who-card:hover, .logo-card:hover{transform:none;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn:hover{transform:none;}
   .header-actions .btn-shiny,
   .header-actions .btn-shiny::after{transition:none;}
   .header-actions .btn-shiny:hover,
   .header-actions .btn-shiny:active{transform:none;}
}

/* =================================
   HEADER / NAVIGATION
================================= */
header{
  position:sticky; top:0; z-index:200; background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 28px; max-width:var(--maxw); margin:0 auto; transition:padding .3s ease;}
header.shrink .nav-wrap{padding:6px 28px;}
.site-logo{display:flex; align-items:center; flex-shrink:0; line-height:0;}
.site-logo img{height:72px; width:auto; max-width:none; object-fit:contain; transition:height .3s ease;}
header.shrink .site-logo img{height:54px;}
nav.desktop-nav{display:flex; align-items:center; gap:26px;}
nav.desktop-nav a{font-size:0.88rem; font-weight:500; color:var(--ink); position:relative; padding:4px 0; white-space:nowrap;}
nav.desktop-nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--bronze); transition:width .28s ease;}
nav.desktop-nav a:hover::after, nav.desktop-nav a.active::after{width:100%;}
nav.desktop-nav a.active{color:var(--slate);}
.header-actions{display:flex; align-items:center; gap:16px;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{width:24px; height:2px; background:var(--ink); display:block; transition:transform .25s ease, opacity .25s ease;}

/* =================================
   MOBILE MENU
================================= */
.mobile-menu{position:fixed; inset:0; background:var(--white); z-index:300; transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column; padding:28px; padding-top:calc(28px + var(--safe-t)); overflow-y:auto;}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu .close-btn{align-self:flex-end; background:none; border:none; font-size:1.8rem; cursor:pointer; color:var(--ink); line-height:1;}
.mobile-menu nav{display:flex; flex-direction:column; gap:22px; margin-top:32px;}
.mobile-menu nav a{font-family:'Fraunces', serif; font-size:1.4rem; font-weight:500; color:var(--ink);}
.mobile-menu nav a.active{color:var(--slate);}
.mobile-menu .btn{margin-top:32px; width:100%;}

/* =================================
   FLOATING CALL & WHATSAPP BUTTONS (RIGHT SIDE)
================================= */
.floating-actions{position:fixed; z-index:220; right:20px; bottom:calc(20px + var(--safe-b)); display:flex; flex-direction:column-reverse; align-items:center; gap:12px; pointer-events:none;}
.floating-actions .fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(26,33,41,0.24); pointer-events:auto;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.floating-actions .fab:hover{transform:translateY(-3px) scale(1.06); box-shadow:0 14px 28px rgba(26,33,41,0.3);}
.floating-actions .fab:focus-visible{outline-offset:4px;}
.floating-actions .fab-call{background:var(--slate); border:2px solid rgba(169,120,76,0.0);}
.floating-actions .fab-call:hover{background:var(--slate-dark); border-color:var(--bronze);}
.floating-actions .fab-whatsapp{background:#25D366;}
.floating-actions .fab svg{width:24px; height:24px; color:#fff;}
body.has-bottom-nav .floating-actions{bottom:calc(78px + var(--safe-b));}

/* =================================
   HERO SECTION (HOME SLIDER)
================================= */
.hero-slider{position:relative; height:92vh; min-height:560px; max-height:860px; overflow:hidden;}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; display:flex; align-items:center;}
.hero-slide.active{opacity:1; z-index:1;}
.hero-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-slide .overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(20,26,32,0.72) 10%, rgba(20,26,32,0.38) 55%, rgba(20,26,32,0.2) 100%);}
.hero-slide .slide-content{position:relative; z-index:2; max-width:640px; padding:0 60px;}
.hero-slide .eyebrow-tag{color:#D8C4A8;}
.hero-slide .eyebrow-tag::before{background:#D8C4A8;}
.hero-slide h1, .hero-slide .slide-title{color:#fff; font-size:clamp(2.2rem, 4.8vw, 3.6rem); margin-top:16px; font-family:'Fraunces', Georgia, serif; font-weight:600; line-height:1.08; letter-spacing:-0.01em;}
.hero-slide p{color:rgba(255,255,255,0.86); font-style:italic; font-size:1.15rem; margin-top:18px; max-width:42ch;}
.hero-slide .slide-actions{display:flex; align-items:center; gap:22px; margin-top:36px;}
.circle-cta{display:flex; align-items:center; gap:14px; color:#fff; font-weight:600; font-size:0.98rem;}
.circle-cta .circle{width:54px; height:54px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.75); display:flex; align-items:center; justify-content:center; transition:background .3s ease, transform .3s ease;}
.circle-cta:hover .circle{background:rgba(255,255,255,0.16); transform:translateX(4px);}
.circle-cta svg{width:18px; height:18px; color:#fff;}

.hero-dots{position:absolute; right:44px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:22px;}
.hero-dots .dot-line{width:1px; height:34px; background:rgba(255,255,255,0.4);}
.hero-dots button{background:none; border:none; color:rgba(255,255,255,0.55); font-family:'Fraunces',serif; font-size:0.95rem; cursor:pointer; padding:4px;}
.hero-dots button.active{color:#fff; font-weight:600;}

.hero-scroll-cue{position:absolute; left:60px; bottom:34px; z-index:2; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.7); font-size:0.78rem; letter-spacing:0.06em;}
.hero-scroll-cue .line{width:26px; height:1px; background:rgba(255,255,255,0.6);}

/* Phones: slightly shorter hero and tighter slide padding */
@media (max-width:640px){
  .hero-slider{height:82vh; min-height:520px;}
  .hero-slide .slide-content{padding:0 24px;}
  .hero-dots{right:16px; gap:16px;}
  .hero-dots .dot-line{height:20px;}
  .hero-scroll-cue{display:none;}
  .page-hero{height:82vh; min-height:520px; max-height:none;}
}

/* =================================
   PAGE HERO (SUB-PAGES)
================================= */
.page-hero{position:relative; height:92vh; min-height:560px; max-height:860px; display:flex; align-items:flex-end; overflow:hidden;}
.page-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.page-hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,26,32,0.45), rgba(20,26,32,0.78));}
.page-hero .content{position:relative; z-index:1; padding:0 28px 46px; max-width:var(--maxw); margin:0 auto; width:100%;}
.breadcrumb{color:rgba(255,255,255,0.75); font-size:0.85rem; margin-bottom:14px;}
.breadcrumb a{color:rgba(255,255,255,0.75);}
.breadcrumb a:hover{color:#fff;}
.page-hero h1{color:#fff; font-size:clamp(2rem, 4.4vw, 3rem);}
.page-hero p{color:rgba(255,255,255,0.82); margin-top:12px; max-width:52ch;}

/* =================================
   ABOUT
================================= */
.about{padding:96px 0;}
.about.alt-bg{background:var(--paper);}
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.about-media{position:relative; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:3/4;}
.about-media img{width:100%; height:100%; object-fit:cover;}
.about-copy p{margin-top:16px;}
.about-list{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;}
.about-list li{display:flex; align-items:flex-start; gap:10px; font-size:0.94rem; color:var(--ink);}
.about-list li svg{flex-shrink:0; margin-top:3px;}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:60px;}
.stat-strip div{padding:28px 20px; text-align:center; border-left:1px solid var(--line);}
.stat-strip div:first-child{border-left:none;}
.stat-strip h3{font-size:1.05rem;}
.stat-strip p{font-size:0.85rem; margin-top:6px;}

/* =================================
   OUR VISION & MISSION (ABOUT PAGE)
================================= */
.vm-section{padding:96px 0; background:var(--paper);}
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.vm-card{
  position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:44px 38px 42px;
  transition:opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.vm-card::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--bronze); transform:scaleX(0.18); transform-origin:left; transition:transform .45s ease;}
.vm-icon{width:58px; height:58px; border-radius:50%; background:var(--paper); border:1px solid var(--line); color:var(--slate); display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition:transform .35s ease, background .35s ease, color .35s ease;}
.vm-icon svg{width:28px; height:28px;}
.vm-card h3{font-size:1.5rem; margin-bottom:14px; transition:color .3s ease;}
.vm-card p{font-size:1rem; line-height:1.75;}
.vm-card:hover, .vm-card:focus-within, .vm-card.is-touched{transform:translateY(-6px); box-shadow:0 22px 40px rgba(26,33,41,0.12); border-color:var(--bronze);}
.vm-card:hover::before, .vm-card.is-touched::before{transform:scaleX(1);}
.vm-card:hover .vm-icon, .vm-card.is-touched .vm-icon{background:var(--slate); color:var(--white); transform:scale(1.08);}
.vm-card:hover h3, .vm-card.is-touched h3{color:var(--bronze-dark);}

/* =================================
   PRODUCT CARDS
================================= */
.products{padding:96px 0;}
.products.alt-bg{background:var(--paper);}
.product-grid{--pg-gap:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pg-gap);}
.product-card{
  --pad:20px; display:flex; flex-direction:column; height:100%;
  border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; background:var(--white);
  transition:opacity .7s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card .thumb{aspect-ratio:4/3; overflow:hidden; flex-shrink:0;}
.product-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.product-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px rgba(26,33,41,0.12);}
.product-card:hover .thumb img{transform:scale(1.06);}
/* body stretches so "View Details" always sits at the bottom of every card */
.product-card .body{display:flex; flex-direction:column; flex:1; padding:var(--pad) var(--pad) 22px;}
.product-card h3{font-size:1.12rem; margin-bottom:8px;}
.product-card p{font-size:0.9rem; flex:1;}
.product-card .cta-row{margin-top:16px; display:flex; align-items:center; justify-content:space-between;}
.product-card .enquire{font-size:0.85rem; font-weight:600; color:var(--slate); opacity:0.55; transition:opacity .3s ease;}
.product-card:hover .enquire, .product-card:focus-within .enquire{opacity:1;}
.product-card .enquire:focus-visible{opacity:1;}
/* where supported, subgrid also aligns the titles and descriptions across each row */
@supports (grid-template-rows: subgrid){
  .product-grid{row-gap:0;}
  .product-card{display:grid; grid-template-rows:subgrid; grid-row:span 4; height:auto; margin-bottom:var(--pg-gap);}
  .product-card .body{display:contents;}
  .product-card h3{margin:0; padding:var(--pad) var(--pad) 0;}
  .product-card p{padding:8px var(--pad) 0;}
  .product-card .cta-row{margin:0; padding:16px var(--pad) 22px; align-self:end;}
}

/* PRODUCTS PAGE — premium hover: lift, image zoom, accent border, colour shift, subtle shine sweep */
body[data-page="products"] .product-card{position:relative; transition:opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
body[data-page="products"] .product-card:hover, body[data-page="products"] .product-card:focus-within, body[data-page="products"] .product-card.is-touched{
  transform:translateY(-8px); border-color:var(--bronze); box-shadow:0 26px 46px rgba(34,50,63,0.16);
}
body[data-page="products"] .product-card h3, body[data-page="products"] .product-card p{transition:color .3s ease;}
body[data-page="products"] .product-card:hover h3, body[data-page="products"] .product-card:focus-within h3, body[data-page="products"] .product-card.is-touched h3{color:var(--bronze-dark);}
body[data-page="products"] .product-card:hover p, body[data-page="products"] .product-card:focus-within p, body[data-page="products"] .product-card.is-touched p{color:var(--ink);}
body[data-page="products"] .product-card .enquire{display:inline-flex; align-items:center; gap:6px; padding:2px 0; border-bottom:1.5px solid transparent; transition:opacity .3s ease, color .3s ease, border-color .3s ease;}
body[data-page="products"] .product-card:hover .enquire, body[data-page="products"] .product-card:focus-within .enquire, body[data-page="products"] .product-card.is-touched .enquire{color:var(--bronze-dark); border-bottom-color:var(--bronze);}
body[data-page="products"] .product-card::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-70%; width:40%; pointer-events:none; z-index:2;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); transition:left .9s ease;
}
body[data-page="products"] .product-card:hover::after, body[data-page="products"] .product-card.is-touched::after{left:140%;}
body[data-page="products"] .product-card:focus-within{outline:2px solid var(--bronze); outline-offset:2px;}
/* Products page: switch off the lift / shine effects for reduced-motion users */
@media (prefers-reduced-motion: reduce){
  body[data-page="products"] .product-card::after{display:none;}
  body[data-page="products"] .product-card:hover, body[data-page="products"] .product-card:focus-within{transform:none;}
}


/* =================================
   FEATURES
================================= */
.features{background:var(--paper); padding:96px 0;}
.features.white-bg{background:var(--white);}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.feature-card{background:var(--white); padding:32px 28px; transition:background .3s ease;}
.feature-card:hover{background:var(--paper-2);}
.feature-card .icon{width:42px; height:42px; margin-bottom:18px; color:var(--slate);}
.feature-card h3{font-size:1.06rem; font-family:'Work Sans',sans-serif; font-weight:600; margin-bottom:8px;}
.feature-card p{font-size:0.88rem;}

/* =================================
   WHY CHOOSE RENI
================================= */
.why{padding:96px 0;}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.why-media{position:relative; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/5;}
.why-media img{width:100%; height:100%; object-fit:cover;}
.why-list{display:flex; flex-direction:column; gap:14px; margin-top:22px;}
.why-item{
  position:relative; display:flex; gap:20px; padding:22px 24px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-m);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.why-item::before{content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:2px; background:var(--bronze); transform:scaleY(0); transition:transform .35s ease;}
.why-item .num{font-family:'Fraunces',serif; font-size:1.3rem; color:var(--bronze); width:36px; flex-shrink:0; transition:transform .35s ease, color .35s ease;}
.why-item h3{font-size:1.08rem; margin-bottom:6px; transition:color .3s ease;}
.why-item p{font-size:0.92rem; transition:color .3s ease;}
.why-item:hover, .why-item:focus-within, .why-item.is-touched{transform:translateY(-6px); box-shadow:0 18px 34px rgba(26,33,41,0.10); border-color:var(--bronze); background:#FDFCFA;}
.why-item:hover::before, .why-item.is-touched::before{transform:scaleY(1);}
.why-item:hover .num, .why-item.is-touched .num{transform:scale(1.14) translateX(2px); color:var(--bronze-dark);}
.why-item:hover h3, .why-item.is-touched h3{color:var(--slate);}
.why-item:hover p, .why-item.is-touched p{color:var(--ink);}

/* =================================
   THE UPVC ADVANTAGE (BENEFITS)
================================= */
.benefits{background:var(--slate); color:var(--white); padding:96px 0;}
.benefits .section-head h2, .benefits .section-head p{color:var(--white);}
.benefits .eyebrow-tag{color:#D8C4A8;}
.benefits .eyebrow-tag::before{background:#D8C4A8;}
.benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.16); perspective:1200px;}
.benefit-card{background:var(--slate); padding:30px 24px; position:relative; transform-style:preserve-3d; transition:transform .4s ease, box-shadow .4s ease; will-change:transform;}
.benefit-card .icon{width:34px; height:34px; margin-bottom:16px; color:#D8C4A8;}
.benefit-card h3{font-size:1rem; font-family:'Work Sans',sans-serif; font-weight:600; color:var(--white); margin-bottom:8px;}
.benefit-card p{font-size:0.86rem; color:rgba(255,255,255,0.72);}
/* 3D tilt hover only on devices with a real pointer (not touch) */
@media (hover:hover) and (pointer:fine){
  .benefit-card:hover{transform:translateY(-8px) rotateX(6deg) rotateY(-4deg) scale(1.03); box-shadow:0 26px 44px rgba(0,0,0,0.35); z-index:2;}
}

/* =================================
   WHERE RENI FITS
================================= */
.applications{padding:96px 0;}
.app-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.app-card{position:relative; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/5;}
.app-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.app-card:hover img{transform:scale(1.05);}
.app-card .label{position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(to top, rgba(20,26,32,0.82), rgba(20,26,32,0));}
.app-card .label span{color:var(--white); font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600;}

/* =================================
   OUR PROCESS
================================= */
.process{background:var(--paper); padding:96px 0;}
.process.white-bg{background:var(--white);}
.process-track{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:20px;}
.process-track::before{content:""; position:absolute; top:26px; left:5%; right:5%; height:1px; background:var(--line); z-index:0;}
.process-step{position:relative; z-index:1; text-align:left;}
.process-step .circle{width:52px; height:52px; border-radius:50%; background:var(--white); border:1.5px solid var(--slate); color:var(--slate); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; margin-bottom:18px;}
.process-step h3{font-size:0.98rem; margin-bottom:6px;}
.process-step p{font-size:0.84rem;}

/* =================================
   GALLERY & LIGHTBOX
================================= */
.gallery{padding:96px 0;}
.masonry{columns:4; column-gap:16px;}
.masonry .g-item{break-inside:avoid; margin-bottom:16px; position:relative; border-radius:var(--radius-s); overflow:hidden; cursor:pointer;}
.masonry .g-item img{width:100%; display:block; transition:transform .5s ease;}
.masonry .g-item .overlay{position:absolute; inset:0; background:rgba(26,33,41,0.42); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity .3s ease;}
.masonry .g-item:focus-visible{outline:3px solid var(--bronze); outline-offset:-3px;}
.masonry .g-item:hover img{transform:scale(1.06);}
.masonry .g-item:hover .overlay{opacity:1;}
.masonry .g-item .overlay svg{width:34px; height:34px; color:var(--white);}

.lightbox{position:fixed; inset:0; background:rgba(15,18,22,0.92); z-index:400; display:none; align-items:center; justify-content:center; padding:24px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; object-fit:contain; border-radius:4px;}
.lightbox .lb-close{position:absolute; top:24px; right:28px; background:none; border:none; color:var(--white); font-size:2rem; cursor:pointer; line-height:1;}

/* =================================
   CALL TO ACTION
================================= */
.cta-section{position:relative; padding:120px 0; overflow:hidden;}
.cta-section img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cta-section .overlay{position:absolute; inset:0; background:linear-gradient(120deg, rgba(26,33,41,0.88), rgba(51,73,90,0.62));}
.cta-section .content{position:relative; z-index:1; max-width:560px;}
.cta-section h2{color:var(--white); font-size:clamp(1.9rem,3.6vw,2.7rem);}
.cta-section p{color:rgba(255,255,255,0.82); margin-top:16px; font-size:1.05rem;}
.cta-actions{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}

/* =================================
   FAQ ACCORDION
================================= */
.faq-section{padding:96px 0;}
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:'Fraunces',serif; font-size:1.08rem; color:var(--ink);}
.faq-q .plus{width:22px; height:22px; flex-shrink:0; position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--slate); transition:transform .3s ease;}
.faq-q .plus::before{left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%);}
.faq-q .plus::after{top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 4px 24px; font-size:0.95rem;}
.faq-item.open .faq-a{max-height:400px;}

/* =================================
   TESTIMONIALS
================================= */
.testimonial-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:32px 28px; display:flex; flex-direction:column; gap:18px;}
.testimonial-card .quote-mark{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--bronze); line-height:1;}
.testimonial-card p.quote{color:var(--ink-soft); font-size:0.95rem; font-style:italic;}
.testimonial-card .person{display:flex; align-items:center; gap:12px; margin-top:auto;}
.testimonial-card .avatar{width:44px; height:44px; border-radius:50%; background:var(--paper-2); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:var(--ink-soft); text-align:center; flex-shrink:0;}
.testimonial-card strong{display:block; font-size:0.92rem;}
.testimonial-card span{font-size:0.82rem; color:var(--ink-soft);}
.testimonial-card .avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.testimonial-card .stars{color:var(--bronze); font-size:0.85rem; letter-spacing:2px;}

/* =================================
   TESTIMONIAL CAROUSEL
================================= */
.testimonial-carousel{position:relative; max-width:640px; margin:0 auto;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex; transition:transform .6s ease;}
.carousel-slide{flex:0 0 100%; padding:0 6px;}
.carousel-slide .testimonial-card{height:100%;}
.carousel-arrow{position:absolute; top:50%; transform:translateY(-50%); background:var(--white); border:1px solid var(--line); width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; display:flex; cursor:pointer; font-size:1.2rem; color:var(--slate); box-shadow:0 8px 18px rgba(26,33,41,0.14); z-index:2; transition:background .25s ease, color .25s ease;}
.carousel-arrow:hover{background:var(--slate); color:var(--white);}
.carousel-arrow.prev{left:-14px;}
.carousel-arrow.next{right:-14px;}
.carousel-dots{display:flex; justify-content:center; gap:8px; margin-top:28px;}
.carousel-dots button{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0;}
.carousel-dots button.active{background:var(--bronze);}
/* Phones: smaller carousel arrows tucked closer to the card edge */
@media (max-width:640px){
  .carousel-arrow{width:34px; height:34px;}
  .carousel-arrow.prev{left:-4px;}
  .carousel-arrow.next{right:-4px;}
}

/* =================================
   OUR CLIENTS — WHO WE WORK WITH
================================= */
.client-types{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.who-card{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.who-card.reveal{opacity:0; transform:none;}
.who-card.reveal.in{opacity:1; animation:whoRise .7s ease backwards; animation-delay:var(--d, 0ms);}
@keyframes whoRise{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);}}
.who-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2);}
.who-media img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.who-icon{position:absolute; left:18px; bottom:-1px; width:50px; height:50px; border-radius:6px 6px 0 0; background:var(--white); color:var(--slate); display:flex; align-items:center; justify-content:center; transition:transform .35s ease, color .35s ease; transform-origin:bottom center;}
.who-icon svg{width:28px; height:28px;}
.who-body{padding:22px 22px 26px; border-top:2px solid transparent; transition:border-color .35s ease;}
.who-body h3{font-size:1.06rem; margin-bottom:8px; transition:color .3s ease;}
.who-body p{font-size:0.88rem;}
.who-card:hover, .who-card:focus-within, .who-card.is-touched{transform:translateY(-6px); border-color:var(--bronze); box-shadow:0 20px 38px rgba(26,33,41,0.13);}
.who-card:hover .who-media img, .who-card.is-touched .who-media img{transform:scale(1.07);}
.who-card:hover .who-icon, .who-card.is-touched .who-icon{transform:scale(1.1); color:var(--bronze-dark);}
.who-card:hover .who-body, .who-card.is-touched .who-body{border-top-color:var(--bronze);}
.who-card:hover h3, .who-card.is-touched h3{color:var(--bronze-dark);}

/* client logo wall */
.client-logo-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:44px;}
.logo-card{
  flex:0 0 calc((100% - 6 * 16px) / 7); aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:10px;
  background:var(--white); border:1.5px solid var(--line); border-radius:8px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.logo-card img{width:100%; height:100%; object-fit:contain; transition:transform .3s ease;}
.logo-card:hover, .logo-card.is-touched{transform:translateY(-5px); border-color:var(--bronze); box-shadow:0 14px 28px rgba(26,33,41,0.12);}
.logo-card:hover img, .logo-card.is-touched img{transform:scale(1.05);}

/* =================================
   CONTACT PAGE
================================= */
.contact{padding:96px 0; background:var(--paper);}
.contact.white-bg{background:var(--white);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:7px; color:var(--ink);}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-s);
  font-family:'Work Sans',sans-serif; font-size:0.95rem; background:var(--white); color:var(--ink);
  transition:border-color .25s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--slate); box-shadow:0 0 0 3px rgba(51,73,90,0.18);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-info{display:flex; flex-direction:column; gap:26px;}
.info-block{display:flex; gap:16px; align-items:flex-start;}
.info-block .icon{width:38px; height:38px; border-radius:50%; background:var(--white); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--slate);}
.info-block strong{display:block; font-size:0.95rem; margin-bottom:3px;}
.info-block span{font-size:0.9rem; color:var(--ink-soft);}
.info-block span a{color:var(--slate); font-weight:600; transition:color .2s ease;}
.info-block span a[href^="mailto:"], .footer-contact a[href^="mailto:"]{overflow-wrap:anywhere;}
.info-block span a:hover{color:var(--bronze-dark); text-decoration:underline;}
.info-block span .map-link{display:inline-block; margin-top:8px; font-size:0.88rem;}
.map-frame{margin-top:30px; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--paper-2);}
.map-frame iframe{display:block; width:100%; height:100%; border:0;}
.success-msg{display:none; background:#EAF3EC; border:1px solid #BFDCC6; color:#2C5E39; padding:14px 16px; border-radius:var(--radius-s); font-size:0.9rem; margin-bottom:18px;}
.success-msg.show{display:block;}

.about-director-image img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* =================================
   GET A QUOTE MODAL
================================= */
.quote-modal-overlay{position:fixed; inset:0; background:rgba(20,26,32,0.62); z-index:500; display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .3s ease;}
.quote-modal-overlay.open{display:flex; opacity:1;}
.quote-modal{background:var(--white); border-radius:var(--radius-m); max-width:440px; width:100%; padding:38px 34px; position:relative; transform:translateY(18px) scale(0.97); transition:transform .3s ease; box-shadow:0 30px 70px rgba(0,0,0,0.28);}
.quote-modal-overlay.open .quote-modal{transform:translateY(0) scale(1);}
.quote-modal .modal-close{position:absolute; top:14px; right:14px; background:none; border:none; font-size:1.7rem; cursor:pointer; color:var(--ink-soft); line-height:1; padding:6px;}
.quote-modal .eyebrow-tag{margin-bottom:10px;}
.quote-modal h3{font-size:1.4rem; margin-bottom:8px;}
.quote-modal p.modal-sub{margin-bottom:24px; font-size:0.92rem;}
@media (max-width:480px){ .quote-modal{padding:30px 22px;} }

/* =================================
   FOOTER
================================= */
footer{background:var(--ink); color:rgba(255,255,255,0.7); padding:64px 0 40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.footer-logo{display:inline-flex; background:var(--white); padding:8px 12px; border-radius:var(--radius-m); margin-bottom:16px; line-height:0;}
.footer-logo img{height:72px; width:auto;}
footer p{color:rgba(255,255,255,0.55); font-size:0.9rem; max-width:34ch;}
footer .footer-title{font-family:'Work Sans',sans-serif; color:var(--white); font-size:0.85rem; letter-spacing:0.04em; margin-bottom:18px; font-weight:600;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.footer-contact address{font-style:normal; font-size:0.9rem; line-height:1.65; color:rgba(255,255,255,0.65);}
.footer-contact li{font-size:0.9rem; color:rgba(255,255,255,0.65); line-height:1.6;}
footer ul a{font-size:0.9rem; color:rgba(255,255,255,0.65); transition:color .2s ease;}
footer ul a:hover{color:var(--white);}
.footer-bottom{padding-right:76px; border-top:1px solid rgba(255,255,255,0.12); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:rgba(255,255,255,0.45);}

/* =================================
   MOBILE BOTTOM NAVIGATION
================================= */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:250;
  background:var(--white); border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(26,33,41,0.06);
  display:none; align-items:stretch; justify-content:space-between;
  padding-bottom:var(--safe-b);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:10px 4px 8px; font-size:0.66rem; font-weight:600; color:var(--ink-soft);
  min-height:56px;
}
.bottom-nav a svg{width:20px; height:20px;}
/* START: Mobile bottom-nav active state */
.bottom-nav a.active{color:var(--bronze-dark); font-weight:700;}
/* END: Mobile bottom-nav active state */

body.has-bottom-nav{padding-bottom:calc(66px + var(--safe-b));}

/* =================================
   RESPONSIVE STYLES
================================= */
/* Tablet and below: 2-column card grids */
@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .app-grid{grid-template-columns:repeat(2,1fr);}
  .process-track{grid-template-columns:repeat(3,1fr); row-gap:36px;}
  .process-track::before{display:none;}
  .masonry{columns:3;}
  .about-grid, .why-grid, .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .stat-strip div:nth-child(3){border-left:none;}
  .client-types{grid-template-columns:1fr 1fr;}
  .logo-card{flex-basis:calc((100% - 3 * 16px) / 4);}
  .site-logo img{height:60px;}
  header.shrink .site-logo img{height:48px;}
  nav.desktop-nav{gap:18px;}
  .vm-section{padding:80px 0;}
}
/* Mobile layout: hide desktop nav, show hamburger menu and bottom navigation bar */
@media (max-width:860px){
  nav.desktop-nav{display:none;}
  .header-actions .btn-primary{display:none;}
  .hamburger{display:flex;}
  .masonry{columns:2;}
  .bottom-nav{display:flex;}
  body.has-bottom-nav{display:block;}
}
@media (max-width:640px){
  .container{padding:0 20px;}
  .about, .vm-section, .products, .features, .why, .benefits, .applications, .process, .gallery, .contact, .cta-section, .faq-section{padding-top:64px; padding-bottom:64px;}
  .product-grid{grid-template-columns:1fr 1fr; --pg-gap:16px;}
  .product-card{--pad:14px;}
  .product-card h3{font-size:0.98rem;}
  .feature-grid{grid-template-columns:1fr;}
  .benefit-grid{grid-template-columns:1fr 1fr;}
  .app-grid{grid-template-columns:1fr;}
  .process-track{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .bottom-nav{display:flex;}
  body.has-bottom-nav{display:block;}
  .about-list{grid-template-columns:1fr;}
  .why-item{gap:14px;}
  .section-head{margin-bottom:36px;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  .client-types{grid-template-columns:1fr;}
  .client-logo-grid{gap:12px;}
  .logo-card{flex-basis:calc((100% - 12px) / 2);}
  .site-logo img{height:52px;}
  header.shrink .site-logo img{height:44px;}
  .nav-wrap{padding-left:20px; padding-right:20px;}
  .vm-grid{grid-template-columns:1fr;}
  .vm-card{padding:34px 26px;}
  .floating-actions .fab{width:50px; height:50px;}
  .floating-actions{gap:10px;}
  .footer-bottom{padding-right:0;}
}
/* Very small phones: single-column card grids */
@media (max-width:380px){
  .product-grid{grid-template-columns:1fr;}
  .benefit-grid{grid-template-columns:1fr;}
}
/* Small phones: single-column gallery */
@media (max-width:480px){
  .masonry{columns:1;}
}
/* Desktop: the bottom navigation bar is never shown */
@media (min-width:861px){
  .bottom-nav{display:none !important;}
  body.has-bottom-nav{padding-bottom:0;}
  body.has-bottom-nav .floating-actions{bottom:calc(20px + var(--safe-b));}
}

/* =================================
   ACCESSIBILITY HELPERS
================================= */
/* Skip link: hidden off-screen until it receives keyboard focus */
.skip-link{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--slate-dark); color:#fff; padding:10px 16px; border-radius:var(--radius-s);}
.skip-link:focus{left:12px; top:12px;}
/* Applied to <body> by main.js while the mobile menu or quote modal is open (replaces inline overflow style) */
body.no-scroll{overflow:hidden;}

/* =================================
   UTILITY CLASSES
   These replace the former inline style="" attributes. They use !important
   because an inline style always beat any normal class rule, so this keeps
   the rendering identical.
================================= */
/* Hidden form controls used by the Web3Forms bot check */
.hidden{display:none;}
/* Staggered reveal delay for the "who we work with" cards (read by .who-card.reveal.in) */
.delay-0{--d:0ms !important;}
.delay-110{--d:110ms !important;}
.delay-220{--d:220ms !important;}
.delay-330{--d:330ms !important;}
/* Section headings that override the default .section-head h2 sizing */
.title-sm{font-size:1.6rem !important;}
.title-md{font-size:1.7rem !important;}
.title-xl{font-size:clamp(1.8rem,3.4vw,2.6rem) !important; margin-top:14px !important;}
.title-xl--tight{margin-bottom:8px !important;}
.title-contact{font-size:clamp(1.8rem,3.4vw,2.4rem) !important; margin-top:14px !important; margin-bottom:22px !important;}
/* Spacing helpers */
.mx-auto{margin-left:auto !important; margin-right:auto !important;}
.mt-26{margin-top:26px !important;}
.mt-64{margin-top:64px !important;}
.mt-72{margin-top:72px !important;}
.cta-center{text-align:center !important; margin-top:44px !important;}
/* Buttons: full-width in forms, compact WhatsApp button on the contact page */
.btn-block{width:100% !important;}
.btn-contact-wa{margin-top:6px !important; width:fit-content !important;}
/* Emphasised in-text link (FAQ answer) */
.link-strong{color:var(--slate) !important; font-weight:600 !important;}

/* =================================
   ERROR PAGES (403.html / 404.html)
================================= */
.error-section{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--paper); padding:150px 0 90px;}
.error-code{font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:clamp(5rem,16vw,9rem); line-height:1; color:var(--bronze); letter-spacing:-0.02em;}
.error-section h1{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:14px;}
.error-section p{margin:16px auto 0; max-width:52ch;}
.error-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}


/* =====================================================================
   RENI UPVC — ADDITIONS (logo wordmark + Products page sections)
   Everything below is new; nothing above was modified.
===================================================================== */

/* ---------- Brand logo: window-frame symbol + RENI / UPVC wordmark (header, footer, error pages) ---------- */
.visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.brand-mark{display:inline-flex; align-items:center; gap:12px; height:72px; line-height:1; white-space:nowrap; transition:height .3s ease;}
.brand-symbol{width:44px; height:44px; flex-shrink:0; transition:transform .35s ease;}
.brand-word{display:flex; flex-direction:column; justify-content:center; gap:5px;}
.brand-reni{font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.95rem; line-height:0.9; letter-spacing:0.09em; color:var(--slate-dark); margin-right:-0.09em;}
.brand-upvc{display:flex; align-items:center; gap:8px; font-family:'Work Sans', -apple-system, sans-serif; font-weight:600; font-size:0.72rem; line-height:1; letter-spacing:0.42em; color:var(--bronze-dark);}
.brand-upvc::after{content:""; flex:1; height:1.5px; background:var(--bronze); opacity:0.7;}
.site-logo:hover .brand-symbol{transform:scale(1.06);}
header.shrink .brand-mark{height:54px;}
header.shrink .brand-symbol{width:38px; height:38px;}
header.shrink .brand-reni{font-size:1.7rem;}
.footer-logo{display:inline-flex; background:none; padding:0; border-radius:0; margin-bottom:16px; line-height:0;}
.footer-logo .brand-mark{height:56px;}
.footer-logo .brand-reni{color:var(--white);}
.footer-logo .brand-upvc{color:#C99A6E;}
.footer-logo .brand-upvc::after{background:#C99A6E;}
@media (max-width:1024px){ .brand-mark{height:60px;} header.shrink .brand-mark{height:48px;} .brand-symbol{width:40px; height:40px;} header.shrink .brand-symbol{width:34px; height:34px;} .brand-reni{font-size:1.75rem;} header.shrink .brand-reni{font-size:1.55rem;} }
@media (max-width:640px){
  .brand-mark{height:52px; gap:10px;} header.shrink .brand-mark{height:44px;}
  .brand-symbol{width:36px; height:36px;} header.shrink .brand-symbol{width:32px; height:32px;}
  .brand-reni{font-size:1.55rem;} header.shrink .brand-reni{font-size:1.4rem;}
  .brand-upvc{font-size:0.66rem; letter-spacing:0.36em; gap:6px;}
  .footer-logo .brand-mark{height:50px;}
}
@media (max-width:360px){ .brand-symbol{width:32px; height:32px;} .brand-reni{font-size:1.4rem;} .brand-upvc{font-size:0.6rem; letter-spacing:0.3em;} }

/* ---------- Products page: Windows / Doors explorer ---------- */
.pv-explorer{padding:96px 0; background:var(--paper);}
.pv-switch{display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:620px; margin:0 auto 44px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:6px; position:relative;}
.pv-tab{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 12px; min-height:64px; background:transparent; border:none; border-radius:var(--radius-s); cursor:pointer; color:var(--ink-soft); font-family:'Work Sans',sans-serif; transition:background .35s ease, color .35s ease, box-shadow .35s ease; touch-action:manipulation;}
.pv-tab-title{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.3rem; letter-spacing:0.01em;}
.pv-tab-sub{font-size:0.78rem; line-height:1.3; text-align:center;}
.pv-tab:hover{color:var(--ink); background:var(--paper);}
.pv-tab.is-active{background:var(--slate); color:var(--white); box-shadow:0 10px 22px rgba(34,50,63,0.22);}
.pv-tab.is-active .pv-tab-sub{color:rgba(255,255,255,0.78);}
.pv-tab:focus-visible{outline:2px solid var(--bronze); outline-offset:2px;}
.pv-panel{animation:pvPanelIn .45s ease both;}
.pv-panel[hidden]{display:none;}
@keyframes pvPanelIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

.pv-lead{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; margin-bottom:72px;}
.pv-lead-media{border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/3; background:var(--paper-2);}
.pv-lead-media img{width:100%; height:100%; object-fit:cover;}
.pv-lead-copy h3{font-size:clamp(1.6rem,2.8vw,2.2rem);}
.pv-lead-copy p{margin-top:14px;}
.pv-chips{list-style:none; padding:0; margin:22px 0 28px; display:flex; flex-wrap:wrap; gap:8px;}
.pv-chips li{font-size:0.84rem; font-weight:600; color:var(--slate); background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 14px;}

.pv-block{margin-top:64px;}
.pv-block-head{margin-bottom:28px; max-width:640px;}
.pv-block-head h3{font-size:clamp(1.4rem,2.4vw,1.85rem);}
.pv-block-head p{margin-top:8px; font-size:0.95rem;}

/* type cards: grid cards, image zoom + lift */
.pv-type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.pv-type-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.pv-type-thumb{aspect-ratio:4/3; overflow:hidden; background:var(--paper-2);}
.pv-type-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.pv-type-body{padding:18px 18px 22px; border-top:3px solid transparent; transition:border-color .35s ease;}
.pv-type-body h4{font-family:'Fraunces',Georgia,serif; font-size:1.08rem; font-weight:600; margin-bottom:8px; transition:color .3s ease;}
.pv-type-body p{font-size:0.88rem;}
.pv-type-card:hover, .pv-type-card:focus-within, .pv-type-card.is-touched{transform:translateY(-6px); box-shadow:0 20px 38px rgba(26,33,41,0.13); border-color:var(--bronze);}
.pv-type-card:hover .pv-type-thumb img, .pv-type-card.is-touched .pv-type-thumb img{transform:scale(1.07);}
.pv-type-card:hover .pv-type-body, .pv-type-card.is-touched .pv-type-body{border-top-color:var(--bronze);}
.pv-type-card:hover h4, .pv-type-card.is-touched h4{color:var(--bronze-dark);}

/* benefits: windows = icon tiles on white, doors = same data on slate (small visual difference) */
.pv-ben-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pv-ben{display:flex; flex-direction:column; gap:12px; padding:24px 20px; background:var(--white); transition:background .3s ease;}
.pv-ben-ic{width:40px; height:40px; color:var(--slate); transition:transform .3s ease, color .3s ease;}
.pv-ben-ic .icon{width:100%; height:100%;}
.pv-ben h4{font-family:'Work Sans',sans-serif; font-size:0.98rem; font-weight:600;}
.pv-ben p{font-size:0.84rem; margin-top:4px;}
.pv-ben:hover{background:var(--paper-2);}
.pv-ben:hover .pv-ben-ic{transform:translateY(-3px); color:var(--bronze-dark);}
.pv-ben-doors .pv-ben-grid{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.14);}
.pv-block-ben.pv-ben-doors{background:var(--slate); padding:44px 32px; border-radius:var(--radius-m);}
.pv-ben-doors .pv-block-head h3{color:var(--white);}
.pv-ben-doors .pv-block-head p{color:rgba(255,255,255,0.78);}
.pv-ben-doors .pv-ben{background:var(--slate);}
.pv-ben-doors .pv-ben h4{color:var(--white);}
.pv-ben-doors .pv-ben p{color:rgba(255,255,255,0.72);}
.pv-ben-doors .pv-ben-ic{color:#D8C4A8;}
.pv-ben-doors .pv-ben:hover{background:var(--slate-dark);}
.pv-ben-doors .pv-ben:hover .pv-ben-ic{color:#fff;}

/* colour swatches: each shows a mini frame in the finish */
.pv-swatch-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px;}
.pv-swatch{width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 10px 12px; background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-m); cursor:pointer; font-family:'Work Sans',sans-serif; color:var(--ink); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; touch-action:manipulation;}
.pv-swatch:hover{transform:translateY(-4px); box-shadow:0 14px 26px rgba(26,33,41,0.12); border-color:var(--bronze);}
.pv-swatch.is-active{border-color:var(--slate); box-shadow:0 0 0 3px rgba(51,73,90,0.2);}
.pv-swatch-name{font-size:0.84rem; font-weight:600; text-align:center; line-height:1.3;}
.pv-frame{display:block; width:72px; height:72px; padding:9px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.12);}
.pv-frame-glass{display:block; width:100%; height:100%; background:linear-gradient(135deg,#DCEBF4 0%,#B8D3E3 55%,#E8F2F8 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.22); position:relative;}
.pv-frame-glass::after{content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; margin-left:-1.5px; background:inherit; filter:brightness(.7);}
.sw-white{background:#F7F7F5;} .sw-ivory{background:#EFE6CF;} .sw-lgrey{background:#B9BDC0;} .sw-grey{background:#4B5258;} .sw-black{background:#1B1C1E;}
.sw-oak{background:repeating-linear-gradient(100deg,#B98342 0 5px,#A9722F 5px 8px,#C48F4E 8px 14px);}
.sw-walnut{background:repeating-linear-gradient(100deg,#4A2F1D 0 5px,#3B2314 5px 8px,#563827 8px 14px);}
.sw-sand{background:#CDBFA6;} .sw-stone{background:#9C968B;}
.pv-swatch-status{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-top:20px; padding:14px 18px; background:var(--white); border-left:3px solid var(--bronze); border-radius:var(--radius-s); font-size:0.92rem;}
.pv-swatch-status strong{color:var(--ink); font-size:1rem;}

/* facts: numbered cards (content is a checklist, so numbering fits) */
.pv-facts{padding:96px 0;}
.pv-fact-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pv-fact{display:flex; gap:16px; align-items:flex-start; padding:26px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); position:relative; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.pv-fact::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--bronze); transform:scaleY(0); transform-origin:top; transition:transform .35s ease;}
.pv-fact-n{flex:0 0 38px; height:38px; border-radius:50%; background:var(--slate); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:1rem; transition:background .3s ease;}
.pv-fact h3{font-size:1.08rem; margin-bottom:8px;}
.pv-fact p{font-size:0.9rem;}
.pv-fact:hover, .pv-fact.is-touched{transform:translateY(-5px); box-shadow:0 18px 34px rgba(26,33,41,0.1); border-color:var(--bronze);}
.pv-fact:hover::before, .pv-fact.is-touched::before{transform:scaleY(1);}
.pv-fact:hover .pv-fact-n, .pv-fact.is-touched .pv-fact-n{background:var(--bronze);}

/* design options: image tiles + configurator */
.pv-designs{padding:96px 0; background:var(--paper);}
.pv-design-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pv-design{position:relative; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/3; background:var(--paper-2);}
.pv-design img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.pv-design-cap{position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px; background:linear-gradient(to top, rgba(20,26,32,0.86), rgba(20,26,32,0));}
.pv-design-cap h3{color:var(--white); font-size:1.2rem; transition:transform .35s ease;}
.pv-design-cap p{color:rgba(255,255,255,0.82); font-size:0.84rem; margin-top:2px; max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .35s ease;}
.pv-design:hover img{transform:scale(1.07) translateX(-6px);}
.pv-design:hover .pv-design-cap h3{transform:translateY(-3px);}
.pv-design:hover .pv-design-cap p{max-height:3em; opacity:1;}
.pv-cfg{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; margin-top:28px; align-items:start;}
.pv-cfg-groups{display:flex; flex-direction:column; gap:12px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px;}
.pv-cfg-group h3{font-family:'Work Sans',sans-serif; font-size:0.9rem; font-weight:600; margin-bottom:10px;}
.pv-opt-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.pv-opt{padding:9px 16px; min-height:40px; border:1.5px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); font-family:'Work Sans',sans-serif; font-size:0.86rem; font-weight:500; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; touch-action:manipulation;}
.pv-opt:hover{border-color:var(--bronze); transform:translateY(-2px);}
.pv-opt.is-active{background:var(--slate); color:var(--white); border-color:var(--slate);}
.pv-cfg-summary{background:var(--slate); color:var(--white); border-radius:var(--radius-m); padding:30px 28px; position:sticky; top:110px;}
.pv-cfg-summary h3{color:var(--white); font-size:1.3rem; margin-bottom:12px;}
.pv-cfg-summary p{color:rgba(255,255,255,0.86); margin-bottom:22px; font-size:0.95rem; line-height:1.75;}

/* ABS doors: split layout, intentionally no image (no ABS door photo exists in the project) */
.pv-abs{padding:96px 0;}
.pv-abs-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.pv-abs-intro h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:14px;}
.pv-abs-intro > p{margin-top:16px;}
.pv-abs-meta{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px 0;}
.pv-abs-meta h3{font-family:'Work Sans',sans-serif; font-size:0.95rem; font-weight:600; margin-bottom:6px;}
.pv-abs-meta p{font-size:0.88rem;}
.pv-abs-feats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line);}
.pv-abs-feats li{padding:20px 4px 20px 20px; border-bottom:1px solid var(--line); border-left:3px solid transparent; transition:border-color .3s ease, background .3s ease, padding-left .3s ease;}
.pv-abs-feats li:hover{border-left-color:var(--bronze); background:var(--paper); padding-left:26px;}
.pv-abs-feats h4{font-family:'Work Sans',sans-serif; font-size:1rem; font-weight:600; margin-bottom:4px;}
.pv-abs-feats p{font-size:0.9rem;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pv-type-grid{grid-template-columns:repeat(3,1fr);}
  .pv-ben-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1024px){
  .pv-explorer,.pv-facts,.pv-designs,.pv-abs{padding:80px 0;}
  .pv-lead,.pv-abs-grid{grid-template-columns:1fr; gap:32px;}
  .pv-type-grid{grid-template-columns:repeat(2,1fr);}
  .pv-fact-grid{grid-template-columns:repeat(2,1fr);}
  .pv-design-grid{grid-template-columns:repeat(2,1fr);}
  .pv-cfg{grid-template-columns:1fr;}
  .pv-cfg-summary{position:static;}
}
@media (max-width:640px){
  .pv-explorer,.pv-facts,.pv-designs,.pv-abs{padding:64px 0;}
  .pv-switch{margin-bottom:32px;}
  .pv-tab{padding:14px 6px;}
  .pv-tab-title{font-size:1.15rem;}
  .pv-tab-sub{font-size:0.72rem;}
  .pv-lead{margin-bottom:48px;}
  .pv-block{margin-top:48px;}
  .pv-type-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .pv-type-body{padding:14px 14px 18px;}
  .pv-type-body h4{font-size:0.98rem;}
  .pv-type-body p{font-size:0.82rem;}
  .pv-ben-grid{grid-template-columns:1fr 1fr;}
  .pv-ben{padding:20px 16px;}
  .pv-block-ben.pv-ben-doors{padding:30px 16px;}
  .pv-fact-grid,.pv-design-grid{grid-template-columns:1fr;}
  .pv-design-cap p{max-height:3em; opacity:1;}
  .pv-cfg-groups{padding:20px 16px;}
  .pv-abs-meta{grid-template-columns:1fr;}
  .pv-swatch-list{grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px;}
  .pv-frame{width:60px; height:60px; padding:8px;}
}
@media (max-width:400px){
  .pv-type-grid,.pv-ben-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .pv-panel{animation:none;}
  .pv-type-card,.pv-type-thumb img,.pv-swatch,.pv-opt,.pv-fact,.pv-design img,.pv-ben-ic{transition:none;}
  .pv-type-card:hover,.pv-fact:hover,.pv-swatch:hover,.pv-opt:hover,.pv-design:hover img,.pv-type-card:hover .pv-type-thumb img{transform:none;}
}

/* =====================================================================
   ABOUT PAGE — visual sections (scoped with .ab-* classes)
===================================================================== */
.ab-sec{padding:88px 0;}
.ab-sec.ab-alt{background:var(--paper);}
.ab-sec .section-head.center{max-width:680px; margin-bottom:48px;}
.ab-split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.ab-split-top{align-items:start;}
.ab-split-rev .ab-media{order:-1;}
.ab-copy h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin-top:14px;}
.ab-copy p{margin-top:16px; max-width:54ch;}
.ab-copy p strong{color:var(--ink);}
.ab-media{margin:0; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-2); position:relative; box-shadow:0 22px 44px rgba(26,33,41,0.12);}
.ab-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
.ab-media:hover img{transform:scale(1.045);}
.ab-media-wide{aspect-ratio:4/3;}
.ab-media-tall{aspect-ratio:4/5; max-height:600px; width:100%; max-width:480px; justify-self:center;}
.ab-split-rev .ab-media-tall{justify-self:start;}
.ab-media::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:64px; background:var(--bronze);}
.ab-chips{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
.ab-chips li{font-size:0.84rem; font-weight:600; color:var(--slate); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 15px;}

/* icon tile shared by cards */
.ab-icon{width:54px; height:54px; border-radius:50%; background:var(--paper); border:1px solid var(--line); color:var(--slate); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s ease, color .3s ease, transform .3s ease;}
.ab-icon svg{width:26px; height:26px;}
.ab-alt .ab-icon{background:var(--white);}

/* process steps */
.ab-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.ab-step{position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 24px 28px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; transition:opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.ab-step::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--bronze); transform:scaleX(0.18); transform-origin:left; transition:transform .45s ease;}
.ab-step-n{position:absolute; top:16px; right:20px; font-family:'Fraunces',Georgia,serif; font-size:2.2rem; font-weight:600; line-height:1; color:var(--line);}
.ab-step h3{font-size:1.15rem;}
.ab-step p{font-size:0.92rem;}

/* quality feature cards */
.ab-qgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.ab-qcard{display:flex; align-items:center; gap:14px; padding:18px 18px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); font-weight:600; color:var(--ink); font-size:0.98rem; transition:opacity .7s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.ab-qcard .ab-icon{width:46px; height:46px; background:var(--paper);}
.ab-qcard .ab-icon svg{width:22px; height:22px;}

/* why choose cards */
.ab-why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.ab-card{display:flex; flex-direction:column; gap:12px; padding:28px 26px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); transition:opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.ab-card h3{font-size:1.15rem;}
.ab-card p{font-size:0.93rem;}

/* shared hover lift */
.ab-card:hover, .ab-card.is-touched, .ab-step:hover, .ab-step.is-touched, .ab-qcard:hover, .ab-qcard.is-touched{transform:translateY(-6px); box-shadow:0 20px 38px rgba(26,33,41,0.12); border-color:var(--bronze);}
.ab-card:hover .ab-icon, .ab-card.is-touched .ab-icon, .ab-step:hover .ab-icon, .ab-step.is-touched .ab-icon, .ab-qcard:hover .ab-icon, .ab-qcard.is-touched .ab-icon{background:var(--slate); color:var(--white); transform:scale(1.06);}
.ab-step:hover::before, .ab-step.is-touched::before{transform:scaleX(1);}
.ab-card:hover h3, .ab-card.is-touched h3, .ab-step:hover h3, .ab-step.is-touched h3{color:var(--bronze-dark);}
.ab-card.reveal:not(.in), .ab-step.reveal:not(.in), .ab-qcard.reveal:not(.in){transform:translateY(22px);}

/* staggered entrance */
.ab-steps > :nth-child(2), .ab-why-grid > :nth-child(2), .ab-apps > :nth-child(2), .ab-qgrid > :nth-child(2){transition-delay:.08s;}
.ab-steps > :nth-child(3), .ab-why-grid > :nth-child(3), .ab-apps > :nth-child(3), .ab-qgrid > :nth-child(3){transition-delay:.16s;}
.ab-steps > :nth-child(4), .ab-apps > :nth-child(4), .ab-qgrid > :nth-child(4){transition-delay:.24s;}
.ab-steps > .in, .ab-why-grid > .in, .ab-apps > .in, .ab-qgrid > .in{transition-delay:0s;}

/* applications grid */
.ab-apps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.ab-app{position:relative; aspect-ratio:4/3; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-2);}
.ab-app img{width:100%; height:100%; object-fit:cover; transition:transform .7s ease;}
.ab-app:hover img{transform:scale(1.07);}
.ab-app-cap{position:absolute; left:0; right:0; bottom:0; padding:48px 20px 18px; color:var(--white); font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.15rem; background:linear-gradient(to top, rgba(20,26,32,0.86), rgba(20,26,32,0));}

/* customisation / installation checklists */
.ab-checks{list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px;}
.ab-checks-1{grid-template-columns:1fr;}
.ab-checks li{display:flex; align-items:flex-start; gap:10px; font-size:0.95rem; color:var(--ink);}
.ab-checks li svg{flex-shrink:0; margin-top:3px; color:var(--bronze-dark);}

/* commitment statement */
.ab-commit{background:var(--slate-dark); color:var(--white); padding:84px 0; text-align:center;}
.ab-commit .eyebrow-tag{color:#D8C4A8;}
.ab-commit .eyebrow-tag::before{background:#C99A6E;}
.ab-commit-inner{max-width:860px;}
.ab-statement{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.2; color:var(--white); margin:20px auto 0;}
.ab-commit-text{color:rgba(255,255,255,0.78); margin:22px auto 0; max-width:60ch; font-size:1.02rem;}

/* about responsive */
@media (max-width:1100px){
  .ab-steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1024px){
  .ab-sec{padding:72px 0;}
  .ab-split{grid-template-columns:1fr; gap:36px;}
  .ab-split-rev .ab-media{order:0;}
  .ab-media-tall{aspect-ratio:4/3; max-width:none; max-height:none; justify-self:stretch;}
  .ab-why-grid{grid-template-columns:repeat(2,1fr);}
  .ab-apps{grid-template-columns:repeat(2,1fr);}
  .ab-copy p{max-width:none;}
}
@media (max-width:640px){
  .ab-sec{padding:56px 0;}
  .ab-sec .section-head.center{margin-bottom:34px;}
  .ab-split{gap:28px;}
  .ab-steps, .ab-why-grid, .ab-apps{gap:14px;}
  .ab-steps{grid-template-columns:1fr;}
  .ab-why-grid{grid-template-columns:1fr;}
  .ab-step, .ab-card{padding:24px 20px;}
  .ab-qgrid{grid-template-columns:1fr; gap:12px;}
  .ab-apps{grid-template-columns:1fr 1fr;}
  .ab-app-cap{font-size:0.95rem; padding:36px 12px 12px;}
  .ab-checks{grid-template-columns:1fr;}
  .ab-commit{padding:60px 0;}
}
@media (max-width:360px){
  .ab-apps{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .ab-media img, .ab-app img, .ab-card, .ab-step, .ab-qcard, .ab-icon{transition:none;}
  .ab-card:hover, .ab-step:hover, .ab-qcard:hover, .ab-media:hover img, .ab-app:hover img{transform:none;}
}


/* about — leadership profile integrated with Who We Are */
.ab-profile-photo{justify-self:center; width:100%; max-width:360px; margin:0; text-align:center;}
.ab-profile-image{width:100%; aspect-ratio:4/5; overflow:hidden; background:transparent;}
.ab-profile-image img{display:block; width:100%; height:100%; object-fit:contain; object-position:center center; background:transparent;}
.ab-profile-info{padding-top:18px;}
.ab-profile-info .eyebrow-tag{margin-bottom:8px;}
.ab-profile-info h3{font-size:1.8rem;}
.ab-profile-info p{margin-top:6px; font-size:0.84rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--bronze-dark);}

/* =====================================================================
   RENI UPVC — LOGO IMAGE (header + footer + error pages)
   The supplied logo artwork now replaces the former CSS wordmark.
   Header sizes come from the existing .site-logo img rules above
   (72px / 54px shrunk, 60/48 tablet, 52/44 mobile); no effects applied.
===================================================================== */
/* Header logo: keep proportions, never stretch or overlap the nav */
.site-logo img{display:block; width:auto; max-width:none; object-fit:contain;}
/* Footer logo: light plate so the dark lettering stays visible on the dark footer (artwork itself untouched) */
.footer-logo{display:inline-flex; align-items:center; background:var(--white); padding:8px 12px; border-radius:var(--radius-m); margin-bottom:16px; line-height:0;}
.footer-logo img{display:block; height:64px; width:auto; max-width:100%; object-fit:contain;}
@media (max-width:640px){
  .footer-logo img{height:56px;}
}