/* ============================================
   MAKSROOFS CONSTRUCTION - Main Stylesheet
   Industrial / Construction Design System
   ============================================ */

@font-face{font-family:'Rockness';src:url('../fonts/rockness/Rockness.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

img{image-orientation:from-image}

/* --- Intro Animation Overlay --- */
.intro-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;z-index:99999;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .8s cubic-bezier(.65,0,.35,1);will-change:transform}
.intro-overlay--done{transform:translateY(-100%)}
.intro-overlay__inner{width:75vw}
@media(min-width:768px){.intro-overlay__inner{width:25vw}}
.intro-overlay__inner svg{width:100%;height:auto;display:block}

/* Animation states */
.intro-overlay .roof{opacity:0}
.intro-overlay .sq{opacity:0;transform-box:fill-box;transform-origin:center}
.intro-overlay .letter{fill-opacity:0;stroke-width:0.8;stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:0}
.intro-overlay .letter[fill="#383D8C"]{stroke:#383D8C}
.intro-overlay .letter[fill="#232322"]{stroke:#232322}
.intro-overlay .btm-text path,.intro-overlay .btm-text polygon,.intro-overlay .btm-text rect{opacity:0;transform-box:fill-box;transform-origin:center bottom}

/* Playing animations */
.intro-overlay .playing .roof-blue{animation:introWipeRight .9s cubic-bezier(.22,.9,.36,1) 0s forwards}
.intro-overlay .playing .roof-dark{animation:introWipeRight .9s cubic-bezier(.22,.9,.36,1) .25s forwards}
.intro-overlay .playing .sq{animation:introFadeScale .35s ease-out forwards}
.intro-overlay .playing .sq1{animation-delay:1s}.intro-overlay .playing .sq2{animation-delay:1.05s}
.intro-overlay .playing .sq3{animation-delay:1.1s}.intro-overlay .playing .sq4{animation-delay:1.15s}
.intro-overlay .playing .sq5{animation-delay:1.2s}.intro-overlay .playing .sq6{animation-delay:1.25s}
.intro-overlay .playing .sq7{animation-delay:1.3s}.intro-overlay .playing .sq8{animation-delay:1.35s}
.intro-overlay .playing .sq9{animation-delay:1.12s}.intro-overlay .playing .sq10{animation-delay:1.17s}
.intro-overlay .playing .sq11{animation-delay:1.22s}.intro-overlay .playing .sq12{animation-delay:1.27s}
.intro-overlay .playing .letter{animation:introStrokeDraw .8s ease forwards var(--d,1.4s),introFillReveal .5s ease forwards var(--fd,2.2s)}
.intro-overlay .playing .lm{--d:1.4s;--fd:2.2s}.intro-overlay .playing .la{--d:1.5s;--fd:2.3s}
.intro-overlay .playing .lk{--d:1.6s;--fd:2.4s}.intro-overlay .playing .ls1{--d:1.7s;--fd:2.5s}
.intro-overlay .playing .lr{--d:1.8s;--fd:2.6s}.intro-overlay .playing .lo1{--d:1.9s;--fd:2.7s}
.intro-overlay .playing .lo2{--d:2s;--fd:2.8s}.intro-overlay .playing .lf{--d:2.1s;--fd:2.9s}
.intro-overlay .playing .ls2{--d:2.2s;--fd:3s}
.intro-overlay .playing .btm-text path,.intro-overlay .playing .btm-text polygon,.intro-overlay .playing .btm-text rect{animation:introFadeUp .4s ease-out forwards var(--bd,3s)}

@keyframes introWipeRight{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes introFadeScale{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes introStrokeDraw{0%{stroke-opacity:1;stroke-dashoffset:1;fill-opacity:0}100%{stroke-opacity:1;stroke-dashoffset:0;fill-opacity:0}}
@keyframes introFillReveal{0%{fill-opacity:0;stroke-opacity:1}100%{fill-opacity:1;stroke-opacity:0}}
@keyframes introFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.intro-overlay{display:none}}

/* --- CSS Variables --- */
:root {
    --blue: #1440A0;
    --blue-light: #2563EB;
    --blue-dark: #172554;
    --blue-tint: #DBEAFE;
    --black: #111111;
    --gray: #6B7B8D;
    --gray-100: #F0F2F5;
    --gray-200: #E2E5EA;
    --gray-300: #C5CAD3;
    --gray-500: #6B7B8D;
    --gray-700: #374151;
    --white: #FFFFFF;
    --gold: #CFD8DC;
    --red: #EF4444;
    --font-heading: 'Rajdhani', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.15);
    --transition: .3s ease;
    --header-h: 80px;
}

/* ============================================
   1. RESET & BASE
   ============================================ */
.skip-link{position:absolute;top:-100%;left:16px;z-index:100000;padding:12px 24px;background:var(--blue);color:var(--white);font-family:var(--font-heading);font-weight:600;font-size:.9rem;transition:top .2s ease}
.skip-link:focus{top:0;color:var(--white)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--black);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--blue-light)}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:1rem}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.15;color:var(--black);text-transform:uppercase;letter-spacing:.5px}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700}
h3{font-size:clamp(1.25rem,2.5vw,1.5rem);font-weight:600}
h4{font-size:1.125rem;font-weight:600}
h5{font-size:1rem;font-weight:600}
h6{font-size:.875rem;font-weight:600}
p{margin-bottom:1rem;color:var(--gray-700)}
p:last-child{margin-bottom:0}

/* ============================================
   2. UTILITY
   ============================================ */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.container--narrow{max-width:900px}
@media(min-width:768px){.container{padding:0 40px}}
@media(min-width:1200px){.container{padding:0 20px}}

.section{padding:60px 0}
@media(min-width:768px){.section{padding:80px 0}}
@media(min-width:1200px){.section{padding:100px 0}}
.section--dark{background:var(--blue-dark);color:var(--white)}
.section--dark h2,.section--dark h3,.section--dark h4,.section--dark p{color:var(--white)}
.section--dark .section-header__title{color:var(--white)}
.section--dark p{opacity:.85}
.section--light{background:var(--gray-100)}
.section--flush{padding:0}

.section-header{text-align:left;max-width:700px;margin:0 0 48px;position:relative}
@media(min-width:768px){.section-header{display:flex;align-items:center;gap:20px}}
.section-header--left{text-align:left;margin-left:0}
.section-header--light .section-header__tag{color:var(--blue-light);border-color:var(--blue-light)}
.section-header--light .section-header__title{color:var(--white)}
.section-header__tag{display:inline-block;font-family:var(--font-heading);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--blue);padding:0 0 0 16px;margin-bottom:14px;position:relative;border-left:3px solid var(--blue)}
@media(min-width:768px){.section-header__tag{writing-mode:vertical-lr;transform:rotate(180deg);border-left:none;border-right:2px solid var(--blue);padding:12px 14px 12px 0;margin-bottom:0;font-size:.875rem;letter-spacing:4px;flex-shrink:0;color:var(--gray-500)}}
.section--dark .section-header__tag{color:var(--blue-light);border-color:var(--blue-light)}
@media(min-width:768px){.section--dark .section-header__tag{color:rgba(255,255,255,.4)}}
.section-header__title{margin-bottom:0}
.section-header__desc{font-size:1.05rem;color:var(--gray-500);max-width:600px;margin:0}
.section-header--left .section-header__desc{margin:0}
.section-header__body{flex:1}
@media(min-width:768px){.section-header__title{text-align:left}.section-header__desc{text-align:left}}

.text-center{text-align:center}
.text-blue{color:var(--blue)}
.bg-blue-tint{background:var(--blue-tint)}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================
   3. BUTTONS
   ============================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;font-family:var(--font-heading);font-size:.9rem;font-weight:700;transition:all var(--transition);border:2px solid transparent;text-transform:uppercase;letter-spacing:1.5px;gap:8px;white-space:nowrap;position:relative;overflow:hidden;z-index:1;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));border-radius:0}
.btn span{display:inline-block;position:relative;z-index:2}
.btn svg{position:relative;z-index:2}

/* Sharp style - the default industrial look */
.btn--sharp{border-radius:0}
.btn--sharp::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:rgba(255,255,255,.15);transition:width .3s ease;z-index:0}
.btn--sharp:hover::before{width:100%}

.btn--primary{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn--primary::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--blue-light);transition:width .35s ease;z-index:0}
.btn--primary:hover::before{width:100%}
.btn--primary:hover{border-color:var(--blue-light);color:var(--white)}

.btn--white{background:var(--white);color:var(--blue-dark);border-color:var(--white)}
.btn--white::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--gray-100);transition:width .35s ease;z-index:0}
.btn--white:hover::before{width:100%}
.btn--white:hover{color:var(--blue-dark)}

.btn--outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn--outline::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--blue);transition:width .35s ease;z-index:0}
.btn--outline:hover::before{width:100%}
.btn--outline:hover{color:var(--white)}

.btn--outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn--outline-white::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--white);transition:width .35s ease;z-index:0}
.btn--outline-white:hover::before{width:100%}
.btn--outline-white:hover{color:var(--blue-dark);border-color:var(--white)}

.btn--lg{padding:16px 40px;font-size:.95rem}
.btn--sm{padding:10px 20px;font-size:.875rem}
.btn--full{width:100%}
.btn--block{width:100%}
.btn:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px}

/* ============================================
   4. TOP BAR
   ============================================ */
.top-bar{background:var(--blue-dark);color:rgba(255,255,255,.9);font-size:.8rem;padding:9px 0;display:none;font-family:var(--font-heading);letter-spacing:.5px;font-weight:500}
@media(min-width:768px){.top-bar{display:block}}
.top-bar__inner{display:flex;justify-content:space-between;align-items:center}
.top-bar__left{display:flex;align-items:center;gap:16px}
.top-bar__phone,.top-bar__hours{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.85)}
.top-bar__phone:hover{color:var(--white)}
.top-bar__phone svg,.top-bar__hours svg{opacity:.7}
.top-bar__divider{opacity:.3}
.top-bar__right{display:flex;align-items:center;height:100%}
.top-bar__socials{display:flex;align-items:center;gap:12px}
.top-bar__socials a{display:flex;align-items:center;color:rgba(255,255,255,.7);transition:color var(--transition)}
.top-bar__socials a:hover{color:var(--white)}

/* ============================================
   5. SITE HEADER
   ============================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:padding .3s ease,box-shadow .3s ease;padding:12px 0;background:transparent}
.site-header.site-header--scrolled,.site-header.header--solid{background:var(--white);box-shadow:var(--shadow-md);padding:4px 0}
@media(max-width:767px){.site-header.site-header--scrolled,.site-header.header--solid{padding:10px 0}}
@media(min-width:768px){.site-header.site-header--scrolled{top:0}}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header__logo{display:flex;align-items:center;flex-shrink:0}
.site-header__logo img{height:52px;width:auto;transition:all var(--transition)}
@media(max-width:767px){.site-header__logo img{width:92px;height:auto}}
.logo-light{display:block}
.logo-dark{display:none}
.site-header.site-header--scrolled .site-header__logo img,.site-header.header--solid .site-header__logo img{height:44px}
.site-header.site-header--scrolled .logo-light,.site-header.header--solid .logo-light{display:none}
.site-header.site-header--scrolled .logo-dark,.site-header.header--solid .logo-dark{display:block}
body.menu-open .site-header,
body.menu-open .site-header.site-header--scrolled,
body.menu-open .site-header.header--solid{background:transparent !important;box-shadow:none !important}
body.menu-open .site-header .logo-light,
body.menu-open .site-header.site-header--scrolled .logo-light,
body.menu-open .site-header.header--solid .logo-light{display:block !important}
body.menu-open .site-header .logo-dark,
body.menu-open .site-header.site-header--scrolled .logo-dark,
body.menu-open .site-header.header--solid .logo-dark{display:none !important}
body.menu-open .site-header .mobile-toggle__label,
body.menu-open .site-header.site-header--scrolled .mobile-toggle__label{color:var(--white) !important}
body.menu-open .site-header .mobile-toggle__line,
body.menu-open .site-header.site-header--scrolled .mobile-toggle__line{background:var(--white) !important}
body.menu-open .site-header .header-phone{color:var(--white) !important}
body.menu-open .site-header__inner{align-items:center}
body.menu-open .mobile-toggle{transform:translateY(-5px);transition:transform .3s ease}
body.menu-open .site-header.site-header--scrolled .site-header__logo img,
body.menu-open .site-header.header--solid .site-header__logo img{height:52px}
@media(max-width:767px){body.menu-open .site-header .site-header__logo img{width:92px;height:auto}}

/* Navigation */
.site-header__nav{display:none}
@media(min-width:992px){.site-header__nav{display:block}}
.nav-menu{display:flex;gap:4px}
.nav-menu>li{position:relative}
.nav-menu>li>a{font-family:var(--font-heading);font-size:15px;font-weight:600;color:var(--white);padding:10px 16px;display:flex;align-items:center;gap:4px;transition:color var(--transition);text-transform:uppercase;letter-spacing:1px}
.site-header.site-header--scrolled .nav-menu>li>a,.site-header.header--solid .nav-menu>li>a{color:var(--black)}
.nav-menu>li>a:hover{color:#93C5FD}
.nav-menu>li.is-active>a{color:var(--white);position:relative}
.nav-menu>li.is-active>a::after{content:'';position:absolute;bottom:6px;left:16px;right:16px;height:2px;background:var(--blue-light)}
.site-header.site-header--scrolled .nav-menu>li>a:hover{color:#2563EB}
.site-header.site-header--scrolled .nav-menu>li.is-active>a{color:var(--blue)}
.site-header.site-header--scrolled .nav-menu>li.is-active>a::after{background:var(--blue)}
.dropdown-arrow{transition:transform .3s ease;opacity:.5}
.nav-menu>li:hover .dropdown-arrow{transform:rotate(180deg);opacity:1}
.nav-menu .submenu-toggle{display:none}

/* Dropdown */
.nav-menu .sub-menu{position:absolute;top:100%;left:0;background:var(--white);min-width:320px;padding:12px 0;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition);z-index:100;border-top:3px solid var(--blue)}
.nav-menu>li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li a{display:block;padding:10px 24px;font-size:1rem;color:var(--black);transition:all var(--transition);font-weight:500}
.sub-menu li a:hover{background:var(--blue-tint);color:var(--blue);padding-left:28px}

/* Mega dropdown for items with many children */
.nav-menu .sub-menu.mega-dropdown{min-width:500px;display:grid;grid-template-columns:1fr 1fr;padding:16px 0;left:50%;transform:translateX(-50%) translateY(10px)}
.nav-menu>li:hover>.sub-menu.mega-dropdown{transform:translateX(-50%) translateY(0)}
.mega-dropdown li a{padding:8px 20px;font-size:.9rem}
@media(max-width:991px){.nav-menu .sub-menu.mega-dropdown{grid-template-columns:1fr;min-width:260px}}

/* Header Actions */
.site-header__actions{display:flex;align-items:center;gap:12px;font-size:15px}
.site-header__actions .btn{font-size:15px}
.header-socials{display:none}
.header-phone{display:none;align-items:center;gap:6px;color:var(--white);padding:8px;transition:all var(--transition);font-family:var(--font-heading);font-size:15px;font-weight:600;letter-spacing:.5px}
@media(min-width:992px){.header-phone{display:flex}}
.header-phone__text{display:none}
@media(min-width:1100px){.header-phone__text{display:inline}}
.site-header.site-header--scrolled .header-phone,.site-header.header--solid .header-phone{color:var(--blue-dark)}
.site-header.header--solid .header-phone{color:var(--blue-dark)}
.header-phone:hover{color:var(--blue-light)}
.site-header__actions .btn{display:none}
@media(min-width:992px){.site-header__actions .btn{display:inline-flex}}

/* ============================================
   6. MOBILE TOGGLE
   ============================================ */
.mobile-toggle{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;min-width:52px;z-index:1001;border:none;background:none;cursor:pointer}
@media(min-width:992px){.mobile-toggle{display:none}}
.mobile-toggle__label{font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--white);transition:color .5s ease}
.mobile-toggle__line{width:100%;height:2px;background:var(--white);transform-origin:center;transition:transform .6s cubic-bezier(.23,1,.32,1) .15s,background .5s ease;min-width:32px}
.mobile-toggle__line:nth-child(2){gap:6px}
.site-header.site-header--scrolled .mobile-toggle__label,.site-header.header--solid .mobile-toggle__label{color:var(--black)}
.site-header.site-header--scrolled .mobile-toggle__line,.site-header.header--solid .mobile-toggle__line{background:var(--black)}
.mobile-toggle.is-active .mobile-toggle__label{opacity:0}
.mobile-toggle.is-active .mobile-toggle__line:nth-child(2){transform:translateY(3px) rotate(45deg)}
.mobile-toggle.is-active .mobile-toggle__line:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
.mobile-toggle.is-active .mobile-toggle__line{background:var(--white)}

