/* ======================================== */
/* GLOBAL: CSS VARIABLES & RESET           */
/* ======================================== */

:root {
    --color-primary:       #63101D;
    --color-primary-dark:  #4a0c15;
    --color-primary-hover: #7d1525;
    --color-accent:        #222222;
    --color-dark:          #1a1a1a;
    --color-text:          #222222;
    --color-text-mid:      #444444;
    --color-text-light:    #666666;
    --color-bg:            #ffffff;
    --color-bg-alt:        #f6f6f6;
    --color-border:        #e2e2e2;
    --color-white:         #ffffff;
    --font-heading:        'Montserrat', sans-serif;
    --font-body:           'Open Sans', sans-serif;
    --transition-base:     0.25s ease;
    --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:           0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg:           0 12px 40px rgba(0, 0, 0, 0.18);
    --radius:              6px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* ======================================== */
/* GLOBAL: TYPOGRAPHY & BASE               */
/* ======================================== */

body {
    font-family:    var(--font-body);
    font-size:      18px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.7;
    color:          var(--color-text);
    background:     var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family:    var(--font-heading);
    font-size:      46px;
    font-weight:    900;
    letter-spacing: -0.5px;
    line-height:    1.15;
    color:          var(--color-white);
}

h2 {
    font-family:    var(--font-heading);
    font-size:      38px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.2;
    color:          var(--color-accent);
}

h3 {
    font-family:    var(--font-heading);
    font-size:      20px;
    font-weight:    700;
    letter-spacing: normal;
    line-height:    1.35;
    color:          var(--color-accent);
}

h4 {
    font-family:    var(--font-heading);
    font-size:      16px;
    font-weight:    700;
    letter-spacing: 2px;
    line-height:    1.4;
    color:          var(--color-white);
    text-transform: uppercase;
}

p {
    font-family:    var(--font-body);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.75;
    color:          var(--color-text-mid);
}

a {
    font-family:    inherit;
    font-size:      inherit;
    font-weight:    inherit;
    letter-spacing: normal;
    line-height:    inherit;
    color:          var(--color-primary);
    text-decoration: none;
    transition:     color var(--transition-base);
}

a:hover {
    color: var(--color-primary-hover);
}

img {
    display:   block;
    max-width: 100%;
    height:    auto;
}

ul {
    list-style: none;
}

address {
    font-style: normal;
}

/* ======================================== */
/* GLOBAL: CONTAINER                       */
/* ======================================== */

.container {
    max-width: 1300px;
    margin:    0 auto;
    padding:   0 20px;
}

/* ======================================== */
/* GLOBAL: UTILITY CLASSES                 */
/* ======================================== */

.text-primary {
    color: var(--color-primary);
}

.section-label {
    font-family:    var(--font-heading);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 3px;
    line-height:    1.4;
    color:          var(--color-primary);
    text-transform: uppercase;
    display:        block;
    margin-bottom:  10px;
}

/* ======================================== */
/* GLOBAL: BUTTONS                         */
/* ======================================== */

.btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    font-family:    var(--font-heading);
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 1.5px;
    line-height:    1;
    padding:        15px 34px;
    border-radius:  var(--radius);
    border:         2px solid transparent;
    cursor:         pointer;
    text-transform: uppercase;
    transition:     background-color var(--transition-base),
                    border-color var(--transition-base),
                    color var(--transition-base),
                    transform 0.15s ease;
    white-space:    nowrap;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    color:            var(--color-white);
    font-size:        13px;
    font-weight:      700;
    letter-spacing:   1.5px;
    line-height:      1;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color:     var(--color-primary-dark);
    color:            var(--color-white);
}

.btn-outline-hero {
    background-color: transparent;
    border-color:     rgba(255, 255, 255, 0.8);
    color:            var(--color-white);
    font-size:        13px;
    font-weight:      700;
    letter-spacing:   1.5px;
    line-height:      1;
}

.btn-outline-hero:hover {
    background-color: var(--color-white);
    border-color:     var(--color-white);
    color:            var(--color-primary);
}

.btn-outline-white-sm {
    display:          inline-flex;
    align-items:      center;
    font-family:      var(--font-heading);
    font-size:        12px;
    font-weight:      700;
    letter-spacing:   1.5px;
    line-height:      1;
    padding:          10px 22px;
    border-radius:    var(--radius);
    border:           2px solid rgba(255, 255, 255, 0.85);
    background:       transparent;
    color:            var(--color-white);
    text-transform:   uppercase;
    cursor:           pointer;
    transition:       background-color var(--transition-base), color var(--transition-base);
    white-space:      nowrap;
}

.btn-outline-white-sm:hover {
    background-color: var(--color-white);
    color:            var(--color-primary);
}

.btn-cta-white {
    background-color: var(--color-white);
    border-color:     var(--color-white);
    color:            var(--color-primary);
    font-size:        13px;
    font-weight:      800;
    letter-spacing:   2px;
    line-height:      1;
    padding:          18px 42px;
    flex-shrink:      0;
}

.btn-cta-white:hover {
    background-color: var(--color-primary-dark);
    border-color:     var(--color-primary-dark);
    color:            var(--color-white);
}

/* ======================================== */
/* GLOBAL: FADE-IN-UP ANIMATIONS           */
/* ======================================== */

.fade-in-up {
    opacity:          0;
    transform:        translateY(35px);
    transition:       opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                      transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.15s;
}

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

/* ======================================== */
/* HEADER SECTION                          */
/* ======================================== */

/* Top Contact Bar — 40px height, full-width */
.top-bar {
    width:            100%;
    height:           40px;
    background-color: var(--color-accent);
    display:          flex;
    align-items:      center;
    overflow:         hidden;
}

.top-bar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

.top-bar-left {
    display:     flex;
    align-items: center;
    gap:         24px;
}

.top-bar-right {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.top-bar-link {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 0.3px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.85);
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    transition:     color var(--transition-base);
}

.top-bar-link:hover {
    color: var(--color-white);
}

.top-bar-address {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    400;
    letter-spacing: 0.3px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.65);
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
}

.top-bar-social {
    font-family:    inherit;
    font-size:      13px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.8);
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    width:          30px;
    height:         30px;
    border-radius:  50%;
    border:         1px solid rgba(255, 255, 255, 0.25);
    transition:     background-color var(--transition-base), color var(--transition-base);
}

.top-bar-social:hover {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    color:            var(--color-white);
}

/* Main Header — 120px height, sticky */
.main-header {
    width:            100%;
    height:           120px;
    background-color: var(--color-white);
    position:         sticky;
    top:              0;
    z-index:          1000;
    box-shadow:       0 2px 6px rgba(0, 0, 0, 0.06);
    transition:       box-shadow 0.3s ease;
}

.main-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
}

.header-inner {
    display:     flex;
    align-items: center;
    height:      100%;
    gap:         20px;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    height:    72px;
    width:     auto;
    max-height: 72px;
    display:   block;
}

