/* Floating Harbour static build. Own stylesheet, tokens taken from the live design. */
:root {
  --blue: #152637;
  --blue-light: #507b9d;   /* the live #527d9f, a shade darker: 4.5:1 against white for text and buttons, still 3:1 against the navy so links read in copy */
  --grey-light: #f3f5f6;
  --grey-line: #e6e6e6;
  --grey-mid: #9facb6;
  --grey-text: #666;      /* small print on white: readable at 5.7:1 where the light grey is not */
  --yellow: #ffda22;
  --pink: #d87cac;
  --grey-tile: #666;
  --grey-dark: #5b5858;
  --white: #fff;
  --body: "futura-pt", "Futura", "Century Gothic", sans-serif;
  --heads: "sofia-pro", "futura-pt", sans-serif;
  --site-w: 1600px;
  --content-w: 1100px;
  --wide-w: 1400px;
  --gutter: 2rem;
  --radius: 6px;
}
* { box-sizing: border-box; }
html { font-size: 50%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 62.5%; } :root { --gutter: 4rem; } }
body {
  margin: 0; font-family: var(--body); font-size: 2.4rem; line-height: 1.5; color: var(--blue);
  background: var(--white); overflow-x: hidden; text-wrap: pretty;
}
img, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.site-header :focus-visible, .hero :focus-visible, .band--blue :focus-visible, .band--blue-light :focus-visible, .drawer__panel:not(.drawer__panel--light) :focus-visible { outline-color: var(--yellow); }
.band--white :focus-visible, .rte :focus-visible, .form :focus-visible, .breadcrumbs :focus-visible { outline-color: var(--blue-light); }
a { color: var(--blue-light); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--heads); font-weight: 700; line-height: 1.3; margin: .6em 0; }
h1, .h1 { font-size: 4.4rem; }
h2, .h2 { font-size: 2.9rem; }
h3, .h3 { font-size: 2.4rem; }
h4, .h4 { font-size: 2rem; }
@media (min-width: 768px) {
  h1, .h1 { font-size: 5.6rem; }
  h2, .h2 { font-size: 3.4rem; }
  h3, .h3 { font-size: 2.8rem; }
}
p { margin: 0 0 1.1em; }
.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte ul, .rte ol { padding-left: 40px; margin: 2em 0 0; }
.rte li { margin-bottom: .4em; }
.rte figure { margin: 6rem 0; }   /* a picture placed in copy: full column width, 6rem above and below, as live */
.rte figure img { width: 100%; }
.hidden { display: none !important; }
.skip { position: absolute; left: -999px; top: 0; background: var(--yellow); color: var(--blue); padding: 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
.test-banner {
  background: var(--yellow); color: var(--blue); font-size: max(1.4rem, 12px); text-align: center; padding: .7rem var(--gutter);
  position: relative; z-index: 60; min-height: 3.1rem; line-height: 1.7rem;   /* wraps on phones; site.js keeps the header under it */
}

.test-banner__link { background: none; border: 0; padding: 0; margin-left: .6rem; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.test-banner__link:hover, .test-banner__link:focus-visible { text-decoration-thickness: 2px; }

/* Feedback drawer (test builds only) */
.feedback__note, .feedback__thanks, .feedback__error { font-size: 1.7rem; line-height: 1.5; }
.feedback__form input[readonly] { background: var(--grey-light); color: var(--grey-text); }
.feedback__form input[type="file"] { padding: .6rem; font-size: max(1.5rem, 16px); }
.feedback__form .btn { display: block; width: 100%; padding: 1rem 2rem; }
.feedback__error { color: #c0392b; margin-top: 1.6rem; }
.feedback__thanks { font-weight: 700; }

/* Buttons */
.btn {
  display: inline-block; background: var(--blue-light); color: var(--white) !important; border: 2px solid var(--white);
  border-radius: var(--radius); padding: 1rem 4rem; text-decoration: none; font-family: var(--body); font-size: 2.4rem;
  line-height: 1; cursor: pointer; text-align: center; transition: background .25s ease, color .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--blue); }
.btn--secondary { background: transparent; color: var(--blue) !important; border-color: var(--blue-light); }
.btn--secondary:hover { background: var(--blue-light); color: var(--white) !important; }
.btn--small { padding: 1rem 4rem; font-size: 1.8rem; }
.btn--full { display: block; width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; font-weight: 400; color: var(--blue-light); }
.link-arrow svg { width: 1rem; height: 1.7rem; }
.link-arrow:hover { color: var(--blue); }
.actions { display: flex; flex-direction: column; flex-wrap: wrap; gap: 2.4rem; align-items: center; justify-content: center; margin-top: 4rem; }
@media (min-width: 768px) { .actions { flex-direction: row; justify-content: flex-start; } }
.kicker { color: var(--blue-light); font-family: var(--heads); font-weight: 700; font-size: 2rem; line-height: 1.3; margin: 0 0 1.2rem; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1rem 0;
  background: transparent; transition: background-color .6s ease; color: var(--white);
}
.page-product .site-header, .site-header--solid, .site-header.is-scrolled { background: var(--blue); }
body:has(.test-banner) .site-header { top: 3.1rem; }   /* starting value; site.js moves it up as the banner scrolls away */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }   /* page behind an open dialog */
.site-header__inner { max-width: var(--site-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.site-header__logo img { width: 60px; height: auto; transition: width .4s ease; }
@media (min-width: 768px) { .site-header__logo img { width: 90px; } }
.site-header.is-scrolled .site-header__logo img { width: 60px; }
.site-header__actions { display: flex; align-items: center; gap: 1.6rem; }
.icon-btn { background: none; border: 0; padding: 0; color: var(--white); width: 25px; height: 25px; position: relative; cursor: pointer; display: block; }
.icon-btn .icon { width: 100%; height: 100%; fill: currentColor; }
.icon-btn:hover { color: var(--blue-light); }
.icon-btn--menu { width: 28px; }
.icon-btn__count { position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--yellow); color: var(--blue-light); font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; }

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--blue); color: var(--white); overflow: hidden; text-align: center; padding: 0 var(--gutter); }
@media (min-width: 768px) { .hero--small { min-height: 75vh; } }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.hero__content { position: relative; z-index: 1; max-width: 850px; margin: 6rem 1rem; }
.hero__title { font-size: 4.4rem; line-height: 1.3; margin: 1rem 0; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero__subtitle { font-family: var(--body); font-weight: 400; font-size: 2.9rem; line-height: 1.3; margin: 2.4rem 0 0; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero__content .btn { display: inline-block; margin-top: 4rem; }
@media (min-width: 768px) { .hero__title { font-size: 8rem; } .hero__subtitle { font-size: 3.4rem; } }
.hero__scroll { display: block; width: 2.5rem; margin: 6rem auto 0; color: var(--white); position: relative; z-index: 1; filter: drop-shadow(3px 3px 8px rgba(0,0,0,.4)); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Split media sections */
.split { padding: 4rem 0; }
@media (min-width: 768px) { .split { padding: 8rem 0; } }
.split__inner { max-width: var(--site-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 4rem; align-items: start; }
.split__text { text-align: center; }
.split__media { order: 2; min-width: 0; }
.split__media img { width: 100%; }
.split--auto .split__inner { max-width: var(--site-w); }
@media (min-width: 768px) {
  .split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem; }
  .split__media { order: 0; }
  .split--media-right .split__media { order: 2; }
  .split__text { text-align: left; }
}
.split__text h2 { margin-top: 0; margin-bottom: 2.4rem; }
.dropout { position: relative; }
.dropout::before { content: ""; position: absolute; inset: 0; background: var(--pink); z-index: 0; transform: translate(10px, 10px); }
.dropout--left::before { transform: translate(-10px, -10px); }
.dropout > * { position: relative; z-index: 1; }

/* Listings, cards */
.listing { padding: 0; margin: 4rem 0; }
.listing + .listing { margin-top: 6rem; }   /* a heading-only listing sits 6rem above the cards that follow it, as live */
.listing__inner { max-width: var(--site-w); margin: 0 auto; padding: 0 var(--gutter); }
.listing__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-bottom: 1rem; }
.listing__head h2 { margin: 0; }
.listing__arrows { display: flex; gap: .4rem; flex: 0 0 auto; }
.arrow { width: 24px; height: 44px; border: 0; background: none; color: var(--blue); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.arrow svg { width: 14px; height: 24px; }
.arrow--prev { opacity: .35; }
.arrow.is-disabled { opacity: .35; cursor: default; }
.arrow:not(.is-disabled):hover { color: var(--blue-light); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards--scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 15px; padding-bottom: 0; }
.cards--scroll::-webkit-scrollbar { display: none; }
.cards--scroll .cards__item { flex: 0 0 84%; scroll-snap-align: start; }
@media (min-width: 640px) { .cards--scroll .cards__item { flex-basis: calc(50% - 8px); } }
@media (min-width: 1024px) { .cards--scroll .cards__item { flex-basis: calc(33.333% - 10px); } }
@media (min-width: 1200px) { .cards--scroll .cards__item { flex-basis: calc(20% - 12px); } }
.card { display: block; color: var(--blue); text-decoration: none; position: relative; transition: transform .4s ease; margin-bottom: 6rem; }
.card:hover { color: var(--blue); }
.card__image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: transparent; }
.card__image > img:first-child { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__image > img:first-child { transform: scale(1.05); }
.card__image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .4s ease; }
.card:hover .card__image::after { opacity: 1; }
.card__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 50%; max-height: 45%; width: auto; z-index: 1; }
.card__meta { position: absolute; top: 100%; left: 0; right: 0; padding: 1rem 0; }   /* the title box hangs below the picture, inside the card's bottom margin, as live */
.card__title { font-family: var(--heads); font-weight: 700; font-size: 2rem; margin: 0; line-height: 1.35; }
/* On hover the excerpt shows over the bottom of the darkened picture, inside its own card, rather than in the gap above the next row. */
.card__excerpt { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 1.2rem; padding: 0 1.2rem; font-size: 1.8rem; line-height: 1.3; color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.card:hover .card__excerpt, .card:focus-visible .card__excerpt { opacity: 1; }

/* Bands */
.band { padding: 6rem 0; }
.band__inner { max-width: 1124px; margin: 0 auto; padding: 0 var(--gutter); }
.band--blue { background: var(--blue); color: var(--white); }
.band--blue-light { background: var(--blue-light); color: var(--white); }
.band--blue a { color: var(--white); }
.band--blue-light a { color: var(--white); text-decoration: underline; }   /* navy on the mid blue reads at 3:1 only; white underlined passes */
.band--blue .btn, .band--blue-light .btn { border-color: var(--white); }
.band--blue-light .link-arrow { color: var(--white); }
.band--blue .link-arrow { color: var(--white); }
.band--white { padding: 0; margin: 4rem 0; }
.band .actions { align-items: stretch; margin-top: 3.2rem; gap: 2.4rem; }
.band .actions .btn { display: block; }
@media (min-width: 768px) { .band .actions { align-items: center; margin-top: 4rem; } .band .actions .btn { display: inline-block; } }

/* Testimonials */
.testimonials { padding: 0; margin: 4rem 0; }
.testimonials__inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.testimonials__arrows { position: static; }
.testimonials__arrows .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(255,255,255,.6); }
.testimonials__arrows .arrow--prev { left: var(--gutter); }
.testimonials__arrows .arrow--next { right: var(--gutter); }
.quotes { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.quotes::-webkit-scrollbar { display: none; }
.quotes__item { flex: 0 0 100%; scroll-snap-align: start; padding: 5rem 3rem 2rem; }
@media (min-width: 768px) { .quotes__item { padding: 6rem 12rem 3rem; } }
.quote { margin: 0; position: relative; max-width: 77rem; margin: 0 auto; background: var(--blue-light); color: var(--white); padding: 2.4rem 2rem; }
@media (min-width: 768px) { .quote { padding: 2.4rem 6rem; } }
.quote::before { content: ""; position: absolute; inset: 0; background: var(--blue); transform: translate(-10px, 10px); z-index: -1; }
.quote__logo { position: absolute; right: 0; top: 0; transform: translate(25%, -25%); width: 10rem; height: 10rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--pink); padding: 1.5rem; object-fit: contain; z-index: 1; }
@media (min-width: 768px) { .quote__logo { width: 15rem; height: 15rem; } }
.quote blockquote { position: relative; margin: 2.6rem 0; padding: 4rem 2rem; font-size: 2.4rem; line-height: 1.3; text-align: center; }
@media (min-width: 768px) { .quote blockquote { padding: 8rem; } }
.quote blockquote::before, .quote blockquote::after { content: "\201C"; position: absolute; font-family: var(--heads); font-weight: 700; font-size: 9rem; line-height: 1; color: var(--yellow); }
.quote blockquote::before { left: 0; top: 0; }
.quote blockquote::after { right: 0; bottom: 0; transform: rotate(180deg); }
.quote figcaption { margin: 2.4rem 0 0; padding: 2.4rem 6rem 0; border-top: 1px solid var(--white); font-weight: 700; color: var(--white); font-size: 1.8rem; line-height: 1.3; text-align: center; }

/* Product page */
.page-product .page-main { padding-top: 76px; }
.product { padding: 4rem 0; }
@media (min-width: 768px) { .page-product .page-main { padding-top: 111px; } .product { padding: 8rem 0; } }
.product__inner { max-width: 1124px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 4rem; align-items: center; }
.product__gallery { order: 2; }
@media (min-width: 768px) { .product__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem; } .product__gallery { order: 0; } }
.gallery-wrap { position: relative; }
.gallery { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
.gallery__item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--white); }
.gallery__dots { display: flex; justify-content: center; gap: 0; margin: -4.2rem 0 0; position: relative; z-index: 1; height: 3.2rem; }
/* the dot stays the live 8px; the button around it is a 24px tap target */
.gallery__dots button { position: relative; width: 24px; height: 24px; margin: 0; border: 0; background: none; padding: 0; cursor: pointer; }
.gallery__dots button::before { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-light); opacity: .35; }
.gallery__dots button.is-active::before { opacity: 1; }
.product__title { margin: 0 0 2.4rem; font-size: 4.4rem; }
@media (min-width: 768px) { .product__title { font-size: 5.6rem; } }
.product__category { font-size: 2.9rem; font-family: var(--body); font-weight: 400; margin: 0 0 3.5rem; line-height: 1.3; }
@media (min-width: 768px) { .product__category { font-size: 3.4rem; } }
.product__costs-title { text-align: center; font-size: 2rem; margin: 0 0 1rem; }
.prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; margin-bottom: 1rem; }
.price { border: 2px solid var(--blue); border-radius: var(--radius); padding: .6rem .8rem; font-size: 1.6rem; line-height: 1.5; text-align: center; }
.price strong { font-size: 1.6rem; }
.price small { font-size: 13px; }
.price--wide { grid-column: 1 / -1; padding: .4rem 1rem; }
.product .btn--full + .btn--full { margin-top: .5rem; }
.breadcrumbs { border-top: 1px solid var(--blue); border-bottom: 1px solid var(--blue); font-size: 2.4rem; background: var(--white); position: relative; z-index: 2; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0 2.4rem 0 0; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li { flex: 0 0 auto; white-space: nowrap; }
.breadcrumbs a { display: block; position: relative; background: var(--blue-light); color: var(--white); text-decoration: none; padding: 4px 10px; line-height: 1.5; }
.breadcrumbs li + li a { padding-left: 40px; }
.breadcrumbs li + li a::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -30px; border: 30px solid transparent; border-left: 18px solid var(--white); border-right: 0; }
.breadcrumbs a::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -30px; border: 30px solid transparent; border-left: 18px solid var(--blue-light); border-right: 0; z-index: 1; }
.breadcrumbs a:hover { background: var(--blue); }
.breadcrumbs a:hover::after { border-left-color: var(--blue); }
.breadcrumbs span[aria-current] { display: block; padding: 4px 0 4px 30px; color: var(--blue); }
.product-info { padding: 4rem 0; }
@media (min-width: 768px) { .product-info { padding: 8rem 0; } }
.product-info__inner { max-width: 1300px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 4rem; }
@media (min-width: 768px) { .product-info__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem; } }
.product-info__col h2 { margin-top: 0; }
.accordion__item { margin-bottom: 1rem; }
.accordion__item summary { list-style: none; cursor: pointer; background: var(--grey-dark); color: var(--white); padding: 1.5rem 5rem 1.5rem 1.5rem; font-family: var(--heads); font-weight: 700; font-size: 1.6rem; line-height: 1.3; position: relative; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__icon { position: absolute; right: 2rem; top: 50%; width: 1.8rem; height: 1.8rem; transform: translateY(-50%); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: var(--blue-light); left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); transition: transform .3s ease; }
.accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.accordion__item[open] .accordion__icon::after { transform: translateY(-50%) rotate(0); }
.accordion__body { border: 1px solid var(--grey-dark); padding: 1.5rem; font-size: 2.4rem; }