/* ============================================
   7. MOBILE MENU
   ============================================ */
.mobile-menu{position:fixed;inset:0;background:var(--blue-dark);z-index:999;opacity:0;visibility:hidden;transition:all .5s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;transform:translateY(-100%)}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-menu__inner{display:flex;flex-direction:column;height:100%;padding:120px 32px 80px;overflow-y:auto;position:relative}
.mobile-menu__inner::after{content:'';position:fixed;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,var(--blue-dark) 0%,transparent 100%);pointer-events:none;z-index:2}
.mobile-menu__header{margin-bottom:32px}
.mobile-menu__header img{height:50px;width:auto;filter:brightness(0) invert(1)}
.mobile-nav-menu>li{border-bottom:1px dashed rgba(255,255,255,.1);position:relative}
.mobile-nav-menu>li>a{display:block;padding:18px 0;font-family:var(--font-heading);font-weight:600;color:var(--white);font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;padding-right:48px;transition:color .3s ease}
.mobile-nav-menu>li>a:hover{color:var(--blue-light)}
.mobile-nav-menu>li>a>.dropdown-arrow{display:none}
.submenu-toggle{position:absolute;right:0;top:0;width:48px;height:60px;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--white);cursor:pointer;transition:transform .3s ease;padding:0;-webkit-tap-highlight-color:transparent}
.is-expanded>.submenu-toggle{transform:rotate(180deg);top:auto;bottom:0}
.mobile-nav-menu .sub-menu{display:none;padding:4px 0 12px 20px;border-left:2px solid rgba(255,255,255,.1);margin-left:8px;transition:height .3s ease;overflow:hidden}
.mobile-nav-menu .sub-menu.is-open{display:block}
.mobile-nav-menu .sub-menu li a{padding:10px 0;font-size:17px;color:rgba(255,255,255,.45);text-transform:none;letter-spacing:0;transition:all .3s ease;display:block}
.mobile-nav-menu .sub-menu li a:hover{color:var(--white);padding-left:8px}
.mobile-menu__footer{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:24px}
.mobile-menu__footer .btn{border-color:rgba(255,255,255,.2);color:var(--white);font-size:18px}
.mobile-menu__footer .btn:hover{border-color:var(--white)}
.mobile-menu__footer .btn--primary{background:var(--white);color:var(--blue-dark);border-color:var(--white)}
.mobile-menu__footer .btn--primary:hover{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85)}

/* ============================================
   8. HERO - Split Layout with Inline Form
   ============================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:110px 0 80px}
.hero__bg{position:absolute;inset:0;z-index:0;background:#111}
.hero__bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__bg-video--mobile{display:none}
@media(max-width:767px){.hero__bg-video--desktop{display:none}.hero__bg-video--mobile{display:block}}
.hero__bg-image{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.65) 0%,rgba(23,37,84,.55) 100%);z-index:1}
@media(max-width:767px){.hero__overlay{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.55) 100%)}}

.hero__split{position:relative;z-index:3;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:992px){.hero__split{grid-template-columns:1.15fr .85fr;gap:60px}}

.hero__left{color:var(--white)}
.hero__title{color:var(--white);margin-bottom:20px;text-shadow:0 2px 20px rgba(0,0,0,.3);max-width:540px;font-size:clamp(2.6rem,10vw,3rem)}
.hero__subtitle{color:rgba(255,255,255,.85);font-size:clamp(1rem,2vw,1.15rem);margin-bottom:28px;max-width:480px;text-transform:none;letter-spacing:0}

/* Hero trust badges */
.hero__badges{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.hero__badge-item{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:50px;border:none;font-family:var(--font-heading);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.92)}
.hero__badge-item svg{color:var(--gold);flex-shrink:0}

/* Hero phone link */
.hero__phone-link{display:inline-flex;align-items:center;gap:10px;color:var(--white);font-family:var(--font-heading);font-size:1.15rem;font-weight:500;letter-spacing:.5px;transition:all var(--transition)}
.hero__phone-link:hover{color:#93C5FD}
.hero__phone-link svg{color:var(--gold)}

/* Hero industrial elements */
.hero__bracket{position:relative;margin-bottom:8px}
.hero__rule{width:80px;height:2px;background:rgba(255,255,255,.25);margin:16px 0 20px}
.hero__coords{display:none}
@media(min-width:992px){
    .hero__coords{display:block;position:absolute;bottom:40px;right:40px;z-index:3;font-family:var(--font-heading);font-size:1rem;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:3px;text-transform:uppercase}
}
@media(max-width:767px){
    .hero__bracket{padding:0;margin-bottom:0}
    .hero__bracket::before,.hero__bracket::after{display:none}
    .hero__rule{display:none}
}

/* Hero services link (desktop) */
.hero__services-link{display:inline-flex;align-items:center;gap:10px;color:var(--white);font-family:var(--font-heading);font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;text-decoration:none;transition:all .3s ease}
.hero__services-link svg{transition:transform .3s ease;color:var(--blue-light)}
.hero__services-link:hover svg{transform:translateX(6px)}
@media(max-width:767px){.hero__services-link{display:none}}

/* Hero accent word + quote link */
.hero__brush{display:inline-block}
.hero__accent{display:inline-block;font-family:'Rockness',sans-serif;font-style:normal;font-weight:400;text-transform:uppercase}
.hero__quote-link{display:none}
@media(max-width:767px){
    .hero__quote-link{display:inline-flex;align-items:center;gap:10px;color:var(--white);font-family:var(--font-heading);font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;text-decoration:none;transition:all .3s ease;margin-top:8px;align-self:flex-end;margin-right:20px}
    .hero__quote-link svg{transition:transform .3s ease;color:var(--blue-light)}
    .hero__quote-link:hover svg{transform:translateX(6px)}
}

/* Hero form card */
.hero__form-card{background:rgba(255,255,255,.18);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:32px 28px;box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.2);border-radius:0;position:relative;animation:formSlideUp .8s ease .2s both;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.hero__form-card::before{content:'';position:absolute;top:0;left:0;right:24px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.1))}
.hero__form-title{font-size:1.55rem;font-weight:800;color:var(--white);margin-bottom:4px;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.hero__form-subtitle{font-size:1rem;color:rgba(255,255,255,.75);text-align:center;margin-bottom:6px;text-transform:none;letter-spacing:0}
.hero__form-note{font-size:.95rem;color:rgba(255,255,255,.5);text-align:center;margin-bottom:18px}
@keyframes formSlideUp{from{transform:translateX(100vw)}to{transform:translateX(0)}}

/* Hero form fields */
.hero-form__field{margin-bottom:12px}
.hero-form__field input,.hero-form__field select,.hero-form__field textarea{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.2);font-size:1rem;transition:all var(--transition);background:rgba(255,255,255,.1);border-radius:2px;font-family:var(--font-body);color:var(--white)}
.hero-form__field input::placeholder,.hero-form__field select::placeholder,.hero-form__field textarea::placeholder{color:rgba(255,255,255,.45)}
.hero-form__field input:focus,.hero-form__field select:focus,.hero-form__field textarea:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.15);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.hero-form__field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer;color:var(--white)}
.hero-form__field select option{color:var(--black);background:var(--white)}
.hero-form__field textarea{resize:none;min-height:70px}
.hero-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero__form-card .btn--primary{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:var(--white);transition:all .3s ease}
.hero__form-card .btn--primary:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5);transform:scale(1.03)}

/* Mobile Form Section */
.mobile-form-section{display:none;background:linear-gradient(to top,#1a1a1a,#1440A0);padding:40px 0}
@media(max-width:767px){.mobile-form-section{display:block}}
.mobile-form-section__card{padding:32px 24px;background:var(--white);box-shadow:0 12px 40px rgba(0,0,0,.1)}
.mobile-form-section__title{font-size:1.4rem;font-weight:800;color:var(--blue-dark);margin-bottom:4px;text-align:center}
.mobile-form-section__subtitle{font-size:1rem;color:var(--gray-500);text-align:center;margin-bottom:20px}
.mobile-form-section .hero-form__field input,.mobile-form-section .hero-form__field select,.mobile-form-section .hero-form__field textarea{background:var(--gray-100);border:1px solid var(--gray-200);color:var(--black)}
.mobile-form-section .hero-form__field input::placeholder,.mobile-form-section .hero-form__field select::placeholder,.mobile-form-section .hero-form__field textarea::placeholder{color:var(--gray-500)}
.mobile-form-section .hero-form__field input:focus,.mobile-form-section .hero-form__field select:focus,.mobile-form-section .hero-form__field textarea:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(30,58,138,.08)}
.mobile-form-section .hero-form__field select{color:var(--black)}
.mobile-form-section .btn--primary{background:#1440A0;border-color:#1440A0;color:var(--white)}
.mobile-form-section .btn--primary:hover{background:var(--blue-light)}

/* Hero angle transition */
.hero__angle{position:absolute;bottom:0;left:0;right:0;z-index:2;line-height:0}
.hero__angle svg{display:block;width:100%;height:60px;pointer-events:none}

/* Trust bridge between hero & services */
.trust-bridge{background:#fff;padding:28px 0;position:relative;z-index:1;overflow:hidden}
.trust-bridge__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}
.trust-bridge__item{display:flex;align-items:center;gap:10px;padding:10px 20px;position:relative;opacity:0;transform:translateX(60px);transition:opacity .6s ease,transform .6s ease}
.trust-bridge__item.is-visible{opacity:1;transform:translateX(0)}
@media(min-width:768px){.trust-bridge__item{padding:10px 32px}}
.trust-bridge__item:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--gray-200)}
@media(max-width:767px){.trust-bridge__item:not(:last-child)::after{display:none}}
.trust-bridge__item svg{color:var(--blue);flex-shrink:0}
.trust-bridge__item span{font-family:var(--font-heading);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--gray-700)}
@media(min-width:768px){.trust-bridge__item span{font-size:.88rem;letter-spacing:1px}}

/* Section angle dividers */
.section-angle{line-height:0;overflow:hidden;margin-bottom:-1px}
.section-angle svg{display:block;width:100%;height:50px}
@media(min-width:768px){.section-angle svg{height:60px}}
.svg-mobile{display:block}
.svg-desktop{display:none}
@media(min-width:768px){.svg-mobile{display:none}.svg-desktop{display:block}}
.section--has-angle{position:relative;padding-top:100px;padding-bottom:100px}
@media(min-width:768px){.section--has-angle{padding-top:140px;padding-bottom:140px}}
.section-angle--top{position:absolute;top:0;left:0;right:0;z-index:1;line-height:0;background:transparent}

/* ============================================
   9. TRUST RIBBON
   ============================================ */
.trust-ribbon{display:none}
.trust-ribbon__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
@media(min-width:768px){.trust-ribbon__row{gap:0}}
.trust-ribbon__item{display:flex;align-items:center;gap:8px;padding:8px 16px;white-space:nowrap}
@media(min-width:768px){.trust-ribbon__item{padding:8px 24px}}
.trust-ribbon__icon{color:var(--blue);display:flex;align-items:center;flex-shrink:0}
.trust-ribbon__text{font-family:var(--font-heading);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--black)}
.trust-ribbon__divider{display:none;width:1px;height:24px;background:var(--gray-300)}
@media(min-width:768px){.trust-ribbon__divider{display:block}}

/* ============================================
   9b. SERVICES ICON GRID
   ============================================ */
.services-grid__cards{display:grid;grid-template-columns:1fr;gap:16px;background:transparent}
@media(min-width:576px){.services-grid__cards{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.services-grid__cards{grid-template-columns:repeat(3,1fr);gap:0}}
.services-grid__card:last-child:nth-child(3n+1){grid-column:2}
@media(max-width:991px) and (min-width:576px){.services-grid__card:last-child:nth-child(2n+1){grid-column:1/3;max-width:50%;justify-self:center}}
.services-grid__card{display:flex;flex-direction:column;align-items:flex-start;padding:36px 30px;background:var(--white);border:none;box-shadow:none;transition:all .4s ease;color:var(--black);text-decoration:none;position:relative;overflow:hidden}
.services-grid__card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.services-grid__card:hover::before{transform:scaleX(1)}
@media(min-width:992px){.services-grid__card{border-right:1px solid var(--gray-200) !important;border-bottom:1px solid var(--gray-200) !important}.services-grid__card:nth-child(3n){border-right:none !important}.services-grid__card:nth-last-child(-n+3){border-bottom:none !important}}
.services-grid__card:hover{background:var(--blue);color:var(--white)}
.services-grid__number{position:absolute;top:16px;right:20px;font-family:var(--font-heading);font-size:2.4rem;font-weight:800;color:var(--gray-200);line-height:1;transition:color .4s ease;letter-spacing:-1px}
.services-grid__card:hover .services-grid__number{color:rgba(255,255,255,.12)}
.services-grid__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:transparent;color:var(--blue);margin-bottom:20px;transition:all .4s ease;border:2px solid var(--gray-200)}
.services-grid__card:hover .services-grid__icon{background:rgba(255,255,255,.15);color:var(--white);border-color:rgba(255,255,255,.25)}
.services-grid__title{font-size:1.1rem;margin-bottom:8px;color:var(--black);transition:color .4s ease}
.services-grid__card:hover .services-grid__title{color:var(--white)}
.services-grid__desc{font-size:1rem;color:var(--gray-500);line-height:1.6;margin-bottom:16px;flex:1;text-transform:none;letter-spacing:0;transition:color .4s ease}
.services-grid__card:hover .services-grid__desc{color:rgba(255,255,255,.75)}
.services-grid__arrow{display:inline-flex;align-items:center;color:var(--blue);transition:all .4s ease}
.services-grid__card:hover .services-grid__arrow{color:var(--white);transform:translateX(4px)}
.services-grid__actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;justify-content:center}