/* Main Desktop Navigation */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main-nav ul {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.main-nav ul li a {
    font-family:    var(--font-heading);
    font-size:      14px;
    font-weight:    600;
    letter-spacing: 0.5px;
    line-height:    1;
    color:          var(--color-accent);
    padding:        10px 16px;
    border-radius:  var(--radius);
    position:       relative;
    transition:     color var(--transition-base), background-color var(--transition-base);
    display:        inline-block;
}

.main-nav ul li a::after {
    content:          '';
    position:         absolute;
    bottom:           4px;
    left:             16px;
    right:            16px;
    height:           2px;
    background-color: var(--color-primary);
    transform:        scaleX(0);
    transition:       transform 0.25s ease;
    border-radius:    2px;
}

.main-nav ul li a:hover,
.main-nav ul li a.nav-active {
    color: var(--color-primary);
}

.main-nav ul li a:hover::after,
.main-nav ul li a.nav-active::after {
    transform: scaleX(1);
}

/* Hamburger Button */
.hamburger {
    display:          none;
    flex-direction:   column;
    justify-content:  center;
    align-items:      center;
    gap:              5px;
    width:            42px;
    height:           42px;
    background:       none;
    border:           2px solid var(--color-border);
    border-radius:    var(--radius);
    cursor:           pointer;
    padding:          0;
    flex-shrink:      0;
    margin-left:      auto;
    transition:       border-color var(--transition-base);
}

.hamburger:hover {
    border-color: var(--color-primary);
}

.hamburger span {
    display:          block;
    width:            20px;
    height:           2px;
    background-color: var(--color-accent);
    border-radius:    2px;
    transform-origin: center;
    transition:       transform 0.3s ease, opacity 0.3s ease, background-color var(--transition-base);
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: var(--color-primary);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: var(--color-primary);
}

/* Mobile Nav Dropdown */
.mobile-nav {
    display:          none;
    position:         fixed;
    top:              74px;
    left:             0;
    right:            0;
    background-color: var(--color-white);
    border-top:       3px solid var(--color-primary);
    box-shadow:       var(--shadow-md);
    z-index:          999;
    max-height:       0;
    overflow:         hidden;
    transition:       max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.open {
    max-height: 400px;
}

.mobile-nav ul {
    padding: 16px 0 20px;
}

.mobile-nav ul li a {
    font-family:     var(--font-heading);
    font-size:       16px;
    font-weight:     600;
    letter-spacing:  0.5px;
    line-height:     1;
    color:           var(--color-accent);
    display:         block;
    padding:         14px 24px;
    border-left:     3px solid transparent;
    transition:      color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.mobile-nav ul li a:hover {
    color:            var(--color-primary);
    border-left-color: var(--color-primary);
    background-color: rgba(99, 16, 29, 0.04);
}

/* ======================================== */
/* HERO SECTION                            */
/* ======================================== */

.hero-section {
    width:               100%;
    min-height:          750px;
    position:            relative;
    background-image:    url('images/hero1.jpg');
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    display:             flex;
    align-items:         center;
    overflow:            hidden;
}

.hero-overlay {
    position: absolute;
    inset:    0;
    /* Left-edge vignette only — lets the photo colors pop on the right */
    background: linear-gradient(
                    to right,
                    rgba(10, 2, 4, 0.68) 0%,
                    rgba(10, 2, 4, 0.44) 42%,
                    rgba(10, 2, 4, 0.10) 75%,
                    transparent 100%
                );
    z-index: 1;
}

.hero-content {
    position:       relative;
    z-index:        2;
    max-width:      900px;
    padding-top:    70px;
    padding-bottom: 100px;
}

.hero-eyebrow {
    font-family:    var(--font-heading);
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 2.5px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    margin-bottom:  20px;
    text-shadow:    0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero-eyebrow strong {
    color: var(--color-white);
}

/* Override h1 inside hero for text-shadow readability */
.hero-content h1 {
    font-size:   46px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65),
                 0 4px 24px rgba(0, 0, 0, 0.40);
}

.hero-sub {
    font-family:    var(--font-body);
    font-size:      17px;
    font-weight:    600;
    letter-spacing: 0.2px;
    line-height:    1.7;
    color:          rgba(255, 255, 255, 0.92);
    margin-top:     20px;
    margin-bottom:  36px;
    max-width:      600px;
    text-shadow:    0 1px 8px rgba(0, 0, 0, 0.55);
}

.hero-actions {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}

/* Hero → Welcome accent strip separator */
.hero-accent-strip {
    width:      100%;
    background: var(--color-primary);
    height:     46px;
    display:    flex;
    align-items: center;
    overflow:   hidden;
    border-top:    3px solid var(--color-primary-dark);
    border-bottom: 3px solid var(--color-primary-dark);
}

.hero-accent-track {
    display:      flex;
    align-items:  center;
    gap:          28px;
    white-space:  nowrap;
    padding:      0 40px;
    animation:    accentScroll 28s linear infinite;
}

.hero-accent-track span {
    font-family:    var(--font-heading);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 2.5px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
}

.hero-accent-track .accent-bull {
    font-size:   16px;
    font-weight: 400;
    letter-spacing: 0;
    color:        rgba(255, 255, 255, 0.30);
    flex-shrink:  0;
}

@keyframes accentScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ======================================== */
/* SECTION 1: WELCOME SECTION              */
/* ======================================== */

.welcome-section {
    width:      100%;
    background: var(--color-bg);
    padding:    90px 0;
}

.welcome-inner {
    display:     flex;
    align-items: flex-start;
    gap:         70px;
}

.welcome-text {
    flex: 0 0 52%;
    max-width: 52%;
}

.welcome-text h2 {
    font-family:    var(--font-heading);
    font-size:      40px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.15;
    color:          var(--color-accent);
    margin-bottom:  24px;
}

.welcome-copy {
    font-family:    var(--font-body);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.8;
    color:          var(--color-text-mid);
    margin-bottom:  18px;
}

.welcome-text .btn {
    margin-top: 10px;
}

/* Printing color bar — decorative column divider */
.welcome-colorbar {
    flex-shrink:   0;
    width:         38px;
    align-self:    stretch;
    border-radius: 4px;
    overflow:      hidden;
    opacity:       0.82;
    box-shadow:    0 2px 18px rgba(0, 0, 0, 0.18),
                   0 0 0 1px rgba(0, 0, 0, 0.06);
    transition:    opacity var(--transition-base), box-shadow var(--transition-base);
}

.welcome-colorbar:hover {
    opacity:    1;
    box-shadow: 0 4px 28px rgba(99, 16, 29, 0.22),
                0 0 0 1px rgba(99, 16, 29, 0.15);
}

.welcome-colorbar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
}

/* Feature Cards */
.welcome-features {
    flex: 1;
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.feature-card {
    display:          flex;
    align-items:      flex-start;
    gap:              18px;
    padding:          26px 24px;
    border-left:      3px solid transparent;
    transition:       border-color var(--transition-base), background-color var(--transition-base);
    border-radius:    0 var(--radius) var(--radius) 0;
}

.feature-card:hover {
    border-left-color: var(--color-primary);
    background-color:  rgba(99, 16, 29, 0.03);
}

.feature-icon-wrap {
    flex-shrink:      0;
    width:            54px;
    height:           54px;
    background-color: rgba(99, 16, 29, 0.08);
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--color-primary);
    transition:       background-color var(--transition-base);
}

.feature-card:hover .feature-icon-wrap {
    background-color: var(--color-primary);
    color:            var(--color-white);
}

.feature-text h3 {
    font-family:    var(--font-heading);
    font-size:      17px;
    font-weight:    700;
    letter-spacing: normal;
    line-height:    1.3;
    color:          var(--color-accent);
    margin-bottom:  6px;
}

.feature-text p {
    font-family:    var(--font-body);
    font-size:      15px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.65;
    color:          var(--color-text-light);
}

/* ======================================== */
/* SECTION 2: PRINT CATEGORIES SECTION     */
/* ======================================== */

.categories-section {
    width:      100%;
    background: #111111;
    padding:    80px 0 70px;
}

.categories-header {
    text-align:    center;
    margin-bottom: 56px;
}

.categories-header h2 {
    font-family:    var(--font-heading);
    font-size:      38px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.2;
    color:          var(--color-white);
    margin-bottom:  14px;
}

.categories-header .section-label {
    font-family:    var(--font-heading);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 3px;
    line-height:    1.4;
    color:          rgba(255, 255, 255, 0.40);
    text-transform: uppercase;
    display:        block;
    margin-bottom:  10px;
}

.categories-sub {
    font-family:    var(--font-body);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.65;
    color:          rgba(255, 255, 255, 0.45);
    max-width:      560px;
    margin:         0 auto;
}

/* 5-column card grid */
.categories-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   1px;
    background:            rgba(255, 255, 255, 0.07);
    border:                1px solid rgba(255, 255, 255, 0.07);
    border-radius:         var(--radius);
    overflow:              hidden;
    margin-bottom:         42px;
}

/* Individual card */
.cat-card {
    background:     #1a1a1a;
    padding:        40px 28px 36px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    position:       relative;
    border-top:     3px solid transparent;
    transition:     border-color var(--transition-base),
                    background-color var(--transition-base);
}

.cat-card:hover {
    border-top-color: var(--color-primary);
    background-color: #202020;
}

/* Large faint number behind icon */
.cat-num {
    font-family:    var(--font-heading);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 2px;
    line-height:    1;
    color:          var(--color-primary);
    display:        block;
    margin-bottom:  20px;
    opacity:        0.75;
}

/* Icon circle */
.cat-icon {
    width:            76px;
    height:           76px;
    border-radius:    50%;
    border:           1px solid rgba(255, 255, 255, 0.12);
    background:       rgba(255, 255, 255, 0.04);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            rgba(255, 255, 255, 0.55);
    margin-bottom:    24px;
    flex-shrink:      0;
    transition:       border-color var(--transition-base),
                      background-color var(--transition-base),
                      color var(--transition-base);
}

.cat-card:hover .cat-icon {
    border-color:     rgba(99, 16, 29, 0.6);
    background-color: rgba(99, 16, 29, 0.12);
    color:            rgba(255, 255, 255, 0.85);
}

/* Card heading */
.cat-card h3 {
    font-family:    var(--font-heading);
    font-size:      16px;
    font-weight:    800;
    letter-spacing: 0.3px;
    line-height:    1.3;
    color:          var(--color-white);
    margin-bottom:  14px;
    text-transform: uppercase;
}

/* Card description */
.cat-card p {
    font-family:    var(--font-body);
    font-size:      14px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.7;
    color:          rgba(255, 255, 255, 0.45);
    transition:     color var(--transition-base);
}

.cat-card:hover p {
    color: rgba(255, 255, 255, 0.65);
}

/* Section CTA link */
.categories-cta {
    text-align: center;
}

.btn-outline-light {
    display:          inline-flex;
    align-items:      center;
    font-family:      var(--font-heading);
    font-size:        13px;
    font-weight:      700;
    letter-spacing:   1.5px;
    line-height:      1;
    padding:          14px 36px;
    border-radius:    var(--radius);
    border:           2px solid rgba(255, 255, 255, 0.25);
    background:       transparent;
    color:            rgba(255, 255, 255, 0.65);
    text-transform:   uppercase;
    transition:       border-color var(--transition-base),
                      color var(--transition-base),
                      background-color var(--transition-base);
    cursor:           pointer;
}

.btn-outline-light:hover {
    border-color:     var(--color-white);
    color:            var(--color-white);
    background-color: rgba(255, 255, 255, 0.06);
}

/* Shared section header (used outside categories too) */
.section-header {
    text-align:    center;
    margin-bottom: 52px;
}

.section-header h2 {
    font-family:    var(--font-heading);
    font-size:      38px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.2;
    color:          var(--color-accent);
    margin-bottom:  14px;
}

.section-sub {
    font-family:    var(--font-body);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.65;
    color:          var(--color-text-light);
    max-width:      560px;
    margin:         0 auto;
}

/* ======================================== */
/* SECTION 3: PRINT GALLERY ROW            */
/* ======================================== */

.gallery-section {
    width:         100%;
    background:    var(--color-primary);
    line-height:   0;
    border-top:    6px solid var(--color-primary);
    border-bottom: 6px solid var(--color-primary);
}

.gallery-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   4px;
    width:                 100%;
    height:                340px;
    background:            var(--color-primary);
}

