/* Corrugated and Carton: Two full-width images, no text */
.two-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 3rem 0;
}
.two-image-card {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    align-items: stretch !important;
    display: flex;
}
.two-image-photo {
    width: 100%;
    height: 340px;
    margin: 0;
    border-radius: 0;
    background: #ccc;
    display: block;
    overflow: hidden;
}
.two-image-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
/* Magnetic page: compact title section */
#magnetic-box-title-desc .content-split {
    min-height: 350px;
}

/* Justified Gallery - edge-to-edge row-based layout */
.justified-gallery {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}
.justified-gallery-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.justified-gallery-item {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    min-width: 0;
}
.justified-gallery-photo {
    width: 100%;
    height: 100%;
    background: #ccc;
    overflow: hidden;
    position: relative;
}
.justified-gallery-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Arrow link icon for rigid cards */
.rigid-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 8px;
    color: #333;
    transition: transform 0.2s ease;
}
.rigid-card-arrow:hover {
    transform: translate(2px, 2px);
}
.rigid-card-arrow svg {
    width: 20px;
    height: 20px;
}

/* Rigid Cards Grid for Rigid Boxes Second Row */
.rigid-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin: 3rem 0;
}

.rigid-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: none;
}
.rigid-card-photo {
    width: 100%;
    height: 250px;
    background: #ccc;
    border-radius: 0;
    margin-bottom: 18px;
    display: block;
    overflow: hidden;
}
.rigid-card-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.rigid-card h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
    color: #111;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rigid-card p {
    color: #111;
    text-align: left;
    margin: 0 0 0.5rem 0;
}
/* Ensure anchor sections are visible below fixed navbar. 80px = the 79px
   .nav-container plus its 1px border; 70px left the top of the target tucked
   behind the header. */
[id] {
    scroll-margin-top: 80px;
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fixed-size clipping frame for editable images.
   The container never moves or resizes; the image pans/zooms inside it. */
.img-frame {
    position: relative;
    overflow: hidden;
    min-height: 40px;
}
.img-frame > img[data-editable-image] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

html {
    /* Single source of truth for the fixed header:
       .nav-container 79px + 1px .header border-bottom = 80px. */
    --header-h: 80px;
    width: 100%;
    overflow-x: hidden;
    /* anchor jumps (#boxes, #board-games, ...) land below the header */
    scroll-padding-top: var(--header-h);
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    width: 100%;
    overflow-x: hidden;
}

/* All body copy: Roboto Light at 19px */
p {
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
}

.container {
    margin: 0 auto;
    padding: 0 20px;
}

.container-w-split {
    margin: 0 auto;
    padding: 0;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
    border-bottom: 1px solid #eee;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* --header-h includes the 1px .header border-bottom */
    height: calc(var(--header-h) - 1px);
    padding: 0 2rem;
}

/* Formats Section */
.formats-section {
    background: #fff;
    padding: 80px 0;
}

/* Process Grid */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin: 3rem 0;
}

.process-step {
    text-align: left;
    padding: 2rem;
    border-bottom: 1px solid #eee;
}

/* FAQ entries (the steps that are not the two-column kind): no side padding,
   so the questions line up with the section heading above them */
.process-step:not(.process-step-split) {
    padding-left: 0;
    padding-right: 0;
}

.process-step h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000;
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.service-item {
    padding: 2rem;
}

.service-item h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000;
}

.service-item p {
    color: #666;
    line-height: 1.6;
}

.nav-left,
.nav-right {
    flex: 1;
    display: flex;
}

.nav-left {
    justify-content: flex-start;
    padding-right: 24px;
}

.nav-right {
    justify-content: flex-end;
    padding-left: 24px;
}

.logo {
    flex: 0 0 auto;
    text-align: center;
}

.logo a img.logo-img {
    height: 38px;
    width: auto;
    display: block;
}

.logo a {
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    letter-spacing: 2.5px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    text-transform: uppercase;
}