/* Footer */
.site-footer { background: var(--white); border-top: 2px solid var(--blue-light); padding: 4rem 0; font-size: 1.8rem; }
.site-footer__inner { max-width: var(--site-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 3rem; text-align: center; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; align-items: start; } .site-footer__col--address { text-align: left; } .site-footer__col--social { text-align: right; } }
.site-footer a { color: var(--blue-light); }
.site-footer a:hover { color: var(--blue); }
.site-footer__logo img { width: 50px; margin: 0 auto; }
.site-footer__contact { font-weight: 400; }
.site-footer__contact a { text-decoration: none; display: inline-block; padding: .4rem 0; }   /* the stacked links are 24px targets */
.site-footer__small { font-size: 1.8rem; margin: 1.5rem 0 0; }
.social { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 1.6rem; }
.social svg { width: 30px; height: 30px; color: var(--blue-light); }
.social a:hover svg { color: var(--blue); }

/* Drawers (nav, kit list) */
.drawer { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: transparent; margin: 0; inset: 0; }
.drawer::backdrop { background: rgba(21,38,55,.6); }
.drawer__panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 90vw); background: var(--blue); color: var(--white); padding: 7rem 3rem 3rem; overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,.3); transform: translateX(100%); transition: transform .35s ease; }
.drawer[open] .drawer__panel { transform: translateX(0); }
.drawer__panel--light { background: var(--white); color: var(--blue); }
.drawer__close { position: absolute; top: 2rem; right: 2.4rem; width: 3.2rem; height: 3.2rem; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.drawer__title { margin-top: 0; }
.nav { display: flex; flex-direction: column; min-height: 100%; font-family: var(--heads); }
.nav__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav__item { margin-bottom: 2rem; position: relative; }
.nav__link { color: var(--white); text-decoration: none; font-size: 2.8rem; font-weight: 700; }
.nav__link:hover { color: var(--blue-light); }
.nav__toggle { position: absolute; right: 0; top: .2rem; background: none; border: 0; color: var(--white); font-size: 2.8rem; line-height: 1; cursor: pointer; width: 3.6rem; }
.nav__sub { list-style: none; margin: .8rem 0 0; padding: 0 0 0 1.6rem; display: none; }
.nav__item.is-open .nav__sub { display: block; }
.nav__sub a { color: var(--white); text-decoration: none; font-size: 1.9rem; display: block; padding: .5rem 0; font-family: var(--body); }
.nav__sub a:hover { color: var(--blue-light); }
.nav__lower { border-top: 2px solid var(--white); padding-top: 2rem; margin-top: 3rem; display: flex; gap: 1.6rem; align-items: center; font-size: 1.7rem; font-family: var(--body); }
.nav__lower a { color: var(--white); text-decoration: none; }
.nav__logo { width: 45px; }
.kit { list-style: none; margin: 0 0 2rem; padding: 0; font-size: 1.8rem; }
.kit li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--grey-line); }
.kit button { background: none; border: 0; color: var(--blue-light); cursor: pointer; font-size: 1.6rem; }
.kit__empty { font-size: 1.7rem; color: var(--blue); }
.kit__status { font-size: 1.6rem; color: var(--blue-light); margin: 0 0 1.2rem; min-height: 1.2em; }
.kit__status:empty { display: none; }
.kit li.is-flash { background: rgba(255,218,34,.35); transition: background 1s ease; }
.kit li a { color: inherit; text-decoration: none; font-weight: 700; }
.kit li small { display: block; color: var(--grey-text); }
.icon-btn__count[hidden] { display: none; }
.kit__form label { display: block; font-size: 1.6rem; margin-bottom: 1.2rem; }
.kit__form input, .kit__form textarea { width: 100%; font: inherit; font-size: max(1.7rem, 16px); padding: .8rem; border: 1px solid var(--grey-mid); border-radius: 4px; margin-top: .3rem; }