.gallery-item {
    position:   relative;
    overflow:   hidden;
    height:     340px;
}

.gallery-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item-overlay {
    display: none;
}

/* ======================================== */
/* SECTION 4: REVIEWS SECTION              */
/* ======================================== */

.reviews-section {
    width:      100%;
    background: var(--color-bg-alt);
    padding:    90px 0 100px;
}

.reviews-header {
    text-align:    center;
    margin-bottom: 56px;
}

.reviews-header h2 {
    font-family:    var(--font-heading);
    font-size:      38px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.2;
    color:          var(--color-accent);
    margin-top:     10px;
}

.reviews-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   28px;
}

/* Individual review card */
.review-card {
    background:   var(--color-white);
    border-radius: var(--radius);
    padding:      36px 36px 30px;
    position:     relative;
    border-left:  4px solid var(--color-primary);
    box-shadow:   var(--shadow-sm);
    display:      flex;
    flex-direction: column;
    gap:          16px;
    transition:   box-shadow var(--transition-base), transform var(--transition-base);
}

.review-card:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-3px);
}

/* Large decorative quote mark */
.review-card::before {
    content:     '\201C';
    font-family: Georgia, serif;
    font-size:   110px;
    font-weight: 700;
    line-height: 0.75;
    color:       var(--color-primary);
    opacity:     0.10;
    position:    absolute;
    top:         24px;
    left:        28px;
    pointer-events: none;
    user-select: none;
}

/* 5-star row */
.review-stars {
    display:     flex;
    align-items: center;
    gap:         3px;
}

/* Review body text */
.review-text {
    font-family:    var(--font-body);
    font-size:      15px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.8;
    color:          var(--color-text-mid);
    font-style:     italic;
    flex:           1;
    position:       relative;
    z-index:        1;
}

/* Reviewer attribution */
.review-author {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding-top:    16px;
    border-top:     1px solid var(--color-border);
}

.review-name {
    font-family:    var(--font-heading);
    font-size:      15px;
    font-weight:    700;
    letter-spacing: 0.3px;
    line-height:    1;
    color:          var(--color-accent);
    display:        block;
}

.review-title {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    400;
    letter-spacing: 0.2px;
    line-height:    1;
    color:          var(--color-text-light);
    display:        block;
}

/* ======================================== */
/* SECTION 5: CTA BANNER SECTION           */
/* ======================================== */

.cta-banner {
    width:      100%;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    padding:    60px 0;
}

.cta-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
    flex-wrap:       wrap;
}

.cta-eyebrow {
    font-family:    var(--font-heading);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 3px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin-bottom:  10px;
}

.cta-text h2 {
    font-family:    var(--font-heading);
    font-size:      42px;
    font-weight:    900;
    letter-spacing: -0.5px;
    line-height:    1.1;
    color:          var(--color-white);
}

