/* Antislip site styles. Colours and sizes are set once here and used everywhere. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/open-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/open-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/open-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --primary: #ffcb00;
  --primary-dark: #ccA200;
  --secondary: #cc1616;
  --ink: #020817;
  --black: #393e41;
  --neutral: #f8f1e8;
  --neutral2: #f2e8cf;
  --white: #fff;
  --header-height: 56px;
  --shadow-bottom: 0 10px 10px -10px rgba(0, 0, 0, .2);
  --shadow-top: 0 -10px 10px -10px rgba(0, 0, 0, .2);
}
@media (min-width: 758px) { :root { --header-height: 73px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, ol, ul, li, figure, figcaption, footer, header, nav, section, main, aside, button { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6 { font: inherit; }
html { overflow-x: clip; }
body { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--white); overflow-x: clip; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { background: none; color: inherit; font: inherit; cursor: pointer; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; flex: none; }

/* Layout */
.container { position: relative; display: flex; flex-direction: column; align-self: center; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 758px) { .container { padding-inline: 24px; } }
.section { position: relative; padding-block: 32px; }
@media (min-width: 1024px) { .section { padding-block: 64px; } }
.section--flush { padding-block: 0; }
.section > .container { align-items: center; }
.heading { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 1em; text-transform: uppercase; }
@media (min-width: 758px) { .heading { font-size: 36px; } }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--white); }
.site-header__bar { position: relative; display: flex; align-items: center; height: var(--header-height); }
.site-header__bg { position: absolute; inset: 0; background: var(--primary); box-shadow: var(--shadow-bottom); opacity: var(--header-opacity, 0); transition: opacity .15s linear; z-index: -1; }
.site-header.is-solid .site-header__bg { opacity: 1; }
.site-header__inner { flex-direction: row; justify-content: space-between; align-items: center; }
.logo { display: inline-flex; align-items: center; width: 100px; }
.logo img { width: 100%; object-fit: contain; }
@media (min-width: 758px) { .logo { width: 118px; } }
.main-nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 758px) { .main-nav { display: flex; } }

.nav-link { position: relative; display: inline-flex; padding-block: 8px; line-height: 1.2; text-align: left; transition: opacity .2s ease-in-out; }
.nav-link::before { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: currentColor; opacity: 0; transition: opacity .2s ease-in-out; }
.nav-link:hover { opacity: .6; }
.nav-link:hover::before { opacity: .6; }
.nav-link.is-selected::before { opacity: 1; }

.burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; margin-left: 16px; padding: 12px; }
.burger span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 758px) { .burger { display: none; } }