/* Mini (square) cards: clients, sectors, services */
.cards--mini.cards--scroll .cards__item { flex: 0 0 170px; }
.card--mini { display: block; position: relative; width: 170px; height: 170px; overflow: hidden; background: var(--grey-tile); margin-bottom: 0; }
.card--mini__image { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card--mini:hover .card--mini__image { transform: scale(1.08); }
.card--mini__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--white); gap: .6rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.card--mini__logo { max-width: 60%; max-height: 32%; width: auto; }
.card--mini .card__title { color: var(--white); font-size: 1.5rem; line-height: 1.2; margin: 0; text-wrap: balance; overflow-wrap: anywhere; max-height: 5.6em; overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Added for the full site build: new block types and section layouts. */

/* Hero extras: client logo, plain (no picture) heroes, film pages */
.hero__logo { max-height: 113px; max-width: 170px; width: auto; margin: 0 auto; position: relative; z-index: 1; object-fit: contain; }
@media (min-width: 768px) { .hero__logo { max-height: 200px; max-width: 300px; } }
.hero--plain { min-height: 55vh; }
.hero--plain .hero__scroll { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero--plain::after { display: none; }
.hero__link { display: block; color: var(--white); font-weight: 700; margin-top: 1.6rem; }
.embed { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--blue); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed--pending { background: var(--grey-light); }

/* Split media extras */
.media-video { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--blue); }
.split--wider .split__inner { max-width: 1700px; }
@media (min-width: 1024px) { .split--wider .split__inner { gap: 6rem; } }
.split--no-media .split__inner { grid-template-columns: 1fr; max-width: var(--content-w); }
.split--no-media .split__text { text-align: center; }
.media-stack { display: grid; gap: 1rem; }
.media-stack--2, .media-stack--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.media-stack--3 > :first-child { grid-column: 1 / -1; }
.media-stack img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }

/* Listing extras: product tiles, plain (square) tiles, image galleries */
.cards--products { gap: 8px; align-items: stretch; }
@media (min-width: 768px) { .cards--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .cards--products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } }
@media (min-width: 1200px) { .cards--products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; } }
.product-tile { text-align: center; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.product-tile__title { font-family: var(--heads); font-size: 2rem; margin: 1.2rem 0; line-height: 1.3; }
.product-tile__image { display: block; aspect-ratio: 1; background: var(--white); overflow: hidden; margin: 0 0 1.2rem; padding: .8rem 0; }
.product-tile__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.product-tile__image:hover img { transform: scale(1.04); }
.product-tile__image { position: relative; }
.product-tile__badge { position: absolute; left: 0; right: 0; bottom: 0; background: var(--blue); color: var(--white); font-size: 1.4rem; font-weight: 700; padding: .4rem 0; text-align: center; }
.product-tile__stats { padding-top: 0; }
.prices--tile { margin-bottom: 1rem; gap: 5px; }
.product-tile .btn--full { display: block; }
.product-tile .btn--full + .btn--full { margin-top: .5rem; }
.card--plain .card__title { text-align: center; font-family: var(--heads); font-size: 2.2rem; }
.card--plain .card__meta { padding: 1.4rem 0; }
.card__image--square { aspect-ratio: 1; }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.gallery-grid__link { display: block; }
.gallery-grid.cards--scroll { display: flex; }
.gallery-grid.cards--scroll .gallery-grid__item { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 640px) { .gallery-grid.cards--scroll .gallery-grid__item { flex-basis: 45%; } }
@media (min-width: 1024px) { .gallery-grid.cards--scroll .gallery-grid__item { flex-basis: 31%; } }

/* Two column copy */
.twocol__inner { max-width: var(--wide-w); margin: 0 auto; padding: 0 var(--gutter); }
.twocol__heading { text-align: center; margin-top: 0; }
.twocol__intro { max-width: var(--content-w); margin: 0 auto 3rem; text-align: center; }
.twocol__cols { display: grid; gap: 3rem; }
@media (min-width: 768px) { .twocol__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6rem; } }