/* ======================================== */
/* SECTION 4: FAT FOOTER SECTION           */
/* ======================================== */

.fat-footer {
    width:      100%;
    background: #1a1a1a;
    padding:    70px 0 50px;
}

.footer-inner {
    display:               grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap:                   50px;
}

.footer-col h4 {
    font-family:     var(--font-heading);
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  3px;
    line-height:     1;
    color:           var(--color-white);
    text-transform:  uppercase;
    padding-bottom:  14px;
    border-bottom:   2px solid var(--color-primary);
    margin-bottom:   26px;
    display:         inline-block;
}

/* ======================================== */
/* SUB-PAGE: TITLE BAR                     */
/* ======================================== */

.subpage-title-bar {
    width:               100%;
    min-height:          300px;
    position:            relative;
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    display:             flex;
    align-items:         flex-end;
    padding-bottom:      0;
}

.subpage-title-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
                    to right,
                    rgba(10, 2, 4, 0.78) 0%,
                    rgba(10, 2, 4, 0.52) 55%,
                    rgba(10, 2, 4, 0.28) 100%
                );
    z-index: 1;
}

.subpage-title-content {
    position:       relative;
    z-index:        2;
    padding-top:    60px;
    padding-bottom: 50px;
}

.breadcrumb {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 14px;
}

.breadcrumb a {
    font-family:    var(--font-heading);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    transition:     color var(--transition-base);
}

.breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.85);
}

.breadcrumb span {
    font-family:    var(--font-heading);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

.subpage-title {
    font-family:    var(--font-heading);
    font-size:      54px;
    font-weight:    900;
    letter-spacing: -1px;
    line-height:    1;
    color:          var(--color-white);
    text-shadow:    0 2px 12px rgba(0, 0, 0, 0.5);
    margin-bottom:  14px;
}

.subpage-tagline {
    font-family:    var(--font-heading);
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 2.5px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
}

/* ======================================== */
/* ABOUT PAGE: OUR HISTORY SECTION         */
/* ======================================== */

.about-history {
    width:      100%;
    background: var(--color-bg);
    padding:    90px 0;
}

.about-history-inner {
    display:     flex;
    align-items: flex-start;
    gap:         64px;
}

.about-content {
    flex: 0 0 56%;
    max-width: 56%;
}

.about-content h2 {
    font-family:    var(--font-heading);
    font-size:      40px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.15;
    color:          var(--color-accent);
    margin-bottom:  26px;
}

.about-intro {
    font-family:    var(--font-heading);
    font-size:      20px;
    font-weight:    700;
    letter-spacing: normal;
    line-height:    1.4;
    color:          var(--color-accent);
    margin-bottom:  22px;
}

.about-body {
    font-family:    var(--font-body);
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.85;
    color:          var(--color-text-mid);
    margin-bottom:  18px;
}

/* Side image stack */
.about-images {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            18px;
    align-self:     flex-start;
}

.about-images img {
    width:      100%;
    height:     auto;
    display:    block;
    border:     none;
    box-shadow: none;
    outline:    none;
}

/* ======================================== */
/* ABOUT PAGE: WHO WE SERVE SECTION        */
/* ======================================== */

.about-clients {
    width:      100%;
    background: var(--color-bg-alt);
    padding:    80px 0 90px;
}

/* Industry tag grid */
.industries-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   10px;
    margin-bottom:         60px;
}

.industry-tag {
    background:     var(--color-white);
    border:         1px solid var(--color-border);
    border-top:     3px solid var(--color-primary);
    border-radius:  var(--radius);
    padding:        18px 14px 16px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    text-align:     center;
    font-family:    var(--font-heading);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.3px;
    line-height:    1.3;
    color:          var(--color-accent);
    transition:     border-top-color var(--transition-base),
                    background-color var(--transition-base),
                    color var(--transition-base),
                    box-shadow var(--transition-base);
    cursor:         default;
}

.industry-tag svg {
    color:      var(--color-primary);
    flex-shrink: 0;
    transition: color var(--transition-base);
}

.industry-tag:hover {
    background-color:  var(--color-primary);
    border-top-color:  var(--color-primary-dark);
    color:             var(--color-white);
    box-shadow:        var(--shadow-sm);
}

.industry-tag:hover svg {
    color: rgba(255, 255, 255, 0.85);
}

/* Product categories list */
.about-products {
    background:    var(--color-white);
    border-radius: var(--radius);
    padding:       44px 48px;
    border-left:   4px solid var(--color-primary);
    box-shadow:    var(--shadow-sm);
}

.about-products h3 {
    font-family:    var(--font-heading);
    font-size:      22px;
    font-weight:    800;
    letter-spacing: normal;
    line-height:    1.2;
    color:          var(--color-accent);
    margin-bottom:  8px;
}

.about-products-sub {
    font-family:    var(--font-body);
    font-size:      16px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.6;
    color:          var(--color-text-light);
    margin-bottom:  28px;
}

.products-list {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px 30px;
    list-style:            none;
}

.products-list li {
    font-family:    var(--font-body);
    font-size:      16px;
    font-weight:    600;
    letter-spacing: normal;
    line-height:    1.3;
    color:          var(--color-accent);
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.products-list li svg {
    color:       var(--color-primary);
    flex-shrink: 0;
}

/* ======================================== */
/* Footer Contact */
/* ======================================== */

/* Footer Contact */
.footer-logo {
    margin-bottom: 22px;
}

.footer-logo img {
    filter:        brightness(0) invert(1);
    opacity:       0.9;
    height:        52px;
    width:         auto;
    max-height:    52px;
}

.footer-contact address p {
    font-family:    var(--font-body);
    font-size:      15px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.8;
    color:          rgba(255, 255, 255, 0.65);
    margin-bottom:  4px;
}

.footer-contact address p strong {
    color:       rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.footer-contact address a {
    font-family:    var(--font-body);
    font-size:      15px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.7);
    transition:     color var(--transition-base);
}

.footer-contact address a:hover {
    color: var(--color-white);
}

.footer-social {
    display:    flex;
    gap:        10px;
    margin-top: 20px;
}

.social-icon {
    font-family:      inherit;
    font-size:        14px;
    font-weight:      400;
    letter-spacing:   normal;
    line-height:      1;
    color:            rgba(255, 255, 255, 0.75);
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            38px;
    height:           38px;
    border-radius:    50%;
    border:           1px solid rgba(255, 255, 255, 0.2);
    transition:       background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.social-icon:hover {
    background-color: var(--color-primary);
    border-color:     var(--color-primary);
    color:            var(--color-white);
}

/* Footer Map */
.map-wrapper {
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid rgba(255, 255, 255, 0.1);
}

.map-wrapper iframe {
    display: block;
    filter:  grayscale(20%);
}

/* Footer Hours */
.hours-table {
    width:           100%;
    border-collapse: collapse;
}

.hours-table td {
    font-family:    var(--font-body);
    font-size:      15px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.7);
    padding:        10px 0;
    border-bottom:  1px solid rgba(255, 255, 255, 0.07);
}

.hours-table td:first-child {
    font-weight: 600;
    color:       rgba(255, 255, 255, 0.85);
    width:       55%;
}

.hours-table td:last-child {
    text-align: right;
}

.hours-table tr.closed td {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.hours-table tr:last-child td {
    border-bottom: none;
}

/* ======================================== */
/* SECTION 5: COPYRIGHT FOOTER BAR        */
/* ======================================== */

.copyright-bar {
    width:      100%;
    background: #111111;
    padding:    16px 0;
}

.copyright-bar p {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    400;
    letter-spacing: 0.3px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.4);
    text-align:     center;
}

.copyright-bar a {
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    600;
    letter-spacing: normal;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.6);
    transition:     color var(--transition-base);
}