/* ============================================
   10. HOW IT WORKS
   ============================================ */
/* How It Works - overlay + timeline */
.how-it-works__overlay{position:absolute;inset:0;background:rgba(26,26,46,.88);z-index:0}
.section-angle--bottom{position:absolute;bottom:0;left:0;right:0;z-index:1;line-height:0;background:transparent}
.how-it-works .container{position:relative;z-index:1}

/* Timeline - Mobile: vertical line left, Desktop: horizontal */
.how-it-works__timeline{position:relative;display:flex;flex-direction:column;gap:0;padding-left:56px}
.how-it-works__timeline::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.2)}
.how-it-works__step{position:relative;padding-bottom:44px}
.how-it-works__step:last-child{padding-bottom:0}
.how-it-works__node{position:absolute;left:-56px;top:0;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2;transition:all .4s ease}
.how-it-works__step:hover .how-it-works__node{background:var(--white);border-color:var(--white)}
.how-it-works__num{font-family:var(--font-heading);font-size:1rem;font-weight:800;color:var(--white);line-height:1;transition:color .4s ease}
.how-it-works__step:hover .how-it-works__num{color:var(--blue)}
.how-it-works__body{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:28px 24px;border:1px solid rgba(255,255,255,.1);position:relative;transition:all .4s ease}
.how-it-works__body::before{content:'';position:absolute;left:-8px;top:16px;width:16px;height:16px;background:rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);transform:rotate(45deg);transition:all .4s ease}
.how-it-works__step:hover .how-it-works__body{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.how-it-works__step:hover .how-it-works__body::before{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1)}
.how-it-works__step-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--white);margin-bottom:14px;border:2px solid rgba(255,255,255,.15);transition:all .4s ease}
.how-it-works__step:hover .how-it-works__step-icon{background:var(--white);color:var(--blue);border-color:var(--white)}
.how-it-works__step-title{font-size:1.1rem;margin-bottom:8px;color:var(--white)}
.how-it-works__step-desc{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;text-transform:none;letter-spacing:0}

/* Desktop: horizontal timeline */
@media(min-width:768px){
.how-it-works__timeline{flex-direction:row;padding-left:0;gap:32px;padding-top:72px}
.how-it-works__timeline::before{left:0;right:0;top:24px;bottom:auto;width:auto;height:2px}
.how-it-works__step{flex:1;padding-bottom:0}
.how-it-works__node{left:50%;top:-72px;transform:translateX(-50%)}
.how-it-works__body::before{display:none}
.how-it-works__body{text-align:center}
.how-it-works__body::after{content:'';position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:2px;height:20px;background:rgba(255,255,255,.2)}
.how-it-works__step-icon{margin-left:auto;margin-right:auto}
}

/* ============================================
   11. REVIEWS MARQUEE
   ============================================ */
/* Reviews Section */
.reviews__card{background:var(--white);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .4s ease;position:relative}
.reviews__card:hover{box-shadow:0 12px 32px rgba(30,58,138,.12);transform:translateY(-4px)}
.reviews__top{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 100%);padding:20px 28px;position:relative;overflow:hidden}
.reviews__top::before{content:'';position:absolute;top:-20px;right:-20px;width:60px;height:60px;border:2px solid rgba(255,255,255,.1);transform:rotate(45deg)}
.reviews__stars{display:flex;gap:3px}
.reviews__stars svg{fill:#fcd34d}
.reviews__google{flex-shrink:0}
.reviews__text{font-size:16px;color:var(--gray-700);line-height:1.8;flex:1;margin:0;padding:24px 28px 20px;text-transform:none;letter-spacing:0}
.reviews__footer{display:flex;align-items:center;gap:12px;padding:0 28px 24px;border-top:1px solid var(--gray-200);padding-top:16px;margin:0 28px;padding-left:0;padding-right:0}
.reviews__avatar{width:42px;height:42px;border-radius:0;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:1rem;flex-shrink:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));-webkit-clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.reviews__author{font-size:.875rem;font-weight:700;color:var(--black);font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}

/* Desktop: grid */
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:991px){.reviews__grid{grid-template-columns:repeat(2,1fr)}}

/* Mobile: slider */
.reviews__slider{display:none}
@media(max-width:767px){
    .reviews__grid{display:none}
    .reviews__slider{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:16px;padding-right:16px}
    .reviews__slider::-webkit-scrollbar{display:none}
    .reviews__track{display:flex;gap:16px;width:max-content;padding-right:16px}
    .reviews__track .reviews__card{flex-shrink:0;width:85vw;max-width:340px}
    .reviews__nav{display:flex;gap:12px;justify-content:center;margin-top:24px}
    .reviews__arrow{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:2px solid var(--gray-200);background:var(--white);color:var(--blue);cursor:pointer;transition:all .3s ease}
    .reviews__arrow:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
}

/* Reviews header layout */
.reviews__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.reviews__header .section-header{margin-bottom:0}
.reviews__header-right{display:flex;align-items:center;gap:12px}
.reviews__nav--header{display:none}
.reviews__add-btn{white-space:nowrap}
.reviews__actions--mobile{display:none}
@media(max-width:767px){
    .reviews__header{flex-wrap:nowrap}
    .reviews__header .section-header{flex:1;min-width:0}
    .reviews__header .section-header__title{font-size:clamp(1.2rem,5vw,1.75rem)}
    .reviews__add-btn{display:none}
    .reviews__nav--header{display:flex;gap:8px;flex-shrink:0}
    .reviews__actions--mobile{display:flex;justify-content:center;margin-top:24px}
}

/* Review Modal */
.review-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}
.review-modal.is-open{opacity:1;visibility:visible}
.review-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.review-modal__content{position:relative;background:var(--white);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;padding:40px 32px;z-index:1}
.review-modal__close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--gray-500);cursor:pointer;padding:4px;transition:color .3s ease}
.review-modal__close:hover{color:var(--black)}
.review-modal__title{font-size:1.5rem;margin-bottom:4px;color:var(--blue-dark)}
.review-modal__subtitle{font-size:.95rem;color:var(--gray-500);margin-bottom:24px}
.review-modal__field{margin-bottom:14px}
.review-modal__field input,.review-modal__field textarea{width:100%;padding:12px 14px;border:1px solid var(--gray-200);font-size:1rem;font-family:var(--font-body);border-radius:2px;transition:border-color .3s ease}
.review-modal__field input:focus,.review-modal__field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,64,160,.08)}
.review-modal__field textarea{resize:none}
.review-modal__rating{margin-bottom:18px}
.review-modal__rating label{display:block;font-family:var(--font-heading);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--gray-500);margin-bottom:8px}
.review-modal__stars{display:flex;gap:4px}
.review-star{transition:fill .2s ease}
.review-star.is-active{fill:#fcd34d}
.review-star:hover{fill:#fbbf24}
#review-form-message{margin-top:12px;font-size:.9rem;text-align:center}
#review-form-message.success{color:#16a34a}
#review-form-message.error{color:#dc2626}

/* ============================================
   11b. PROJECT MOSAIC
   ============================================ */
/* Project Showcase - horizontal scroll cards */
.project-showcase{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px;margin-right:calc(-50vw + 50%);padding-right:20px}
@media(max-width:767px){.project-showcase{margin-left:calc(-50vw + 50%);padding-left:16px}}
.project-showcase::-webkit-scrollbar{display:none}
.project-showcase__track{display:flex;gap:20px;width:max-content;padding-right:16px}
.project-showcase__card{flex-shrink:0;width:300px;background:var(--white);border:1px solid var(--gray-200);overflow:hidden;transition:all .4s ease;position:relative}
@media(min-width:768px){.project-showcase__card{width:340px}}
.project-showcase__card:hover{border-color:var(--blue);box-shadow:0 8px 30px rgba(30,58,138,.1);transform:translateY(-4px)}
.project-showcase__img{position:relative;overflow:hidden;aspect-ratio:4/3}
.project-showcase__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
.project-showcase__card:hover .project-showcase__img img{transform:scale(1.06)}
.project-showcase__num{position:absolute;top:16px;right:16px;font-family:var(--font-heading);font-size:1.6rem;font-weight:800;color:var(--white);opacity:.5;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.project-showcase__info{padding:20px 24px}
.project-showcase__title{font-size:1rem;margin-bottom:6px;color:var(--black)}
.project-showcase__loc{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--gray-500);margin:0}
.projects__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px}
.projects__header .section-header{margin-bottom:0}
.projects__nav-header{display:none;gap:8px}
@media(max-width:767px){.projects__nav-header{display:flex}}
.project-showcase__bottom{display:flex;align-items:center;justify-content:space-between;margin-top:32px;flex-wrap:wrap;gap:16px}
.project-showcase__nav{display:flex;gap:12px}
.project-showcase__nav--desktop{display:flex}
@media(max-width:767px){.project-showcase__nav--desktop{display:none}}
.project-showcase__arrow{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:2px solid var(--gray-200);background:var(--white);color:var(--blue);cursor:pointer;transition:all .3s ease}
.project-showcase__arrow:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}

/* ============================================
   12. AREAS CHIPS
   ============================================ */
.areas-chips__list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.areas-chips__chip{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--white);border:1px solid var(--gray-200);font-family:var(--font-heading);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-700);transition:all var(--transition);text-decoration:none;white-space:nowrap}
.areas-chips__chip svg{color:var(--blue);flex-shrink:0}
.areas-chips__chip:hover,a.areas-chips__chip:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}
.areas-chips__chip:hover svg,a.areas-chips__chip:hover svg{color:var(--white)}

/* ============================================
   12b. BOTTOM CTA
   ============================================ */
.bottom-cta{padding:80px 0;position:relative;background:linear-gradient(180deg,var(--blue-dark) 0%,var(--blue) 100%)}
.bottom-cta__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:992px){.bottom-cta__grid{grid-template-columns:1fr 1fr;gap:60px}}
.bottom-cta__content h2{color:var(--white);margin-bottom:16px}
.bottom-cta__content p{color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:28px;text-transform:none;letter-spacing:0;line-height:1.7}
.bottom-cta__actions{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:767px){.bottom-cta__actions{justify-content:center}}

/* Photo Banner */
.photo-banner{position:relative;padding:60px 0;background-size:cover;background-position:center;background-attachment:fixed}
.photo-banner__overlay{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.photo-banner__content{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}
.photo-banner__stat{text-align:center}
.photo-banner__num{display:block;font-family:var(--font-heading);font-size:2.5rem;font-weight:800;color:var(--white);line-height:1}
.photo-banner__label{display:block;font-family:var(--font-heading);font-size:.9rem;font-weight:500;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-top:8px}
@media(max-width:767px){.photo-banner__content{gap:32px}.photo-banner__num{font-size:2rem}}

/* Related Services Scroll */
.related-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px}
.related-header .section-header{margin-bottom:0}
.related-header__nav{display:flex;gap:8px}
.related-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 max(20px,calc((100vw - 1200px)/2))}
.related-scroll::-webkit-scrollbar{display:none}
.related-scroll__track{display:flex;gap:20px;width:max-content}
.related-scroll__card{flex-shrink:0;width:300px;background:var(--white);border:1px solid var(--gray-200);overflow:hidden;text-decoration:none;color:var(--black);transition:all .4s ease;display:flex;flex-direction:column}
@media(min-width:768px){.related-scroll__card{width:340px}}
.related-scroll__card:hover{border-color:var(--blue);box-shadow:0 8px 30px rgba(20,64,160,.1);transform:translateY(-4px)}
.related-scroll__img{aspect-ratio:16/10;overflow:hidden}
.related-scroll__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.related-scroll__card:hover .related-scroll__img img{transform:scale(1.06)}
.related-scroll__body{padding:20px 24px;flex:1;display:flex;flex-direction:column}
.related-scroll__title{font-size:1.1rem;margin-bottom:8px;color:var(--black)}
.related-scroll__desc{font-size:.9rem;color:var(--gray-500);line-height:1.6;flex:1;margin-bottom:12px}
.related-scroll__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-size:.85rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:1px;transition:gap .3s ease}
.related-scroll__card:hover .related-scroll__link{gap:10px}
.bottom-cta__form{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);padding:32px 28px}
.bottom-cta__form h3{color:var(--white);font-size:1.3rem;margin-bottom:20px;text-align:center}

/* Dark form fields for bottom CTA */
.bottom-cta__form .hero-form__field input,.bottom-cta__form .hero-form__field select,.bottom-cta__form .hero-form__field textarea{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--white);font-size:.9rem}
.bottom-cta__form .hero-form__field input::placeholder,.bottom-cta__form .hero-form__field textarea::placeholder{color:rgba(255,255,255,.4)}
.bottom-cta__form .hero-form__field input:focus,.bottom-cta__form .hero-form__field select:focus,.bottom-cta__form .hero-form__field textarea:focus{border-color:var(--blue-light);background:rgba(255,255,255,.12);box-shadow:none}
.bottom-cta__form .hero-form__field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.bottom-cta__form .hero-form__field select option{background:var(--blue-dark);color:var(--white)}

/* ============================================
   13. SERVICE PROCESS
   ============================================ */
.service-process__timeline{display:grid;grid-template-columns:1fr;gap:0;position:relative;max-width:700px;margin:0 auto}
@media(min-width:768px){.service-process__timeline{max-width:none;grid-template-columns:repeat(4,1fr);gap:24px}}
.service-process__step{display:flex;gap:20px;padding:28px 0;position:relative}
@media(min-width:768px){.service-process__step{flex-direction:column;text-align:center;padding:0}}
.service-process__step-marker{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.service-process__step-number{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;background:var(--blue);color:var(--white);font-family:var(--font-heading);font-weight:700;font-size:1.15rem;box-shadow:0 4px 16px rgba(30,58,138,.25)}
@media(min-width:768px){.service-process__step-number{width:60px;height:60px;min-width:60px;font-size:1.25rem;margin-bottom:20px}}
.service-process__step-line{display:none}
@media(max-width:767px){.service-process__step-line{display:block;width:2px;flex:1;background:linear-gradient(180deg,var(--blue),var(--blue-tint));margin-top:8px}}
@media(min-width:768px){.service-process__step:not(:last-child)::after{content:'';position:absolute;top:30px;left:calc(50% + 38px);right:calc(-50% + 38px);height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-tint));z-index:1}}
.service-process__step-content{flex:1;padding-bottom:8px}
@media(min-width:768px){.service-process__step-content{padding-bottom:0}}
.service-process__step-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--blue-tint);color:var(--blue);margin-bottom:12px}
@media(min-width:768px){.service-process__step-icon{margin:0 auto 12px}}
.service-process__step-title{font-size:1.05rem;margin-bottom:8px;color:var(--black)}
.service-process__step-desc{font-size:.88rem;color:var(--gray-500);line-height:1.6;text-transform:none;letter-spacing:0}