/* Pull quote */
.pullquote { padding: 0; margin: 4rem 0; }
.pullquote__inner { max-width: 1124px; margin: 0 auto; padding: 0 var(--gutter); }
.pullquote blockquote { margin: 0; background: var(--blue-light); color: var(--white); text-align: center; padding: 4rem 2rem; font-size: 2.4rem; line-height: 1.3; }
@media (min-width: 768px) { .pullquote blockquote { padding: 6rem 6rem; } }
.pullquote figcaption { margin-top: 2.4rem; font-weight: 700; font-size: 1.8rem; color: var(--white); text-align: center; }
.pullquote figure { margin: 0; background: var(--blue-light); padding-bottom: 2.4rem; }

/* Media block (single picture or video with caption) */
.media-block__inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }
.media-block__inner img, .media-block__inner video { width: 100%; }
.media-block figcaption { margin-top: 1.6rem; font-size: 1.8rem; text-align: center; }

/* Banner: full width picture with an angled overlay panel */
.banner { position: relative; overflow: hidden; background: var(--blue); color: var(--white); aspect-ratio: 16 / 9; display: flex; align-items: flex-start; }
.banner__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__overlay { position: relative; z-index: 1; background: var(--blue); padding: 2rem 6rem 2rem 2rem; max-width: min(90rem, 80%); margin: 2.4rem 0; clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0 100%); }
.banner__heading { margin-top: 0; }
.banner__overlay a { color: var(--white); }
.actions--banner { justify-content: flex-start; margin-top: 0; align-items: flex-start; }
.banner .actions .btn { display: inline-block; }