.nav-menu-left,
.nav-menu-right {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.nav-menu-left a,
.nav-menu-right a {
    white-space: nowrap;
    color: #000;
    text-decoration: none;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}

.nav-menu-left a::after,
.nav-menu-right a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #000;
    transition: width 0.3s ease;
}

.nav-menu-left a:hover::after,
.nav-menu-right a:hover::after {
    width: 100%;
}

.nav-menu-left a:hover,
.nav-menu-right a:hover {
    color: #000;
}

/* Dropdown Menu Styles */
.nav-item-dropdown {
    position: relative;
}

.dropdown-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background: #000;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
    border-bottom: 1px solid #eee;
}

.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3rem;
    margin: 0 auto;
    padding: 20px 2rem;
}

.dropdown-section h3 {
    color: #ccc;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 0;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.4;
}

.dropdown-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-section ul li {
    margin-bottom: 0.8rem;
}

.dropdown-section ul li:last-child {
    margin-bottom: 0;
}

.dropdown-section ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    transition: color 0.3s ease;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dropdown-section ul li a:hover {
    color: #fff;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Language switcher: globe plus the two language codes, the current one bold
   and the other a plain link to the same page in the other language. */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 35px;
}

.lang-globe {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    flex-shrink: 0;
}

.lang-code {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.4;
    color: #000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.lang-code.is-current {
    font-weight: 700;
}

a.lang-code:hover {
    opacity: 0.6;
}

/* Same switcher as a row inside the mobile menu */
.mobile-lang {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: #333;
}

.mobile-nav-list .mobile-lang a.lang-code {
    display: inline;
    padding: 0;
    color: #333;
}

.mobile-nav-list .mobile-lang a.lang-code:hover {
    background: none;
    color: #333;
    opacity: 0.6;
}

.mobile-lang .lang-code {
    color: #333;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-list li {
    border-bottom: 1px solid #eee;
}

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

.mobile-nav-list a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}

.mobile-nav-list a:hover,
.mobile-nav-list a.active {
    background-color: #f5f5f5;
    color: #007bff;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Poster colour, so there is no flash before the first frame decodes */
    background-color: #f2f2f2;
    pointer-events: none;
    z-index: 1;
}

.hero-image-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 2;
}

/* Homepage video hero: light at the top so the footage keeps its studio
   look, darkening toward the headline on the lower third */
.hero-video ~ .hero-overlay {
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.16) 35%,
        rgba(0,0,0,0.5) 78%,
        rgba(0,0,0,0.62) 100%);
}

.hero-content {
    position: relative;
    z-index: 3;
    /* Headline sits on the lower golden-ratio line rather than dead centre:
       two thirds down, one third up. The hero is 100vh, so nudging the centred
       block by a sixth of the viewport height lands it on 2/3. Done with a
       transform because `section { padding: 0 !important }` rules out padding. */
    transform: translateY(16.66vh);
}

.hero-content h1 {
    /* Same type treatment as .about-section h2, minus the bold */
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
    max-width: 800px;
    line-height: 1.2;
    /* Keeps the headline off the screen edges on narrow viewports */
    padding-left: 40px;
    padding-right: 40px;
}

/* About Intro Section */
.about-section {
    padding: 0;
    background-color: #ffffff;
    text-align: left;
    border-bottom: 1px solid #000000;
}

.about-section .container {
    margin: 0 auto;
    padding: 40px;
}

.about-section h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #333333;
}

/* New Section */
.new-section {
    padding: 0;
    background-color: #ffffff;
    text-align: left;
    border-bottom: 1px solid #000000;
}

.new-section .container {
    margin: 0 auto;
    padding: 40px 40px 80px 40px;
}

.new-section h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    max-width: none;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #333333;
}

/* Explore Products Section */
/* Background Classes */
.bg-grey {
    background-color: #f5f5f5;
}

.products-section {
    padding: 0;
    border-bottom: 1px solid #000000;
}

.products-section .content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 700px;
}

.products-section .content-left {
    /* Longhands only: side padding comes from .text-column, and a shorthand
       here would reset it to zero */
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    margin: 0;
    text-align: left;
}