/* Process Cards (About page) */
.process-cards{position:relative}
.process-cards__line{display:none}
@media(min-width:768px){.process-cards__line{display:block;position:absolute;top:24px;left:calc(12.5% + 10px);right:calc(12.5% + 10px);height:2px;background:var(--blue-light);opacity:.4;z-index:1}}
.process-cards__grid{display:grid;grid-template-columns:1fr;gap:24px;position:relative;z-index:2}
@media(min-width:576px){.process-cards__grid{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.process-cards__grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.process-cards__item{text-align:center}
.process-cards__num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--blue-light);color:var(--white);font-family:var(--font-heading);font-size:1.1rem;font-weight:800;margin-bottom:16px;position:relative;z-index:2;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.process-cards__card{background:var(--white);padding:28px 20px;text-align:center;transition:all .4s ease}
.process-cards__card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.process-cards__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--blue);margin-bottom:12px}
.process-cards__title{font-size:1.1rem;margin-bottom:8px;color:var(--black) !important}
.process-cards__desc{font-size:.9rem;color:var(--gray-500) !important;line-height:1.6;text-transform:none;letter-spacing:0}

/* ============================================
   14. PAGE HERO (Inner Pages)
   ============================================ */
.page-hero{position:relative;padding:160px 0 80px;background:var(--blue-dark);background-size:cover;background-position:center;overflow:hidden}
.page-hero--short{padding:140px 0 60px}
.page-hero--tall{padding:180px 0 100px;min-height:50vh}
.page-hero__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.75) 0%,rgba(23,37,84,.65) 100%)}
.page-hero__content{position:relative;z-index:2}
.page-hero__content--left{text-align:left;max-width:700px}
.page-hero__bracket{position:relative;padding-left:24px;margin:20px 0 28px;border-left:3px solid var(--blue-light)}
.page-hero__title{color:var(--white);margin-bottom:12px;min-height:2.3em}
.page-hero__subtitle{color:rgba(255,255,255,.7);font-size:1.25rem;margin:0;text-transform:none;letter-spacing:.5px;font-family:var(--font-heading);opacity:0;animation:fadeInUp .8s ease 1s forwards}
@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.page-hero__stats{display:flex;gap:40px}
.page-hero__stat{display:flex;flex-direction:column}
.page-hero__stat-num{font-family:var(--font-heading);font-size:2.8rem;font-weight:800;color:var(--white);line-height:1}
.page-hero__stat-label{font-family:var(--font-heading);font-size:.85rem;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.page-hero__divider{position:absolute;bottom:-2px;left:0;right:0;z-index:3}
.page-hero__divider svg{display:block;width:100%;height:30px}
@media(min-width:768px){.page-hero__divider svg{height:60px}}

/* ============================================
   25. BREADCRUMBS
   ============================================ */
.breadcrumbs{font-size:max(.85rem,14px);margin-bottom:16px}
.breadcrumbs a{color:rgba(255,255,255,.6);transition:color var(--transition)}
.breadcrumbs a:hover{color:var(--white)}
.breadcrumbs__sep{color:rgba(255,255,255,.3);margin:0 8px}
.breadcrumbs__current{color:var(--blue-light)}
.breadcrumbs--light{font-size:.8rem;text-transform:uppercase;letter-spacing:2px;display:flex;flex-wrap:wrap;align-items:center}
.breadcrumbs--light a,.breadcrumbs--light span{white-space:nowrap}
.breadcrumbs--light a{color:rgba(255,255,255,.4)}
.breadcrumbs--light .breadcrumbs__current{color:rgba(255,255,255,.6)}

/* ============================================
   15. SERVICE PARENT GRID
   ============================================ */
.service-parent-intro__content{max-width:800px;margin:0 auto;text-align:center}
.service-parent-intro__text{font-size:1.05rem;color:var(--gray-700);line-height:1.8;margin-top:20px}
.service-parent-intro__text p{margin-bottom:16px}

.service-parent-grid__cards{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:576px){.service-parent-grid__cards{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.service-parent-grid__cards{grid-template-columns:repeat(3,1fr)}}
.service-parent-grid__card{background:var(--white);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all var(--transition);display:flex;flex-direction:column}
.service-parent-grid__card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--blue)}
.service-parent-grid__card-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)}
.service-parent-grid__card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-parent-grid__card:hover .service-parent-grid__card-image img{transform:scale(1.06)}
.service-parent-grid__card-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,var(--blue-tint),var(--gray-100));color:var(--blue)}
.service-parent-grid__card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.service-parent-grid__card-title{font-size:1.15rem;margin-bottom:10px}
.service-parent-grid__card-title a{color:var(--black);transition:color var(--transition)}
.service-parent-grid__card-title a:hover{color:var(--blue)}
.service-parent-grid__card-excerpt{font-size:.9rem;color:var(--gray-500);line-height:1.6;margin-bottom:20px;flex:1;text-transform:none;letter-spacing:0}
.service-parent-grid__card-body .btn{align-self:flex-start}

/* Service Cards (generic) */
.service-card{display:block;background:var(--white);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all var(--transition);color:var(--black)}
.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);color:var(--black)}
.service-card__image{aspect-ratio:16/10;overflow:hidden}
.service-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-card:hover .service-card__image img{transform:scale(1.06)}
.service-card__content{padding:24px}
.service-card__title{font-size:1.1rem;margin-bottom:8px}
.service-card__excerpt{font-size:.9rem;color:var(--gray-500);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-transform:none;letter-spacing:0}
.service-card__link{font-size:.85rem;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:6px;transition:gap var(--transition);text-transform:uppercase;letter-spacing:1px}
.service-card:hover .service-card__link{gap:10px}

/* ============================================
   16. SERVICE SINGLE
   ============================================ */
/* Intro */
.service-intro__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:768px){.service-intro__grid{grid-template-columns:1.2fr .8fr}}
.service-intro__content h2{font-size:1.6rem;margin-bottom:16px;color:var(--black)}
@media(min-width:768px){.service-intro__content h2{font-size:2rem}}
.service-intro__text{font-size:1rem;color:var(--gray-700);line-height:1.8;margin-bottom:24px;text-transform:none;letter-spacing:0}
.service-intro__text p{margin-bottom:12px}
.service-intro__image{position:relative;overflow:hidden}
.service-intro__image img{width:100%;display:block}
.service-intro__accent{position:absolute;bottom:-8px;right:-8px;width:60%;height:60%;border:3px solid var(--blue);z-index:-1}

/* Details */
.service-details__content{max-width:820px;margin:0 auto;font-size:1.05rem;line-height:1.8;color:var(--gray-700)}
.service-details__content h2,.service-details__content h3{color:var(--black);margin:28px 0 12px}
.service-details__content p{margin-bottom:16px}
.service-details__content ul,.service-details__content ol{margin:0 0 16px 24px;color:var(--gray-700)}
.service-details__content li{margin-bottom:8px}

/* Benefits */
.service-benefits__grid{display:grid;grid-template-columns:1fr;gap:20px;overflow:hidden;padding:0 8px}
@media(min-width:576px){.service-benefits__grid{grid-template-columns:1fr 1fr;padding:0}}
@media(min-width:992px){.service-benefits__grid{grid-template-columns:repeat(3,1fr);gap:24px}}
.service-benefits__card{background:transparent;transition:all .5s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;opacity:0;translate:120px 0;border:1px solid rgba(255,255,255,.15)}
.service-benefits__card.is-visible{opacity:1;translate:0 0}
.service-benefits__card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--blue-dark) 0%,var(--blue) 120%);opacity:0;transition:opacity .5s ease;z-index:0}
.service-benefits__card:hover::before{opacity:1}
.service-benefits__card:hover{border-color:rgba(37,99,235,.5);box-shadow:0 8px 36px rgba(30,58,138,.2);translate:0 -4px}
.service-benefits__card-inner{padding:32px 28px;position:relative;z-index:1}
.service-benefits__card-number{font-family:var(--font-heading);font-size:2.4rem;font-weight:800;color:rgba(255,255,255,.12);margin-bottom:10px;line-height:1;transition:color .5s ease}
.service-benefits__card:hover .service-benefits__card-number{color:rgba(255,255,255,.3)}
.service-benefits__card-title{font-size:1.1rem;margin-bottom:10px;color:rgba(255,255,255,.75);font-weight:700;transition:color .5s ease}
.service-benefits__card:hover .service-benefits__card-title{color:var(--white)}
.service-benefits__card-desc{font-size:.88rem;color:rgba(255,255,255,.4);line-height:1.7;margin:0;transition:color .5s ease;text-transform:none;letter-spacing:0}
.service-benefits__card:hover .service-benefits__card-desc{color:rgba(255,255,255,.8)}

/* Gallery */
.service-gallery__masonry{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.service-gallery__masonry{grid-template-columns:repeat(3,1fr);gap:16px}}
.service-gallery__item{overflow:hidden;aspect-ratio:4/3}
.service-gallery__link{display:block;width:100%;height:100%;position:relative}
.service-gallery__link img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-gallery__item:hover img{transform:scale(1.06)}
.service-gallery__overlay{position:absolute;inset:0;background:rgba(23,37,84,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition);color:var(--white)}
.service-gallery__item:hover .service-gallery__overlay{opacity:1}

/* ============================================
   16b. FAQ ACCORDION (Service + Contact)
   ============================================ */
.service-faq__accordion{max-width:800px;margin:0 auto}
.service-faq__item{border-bottom:1px solid var(--gray-200)}
.service-faq__item:first-child{border-top:1px solid var(--gray-200)}
.service-faq__question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 0;font-size:1.05rem;font-weight:600;color:var(--black);text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-heading);gap:16px;transition:color var(--transition);text-transform:none;letter-spacing:0}
.service-faq__question:hover{color:var(--blue)}
.service-faq__chevron{flex-shrink:0;transition:transform .3s ease;color:var(--gray-500)}
.service-faq__item--active .service-faq__chevron,.service-faq__question[aria-expanded="true"] .service-faq__chevron{transform:rotate(180deg);color:var(--blue)}
.service-faq__answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.service-faq__item--active .service-faq__answer,.service-faq__question[aria-expanded="true"]+.service-faq__answer{max-height:500px}
.service-faq__answer p{padding:0 0 20px;font-size:.95rem;color:var(--gray-700);line-height:1.7}

/* FAQ generic accordion */
.service-faq__accordion{max-width:800px}
.faq-item{border:1px solid var(--gray-200);margin-bottom:8px;background:var(--white);transition:all .3s ease}
.faq-item.is-open{border-color:var(--blue);box-shadow:0 4px 16px rgba(20,64,160,.06)}
.faq-item__question,.faq-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 24px;font-size:1.05rem;font-weight:600;color:var(--black);text-align:left;background:none;border:none;cursor:pointer;font-family:var(--font-heading);gap:16px;transition:color var(--transition);text-transform:none;letter-spacing:0}
.faq-item__question:hover,.faq-item__header:hover{color:var(--blue)}
.faq-item__icon,.faq-item__header svg{flex-shrink:0;transition:transform .3s ease;color:var(--gray-300)}
.faq-item.is-open .faq-item__icon,.faq-item.is-open .faq-item__header svg{transform:rotate(180deg);color:var(--blue)}
.faq-item__answer,.faq-item__body{height:0;overflow:hidden;transition:height .4s cubic-bezier(.25,.46,.45,.94)}
.faq-item__answer-inner,.faq-item__body p{padding:0 24px 20px;font-size:1rem;color:var(--gray-700);line-height:1.8}

.faq-accordion__item{border:1px solid var(--gray-200);margin-bottom:12px;overflow:hidden;background:var(--white)}
.faq-accordion__trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--black);text-align:left;gap:16px;transition:all var(--transition);text-transform:none;letter-spacing:0}
.faq-accordion__trigger:hover{color:var(--blue)}
.faq-accordion__trigger[aria-expanded="true"]{color:var(--blue);background:var(--blue-tint)}
.faq-accordion__icon{flex-shrink:0;transition:transform var(--transition)}
.faq-accordion__trigger[aria-expanded="true"] .faq-accordion__icon{transform:rotate(45deg)}
.faq-accordion__panel{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-accordion__content{padding:0 24px 20px;color:var(--gray-700);line-height:1.8}
.faq-accordion__content p{margin-bottom:12px}

/* Related Services */
.service-related__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:576px){.service-related__grid{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.service-related__grid{grid-template-columns:repeat(3,1fr)}}
.service-related__card{background:var(--white);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all var(--transition);display:flex;flex-direction:column}
.service-related__card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--blue)}
.service-related__card-image{aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)}
.service-related__card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-related__card:hover .service-related__card-image img{transform:scale(1.06)}
.service-related__card-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,var(--blue-tint),var(--gray-100));color:var(--blue)}
.service-related__card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.service-related__card-title{font-size:1.1rem;margin-bottom:10px}
.service-related__card-title a{color:var(--black);transition:color var(--transition)}
.service-related__card-title a:hover{color:var(--blue)}
.service-related__card-excerpt{font-size:.9rem;color:var(--gray-500);line-height:1.6;margin-bottom:20px;flex:1;text-transform:none;letter-spacing:0}

/* ============================================
   17. ABOUT PAGE
   ============================================ */
.about-story__grid,.about-team__grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:768px){.about-story__grid,.about-team__grid{grid-template-columns:1fr 1fr}}
.about-story__content h2,.about-team__content h2{margin-bottom:20px}
.about-story__image,.about-team__image{position:relative;overflow:hidden}
.about-story__image img,.about-team__image img{width:100%}
.about-story__accent{position:absolute;bottom:-20px;right:-20px;width:60%;height:60%;border:3px solid var(--blue);z-index:-1}

.about-values__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:576px){.about-values__grid{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.about-values__grid{grid-template-columns:repeat(4,1fr)}}
.about-values__card{text-align:center;padding:32px 24px;background:var(--white);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);border-top:3px solid var(--blue);transition:all var(--transition)}
.about-values__card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.about-values__icon{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--blue-tint);color:var(--blue);margin-bottom:16px}
.about-values__card h3{margin-bottom:8px}
.about-values__card p{font-size:1rem;color:var(--gray-500);text-transform:none;letter-spacing:0;line-height:1.6}
.about-story__content p,.about-team__content p{font-size:18px;line-height:1.8;color:var(--gray-700)}