/* Timeline: a central line, blue cards alternating left and right, yellow-ringed dots on the line */
.timeline { padding: 0; margin: 4rem 0; }
.timeline__inner { max-width: var(--site-w); margin: 0 auto; padding: 0 var(--gutter); }
.timeline__heading { text-align: center; margin: 2rem 2rem; }
.timeline__list { list-style: none; margin: 0; padding: 2.4rem 0 2.4rem 3.7rem; position: relative; }
.timeline__list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.6rem; width: 2px; background: var(--blue-light); }
.timeline__item { position: relative; margin: 3.2rem 0; background: var(--blue-light); color: var(--white); padding: 2rem; font-size: 2rem; }
.timeline__item::after { content: ""; position: absolute; left: -2.9rem; top: 50%; width: 18px; height: 18px; margin-top: -13px; border-radius: 50%; background: var(--white); border: 4px solid var(--yellow); }
.timeline__title { margin: 0; color: var(--white); font-size: 2rem; line-height: 1.3; }
.timeline__item p { margin: 1rem 0 0; font-size: 2rem; }
@media (min-width: 768px) {
  .timeline__list { padding: 2.4rem 0; }
  .timeline__list::before { left: 50%; margin-left: -1px; }
  .timeline__item { width: 31.3rem; margin: 4rem 0; }
  .timeline__item:nth-child(odd) { margin-left: calc(50% + 2.9rem); }
  .timeline__item:nth-child(odd)::after { left: -2.9rem; margin-left: -9px; }
  .timeline__item:nth-child(even) { margin-left: calc(50% - 31.3rem - 2.9rem); }
  .timeline__item:nth-child(even)::after { left: auto; right: -2.9rem; margin-right: -9px; }
}