.products-section .content-left h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #000000;
    color: #333333;
    text-align: left;
}

.products-section .content-left p {
    line-height: 1.4;
    margin-bottom: 40px;
    color: #000000;
    text-align: left;
}

.products-section .content-right {
    position: relative;
    padding: 0;
    margin: 0;
}

/* Home page: single photo standing in for the old carousels */
.media-frame {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .media-frame {
        height: 300px;
    }
}

/* Product Carousel */
.product-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #ff6b35;
    border-color: #ff6b35;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
}

/* Services Section */
.services-section {
    padding: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #000000;
}

.services-section .content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 700px;
}

.services-section .content-left {
    position: relative;
    padding: 0;
    margin: 0;
}

.services-section .content-right {
    /* Longhands only: side padding comes from .text-column, and a shorthand
       here would reset it to zero */
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    margin: 0;
    text-align: left;
}

.services-section .content-right h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #000000;
    color: #333333;
    text-align: left;
}

.services-section .content-right p {
    line-height: 1.4;
    margin-bottom: 40px;
    color: #000000;
    text-align: left;
}

/* Services Carousel */
.services-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.services-carousel .carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.services-carousel .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.services-carousel .carousel-slide.active {
    opacity: 1;
}

.services-carousel .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.services-carousel .carousel-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.services-carousel .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services-carousel .dot.active {
    background-color: #ff6b35;
    border-color: #ff6b35;
}

.services-carousel .dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
}

/* Contact Section */
.contact-section {
    padding: 0;
    background-color: #f5f5f5;
    border-bottom: 1px solid #000000;
}

.contact-section .content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: flex-start;
}

.contact-section .content-left {
    display: flex;
    flex-direction: column;
    padding: 40px;
    text-align: left;
}

.contact-section .content-left h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #000000;
    text-align: left;
}

.contact-section .content-right {
    padding: 0;
}

/* Without this the form runs to the edge of the screen once the split
   collapses. Side padding only, matching .content-left, so the desktop
   vertical rhythm is unchanged. */
.contact-section .content-right.form-column {
    padding-left: 40px;
    padding-right: 40px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 1px solid #ddd;
    font-family: inherit;
    font-size: 16px;
    background-color: #ffffff;
    /* Inputs outside a .form-row would otherwise fall back to their intrinsic
       width and stop short of the column edge */
    width: 100%;
    box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    font-family: inherit;
    color: #999;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #ff6b35;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
}

/* Form Checkbox Styling */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 2px;
    accent-color: #2c5aa0;
    cursor: pointer;
}

.form-checkbox label {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
}

.contact-form button {
    align-self: flex-start;
    margin-top: 30px;
    margin-bottom: 50px;
}

.contact-form .form-section {
    margin-bottom: 40px;
}

.contact-form .form-section h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #333333;
}

/* Buttons */
.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid;
    text-align: center;
}

/* Button Styles */
.btn-primary {
    background-color: transparent;
    color: #333333;
    padding: 15px 30px;
    border: 2px solid #333333;
    border-radius: 0;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-block;
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.btn-primary:hover {
    background-color: #333333;
    color: white;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: #333333;
    padding: 15px 40px;
    border: 2px solid #333333;
    border-radius: 0;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-block;
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.btn-secondary:hover {
    background-color: #333333;
    color: white;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: #000;
    border-color: #000;
}

.btn-secondary:hover {
    background: #000;
    color: #fff;
}

.btn-white-outline {
    background-color: transparent;
    color: #ffffff;
    padding: 15px 40px;
    border: 2px solid #ffffff;
    border-radius: 0;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-white-outline:hover {
    background-color: #ffffff;
    color: #333333;
    transform: translateY(-2px);
}

/* Sections */
section {
    padding: 0 !important;
    margin: 0 !important;
}

.section-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #666;
    max-width: 600px;
}

h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
    line-height: 1.2;
}

/* Content Split Sections */
.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
}