.about-certs__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.about-certs__item{padding:20px 32px;background:var(--white);box-shadow:var(--shadow-sm);display:flex;align-items:center;border:1px solid var(--gray-200)}
.about-certs__item img{height:48px;width:auto}
.about-certs__badge{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--blue-dark);text-transform:uppercase;letter-spacing:1px}

/* ============================================
   18. CONTACT PAGE
   ============================================ */
.contact-page{position:relative}
.contact-main__grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:992px){.contact-main__grid{grid-template-columns:1.3fr .7fr}}
.contact-main__form h2{margin-bottom:8px}
.contact-main__form>p{color:var(--gray-500);margin-bottom:24px}
.contact-main__form .required{color:var(--red)}

/* ============================================
   26. CONTACT FORM
   ============================================ */
.contact-form__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:576px){.contact-form__grid{grid-template-columns:1fr 1fr}}
.contact-form__field--full{grid-column:1/-1}
.contact-form__row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media(min-width:576px){.contact-form__row{grid-template-columns:1fr 1fr}}
.contact-form__field{margin-bottom:16px}
.contact-form__field label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--black);text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-heading)}
.contact-form__field .required{color:var(--red)}
.contact-form__field input,.contact-form__field select,.contact-form__field textarea{width:100%;padding:14px 16px;border:2px solid var(--gray-200);font-size:.95rem;transition:border-color var(--transition),box-shadow var(--transition);background:var(--white);border-radius:2px}
.contact-form__field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7B8D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer;color:var(--black)}
.contact-form__field select:invalid,.contact-form__field select option[value=""]{color:var(--gray-500)}
.contact-form__field select option{color:var(--black);padding:8px}
.contact-form__field input:focus,.contact-form__field select:focus,.contact-form__field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,58,138,.1)}
.contact-form__field textarea{resize:none;min-height:100px}
.contact-form__note{font-size:.8rem;color:var(--gray-500);margin-top:12px;text-align:center}
.contact-form__submit{margin-top:28px;text-align:center}

/* Dark form variant */
.section--dark .contact-form__field label{display:block;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:6px}
.section--dark .contact-form__field .required{color:var(--gold)}
.section--dark .contact-form__field input,.section--dark .contact-form__field select,.section--dark .contact-form__field textarea{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--white);font-size:.95rem;transition:all var(--transition);border-radius:2px}
.section--dark .contact-form__field input::placeholder,.section--dark .contact-form__field textarea::placeholder{color:rgba(255,255,255,.4)}
.section--dark .contact-form__field input:focus,.section--dark .contact-form__field select:focus,.section--dark .contact-form__field textarea:focus{outline:none;border-color:var(--blue-light);background:rgba(255,255,255,.12)}
.section--dark .contact-form__field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.section--dark .contact-form__field select option{background:var(--blue-dark);color:var(--white)}

/* Contact info card */
.contact-info-card{background:var(--blue-dark);color:var(--white);padding:36px;position:sticky;top:120px}
.contact-info-card h3{color:var(--white);margin-bottom:8px;font-size:1.3rem}
.contact-info-card>p{color:rgba(255,255,255,.7);font-size:.9rem;margin-bottom:28px;text-transform:none;letter-spacing:0}
.contact-info-card__items{margin-bottom:28px}
.contact-info-card__item{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.contact-info-card__item:last-child{border-bottom:none}
.contact-info-card__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:rgba(37,99,235,.2);color:var(--blue-light)}
.contact-info-card__details{display:flex;flex-direction:column;gap:2px}
.contact-info-card__details strong{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.5)}
.contact-info-card__details a,.contact-info-card__details span{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.5}
.contact-info-card__details a:hover{color:var(--blue-light)}
.contact-info-card__note{font-size:.8rem;color:var(--blue-light);font-weight:600;margin-top:2px}
.contact-info-card__social{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);margin-bottom:20px}
.contact-info-card__social strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.5);margin-bottom:12px}
.contact-info-card__social-links{display:flex;gap:10px}
.contact-info-card__social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);transition:all var(--transition)}
.contact-info-card__social-links a:hover{background:var(--blue);color:var(--white)}
.contact-info-card__cta{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.contact-info-card__cta p{color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:12px;text-transform:none;letter-spacing:0}

/* Home contact grid */
.home-contact__grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:992px){.home-contact__grid{grid-template-columns:1.2fr .8fr}}
.home-contact__info-card{background:var(--blue-dark);color:var(--white);padding:36px;position:sticky;top:120px}
.home-contact__info-card h3{color:var(--white);margin-bottom:24px;font-size:1.3rem}
.home-contact__details{margin-bottom:24px}
.home-contact__details li{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.home-contact__details li:last-child{border-bottom:none}
.home-contact__details svg{flex-shrink:0;color:var(--blue-light);margin-top:2px}
.home-contact__details strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.5);margin-bottom:4px}
.home-contact__details a{color:var(--white)}
.home-contact__details a:hover{color:var(--blue-light)}
.home-contact__details span{color:rgba(255,255,255,.85);font-size:.9rem}
.home-contact__map{overflow:hidden;margin-top:8px}

/* Contact map */
.contact-map__embed{line-height:0}
.contact-map__embed iframe{width:100%;height:450px;border:none}
@media(max-width:767px){.contact-map__embed iframe{height:300px}}

/* Contact FAQ */
.contact-faq__list{max-width:800px;margin:0 auto}
.contact-faq__item{border:1px solid var(--gray-200);margin-bottom:12px;overflow:hidden;background:var(--white);transition:border-color var(--transition)}
.contact-faq__item.is-open{border-color:var(--blue)}
.contact-faq__question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 24px;font-family:var(--font-heading);font-size:1rem;font-weight:600;color:var(--black);text-align:left;gap:16px;transition:all var(--transition);background:none;border:none;cursor:pointer;text-transform:none;letter-spacing:0}
.contact-faq__question:hover{color:var(--blue)}
.contact-faq__item.is-open .contact-faq__question{color:var(--blue);background:var(--blue-tint)}
.contact-faq__chevron{flex-shrink:0;transition:transform var(--transition)}
.contact-faq__item.is-open .contact-faq__chevron{transform:rotate(180deg)}
.contact-faq__answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.contact-faq__item.is-open .contact-faq__answer{max-height:300px}
.contact-faq__answer p{padding:0 24px 20px;color:var(--gray-700);line-height:1.8}

/* ============================================
   19. OUR WORKS / PORTFOLIO
   ============================================ */
.projects__filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.projects__filter{padding:10px 24px;font-family:var(--font-heading);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--gray-500);border:2px solid var(--gray-200);transition:all var(--transition);background:var(--white)}
.projects__filter:hover,.projects__filter.is-active{background:var(--blue);color:var(--white);border-color:var(--blue)}
.projects__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.projects__grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:1200px){.projects__grid{grid-template-columns:repeat(4,1fr)}}
.projects__item{position:relative;overflow:hidden;aspect-ratio:4/3;cursor:pointer;transition:opacity .4s ease}
.projects__item.is-hidden{display:none}
.projects__item-image{position:absolute;inset:0}
.projects__item-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.projects__item:hover .projects__item-image img{transform:scale(1.08)}
.projects__item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,37,84,.9) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;opacity:0;transition:opacity var(--transition)}
.projects__item:hover .projects__item-overlay{opacity:1}
.projects__item-overlay h4{color:var(--white);font-size:1rem;margin-bottom:4px}
.projects__item-overlay p{color:rgba(255,255,255,.7);font-size:.8rem;display:flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0}

/* Flat Roof Types */
.flat-types{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:767px){.flat-types{grid-template-columns:1fr;gap:16px}}
.flat-types__card{overflow:hidden;background:var(--white);border:1px solid var(--gray-200);transition:all .4s ease;position:relative}
.flat-types__card:hover{border-color:var(--blue);box-shadow:0 12px 36px rgba(20,64,160,.12);transform:translateY(-6px)}
.flat-types__img{aspect-ratio:16/10;overflow:hidden;position:relative}
.flat-types__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.flat-types__card:hover .flat-types__img img{transform:scale(1.06)}
.flat-types__img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.4),transparent)}
.flat-types__body{padding:24px;position:relative}
.flat-types__num{position:absolute;top:-48px;right:16px;font-family:var(--font-heading);font-size:3rem;font-weight:800;color:var(--white);opacity:.6;line-height:1;z-index:1}
.flat-types__title{font-size:1.2rem;margin-bottom:8px;color:var(--blue);font-weight:700}
.flat-types__desc{font-size:.95rem;color:var(--gray-500);line-height:1.7;margin:0}

/* Contact Page Layout */
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:start}
@media(max-width:767px){.contact-layout{grid-template-columns:1fr;gap:32px}}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-info__item{display:flex;align-items:flex-start;gap:16px}
.contact-info__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--blue-tint);color:var(--blue);flex-shrink:0;border:2px solid var(--gray-200);transition:all .3s ease}
.contact-info__item:hover .contact-info__icon{background:var(--blue);color:var(--white);border-color:var(--blue)}
.contact-info__item strong{display:block;font-family:var(--font-heading);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--gray-500);margin-bottom:4px}
.contact-info__item a,.contact-info__item span{font-size:1.05rem;color:var(--black);text-decoration:none;transition:color .3s ease}
.contact-info__item a:hover{color:var(--blue)}
.contact-form-wrap{background:var(--gray-100);padding:32px;border:1px solid var(--gray-200)}
.contact-form-wrap .hero-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:575px){.contact-form-wrap .hero-form__row{grid-template-columns:1fr}}

/* Location Intro Layout */
.loc-intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:767px){.loc-intro-layout{grid-template-columns:1fr;gap:24px}}
.loc-intro-layout__text .section-header{margin-bottom:20px}
.loc-intro-layout__map{overflow:hidden;border:1px solid var(--gray-200)}
.loc-intro-layout__map iframe{display:block}

/* Location Intro Actions */
.loc-intro__actions{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:575px){.loc-intro__actions{flex-direction:column}.loc-intro__actions .btn{text-align:center}}

/* Location Form Override */
.loc-form .hero-form__field input,.loc-form .hero-form__field select,.loc-form .hero-form__field textarea{background:var(--gray-100);border:1px solid var(--gray-200);color:var(--black);font-size:1rem}
.loc-form .hero-form__field input::placeholder,.loc-form .hero-form__field textarea::placeholder{color:var(--gray-500)}
.loc-form .hero-form__field input:focus,.loc-form .hero-form__field select:focus,.loc-form .hero-form__field textarea:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(20,64,160,.08)}
.loc-form .hero-form__field select{color:var(--black)}
.loc-form .btn--primary{background:var(--blue);border-color:var(--blue);color:var(--white)}
.loc-form .btn--primary:hover{background:var(--blue-light)}

/* Location Services - Glass Cards */
.loc-services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:767px){.loc-services{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:480px){.loc-services{grid-template-columns:1fr}}
.loc-services__card{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);padding:28px 24px;text-align:center;transition:all .4s ease}
.loc-services__card:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);transform:translateY(-4px)}
.loc-services__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;color:var(--white);margin-bottom:16px;border:2px solid rgba(255,255,255,.15);border-radius:50%;transition:all .4s ease}
.loc-services__card:hover .loc-services__icon{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.loc-services__title{font-size:1.1rem;color:var(--white);margin-bottom:8px}
.loc-services__desc{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.6;margin:0}

/* Works Page Layout */
.works-layout{display:grid;grid-template-columns:220px 1fr;gap:40px}
@media(max-width:767px){.works-layout{grid-template-columns:1fr;gap:24px}}

.works-filters__title{font-family:var(--font-heading);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:var(--black);padding-bottom:12px;border-bottom:2px solid var(--gray-200)}
.works-filters__list{list-style:none;padding:0;margin:0}
.works-filters__btn{display:block;width:100%;text-align:left;padding:10px 0;font-family:var(--font-heading);font-size:1.05rem;font-weight:500;color:var(--gray-500);background:none;border:none;cursor:pointer;transition:all .3s ease;border-left:3px solid transparent;padding-left:12px}
.works-filters__btn:hover,.works-filters__btn.is-active{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.works-filters__btn--sub{font-size:1rem;padding-left:24px;color:var(--gray-500)}
.works-filters__btn--sub:hover,.works-filters__btn--sub.is-active{color:var(--blue)}
.works-filters__sub{list-style:none;padding:0;margin:0}
.works-filters__group{margin-bottom:4px}
@media(max-width:767px){
    .works-filters{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--gray-200);padding-bottom:16px}
    .works-filters__title{display:none}
    .works-filters__list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
    .works-filters__btn{width:auto;padding:10px 18px;border:1px solid var(--gray-200);border-left:none;font-size:1rem}
    .works-filters__btn.is-active{background:var(--blue);color:var(--white);border-color:var(--blue)}
    .works-filters__btn--sub{padding-left:16px}
    .works-filters__sub{display:flex;gap:6px}
    .works-filters__group{display:contents}
}

.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:991px){.works-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.works-grid{grid-template-columns:1fr}}
.works-grid__item{overflow:hidden;background:var(--white);border:1px solid var(--gray-200);transition:all .4s ease}
.works-grid__item:hover{border-color:var(--blue);box-shadow:0 8px 30px rgba(20,64,160,.1);transform:translateY(-4px)}
.works-grid__item.is-hidden{display:none}
.works-grid__img{aspect-ratio:4/3;overflow:hidden}
.works-grid__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.works-grid__item:hover .works-grid__img img{transform:scale(1.06)}
.works-grid__placeholder{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-300)}
.works-grid__info{padding:16px 20px}
.works-grid__title{font-size:1rem;margin-bottom:4px;color:var(--black)}
.works-grid__loc{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--gray-500);margin:0}

/* ============================================
   20. CTA SECTIONS
   ============================================ */