.copyright-bar a:hover {
    color: var(--color-white);
}

/* ======================================== */
/* MOBILE STICKY PHONE BAR                 */
/* ======================================== */

.mobile-phone-bar {
    display:          none;
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    background:       var(--color-primary);
    z-index:          1100;
    height:           54px;
    box-shadow:       0 -4px 16px rgba(0, 0, 0, 0.25);
}

.mobile-phone-bar a {
    font-family:     var(--font-heading);
    font-size:       15px;
    font-weight:     700;
    letter-spacing:  0.5px;
    line-height:     1;
    color:           var(--color-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          100%;
    gap:             10px;
    text-transform:  uppercase;
}

.mobile-phone-bar a:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: var(--color-primary-dark);
}

/* ======================================== */
/* SERVICES PAGE: INTRO BAND               */
/* ======================================== */

.services-intro-band {
    background-color: var(--color-bg);
    padding:          70px 0;
}

.services-intro-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             60px;
}

.services-intro-text {
    flex: 1 1 60%;
}

.section-label-light {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 3px;
    line-height:    1;
    color:          var(--color-primary);
    text-transform: uppercase;
    margin-bottom:  14px;
    display:        block;
}

.services-intro-text h2 {
    font-size:      38px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.2;
    color:          var(--color-accent);
    margin-bottom:  18px;
}

.services-intro-text p {
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.8;
    color:          var(--color-text-mid);
}

.services-intro-stats {
    flex:            0 0 auto;
    display:         flex;
    gap:             36px;
    align-items:     center;
}

.intro-stat {
    text-align:    center;
    padding:       24px 28px;
    background:    var(--color-bg-alt);
    border:        1px solid var(--color-border);
    border-top:    4px solid var(--color-primary);
    border-radius: 10px;
}

.stat-num {
    display:        block;
    font-size:      38px;
    font-weight:    900;
    letter-spacing: -1px;
    line-height:    1;
    color:          var(--color-primary);
}

.stat-label {
    display:        block;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1px;
    line-height:    1.4;
    color:          var(--color-text-light);
    margin-top:     8px;
    text-transform: uppercase;
    white-space:    nowrap;
}

/* ======================================== */
/* SERVICES PAGE: IMAGE STRIP              */
/* ======================================== */

.services-img-strip {
    border-top:    6px solid var(--color-primary);
    border-bottom: 6px solid var(--color-primary);
    line-height:   0;
}

.services-img-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:     4px;
    background-color: var(--color-primary);
}

.strip-item {
    overflow: hidden;
}

.strip-btn {
    display:    block;
    width:      100%;
    padding:    0;
    border:     none;
    background: none;
    cursor:     pointer;
    position:   relative;
    overflow:   hidden;
    line-height: 0;
}

.strip-btn img {
    width:      100%;
    height:     280px;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.strip-btn:hover img {
    transform: scale(1.06);
}

.strip-zoom-icon {
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 16, 29, 0.55);
    color:      #fff;
    opacity:    0;
    transition: opacity 0.3s ease;
}

.strip-btn:hover .strip-zoom-icon,
.strip-btn:focus-visible .strip-zoom-icon {
    opacity: 1;
}

/* ======================================== */
/* LIGHTBOX                                */
/* ======================================== */

.lightbox {
    position:   fixed;
    inset:      0;
    z-index:    9999;
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity:    1;
    visibility: visible;
}

.lightbox-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(10, 10, 10, 0.92);
    cursor:     zoom-out;
}

.lightbox-content {
    position:   relative;
    z-index:    1;
    max-width:  90vw;
    max-height: 85vh;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width:     90vw;
    max-height:    85vh;
    object-fit:    contain;
    border-radius: 6px;
    box-shadow:    0 20px 60px rgba(0, 0, 0, 0.7);
    opacity:       0;
    transition:    opacity 0.3s ease;
}

.lightbox-img.lb-loaded {
    opacity: 1;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position:      absolute;
    z-index:       2;
    background:    rgba(255, 255, 255, 0.10);
    border:        1.5px solid rgba(255, 255, 255, 0.25);
    color:         #fff;
    border-radius: 50%;
    width:         52px;
    height:        52px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    background 0.2s ease, transform 0.2s ease;
    padding:       0;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--color-primary);
    transform:  scale(1.08);
}

.lightbox-close {
    top:   20px;
    right: 20px;
}

.lightbox-prev {
    left:      20px;
    top:       50%;
    transform: translateY(-50%);
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.08);
}

.lightbox-next {
    right:     20px;
    top:       50%;
    transform: translateY(-50%);
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.08);
}

.lightbox-counter {
    position:   absolute;
    bottom:     20px;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    2;
    font-size:  13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color:      rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
}

/* ======================================== */
/* SERVICES PAGE: CATEGORIES GRID          */
/* ======================================== */

.services-cats-section {
    background-color: #f5f5f5;
    padding:          70px 0 80px;
}

/* --- Full-width Service Available card --- */

.svc-cat-full {
    background:    var(--color-white);
    border-radius: 12px;
    padding:       40px 44px;
    margin-bottom: 28px;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.07);
    border-top:    5px solid var(--color-primary);
}

.svc-cat-full--promo {
    background: var(--color-dark);
    border-top: 5px solid var(--color-primary);
}

.svc-cat-full--promo .svc-cat-eyebrow {
    color: var(--color-primary);
}

.svc-cat-full--promo .svc-cat-title {
    color: var(--color-white);
}

.svc-cat-full--biz {
    background: #1c1c2e;
    border-top: 5px solid #3a5a9b;
}

.svc-cat-full--biz .svc-cat-icon-circle {
    background:   rgba(58, 90, 155, 0.15);
    border-color: rgba(58, 90, 155, 0.35);
    color:        #6b9ceb;
}

.svc-cat-full--biz .svc-cat-eyebrow {
    color: #6b9ceb;
}

.svc-cat-full--biz .svc-cat-title {
    color: var(--color-white);
}

.svc-cat-full--biz .svc-list li {
    color: rgba(255, 255, 255, 0.82);
}

.svc-cat-full--biz .svc-list li svg {
    color: #6b9ceb;
}

.svc-cat-heading {
    display:        flex;
    align-items:    flex-start;
    gap:            20px;
    margin-bottom:  30px;
    padding-bottom: 22px;
    border-bottom:  1px solid rgba(255, 255, 255, 0.08);
}

.svc-cat-full:not(.svc-cat-full--promo):not(.svc-cat-full--biz) .svc-cat-heading {
    border-bottom-color: #e8e8e8;
}

/* --- Category icon circle --- */