/* Services dropdown */
.mega { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-height)); overflow-y: auto; padding-block: 64px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-bottom); z-index: 10; }
.mega[hidden] { display: none; }
.mega__grid { display: grid; grid-template-columns: 1fr; column-gap: 32px; row-gap: 64px; grid-auto-rows: max-content; }
@media (min-width: 758px) { .mega__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mega__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .mega__grid { grid-template-columns: repeat(4, 1fr); } }
.mega__column { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.mega .nav-link { font-size: 14px; }
.mega .nav-link.is-selected { font-weight: 700; }
.mega__category { width: 100%; min-height: 48px; }
.mega__category::before { opacity: 1; }
.mega__category span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mega__category.is-selected::before { background: var(--secondary); }
.mega__item.is-selected { color: var(--secondary); }

/* Mobile menu */
.side-menu { position: fixed; inset: 0 0 0 auto; z-index: 90; width: 300px; max-width: 100%; overflow-y: auto; padding-block: 72px 56px; background: var(--white); font-size: 1.15em; visibility: hidden; transform: translateX(100%); transition: transform .5s, visibility .5s; }
.side-menu.is-open { visibility: visible; transform: none; }
.side-menu__item { display: block; padding: 8px 24px; line-height: 1.2; background: var(--white); color: #000; }
.side-menu__item.is-disabled { opacity: .6; }
.side-menu__item--1 { padding-left: 16px; border-top: 1px solid var(--secondary); }
.side-menu__item--2 { padding-left: 32px; background: var(--neutral); }
.side-menu__item--3 { padding-left: 48px; background: var(--neutral2); }
.side-menu__item--1.is-selected { background: #e6e6e6; }
.side-menu__item--2.is-selected { background: #ecd9c0; }
.side-menu__item--3.is-selected { background: #e8d6a8; }
.side-menu__overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .3); }
.side-menu__overlay[hidden] { display: none; }
body.menu-open { overflow: hidden; }

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 500px; padding-block: 140px 100px; }
@media (min-width: 758px) { .hero { padding-block: 150px 100px; } }
@media (min-width: 1024px) { .hero { min-height: 60vh; } }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .6; }
.hero .container { z-index: 1; align-items: flex-start; }
.hero__title { font-size: 36px; font-weight: 800; line-height: 1.2; color: var(--white); }
@media (min-width: 758px) { .hero__title { font-size: 50px; } }
.hero__title span { display: block; margin-bottom: 1em; }
.hero__title strong { color: var(--primary); font-weight: inherit; }
.button { display: inline-flex; justify-content: center; gap: .4em; min-width: 150px; padding: 8px 24px; border-radius: 5px; background: var(--primary); color: #000; line-height: 1.2; transition: background-color .2s ease-in-out; }
.button:hover { background: var(--primary-dark); }

/* Breadcrumbs */
.breadcrumbs { flex-direction: row; flex-wrap: wrap; align-self: center; margin-block: 16px; }
.breadcrumbs__item { display: flex; align-items: flex-start; flex-wrap: nowrap; }
.breadcrumbs__divider { margin-inline: .5em; line-height: 2.2em; }
.breadcrumbs .nav-link { align-items: flex-start; gap: .4em; max-width: 134px; color: var(--black); }
.breadcrumbs .nav-link .icon { position: relative; top: .15em; width: .9em; height: .9em; }
.breadcrumbs .nav-link span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumbs .is-ghosted { opacity: .6; }
.breadcrumbs .is-ghosted:hover { opacity: .6; }

/* Page content */
.content { padding-block: 32px 64px; }
.content > * + * { margin-top: 32px; }
@media (min-width: 758px) { .content > * + * { margin-top: 64px; } }
.content > .text-container + .text-container { margin-top: 0; }
.content > .text-section:first-child { margin-top: 20px; }

.text-container { max-width: 766px; }
.text-container > .heading { margin-top: 1.6em; margin-bottom: .8em; }
.text-container > p, .text-container > ul, .text-container > ol { margin-bottom: 1.6em; }
.text-container a { color: var(--secondary); text-decoration: underline; transition: opacity .2s ease-in-out; }
.text-container a:hover { opacity: .7; }
.text-container em { font-style: italic; }
.text-container strong { font-weight: 700; }
.text-container ul, .text-container ol { padding-left: 1.2em; }
.text-container li ul, .text-container li ol { margin-bottom: .8em; margin-top: .4em; }
.text-container ol { list-style: decimal; }
.text-container ol ol { list-style: lower-alpha; }
.text-container ul { list-style: disc; }
.text-container ul ul { list-style: circle; }
p { line-height: 1.5; }

/* Text sections */
.text-section { background: var(--neutral2); text-align: center; overflow-x: clip; }
.text-section--beams { background: var(--white); }
.text-section__stripes { position: absolute; top: 0; right: 0; width: 240px; }
.bar { position: absolute; height: 40px; }
.bar--top { top: 0; right: 0; width: 67vw; background: var(--secondary); border-radius: 10px 0 0 10px; transform: translateY(-50%); }
.bar--bottom { bottom: 0; left: 0; width: 34vw; background: var(--primary); border-radius: 0 10px 10px 0; transform: translateY(50%); }

/* Figures */
.figure { position: relative; display: flex; flex-direction: column; width: 100%; }
.figure__image { width: 100%; height: auto; aspect-ratio: 1224 / 514; object-fit: cover; }
.figure__caption { align-self: flex-end; margin-left: auto; padding: 8px 16px; background: var(--neutral); border-bottom-left-radius: 10px; font-size: 14px; font-style: italic; }
@media (min-width: 375px) { .figure__caption { width: calc(100% - 64px); } }
@media (min-width: 758px) { .figure__caption { width: 66%; padding-inline: 24px; font-size: 16px; } }
.figure mux-player { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }

/* Icon cards */
.icon-cards { display: grid; align-items: stretch; align-self: stretch; grid-template-columns: 1fr; gap: 16px; grid-auto-rows: max-content; }
@media (min-width: 375px) { .icon-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 758px) { .icon-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .icon-cards { grid-template-columns: repeat(4, 1fr); } }
.icon-card { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 16px 16px 40px; background: var(--primary); border-radius: 10px; color: #000; text-align: center; overflow: hidden; }
.icon-card .icon { width: 100px; height: 100px; }
.icon-card a { text-decoration: underline; transition: opacity .2s ease-in-out; }
.icon-card a:hover { opacity: .6; }
.icon-card p + p { margin-top: .4em; }

/* Page links */
.page-links { background: var(--neutral2); }
.card-link { display: block; transition: transform .4s ease-in-out; }
.card-link:hover { transform: scale(.98); }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.card--grid { min-height: 500px; }
.card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__body { position: relative; margin-top: auto; padding: 32px 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6) 90%); color: var(--white); }
.card__body::before { content: ""; position: absolute; top: 16px; left: 0; width: 64px; height: 4px; background: var(--secondary); transform: translateY(-50%); }
.card__title { font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 1em; text-transform: uppercase; }
@media (min-width: 758px) { .card__title { font-size: 24px; } }
.card__text { font-size: 14px; }

.card-row { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-row > * { flex: 0 0 auto; }
.card-row__spacer { width: calc((100% - (320px * var(--links-count))) / 2); padding-inline: 4px; }
@media (min-width: 758px) { .card-row__spacer { padding-inline: 8px; } }
.card-row .card-link { width: 320px; padding-inline: 8px; }
.card-row .card { min-height: 230px; height: 100%; }

/* Masonry: site.js arranges items into columns. Without JavaScript it falls back to CSS columns. */
.masonry { align-self: stretch; column-count: 3; column-gap: 16px; }
.masonry > * { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 1024px) { .masonry { column-count: 2; } }
@media (max-width: 500px) { .masonry { column-count: 1; } }
.masonry.is-arranged { display: flex; gap: 16px; column-count: auto; }
.masonry__column { flex: 1 1 0; min-width: 0; }
.masonry__column > * { margin-bottom: 16px; }
.masonry__column:nth-child(even) { margin-top: 64px; }

/* Gallery */
.gallery-item { display: block; cursor: zoom-in; transition: transform .4s ease-in-out; }
.gallery-item:hover { transform: scale(.98); }
.gallery-item img { width: 100%; }
.gallery-item figure { position: relative; }
.gallery-item figcaption { position: absolute; right: 0; bottom: 0; padding: 8px 16px; background: var(--neutral); border-top-left-radius: 10px; font-size: 14px; font-style: italic; color: #000; }
@media (min-width: 758px) { .gallery-item figcaption { padding-inline: 24px; font-size: 16px; } }

.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .92); color: var(--white); }
.lightbox::backdrop { background: transparent; }
.lightbox__frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 56px 16px 24px; }
.lightbox img { min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__caption { text-align: center; }
.lightbox__button { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 32px; line-height: 1; color: var(--white); }
.lightbox__close { top: 4px; right: 4px; }
.lightbox__prev { top: 50%; left: 4px; transform: translateY(-50%); }
.lightbox__next { top: 50%; right: 4px; transform: translateY(-50%); }

/* Downloads */
.downloads { background: var(--primary); }
.downloads > .container { max-width: 900px; }
.downloads .heading { color: #000; }
.download-link { display: flex; justify-content: space-between; align-items: flex-start; gap: .4em; width: 100%; padding: 8px 32px; background: var(--white); color: #000; line-height: 1.2; transition: background-color .2s ease-in-out; }
.download-link + .download-link { margin-top: 8px; }
.download-link:hover { background: #e6e6e6; }
.download-link .icon { position: relative; top: .15em; width: .9em; height: .9em; }

/* Highlighted text */
.highlight { display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 1200px; margin-inline: auto; padding: 40px 16px; }
@media (min-width: 758px) { .highlight { flex-direction: row; padding: 50px 24px; } }
@media (min-width: 1024px) { .highlight { padding-block: 100px; } }
.highlight__images { display: flex; flex-direction: column; flex: none; width: calc(100% + 32px); margin-inline: -16px; }
@media (min-width: 758px) { .highlight__images { width: 66%; } }
@media (min-width: 1024px) { .highlight__images { width: 50%; } }
.highlight__main { width: 90%; aspect-ratio: .72; object-fit: cover; }
@media (min-width: 758px) { .highlight__main { width: 100%; } }
.highlight__sub { align-self: flex-end; width: 50%; aspect-ratio: 1.4; margin-top: -33%; object-fit: cover; }
@media (min-width: 758px) { .highlight__sub { width: 72%; margin-right: -24px; } }
.highlight__text { align-self: flex-end; width: 100%; margin-top: -16px; padding: 60px 16px; background: var(--neutral); z-index: 1; }
@media (min-width: 758px) { .highlight__text { align-self: center; width: 66%; margin-top: 40px; padding-inline: 24px; } }
@media (min-width: 1024px) { .highlight__text { align-self: flex-start; width: 50%; margin-top: 80px; } }

/* Colour samples */
.samples { position: relative; margin-block: 4%; }
.samples__bg { position: absolute; top: 0; bottom: 0; left: -50%; width: 200%; background: var(--neutral); transform: rotate(4deg); z-index: -1; }
.samples__inner { display: flex; flex-direction: column; width: 100%; }
@media (min-width: 758px) { .samples__inner { flex-direction: row; } }
.samples__text { flex: 1; }
@media (min-width: 758px) { .samples__text { padding-right: 16px; } }
.samples__grid { display: grid; flex: 1; gap: 8px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: max-content; margin-top: 32px; }
@media (min-width: 375px) { .samples__grid { gap: 16px; } }
@media (min-width: 758px) { .samples__grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; } }
@media (min-width: 1024px) { .samples__grid { grid-template-columns: repeat(4, 1fr); } }
.sample img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sample figcaption { padding: 8px; background: var(--primary); border-bottom-left-radius: 10px; color: #000; font-size: 12px; font-style: italic; }

/* Contact */
.contact { display: flex; flex-direction: column; width: 100%; }
@media (min-width: 758px) { .contact { flex-direction: row-reverse; gap: 64px; } }
.contact__info { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; min-width: 0; }
.contact__map { flex: 1 1 0; width: 100%; aspect-ratio: 1; margin-top: 32px; border: 0; }
@media (min-width: 758px) { .contact__map { margin-top: 0; min-width: 0; } }
.contact-link { display: inline-flex; align-items: flex-start; gap: .4em; padding-block: 8px; line-height: 1.2; color: var(--black); transition: opacity .2s ease-in-out; }
.contact-link:hover { opacity: .6; }
.contact-link .icon { position: relative; top: .15em; width: .9em; height: .9em; color: var(--secondary); }
@media (min-width: 758px) { .contact-link { font-size: 24px; } }
.contact-link--address { margin-top: 32px; }
@media (min-width: 758px) { .contact-link--address { margin-top: 64px; } }
.contact .socials { margin-top: 1em; }
@media (min-width: 758px) { .contact .socials { font-size: 40px; } }

.socials { display: inline-flex; gap: .65em; font-size: 24px; }
.socials a { display: block; line-height: 0; transition: transform .4s ease-in-out; }
.socials a:hover { transform: scale(.98); }

/* Footer */
.site-footer { position: relative; background: var(--black); border-top: 16px solid var(--primary); box-shadow: var(--shadow-top); color: var(--white); }
.site-footer__inner { padding-block: 56px 96px; }
.site-footer__grid { display: grid; align-items: stretch; grid-template-columns: 1fr; gap: 16px; width: 100%; }
@media (min-width: 375px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 758px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer__column { position: relative; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 758px) { .site-footer__column--centered { align-items: center; justify-content: center; } }
.site-footer__title { color: var(--primary); font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 1em; text-transform: uppercase; }
.site-footer a.nav-link { color: var(--white); }
.site-footer .socials { margin-top: 24px; }
.footer-logo { display: inline-flex; width: 100px; }
@media (min-width: 758px) { .footer-logo { width: auto; height: 64px; flex: none; } .footer-logo img { height: 100%; width: auto; } }
.copyright { position: absolute; left: 50%; bottom: -60px; font-size: 12px; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.site-footer__logo--small { display: flex; margin-top: 24px; }
.site-footer__logo--large { display: none; }
@media (min-width: 758px) { .site-footer__logo--small { display: none; } .site-footer__logo--large { display: flex; } }