.cta-banner{position:relative;padding:80px 0;overflow:hidden}
.cta-banner__bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 100%)}
.cta-banner__overlay{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
/* Diagonal accent */
.cta-banner__bg::after{content:'';position:absolute;top:0;right:0;width:300px;height:100%;background:rgba(255,255,255,.03);clip-path:polygon(30% 0,100% 0,100% 100%,0% 100%);pointer-events:none}
.cta-banner__content{position:relative;z-index:1;text-align:center;max-width:700px;margin:0 auto}
.cta-banner__content h2{color:var(--white);margin-bottom:16px}
.cta-banner__content p{color:rgba(255,255,255,.8);font-size:1.1rem;margin-bottom:32px;text-transform:none;letter-spacing:0}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

.pre-footer-cta{background:var(--blue);padding:40px 0}
.pre-footer-cta__inner{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
@media(min-width:768px){.pre-footer-cta__inner{flex-direction:row;justify-content:space-between;text-align:left}}
.pre-footer-cta__content h3{color:var(--white);font-size:1.4rem;margin-bottom:4px}
.pre-footer-cta__content p{color:rgba(255,255,255,.8);margin:0;text-transform:none;letter-spacing:0}
.pre-footer-cta__actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:767px){.pre-footer-cta__actions{justify-content:center}}

/* ============================================
   21. FOOTER
   ============================================ */
.site-footer{background:var(--black)}
.site-footer__main{padding:60px 0 40px}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:576px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media(min-width:992px){.site-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.site-footer__col--info{padding-right:20px}
.site-footer__logo{display:inline-block;margin-bottom:16px}
.site-footer__logo img{height:40px;width:auto;filter:brightness(1.2)}
.site-footer__tagline{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:20px;line-height:1.7}
.certification-badge{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--blue-light);border:1px solid rgba(37,99,235,.3);padding:6px 14px;margin-bottom:16px}
.site-footer__socials{display:flex;gap:12px}
.site-footer__socials a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);transition:all var(--transition)}
.site-footer__socials a:hover{background:var(--blue);color:var(--white)}
.site-footer__heading{color:var(--white);font-size:1.15rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;position:relative;padding-bottom:12px;width:max-content}
.site-footer__heading::after{content:'';position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.6) 40%,transparent 40%,transparent 46%,rgba(255,255,255,.25) 46%,rgba(255,255,255,.25) 60%,transparent 60%,transparent 66%,rgba(255,255,255,.1) 66%,rgba(255,255,255,.1) 75%,transparent 75%);width:80%}
.site-footer__heading--areas{margin-top:24px}
.site-footer__links li{margin-bottom:10px}
.site-footer__links a{color:rgba(255,255,255,.6);font-size:.9rem;transition:all var(--transition)}
.site-footer__links a:hover{color:var(--white);padding-left:4px}
.site-footer__contact li{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;color:rgba(255,255,255,.6);font-size:.9rem}
.site-footer__contact svg{flex-shrink:0;color:var(--blue-light);margin-top:2px}
.site-footer__contact a{color:rgba(255,255,255,.6)}
.site-footer__contact a:hover{color:var(--white)}
.site-footer__areas{display:flex;flex-wrap:wrap;gap:8px}
.site-footer__areas li a{display:inline-block;padding:4px 12px;font-size:.8rem;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.1);transition:all var(--transition)}
.site-footer__areas li a:hover{border-color:var(--blue);color:var(--blue-light)}
.site-footer__bottom{background:rgba(0,0,0,.15);padding:16px 0}
.site-footer__bottom-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
@media(min-width:768px){.site-footer__bottom-inner{flex-direction:row;justify-content:space-between}}
.site-footer__copyright{color:rgba(255,255,255,.35);font-size:.85rem;margin:0}
.site-footer__credit{color:rgba(255,255,255,.55);transition:color var(--transition);font-weight:500}
.site-footer__credit:hover{color:var(--blue-light)}
.site-footer__legal{display:flex;gap:8px;align-items:center}
.site-footer__legal a{color:rgba(255,255,255,.5);font-size:.85rem;transition:color var(--transition);text-decoration:none}
.site-footer__legal a:hover{color:var(--white)}
.site-footer__legal span{color:rgba(255,255,255,.2);font-size:.7rem}
.site-footer__credit{color:rgba(255,255,255,.3);font-size:.8rem;text-decoration:none;transition:color var(--transition);font-family:var(--font-heading);letter-spacing:.5px}
.site-footer__credit:hover{color:rgba(255,255,255,.6)}
@media(max-width:767px){
.site-footer__links a,.site-footer__contact li,.site-footer__areas li a,.site-footer__tagline{font-size:18px !important}
.site-footer__copyright,.site-footer__legal a,.site-footer__credit{font-size:16px !important}
.bottom-cta__content p{font-size:18px !important}
.how-it-works__step-desc{font-size:16px !important}
.how-it-works__step-title{font-size:18px !important}
.reviews__card:hover,.services-grid__card:hover,.project-showcase__card:hover,.flat-types__card:hover,.related-scroll__card:hover,.works-grid__item:hover,.loc-services__card:hover{transform:none !important;box-shadow:none !important}
.services-grid__title,.flat-types__title,.loc-services__title,.project-showcase__title,.works-grid__title,.related-scroll__title,.reviews__author{font-size:20px !important}
.hero-form__field input,.hero-form__field select,.hero-form__field textarea{font-size:16px !important}
.hero-form__field input::placeholder,.hero-form__field select::placeholder,.hero-form__field textarea::placeholder{font-size:16px !important}
}

/* ============================================
   22. BACK TO TOP
   ============================================ */
.back-to-top{position:fixed;bottom:156px;right:51px;width:48px;height:48px;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--transition);z-index:900;border:none;cursor:pointer}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--blue-light);transform:translateY(-3px)}

/* ============================================
   23. FLOATING CALL
   ============================================ */
.floating-call{position:fixed;bottom:36px;right:20px;z-index:950;width:110px;height:110px;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.floating-call__icon{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 100%);color:var(--white);box-shadow:0 4px 20px rgba(30,58,138,.4);transition:all var(--transition)}
.floating-call:hover .floating-call__icon{transform:scale(1.1);box-shadow:0 6px 28px rgba(30,58,138,.5)}
.floating-call__ring-text{position:absolute;inset:0;width:110px;height:110px;animation:spinCallRing 10s linear infinite;pointer-events:none;z-index:3}
.floating-call__ring-text text{fill:var(--blue);font-size:10.3px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;font-family:var(--font-heading);transition:fill .3s ease;stroke:var(--white);stroke-width:.5px;paint-order:stroke fill}
.floating-call:hover .floating-call__ring-text text{fill:var(--blue-light)}
.floating-call--on-dark .floating-call__ring-text text{fill:var(--white);stroke:rgba(0,0,0,.15);stroke-width:.5px}
.floating-call--on-hero .floating-call__icon{background:rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,0,0,.15),inset 0 0 0 1px rgba(255,255,255,.25)}
.floating-call--on-hero:hover .floating-call__icon{background:rgba(255,255,255,.3);box-shadow:0 6px 28px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.35)}
.floating-call--on-hero .floating-call__ring-text text{fill:var(--white);stroke:none}
.floating-call--on-hero .floating-call__pulse{background:rgba(255,255,255,.3)}
@keyframes spinCallRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.floating-call__pulse{position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-30px;width:60px;height:60px;border-radius:50%;background:var(--blue);opacity:.3;animation:floatingPulse 2s ease-out infinite;z-index:1}
.floating-call__pulse--2{animation-delay:1s}
@keyframes floatingPulse{0%{transform:scale(1);opacity:.3}100%{transform:scale(2.2);opacity:0}}
.floating-call.is-hidden{opacity:0;visibility:hidden;transform:translateY(20px)}

/* ============================================
   24. LIGHTBOX
   ============================================ */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__inner{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox__image{max-width:100%;max-height:85vh;object-fit:contain;display:block}
.lightbox__overlay{position:absolute;inset:0;cursor:pointer}
.lightbox__close{position:fixed;top:20px;right:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);color:var(--white);border:none;cursor:pointer;transition:all var(--transition);z-index:10}
.lightbox__close:hover{background:rgba(255,255,255,.3)}
.lightbox__arrow,.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:var(--white);border:none;cursor:pointer;transition:all var(--transition);z-index:10}
.lightbox__arrow:hover,.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__arrow--prev,.lightbox__nav--prev{left:20px}
.lightbox__arrow--next,.lightbox__nav--next{right:20px}
.lightbox__counter{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.85rem;font-family:var(--font-heading);letter-spacing:1px;white-space:nowrap}

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar{padding:40px 0;background:var(--gray-100);position:relative;overflow:hidden}
.trust-bar__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center}
@media(min-width:768px){.trust-bar__grid{grid-template-columns:repeat(4,1fr)}}
.trust-bar__item{padding:20px}
.trust-bar__number{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);font-weight:800;display:flex;align-items:baseline;justify-content:center;gap:2px}
.trust-bar__number .counter,.trust-bar__number .trust-bar__suffix{display:inline-block;color:var(--blue)}
.trust-bar__label{font-size:.85rem;color:var(--gray-500);font-weight:500;margin-top:4px;text-transform:uppercase;letter-spacing:1px}

/* ============================================
   SERVICE AREAS
   ============================================ */
.service-areas__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:576px){.service-areas__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.service-areas__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.service-areas__grid{grid-template-columns:repeat(5,1fr)}}
.service-areas__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 20px;background:var(--white);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all var(--transition);color:var(--black);position:relative}
.service-areas__card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--blue);color:var(--black)}
.service-areas__card-icon{color:var(--blue);margin-bottom:12px}
.service-areas__card h3{font-size:1.05rem;margin-bottom:8px}
.service-areas__card p{font-size:.85rem;color:var(--gray-500);margin-bottom:12px;text-transform:none;letter-spacing:0}
.service-areas__card-arrow{color:var(--blue);transition:transform var(--transition)}
.service-areas__card:hover .service-areas__card-arrow{transform:translateX(4px)}

/* Areas page */
.areas-intro__content{max-width:800px;margin:0 auto;text-align:center}
.areas-intro__text{font-size:1.05rem;color:var(--gray-700);line-height:1.8;margin-top:20px}
.areas-intro__text p{margin-bottom:16px}
.areas-grid__cards{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.areas-grid__card{width:100%;transition:all var(--transition)}
@media(min-width:576px){.areas-grid__card{width:calc(50% - 12px)}}
@media(min-width:992px){.areas-grid__card{width:calc(33.333% - 16px)}}
@media(min-width:1200px){.areas-grid__card{width:calc(25% - 18px)}}
.areas-grid__card-inner{background:var(--white);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all var(--transition);height:100%;display:flex;flex-direction:column}
.areas-grid__card:hover .areas-grid__card-inner{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--blue)}
.areas-grid__card-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)}
.areas-grid__card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.areas-grid__card:hover .areas-grid__card-image img{transform:scale(1.06)}
.areas-grid__card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.areas-grid__card-title{font-size:1.1rem;margin-bottom:8px}
.areas-grid__card-title a{color:var(--black);transition:color var(--transition)}
.areas-grid__card-title a:hover{color:var(--blue)}
.areas-grid__card-desc{font-size:.88rem;color:var(--gray-500);line-height:1.6;flex:1;margin-bottom:16px;text-transform:none;letter-spacing:0}
.areas-grid__card-body .btn{align-self:flex-start}

/* ============================================
   LOCATION PAGES
   ============================================ */
.location-intro__content{max-width:800px;margin:0 auto;text-align:center}
.location-intro__content h2{margin-bottom:16px}
.location-intro__text{color:var(--gray-700);margin-bottom:32px;line-height:1.8}
.location-intro__text p{margin-bottom:16px}
.location-intro__read-more{display:none}
@media(max-width:767px){
    .location-intro__text.is-collapsed{max-height:11.4em;overflow:hidden;position:relative}
    .location-intro__text.is-collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3em;background:linear-gradient(transparent,#fff)}
    .location-intro__text.is-collapsed+.location-intro__read-more,.location-intro__read-more{display:inline-block;background:none;border:none;color:var(--blue);font-weight:600;font-size:.95rem;cursor:pointer;padding:0;margin-bottom:24px}
    .location-intro__text:not(.is-collapsed)+.location-intro__read-more{margin-top:-16px}
}
.location-intro__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

.location-services__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.location-services__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.location-services__grid{grid-template-columns:repeat(4,1fr)}}
.location-services__card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 20px;background:var(--white);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all var(--transition);color:var(--black);text-decoration:none}
.location-services__card:hover{box-shadow:var(--shadow-md);border-color:var(--blue);transform:translateY(-3px);color:var(--black)}
.location-services__icon{color:var(--blue);margin-bottom:14px}
.location-services__icon svg{width:36px;height:36px}
.location-services__card h3{font-size:.95rem;margin-bottom:8px;color:var(--black)}
.location-services__card p{font-size:.85rem;color:var(--gray-500);line-height:1.6;margin-bottom:12px;flex:1;text-transform:none;letter-spacing:0}
.location-services__link{font-size:.8rem;font-weight:600;color:var(--blue);margin-top:auto;transition:color var(--transition);text-transform:uppercase;letter-spacing:1px}
.location-services__card:hover .location-services__link{color:var(--blue-light)}

.location-why__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:992px){.location-why__grid{grid-template-columns:1.2fr .8fr}}
.location-why__content h2{margin-bottom:16px}
.location-why__content p{color:var(--gray-700);line-height:1.8;margin-bottom:24px}
.location-why__list{display:flex;flex-direction:column;gap:14px}
.location-why__list li{display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--black);font-weight:500}
.location-why__list li svg{flex-shrink:0;color:var(--blue)}
.location-why__stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.location-why__stat{text-align:center;padding:28px 16px;background:var(--blue-tint);border:1px solid rgba(30,58,138,.1)}
.location-why__stat-number{display:block;font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--blue);line-height:1.1;margin-bottom:6px}
.location-why__stat-label{font-size:.8rem;color:var(--gray-500);font-weight:500;text-transform:uppercase;letter-spacing:.03em}

.location-testimonials__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.location-testimonials__grid{grid-template-columns:repeat(3,1fr)}}
.location-testimonials__card{background:var(--white);padding:32px 28px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);border-top:3px solid var(--blue);display:flex;flex-direction:column;gap:16px}
.location-testimonials__card-top{display:flex;align-items:center;justify-content:space-between}
.location-testimonials__stars{display:flex;gap:2px}
.location-testimonials__stars svg{color:var(--gold)}
.location-testimonials__google-badge{display:flex;align-items:center;opacity:.7;transition:opacity var(--transition)}
.location-testimonials__google-badge:hover{opacity:1}
.location-testimonials__text{font-size:.95rem;color:var(--gray-700);line-height:1.7;font-style:italic;flex:1;margin:0;border:none;padding:0}
.location-testimonials__author{display:flex;flex-direction:column;gap:2px}
.location-testimonials__name{font-size:.85rem;font-weight:600;color:var(--black);font-style:normal}
.location-testimonials__location{font-size:.8rem;color:var(--gray-500)}

.location-map__embed{overflow:hidden;box-shadow:var(--shadow-md)}
.location-map__embed iframe{width:100%;height:450px;border:none;display:block}
@media(max-width:767px){.location-map__embed iframe{height:320px}}

.location-contact__form-wrapper{max-width:800px;margin:0 auto}

/* ============================================
   BEFORE & AFTER SLIDER
   ============================================ */