.svc-cat-icon-circle {
    flex-shrink:   0;
    width:         54px;
    height:        54px;
    border-radius: 50%;
    background:    rgba(99, 16, 29, 0.10);
    border:        1.5px solid rgba(99, 16, 29, 0.25);
    color:         var(--color-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.svc-cat-eyebrow {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 2.5px;
    line-height:    1;
    color:          var(--color-primary);
    text-transform: uppercase;
    margin-bottom:  6px;
}

.svc-cat-title {
    font-size:      22px;
    font-weight:    800;
    letter-spacing: -0.3px;
    line-height:    1.2;
    color:          var(--color-dark);
    margin:         0;
}

/* --- Service Chips (Services Available row) --- */

.svc-chips-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
}

.svc-chip {
    display:        flex;
    align-items:    center;
    gap:            8px;
    background:     #f5f5f5;
    border:         1.5px solid #e0e0e0;
    border-radius:  8px;
    padding:        11px 18px;
    font-size:      15px;
    font-weight:    600;
    letter-spacing: normal;
    line-height:    1;
    color:          var(--color-accent);
    transition:     background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor:         default;
}

.svc-chip svg {
    color:      var(--color-primary);
    flex-shrink: 0;
}

.svc-chip:hover {
    background:   var(--color-primary);
    border-color: var(--color-primary);
    color:        var(--color-white);
}

.svc-chip:hover svg {
    color: var(--color-white);
}

/* --- Three-column card row --- */

.svc-cat-row-3 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    margin-bottom:         28px;
}

.svc-cat-card {
    background:    var(--color-white);
    border-radius: 12px;
    padding:       32px 32px 36px;
    box-shadow:    0 4px 20px rgba(0, 0, 0, 0.07);
    border-top:    5px solid var(--color-primary);
}

.svc-cat-card-header {
    display:        flex;
    align-items:    flex-start;
    gap:            16px;
    margin-bottom:  24px;
    padding-bottom: 20px;
    border-bottom:  1px solid #ebebeb;
}

.svc-cat-card .svc-cat-title {
    font-size: 18px;
}

/* --- Bullet list (all variants) --- */

.svc-list {
    list-style:  none;
    padding:     0;
    margin:      0;
    columns:     1;
}

.svc-list--4col {
    columns: 4;
    column-gap: 28px;
}

.svc-list--3col {
    columns: 3;
    column-gap: 28px;
}

.svc-list li {
    display:      flex;
    align-items:  center;
    gap:          10px;
    font-size:    15px;
    font-weight:  500;
    letter-spacing: normal;
    line-height:  1.5;
    color:        #444;
    padding:      7px 0;
    border-bottom: 1px solid #f0f0f0;
    break-inside: avoid;
}

.svc-cat-full--promo .svc-list li,
.svc-cat-full--biz .svc-list li {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.svc-list li:last-child {
    border-bottom: none;
}

.svc-list li svg {
    color:      var(--color-primary);
    flex-shrink: 0;
    opacity:    0.85;
}

.svc-cat-full--promo .svc-list li {
    color: rgba(255, 255, 255, 0.82);
}

/* ======================================== */
/* CONTACT PAGE: MAP SECTION               */
/* ======================================== */

.contact-map-section {
    background-color: #f4f4f4;
    padding:          0;
    border-bottom:    2px solid var(--color-primary);
    line-height:      0;
}

.contact-map-section--fullwidth {
    width:        100%;
    display:      block;
    border-top:   1px solid var(--color-primary);
}

.contact-map-section--fullwidth iframe {
    width:   100%;
    height:  500px;
    display: block;
    border:  0;
}

.contact-map-wrap {
    display:     flex;
    align-items: stretch;
    gap:         40px;
}

.contact-map-address {
    flex:          0 0 260px;
    background:    var(--color-primary);
    border-radius: 12px;
    padding:       36px 30px;
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    color:         #fff;
    align-self:    flex-start;
    position:      sticky;
    top:           140px;
}

.cma-icon {
    flex-shrink:   0;
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.15);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #fff;
}

.cma-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 2.5px;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.70);
    text-transform: uppercase;
    margin-bottom:  10px;
}

.cma-address {
    font-size:      17px;
    font-weight:    600;
    letter-spacing: normal;
    line-height:    1.6;
    color:          #fff;
    font-style:     normal;
    margin-bottom:  14px;
}

.cma-address strong {
    display:        block;
    font-size:      18px;
    font-weight:    800;
    margin-bottom:  4px;
    color:          #fff;
}

.cma-hours-label {
    font-size:      13px;
    font-weight:    500;
    letter-spacing: normal;
    line-height:    1.5;
    color:          rgba(255, 255, 255, 0.75);
    margin-bottom:  20px;
}

.cma-directions {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 1px;
    line-height:    1;
    color:          #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding:        10px 18px;
    border:         1.5px solid rgba(255, 255, 255, 0.5);
    border-radius:  6px;
    transition:     background 0.2s ease, border-color 0.2s ease;
}

.cma-directions:hover {
    background:   rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.contact-map-embed {
    flex:          1;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 8px 36px rgba(0, 0, 0, 0.12);
    line-height:   0;
}

.contact-map-embed iframe {
    display: block;
    width:   100%;
    height:  500px;
    border:  0;
}

/* ======================================== */
/* CONTACT PAGE: INFO SECTION              */
/* ======================================== */

.contact-info-section {
    background-color: var(--color-bg);
    padding:          80px 0 90px;
}

.contact-info-inner {
    max-width:  1300px;
    margin:     0 auto;
    padding:    0 20px;
}

.contact-info-header {
    text-align:    center;
    margin-bottom: 56px;
}

.contact-info-header h2 {
    font-size:      44px;
    font-weight:    900;
    letter-spacing: -0.5px;
    line-height:    1.1;
    color:          var(--color-accent);
    margin-bottom:  18px;
}

.contact-info-sub {
    font-size:      17px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.75;
    color:          var(--color-text-mid);
    max-width:      600px;
    margin:         0 auto;
}

/* Three info cards */
.contact-info-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   28px;
    margin-bottom:         50px;
}