/* Hire section: floating "Show Categories" button and left-hand category panel */
.btn--yellow { background: var(--yellow); color: var(--blue) !important; border-color: var(--yellow); }
.btn--yellow:hover, .btn--yellow:focus-visible { background: var(--white); border-color: var(--white); }
.btn--floating { position: fixed; left: 2.4rem; bottom: 2.4rem; z-index: 40; font-weight: 700; }
.drawer--left .drawer__panel { right: auto; left: 0; transform: translateX(-100%); box-shadow: 10px 0 40px rgba(0,0,0,.3); }
.drawer--left[open] .drawer__panel { transform: translateX(0); }
.drawer__panel--left .nav__link { font-size: 2.2rem; }
.drawer__panel--left .nav__link[aria-current] { color: var(--yellow); }
.subnav__children { list-style: none; margin: .6rem 0 0; padding: 0 0 0 1.6rem; }
.subnav__children a { color: var(--white); text-decoration: none; font-size: 1.7rem; display: block; padding: .3rem 0; font-family: var(--body); }
.subnav__children a:hover, .subnav__children a[aria-current] { color: var(--yellow); }

/* Film player: "Play Film" buttons and stills open one shared dialog */
.btn--play { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 4rem; padding: 1.6rem 4rem; text-transform: uppercase; font-weight: 700; animation: pulse 2s ease-in-out infinite; }
.hero__content .btn--play { display: inline-flex; }   /* the hero's inline-block buttons would collapse the icon */
.btn--play__icon { position: relative; display: inline-block; vertical-align: middle; width: 2.8rem; height: 2.8rem; border: 2px solid currentColor; border-radius: 50%; flex: 0 0 auto; }
.btn--play__icon::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .6rem 0 .6rem 1rem; border-color: transparent transparent transparent currentColor; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.playbox { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--blue); cursor: pointer; overflow: hidden; }
.playbox__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.playbox:hover .playbox__thumb { transform: scale(1.04); }
.playbox__icon { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid var(--white); background: rgba(21,38,55,.25); box-shadow: 0 4px 20px rgba(0,0,0,.35); }
.playbox__icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent var(--white); }
.player-dialog { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); width: 94vw; }
.player-dialog::backdrop { background: rgba(21,38,55,.92); }
.player-dialog__close { position: fixed; top: 8px; right: 8px; width: 44px; height: 44px; background: none; border: 0; color: var(--white); cursor: pointer; padding: 8px; z-index: 1; }
.player-dialog__close svg { display: block; width: 100%; height: 100%; }
@media (min-width: 768px) { .player-dialog__close { top: 16px; right: 16px; } }

