* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; background: #f5f7fb; color: #142033; font-family: Arial, sans-serif; font-size: 17px; }
a { color: inherit; }
.site-width { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.site-header .top-inner { width: 100%; padding: 0 18px; }
.top-strip { background: #062b86; color: #fff; }
.top-inner { align-items: center; display: grid; gap: 14px; grid-template-columns: minmax(220px, 1fr) auto auto; min-height: 58px; }
.top-inner a { color: #fff; text-decoration: none; }
.top-links, .social-links { align-items: center; display: flex; flex-wrap: nowrap; gap: 18px; }
.top-links { justify-content: flex-start; }
.top-links .staff-attendance-button { background: #ff9f00; border-radius: 999px; box-shadow: 0 5px 12px rgba(0,0,0,.14); color: #fff; font-weight: 900; padding: 9px 18px; }
.top-links .staff-attendance-button:hover { box-shadow: 0 7px 16px rgba(0,0,0,.2); transform: translateY(-1px); }
.social-links { justify-content: flex-end; justify-self: end; }
.social-links a { align-items: center; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 28px 28px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; box-shadow: 0 5px 12px rgba(0,0,0,.14); display: inline-flex; font-size: 0; font-weight: 800; height: 42px; justify-content: center; padding: 0; position: relative; width: 42px; }
.social-links a:hover { box-shadow: 0 7px 16px rgba(0,0,0,.2); transform: translateY(-1px); }
.social-links a::before, .social-instagram::after { display: none; }
.social-facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%231877F2'/%3E%3Cpath fill='white' d='M29.7 25.5l.8-5.2h-5v-3.4c0-1.5.7-2.9 3-2.9h2.3V9.6s-2.1-.4-4.1-.4c-4.2 0-7 2.6-7 7.2v3.9H15v5.2h4.7V38h5.8V25.5h4.2z'/%3E%3C/svg%3E"); }
.social-instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3CradialGradient id='a' cx='15' cy='42' r='45' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ffd676'/%3E%3Cstop offset='.28' stop-color='%23f77737'/%3E%3Cstop offset='.55' stop-color='%23e1306c'/%3E%3Cstop offset='.78' stop-color='%23833ab4'/%3E%3Cstop offset='1' stop-color='%234c68d7'/%3E%3C/radialGradient%3E%3Ccircle cx='24' cy='24' r='24' fill='url(%23a)'/%3E%3Crect x='14' y='14' width='20' height='20' rx='6' fill='none' stroke='white' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='5' fill='none' stroke='white' stroke-width='3'/%3E%3Ccircle cx='30' cy='18' r='2' fill='white'/%3E%3C/svg%3E"); }
.social-tiktok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23000000'/%3E%3Cpath fill='%2325F4EE' d='M27.6 12c.6 3.7 2.8 6 6.2 6.8v5.3c-2.2 0-4.2-.6-6.2-1.8v8.3c0 5.1-3.4 8.4-8.3 8.4-4.3 0-7.3-2.8-7.3-6.8 0-4.3 3.5-7.2 8.3-6.8v5.2c-1.7-.3-2.9.4-2.9 1.6 0 1.1.9 1.7 2.2 1.7 1.5 0 2.5-.9 2.5-3.1V12h5.5z' opacity='.9'/%3E%3Cpath fill='%23FE2C55' d='M30 14c.8 2.7 2.8 4.3 5.8 4.9v4.7c-2.1-.2-4.1-.9-5.8-2v8.8c0 5.1-3.4 8.4-8.3 8.4-2.5 0-4.7-.9-6-2.5 1.2.7 2.6 1 4.1 1 4.9 0 8.3-3.3 8.3-8.4V14H30z'/%3E%3Cpath fill='white' d='M27.6 12c.6 3.7 2.8 6 6.2 6.8v3.2c-2.2 0-4.2-.6-6.2-1.8v8.3c0 5.1-3.4 8.4-8.3 8.4-4.3 0-7.3-2.8-7.3-6.8 0-4.3 3.5-7.2 8.3-6.8v3.2c-1.7-.3-2.9.4-2.9 1.6 0 1.1.9 1.7 2.2 1.7 1.5 0 2.5-.9 2.5-3.1V12h5.5z'/%3E%3C/svg%3E"); }
.social-youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21.6 7.2s-.2-1.5-.8-2.1c-.8-.8-1.7-.8-2.1-.9C15.8 4 12 4 12 4s-3.8 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2.1-.8 2.1S2.2 9 2.2 10.8v1.7c0 1.8.2 3.6.2 3.6s.2 1.5.8 2.1c.8.8 1.9.8 2.4.9 1.7.2 6.4.2 6.4.2s3.8 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2.1.8-2.1s.2-1.8.2-3.6v-1.7c0-1.8-.2-3.6-.2-3.6zM10 15V8l6 3.5L10 15z'/%3E%3C/svg%3E"); }
.social-youtube::before { content: ""; }
.social-linkedin::before { content: "in"; font-size: 18px; }
.social-x::before { content: "X"; font-size: 18px; }
.social-link::before { content: "↗"; font-size: 20px; }
.social-links a span { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.top-actions { align-items: center; display: flex; gap: 10px; justify-self: end; }
.top-inner .quote-button { justify-self: end; }
.invoice-button { background: #62a9e9; border: 0; border-radius: 999px; box-shadow: 0 5px 12px rgba(0,0,0,.14); color: #fff; cursor: pointer; display: inline-flex; font-weight: 900; min-height: 42px; padding: 10px 20px; text-decoration: none; }
.invoice-button:hover { box-shadow: 0 7px 16px rgba(0,0,0,.2); transform: translateY(-1px); }
.quote-button, .site-header button, .service-form button, .login-card button, .admin-panel button { background: #ff9f00; border: 0; border-radius: 999px; color: #fff; cursor: pointer; display: inline-flex; font-weight: 900; min-height: 42px; padding: 10px 20px; text-decoration: none; }
.main-nav { background: #ff9f00; border-bottom: 1px solid #d4d7dd; box-shadow: 0 4px 14px rgba(15,23,42,.08); color: #fff; }
.nav-inner { align-items: center; display: grid; gap: 22px; grid-template-columns: 260px 1fr; min-height: 94px; }
.site-header:not(.portal-only-header):not(.backend-only-header) .nav-inner { gap: 0; grid-template-columns: minmax(235px, 18vw) minmax(0, 1fr); margin: 0; width: 100%; }
.site-header:not(.portal-only-header):not(.backend-only-header) .brand { justify-content: flex-start; padding-left: 32px; padding-right: 42px; width: min(20vw, 390px); }
.brand { align-items: center; background: #fff; color: #07308e; display: flex; gap: 10px; font-weight: 900; min-height: 94px; padding: 12px 28px; position: relative; text-decoration: none; text-transform: uppercase; }
.brand::after { border-bottom: 94px solid transparent; border-left: 54px solid #fff; content: ""; position: absolute; right: -54px; top: 0; }
.brand-logo { display: block; height: auto; max-height: 88px; max-width: 310px; object-fit: contain; position: relative; z-index: 1; }
.main-nav nav { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; }
.main-nav nav a { color: #fff; font-size: 19px; font-weight: 800; text-decoration: none; }
.site-header:not(.portal-only-header):not(.backend-only-header) .main-nav nav { flex-wrap: nowrap; gap: clamp(11px, .82vw, 17px); justify-content: flex-start; padding: 0 14px 0 clamp(90px, 7.5vw, 140px); }
.site-header:not(.portal-only-header):not(.backend-only-header) .main-nav nav a { background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: clamp(15px, .94vw, 18px); padding: 8px 0; transform: none; white-space: nowrap; }
.site-header:not(.portal-only-header):not(.backend-only-header) .main-nav nav a:hover,
.site-header:not(.portal-only-header):not(.backend-only-header) .main-nav nav a.active { background: transparent; box-shadow: none; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; transform: none; }
.main-nav nav a.active, .main-nav nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.portal-only-header .main-nav { background: #ff9f00; }
.portal-only-header .nav-inner { align-items: center; display: grid; grid-template-columns: 540px minmax(520px, 1fr); margin: 0; min-height: 112px; width: 100%; }
.portal-only-header .brand { min-height: 112px; padding-left: 24px; padding-right: 74px; width: 540px; }
.portal-only-header .brand::after { border-bottom-width: 112px; border-left-width: 54px; right: -54px; }
.portal-only-header .brand-logo { max-height: 98px; max-width: 390px; }
.portal-shipping-nav { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(360px, 1fr) auto; padding: 0 28px 0 34px; }
.portal-shipping-nav.single-search { grid-template-columns: 1fr; }
.portal-shipping-search { align-items: center; display: grid; gap: 12px; grid-template-columns: auto minmax(420px, 760px); justify-content: start; }
.portal-shipping-search .delivery-price-title { color: #fff; font-size: 20px; font-weight: 900; white-space: nowrap; }
.portal-shipping-search .shipping-postcode-widget { max-width: none; }
.portal-shipping-search .shipping-search-form { display: grid; gap: 0; grid-template-columns: minmax(220px, 1fr) 116px; margin: 0; }
.portal-shipping-search .shipping-search-form label { display: none; }
.portal-shipping-search .shipping-search-control input { border: 0; border-radius: 999px 0 0 999px; font-size: 17px; height: 48px; min-height: 48px; }
.portal-shipping-search .shipping-calculate-button { align-items: center; background: #0033a0; border: 0; border-radius: 0 999px 999px 0; color: #fff; cursor: pointer; display: inline-flex; font-size: 17px; font-weight: 900; height: 48px; justify-content: center; line-height: 1; padding: 0 18px; text-align: center; }
.portal-shipping-search .shipping-dropdown { left: 0; right: -116px; top: 54px; }
.portal-shipping-search .shipping-selected-result { grid-column: 1 / -1; margin-top: 8px; }
.portal-mini-nav { justify-content: flex-end; }
.portal-mini-nav a { background: rgba(255,255,255,.12); border-radius: 6px; padding: 9px 10px; }
.portal-mini-nav a.active { background: #062b86; text-decoration: none; }
.portal-header-logout { margin: 0; }
.portal-header-logout button { background: #062b86; border: 0; border-radius: 6px; color: #fff; cursor: pointer; font-size: 18px; font-weight: 800; min-height: 40px; padding: 9px 12px; }
.backend-only-header .main-nav { background: #062b86; border-bottom: 0; }
.backend-only-header .nav-inner { gap: 0; grid-template-columns: 360px minmax(0, 1fr); margin: 0; min-height: 82px; width: 100%; }
.backend-only-header .brand { justify-content: flex-start; min-height: 82px; padding-left: 28px; padding-right: 58px; width: 330px; }
.backend-only-header .brand::after { border-bottom-width: 82px; border-left-width: 34px; right: -34px; }
.backend-only-header .brand-logo { max-height: 76px; max-width: 280px; }
.backend-only-header .nav-inner:not(:has(.backend-main-nav)) { grid-template-columns: 360px 1fr; }
.backend-main-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 8px 18px; }
.backend-main-nav a { background: #62a9e9; border-radius: 6px; box-shadow: 0 5px 13px rgba(15,23,42,.12); color: #fff; font-size: 16px; font-weight: 800; padding: 9px 11px; text-decoration: none; }
.backend-main-nav a.active { background: #ff9f00; color: #fff; text-decoration: none; }
.backend-header-logout { margin: 0; }
.backend-header-logout button { background: #ff9f00; border: 0; border-radius: 6px; color: #fff; cursor: pointer; font-size: 16px; font-weight: 800; min-height: 38px; padding: 8px 12px; }
.notice { background: #e9f7ef; border: 1px solid #b9e2ca; border-radius: 8px; color: #15592c; margin-top: 18px; padding: 12px 14px; }
.confirmation-overlay { align-items: center; background: rgba(15,23,42,.22); display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 1000; }
.confirmation-card { background: #fff; border-bottom: 8px solid #062b86; border-radius: 8px; box-shadow: 0 24px 80px rgba(15,23,42,.24); max-width: 640px; padding: 42px 34px 28px; text-align: center; width: min(100%, 640px); }
.confirmation-check { align-items: center; border: 5px solid #dff1d7; border-radius: 999px; color: #94d67b; display: inline-flex; font-size: 58px; height: 106px; justify-content: center; line-height: 1; margin-bottom: 24px; width: 106px; }
.confirmation-card h1 { color: #555; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 22px; }
.confirmation-card p { color: #5d5d5d; font-size: clamp(19px, 2.5vw, 25px); line-height: 1.35; margin: 0 auto 30px; max-width: 560px; }
.confirmation-card button { background: #ff9f00; border: 2px solid #111; border-radius: 7px; color: #fff; cursor: pointer; font-size: 21px; font-weight: 900; padding: 12px 24px; }
.page-return-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.page-return-actions a { background: #62a9e9; border-radius: 6px; box-shadow: 0 5px 13px rgba(15,23,42,.1); color: #fff; font-size: 15px; font-weight: 900; padding: 9px 12px; text-decoration: none; }
.page-return-actions a:first-child { background: #062b86; }
.backend-only-header + main .page-return-actions { display: none; }
.portal-only-header + main .page-return-actions a:first-child { background: #ff9f00; }
.hero-slider { background: url("assets/fab-home-slider.png") center/cover; color: #fff; min-height: 430px; display: flex; align-items: center; }
.home-image-hero { background-position: center; border-bottom: 1px solid #dce2ec; border-top: 1px solid #dce2ec; display: block; margin-top: 20px; min-height: 360px; }
.home-service-slider { background: #071936; border: 1px solid #dce2ec; border-radius: 8px; box-shadow: 0 12px 28px rgba(15,23,42,.12); height: clamp(560px, 54vw, 720px); margin: 16px auto 0; max-width: 1500px; overflow: hidden; position: relative; width: calc(100% - 28px); }
.home-service-slide { color: #fff; display: block; inset: 0; opacity: 0; position: absolute; text-decoration: none; transition: opacity .55s ease; }
.home-service-slide.active { opacity: 1; z-index: 1; }
.home-service-slide img { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.home-service-slide::after { background: linear-gradient(90deg, rgba(6,43,134,.68), rgba(6,43,134,.15) 42%, rgba(0,0,0,.08)); content: ""; inset: 0; position: absolute; }
.home-service-slide span { align-items: center; background: rgba(6,43,134,.92); border-left: 8px solid #ff9f00; bottom: 34px; box-shadow: 0 12px 30px rgba(0,0,0,.2); display: inline-flex; left: max(390px, calc((100vw - 1180px) / 2 + 360px)); min-height: 82px; padding: 18px 28px; position: absolute; z-index: 2; }
.home-service-slide b { font-size: clamp(30px, 4vw, 54px); line-height: 1; }
.slider-booking-card { align-content: center; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.94)); border-right: 8px solid #ff9f00; box-shadow: 14px 0 32px rgba(6,43,134,.2); color: #142033; display: grid; gap: 16px; inset: 0 auto 0 0; max-width: none; padding: 34px 30px; position: absolute; width: 360px; z-index: 4; }
.slider-booking-card h2 { color: #062b86; font-size: clamp(25px, 2.1vw, 35px); line-height: 1.1; margin: 0; }
.slider-booking-card p { color: #243955; font-size: 17px; font-weight: 800; line-height: 1.45; margin: 0; }
.slider-booking-card::before { background: #ff9f00; border-radius: 999px; content: ""; height: 7px; width: 92px; }
.slider-booking-card::after { color: #062b86; content: "FAB Transport"; font-size: 13px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.home-slider-dots { bottom: 22px; display: flex; gap: 10px; position: absolute; right: max(28px, calc((100vw - 1180px) / 2)); z-index: 3; }
.home-slider-dots button { background: rgba(255,255,255,.7); border: 2px solid #fff; border-radius: 999px; cursor: pointer; height: 14px; padding: 0; width: 14px; }
.home-slider-dots button.active { background: #ff9f00; border-color: #ff9f00; width: 38px; }
.hero-content { max-width: 780px; }
.hero-content h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.03; margin: 0 0 14px; }
.hero-content p { font-size: 20px; margin: 0 0 20px; }
.welcome-note { background: #fff; border: 1px solid #dce2ec; border-left: 6px solid #ff9f00; border-radius: 8px; box-shadow: 0 10px 24px rgba(15,23,42,.07); margin-top: 16px; max-width: 1280px; padding: 17px 26px; text-align: center; }
.welcome-note span { color: #062b86; display: block; font-size: 15px; font-weight: 900; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; }
.welcome-note h2 { color: #142033; font-size: clamp(22px, 1.75vw, 30px); margin: 0 0 6px; }
.welcome-note p { color: #53657e; font-size: 16px; font-weight: 700; margin: 0 auto; max-width: 980px; }
.welcome-brand-card { display: block; margin-top: 14px; max-width: 1500px; padding: 22px 34px; text-align: center; width: calc(100% - 28px); }
.welcome-brand-card h2 { color: #062b86; font-size: clamp(30px, 2.7vw, 44px); font-weight: 950; letter-spacing: 0; line-height: 1.05; margin: 0 0 10px; }
.welcome-brand-card p { background: #f7fbff; color: #062b86; display: inline-block; font-size: clamp(21px, 1.55vw, 27px); font-weight: 950; line-height: 1.25; margin: 0; max-width: none; padding: 9px 14px; }
.service-intro-note { background: #f0fff3; border: 1px solid #cdebd4; border-left: 6px solid #38a169; border-radius: 8px; color: #173b24; font-size: 17px; font-weight: 800; line-height: 1.5; margin: 0 0 18px; padding: 16px 18px; }
.handyman-overview { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); margin: 0 0 20px; }
.handyman-copy { align-content: center; background: linear-gradient(135deg, #fff 0%, #f6fbff 54%, #fff7e6 100%); border: 1px solid #dce7f4; border-left: 7px solid #ff9f00; border-radius: 10px; box-shadow: 0 14px 30px rgba(15,23,42,.08); display: grid; gap: 14px; padding: 26px; }
.handyman-copy h2 { color: #062b86; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.08; margin: 0; }
.handyman-copy p { color: #26313a; font-size: 19px; line-height: 1.55; margin: 0; }
.handyman-service-list { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4px; }
.handyman-service-list span { background: #fff; border: 1px solid #dce2ec; border-radius: 999px; color: #062b86; font-size: 15px; font-weight: 900; padding: 10px 12px; text-align: center; }
.handyman-slider { align-self: stretch; background: #102d64; border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.16); min-height: 380px; min-width: 0; overflow: hidden; position: relative; touch-action: pan-y; }
.handyman-slide { inset: 0; margin: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .45s ease; }
.handyman-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.handyman-slide img { display: block; height: 100%; object-fit: cover; width: 100%; }
.handyman-slide figcaption { background: linear-gradient(180deg, transparent, rgba(3,23,63,.92)); bottom: 0; color: #fff; display: grid; gap: 3px; left: 0; padding: 64px 58px 22px; position: absolute; right: 0; }
.handyman-slide figcaption strong { font-size: 22px; line-height: 1.15; }
.handyman-slide figcaption span { font-size: 15px; line-height: 1.35; }
.handyman-slider-arrow { align-items: center; background: rgba(255,255,255,.94); border: 0; border-radius: 50%; color: #062b86; display: flex; font-size: 32px; height: 44px; justify-content: center; min-height: 44px; padding: 0 0 3px; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; z-index: 3; }
.handyman-slider-arrow:hover { background: #ff9f00; color: #fff; }
.handyman-slider-arrow.previous { left: 12px; }
.handyman-slider-arrow.next { right: 12px; }
.handyman-slider-dots { bottom: 12px; display: flex; gap: 7px; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); z-index: 4; }
.handyman-slider-dots button { background: rgba(255,255,255,.75); border: 2px solid #fff; border-radius: 999px; height: 10px; min-height: 10px; padding: 0; transition: width .2s ease, background .2s ease; width: 10px; }
.handyman-slider-dots button.active { background: #ff9f00; border-color: #ff9f00; width: 28px; }
.service-cards { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
.service-image-card { align-items: end; aspect-ratio: 1 / 1; background-position: center; background-size: cover; border-radius: 8px; color: #fff; display: flex; font-size: 22px; font-weight: 900; overflow: hidden; padding: 0; position: relative; text-decoration: none; }
.service-image-card::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); content: ""; inset: 0; position: absolute; }
.service-image-card span { padding: 18px; position: relative; z-index: 1; }
.home-section { background: #fff; border-radius: 8px; margin-top: 38px; max-width: 1500px; padding: 34px 28px; width: min(1500px, calc(100% - 28px)); }
.home-work-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-work-card { border: 1px solid #e1e5eb; display: grid; grid-template-rows: 260px 1fr; }
.home-work-card img { height: 100%; object-fit: cover; width: 100%; }
.home-work-card div { display: grid; gap: 12px; padding: 22px 24px; }
.home-work-card h3 { color: #062b86; font-size: 25px; line-height: 1.2; margin: 0; }
.home-work-card p { color: #142033; font-size: 18px; line-height: 1.48; margin: 0; }
.home-work-card a { background: #ff9f00; color: #fff; font-weight: 900; justify-self: start; padding: 11px 22px; text-decoration: none; }
.quality-grid, .testimonial-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quality-card, .testimonial-card { align-content: start; border: 1px solid #e1e5eb; display: grid; gap: 14px; justify-items: center; min-height: 250px; padding: 28px 24px; text-align: center; }
.home-quality-section { background: linear-gradient(135deg, #fff 0%, #f4f8ff 58%, #fff7e8 100%); border: 1px solid #dce7f4; box-shadow: 0 18px 45px rgba(15,23,42,.08); }
.home-quality-section .section-heading h2 { color: #062b86; }
.home-quality-section .section-heading p { color: #334155; font-size: 18px; max-width: 1120px; }
.home-quality-section .section-heading span::before { background: #062b86; }
.home-quality-section .section-heading span::after { background: #ff9f00; }
.quality-card { background: rgba(255,255,255,.92); border: 1px solid #d7e2f0; border-radius: 14px; box-shadow: 0 12px 26px rgba(15,23,42,.08); overflow: hidden; position: relative; }
.quality-card::before { background: linear-gradient(90deg, #ff9f00, #062b86); content: ""; height: 5px; left: 0; position: absolute; right: 0; top: 0; }
.testimonial-card { justify-items: stretch; text-align: left; }
.testimonial-author { align-items: center; background: #f7fbff; border-left: 5px solid #ff9f00; display: grid; gap: 12px; grid-template-columns: 54px 1fr; padding: 12px; width: 100%; }
.testimonial-author > span { align-items: center; background: #062b86; border-radius: 999px; color: #fff; display: flex; font-size: 25px; font-weight: 950; height: 54px; justify-content: center; width: 54px; }
.testimonial-author small { color: #64748b; display: block; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.testimonial-author strong { color: #062b86; display: block; font-size: 20px; line-height: 1.15; }
.quality-card b { align-items: center; background: radial-gradient(circle at 30% 25%, #ffbd4a, #ff9f00 55%, #d87c00); border: 7px solid #eef5ff; border-radius: 999px; box-shadow: 0 10px 22px rgba(255,159,0,.22); color: #062b86; display: flex; font-size: 28px; height: 84px; justify-content: center; width: 84px; }
.quality-card h3 { color: #062b86; font-size: 24px; margin: 8px 0 0; text-transform: uppercase; }
.quality-card p, .testimonial-card p { color: #26313a; font-size: 18px; line-height: 1.48; margin: 0; }
.stars { color: #ff9f00; font-size: 26px; letter-spacing: 2px; }
.portal-grid a { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; color: #142033; font-weight: 800; padding: 18px; text-decoration: none; }
.form-shell, .content-page, .login-card { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; margin-top: 24px; padding: 22px; }
.form-shell h1, .content-page h1, .login-card h1 { margin-top: 0; }
.section-heading { display: grid; gap: 10px; justify-items: center; margin-bottom: 26px; text-align: center; }
.section-heading h1, .section-heading h2 { color: #142033; font-size: clamp(34px, 4vw, 48px); line-height: 1; margin: 0; }
.section-heading span { align-items: center; display: flex; gap: 8px; height: 8px; justify-content: center; width: 260px; }
.section-heading span::before, .section-heading span::after { background: #ff9f00; content: ""; height: 4px; width: 100px; }
.section-heading span::after { background: #142033; width: 18px; }
.about-page, .contact-page { padding: 36px; }
.about-intro { align-items: center; display: grid; gap: 32px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); margin-bottom: 34px; }
.about-intro h2 { color: #062b86; font-size: 32px; margin: 0 0 12px; }
.about-intro p { color: #26313a; font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.about-intro img { border-radius: 8px; box-shadow: 0 14px 32px rgba(15,23,42,.16); height: 360px; object-fit: cover; width: 100%; }
.about-feature-grid { display: grid; gap: 28px 38px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 46px; }
.about-feature-card { align-items: start; border: 1px solid #dce2ec; display: grid; gap: 24px; grid-template-columns: 52px 1fr; min-height: 210px; padding: 26px; }
.about-feature-card b { align-items: center; background: #ff9f00; color: #fff; display: flex; font-size: 24px; height: 50px; justify-content: center; width: 50px; }
.about-feature-card h3 { color: #142033; font-size: 25px; margin: 0 0 12px; }
.about-feature-card p { color: #142033; font-size: 20px; line-height: 1.48; margin: 0; }
.services-heading p { color: #26313a; font-size: 20px; line-height: 1.5; margin: 8px auto 0; max-width: 850px; }
.about-service-grid { display: grid; gap: 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.about-service-card { border: 1px solid #e1e5eb; display: grid; grid-template-rows: 260px 1fr; }
.about-service-card img { height: 100%; object-fit: cover; width: 100%; }
.about-service-card div { display: grid; gap: 12px; padding: 24px 26px; }
.about-service-card h3 { color: #062b86; font-size: 29px; line-height: 1.2; margin: 0; }
.about-service-card p { color: #142033; font-size: 20px; line-height: 1.45; margin: 0; }
.about-service-card a { background: #ff9f00; color: #fff; font-weight: 800; justify-self: start; margin-top: 8px; padding: 12px 24px; text-decoration: none; }
.contact-layout { display: grid; gap: 24px; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
.contact-details { background: #062b86; border-radius: 8px; color: #fff; display: grid; gap: 13px; padding: 28px; }
.contact-details h2 { font-size: 30px; margin: 0; }
.contact-details p { font-size: 17px; line-height: 1.5; margin: 0 0 8px; }
.contact-details a { background: rgba(255,255,255,.12); border-radius: 6px; color: #fff; font-weight: 800; padding: 12px; text-decoration: none; }
.contact-form { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; display: grid; gap: 14px; padding: 24px; }
.contact-form button { justify-self: start; }
.service-form { display: grid; gap: 16px; }
.form-block { border: 1px solid #dce2ec; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; }
.form-block legend { color: #07308e; font-weight: 900; padding: 0 6px; }
.upload-block { grid-template-columns: 1fr; }
.upload-groups { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload-groups > div { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; padding: 14px; }
.upload-groups strong { color: #062b86; display: block; font-size: 17px; margin-bottom: 10px; }
.upload-list { display: grid; gap: 10px; margin-bottom: 10px; }
.add-upload-button { background: #62a9e9; border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-weight: 900; min-height: 40px; padding: 9px 14px; width: auto; }
.add-upload-button:disabled { cursor: not-allowed; opacity: .55; }
.upload-help { background: #fff7e8; border-left: 4px solid #ff9f00; color: #334155; font-weight: 800; margin: 4px 0 0; padding: 10px 12px; }
label { color: #142033; display: grid; gap: 6px; font-size: 13px; font-weight: 800; }
input, select, textarea { border: 1px solid #cfd7e3; border-radius: 6px; color: #142033; font: inherit; min-height: 44px; padding: 10px 11px; width: 100%; }
textarea { resize: vertical; }
.wide { grid-column: 1 / -1; }
.checkline { align-items: center; display: flex; gap: 8px; }
.checkline input, .choice-grid input { width: auto; }
.choice-grid { border-top: 1px solid #edf0f4; display: grid; gap: 10px; grid-column: 1 / -1; padding-top: 12px; }
.choice-grid span { color: #142033; font-size: 21px; font-weight: 900; }
.choice-grid label { align-items: center; color: #142033; display: flex; flex-direction: row; gap: 9px; font-size: 17px; font-weight: 800; }
.choice-grid.numbers { align-items: center; grid-template-columns: repeat(10, minmax(52px, max-content)); }
.choice-grid.numbers span { grid-column: 1 / -1; }
.numbers label { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 999px; justify-content: center; min-height: 42px; min-width: 58px; padding: 8px 12px; }
.assembly-product-options { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.assembly-product-options span { grid-column: 1 / -1; }
.assembly-product-options label { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; min-height: 44px; padding: 9px 11px; }
.assembly-product-options label:has(input:checked), .numbers label:has(input:checked) { background: #eef5ff; border-color: #062b86; color: #062b86; }
.conditional { display: none; }
.conditional.open { display: grid; }
.address-search { position: relative; }
.address-results { background: #fff; border: 1px solid #cfd7e3; border-radius: 8px; box-shadow: 0 12px 28px rgba(15, 23, 42, .15); left: 0; max-height: 240px; overflow: auto; position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; }
.address-results button { background: #fff; border: 0; border-bottom: 1px solid #edf0f4; color: #142033; cursor: pointer; display: block; font: inherit; padding: 10px; text-align: left; width: 100%; }
.form-actions { display: flex; justify-content: flex-end; }
.login-card { max-width: 440px; }
.login-card form, .stack-form { display: grid; gap: 12px; }
.backend-login-card { border-top: 6px solid #062b86; }
.portal-login-card { border-top: 6px solid #ff9f00; }
.login-switch-link { border-top: 1px solid #dce2ec; margin-top: 16px; padding-top: 14px; }
.login-switch-link a { color: #062b86; font-weight: 900; text-decoration: none; }
.portal-bar { align-items: center; display: flex; justify-content: space-between; gap: 14px; }
.backend-title-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.backend-title-actions a { background: #62a9e9; border-radius: 6px; color: #fff; font-weight: 900; padding: 9px 12px; text-decoration: none; }
.backend-title-actions a:first-child { background: #ff9f00; }
.backend-title-actions form { margin: 0; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.portal-actions a { background: #ff9f00; border-radius: 6px; color: #fff; font-size: 20px; font-weight: 900; padding: 16px 18px; text-decoration: none; }
.department-launch-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.department-launch-card { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, .08); color: #2f4a6f; display: grid; overflow: hidden; text-align: center; text-decoration: none; }
.department-launch-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.department-launch-card span { border-top: 1px solid #dce2ec; font-size: 24px; font-weight: 900; padding: 16px; }
.portal-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 14px 0; }
.portal-frame { border: 1px solid #dce2ec; border-radius: 8px; min-height: 420px; width: 100%; }
.admin-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.admin-panel { background: #f8fafc; border: 1px solid #dce2ec; border-radius: 8px; padding: 16px; }
.user-admin-layout { align-items: start; grid-template-columns: minmax(360px, 1.15fr) minmax(280px, .85fr); }
.user-admin-layout .admin-panel { background: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.06); padding: 0; overflow: hidden; }
.admin-panel-title { background: #eef5fc; border-bottom: 1px solid #dce2ec; display: grid; gap: 4px; padding: 15px 18px; }
.admin-panel-title span { color: #10223f; font-size: 22px; font-weight: 900; }
.admin-panel-title small { color: #53657e; font-size: 13px; font-weight: 700; }
.user-create-form { display: grid; gap: 16px; padding: 18px; }
.user-form-fields { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-form-fields .wide { grid-column: 1 / -1; }
.permission-boxes { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-card { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; display: grid; gap: 9px; padding: 13px; }
.permission-card strong { color: #062b86; font-size: 14px; text-transform: uppercase; }
.permission-card label { align-items: center; display: flex; flex-direction: row; gap: 9px; line-height: 1.25; }
.permission-card input { flex: 0 0 auto; width: auto; }
.admin-help-text { background: #fff8e8; border-left: 4px solid #ff9f00; color: #39475c; font-size: 13px; font-weight: 700; margin: 0; padding: 10px 12px; }
.access-manager-panel { align-self: stretch; }
.panel-action-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px 0; }
.admin-secondary-action { align-items: center; background: #062b86; border-radius: 6px; color: #fff; display: inline-flex; font-weight: 900; min-height: 36px; padding: 8px 12px; text-decoration: none; }
.admin-secondary-action:hover { background: #0d3fb0; color: #fff; }
.admin-secondary-action.is-light { background: #62a9e9; }
.admin-secondary-action.is-light:hover { background: #348bd4; }
.access-manager-panel .inline-admin-form { padding: 18px 18px 0; }
.access-chip-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 18px; }
.access-chip { align-items: center; background: #f7faff; border: 1px solid #dce7f4; border-radius: 999px; display: inline-flex; gap: 9px; margin: 0; padding: 6px 7px 6px 12px; }
.access-chip span { color: #10223f; font-weight: 900; }
.access-chip .danger-button { border-radius: 999px; font-size: 12px; min-height: 28px; padding: 5px 9px; }
.portal-users-panel { grid-column: 1 / -1; }
.user-card-list { display: grid; gap: 14px; padding: 18px; }
.portal-user-card { background: #fff; border: 1px solid #dce2ec; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.05); display: grid; grid-template-columns: 1fr auto; overflow: hidden; }
.portal-user-card .user-edit-form { display: grid; gap: 16px; grid-template-columns: 220px minmax(260px, 1fr) minmax(280px, 1.25fr) auto; padding: 16px; }
.portal-user-summary { align-content: start; display: grid; gap: 5px; }
.portal-user-summary strong { color: #10223f; font-size: 19px; }
.portal-user-summary span { color: #53657e; font-weight: 700; overflow-wrap: anywhere; }
.portal-user-summary em { border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 900; justify-self: start; margin-top: 6px; padding: 5px 9px; text-transform: uppercase; }
.portal-user-summary em.is-active { background: #e7f7ed; color: #166534; }
.portal-user-summary em.is-paused { background: #fff0f0; color: #b42318; }
.user-control-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-control-grid .inline-check { align-self: end; min-height: 41px; }
.user-permission-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-card-actions { align-content: start; display: grid; gap: 9px; }
.user-card-actions button { min-width: 110px; justify-content: center; }
.portal-user-card > .delete-user-form { align-self: start; border-left: 1px solid #edf0f4; margin: 0; padding: 16px 16px 16px 0; }
.portal-user-card > .delete-user-form .danger-button { white-space: nowrap; }
.admin-user-profile-open .user-create-panel, .admin-user-profile-open .access-manager-panel { display: none; }
.admin-user-profile-open .user-admin-layout { grid-template-columns: 1fr; }
.portal-user-directory { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding: 18px; }
.portal-user-tile { background: #fff; border: 1px solid #dce2ec; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.07); color: #10223f; display: grid; gap: 8px; min-height: 245px; padding: 18px; position: relative; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.portal-user-tile:hover { border-color: #62a9e9; box-shadow: 0 14px 26px rgba(15,23,42,.12); transform: translateY(-2px); }
.portal-user-tile .user-avatar { align-items: center; background: #62a9e9; border-radius: 999px; color: #fff; display: flex; font-size: 24px; font-weight: 900; height: 54px; justify-content: center; width: 54px; }
.portal-user-tile strong { font-size: 21px; line-height: 1.1; }
.portal-user-tile small { color: #53657e; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.portal-user-tile em, .profile-identity-card em { border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 900; justify-self: start; padding: 5px 9px; text-transform: uppercase; }
.portal-user-tile em.is-active, .profile-identity-card em.is-active { background: #e7f7ed; color: #166534; }
.portal-user-tile em.is-paused, .profile-identity-card em.is-paused { background: #fff0f0; color: #b42318; }
.portal-user-tile b { color: #062b86; font-size: 15px; margin-top: 6px; }
.portal-user-tile span:not(.user-avatar) { color: #334155; font-size: 14px; font-weight: 700; line-height: 1.35; }
.portal-user-tile .user-card-meta { background: #eef5fc; border-radius: 6px; color: #10223f; font-size: 13px; padding: 8px; }
.portal-user-tile i { align-self: end; background: #ff9f00; border-radius: 6px; color: #fff; font-style: normal; font-weight: 900; justify-self: start; margin-top: 8px; padding: 8px 10px; }
.user-card-actions { align-self: end; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.user-card-actions a, .user-card-actions button { align-items: center; background: #ff9f00; border: 0; border-radius: 6px; color: #fff; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 900; min-height: 34px; padding: 8px 11px; text-decoration: none; }
.user-card-actions form { margin: 0; }
.user-card-actions button { background: #62a9e9; }
.user-card-actions .danger-button { background: #b42318; }
.user-profile-toolbar { align-items: center; border-bottom: 1px solid #dce2ec; display: flex; gap: 12px; justify-content: space-between; padding: 14px 18px; }
.user-profile-toolbar strong { color: #10223f; font-size: 20px; }
.portal-user-profile { display: grid; gap: 14px; padding: 18px; }
.profile-edit-form { align-items: start; display: grid; gap: 16px; grid-template-columns: 260px minmax(0, 1fr); }
.profile-identity-card { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 10px; display: grid; gap: 8px; padding: 18px; }
.profile-identity-card strong { color: #10223f; font-size: 24px; }
.profile-identity-card span { color: #53657e; font-weight: 800; overflow-wrap: anywhere; }
.profile-identity-card p { color: #39475c; font-size: 13px; font-weight: 700; line-height: 1.4; margin: 8px 0 0; }
.profile-control-panel { background: #fff; border: 1px solid #dce2ec; border-radius: 10px; display: grid; gap: 12px; padding: 16px; }
.profile-control-panel h3 { color: #062b86; margin: 0; }
.profile-help { background: #fff8e8; border-left: 4px solid #ff9f00; color: #39475c; font-size: 13px; font-weight: 700; margin: 0; padding: 9px 11px; }
.profile-control-panel:nth-of-type(3), .profile-actions { grid-column: 2; }
.profile-actions { display: flex; gap: 10px; justify-content: flex-end; }
.profile-actions button { min-width: 140px; justify-content: center; }
.profile-delete-form { border-top: 1px solid #edf0f4; margin: 0; padding-top: 14px; text-align: right; }
.wide-admin { grid-column: 1 / -1; }
.admin-view-dashboard { width: min(1540px, calc(100% - 28px)); }
.backend-dashboard-layout { display: grid; gap: 22px; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
.backend-sidebar { background: #26313a; border-radius: 8px; color: #fff; display: grid; gap: 10px; max-height: calc(100vh - 24px); overflow: auto; padding: 16px; position: sticky; top: 12px; }
.backend-sidebar strong { border-bottom: 1px solid rgba(255,255,255,.08); font-size: 23px; margin-bottom: 4px; padding: 0 2px 14px; }
.backend-sidebar a { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #fff; display: grid; gap: 4px; line-height: 1.2; padding: 12px; text-decoration: none; }
.backend-sidebar a b { color: #fff; font-size: 16px; }
.backend-sidebar a span { color: #bcd2ff; font-size: 12px; font-weight: 800; }
.backend-sidebar a:hover, .backend-sidebar a.sidebar-active { background: rgba(98,169,233,.18); border-color: #62a9e9; }
.backend-sidebar .sidebar-group-card { border-left: 5px solid #ff9f00; }
.backend-sidebar a.sidebar-active { box-shadow: inset 5px 0 0 #ff9f00; }
.backend-dashboard-main { min-width: 0; }
.superadmin-account-card { align-items: stretch; background: linear-gradient(135deg, #fff, #f5f9ff); border: 1px solid #dce2ec; border-left: 8px solid #ff9f00; border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.09); display: grid; gap: 18px; grid-template-columns: minmax(250px, .85fr) minmax(420px, 1.4fr); margin-bottom: 18px; padding: 22px; }
.superadmin-account-card span { color: #062b86; font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.superadmin-account-card h2 { color: #062b86; font-size: 31px; margin: 6px 0 2px; }
.superadmin-account-card p { color: #334155; font-size: 18px; font-weight: 800; margin: 0 0 8px; overflow-wrap: anywhere; }
.superadmin-account-card small { color: #53657e; display: block; font-weight: 800; line-height: 1.35; }
.superadmin-password-form { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.superadmin-password-form label { color: #10223f; font-weight: 900; }
.superadmin-password-form input { background: #fff; border: 1px solid #cfd7e3; border-radius: 7px; font: inherit; margin-top: 6px; min-height: 42px; padding: 9px 11px; width: 100%; }
.superadmin-password-form button { justify-content: center; min-height: 42px; white-space: nowrap; }
.admin-view-add_product .backend-dashboard-layout { grid-template-columns: 1fr; }
.admin-view-add_product .backend-sidebar { display: none; }
.admin-view-dashboard .backend-band { display: none; }
.admin-view-requests #dashboard-cards, .admin-view-admin_users #dashboard-cards, .admin-view-users #dashboard-cards, .admin-view-portal #dashboard-cards, .admin-view-homepage #dashboard-cards, .admin-view-add_product #dashboard-cards, .admin-view-products #dashboard-cards, .admin-view-categories #dashboard-cards, .admin-view-shipping #dashboard-cards, .admin-view-settings #dashboard-cards { display: none; }
.admin-view-requests .backend-section-nav, .admin-view-admin_users .backend-section-nav, .admin-view-users .backend-section-nav, .admin-view-portal .backend-section-nav, .admin-view-homepage .backend-section-nav, .admin-view-add_product .backend-section-nav, .admin-view-products .backend-section-nav, .admin-view-categories .backend-section-nav, .admin-view-shipping .backend-section-nav, .admin-view-settings .backend-section-nav { display: none; }
.admin-view-requests .backend-band, .admin-view-admin_users .backend-band, .admin-view-users .backend-band, .admin-view-portal .backend-band, .admin-view-homepage .backend-band, .admin-view-add_product .backend-band, .admin-view-products .backend-band, .admin-view-categories .backend-band, .admin-view-shipping .backend-band, .admin-view-settings .backend-band { display: none; }
.admin-view-requests #website-forms, .admin-view-admin_users #admin-users-manager, .admin-view-users #harvey-backend, .admin-view-portal #harvey-backend, .admin-view-homepage #homepage-content, .admin-view-add_product #catalog-add-product, .admin-view-products #products-manager, .admin-view-categories #product-categories, .admin-view-shipping #shipping-backend, .admin-view-settings #website-settings { display: grid; }
.admin-view-users #catalog-add-form { display: none; }
.admin-view-portal #harvey-backend .admin-grid > .admin-panel:not(.wide-admin) { display: none; }
.admin-view-portal #catalog-add-form { display: none; }
.admin-view-portal #harvey-backend .backend-band-head h2::after { content: " - Account Copies"; }
.admin-view-users .user-create-panel, .admin-view-users .access-manager-panel, .admin-view-users .workspace-manager-panel { display: none; }
.admin-view-users.admin-users-tool-create .user-create-panel, .admin-view-users.admin-users-tool-access .access-manager-panel, .admin-view-users.admin-users-tool-workspaces .workspace-manager-panel { display: block; }
.admin-view-users.admin-users-tool-create .portal-users-panel, .admin-view-users.admin-users-tool-access .portal-users-panel, .admin-view-users.admin-users-tool-workspaces .portal-users-panel { display: none; }
.admin-view-users.admin-users-tool-create .admin-tool-cards, .admin-view-users.admin-users-tool-access .admin-tool-cards, .admin-view-users.admin-users-tool-workspaces .admin-tool-cards, .admin-user-profile-open .admin-tool-cards { display: none; }
.admin-view-users .workspace-manager-panel .portal-documents-manager { display: none; }
.admin-view-users.admin-users-tool-workspaces .workspace-manager-panel .workspace-card-block { display: grid; }
.legacy-catalog-add-form { display: none !important; }
.admin-view-add_product #catalog-add-product { border-top: 0; margin-top: 0; padding-top: 0; }
.backend-card-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.backend-stat-card { background: linear-gradient(135deg, #62a9e9, #4f9ee2); border-radius: 8px; box-shadow: 0 9px 22px rgba(15,23,42,.1); color: #fff; display: grid; gap: 10px; min-height: 162px; padding: 20px 24px; position: relative; text-decoration: none; width: 100%; }
.backend-stat-card[data-dashboard-card="forms"] { background: linear-gradient(135deg, #062b86, #2468b8); border-left: 7px solid #ff9f00; order: -20; }
.backend-stat-card[data-dashboard-card="shipping"] { background: linear-gradient(135deg, #ff9f00, #e88900); border-left: 7px solid #062b86; order: -10; }
.backend-stat-card[draggable="true"] { cursor: grab; user-select: none; }
.backend-stat-card[draggable="true"]:active { cursor: grabbing; }
.backend-stat-card.is-dragging { opacity: .55; outline: 3px solid #ff9f00; transform: scale(.98); }
.backend-stat-card span { font-size: 20px; }
.backend-stat-card strong { align-self: end; font-size: 42px; font-weight: 400; line-height: 1; }
.backend-stat-card em { color: rgba(255,255,255,.92); font-size: 13px; font-style: normal; font-weight: 800; line-height: 1.3; }
.backend-stat-card b { display: none; }
.dashboard-drag-status { background: #e9f7ef; border: 1px solid #b9e2ca; border-radius: 8px; color: #15592c; font-weight: 900; margin-top: 12px; padding: 10px 12px; width: max-content; }
.backend-action-head { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.backend-action-head h2 { margin: 0; }
.backend-action-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.backend-action-buttons a, .backend-action-buttons button { border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-size: 18px; font-weight: 800; min-height: 0; padding: 12px 18px; text-decoration: none; }
.backend-action-buttons .add { background: #38d47a; }
.backend-action-buttons .delete { background: #ff351e; }
.backend-action-buttons .order { background: #34a9e8; }
.backend-section-nav { display: none; }
.backend-section-nav a { align-content: center; background: linear-gradient(135deg, #62a9e9, #4f9ee2); border: 0; border-left: 6px solid #ff9f00; border-radius: 8px; box-shadow: 0 6px 15px rgba(15,23,42,.08); color: #fff; display: grid; gap: 8px; font-size: 17px; font-weight: 800; min-height: 132px; justify-content: stretch; line-height: 1.2; padding: 18px; text-align: left; text-decoration: none; width: 100%; }
.backend-section-nav a b { color: #fff; font-size: 19px; }
.backend-section-nav a span { color: rgba(255,255,255,.92); font-size: 13px; font-weight: 800; }
.backend-section-nav .shipping-nav-card { border-left-color: #ff9f00; }
.backend-section-product-card { background: #fff; border: 1px solid #dce2ec; border-left: 6px solid #62a9e9; border-radius: 8px; box-shadow: 0 6px 15px rgba(15,23,42,.08); display: grid; gap: 10px; min-height: 132px; padding: 18px; }
.backend-section-product-card strong { color: #062b86; font-size: 22px; line-height: 1.1; }
.backend-section-product-card span { color: #53657e; font-size: 13px; font-weight: 800; }
.backend-section-product-card div { display: flex; flex-wrap: wrap; gap: 7px; }
.backend-section-product-card a { align-content: center; background: #62a9e9; border: 0; border-radius: 6px; box-shadow: none; color: #fff; display: inline-flex; font-size: 13px; font-weight: 900; justify-content: center; min-height: 0; padding: 8px 10px; text-align: center; width: auto; }
.product-tool-tabs { background: linear-gradient(135deg, #62a9e9, #4f9ee2); border-left: 7px solid #ff9f00; border-radius: 8px; box-shadow: 0 9px 22px rgba(15,23,42,.1); display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; padding: 16px; }
.product-tool-tabs a { align-items: center; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); border-radius: 7px; color: #fff; display: inline-flex; font-size: 17px; font-weight: 900; justify-content: center; min-height: 48px; padding: 10px 16px; text-decoration: none; }
.product-tool-tabs a.active,
.product-tool-tabs a:hover { background: #fff; color: #062b86; }
.backend-band { border-top: 1px solid #dce2ec; display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; }
.backend-band-head h2 { margin: 0; }
.backend-band-head p { color: #142033; font-weight: 700; margin: 5px 0 0; }
.admin-tool-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.admin-tool-card { background: #fff; border: 1px solid #dce2ec; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.07); color: #10223f; display: grid; gap: 8px; min-height: 150px; padding: 18px; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.admin-tool-card:hover { border-color: #62a9e9; box-shadow: 0 14px 28px rgba(15,23,42,.12); transform: translateY(-2px); }
.admin-tool-card strong { color: #062b86; font-size: 22px; line-height: 1.1; }
.admin-tool-card span { color: #53657e; font-size: 14px; font-weight: 800; line-height: 1.35; }
.admin-tool-card::after { align-self: end; background: #ff9f00; border-radius: 6px; color: #fff; content: "Open"; font-weight: 900; justify-self: start; padding: 8px 12px; }
.backend-admin-grid { align-items: start; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.backend-admin-create-panel { position: sticky; top: 12px; }
.backend-admin-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.backend-admin-card { background: #fff; border: 1px solid #dce2ec; border-left: 6px solid #62a9e9; border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.08); display: grid; gap: 14px; padding: 16px; }
.backend-admin-card:first-child { border-left-color: #ff9f00; }
.backend-admin-card-head { align-items: center; display: flex; gap: 12px; }
.backend-admin-card-head div { display: grid; gap: 3px; }
.backend-admin-card-head strong { color: #10223f; font-size: 22px; }
.backend-admin-card-head small { color: #53657e; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.backend-admin-card-head em { border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 900; justify-self: start; padding: 5px 9px; text-transform: uppercase; }
.backend-admin-edit-form { display: grid; gap: 10px; }
.backend-admin-edit-form input { min-height: 42px; }
.admin-permission-card { align-content: start; display: grid; gap: 9px; }
.admin-permission-card strong { color: #062b86; font-size: 15px; text-transform: uppercase; }
.backend-admin-delete-form { border-top: 1px solid #dce2ec; padding-top: 12px; }
.permission-grid { border: 1px solid #dce2ec; border-radius: 8px; display: grid; gap: 8px; padding: 12px; }
.permission-grid strong { color: #062b86; margin-top: 4px; }
.permission-grid label { align-items: center; display: flex; flex-direction: row; gap: 8px; }
.permission-grid input { width: auto; }
.permission-grid.compact { align-content: start; }
.access-manager { border-top: 1px solid #dce2ec; display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; }
.access-manager h3 { margin: 0; }
.inline-admin-form { align-items: end; display: grid; gap: 10px; grid-template-columns: 1fr auto; margin-bottom: 12px; }
.mini-action { background: #62a9e9; border-radius: 5px; color: #fff; display: inline-flex; font-size: 13px; font-weight: 900; padding: 7px 9px; text-decoration: none; white-space: nowrap; }
.admin-panel button.danger-button { background: #b42318; min-height: 32px; padding: 6px 10px; }
.access-table form { margin: 0; }
.backend-note { color: #334155; font-weight: 700; margin: 0 0 10px; }
.workspace-form { border: 1px solid #dce2ec; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; padding: 12px; }
.workspace-form button { align-self: end; }
.material-form { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.workspace-card-block { display: grid; gap: 14px; }
.workspace-card-block h2 { margin-bottom: 0; }
.workspace-card-block .workspace-form { background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.06); margin-bottom: 0; }
.workspace-card-block .workspace-table { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.workspace-card-block .workspace-table th { background: #eef5fc; color: #10223f; }
.shipping-workflow-grid, .shipping-copy-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 14px 0 22px; }
.shipping-workflow-grid a, .shipping-copy-grid a { background: #fff; border: 1px solid #dce2ec; border-left: 6px solid #62a9e9; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.07); color: #10223f; display: grid; gap: 8px; min-height: 132px; padding: 16px; text-decoration: none; }
.shipping-workflow-grid a:nth-child(2), .shipping-workflow-grid a:nth-child(4) { border-left-color: #ff9f00; }
.shipping-workflow-grid a:hover, .shipping-copy-grid a:hover { border-color: #62a9e9; box-shadow: 0 14px 28px rgba(15,23,42,.12); transform: translateY(-2px); }
.shipping-workflow-grid strong, .shipping-copy-grid strong { color: #062b86; font-size: 20px; line-height: 1.15; }
.shipping-workflow-grid span, .shipping-copy-grid span { color: #334155; font-weight: 800; line-height: 1.35; }
.shipping-copy-grid a { border-left-color: #ff9f00; }
.shipping-copy-grid small { align-self: end; background: #eef5fc; border-radius: 6px; color: #334155; font-weight: 900; padding: 8px; }
.dashboard-layout-form { display: grid; gap: 12px; }
.dashboard-layout-table input[type="number"] { max-width: 110px; }
.dashboard-layout-table input[type="checkbox"] { width: auto; }
.category-manager-panel { display: grid; gap: 22px; }
.seo-import-card { background: #fff; border: 1px solid #dce2ec; border-left: 7px solid #062b86; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.07); display: grid; gap: 10px; padding: 16px; }
.seo-import-card h3 { color: #062b86; font-size: 22px; margin: 0; }
.seo-import-card p { color: #334155; font-size: 14px; font-weight: 800; line-height: 1.45; margin: 0; }
.seo-import-card form { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(260px, 1fr) auto; }
.seo-import-card button { justify-self: start; }
.category-department-card-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-department-card { background: linear-gradient(135deg, #62a9e9, #4f9ee2); border-left: 7px solid #ff9f00; border-radius: 10px; box-shadow: 0 9px 22px rgba(15,23,42,.1); color: #fff; display: grid; gap: 8px; min-height: 230px; overflow: hidden; padding: 18px; position: relative; text-decoration: none; }
.category-department-card:hover { transform: translateY(-2px); }
.category-department-card img { border-radius: 7px; height: 92px; object-fit: cover; width: 100%; }
.category-department-card span { font-size: 24px; font-weight: 900; line-height: 1.1; }
.category-department-card strong { font-size: 40px; font-weight: 500; line-height: 1; }
.category-department-card em { color: rgba(255,255,255,.92); font-size: 15px; font-style: normal; font-weight: 800; }
.category-add-card { background: #f8fbff; border: 1px solid #dce7f4; border-left: 6px solid #ff9f00; border-radius: 10px; padding: 16px; }
.category-add-card h3, .category-department-heading { color: #062b86; font-size: 22px; margin: 0; }
.category-card-manager-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.category-edit-card { background: #fff; border: 1px solid #dce2ec; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.07); display: grid; gap: 12px; overflow: hidden; padding: 0 0 14px; }
.category-edit-card > img { background: #edf3f9; height: 160px; object-fit: cover; width: 100%; }
.category-card-form { display: grid; gap: 10px; padding: 0 14px; }
.category-add-card .category-card-form { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.category-card-form button { align-self: end; justify-self: start; }
.category-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.category-delete-form { border-top: 1px solid #edf0f4; display: grid; gap: 9px; margin: 0 14px; padding-top: 12px; }
.category-delete-form .danger-button { justify-self: start; }
.catalog-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.workspace-table { margin-top: 8px; }
.request-table { border-collapse: collapse; width: 100%; }
.request-table th, .request-table td { border-bottom: 1px solid #dce2ec; padding: 9px; text-align: left; }
.mailbox-table th { background: #eef4fb; color: #10223f; }
.mailbox-new-row td { background: #fff8f8; }
.mail-status { border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 900; padding: 5px 9px; text-transform: uppercase; }
.mail-status.new { background: #c1121f; color: #fff; }
.mail-status.done { background: #16803a; color: #fff; }
.reply-box { margin-top: 9px; max-width: 900px; }
.email-detail-row td { background: #fff !important; padding: 0 9px 14px; }
.email-detail-row .reply-box { margin: 12px auto 0; width: min(900px, 100%); }
.reply-box summary { color: #062b86; cursor: pointer; font-weight: 900; }
.email-preview { background: #fff; border: 1px solid #dce2ec; border-left: 5px solid #ff9f00; border-radius: 8px; margin-top: 9px; padding: 14px; }
.email-preview p { margin: 0 0 7px; }
.email-detail-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.email-detail-grid div { background: #f8fafc; border: 1px solid #dce2ec; border-radius: 6px; display: grid; gap: 3px; padding: 8px; }
.email-detail-grid .wide { grid-column: 1 / -1; }
.email-detail-grid b { color: #062b86; font-size: 12px; text-transform: uppercase; }
.email-detail-grid span { color: #111827; font-weight: 700; }
.reply-history { background: #fff; border: 1px solid #dce2ec; border-radius: 6px; margin-top: 8px; padding: 8px; }
.reply-history p { color: #334155; font-size: 13px; margin: 0 0 8px; }
.reply-history p:last-child { margin-bottom: 0; }
.reply-form { display: grid; gap: 8px; margin-top: 8px; }
.reply-form input, .reply-form textarea { border: 1px solid #cfd7e3; border-radius: 6px; font: inherit; padding: 8px; width: 100%; }
.reply-form button { justify-self: start; }
.reply-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.reply-tools button { background: #e8eef8; color: #062b86; min-height: 30px; padding: 5px 9px; }
.large-reply-text { font-size: 20px !important; }
.user-edit-form { display: grid; gap: 8px; }
.inline-check { align-items: center; display: flex; flex-direction: row; gap: 7px; }
.delete-user-form { margin-top: 8px; }
.product-builder-form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr); }
.product-builder-main, .builder-box { background: #fff; border: 1px solid #dce2ec; border-radius: 6px; box-shadow: 0 5px 16px rgba(15,23,42,.06); display: grid; gap: 10px; padding: 14px; }
.product-builder-main { align-content: start; gap: 8px; }
.product-builder-main .builder-box { box-shadow: none; margin-top: 8px; }
.product-builder-main label { gap: 4px; margin: 0; }
.product-builder-main input, .product-builder-main select { height: 40px; min-height: 40px; padding: 8px 10px; }
.product-builder-main textarea { min-height: 128px; padding: 9px 10px; }
.product-builder-main .builder-box textarea { min-height: 92px; }
.compact-booking-field { max-width: 170px; }
.compact-booking-field select { max-width: 140px; }
.product-builder-side { align-content: start; display: grid; gap: 14px; }
.builder-box h3 { color: #fff; margin: -14px -14px 4px; padding: 12px 14px; }
.builder-box.orange h3 { background: #f4a442; }
.builder-box.blue h3 { background: #5da9e9; }
.builder-box.teal h3 { background: #47c3c9; }
.builder-box.seo h3 { background: #062b86; }
.seo-help { background: #f4f8ff; border-left: 4px solid #ff9f00; color: #10223f; font-size: 13px; font-weight: 800; line-height: 1.35; margin: 0 0 2px; padding: 8px 10px; }
.builder-box.seo textarea { min-height: 88px; }
.save-target-box { background: #fff8e8; border-left: 4px solid #ff9f00; border-radius: 4px; display: grid; gap: 3px; padding: 10px 12px; }
.save-target-box strong { color: #10223f; font-size: 14px; }
.save-target-box p { color: #53657e; font-size: 13px; font-weight: 700; margin: 0; }
.section-picker { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; display: grid; gap: 10px; padding: 11px; }
.section-picker > strong { color: #062b86; font-size: 15px; }
.section-choice-group { display: grid; gap: 7px; }
.section-choice-group[hidden] { display: none; }
.section-choice-group > span { color: #53657e; font-size: 12px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.section-choice-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.section-choice-group label { align-items: center; background: #fff; border: 1px solid #cfd7e3; border-radius: 999px; color: #10223f; cursor: pointer; display: inline-flex; flex-direction: row; font-size: 12px; font-weight: 900; gap: 5px; padding: 7px 9px; }
.section-choice-group input { height: 14px; width: 14px; }
.section-choice-group label:has(input:checked) { background: #062b86; border-color: #062b86; color: #fff; }
.optional-user-copy { display: none; }
.optional-user-copy.is-visible { display: grid; }
.optional-user-copy small { color: #53657e; font-size: 12px; font-weight: 700; line-height: 1.3; }
.variation-rows { display: grid; gap: 6px; }
.variation-row { display: grid; gap: 6px; grid-template-columns: 1fr 110px auto; }
.small-blue { background: #34a9e8 !important; min-height: 30px !important; padding: 6px 10px !important; width: max-content; }
.wireframe-picker { background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; display: grid; gap: 9px; padding: 12px; }
.wireframe-picker > strong { color: #062b86; font-size: 16px; }
.wireframe-picker > span { color: #53657e; font-size: 13px; font-weight: 700; }
.wireframe-option-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wireframe-option { align-items: center; background: #fff; border: 1px solid #dce2ec; border-radius: 8px; cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto 124px 1fr; min-height: 106px; padding: 10px; }
.wireframe-option input { height: 16px; margin: 0; width: 16px; }
.wireframe-option:has(input:checked) { border-color: #ff9f00; box-shadow: 0 0 0 2px rgba(255,159,0,.18); }
.wireframe-option b { color: #10223f; font-size: 14px; line-height: 1.2; }
.access-visual { background: linear-gradient(145deg, #fbfbfc 0 52%, #e6ecf4 53% 100%); border: 1px solid #c7d3e3; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 12px rgba(15,23,42,.12); display: inline-block; height: 78px; overflow: hidden; position: relative; width: 116px; }
.access-visual:before, .access-visual:after, .access-visual i:before, .access-visual i:after { content: ""; display: block; position: absolute; }
.access-visual i:after { background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0)); height: 100%; left: 0; top: 0; width: 42%; }
.access-inside_straight:before, .access-inside_stairs:before { background: #b7c2ce; bottom: 17px; box-shadow: 12px -7px 0 #aab7c5, 24px -14px 0 #9facbc, 36px -21px 0 #94a2b2, 48px -28px 0 #8897a9; height: 8px; left: 30px; width: 22px; }
.access-inside_straight:after, .access-inside_stairs:after { background: #ff9f00; bottom: 14px; height: 38px; left: 26px; transform: skewY(-28deg); width: 4px; }
.access-inside_l_shape:before { background: #aab7c5; bottom: 16px; box-shadow: 12px 0 0 #9facbc, 24px 0 0 #94a2b2, 36px -8px 0 #8897a9, 36px -16px 0 #7f8fa2, 36px -24px 0 #76869a; height: 8px; left: 24px; width: 18px; }
.access-inside_l_shape:after { background: transparent; border-bottom: 4px solid #ff9f00; border-right: 4px solid #ff9f00; bottom: 23px; height: 29px; left: 22px; width: 53px; }
.access-inside_u_shape:before { background: #aab7c5; bottom: 15px; box-shadow: 12px 0 0 #9facbc, 24px 0 0 #94a2b2, 36px -9px 0 #8897a9, 24px -18px 0 #7f8fa2, 12px -27px 0 #76869a; height: 8px; left: 25px; width: 18px; }
.access-inside_u_shape:after { background: transparent; border: 4px solid #ff9f00; border-top: 0; bottom: 25px; height: 25px; left: 24px; width: 55px; }
.access-inside_spiral:before { background: conic-gradient(from 25deg, #71839a, #aeb9c6, #71839a, #d4dbe4, #71839a); border-radius: 999px; height: 48px; left: 35px; top: 15px; width: 48px; }
.access-inside_spiral:after { background: #f7f9fc; border-radius: 999px; height: 20px; left: 49px; top: 29px; width: 20px; }
.access-inside_spiral i:before { background: #ff9f00; height: 4px; left: 57px; top: 16px; transform: rotate(72deg); transform-origin: left center; width: 32px; }
.access-inside_split:before { background: #aab7c5; bottom: 17px; box-shadow: 13px -6px 0 #9facbc, 26px -12px 0 #94a2b2; height: 8px; left: 31px; transform: rotate(-10deg); width: 19px; }
.access-inside_split:after { background: #aab7c5; bottom: 17px; box-shadow: 13px -6px 0 #9facbc, 26px -12px 0 #94a2b2; height: 8px; right: 31px; transform: scaleX(-1) rotate(-10deg); width: 19px; }
.access-inside_split i:before { background: #ff9f00; bottom: 20px; height: 5px; left: 43px; width: 30px; }
.access-inside_narrow:before { background: #b7c2ce; bottom: 16px; box-shadow: 8px -7px 0 #aab7c5, 16px -14px 0 #9facbc, 24px -21px 0 #94a2b2; height: 8px; left: 43px; width: 14px; }
.access-inside_narrow:after { background: transparent; border-left: 4px solid #ff9f00; border-right: 4px solid #ff9f00; height: 54px; left: 36px; top: 12px; width: 40px; }
.access-front_stairs, .access-back_stairs, .access-outside_stairs { background: linear-gradient(145deg, #dcecff 0 48%, #c9e4c4 49% 100%); }
.access-front_stairs:before, .access-back_stairs:before, .access-outside_stairs:before { background: #aeb8c2; bottom: 17px; box-shadow: 12px -6px 0 #a3aeba, 24px -12px 0 #96a3b0, 36px -18px 0 #8796a5; height: 8px; left: 30px; width: 22px; }
.access-front_stairs:after { background: #fff; border: 2px solid #ff9f00; border-bottom: 0; height: 32px; left: 18px; top: 18px; width: 22px; }
.access-back_stairs:after { background: #fff; border: 2px solid #2468b8; border-bottom: 0; height: 32px; right: 18px; top: 18px; width: 22px; }
.access-outside_stairs:after { background: #ff9f00; height: 4px; left: 24px; top: 22px; transform: rotate(-20deg); width: 70px; }
.access-upstairs:before, .access-downstairs:before { background: #aeb8c2; bottom: 14px; box-shadow: 13px -8px 0 #a3aeba, 26px -16px 0 #96a3b0, 39px -24px 0 #8796a5; height: 8px; left: 27px; width: 22px; }
.access-upstairs:after, .access-downstairs:after { background: transparent; border-right: 5px solid #ff9f00; border-top: 5px solid #ff9f00; height: 14px; right: 19px; top: 18px; transform: rotate(-45deg); width: 14px; }
.access-downstairs:after { left: 20px; right: auto; top: 42px; transform: rotate(135deg); }
.access-uphill, .access-downhill { background: linear-gradient(145deg, #dcecff 0 50%, #d7e7cd 51% 100%); }
.access-uphill:before, .access-downhill:before { background: #7f8f64; height: 7px; left: 21px; top: 41px; transform: rotate(-18deg); width: 74px; }
.access-downhill:before { transform: rotate(18deg); }
.access-uphill:after, .access-downhill:after { background: #ff9f00; border-radius: 50%; height: 14px; left: 32px; top: 23px; width: 14px; }
.access-truck_access:before { background: #2468b8; border-radius: 5px; height: 27px; left: 20px; top: 31px; width: 48px; }
.access-truck_access:after { background: #174584; border-radius: 4px; height: 20px; left: 68px; top: 38px; width: 25px; }
.access-truck_access i:before, .access-truck_access i:after { background: #ff9f00; border-radius: 999px; bottom: 13px; height: 12px; width: 12px; }
.access-truck_access i:before { left: 28px; }
.access-truck_access i:after { right: 22px; }
.access-narrow_access:before { background: #dfe6ee; border-left: 8px solid #31445b; border-right: 8px solid #31445b; height: 52px; left: 34px; top: 12px; width: 48px; }
.access-narrow_access:after { background: #ff9f00; height: 5px; left: 44px; top: 38px; width: 28px; }
.wire-icon { background: #eef5fc; border: 1px solid #c9d8eb; border-radius: 6px; display: inline-block; height: 34px; overflow: hidden; position: relative; width: 42px; }
.wire-icon:before, .wire-icon:after, .wire-icon i:before, .wire-icon i:after { background: #062b86; content: ""; display: block; position: absolute; }
.wire-inside_stairs:before, .wire-outside_stairs:before, .wire-front_stairs:before, .wire-back_stairs:before, .wire-upstairs:before, .wire-downstairs:before { bottom: 7px; box-shadow: 9px -6px 0 #062b86, 18px -12px 0 #062b86; height: 3px; left: 7px; width: 9px; }
.wire-inside_stairs:after { background: transparent; border-left: 2px solid #ff9f00; border-top: 2px solid #ff9f00; height: 16px; left: 10px; top: 7px; width: 22px; }
.wire-outside_stairs, .wire-front_stairs, .wire-back_stairs { background: #fff8e8; }
.wire-outside_stairs:after, .wire-front_stairs:after, .wire-back_stairs:after { background: transparent; border-right: 2px solid #ff9f00; border-top: 2px solid #ff9f00; height: 16px; right: 8px; top: 6px; width: 22px; }
.wire-front_stairs i:before, .wire-back_stairs i:before { background: #ff9f00; bottom: 5px; height: 14px; width: 3px; }
.wire-front_stairs i:before { left: 4px; }
.wire-back_stairs i:before { right: 4px; }
.wire-upstairs:after, .wire-downstairs:after { background: transparent; border-right: 3px solid #ff9f00; border-top: 3px solid #ff9f00; height: 8px; right: 7px; top: 8px; transform: rotate(-45deg); width: 8px; }
.wire-downstairs:after { left: 8px; right: auto; top: 17px; transform: rotate(135deg); }
.wire-uphill:before, .wire-downhill:before { height: 3px; left: 7px; top: 18px; transform: rotate(-24deg); width: 28px; }
.wire-downhill:before { transform: rotate(24deg); }
.wire-uphill:after, .wire-downhill:after { background: transparent; border-right: 3px solid #ff9f00; border-top: 3px solid #ff9f00; height: 8px; right: 7px; top: 10px; transform: rotate(45deg); width: 8px; }
.wire-downhill:after { left: 7px; right: auto; transform: rotate(225deg); }
.wire-truck_access:before { border-radius: 2px; height: 13px; left: 6px; top: 10px; width: 21px; }
.wire-truck_access:after { border-radius: 2px; height: 9px; left: 27px; top: 14px; width: 8px; }
.wire-truck_access i:before, .wire-truck_access i:after { background: #ff9f00; border-radius: 999px; bottom: 6px; height: 6px; width: 6px; }
.wire-truck_access i:before { left: 10px; }
.wire-truck_access i:after { right: 7px; }
.wire-narrow_access:before, .wire-narrow_access:after { background: #062b86; height: 24px; top: 5px; width: 3px; }
.wire-narrow_access:before { left: 12px; }
.wire-narrow_access:after { right: 12px; }
.wire-narrow_access i:before { background: #ff9f00; height: 3px; left: 15px; top: 16px; width: 12px; }
.save-product-button { grid-column: 1 / -1; width: max-content; }
.product-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.product-row-actions form { margin: 0; }
.product-row-actions button { background: #62a9e9; min-height: 30px; padding: 7px 9px; }
.site-footer { background: #062b86; color: #fff; margin-top: 48px; padding: 54px 0 24px; }
.site-footer .site-width { width: min(1500px, calc(100% - 28px)); }
.footer-panel { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 42px; grid-template-columns: 1.25fr 1.05fr 1.05fr 1.15fr; padding: 44px 48px; }
.footer-panel h2 { color: #fff; font-size: 30px; margin: 0 0 20px; position: relative; }
.footer-panel h2::after { background: #ff9f00; bottom: -8px; content: ""; height: 3px; left: 0; position: absolute; width: 76px; }
.footer-panel p { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.footer-gallery { display: grid; gap: 5px; grid-template-columns: repeat(3, 1fr); }
.footer-gallery img { aspect-ratio: 1.35 / 1; height: 100%; object-fit: cover; width: 100%; }
.footer-links { display: grid; gap: 0; }
.footer-links a { border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 17px; padding: 12px 0; text-decoration: none; }
.footer-links a::before { color: #ff9f00; content: "> "; font-weight: 900; }
.footer-panel strong { color: #fff; text-transform: uppercase; }
.footer-bottom { display: flex; gap: 14px; justify-content: space-between; padding-top: 24px; }
.portal-product-page { background: #edf1f7; min-height: calc(100vh - 134px); padding: 42px min(6vw, 80px); }
.catalog-search { display: grid; grid-template-columns: 1fr 130px; margin: 0 auto 70px; max-width: 1320px; }
.catalog-search input { border: 1px solid #cfd7e3; border-radius: 8px 0 0 8px; box-shadow: 0 6px 16px rgba(15, 23, 42, .12); font-size: 23px; min-height: 70px; padding: 0 24px; }
.catalog-search button { background: #2468b8; border: 0; border-radius: 0 8px 8px 0; color: #fff; font-size: 0; position: relative; }
.catalog-search button::before { border: 5px solid #fff; border-radius: 999px; content: ""; height: 28px; left: 40px; position: absolute; top: 20px; width: 28px; }
.catalog-search button::after { background: #fff; content: ""; height: 5px; left: 70px; position: absolute; top: 51px; transform: rotate(45deg); width: 24px; }
.catalog-card-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1320px; margin: 0 auto; }
.catalog-card { background: #fff; border: 1px solid #d1d8e4; border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, .12); color: #2f4a6f; display: grid; grid-template-rows: 190px auto; min-height: 280px; overflow: hidden; text-align: center; text-decoration: none; }
.portal-pdf-strip { align-items: stretch; display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-start; margin: -44px auto 32px; max-width: 1320px; width: 100%; }
.portal-document-bar { align-items: center; background: #fff; border: 1px solid #ffbd4a; border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, .12); color: #2f4a6f; display: grid; flex: 0 0 var(--portal-doc-width, 320px); gap: 22px; grid-template-columns: 96px 1fr; min-height: var(--portal-doc-height, 126px); padding: 18px 24px; text-decoration: none; }
.portal-document-bar strong { font-size: var(--portal-pdf-button-size, 30px); font-weight: 900; line-height: 1.15; }
.pdf-doc-image { align-items: center; background: linear-gradient(145deg, #fff7e6, #ffb020); border-radius: 6px; color: #062b86; display: flex; font-size: 22px; font-weight: 900; height: 86px; justify-content: center; margin-left: 16px; position: relative; width: 70px; }
.portal-document-bar .pdf-doc-image { margin-left: 0; }
.pdf-doc-image::before { border-color: #fff #fff transparent transparent; border-style: solid; border-width: 0 18px 18px 0; content: ""; position: absolute; right: 0; top: 0; }
.pdf-doc-image.assembly { background: linear-gradient(145deg, #eef4ff, #2468b8); color: #fff; }
.pdf-doc-image.terms { background: linear-gradient(145deg, #fff0d5, #ff9f00); color: #062b86; }
.portal-documents-form { display: grid; gap: 12px; margin-bottom: 22px; }
.portal-documents-form input, .portal-documents-form select { min-width: 0; }
.homepage-settings-form h2 { border-top: 1px solid #edf0f4; color: #062b86; margin: 10px 0 0; padding-top: 16px; }
.homepage-settings-form h2:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.homepage-card-table input, .homepage-card-table select, .social-settings-table input, .social-settings-table select { min-width: 0; }
.homepage-editor-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.homepage-edit-card { background: #f8fbff; border: 1px solid #dce7f4; border-left: 6px solid #62a9e9; border-radius: 10px; box-shadow: 0 8px 20px rgba(15,23,42,.07); display: grid; gap: 12px; padding: 16px; }
.homepage-edit-card-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.homepage-edit-card-head span { background: #062b86; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 900; padding: 6px 10px; text-transform: uppercase; }
.homepage-edit-card img { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; height: 150px; object-fit: cover; width: 100%; }
.homepage-edit-card small { background: #fff7e8; border-left: 4px solid #ff9f00; color: #334155; font-weight: 800; line-height: 1.35; padding: 9px 10px; }
.remove-card-check { align-items: center; background: #fff1f1; border: 1px solid #ffd0d0; border-radius: 8px; color: #991b1b; display: flex; flex-direction: row; gap: 8px; padding: 10px; }
.remove-card-check input { width: auto; }
.terms-document-page { background: #fff; border: 1px solid #dce2ec; border-radius: 8px; margin-top: 24px; padding: 24px; }
.terms-document-page button { background: #ff9f00; border: 0; border-radius: 6px; color: #fff; cursor: pointer; font-weight: 900; padding: 10px 14px; }
.document-intro { color: #334155; font-size: 18px; font-weight: 700; max-width: 900px; }
.access-guide-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 22px 0; }
.access-guide-card { align-items: center; background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; display: grid; gap: 14px; grid-template-columns: 126px 1fr; min-height: 112px; padding: 14px; }
.access-guide-card strong { color: #10223f; font-size: 16px; }
.access-visual { background-position: center; background-size: cover; }
.access-visual:before, .access-visual:after, .access-visual i:before, .access-visual i:after { display: none; }
.access-visual.access-inside_stairs,
.access-visual.access-inside_straight { background-image: url("access/inside_straight.svg"); }
.access-visual.access-inside_l_shape { background-image: url("access/inside_l_shape.svg"); }
.access-visual.access-inside_u_shape { background-image: url("access/inside_u_shape.svg"); }
.access-visual.access-inside_spiral { background-image: url("access/inside_spiral.svg"); }
.access-visual.access-inside_split { background-image: url("access/inside_split.svg"); }
.access-visual.access-inside_narrow { background-image: url("access/inside_narrow.svg"); }
.access-visual.access-front_stairs { background-image: url("access/front_stairs.svg"); }
.access-visual.access-back_stairs { background-image: url("access/back_stairs.svg"); }
.access-visual.access-outside_stairs { background-image: url("access/outside_stairs.svg"); }
.access-visual.access-upstairs { background-image: url("access/upstairs.svg"); }
.access-visual.access-downstairs { background-image: url("access/downstairs.svg"); }
.access-visual.access-uphill { background-image: url("access/uphill.svg"); }
.access-visual.access-downhill { background-image: url("access/downhill.svg"); }
.access-visual.access-truck_access { background-image: url("access/truck_access.svg"); }
.access-visual.access-narrow_access { background-image: url("access/narrow_access.svg"); }
.product-detail-list { display: grid; gap: 26px; max-width: 1440px; margin: 0 auto; }
.portal-product-detail { background: #fff; border: 1px solid #d7dce5; border-radius: 5px; box-shadow: 0 8px 20px rgba(15,23,42,.08); display: grid; grid-template-columns: 39% 27% 34%; min-height: 310px; overflow: hidden; }
.product-slider { background: #fff; border-right: 1px solid #d7dce5; min-height: 310px; position: relative; }
.product-slider img { display: none; height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.product-slider img.active { display: block; }
.slide-prev, .slide-next { background: rgba(255,255,255,.7); border: 0; color: #fff; font-size: 48px; height: 60px; position: absolute; top: 50%; transform: translateY(-50%); width: 42px; }
.slide-prev { left: 24px; }
.slide-next { right: 24px; }
.product-detail-copy { align-content: stretch; border-right: 1px solid #d7dce5; display: grid; gap: 12px; grid-template-rows: auto 1fr auto; padding: 28px; }
.product-detail-copy h2 { align-self: start; color: #071832; font-size: 29px; margin: 0; text-align: center; }
.product-detail-copy p { color: #111827; font-size: 17px; line-height: 1.5; margin: 0; }
.product-wireframes { align-self: start; display: flex; flex-wrap: wrap; gap: 8px; }
.product-wireframe { align-items: center; background: #f8fbff; border: 1px solid #dce7f4; border-radius: 8px; display: inline-flex; gap: 8px; padding: 6px 8px; }
.product-wireframe .access-visual { flex: 0 0 76px; margin-right: -38px; transform: scale(.66); transform-origin: left center; }
.product-wireframe b { color: #10223f; font-size: 12px; line-height: 1.15; max-width: 110px; }
.product-actions { align-self: end; display: grid; gap: 8px; justify-items: start; }
.booking-button { background: #df3545; border: 0; border-radius: 5px; color: #fff; font-size: 20px; font-weight: 800; padding: 14px 22px; }
.booking-button.blue { background: #2468b8; }
.report-button, .manual-button { background: #142033; border: 0; border-radius: 5px; color: #fff; display: inline-flex; font-size: 18px; font-weight: 800; padding: 10px 14px; text-decoration: none; }
.manual-button { background: #ff9f00; }
.product-price-table { border-collapse: collapse; height: 100%; margin-right: 12px; table-layout: fixed; width: calc(100% - 12px); }
.product-price-table th { background: #fff; color: #071832; font-size: 22px; font-weight: 900; }
.product-price-table td, .product-price-table th { border-bottom: 1px solid #d7dce5; color: #111827; font-size: 18px; padding: 20px 24px; text-align: left; vertical-align: middle; }
.product-price-table th:first-child, .product-price-table td:first-child { border-right: 1px solid #d7dce5; }
.product-price-table th:last-child, .product-price-table td:last-child { color: #071832; font-weight: 900; padding-right: 28px; text-align: right; width: 135px; }
.product-price-table tbody { border-right: 7px solid #ff9f00; }
.product-price-table tr:last-child td { border-bottom: 0; }
.portal-modal[hidden] { display: none; }
.portal-modal { align-items: center; background: rgba(15,23,42,.55); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100; }
.portal-modal-card { background: #fff; border-radius: 6px; max-height: 92vh; max-width: 620px; overflow: auto; width: min(620px, 100%); }
.modal-head { align-items: center; background: #ff9f00; color: #fff; display: flex; justify-content: space-between; padding: 18px 24px; }
.modal-head h2 { font-size: 34px; margin: 0; }
.modal-head button { background: transparent; border: 0; color: #fff; font-size: 34px; }
.terms-list, .booking-form-modal, .report-form-modal { display: grid; gap: 14px; padding: 26px; }
.booking-step[hidden], .booking-form-modal[hidden] { display: none; }
.booking-form-modal { padding: 0; }
.booking-form-modal label { margin: 0 26px; }
.booking-form-modal label:first-of-type { margin-top: 26px; }
.booking-form-modal .modal-foot { margin-top: 12px; }
.booking-access-picker { border: 1px solid #dce7f4; border-radius: 8px; display: grid; gap: 10px; margin: 0 26px; padding: 12px; }
.booking-access-picker legend { color: #062b86; font-weight: 900; padding: 0 6px; }
.booking-access-picker div { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-access-picker label { align-items: center; background: #f8fbff; border: 1px solid #dce2ec; border-radius: 7px; cursor: pointer; display: grid; gap: 9px; grid-template-columns: auto 124px 1fr; margin: 0; min-height: 104px; padding: 8px; }
.booking-access-picker input { height: 16px; margin: 0; width: 16px; }
.booking-access-picker b { color: #10223f; font-size: 13px; line-height: 1.15; }
.booking-access-picker label:has(input:checked) { border-color: #ff9f00; box-shadow: 0 0 0 2px rgba(255,159,0,.18); }
.terms-list h3 { font-size: 28px; margin: 0; text-align: center; }
.terms-list p { border-left: 5px solid #ff9f00; line-height: 1.45; margin: 0; padding: 8px 10px; }
.terms-list p:nth-of-type(even) { background: #f4f8ff; border-left-color: #2468b8; }
.terms-list span { color: #062b86; font-weight: 900; }
.modal-foot { border-top: 1px solid #dce2ec; display: flex; gap: 10px; justify-content: flex-end; padding: 18px; }
.modal-foot button { background: #1478f2; border: 0; border-radius: 5px; color: #fff; font-size: 18px; padding: 10px 18px; }
.modal-foot .orange { background: #ff9f00; color: #111827; }
.booking-form-modal input, .booking-form-modal textarea, .report-form-modal input, .report-form-modal textarea { border: 1px solid #cfd7e3; border-radius: 5px; font: inherit; padding: 12px; width: 100%; }
.catalog-card img { height: 190px; object-fit: contain; padding: 18px; width: 100%; }
.catalog-card strong { align-items: center; background: linear-gradient(#fff, #f5f7fb); border-top: 1px solid #dce2ec; display: flex; font-size: 25px; justify-content: center; min-height: 72px; padding: 14px; }
.detail-page { padding-top: 0; }
.detail-topbar { align-items: center; background: #42546b; color: #fff; display: flex; gap: 14px; margin: 0 calc(min(6vw, 80px) * -1) 18px; min-height: 44px; padding: 0 min(6vw, 80px); }
.detail-topbar a { color: #fff; font-weight: 900; text-decoration: none; }
.detail-page h1 { color: #2f3f55; font-size: 34px; margin: 0 0 18px; }
.service-tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-tile { background: #fff; border: 1px solid #dce2ec; border-radius: 7px; box-shadow: 0 8px 20px rgba(15, 23, 42, .1); display: grid; grid-template-columns: 42% 1fr; min-height: 145px; overflow: hidden; }
.service-tile.featured { grid-column: span 2; }
.service-tile img { height: 100%; object-fit: cover; width: 100%; }
.service-tile div { align-content: center; display: grid; gap: 8px; padding: 16px; }
.service-tile h2 { color: #2f3f55; font-size: 20px; margin: 0; }
.service-tile p { color: #2f3f55; font-weight: 700; margin: 0; }
.service-tile strong { color: #4e973f; font-size: 31px; }
.service-tile button { background: #1682ce; border: 0; border-radius: 4px; color: #fff; font-weight: 900; justify-self: start; padding: 9px 15px; }
@media (max-width: 900px) {
    .nav-inner, .form-block, .upload-groups, .service-cards, .portal-grid, .admin-grid, .backend-dashboard-layout, .department-launch-grid, .catalog-card-grid, .service-tile-grid, .workspace-form, .material-form, .catalog-form, .about-intro, .about-feature-grid, .about-service-grid, .contact-layout, .home-work-grid, .quality-grid, .testimonial-grid, .footer-panel, .handyman-overview { grid-template-columns: 1fr; }
    .backend-card-grid, .backend-section-nav, .homepage-editor-card-grid { grid-template-columns: 1fr; }
    .superadmin-account-card, .superadmin-password-form, .profile-edit-form, .user-control-grid, .user-permission-boxes, .backend-admin-grid { grid-template-columns: 1fr; }
    .backend-admin-create-panel { position: static; }
    .profile-control-panel:nth-of-type(3), .profile-actions { grid-column: auto; }
    .superadmin-password-form button { width: 100%; }
    .backend-sidebar { position: static; }
    .site-header .top-inner { padding: 10px 14px; }
    .top-inner { display: flex; flex-wrap: wrap; min-height: auto; }
    .top-links { flex: 1 1 100%; flex-wrap: wrap; gap: 10px 16px; }
    .social-links { gap: 9px; margin-left: auto; }
    .social-links a { background-size: 24px 24px; height: 38px; width: 38px; }
    .top-actions { flex-wrap: wrap; margin-left: auto; }
    .brand { min-height: 76px; }
    .brand::after { display: none; }
    .site-header:not(.portal-only-header):not(.backend-only-header) .nav-inner { grid-template-columns: 1fr; }
    .site-header:not(.portal-only-header):not(.backend-only-header) .brand { min-height: 76px; padding: 8px 16px; width: 100%; }
    .brand-logo { max-height: 66px; max-width: 250px; }
    .main-nav nav,
    .site-header:not(.portal-only-header):not(.backend-only-header) .main-nav nav { gap: 8px 16px; justify-content: flex-start; overflow-x: auto; padding: 12px 14px 16px; scrollbar-width: thin; }
    .site-header:not(.portal-only-header):not(.backend-only-header) .main-nav nav a { flex: 0 0 auto; font-size: 16px; }
    .portal-only-header .nav-inner, .backend-only-header .nav-inner, .portal-shipping-nav, .portal-shipping-search { grid-template-columns: 1fr; }
    .portal-only-header .brand { min-height: 76px; width: 100%; }
    .portal-shipping-nav { padding: 12px 14px; }
    .welcome-note { margin-top: 12px; padding: 16px; }
    .welcome-brand-card { width: min(100% - 28px, 1280px); }
    .welcome-brand-card { text-align: center; }
    .welcome-brand-card h2 { font-size: 28px; white-space: normal; }
    .welcome-brand-card p { font-size: 16px; margin-top: 0; text-align: left; }
    .welcome-note span { font-size: 13px; }
    .welcome-note h2 { font-size: 22px; line-height: 1.2; }
    .welcome-note p { font-size: 14px; }
    .home-service-slider { border-radius: 0; height: 420px; margin-top: 12px; width: 100%; }
    .home-service-slide img { object-position: center top; }
    .home-service-slide span { bottom: 22px; left: 16px; min-height: 58px; padding: 13px 16px; right: 16px; }
    .home-service-slide b { font-size: 28px; }
    .slider-booking-card { align-content: start; border-bottom: 6px solid #ff9f00; border-right: 0; bottom: auto; left: 14px; max-width: none; padding: 16px; right: 14px; top: 14px; width: auto; }
    .slider-booking-card h2 { font-size: 21px; }
    .slider-booking-card p { font-size: 14px; }
    .home-slider-dots { bottom: 10px; justify-content: center; left: 0; right: 0; }
    .home-section { margin-top: 24px; padding: 24px 16px; }
    .category-add-card .category-card-form, .category-card-manager-grid, .category-department-card-grid, .seo-import-card form { grid-template-columns: 1fr; }
    .home-work-card { grid-template-rows: 220px 1fr; }
    .form-shell, .content-page, .login-card { margin-top: 14px; padding: 16px; }
    .service-intro-note { font-size: 16px; padding: 14px; }
    .handyman-copy { padding: 20px; }
    .handyman-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .handyman-slider { aspect-ratio: 16 / 10; min-height: 0; }
    .choice-grid.numbers { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
    .form-actions button, .service-form button { justify-content: center; min-height: 48px; width: 100%; }
    .footer-panel { padding: 24px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .portal-pdf-strip { grid-template-columns: 1fr; margin-top: 0; }
    .email-detail-grid { grid-template-columns: 1fr; }
    .catalog-search { grid-template-columns: 1fr 76px; margin-bottom: 28px; }
    .service-tile, .service-tile.featured { grid-column: auto; grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .site-width { width: min(100% - 20px, 1180px); }
    .top-links .staff-attendance-button, .invoice-button, .quote-button { justify-content: center; min-height: 44px; padding: 10px 14px; }
    .form-shell { border-left: 0; border-right: 0; border-radius: 0; margin-left: -10px; margin-right: -10px; padding: 14px; }
    .form-shell h1 { font-size: 30px; line-height: 1.1; }
    .handyman-copy { gap: 12px; padding: 17px; }
    .handyman-copy h2 { font-size: 27px; }
    .handyman-copy p { font-size: 17px; line-height: 1.45; }
    .handyman-service-list { grid-template-columns: 1fr 1fr; }
    .handyman-service-list span { font-size: 14px; padding: 9px 7px; }
    .handyman-slide figcaption { padding: 58px 66px 18px; }
    .handyman-slide figcaption strong { font-size: 20px; }
    .choice-grid.numbers { grid-template-columns: repeat(3, minmax(54px, 1fr)); }
    .assembly-product-options { grid-template-columns: 1fr 1fr; }
    .upload-groups > div { padding: 12px; }
    input, select, textarea { font-size: 16px; }
}

@media (max-width: 390px) {
    .assembly-product-options, .handyman-service-list { grid-template-columns: 1fr; }
    .top-actions, .top-actions a { width: 100%; }
}