.contact-info-card {
    background:    var(--color-bg-alt);
    border-radius: 14px;
    padding:       40px 32px 36px;
    text-align:    center;
    border-top:    5px solid var(--color-border);
    transition:    border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.contact-info-card:hover {
    border-top-color: var(--color-primary);
    box-shadow:       0 10px 36px rgba(99, 16, 29, 0.10);
    transform:        translateY(-4px);
}

.contact-info-card--phone {
    border-top-color: var(--color-primary);
    background:       var(--color-dark);
    box-shadow:       0 8px 32px rgba(0, 0, 0, 0.18);
}

.contact-info-card--phone:hover {
    transform:  translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.cic-icon {
    width:         68px;
    height:        68px;
    border-radius: 50%;
    background:    rgba(99, 16, 29, 0.10);
    border:        1.5px solid rgba(99, 16, 29, 0.20);
    color:         var(--color-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto 20px;
}

.contact-info-card--phone .cic-icon {
    background: rgba(255, 255, 255, 0.08);
    border:     1.5px solid rgba(255, 255, 255, 0.18);
    color:      #fff;
}

.cic-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 2.5px;
    line-height:    1;
    color:          var(--color-primary);
    text-transform: uppercase;
    margin-bottom:  14px;
}

.contact-info-card--phone .cic-label {
    color: rgba(255, 255, 255, 0.60);
}

.cic-value {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      22px;
    font-weight:    700;
    letter-spacing: normal;
    line-height:    1.3;
    color:          var(--color-accent);
    text-decoration: none;
    margin-bottom:  10px;
}

.cic-value--phone {
    font-size:      46px;
    font-weight:    900;
    letter-spacing: -1px;
    line-height:    1;
    color:          #fff;
    transition:     color 0.2s ease;
}

.cic-value--phone:hover {
    color: rgba(255, 255, 255, 0.80);
}

.cic-value:not(.cic-value--phone):hover {
    color: var(--color-primary);
}

.cic-value--address {
    font-style: normal;
}

.cic-note {
    font-size:      13px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.5;
    color:          var(--color-text-light);
    margin:         0;
}

.contact-info-card--phone .cic-note {
    color: rgba(255, 255, 255, 0.45);
}

/* Hours block */
.contact-hours-block {
    background:    var(--color-bg-alt);
    border:        1px solid var(--color-border);
    border-radius: 14px;
    padding:       40px 48px;
    max-width:     700px;
    margin:        0 auto;
}

.chb-heading {
    display:        flex;
    align-items:    center;
    gap:            14px;
    margin-bottom:  28px;
    padding-bottom: 20px;
    border-bottom:  2px solid var(--color-border);
}

.chb-icon {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    rgba(99, 16, 29, 0.08);
    border:        1px solid rgba(99, 16, 29, 0.15);
    color:         var(--color-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}

.chb-heading h3 {
    font-size:      20px;
    font-weight:    700;
    letter-spacing: normal;
    line-height:    1;
    color:          var(--color-accent);
    margin:         0;
}

.chb-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.chb-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         11px 0;
    border-bottom:   1px solid var(--color-border);
    font-size:       16px;
    font-weight:     500;
    letter-spacing:  normal;
    line-height:     1.4;
    color:           var(--color-text-mid);
}

.chb-row:last-child {
    border-bottom: none;
}

.chb-open {
    font-weight: 600;
    color:       #1a7a3c;
}

.chb-closed span:last-child,
.chb-row.chb-closed .chb-open {
    color:       var(--color-text-light);
    font-weight: 400;
}

.chb-closed {
    opacity: 0.65;
}

/* ======================================== */
/* PORTFOLIO PAGE: INTRO                   */
/* ======================================== */

.portfolio-intro {
    background-color: var(--color-bg);
    padding:          70px 0 60px;
    border-bottom:    1px solid var(--color-border);
}

.portfolio-intro-inner {
    display:     flex;
    align-items: flex-start;
    gap:         60px;
}

.portfolio-intro-inner > .fade-in-up:first-child {
    flex: 0 0 340px;
}

.portfolio-intro-inner h2 {
    font-size:      38px;
    font-weight:    800;
    letter-spacing: -0.5px;
    line-height:    1.2;
    color:          var(--color-accent);
    margin-bottom:  0;
}

.portfolio-intro-text {
    flex:        1;
    font-size:   17px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.8;
    color:       var(--color-text-mid);
    margin:      0;
    padding-top: 8px;
}

/* ======================================== */
/* PORTFOLIO PAGE: GRID                    */
/* ======================================== */

.portfolio-grid-section {
    background-color: #111111;
    padding:          70px 0 80px;
}

.portfolio-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   28px;
}

.port-card {
    background:    #1c1c1c;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 6px 28px rgba(0, 0, 0, 0.4);
    transition:    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                   box-shadow 0.35s ease;
}

.port-card:hover {
    transform:  translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.port-card-btn {
    display:    block;
    width:      100%;
    padding:    0;
    border:     none;
    background: none;
    cursor:     zoom-in;
    position:   relative;
    overflow:   hidden;
    line-height: 0;
}

.port-img-wrap {
    position:   relative;
    overflow:   hidden;
    height:     260px;
}

.port-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.port-card-btn:hover .port-img-wrap img,
.port-card-btn:focus-visible .port-img-wrap img {
    transform: scale(1.08);
}

.port-overlay {
    position:         absolute;
    inset:            0;
    background:       linear-gradient(to bottom, rgba(99,16,29,0.0) 30%, rgba(99,16,29,0.82) 100%);
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    opacity:          0;
    transition:       opacity 0.35s ease;
}

.port-card-btn:hover .port-overlay,
.port-card-btn:focus-visible .port-overlay {
    opacity: 1;
}

.port-overlay-icon {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.15);
    border:        2px solid rgba(255, 255, 255, 0.6);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #fff;
    transform:     translateY(8px);
    transition:    transform 0.35s ease;
}

.port-card-btn:hover .port-overlay-icon {
    transform: translateY(0);
}

.port-overlay-label {
    display: none;
}

.port-card-footer {
    display:      flex;
    align-items:  center;
    gap:          16px;
    padding:      18px 22px 20px;
    border-top:   3px solid var(--color-primary);
}

.port-card-num {
    font-size:      12px;
    font-weight:    800;
    letter-spacing: 1.5px;
    line-height:    1;
    color:          var(--color-primary);
    opacity:        0.7;
    flex-shrink:    0;
    font-family:    var(--font-heading);
}

.port-card-info h3 {
    font-size:      17px;
    font-weight:    700;
    letter-spacing: normal;
    line-height:    1.2;
    color:          #f0f0f0;
    margin:         0 0 4px;
}

.port-card-info p {
    font-size:      13px;
    font-weight:    400;
    letter-spacing: normal;
    line-height:    1.4;
    color:          rgba(255, 255, 255, 0.45);
    margin:         0;
}

/* Lightbox caption */
.lightbox-caption {
    margin-top:     16px;
    font-size:      14px;
    font-weight:    500;
    letter-spacing: 0.5px;
    line-height:    1.5;
    color:          rgba(255, 255, 255, 0.65);
    text-align:     center;
    font-family:    var(--font-heading);
}

/* ======================================== */
/* RESPONSIVE: TABLET (≤1024px)            */
/* ======================================== */

@media (max-width: 1024px) {

    .welcome-inner {
        gap: 40px;
    }

    .welcome-text {
        flex:      0 0 50%;
        max-width: 50%;
    }

    /* Gallery: 2 columns on tablet */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }

    .gallery-item {
        height: 280px;
    }

    /* About page tablet */
    .industries-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    /* Categories: compress to 3 columns on tablet */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap:                   40px;
    }

    .footer-map {
        grid-column: 1 / -1;
    }

    /* Contact page tablet */
    .contact-map-wrap {
        flex-direction: column;
    }

    .contact-map-address {
        flex:     none;
        position: static;
    }

    .contact-map-embed iframe {
        height: 380px;
    }

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

    .contact-info-card--phone {
        grid-column: 1 / -1;
    }

    /* Portfolio page tablet */
    .portfolio-intro-inner {
        flex-direction: column;
        gap:            28px;
    }

    .portfolio-intro-inner > .fade-in-up:first-child {
        flex: none;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Services page tablet */
    .services-intro-inner {
        flex-direction: column;
        gap:            36px;
    }

    .services-intro-stats {
        width:          100%;
        justify-content: center;
        gap:            24px;
    }

    .svc-cat-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-list--4col {
        columns: 3;
    }

    .svc-list--3col {
        columns: 2;
    }

    .services-img-strip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .strip-btn img {
        height: 200px;
    }
}

/* ======================================== */
/* RESPONSIVE: MOBILE (≤768px)             */
/* ======================================== */