.content-left h2 {
    margin-bottom: 1.5rem;
    text-align: left;
    color: #000000;
}

.content-left p {
    margin-bottom: 2rem;
    color: #000000;
    text-align: left;
    line-height: 1.4;
}

.content-right img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* Contact Section */
.contact-section {
    text-align: center;
}

.contact-form {
    max-width: 600px;
    margin: 3rem 0 0 0;
    text-align: left;
}

.form-section {
    margin-bottom: 3rem;
}

.form-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

input,
textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: #000;
}

.form-checkbox {
    margin: 1rem 0;
}

.form-checkbox input {
    margin-right: 0.5rem;
}

.form-checkbox label {
    font-size: 0.9rem;
    color: #666;
}

/* Footer */
footer.footer-section {
    background: #000;
    color: #fff;
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section {
    position: relative;
    padding-right: 1.5rem;
}

.footer-section h4 {
    font-size: 16px;
    font-weight: 100;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    letter-spacing: 0;
    color: #fff;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    border-top: 1px solid #fff;
}

.footer-section h4.company-name {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 1.5rem;
    padding-top: 3.5rem;
    letter-spacing: 0;
    color: #fff;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    border-top: 1px solid #fff;
}

.footer-section p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.footer-section a:hover {
    color: #fff;
}

.social-links {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.social-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;
}

.social-links a:hover {
    opacity: 0.7;
}

.social-links a::before {
    content: '';
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}

.social-links a[href*="instagram"]::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>');
}

.social-links a[href*="facebook"]::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>');
}

.social-links a[href*="linkedin"]::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>');
}

.accreditations {
    display: flex;
    flex-direction: column;
}

.accreditations h4 {
    font-size: 16px;
    font-weight: 100;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    letter-spacing: 0;
    color: #fff;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-transform: uppercase;
    border-top: 1px solid #fff;
    margin-right: 0;
}

.accreditations img {
    height: 50px;
    filter: brightness(0) invert(1);
}