.before-after{background:var(--white)}
.ba-slider__wrapper{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;box-shadow:var(--shadow-xl);cursor:col-resize;-webkit-user-select:none;user-select:none}
.ba-slider__after,.ba-slider__before{position:absolute;inset:0}
.ba-slider__after img,.ba-slider__before img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-slider__before{clip-path:inset(0 50% 0 0)}
.ba-slider__label{position:absolute;top:20px;padding:8px 18px;font-family:var(--font-heading);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;pointer-events:none;z-index:3}
.ba-slider__label--before{left:16px;background:rgba(17,17,17,.75);color:var(--white);backdrop-filter:blur(4px)}
.ba-slider__label--after{right:16px;background:rgba(30,58,138,.85);color:var(--white);backdrop-filter:blur(4px)}
.ba-slider__handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:4px;display:flex;flex-direction:column;align-items:center;z-index:5;pointer-events:none}
.ba-slider__line{flex:1;width:3px;background:var(--white);box-shadow:0 0 6px rgba(0,0,0,.3)}
.ba-slider__knob{width:48px;height:48px;border-radius:50%;background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0;pointer-events:auto;transition:transform .2s ease}
.ba-slider__knob:hover{transform:scale(1.1)}
.ba-slider__knob svg{width:16px;height:16px}
@media(max-width:767px){.ba-slider__wrapper{aspect-ratio:4/3}.ba-slider__knob{width:40px;height:40px}.ba-slider__label{font-size:.65rem;padding:6px 12px;top:12px}}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-content{position:relative}
.legal-content h2{font-size:1.3rem;margin:48px 0 16px;color:var(--black);padding-left:20px;border-left:3px solid var(--blue);line-height:1.3}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{font-size:1.15rem;margin:24px 0 12px}
.legal-content p{margin-bottom:16px;line-height:1.85;font-size:1rem;color:var(--gray-700)}
.legal-content ul{margin:0 0 20px 0;padding-left:20px;list-style:none}
.legal-content ul li{margin-bottom:10px;color:var(--gray-700);line-height:1.7;font-size:1rem;padding-left:16px;position:relative}
.legal-content ul li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--blue);opacity:.5}
.legal-content a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-tint);transition:all .3s ease}
.legal-content a:hover{border-color:var(--blue);color:var(--blue-light)}
.legal-content__updated{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-size:.9rem;color:var(--gray-500);letter-spacing:.5px;margin-bottom:40px;padding-bottom:12px;border-bottom:2px solid var(--blue)}
.legal-content__updated::before{content:'';display:block;width:8px;height:8px;background:var(--blue);flex-shrink:0}

/* ============================================
   404 PAGE
   ============================================ */
.error-404__number{font-family:var(--font-heading);font-size:clamp(6rem,15vw,10rem);font-weight:900;color:var(--blue-tint);line-height:1}
.error-404 h2{margin-bottom:12px}
.error-404 p{color:var(--gray-500);margin-bottom:32px;text-transform:none;letter-spacing:0}
.error-404__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ============================================
   SECTION DIVIDER
   ============================================ */
.section-divider{position:absolute;bottom:-1px;left:0;right:0;pointer-events:none}
.section-divider svg{display:block;width:100%;height:40px}
@media(min-width:768px){.section-divider svg{height:80px}}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */
@media(max-width:991px){
    .hero{min-height:auto;padding:120px 0 80px}
    .hero__left{text-align:center}
    .hero__title{max-width:none;margin-left:auto;margin-right:auto}
    .hero__subtitle{max-width:none;margin-left:auto;margin-right:auto}
    .hero__badges{justify-content:center}
    .hero__phone-link{justify-content:center;font-size:1.25rem}
    .hero__form-card{max-width:480px;margin:0 auto}
    .page-hero{padding:120px 0 60px}
    .page-hero--tall{padding:140px 0 70px;min-height:auto}
    .page-hero__stats{gap:24px}
    .page-hero__stat-num{font-size:1.5rem}
    .page-hero__bracket{padding-left:16px}
}
@media(max-width:767px){
    .hero{padding:120px 0 60px;min-height:100vh;overflow:hidden}
    .hero__split{gap:0}
    .hero__bg-video--mobile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .hero__left{text-align:center;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;margin-bottom:50%}
    .hero__subtitle{display:none}
    .hero__form-card{display:none}
    .hero-form__row{grid-template-columns:1fr}
    .hero__angle svg{height:50px}
    .trust-bridge{padding:20px 0}
    .trust-bridge__row{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:0}
    .trust-bridge__item{padding:12px 16px;gap:8px;justify-content:flex-start;align-items:center;border-bottom:1px solid var(--gray-200);min-height:0;height:100%}
    .trust-bridge__item:nth-child(odd){border-right:1px solid var(--gray-200)}
    .trust-bridge__item:nth-last-child(-n+2){border-bottom:none}
    .section-header{margin-bottom:32px}
    .section-header__tag{margin-bottom:10px;font-size:14px;letter-spacing:2px}
    .section--has-angle{padding-top:70px;padding-bottom:70px}
    .section-angle svg{height:50px}
    .services-grid__cards{gap:12px;grid-template-columns:1fr !important}
    .services-grid__card:last-child:nth-child(3n+1){grid-column:auto}
    .services-grid__number{font-size:1.8rem;top:12px;right:14px}
    .services-grid__card{padding:24px 20px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid var(--gray-200)}
    .services-grid__actions{margin-top:28px;gap:12px}
    .services-grid__actions .btn{width:100%;text-align:center}
    .how-it-works__timeline{padding-left:48px}
    .how-it-works__node{left:-48px;width:40px;height:40px}
    .how-it-works__num{font-size:.875rem}
    .how-it-works__body{padding:22px 18px}
    .how-it-works__body::before{left:-7px;top:12px;width:14px;height:14px}
    .how-it-works__step-icon{width:40px;height:40px}
    .how-it-works__step{padding-bottom:32px}
    .reviews-marquee__nav{margin-top:24px;gap:10px}
    .reviews-marquee__arrow{width:42px;height:42px}
    .project-showcase__bottom{justify-content:center}
    .project-showcase__bottom .btn{text-align:center}
    .project-showcase__nav{justify-content:center}
    .project-showcase__arrow{width:42px;height:42px}
    .bottom-cta{padding:60px 0}
    .bottom-cta__content{text-align:center}
    .bottom-cta__content .btn{width:100%;max-width:300px}
    .floating-call{width:88px;height:88px;bottom:24px;right:16px}
    .floating-call__icon{width:50px;height:50px}
    .floating-call__icon svg{width:24px;height:24px}
    .floating-call__ring-text{width:88px;height:88px}
    .floating-call__ring-text text{font-size:9px;letter-spacing:2px}
    .floating-call__pulse{width:50px;height:50px;margin-top:-25px;margin-left:-25px}
    .back-to-top{bottom:120px;right:40px;width:40px;height:40px}
    .back-to-top svg{width:20px;height:20px}
    .about-story__accent{display:none}
    .service-intro__accent{display:none}
    .areas-chips__chip{padding:8px 14px}
}
@media(max-width:575px){
    .projects__grid{grid-template-columns:1fr}
    .hero__badge-item{font-size:.875rem;padding:5px 12px}
    .hero__form-card{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
    .section-header__tag{font-size:14px}
}
@media(max-width:393px){
    h1{font-size:1.6rem}
    .hero{padding:100px 0 50px}
    .hero__title{font-size:1.9rem}
    .hero__subtitle{font-size:.9rem;margin-bottom:20px}
    .btn--lg{padding:12px 24px;font-size:.875rem}
    .btn{padding:12px 24px;font-size:.875rem}
    .mobile-menu__inner{padding:96px 20px 20px}
    .mobile-nav-menu>li>a{padding:12px 0;font-size:1rem}
    .mobile-menu__footer{padding-top:16px;gap:8px}
    .floating-call{width:76px;height:76px;bottom:20px;right:12px}
    .floating-call__icon{width:44px;height:44px}
    .floating-call__ring-text{width:76px;height:76px}
    .floating-call__ring-text text{font-size:7.5px;letter-spacing:1.5px}
    .floating-call__pulse{width:44px;height:44px;margin-top:-22px;margin-left:-22px}
    .back-to-top{bottom:104px;right:30px;width:36px;height:36px}
}

/* ============================================
   EXPANDED RESET & BASE (readable format)
   ============================================ */

/* Selection styling */
::selection {
    background: var(--blue);
    color: var(--white);
}

::-moz-selection {
    background: var(--blue);
    color: var(--white);
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 3px solid var(--blue-light);
    outline-offset: 2px;
}

/* Smooth scrolling for anchor links */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   EXPANDED BUTTON STYLES
   ============================================ */

/* Button with icon right */
.btn--icon-right {
    flex-direction: row;
}

.btn--icon-right svg {
    transition: transform var(--transition);
}

.btn--icon-right:hover svg {
    transform: translateX(4px);
}

/* Button with icon left */
.btn--icon-left {
    flex-direction: row-reverse;
}

/* Button group */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-group--center {
    justify-content: center;
}

/* Secondary button */
.btn--secondary {
    background: var(--blue-dark);
    color: var(--white);
    border-color: var(--blue-dark);
}

.btn--secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--blue);
    transition: width .35s ease;
    z-index: 0;
}

.btn--secondary:hover::before {
    width: 100%;
}

.btn--secondary:hover {
    border-color: var(--blue);
    color: var(--white);
}

/* Dark variant - gold accent */
.btn--gold-accent {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
}

.btn--gold-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width .35s ease;
    z-index: 0;
}

.btn--gold-accent:hover::before {
    width: 100%;
}

.btn--gold-accent:hover {
    color: var(--black);
}

/* ============================================
   EXPANDED HEADER DETAIL STYLES
   ============================================ */

/* Header phone (visible on desktop) */
@media (min-width: 768px) {
    .header-phone {
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

/* Logo filter for dark backgrounds */
.logo-light {
    filter: brightness(0) invert(1);
}

.site-header.site-header--scrolled .logo-light,
.site-header.header--solid .logo-light {
    filter: none;
}
body.menu-open .site-header .logo-light,
body.menu-open .site-header.site-header--scrolled .logo-light,
body.menu-open .site-header.header--solid .logo-light {
    filter: brightness(0) invert(1) !important;
}

/* Nav menu current item indicator with blue bottom border */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-parent > a {
    color: var(--white);
    position: relative;
}

.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current-menu-parent > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--blue-light);
}

.site-header.site-header--scrolled .nav-menu > li.current-menu-item > a,
.site-header.site-header--scrolled .nav-menu > li.current-menu-parent > a {
    color: var(--blue);
}

.site-header.site-header--scrolled .nav-menu > li.current-menu-item > a::after,
.site-header.site-header--scrolled .nav-menu > li.current-menu-parent > a::after {
    background: var(--blue);
}

/* Dropdown submenu nested level 2 */
.sub-menu .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 0;
    border-top: 3px solid var(--blue-light);
}

/* ============================================
   EXPANDED MOBILE MENU DETAILS
   ============================================ */

/* Mobile menu contact info */
.mobile-menu__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--gray-200);
}

.mobile-menu__contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    font-weight: 500;
    font-size: .95rem;
}

.mobile-menu__contact a svg {
    color: var(--blue);
    flex-shrink: 0;
}

.mobile-menu__contact a:hover {
    color: var(--blue);
}

/* Mobile menu social links */
.mobile-menu__socials {
    display: flex;
    gap: 10px;
    padding-top: 16px;
}

.mobile-menu__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    color: var(--gray-500);
    transition: all var(--transition);
}

.mobile-menu__socials a:hover {
    background: var(--blue);
    color: var(--white);
}

/* ============================================
   EXPANDED HERO DETAIL STYLES
   ============================================ */

/* Hero with centered text (alternate layout) */
.hero--centered .hero__content {
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.hero--centered .hero__text {
    max-width: 800px;
}

.hero--centered .hero__badge::after {
    left: 50%;
    transform: translateX(-50%);
}

.hero--centered .hero__actions {
    justify-content: center;
}

/* Hero diagonal bottom divider - industrial angled cut */
.hero__divider--diagonal {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 4;
    height: 80px;
    background: var(--white);
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 768px) {
    .hero__divider--diagonal {
        height: 120px;
    }
}

/* Hero card hover states */
.hero__card:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .25);
}

/* Hero scroll indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--font-heading);
}

.hero__scroll-indicator::after {
    content: '';
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, .3);
    animation: scrollBounce 2s ease infinite;
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: .3;
    }
    50% {
        transform: translateY(10px);
        opacity: .8;
    }
}

/* ============================================
   EXPANDED TRUST BAR DETAILS
   ============================================ */

/* Counter animation setup */
.trust-bar__number .counter {
    font-variant-numeric: tabular-nums;
}

/* Trust bar with border separators */
.trust-bar__item {
    position: relative;
}

@media (min-width: 768px) {
    .trust-bar__item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: var(--gray-200);
    }
}

/* ============================================
   EXPANDED SERVICES OVERVIEW DETAILS
   ============================================ */

/* Service overview with background images per column */
.services-overview__column:nth-child(1) .services-overview__header {
    background: linear-gradient(135deg, rgba(43, 57, 144, .85), rgba(26, 36, 112, .9)),
                var(--gray-100) center/cover no-repeat;
}

.services-overview__column:nth-child(2) .services-overview__header {
    background: linear-gradient(135deg, rgba(26, 36, 112, .85), rgba(17, 17, 17, .9)),
                var(--gray-100) center/cover no-repeat;
}

/* Service overview counter animation */
.services-overview__list a {
    font-size: .95rem;
}

.services-overview__list li:nth-child(even) a {
    background: rgba(0, 0, 0, .01);
}

/* ============================================
   EXPANDED WHY CHOOSE US - LIGHT VARIANT
   ============================================ */

/* Light background variant */
.why-us--light .why-us__card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--blue);
}

.why-us--light .why-us__card:hover {
    box-shadow: var(--shadow-lg);
    background: var(--white);
}

.why-us--light .why-us__card::before {
    color: var(--blue-tint);
}

.why-us--light .why-us__card-icon {
    background: var(--blue-tint);
    color: var(--blue);
}

.why-us--light .why-us__card:hover .why-us__card-icon {
    background: var(--blue);
    color: var(--white);
}

.why-us--light .why-us__card-title {
    color: var(--black);
}

.why-us--light .why-us__card-desc {
    color: var(--gray-500);
}

/* ============================================
   EXPANDED TESTIMONIALS DETAIL STYLES
   ============================================ */

/* Testimonial navigation arrows */
.testimonials__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.testimonials__arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--gray-200);
    color: var(--black);
    cursor: pointer;
    transition: all var(--transition);
}

.testimonials__arrow:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.testimonials__arrow:disabled {
    opacity: .4;
    cursor: default;
}

.testimonials__arrow:disabled:hover {
    background: var(--white);
    border-color: var(--gray-200);
    color: var(--black);
}

/* Google review indicator */
.testimonials__card--google::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #4285F4;
}

/* Testimonial rating summary */
.testimonials__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--blue-tint);
    border-left: 4px solid var(--blue);
}

.testimonials__summary-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
}

.testimonials__summary-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.testimonials__summary-stars svg {
    color: var(--gold);
}

.testimonials__summary-text {
    font-size: .85rem;
    color: var(--gray-500);
}

/* ============================================
   EXPANDED SERVICE PROCESS DETAILS
   ============================================ */

/* Process step hover */
.service-process__step:hover .service-process__step-number {
    transform: scale(1.1);
    transition: transform var(--transition);
}

.service-process__step:hover .service-process__step-icon {
    background: var(--blue);
    color: var(--white);
    transition: all var(--transition);
}

/* Process legacy steps */
.process__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    position: relative;
}