@media (max-width: 768px) {

    /* Top Bar – hidden on mobile */
    .top-bar {
        display: none;
    }

    .top-bar-inner {
        flex-direction:  column;
        align-items:     flex-start;
        gap:             6px;
    }

    .top-bar-left {
        flex-direction: column;
        align-items:    flex-start;
        gap:            6px;
    }

    .top-bar-address {
        display: none;
    }

    .top-bar-right {
        position: absolute;
        top:      10px;
        right:    20px;
    }

    /* Header */
    .main-header {
        height: 74px;
    }

    .logo img {
        height:     50px;
        max-height: 50px;
    }

    .main-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-nav {
        display: block;
    }

    /* Typography scale-down */
    h1 {
        font-size:      34px;
        font-weight:    900;
        letter-spacing: -0.5px;
        line-height:    1.15;
        color:          var(--color-white);
    }

    h2 {
        font-size:      28px;
        font-weight:    800;
        letter-spacing: normal;
        line-height:    1.25;
        color:          var(--color-accent);
    }

    h3 {
        font-size:      18px;
        font-weight:    700;
        letter-spacing: normal;
        line-height:    1.35;
        color:          var(--color-accent);
    }

    /* Hero */
    .hero-section {
        min-height: 420px;
    }

    .hero-accent-strip {
        display: none;
    }

    .hero-content {
        padding-top:    36px;
        padding-bottom: 60px;
    }

    .hero-content h1 {
        font-size:   30px;
        line-height: 1.2;
    }

    .hero-sub {
        display: none;
    }

    /* Hide Call Us Now button on mobile — sticky phone bar handles this */
    .hero-actions .btn-primary {
        display: none;
    }

    .hero-actions {
        flex-direction: column;
        align-items:    flex-start;
        margin-top:     28px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Sub-page title bar — reduced height on mobile */
    .subpage-title-bar {
        min-height: 180px;
    }

    .subpage-title-content {
        padding-top:    32px;
        padding-bottom: 28px;
    }

    .subpage-title {
        font-size:      36px;
        font-weight:    900;
        letter-spacing: -0.5px;
        line-height:    1.1;
        color:          var(--color-white);
    }

    .subpage-tagline {
        font-size:      11px;
        font-weight:    600;
        letter-spacing: 1.5px;
        line-height:    1;
        color:          rgba(255, 255, 255, 0.6);
    }

    /* About history */
    .about-history {
        padding: 60px 0;
    }

    .about-history-inner {
        flex-direction: column;
        gap:            40px;
    }

    .about-content {
        flex:      1;
        max-width: 100%;
    }

    .about-images img {
        width:  100%;
        height: auto;
    }

    /* Industries grid */
    .about-clients {
        padding: 60px 0 70px;
    }

    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-list {
        grid-template-columns: 1fr;
    }

    .about-products {
        padding: 30px 24px;
    }

    /* Welcome Section */
    .welcome-section {
        padding: 60px 0;
    }

    .welcome-inner {
        flex-direction: column;
        gap:            36px;
    }

    .welcome-colorbar {
        display: none;
    }

    .welcome-text {
        flex:      1;
        max-width: 100%;
    }

    .welcome-text h2 {
        font-size:      30px;
        font-weight:    800;
        letter-spacing: normal;
        line-height:    1.2;
        color:          var(--color-accent);
    }

    .feature-card {
        padding: 20px 16px;
    }

    /* Gallery Row */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        height:                auto;
    }

    .gallery-item {
        height: 220px;
    }

    /* Reviews */
    .reviews-section {
        padding: 60px 0 70px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap:                   20px;
    }

    .review-card {
        padding: 28px 24px 24px;
    }

    .reviews-header h2 {
        font-size:      26px;
        font-weight:    800;
        letter-spacing: normal;
        line-height:    1.3;
        color:          var(--color-accent);
    }

    /* Categories Section */
    .categories-section {
        padding: 60px 0 50px;
    }

    .categories-header h2 {
        font-size:      28px;
        font-weight:    800;
        letter-spacing: normal;
        line-height:    1.25;
        color:          var(--color-white);
    }

    .categories-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cat-card {
        padding: 30px 20px 28px;
    }

    /* Last card spans full width in a 2-col grid */
    .cat-card:last-child {
        grid-column: 1 / -1;
    }

    .section-header h2 {
        font-size:      28px;
        font-weight:    800;
        letter-spacing: normal;
        line-height:    1.25;
        color:          var(--color-accent);
    }

    /* CTA Banner */
    .cta-inner {
        flex-direction: column;
        text-align:     center;
        gap:            28px;
    }

    .cta-text h2 {
        font-size:      30px;
        font-weight:    900;
        letter-spacing: normal;
        line-height:    1.15;
        color:          var(--color-white);
    }

    .btn-cta-white {
        width: 100%;
        max-width: 280px;
    }

    /* Fat Footer */
    .fat-footer {
        padding: 50px 0 40px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap:                   40px;
    }

    /* Mobile Phone Bar */
    .mobile-phone-bar {
        display: flex;
        align-items: center;
    }

    /* Push page content up from fixed bar */
    body {
        padding-bottom: 54px;
    }

    /* Prevent horizontal overflow */
    .welcome-inner,
    .footer-inner,
    .cta-inner {
        overflow: hidden;
    }

    /* Contact page mobile */
    .contact-map-embed iframe,
    .contact-map-section--fullwidth iframe {
        height: 220px;
    }

    .contact-info-header h2 {
        font-size: 34px;
    }

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

    .contact-info-card--phone {
        grid-column: auto;
    }

    .cic-value--phone {
        font-size: 36px;
    }

    .contact-hours-block {
        padding: 28px 22px;
    }

    /* Portfolio page mobile */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .port-img-wrap {
        height: 220px;
    }

    /* Services page mobile */
    .svc-cat-row-3 {
        grid-template-columns: 1fr;
    }

    .svc-cat-full {
        padding: 28px 22px;
    }

    .svc-list--4col,
    .svc-list--3col {
        columns: 2;
        column-gap: 16px;
    }

    .services-img-strip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .strip-btn img {
        height: 160px;
    }

    .svc-chips-grid {
        gap: 8px;
    }

    .svc-chip {
        font-size: 13px;
        padding:   9px 13px;
    }

    .intro-stat {
        padding:    16px 18px;
    }

    .stat-num {
        font-size: 28px;
    }
}

/* ======================================== */
/* RESPONSIVE: SMALL MOBILE (≤480px)       */
/* ======================================== */

@media (max-width: 480px) {

    h1 {
        font-size:      28px;
        font-weight:    900;
        letter-spacing: normal;
        line-height:    1.2;
        color:          var(--color-white);
    }

    .hero-eyebrow {
        font-size:      13px;
        font-weight:    600;
        letter-spacing: 1.5px;
        line-height:    1;
        color:          rgba(255, 255, 255, 0.8);
    }

    .hero-sub {
        font-size:      15px;
        font-weight:    400;
        letter-spacing: normal;
        line-height:    1.6;
        color:          rgba(255, 255, 255, 0.8);
    }

    .btn {
        font-size: 12px;
        padding:   13px 26px;
    }

    .svc-card--text {
        padding: 28px 22px;
    }

    .cta-text h2 {
        font-size:      24px;
        font-weight:    900;
        letter-spacing: normal;
        line-height:    1.2;
        color:          var(--color-white);
    }

    .top-bar-right {
        display: none;
    }

    /* Services page small mobile */
    .svc-list--4col,
    .svc-list--3col {
        columns: 1;
    }

    .services-intro-stats {
        flex-direction: column;
        gap:            12px;
    }

    .intro-stat {
        width: 100%;
    }
}