.footer-accreditations {
    border-top: 1px solid #333;
    padding-top: 2rem;
    margin-top: 2rem;
    text-align: center;
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 2rem;
    margin-top: 2rem;
    text-align: left;
    font-size: 0.9rem;
    color: #666;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Content Section Styles */
.content-section {
    background: #fff;
    padding: 80px 0;
    text-align: center;
}

.content-section h2 {
    margin-bottom: 2rem;
}

.content-section p {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* About Page Styles */
.why-progress-section {
    background: #fff;
}

.values-section {
    background: #f8f8f8;
}

.company-info-section {
    background: #fff;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.info-item {
    text-align: center;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 8px;
}

.info-item h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    color: #000;
}

.info-item p {
    color: #666;
    line-height: 1.6;
}

/* Page Hero Styles */
.page-hero {
    background: #f8f8f8;
    padding: 120px 0 80px;
    text-align: center;
}

.page-hero h1 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.page-hero p {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Navigation Active State */
.nav-menu-left a.active,
.nav-menu-right a.active {
    color: #000;
    font-weight: 700;
}

/* Formats Section */
.formats-section {
    background: #fff;
    padding: 60px 0;
}

.formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.format-category h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.format-category ul {
    list-style: none;
}

.format-category ul li {
    margin-bottom: 0.5rem;
}

.format-category ul li a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.format-category ul li a:hover {
    color: #000;
}

/* Packaging Gallery */
.packaging-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

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

/* Sector Section */
.sector-section {
    background: #f8f8f8;
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.sector-category h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.sector-category ul {
    list-style: none;
}

.sector-category ul li {
    margin-bottom: 0.5rem;
}

.sector-category ul li a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.sector-category ul li a:hover {
    color: #000;
}

/* Projects Section */
.projects-section {
    background: #fff;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.project-item {
    background: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.project-item:hover {
    transform: translateY(-5px);
}

.project-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem;
    color: #000;
    letter-spacing: 1px;
}

.project-item p {
    margin: 0 1rem 1rem;
    color: #666;
}

/* Loading States */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Switch to hamburger before the desktop menu collides with the logo */
@media (max-width: 1100px) and (min-width: 769px) {
    .hamburger {
        display: flex;
    }
    .nav-left,
    .nav-right {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
    .nav-container {
        justify-content: space-between;
        width: 100%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .nav-left,
    .nav-right {
        display: none;
    }

    .logo {
        flex: 1;
        text-align: left;
    }

    .nav-container {
        justify-content: space-between;
        width: 100%;
        padding: 0 20px;
    }

    /* Hide dropdown on mobile */
    .dropdown-menu {
        display: none;
    }

    .hero-content h1 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-hero h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .content-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .products-section .content-split {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: auto;
    }

    .products-section .content-left {
        padding-top: 40px;
        padding-bottom: 40px;
        max-width: none;
        width: 100%;
    }

    .products-section .content-left h2 {
        font-size: 36px;
    }

    .product-carousel {
        height: 300px;
        width: 100%;
    }

    .services-section .content-split {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: auto;
    }

    .services-section .content-right {
        padding-top: 40px;
        padding-bottom: 40px;
        max-width: none;
        width: 100%;
    }

    .services-section .content-right h2 {
        font-size: 36px;
    }

    .services-carousel {
        height: 300px;
    }

    .contact-section .content-split {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Stacked, the text block's own bottom padding is the whole separation
       from the form - the grid gap and the form margin just pile on top */
    .contact-section .content-left {
        padding-bottom: 20px;
    }

    .contact-form {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    .contact-form .form-section:last-of-type {
        margin-bottom: 0;
    }

    .contact-form button {
        margin-top: 0;
        margin-bottom: 40px;
    }

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

    .contact-section .content-left h2 {
        font-size: 36px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Utility: drop secondary copy that is too long for narrow screens */
    .hide-on-mobile {
        display: none;
    }

    /* Footer columns stack into four full-width rows on mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-grid .footer-section {
        padding-right: 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .nav-container {
        padding: 1rem;
    }

    section {
        padding: 60px 0;
    }

    .formats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sector-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .packaging-gallery {
        grid-template-columns: 1fr;
    }

    .justified-gallery-row {
        flex-wrap: wrap;
        height: auto !important;
    }
    .justified-gallery-item {
        flex-grow: 1 !important;
        flex-basis: 45%;
        height: 200px;
    }
}

@media (max-width: 480px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }

    h2 {
        font-size: 1.8rem;
    }

    .container {
        padding: 0 20px;
        width: 100%;
    }

    .nav-container {
        padding: 0 20px;
    }
}

/* Services Page Service Items */
.services-section .service-item {
    border-bottom: 1px solid #000000;
    padding: 0;
    margin: 0;
}

.services-section .service-item .content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 300px;
}

.services-section .service-item .content-left {
    padding: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.services-section .service-item .content-right {
    padding: 40px;
    display: flex;
    align-items: center;
}

.services-section .service-item h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0;
    color: #333333;
    text-align: left;
}

.services-section .service-item p {
    line-height: 1.4;
    margin: 0;
    color: #000000;
    text-align: left;
}

/* Responsive for service items */
@media (max-width: 768px) {
    .services-section .service-item .content-split {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .services-section .service-item .content-left,
    .services-section .service-item .content-right {
        padding: 20px;
    }
}

/* How We Work Page Styles */
.process-section {
    padding: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #000000;
    text-align: left;
}

.process-section .container {
    margin: 0 auto;
    padding: 40px;
}

.single-column-content {
    max-width: none;
    margin: 0;
    text-align: left;
}

/* Same treatment as the .section-title-link headings on the products page */
.single-column-content h2,
.single-column-content h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    /* h2 paveldi bendrą h2 taisyklę (1.2), h1 tokios neturi - nurodome aiškiai,
       kad abi antraštės atrodytų vienodai */
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #333333;
    text-align: left;
}

.process-steps {
    margin-bottom: 60px;
}

.process-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.process-step h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #333333;
}

.process-step p {
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* Two-column design for individual process step */
.process-step-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    min-height: 300px;
}

.process-step-split .step-title h1,
.process-step-split .step-title .step-number {
    margin-bottom: 0;
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-size: 104px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #333333;
    line-height: 1.2;
}

.process-step-split .step-title h3 {
    margin-bottom: 0;
    text-align: right;
}

.process-step-split .step-content {
    text-align: left;
}

.process-step-split .step-content h2 {
    margin-bottom: 20px;
    margin-top: 0;
    font-size: 2em;
    font-weight: normal;
}

.process-step-split .step-content p {
    margin: 0;
    margin-right: 160px;
    color: #000000;
}

.philosophy-text {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #333333;
}

.philosophy-text p {
    line-height: 1.6;
    color: #666666;
    margin-bottom: 20px;
}

.philosophy-text p:last-child {
    margin-bottom: 0;
}

.philosophy-text strong {
    color: #333333;
}

/* Responsive for How We Work */
@media (max-width: 768px) {
    .process-section .container {
        padding: 20px;
    }

    /* Responsive for split process step */
    .process-step-split {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* "Aplankykite mus" kontaktų nuorodos: atrodo kaip aplinkinis tekstas,
   pabraukiamos tik užvedus - numatytosios naršyklės mėlynos nuorodos
   iškristų iš puslapio stiliaus */
#visit-us a {
    color: inherit;
    text-decoration: none;
}

#visit-us a:hover {
    text-decoration: underline;
}

/* Contact Page Map Section - Same height as contact form */
.map-section {
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    position: relative;
    /* auto rather than a fixed height - the map div below sets its own, and a
       fixed height here hides a second map if one is added back for comparison */
    height: auto;
}

.full-screen-map {
    width: 100%;
    height: 600px;
    position: relative;
}

/* Directions hand-off under the map - outline buttons matching .btn-primary,
   one size down */
.map-directions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 25px 20px 30px;
}

.map-directions-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777777;
}

.map-directions a {
    display: inline-block;
    padding: 10px 22px;
    border: 2px solid #333333;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.map-directions a:hover {
    background-color: #333333;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Remove old map styling */
.map-content,
.map-header,
.map-container {
    display: none;
}

/* Responsive for Map Section */
@media (max-width: 768px) {
    .map-section {
        height: auto;
    }

    .full-screen-map {
        height: 400px;
    }
}

/* Packaging Content Styles */
.packaging-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.section-content h2 {
    font-size: 48px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.section-content p {
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.section-content .intro-text {
    font-size: 24px;
    color: #666;
    margin-bottom: 30px;
}

.section-content blockquote {
    font-size: 28px;
    font-style: italic;
    color: #555;
    margin: 0 auto;
    max-width: 800px;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* Packaging Categories Styles */
.packaging-categories {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.packaging-categories h2 {
    font-size: 48px;
    font-weight: 400;
    color: #333;
    margin-bottom: 60px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.category-card {
    background: white;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.category-card h3 {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.category-card p {
    line-height: 1.6;
    color: #666;
    margin-bottom: 30px;
}

.category-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.category-link {
    display: inline;
    padding: 0;
    background: none;
    color: inherit;
    text-decoration: none;
    border-radius: 0;
    font-size: inherit;
    font-weight: normal;
    border: none;
    box-shadow: none;
    transition: none;
}

.category-link:hover {
    background: none;
    color: inherit;
    border: none;
    text-decoration: underline;
}

/* Section heading used as a link to the product samples page */
.section-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Same treatment as the Product Samples section titles */
a.section-title-link h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #333333;
    text-align: left;
    transition: color 0.2s ease;
}

a.section-title-link:hover h2 {
    color: #000;
    text-decoration: underline;
}

/* Collapsed layout: these titles sit flush against the image stacked above
   them (the global reset drops the default heading top margin), so mirror the
   title's bottom margin on top to keep the rhythm even. */
@media (max-width: 768px) {
    a.section-title-link h2 {
        margin-top: 30px;
    }
}

.bg-light {
    background-color: #f9f9f9;
}

/* Packaging Boxes Page Styles */
.packaging-section {
    padding: 0;
}

/* Used by product-samples.html, whose section links carry the clearance for the
   fixed header — without this they sit underneath it, invisible. */
.section-nav {
    padding-top: var(--header-h);
}

/* Generic inner clearance for pages that open straight with their first
   section. Derived from --header-h, so it can no longer drift out of sync
   with the header the way the old 120px / 100px pair did. */
.header-offset {
    padding-top: var(--header-h);
}

/* Products page: the clearance must sit on the SECTION, not on its inner
   .container. That container also wraps the full-bleed image column, so
   padding there pushed the image 120px down inside its own row, leaving a
   white band above it and a different crop from every following row.
   !important beats `section { margin: 0 !important; }` (~line 1098). */
.packaging-section:has(> .container.header-offset) {
    margin-top: var(--header-h) !important;
}

.packaging-section > .container.header-offset {
    padding-top: 0;
}

/* Products page group photos: 16:10 frames that fill their half of the row and
   scale with it, keeping the ratio at every width. */
.group-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

/* Side by side, the text column can outgrow a 16:10 photo and leave a gap
   beside it. Stretching the row makes the photo match the text height instead,
   cropping via object-fit rather than showing empty space. Only applies above
   1100px, where these rows are still two columns. */
@media (min-width: 1101px) {
    .packaging-section .content-split {
        align-items: stretch;
    }

    .packaging-section .text-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* The photo column is a flex column, so the frame stretches to the row
       height once the text is the taller of the two. */
    .packaging-section .content-split > div:not(.text-column) {
        display: flex;
        flex-direction: column;
    }

    .packaging-section .group-photo {
        flex: 1 1 auto;
    }
}

/* Products page: photos bleed to the edges of the viewport, so the container
   gives up its side padding and each text column carries its own instead. */
.packaging-section > .container {
    padding-left: 0;
    padding-right: 0;
}

.text-column {
    padding-left: 40px;
    padding-right: 40px;
}

.packaging-section h2 {
    font-size: 48px;
    font-weight: 400;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

.packaging-section .section-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.packaging-section .section-text p {
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.packaging-section .section-text h3 {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin-top: 40px;
    margin-bottom: 20px;
}

.packaging-section .section-text ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.packaging-section .section-text li {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.packaging-section .section-text li:before {
    content: "•";
    color: #999;
    position: absolute;
    left: 0;
}

/* Responsive for Packaging Boxes Page */
@media (max-width: 768px) {
    .packaging-section {
        padding: 60px 0;
    }

    .packaging-section h2 {
        font-size: 36px;
        margin-bottom: 30px;
    }

    .packaging-section .section-text h3 {
        font-size: 20px;
    }

    .packaging-section .section-text li {
        font-size: 16px;
    }
}

.intro-section {
    text-align: center;
    margin-bottom: 60px;
}

.intro-section h2 {
    font-size: 48px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.intro-text {
    font-size: 24px;
    color: #666;
    margin-bottom: 30px;
}

.intro-section blockquote {
    font-size: 28px;
    font-style: italic;
    color: #555;
    margin: 0 auto;
    max-width: 800px;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.packaging-section {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.packaging-section:last-child {
    border-bottom: none;
}

.packaging-section h3 {
    font-size: 36px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
}

.packaging-section h4 {
    font-size: 24px;
    font-weight: 400;
    color: #444;
    margin-top: 30px;
    margin-bottom: 15px;
}

.packaging-section p {
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.packaging-section ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.packaging-section li {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.packaging-section li:before {
    content: "•";
    color: #999;
    position: absolute;
    left: 0;
}

/* Responsive for Packaging Content */
@media (max-width: 768px) {
    .packaging-content {
        padding: 40px 20px;
    }

    .intro-section h2 {
        font-size: 36px;
    }

    .intro-text {
        font-size: 20px;
    }

    .intro-section blockquote {
        font-size: 22px;
    }

    .packaging-section h3 {
        font-size: 28px;
    }

    .packaging-section h4 {
        font-size: 20px;
    }

    .packaging-section li {
        font-size: 16px;
    }

    .packaging-categories {
        padding: 40px 20px;
    }

    .packaging-categories h2 {
        font-size: 36px;
    }

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

    .category-card {
        padding: 30px 20px;
    }

    .category-card h3 {
        font-size: 28px;
    }

    .category-links {
        gap: 10px;
    }

    .category-link {
        padding: 8px 16px;
        font-size: 12px;
    }
}


/* Boxes 3 sample: always fill its frame */
img[data-editable-image="samples-boxes-gallery-photo3"] {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover !important;
}



/* Sitewide buttons: white pill with black outline, inverting to black on hover/press */
.btn-primary,
.btn-secondary {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 999px;
}
.btn-primary:hover,
.btn-secondary:hover {
    background: #000;
    color: #fff;
}
.btn-primary:active,
.btn-secondary:active {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Body copy on the Products and Product Samples pages matches the How We Work
   intro paragraph: 19px / 1.5, black — including on mobile, since that
   reference paragraph is inline-styled and never scales down. Titles are
   deliberately left alone. */
/* Product Samples section titles: same 40px/700 as the products page titles */
.samples-section .service-item h2 {
    margin-bottom: 30px;
}

.packaging-section p,
.samples-section .service-item p {
    line-height: 1.5;
    color: #000000;
}

@media (max-width: 768px) {
}


/* Home and products photo + description rows collapse at 1100px rather than
   768px: next to a photo the text column gets too narrow to read well before
   the mobile breakpoint. Scoped with child combinators so the service-item
   rows on services.html and product-samples.html keep their own breakpoint. */
@media (max-width: 1100px) {
    .products-section > .container-w-split > .content-split,
    .services-section > .container-w-split > .content-split {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: auto;
    }

    .packaging-section .content-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .products-section > .container-w-split > .content-split > .content-left,
    .services-section > .container-w-split > .content-split > .content-right {
        padding-top: 40px;
        padding-bottom: 40px;
        max-width: none;
        width: 100%;
    }

    /* Chessboard rows whose desktop order is image-then-text: stacked, they
       read text first, so the collapsed page alternates text, image, text… */
    .content-split-text-first .content-left {
        order: 2;
    }

    .content-split-text-first .content-right {
        order: 1;
    }
}

/* Stacked, the home page photo frame has no row height left to fill, and its
   image is absolutely positioned - so give the frame a ratio of its own.
   Below 769px the fixed mobile height above still applies. */
@media (max-width: 1100px) and (min-width: 769px) {
    .media-frame {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    /* Beside a full-height photo the products page text column needs no
       vertical padding of its own; stacked it does, or the headings sit flush
       against the section top and the photo above them. Matches the 40px the
       home page rows carry, with the grid gap folded into it. */
    .packaging-section .content-split {
        gap: 0;
    }

    .packaging-section .text-column {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* Antraštė, skirta paieškos sistemoms ir ekrano skaitytuvams.
   Vizualiai nematoma, bet skaitoma - skirtingai nei display:none. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Other categories: links from one product category page to the others.
   The photos are decorative (alt=""): the card title already names the link. */
.related-section {
    background-color: #ffffff;
    border-bottom: 1px solid #000000;
}

/* Same spacing as the category title row above it (.service-item columns).
   The padding sits on the container because the global section rule zeroes
   section padding with !important. */
.related-section > .container {
    /* 40px like the title row, plus the 20px side gutter .container keeps */
    padding: 40px 60px;
}

.related-section h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 30px;
    color: #333333;
    text-align: left;
}

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

.related-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

.related-card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ccc;
    overflow: hidden;
    margin-bottom: 18px;
}

.related-card-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card-photo img {
    transform: scale(1.03);
}

.related-card h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111;
    margin-bottom: 16px;
}

.related-card:hover h3 {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .related-section > .container {
        padding: 20px 40px;
    }

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