@media (min-width: 768px) {
    .process__steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.process__step {
    text-align: center;
    position: relative;
}

.process__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.process__step h4 {
    margin-bottom: 8px;
}

.process__step p {
    font-size: .85rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
}

/* Connecting line between steps (desktop) */
@media (min-width: 768px) {
    .process__step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 28px;
        left: calc(50% + 36px);
        right: calc(-50% + 36px);
        height: 2px;
        background: var(--blue-tint);
    }
}

/* ============================================
   EXPANDED PAGE HERO WITH BREADCRUMBS
   ============================================ */

/* Page hero with background image */
.page-hero--has-image {
    background-size: cover;
    background-position: center;
}

.page-hero--has-image .page-hero__overlay {
    background: linear-gradient(
        135deg,
        rgba(26, 36, 112, .92) 0%,
        rgba(43, 57, 144, .85) 100%
    );
}

/* Page hero stats */
.page-hero__stats {
    display: flex;
    gap: 32px;
    margin-top: 24px;
}

.page-hero__stat {
    display: flex;
    flex-direction: column;
}

.page-hero__stat-number {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
}

.page-hero__stat-label {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Breadcrumbs separator arrow */
.breadcrumbs__sep::before {
    content: none;
}

.breadcrumbs li {
    display: inline;
}

/* ============================================
   EXPANDED SERVICE PARENT GRID DETAILS
   ============================================ */

/* Service card badge/tag */
.service-parent-grid__card-badge {
    position: absolute;
    top: 16px;
    left: 0;
    padding: 6px 16px;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

/* Service card with icon overlay */
.service-parent-grid__card-icon-overlay {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    z-index: 2;
    transition: all var(--transition);
}

.service-parent-grid__card:hover .service-parent-grid__card-icon-overlay {
    background: var(--blue-light);
    transform: scale(1.1);
}

/* ============================================
   EXPANDED SERVICE SINGLE DETAILS
   ============================================ */

/* Service intro checklist */
.service-intro__checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.service-intro__checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    color: var(--black);
    font-weight: 500;
}

.service-intro__checklist li svg {
    flex-shrink: 0;
    color: var(--blue);
}

/* Service content sidebar layout */
.service-content__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 992px) {
    .service-content__grid {
        grid-template-columns: 1fr 300px;
    }
}

/* Service sidebar */
.service-sidebar {
    position: sticky;
    top: 120px;
}

.service-sidebar__card {
    background: var(--gray-100);
    padding: 28px;
    margin-bottom: 24px;
    border-left: 4px solid var(--blue);
}

.service-sidebar__card h4 {
    margin-bottom: 16px;
    font-size: 1rem;
}

.service-sidebar__list li {
    margin-bottom: 8px;
}

.service-sidebar__list a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--gray-700);
    transition: all var(--transition);
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
}

.service-sidebar__list a:hover {
    color: var(--blue);
    padding-left: 4px;
}

.service-sidebar__list a svg {
    flex-shrink: 0;
    color: var(--blue);
    opacity: .5;
}

.service-sidebar__cta {
    background: var(--blue-dark);
    color: var(--white);
    padding: 28px;
    text-align: center;
}

.service-sidebar__cta h4 {
    color: var(--white);
    margin-bottom: 8px;
}

.service-sidebar__cta p {
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    margin-bottom: 16px;
    text-transform: none;
    letter-spacing: 0;
}

/* Service benefits mobile override */
@media (max-width: 767px) {
    .service-benefits__card {
        border: 1px solid rgba(255, 255, 255, .08);
    }

    .service-benefits__card::before {
        opacity: 1;
    }

    .service-benefits__card:hover::before {
        opacity: 1;
    }

    .service-benefits__card:hover {
        border-color: rgba(255, 255, 255, .08);
        box-shadow: none;
        translate: 0 0;
    }

    .service-benefits__card .service-benefits__card-number {
        color: rgba(255, 255, 255, .3);
    }

    .service-benefits__card .service-benefits__card-title {
        color: var(--white);
    }

    .service-benefits__card .service-benefits__card-desc {
        color: rgba(255, 255, 255, .75);
    }

    .service-benefits__card:nth-child(even)::before {
        background: linear-gradient(to top right, var(--blue-dark) 0%, var(--blue) 140%);
    }

    .service-benefits__card:nth-child(even) {
        border-color: rgba(61, 79, 192, .15);
    }
}

/* ============================================
   EXPANDED ABOUT PAGE DETAILS
   ============================================ */

/* About story with image offset pattern */
.about-story--reverse .about-story__grid {
    direction: rtl;
}

.about-story--reverse .about-story__grid > * {
    direction: ltr;
}

/* About team member cards */
.about-team__members {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 576px) {
    .about-team__members {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .about-team__members {
        grid-template-columns: repeat(3, 1fr);
    }
}

.about-team__member {
    text-align: center;
    padding: 32px 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-bottom: 3px solid var(--blue);
    transition: all var(--transition);
}

.about-team__member:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.about-team__member-photo {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 3px solid var(--blue-tint);
}

.about-team__member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team__member h4 {
    margin-bottom: 4px;
}

.about-team__member-role {
    font-size: .85rem;
    color: var(--blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.about-team__member p {
    font-size: .88rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
}

/* About stats/numbers section */
.about-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .about-stats__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.about-stats__item {
    text-align: center;
    padding: 28px 16px;
}

.about-stats__number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
    margin-bottom: 8px;
}

.about-stats__label {
    font-size: .85rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   EXPANDED CONTACT PAGE DETAILS
   ============================================ */

/* Contact form success/error states */
.contact-form__message {
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: .95rem;
    font-weight: 500;
    border-left: 4px solid;
}

.contact-form__message--success {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

.contact-form__message--error {
    background: #fef2f2;
    border-color: var(--red);
    color: #991b1b;
}

/* Contact form field validation states */
.contact-form__field--error input,
.contact-form__field--error select,
.contact-form__field--error textarea {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

/* Hero form messages */
.hero-form__message{padding:16px 20px;margin-top:16px;font-size:.95rem;font-weight:600;font-family:var(--font-heading);text-transform:none;letter-spacing:0;display:flex;align-items:center;justify-content:center;gap:10px;animation:msgSlideIn .4s ease;text-align:center}
@media(max-width:767px){.hero-form__message{padding:32px 16px}}
.hero-form__message::before{content:'';display:flex;width:20px;height:20px;flex-shrink:0;background-size:contain;background-repeat:no-repeat;align-items:center;justify-content:center}
.hero-form__message--success{background:var(--blue);color:var(--white);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.hero-form__message--success::before{content:'✓';font-size:1.1rem}
.hero-form__message--error{background:#dc2626;color:var(--white);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.hero-form__message--error::before{content:'✕';font-size:1.1rem}
@keyframes msgSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.form-hint{display:block;font-size:.8rem;color:#e53e3e;margin-top:4px;font-weight:500}
.section--dark .form-hint{color:#fca5a5}
.hero-form__message--fade{opacity:0;transition:opacity .5s ease}
.bottom-cta__form .hero-form__message--success{background:rgba(255,255,255,.15);color:var(--white)}
.bottom-cta__form .hero-form__message--error{background:rgba(220,38,38,.3);color:var(--white)}

.contact-form__field--error label {
    color: var(--red);
}

.contact-form__error-text {
    font-size: .8rem;
    color: var(--red);
    margin-top: 4px;
}

/* Contact hours card */
.contact-hours {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

.contact-hours__title {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 12px;
}

.contact-hours__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: .88rem;
    color: rgba(255, 255, 255, .7);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.contact-hours__row:last-child {
    border-bottom: none;
}

.contact-hours__row--active {
    color: var(--white);
    font-weight: 600;
}

/* ============================================
   EXPANDED PORTFOLIO / OUR WORKS DETAILS
   ============================================ */

/* Portfolio masonry layout */
.projects__grid--masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .projects__grid--masonry {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .projects__grid--masonry {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tall/featured items span 2 rows */
.projects__item--tall {
    grid-row: span 2;
    aspect-ratio: auto;
}

.projects__item--wide {
    grid-column: span 2;
}

/* Project detail tag */
.projects__item-tag {
    position: absolute;
    top: 12px;
    left: 0;
    padding: 4px 12px;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

/* Portfolio load more button */
.projects__load-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Project counter */
.projects__count {
    text-align: center;
    margin-top: 16px;
    font-size: .85rem;
    color: var(--gray-500);
}

/* ============================================
   EXPANDED CTA SECTION DETAILS
   ============================================ */

/* CTA with diagonal pattern */
.cta-banner--diagonal .cta-banner__bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    pointer-events: none;
}

/* CTA with phone number */
.cta-banner__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .8);
}

.cta-banner__phone a {
    color: var(--white);
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.3rem;
}

.cta-banner__phone a:hover {
    color: var(--gold);
}

/* ============================================
   EXPANDED FOOTER DETAILS
   ============================================ */

/* Footer with construction pattern */
.site-footer::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(255,255,255,.15);
}

/* Footer newsletter form */
.footer-newsletter {
    margin-top: 20px;
}

.footer-newsletter__form {
    display: flex;
    gap: 0;
}

.footer-newsletter__input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-right: none;
    color: var(--white);
    font-size: .88rem;
    border-radius: 0;
}

.footer-newsletter__input::placeholder {
    color: rgba(255, 255, 255, .4);
}

.footer-newsletter__input:focus {
    outline: none;
    border-color: var(--blue-light);
    background: rgba(255, 255, 255, .12);
}

.footer-newsletter__btn {
    padding: 10px 16px;
    background: var(--blue);
    color: var(--white);
    border: 1px solid var(--blue);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition);
}

.footer-newsletter__btn:hover {
    background: var(--blue-light);
    border-color: var(--blue-light);
}

/* Footer service areas tags - compact mobile */
@media (max-width: 575px) {
    .site-footer__areas {
        gap: 6px;
    }

    .site-footer__areas li a {
        font-size: .75rem;
        padding: 3px 10px;
    }
}

/* Footer bottom credits with pipe separator */
.site-footer__bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.site-footer__bottom-links a {
    color: rgba(255, 255, 255, .4);
    font-size: .8rem;
    transition: color var(--transition);
}

.site-footer__bottom-links a:hover {
    color: var(--white);
}

.site-footer__bottom-links span.pipe {
    color: rgba(255, 255, 255, .15);
}

/* ============================================
   EXPANDED LIGHTBOX DETAILS
   ============================================ */

/* Lightbox loading state */
.lightbox__loading {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, .1);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: lightboxSpin 1s linear infinite;
}

@keyframes lightboxSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Lightbox caption */
.lightbox__caption {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    font-size: .88rem;
}

/* Lightbox thumbnail strip */
.lightbox__thumbs {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10001;
}

.lightbox__thumb {
    width: 48px;
    height: 36px;
    overflow: hidden;
    opacity: .5;
    cursor: pointer;
    transition: opacity var(--transition);
    border: 2px solid transparent;
}

.lightbox__thumb.is-active {
    opacity: 1;
    border-color: var(--white);
}

.lightbox__thumb:hover {
    opacity: .8;
}

.lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox keyboard hint */
.lightbox__hint {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: rgba(255, 255, 255, .3);
    font-size: .75rem;
    z-index: 10001;
}

/* ============================================
   FORM INPUT VARIANTS
   ============================================ */

/* Input with icon */
.contact-form__field--icon {
    position: relative;
}

.contact-form__field--icon input,
.contact-form__field--icon textarea {
    padding-left: 44px;
}

.contact-form__field--icon svg {
    position: absolute;
    left: 14px;
    top: 42px;
    color: var(--gray-300);
    pointer-events: none;
}

.contact-form__field--icon input:focus + svg,
.contact-form__field--icon input:focus ~ svg {
    color: var(--blue);
}

/* Checkbox / radio styling */
.contact-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--gray-700);
}

.contact-form__checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--blue);
    border: 2px solid var(--gray-200);
    border-radius: 2px;
}

/* File upload area */
.contact-form__file-upload {
    border: 2px dashed var(--gray-200);
    padding: 32px;
    text-align: center;
    transition: all var(--transition);
    cursor: pointer;
}

.contact-form__file-upload:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}

.contact-form__file-upload svg {
    color: var(--gray-300);
    margin-bottom: 8px;
}

.contact-form__file-upload p {
    font-size: .88rem;
    color: var(--gray-500);
}

.contact-form__file-upload span {
    color: var(--blue);
    font-weight: 600;
}

/* ============================================
   LOADING & ANIMATION UTILITIES
   ============================================ */

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-100) 25%,
        var(--gray-200) 50%,
        var(--gray-100) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease infinite;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Fade in animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.stagger-children > *:nth-child(1) { transition-delay: .1s; }
.stagger-children > *:nth-child(2) { transition-delay: .2s; }
.stagger-children > *:nth-child(3) { transition-delay: .3s; }
.stagger-children > *:nth-child(4) { transition-delay: .4s; }
.stagger-children > *:nth-child(5) { transition-delay: .5s; }
.stagger-children > *:nth-child(6) { transition-delay: .6s; }

/* Slide in from left */
.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .6s ease, transform .6s ease;
}

.slide-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide in from right */
.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .6s ease, transform .6s ease;
}

.slide-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.scale-up {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .6s ease, transform .6s ease;
}

.scale-up.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   NOTIFICATION / TOAST
   ============================================ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 24px;
    background: var(--black);
    color: var(--white);
    font-size: .9rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 11000;
    opacity: 0;
    transition: all .4s ease;
    max-width: 90vw;
}

.toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast--success {
    border-left: 4px solid #10b981;
}

.toast--error {
    border-left: 4px solid var(--red);
}

/* ============================================
   ADDITIONAL RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large tablets / small laptops */
@media (min-width: 768px) and (max-width: 991px) {
    .hero__cards {
        display: none;
    }

    .about-story__grid,
    .about-team__grid {
        gap: 32px;
    }

    .service-parent-grid__cards {
        grid-template-columns: 1fr 1fr;
    }

    .service-process__timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .location-why__grid {
        grid-template-columns: 1fr;
    }

    .contact-main__grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        position: static;
    }
}

/* Extra large screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .hero__card {
        min-width: 280px;
    }

    .hero__text {
        max-width: 650px;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 350px) {
    .container {
        padding: 0 16px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .hero__badge {
        font-size: .7rem;
        letter-spacing: 1.5px;
    }

    .btn {
        padding: 12px 20px;
        font-size: .8rem;
    }

    .top-bar__left {
        gap: 8px;
    }

    .site-footer__grid {
        gap: 28px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .site-header,
    .top-bar,
    .mobile-menu,
    .floating-call,
    .back-to-top,
    .hero__shapes,
    .lightbox,
    .pre-footer-cta,
    .toast {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 40px 0;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .section {
        padding: 20px 0;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    img {
        max-width: 100% !important;
    }

    .page-hero {
        background: none !important;
        padding: 20px 0;
    }

    .page-hero__overlay {
        display: none;
    }

    .page-hero__title {
        color: #000;
    }
}