/* Product extras */
.product__note { font-size: 1.6rem; margin: -.4rem 0 1.2rem; color: var(--grey-text); }

/* Forms (contact page, kit list page) */
.form label, .kit__form label { display: block; font-size: 1.7rem; margin-bottom: 1.4rem; }
.form input, .form textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: max(1.8rem, 16px);   /* 16px or more so iOS does not zoom on focus */ padding: 1rem; border: 1px solid var(--grey-mid); border-radius: 4px; margin-top: .3rem; }
.form__row { display: grid; gap: 0 2rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kit--page { font-size: 2rem; }
.kit__message { margin: 3rem 0; }

/* Search: title and box in the dark block, results below */
.hero__content--tight { max-width: 453px; }
.hero__title--search { font-size: 4.4rem; margin: 0 0 3.4rem; }
@media (min-width: 768px) { .hero__title--search { font-size: 5.6rem; } }
.search__input { width: 100%; font: inherit; font-size: 2.4rem; line-height: 1; padding: 1rem 1rem 1rem 4rem; height: 48px; border: 1px solid var(--grey-mid); border-radius: 0; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152637' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l6 6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 1.2rem center / 2rem 2rem; color: var(--blue); }
.search__input::placeholder { color: var(--grey-text); }
.search__scope { display: flex; justify-content: center; gap: 1rem; margin-top: .5rem; font-weight: 700; font-size: 2.4rem; }
.search__scope label { display: inline-flex; align-items: center; gap: .5rem; }
.search__scope input { width: 18px; height: 18px; margin: 0 .3rem 0 .5rem; accent-color: var(--blue-light); }
.search-results { padding: 4rem 0; min-height: 8rem; }
.search__status { color: var(--grey-mid); margin: 0 0 2rem; }
.search__results { list-style: none; margin: 0; padding: 0; }
.search__results li { padding: 1.6rem 0; border-bottom: 1px solid var(--grey-line); }
.search__results a { font-weight: 700; text-decoration: none; }
.search__results p { margin: .4rem 0 0; font-size: 1.8rem; }
.search__results .search-more { border-bottom: 0; padding: 2.4rem 0 0; text-align: center; }
.search__results .search-more[hidden] { display: none; }

/* Kit list page */
.kit-page { padding: 4rem 0 8rem; }
.kit-page__title { margin: 0 0 2.4rem; }
.kit-page .form { max-width: 47rem; }
.kit-page .form label, .kit__form label { font-weight: 700; font-size: 2rem; margin-bottom: 2rem; }
.form__required { color: #c0392b; margin-left: .2rem; }
.kit__message { margin: 3rem 0; }
.drawer__foot { margin-top: auto; padding-top: 2rem; border-top: 2px solid var(--blue-light); }
.drawer__panel--light { display: flex; flex-direction: column; }

/* 404 page */
.notfound { padding: 20rem 0 10rem; min-height: 70vh; }
.notfound .kicker { color: var(--yellow); }
.notfound h1 { margin-top: 0; }
.notfound .actions { justify-content: flex-start; }
.notfound__search { margin-top: 4rem; }
.notfound .search__row input { border-color: var(--white); }