/* =====================================================================
   Acrylic Pros — inner pages
   Loaded after home.css (shared chrome, type, buttons, reveals), which is
   locked. Values reproduce aquatic-show.com inner templates at 1425px.
   ===================================================================== */

.tx-pxxlarge { font-size: 2.4rem; line-height: 1.083; }
.tx-uni8 { font-size: .8rem; line-height: 1.2; }
.tx-pxsmall { font-size: 1.2rem; line-height: 1.5; }
.-clrnavy { color: var(--clrnavy); }
.-hidden { display: none !important; }

@media (min-width: 1025px) {
  .m-textContent { gap: 4.5rem; }
}
.m-textContent ul { display: grid; gap: 1rem; padding-left: 3rem; font-size: 1.4rem; }
.m-textContent ul li { position: relative; }
.m-textContent ul li::before {
  content: "";
  position: absolute; top: .9rem; right: calc(100% + 1.2rem);
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background-color: currentColor;
}
.m-textContent p a { font-weight: 600; text-decoration: underline; }

.a-image { position: relative; display: block; }
.a-image img { width: 100%; height: auto; }
.a-image.-radius { overflow: hidden; border-radius: 1rem; }
.a-image.-shadow { box-shadow: 0 2.4rem 3.4rem #071e32; }
img[data-fade] { transition: opacity .15s ease-in-out; }
.js img[data-fade]:not(.-loaded) { opacity: 0; }

.a-button.-bggold { background-color: var(--clrcta); color: var(--clrctaink); }
.a-button.-txupp > span { text-transform: uppercase; }

/* Content column: lg-column-13 lg-offset-3 of the 16-column row */
.p-col { width: 100%; }
@media (min-width: 1025px) {
  .p-col { width: 81.25%; margin-left: 18.75%; }
}

/* Section eyebrow */
.a-sectionTitle { margin-bottom: 3rem; color: var(--clraccent); font-weight: 400; } /* most sit on navy */
/* On the white sections, the deep shade: 14px on white needs 4.5:1 and the
   light shade used on navy would vanish there. The other three (Vision,
   Team, Process) sit on navy (client, 3 Oct). */
:is(.o-universeAbout, .o-universeResponsability, .o-expertiseApproach) .a-sectionTitle { color: var(--clraccentdeep); }
@media (min-width: 1025px) { .a-sectionTitle { margin-bottom: 4rem; } }

.b-twoColumns { display: grid; }
@media (min-width: 1025px) { .b-twoColumns { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   Page transition — two sheets, then the new page. The first sheet up is
   the light logo blue, the second (on top of it) navy (client, 3 Oct:
   "light colour first, then the dark"; it was navy, then gold).
   ===================================================================== */
.a-panel {
  position: fixed; top: 101vh; left: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.a-panel.-top { z-index: 11; background-color: var(--clraccent); }
.a-panel.-bottom { z-index: 12; background-color: var(--clrnavy); }
.is-entering .a-panel { transform: translateY(-100%); }
.is-entering .t-page { z-index: 13; transform: translateY(100vh); }
.is-entering .a-loader { display: none; }

/* =====================================================================
   Inner hero (-cloud and plain)
   ===================================================================== */
.m-hero.-inner .m-hero__content { padding: 14.8rem 1.4rem 24rem; }
.m-hero__wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; }
.m-hero.-inner .m-hero__title { margin-bottom: 0; }
.m-hero.-inner .tx-h1 { padding: 1.2rem 1rem; }
.m-hero__textContent { padding: 0 2.4rem; }
.m-hero__categoryTagsList {
  display: flex; flex-direction: column; gap: .8rem; align-items: center;
  margin-bottom: 2rem;
}
.js .m-hero__categoryTagsList { opacity: 0; }
@keyframes enter-popin-up {
  from { opacity: 0; transform: translateY(3rem); }
  to { opacity: 1; transform: translate(0); }
}
.m-hero.is-inview .m-hero__categoryTagsList { animation: enter-popin-up 1s var(--ease) 1s forwards; }
.a-tag.-hero { padding: .5rem 1rem; background-color: #ffffff1a; color: #fff; line-height: normal; }
.m-hero__background img { width: 100%; height: 100%; object-fit: cover; }
.m-hero .a-cloud { z-index: 2; }
.m-hero.-inner .m-hero__scrollDown { position: absolute; bottom: 1.6rem; left: 50%; margin: 0; transform: translateX(-50%); }

.m-hero.-cloud { padding: 16.2rem 0 48rem; }
.m-hero.-cloud .m-hero__content { padding: 0; }
.m-hero.-cloud .m-hero__title { margin-bottom: 3.2rem; }
.m-hero.-cloud .m-hero__scrollDown { position: relative; bottom: 0; left: auto; margin: 3.2rem auto 0; transform: none; }

@media (min-width: 1025px) {
  .m-hero.-inner .m-hero__content { min-height: 0; padding: 32.6rem 2rem 27.4rem; }
  .m-hero__wrapper { width: 75%; }
  .m-hero__textContent { padding: 0; }
  .m-hero__categoryTagsList { flex-direction: row; margin-bottom: 5rem; }
  .m-hero.-inner .m-hero__scrollDown { bottom: 2.4rem; }

  .m-hero.-cloud { min-height: calc(100vh + 36rem); padding: 0; }
  .m-hero.-cloud .m-hero__content { min-height: 100vh; padding: 0; }
  .m-hero.-cloud .m-hero__title { margin-bottom: 2.1rem; }
  .m-hero.-cloud .m-hero__scrollDown { position: absolute; top: calc(100vh - 6.4rem); left: 50%; margin: 0; transform: translateX(-50%); }
}

/* =====================================================================
   Section navigation with progress rings (desktop)
   ===================================================================== */
.m-pageSummary__container { position: relative; }
.m-pageSummary {
  --color: #fff;
  position: absolute; top: 0; left: 50%; z-index: 5;
  width: 100%; max-width: 144rem; height: 100%;
  padding: 8rem 2rem 0;
  color: var(--color);
  pointer-events: none;
  transition: color 1s var(--ease), opacity 1s var(--ease);
  transform: translate(-50%);
}
.-dark .m-pageSummary { --color: #00284D; }
.menu-open .m-pageSummary { opacity: 0; }
.m-pageSummary__wrapper { width: 12.5%; height: 100%; }
.m-pageSummary__list {
  position: sticky; top: 20rem; z-index: 2;
  display: grid; gap: 1.5rem;
  padding-bottom: 20rem;
  pointer-events: all;
}
.m-pageSummary__stepItem { --progress: 0; }
.m-pageSummary__stepLink { display: flex; flex-direction: row; gap: 1.6rem; align-items: center; }
.m-pageSummary__stepLink span { opacity: .5; transition: opacity 1s var(--ease); }
.m-pageSummary__stepItem.-is-active span,
.m-pageSummary__stepLink:focus-visible span { opacity: 1; }
.m-pageSummary__progress { flex-shrink: 0; width: 1.5rem; height: 1.5rem; transform: rotate(-450deg); }
.m-pageSummary__progress circle { fill: none; stroke: var(--color); stroke-width: .1rem; }
.m-pageSummary__progress circle.-base { opacity: .2; }
.m-pageSummary__progress circle.-filled {
  stroke-dasharray: 37.7142857143;
  stroke-dashoffset: calc(6.2857142857 * (6 - 6 * var(--progress) / 100));
}
@media (max-width: 1024px) { .m-pageSummary { display: none; } }

/* Scroll-coloured quote */
.m-textScroll__content { width: 100%; margin: 0; } /* some are <blockquote>: drop the UA indent */
.m-textScroll__content .tx-h4, .m-textScroll__content p { font-weight: 600; }
.m-textScroll__content span { transition: none; }
@media (min-width: 1025px) { .m-textScroll__content { width: 61.5384615385%; } }

/* =====================================================================
   ABOUT (their "Our universe")
   ===================================================================== */
.o-universeAbout { position: relative; z-index: 1; padding-top: 3.2rem; background-color: #fff; color: var(--clrnavy); scroll-margin-top: 12rem; }
.o-universeAbout__wrapper { position: relative; }
.o-universeAbout__firstImage { width: 75%; margin-bottom: 4.8rem; }
/* Client, 21 Sept: these two used to be full-width, one above the other,
   below 1025px and only sit side by side on desktop. The pair wrapper now
   holds them side by side at every width -- see .o-universeAbout__imagePair. */
.o-universeAbout__imagePair { display: flex; align-items: flex-end; gap: 2.4rem; margin-top: 12rem; }
.o-universeAbout__secondImage { width: 63.6363636364%; margin: 0; }
.o-universeAbout__thirdImage { width: 36.3636363636%; margin: 0; }
.o-universeAbout__quote { margin-top: 0; }
.o-universeAbout__footer {
  position: relative;
  overflow: hidden;
  margin-top: 8rem;
  /* Client, 18 Sept: was 45.5rem/33.3rem — 788px of padding around one line,
     which left the statement stranded in the middle of a black band. */
  padding: 20rem 0 16rem;
  background-color: #0c0a09;
  color: #fff;
  text-align: center;
}
.o-universeAbout__footer::before {
  content: "";
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 100%; height: 100%;
  background: linear-gradient(0deg, #0009 46.76%, #0000 88.81%);
}
.o-universeAbout__footerImage { position: absolute; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.o-universeAbout__footerImage video { width: 100%; height: 100%; object-fit: cover; }
.o-universeAbout__footerText { position: relative; z-index: 2; width: 100%; will-change: transform; }
/* Client, 18 Sept: this used to be `br { display: none }` below 1025px, which
   drops the break without putting a space in its place — the statement ran
   together as "We love fish.Acrylic Prosaquariums." It is written as a
   three-row stack, so it sets as one at every width. */
.o-universeAbout__footerText { max-width: 20ch; margin-inline: auto; line-height: 1.12; }
.a-cloud.-top { top: -.1rem; bottom: auto; transform: rotate(180deg); }
.o-universeAbout__footer .a-cloud, .o-universeTeam .a-cloud, .o-expertiseProcess .a-cloud { z-index: 2; }
/* Client, 19 Sept: the band needs the same cloud edge at the bottom as it has
   at the top, or it ends on a hard black-to-white line. The base .a-cloud is
   already bottom-anchored and unrotated, so -bottom only has to undo what
   -top would otherwise have set. */
.o-universeAbout__footer .a-cloud.-bottom { top: auto; bottom: -.1rem; transform: none; }
/* The -media variant is the band with no statement written over it: on the
   scratch-removal page it is purely a video strip. Two things have to change,
   and both only because the text is gone.

   The clouds are height:100% of the band, which is fine when one of them edges
   a tall band and a headline occupies the middle. With two of them in a short
   band they meet and the footage disappears behind cloud texture — completely
   at 390px. Capping the drawn height turns each back into an edge. Same
   technique as .o-expertiseProcess .a-cloud.-bottom below.

   The padding existed to hold the headline clear of those edges. With no
   headline it was 580px of empty box, so the height is set directly instead.

   The cloud cap has two bounds and each one binds at a different width: the
   percentage decides it on a phone, the rem on a desktop. Tune them together
   and check both widths, or one of them silently goes back to being wrong.

   Client, 19 Sept: back to the original 30% cloud, on a taller band. Those two
   were only ever in conflict because the band was short — at 40rem/68rem the
   clouds keep their original weight (about 60% of the band at 390px, 41% at
   1440px) while the clear middle still nearly doubles, 88px to 160px on a
   phone. */
.o-universeAbout__footer.-media { padding: 0; height: clamp(40rem, 50vw, 68rem); }
.o-universeAbout__footer.-media .a-cloud { background-size: 150% min(14rem, 30%); }
/* ...and when the band follows a legacy .section, that section's own bottom
   padding already supplies the gap. The margin on top of it was doubling up
   into roughly 250px of dead white. Scoped to the sibling pair, so the About
   page — where the band follows a .row and the margin is doing real work — is
   untouched. */
.section + .o-universeAbout__footer { margin-top: 0; }
/* -film (scratch-removal page, client 21 Sept): the band carries the client's
   scratch film, which has burned-in captions, so cropping it to a strip and
   laying the dark gradient and clouds over it hid most of it. The film now
   sits uncropped (16:9) in the middle of the band, above the clouds; the
   clouds only edge the band's padding. */
.o-universeAbout__footer.-media.-film { height: auto; padding: 8rem 1.4rem; }
.o-universeAbout__footer.-film::before { display: none; }
.o-universeAbout__footer.-film .o-universeAbout__footerImage {
  position: relative; z-index: 3;
  overflow: hidden;
  max-width: 120rem; height: auto;
  margin: 0 auto;
  border-radius: 1.2rem;
  aspect-ratio: 16 / 9;
  box-shadow: 0 3rem 6rem -2rem rgba(0, 0, 0, .8);
}
@media (min-width: 1025px) { .o-universeAbout__footer.-media.-film { padding: 16rem 2rem; } }
/* Scratch Removal (client, 3 Oct): no cloud edges, so none of the padding they
   needed -- a clean navy band that matches the page's other dark sections. */
.o-universeAbout__footer.-film.-clean { padding: 6rem 1.4rem; background-color: var(--clrdarkblue); }
@media (min-width: 1025px) { .o-universeAbout__footer.-media.-film.-clean { padding: 9rem 2rem; } }
/* Sound toggle on the band's film: an icon-only glass circle, bottom right. */
.o-universeAbout__footer.-film .o-universeAbout__footerImage { pointer-events: auto; }
.m-soundToggle {
  position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.8rem; height: 4.8rem;
  border-radius: 50%;
  background-color: rgba(0, 13, 26, .55);
  color: #fff;
  outline: .1rem solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  cursor: pointer;
  transition: background-color .4s var(--ease), outline-color .4s var(--ease);
}
.m-soundToggle .a-svg { width: 2rem; height: 2rem; }
.m-soundToggle__waves { display: none; }
.m-soundToggle.-on .m-soundToggle__waves { display: inline; }
.m-soundToggle.-on .m-soundToggle__off { display: none; }
.m-soundToggle:focus-visible { outline: 2px solid var(--clraccent); outline-offset: 2px; }
@media (hover: hover) and (any-pointer: fine) {
  .m-soundToggle:hover { background-color: var(--clraccent); outline-color: var(--clraccent); color: var(--clraccentink); }
}
@media (min-width: 1025px) { .m-soundToggle { right: 2rem; bottom: 2rem; } }
@media (min-width: 1025px) {
  .o-universeAbout { padding-top: 8rem; }
  .o-universeAbout__firstImage { position: absolute; top: 18.3rem; right: 0; width: 30.7692307692%; margin: 0; }
  .o-universeAbout__quote { width: 61.5384615385%; margin-top: 8rem; }
  .o-universeAbout__footer { margin-top: 11.6rem; padding: 34rem 0 24rem; }
}

.o-universeVision { position: relative; padding: 6rem 0 25rem; color: #fff; scroll-margin-top: 6rem; }
.o-universeVision__subtitle { width: 75%; margin-bottom: 4rem; }
.o-universeVision .b-twoColumns { gap: 2.4rem; margin-bottom: 8rem; }
.o-universeVision__visual { position: relative; width: 100%; margin-bottom: 8rem; aspect-ratio: 1068 / 630; }
.o-universeVision__visual .a-image { position: absolute; }
.o-universeVision__visual .a-image:nth-child(1) { top: 14%; left: 2%; width: 34%; transform: rotate(-8deg); }
.o-universeVision__visual .a-image:nth-child(2) { top: 4%; left: 30%; width: 38%; z-index: 1; transform: rotate(3deg); }
.o-universeVision__visual .a-image:nth-child(3) { top: 18%; left: 62%; width: 34%; transform: rotate(10deg); }
.o-universeVision__visual img { aspect-ratio: 4 / 5; object-fit: cover; }
.o-universeVision__textImage p { margin-top: 2.4rem; }
.o-universeVision__textImage .b-twoColumns { gap: 6.4rem; }
.o-universeVision__contact {
  display: flex; flex-direction: column; gap: 2.8rem;
  width: 100%;
  padding: 3.2rem;
  border: .1rem solid rgba(0, 13, 26, .1);
  border-radius: 1rem;
  background-color: #fff;
  color: var(--clrnavy);
}
.o-universeVision__contact .a-button { padding-right: 6rem; padding-left: 6rem; }
.o-universeVision > .a-cloud { z-index: 2; }
@media (min-width: 1025px) {
  .o-universeVision { padding: 14rem 0 37rem; }
  .o-universeVision__subtitle { width: 38.4615384615%; margin-bottom: 8rem; }
  .o-universeVision .b-twoColumns { gap: 9.0909090909%; width: 84.6153846154%; margin-bottom: 11.5rem; }
  .o-universeVision__visual { width: 92.3076923077%; margin-bottom: 16rem; }
  .o-universeVision__textImage p { margin-top: 5.6rem; }
  .o-universeVision__textImage .b-twoColumns { grid-template-columns: 41.6666666667% 50%; gap: 8.3333333333%; width: 92.3076923077%; }
  .o-universeVision__contact { flex-direction: row; align-items: center; justify-content: space-between; width: 92.3076923077%; padding: 3.2rem 4.8rem; }
}

.o-universeResponsability { position: relative; z-index: 1; padding: 1rem 0; background-color: #fff; color: var(--clrnavy); scroll-margin-top: 20rem; }
.o-universeResponsability__subtitle { width: 100%; margin-bottom: 4.8rem; }
.o-universeResponsability__introduction { margin-bottom: 4.8rem; }
.o-universeResponsability__introduction p, .o-universeResponsability__section p,
.o-universeResponsability__section li { font-size: 1.4rem; line-height: 1.5; }
.o-universeResponsability__visual { width: 100%; margin-bottom: 5.4rem; }
.o-universeResponsability__visual img { aspect-ratio: 957 / 499; object-fit: cover; }
.o-universeResponsability__section { display: grid; gap: 2rem; }
.o-universeResponsability__section:not(:last-child) { margin-bottom: 4.8rem; padding-bottom: 4.8rem; border-bottom: .1rem solid #CBCBCB; }
.o-universeResponsability__section ul { padding-left: 3rem; }
.o-universeResponsability__section li::before { top: .6rem; transform: scale(.6); }
@media (min-width: 641px) { .o-universeResponsability__subtitle { width: 61.5384615385%; } }
@media (min-width: 1025px) {
  .o-universeResponsability { padding: 5rem 0 10rem; }
  .o-universeResponsability__introduction { width: 38.4615384615%; margin: 0 0 12rem 46.1538461538%; }
  .o-universeResponsability__visual { width: 84.6153846154%; margin-bottom: 6.8rem; }
  .o-universeResponsability__section { grid-template-columns: 41.6666666667% 41.6666666667%; gap: 8.3333333333%; width: 92.3076923077%; }
  .o-universeResponsability__section:not(:last-child) { margin-bottom: 8.8rem; padding-bottom: 8.8rem; }
  .o-universeResponsability__section ul { padding: 0; }
}

.o-universeTeam { position: relative; overflow: hidden; color: #fff; scroll-margin-top: -37.5rem; }
.o-universeTeam__topImage { position: relative; overflow: hidden; margin-bottom: 6rem; padding-bottom: 123%; }
.o-universeTeam__topImage img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.o-universeTeam__subtitle { display: grid; gap: 2.4rem; }
.o-universeTeam__subtitle p { font-size: 1.4rem; line-height: 1.5; }
.o-universeTeam__gallery { display: grid; gap: 3.2rem; margin: 3.2rem 0 6.4rem; }
.o-universeTeam__galleryText { margin-bottom: 3.2rem; font-size: 1.4rem; line-height: 1.5; }
.o-universeTeam__galleryThirdImage { width: 75%; margin-left: 25%; }
.o-universeTeam .m-textScroll { margin-bottom: 14.2rem; padding-top: 5.6rem; border-top: .1rem solid #194c7b; }
.o-universeTeam .m-textScroll__cite { display: block; margin-top: 3.2rem; font-size: 1.4rem; line-height: 1.5; opacity: .7; }
.o-universeTeam__members { width: 100%; margin-bottom: 4.8rem; }
.o-universeTeam__membersTitle { margin-bottom: 3.6rem; }
.m-sliderTeam__grid { display: grid; gap: 2rem; }
.m-sliderTeam__slideInner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 2rem;
  border: 1px solid rgba(203, 203, 203, .2);
  border-radius: 1rem;
  background-color: #cbcbcb0a;
}
.m-sliderTeam__quote { flex-grow: 1; margin-bottom: 3.2rem; font-size: 1.6rem; line-height: 1.5; }
.m-sliderTeam__slideName { margin-bottom: 1rem; font-weight: 600; font-size: 2.2rem; line-height: 1.2; }
@media (min-width: 641px) { .m-sliderTeam__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) {
  .o-universeTeam__topImage { margin-bottom: 14rem; padding-bottom: 83%; }
  .o-universeTeam__subtitle { width: 38.4615384615%; }
  .o-universeTeam__gallery { gap: 0; margin: 0 0 12.4rem; }
  .o-universeTeam__galleryFirstImage { width: 46.1538461538%; margin: -16.5rem 0 0 46.1538461538%; }
  .o-universeTeam__gallerySecondImage { width: 38.4615384615%; margin-top: -9.6rem; }
  .o-universeTeam__galleryThirdImage { width: 38.4615384615%; margin-left: 46.1538461538%; }
  .o-universeTeam__galleryText { width: 38.4615384615%; margin: -1.6rem 0 8.8rem 46.1538461538%; }
  .o-universeTeam .m-textScroll { width: 92.3076923077%; margin-bottom: 20.8rem; padding-top: 10.5rem; }
  .o-universeTeam .m-textScroll__content { width: 75%; }
  .o-universeTeam__members { width: 92.3076923077%; margin-bottom: 13rem; }
}

/* =====================================================================
   PROCESS (their "Our expertise")
   ===================================================================== */
.o-expertiseApproach { position: relative; z-index: 1; padding: 3.6rem 0 6.1rem; background-color: #fff; color: var(--clrnavy); scroll-margin-top: 12rem; }
.o-expertiseApproach__paragraph { margin-bottom: 5rem; }
/* Client, 21 Sept: these two used to be one-per-row below 1025px and only
   sit side by side on desktop. grid-template-columns now applies at every
   width, so the pairing is unconditional -- only the desktop-only stagger
   below (nth-child(2) margin-top) is a pure aesthetic flourish. */
/* Client, 21 Sept: same height, top-aligned, no diagonal stagger. The two
   images have fixed aspect ratios (3:2 and 957:1295 below) that never match
   each other, so equal height needs the column WIDTHS to compensate. Column
   width is proportional to its fr share, and height = width / aspect-ratio,
   so setting the columns to the two images' own aspect-ratio denominators
   (1295 and 638 = 3/2 x 957/1295, i.e. how many "957 units" fit a 3:2 image
   of the same height) makes width/aspect-ratio come out identical for both
   -- exact, not eyeballed. Change either aspect-ratio below and these two
   numbers need recalculating to match, or the heights drift apart again. */
.o-expertiseApproach__images {
  display: grid;
  grid-template-columns: 1295fr 638fr;
  column-gap: 4rem;
}
.o-expertiseApproach__image img { aspect-ratio: 3 / 2; object-fit: cover; }
.o-expertiseApproach__image:nth-child(2) img { aspect-ratio: 957 / 1295; }
@media (min-width: 1025px) {
  .o-expertiseApproach { padding: 8rem 0 5rem; }
  .o-expertiseApproach__paragraph { width: 69.2307692308%; margin-bottom: 12.6rem; }
  .o-expertiseApproach__images { width: 84.6153846154%; }
}

.o-expertiseProcess { position: relative; padding-top: 31rem; color: #fff; scroll-margin-top: -33rem; }
.o-expertiseProcess__title { margin-bottom: 14.4rem; }
.o-expertiseProcess__visual { position: relative; z-index: 0; width: 100%; }
.o-expertiseProcess__visual img { aspect-ratio: 3 / 2; object-fit: cover; }
.m-expertiseStep__container { display: grid; gap: 2rem; }
.m-expertiseStep { --progress: 0; display: grid; grid-template-columns: 25% 75%; margin-bottom: 2.4rem; }
.m-expertiseStep__stepper { display: flex; flex-direction: column; align-items: center; }
.m-expertiseStep .a-tag {
  position: sticky; top: 50%; z-index: 1;
  padding: .5rem 1rem;
  background: none;
  color: #fff;
  white-space: nowrap;
  isolation: isolate;
}
.m-expertiseStep .a-tag::before, .m-expertiseStep .a-tag::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.m-expertiseStep .a-tag::before { z-index: -2; background-color: var(--clrnavy); transform: scaleY(3); }
.m-expertiseStep .a-tag::after { z-index: -1; border-radius: 3.2rem; background-color: #ffffff1a; }
.m-expertiseStep__stepperSvg { display: block; width: .2rem; height: 100%; margin-top: 1.8rem; overflow: visible; }
.m-expertiseStep__stepperSvg line { stroke: #fff; stroke-width: 2; }
.m-expertiseStep__drawingLine { stroke-dasharray: 2; }
.m-expertiseStep__placeholderLine { opacity: .3; stroke-dasharray: 2; }
.m-expertiseStep__maskLine { stroke: var(--clrnavy) !important; stroke-dasharray: 1000; stroke-dashoffset: calc(-240 * var(--progress)); }
.m-expertiseStep__content { display: flex; flex-direction: column; gap: 5.2rem; margin-top: 3.2rem; }
.m-expertiseStep__textContent { display: flex; flex-direction: column; gap: 2rem; }
.m-expertiseStep .m-textContent { gap: 2rem; }
/* Client feedback 2026-09-19: the staggered collage that overlapped each image
   onto the one above it is gone. Every image now fills the column and is
   centred, so no step leaves an empty gutter down one side. */
.m-expertiseStep__imagesContent { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.m-expertiseStep__imagesContent .a-image { width: 100%; border-radius: 1rem; overflow: hidden; box-shadow: 0 2.4rem 3.4rem #071e32; }
.m-expertiseStep__imagesContent img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.o-expertiseProcess .a-cloud.-bottom { top: auto; bottom: -.1rem; }
@media (max-width: 1024px) {
  .o-expertiseProcess .a-cloud.-bottom { background-size: 150% min(10rem, 20%); }
}
@media (min-width: 1025px) {
  .o-expertiseProcess { padding-top: 52.8rem; }
  .o-expertiseProcess__title { width: 84.6153846154%; margin-bottom: 23.2rem; }
  .m-expertiseStep__container { gap: 5.6rem; }
  .m-expertiseStep { grid-template-columns: 8.3333333333% 83.3333333333%; gap: 8.3333333333%; width: 92.3076923077%; margin-bottom: 14rem; }
  .m-expertiseStep .a-tag::before { transform: scaleY(3.75); }
  .m-expertiseStep__stepperSvg { margin-top: 3.2rem; }
  .m-expertiseStep__content { display: grid; grid-template-columns: 40% 50%; gap: 10%; margin-top: 0; }
  .m-expertiseStep__imagesContent { margin-top: 1.2rem; }
}

.o-expertiseClientsAwards { position: relative; z-index: 1; overflow: hidden; padding: 4rem 0 5.2rem; background-color: #fff; color: var(--clrnavy); scroll-margin-top: 10rem; }
.o-expertiseClientsAwards .o-universeResponsability__section { width: 100%; }
.m-expertiseClients { margin-top: 9rem; }
.m-expertiseClients__title { width: 69.2307692308%; margin-bottom: 8rem; }
.m-sliderClients__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.m-sliderClients__grid .m-client { width: auto; margin: 0; }
@media (min-width: 641px) { .m-sliderClients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) {
  .o-expertiseClientsAwards { padding: 10rem 0 22.7rem; }
  .m-expertiseClients { margin-top: 14rem; }
  .m-sliderClients__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; width: 92.3076923077%; }
}

/* =====================================================================
   SERVICES index
   ===================================================================== */
.t-productsindex__content { padding: 3.75rem 0; background-color: #fff; color: var(--clrnavy); }
.t-productsindex__content .row { flex-flow: column wrap; }
.t-productsindex__selector { margin-bottom: 3rem; }
.t-productsindex__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; }
.t-productsindex__grid .m-sliderProducts__slide { display: grid; }
.t-productsindex__grid .m-sliderProducts__slide > a { display: grid; border-radius: 1rem; }
.t-productsindex__more { margin: 6rem auto 0; }
.t-productsindex__footer { margin: 6rem auto 0; color: #a8a8a8; text-align: center; }
.t-productsindex__footer a { color: var(--clrnavy); text-decoration: underline; }
@media (min-width: 641px) {
  .t-productsindex__grid { grid-template-columns: repeat(2, 1fr); }
  .t-productsindex__footer { width: 75%; }
}
@media (min-width: 1025px) {
  .t-productsindex__content { padding: 6rem 0; }
  .t-productsindex__selector { width: 75%; margin-left: 12.5%; margin-bottom: 9rem; }
  .t-productsindex__grid { grid-template-columns: repeat(4, 1fr); }
  .t-productsindex__footer { width: 62.5%; }
}
@media (min-width: 1367px) {
  .t-productsindex__selector { width: 62.5%; margin-left: 18.75%; }
}

/* =====================================================================
   GALLERY (their "Our references")
   ===================================================================== */
.o-referenceGrid {
  position: relative;
  display: flex; flex-flow: column wrap;
  width: 100%;
  padding: 16rem 2rem 4rem;
  background-color: var(--clrdarkblue);
  color: #fff;
  user-select: none;
}
.o-referenceGrid::before {
  content: "";
  position: fixed; top: 0; left: 0; z-index: 99;
  width: 100%; height: 16rem;
  background: linear-gradient(180deg, #000d1a, #000d1a00);
  pointer-events: none;
}
.o-referenceGrid__title, .o-referenceGrid__noResults {
  position: absolute; top: 50vh; left: 50%;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* Client, 1 Oct: the centred "Gallery" word no longer shows at all -- the
   grid is the page. The h1 stays in the DOM for the document outline and for
   screen readers; only .o-referenceGrid__noResults still uses the centred
   position above. */
.o-referenceGrid__title {
  font-weight: 600; white-space: nowrap;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.o-referenceGrid__list { position: relative; display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; }
.o-referenceGrid__item { position: relative; z-index: 1; display: none; width: 100%; opacity: 0; }
html:not(.js) .o-referenceGrid__item { display: block; opacity: 1; }
.o-referenceGrid__item.-active { display: block; }
.o-referenceGrid__item.-active.-visible { opacity: 1; }
.o-referenceGrid__item.-backside { opacity: .5 !important; }
.o-referenceGrid .m-referenceCard {
  transition: transform .4s var(--ease), opacity 2s var(--ease) var(--delay, 0ms);
  will-change: transform;
}
.o-referenceGrid.-hoverable .m-referenceCard { transition: transform .4s var(--ease), opacity .7s ease-in-out; }
.o-referenceGrid__button { justify-self: center; }
.o-referenceGrid + .o-breadcrumb { background-color: var(--clrdarkblue); }

.m-referenceCard { position: relative; z-index: 3; overflow: hidden; border-radius: 1rem; text-align: center; }
.m-referenceCard.-bggreen { background-color: #767b43; }
.m-referenceCard.-bgocre { background-color: #643232; }
.m-referenceCard.-bgorange { background-color: #d1701e; }
.m-referenceCard.-bgpurple { background-color: #5c175e; }
.m-referenceCard.-bgblue { background-color: #17206b; }
.m-referenceCard.-fullart { background-color: #0c0a09; }
.m-referenceCard__link {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 3.2rem 2.4rem;
  aspect-ratio: 1 / 1.25;
}
.m-referenceCard__link h2 { font-weight: 400; }
.m-referenceCard__link h2 b { font-weight: 600; }
.m-referenceCard__open {
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
.m-referenceCard__open::before {
  content: "";
  position: absolute; top: 0; left: 0; z-index: 10;
  width: 100%; height: 100%;
}
.m-referenceCard__open:focus-visible { outline: none; }
.m-referenceCard__open:focus-visible::before { outline: 2px solid var(--clraccent); outline-offset: -4px; border-radius: 1rem; }
.m-referenceCard__logoWrapper {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  margin: auto auto 1.2rem;
  border-radius: 50%;
  background-color: #fff6;
  -webkit-backdrop-filter: blur(.4rem);
  backdrop-filter: blur(.4rem);
}
.m-referenceCard__logoWrapper::before {
  content: "";
  width: 2.6rem; height: 1.5rem;
  background-color: #fff;
  -webkit-mask: url("fin.png") center / contain no-repeat;
  mask: url("fin.png") center / contain no-repeat;
}
.m-referenceCard__meta { text-transform: uppercase; }
.m-referenceCard__meta strong { font-weight: 600; }
.m-referenceCard__image {
  position: absolute; top: 50%; left: 50%; z-index: -1;
  width: 57%; height: 57%;
  border-radius: 1rem;
  object-fit: cover;
  pointer-events: none;
  transform: translate(-50%, -47.5%);
}
.m-referenceCard.-fullart .m-referenceCard__image { width: 100%; height: 100%; border-radius: 0; transform: translate(-50%, -50%); }
/* Gallery tiles: the photo fills the whole card, no caption (client request). */
.m-referenceCard.-photo { background-color: #0c0a09; }
.m-referenceCard.-photo .m-referenceCard__open { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; width: auto; height: auto; max-height: none; }
.m-referenceCard.-photo .m-referenceCard__image {
  width: 100%; height: 100%;
  border-radius: 0;
  transform: translate(-50%, -50%) scale(1.001);
  transition: transform .8s var(--ease);
}
@media (hover: hover) and (any-pointer: fine) {
  .m-referenceCard.-photo:hover .m-referenceCard__image { transform: translate(-50%, -50%) scale(1.06); }
}
.m-referenceCard.-fullart .m-referenceCard__link::before {
  content: "";
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #000d1900 59.55%, #000d19b3);
}
.m-referenceCard.-fullart .m-referenceCard__link h2 { text-shadow: 0 1px 12px rgba(0, 13, 25, .6); }
@media (hover: hover) and (any-pointer: fine) {
  .o-referenceGrid__item:hover { z-index: 96; }
  .m-referenceCard:hover { z-index: 4; transform: scale(1.05); }
}

.m-referencesSelect {
  position: sticky; right: 1.6rem; bottom: 2.4rem; left: 1.6rem; z-index: 98;
  margin-top: 3rem;
  padding: 1rem;
  border-radius: 3.2rem;
  background-color: #000d1acc;
  box-shadow: 0 4px 14px #00000040;
}
.m-referencesSelect__currentFilter {
  display: flex; flex-flow: row nowrap; gap: 2.4rem; align-items: center;
  width: 100%;
  padding: 1.6rem;
  border-radius: 3.2rem;
  background-color: #ffffff1a;
  color: #fff;
  font-weight: 600;
  font-size: 1.3333rem;
  text-transform: uppercase;
}
.m-referencesSelect__currentLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-referencesSelect__currentFilter .a-svg { width: .6rem; height: .6rem; margin-left: auto; transition: transform .4s var(--ease); }
.m-referencesSelect.-open .m-referencesSelect__currentFilter .a-svg { transform: rotate(180deg); }
.m-referencesSelect__list {
  --height: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s var(--ease);
  overscroll-behavior: contain;
}
.m-referencesSelect.-open .m-referencesSelect__list {
  overflow: auto;
  max-height: min(var(--height), 32rem);
  scrollbar-color: rgba(255, 255, 255, .4) transparent;
  scrollbar-width: thin;
}
.m-referencesSelect li:not(:last-child) { border-bottom: .1rem solid rgba(143, 143, 143, .2); }
.m-referencesSelect__item {
  display: block;
  width: 100%;
  padding: 1.4rem 0;
  color: #fff;
  font-weight: 600;
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase;
  transition: opacity .4s var(--ease);
}
.m-referencesSelect__item.-current { opacity: .5; pointer-events: none; }
.m-referencesSelect li:last-child .m-referencesSelect__item { margin-bottom: 1.6rem; }
@media (min-width: 641px) {
  .m-referencesSelect { right: auto; bottom: 7rem; left: 50%; width: 34.4rem; transform: translate(-50%); }
  .o-referenceGrid__list { grid-template-columns: repeat(2, 1fr); }
  .o-referenceGrid__button { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
  .m-referencesSelect { bottom: 2.4rem; }
  .m-referencesSelect.-open .m-referencesSelect__list { max-height: min(var(--height), 100vh - 24rem); }
  .o-referenceGrid__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1367px) {
  .o-referenceGrid__list { grid-template-columns: repeat(4, 1fr); }
}

/* Lightbox */
.m-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  padding: 2rem;
  background-color: rgba(0, 13, 26, .96);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.m-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.m-lightbox__bar, .m-lightbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.m-lightbox__foot { flex-direction: column; text-align: center; }
.m-lightbox__title { font-weight: 600; font-size: 2rem; line-height: 1.3; }
.m-lightbox__stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 2rem 0; }
.m-lightbox__img {
  width: auto; max-width: 100%; height: auto; max-height: 100%;
  border-radius: 1rem;
  object-fit: contain;
  transition: opacity .3s var(--ease), transform .6s var(--ease);
}
.m-lightbox.is-swapping .m-lightbox__img { opacity: 0; transform: scale(.98); }
.m-lightbox__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.8rem; height: 4.8rem;
  border-radius: 50%;
  background-color: #ffffff1a;
  color: #fff;
  outline: 1px solid rgba(255, 255, 255, 0);
  transition: background-color .4s var(--ease), outline .4s var(--ease);
}
.m-lightbox__btn:hover, .m-lightbox__btn:focus-visible { background-color: #ffffff26; outline: 1px solid rgba(255, 255, 255, .4); }
.m-lightbox__btn .a-svg { width: 1.6rem; height: 1.6rem; }
.m-lightbox__nav { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); }
.m-lightbox__nav.-prev { left: 0; }
.m-lightbox__nav.-prev .a-svg { transform: rotate(180deg); }
.m-lightbox__nav.-next { right: 0; }
.m-lightbox__hint { color: #ffffff99; font-size: 1.2rem; }
.m-lightbox__count { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
@media (min-width: 1025px) {
  .m-lightbox { padding: 3.4rem 4rem; }
  .m-lightbox__stage { padding: 2rem 8rem; }
}

/* =====================================================================
   CONTACT / QUOTE form
   ===================================================================== */
.t-contact__content { background-color: #fff; color: var(--clrnavy); }
.o-contactForm { width: 100%; padding: 5.4rem 0 5.2rem; }
.o-contactForm__title { margin-bottom: 6.4rem; font-weight: 600; text-align: center; }
.o-contactForm__sub { display: block; max-width: 64rem; margin: 1.6rem auto 0; color: #4f4f4f; font-weight: 400; font-size: 1.7rem; line-height: 1.5; letter-spacing: 0; }
.o-contactForm__form { display: flex; flex-flow: row wrap; }
.o-contactForm__leftPanel, .o-contactForm__rightPanel { display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-content: start; width: 100%; }
.o-contactForm__rightPanel { margin-top: 4rem; }
.o-contactForm__rgpdPanel { display: flex; flex-direction: column; width: 100%; margin-top: 5.2rem; }
.o-contactForm__rgpdPanel .a-button { margin: 4rem auto 0; }
.o-contactForm__status { margin-top: 2rem; text-align: center; }
.o-contactForm__status:empty { display: none; }
.o-contactForm__status[data-state="error"] { color: #eb0045; }
.o-contactForm__status[data-state="info"] { padding: 2rem; border-radius: 1rem; background-color: #fafafa; }
.o-contactForm__status[data-state="success"] { color: #6bbc2b; }
.o-contactForm__status a { font-weight: 600; text-decoration: underline; }
.o-contactForm__note { margin-top: 2rem; color: #a8a8a8; font-size: 1.2rem; text-align: center; }
.o-contactForm__note a { text-decoration: underline; }

.a-inputField { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.a-inputField__label { display: block; margin-bottom: 1rem; padding: 0; }
.a-labelText.-group { margin-bottom: 3.2rem; font-size: 1.8rem; line-height: 1.5; }
.a-inputField__attr { color: #eb0045; text-decoration: none; }
.a-inputField__hint { display: block; margin-top: .6rem; color: #7a7a7a; font-size: 1.2rem; line-height: 1.5; }
.a-inputField input[type="text"], .a-inputField input[type="email"], .a-inputField input[type="tel"],
.a-inputField input[type="number"], .a-inputField select, .a-inputField textarea {
  width: 100%;
  padding: 1.6rem 2rem;
  border: .1rem solid #CBCBCB;
  border-radius: .4rem;
  background-color: #fff;
  color: var(--clrnavy);
  box-shadow: none;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.5;
  appearance: none;
}
.a-inputField select {
  padding-right: 4.8rem;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='6' viewBox='0 0 11 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.72 5.6a.72.72 0 0 0 .51-.21L10.66 1A.36.36 0 0 0 10.4.4H1.04a.36.36 0 0 0-.26.6l4.43 4.39c.13.14.32.21.51.21z' fill='%2300284D'/%3E%3C/svg%3E") right 2rem center / 1rem no-repeat;
}
.a-inputField ::placeholder { color: #bababa; opacity: 1; }
.a-inputField input:focus, .a-inputField select:focus, .a-inputField textarea:focus,
.a-inputField input:hover, .a-inputField select:hover, .a-inputField textarea:hover { border-color: var(--clrnavy); outline: none; }
.a-inputField input:focus-visible, .a-inputField select:focus-visible, .a-inputField textarea:focus-visible { box-shadow: 0 0 0 1px var(--clrnavy); }
.a-inputField textarea { min-height: 14rem; resize: vertical; }
.a-inputField.-error input, .a-inputField.-error select, .a-inputField.-error textarea { border-color: #eb0045; color: #eb0045; }
.a-inputField__error { margin-top: .5rem; color: #eb0045; font-size: 1.2rem; line-height: 1.5; }
.a-inputField__error:empty { display: none; }
.a-inputField__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.a-inputField__row .a-inputField__label { font-size: 1.2rem; margin-bottom: .6rem; }

.a-inputField__buttons { display: flex; flex-flow: row wrap; gap: 1rem; }
.a-inputField__button { position: relative; }
.a-inputField__button input { position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; margin: 0; opacity: 0; }
.a-inputField__value { position: relative; display: inline-block; font-size: 1.6rem; line-height: 1.5; cursor: pointer; }
.a-inputField__value::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2rem; height: 2rem;
  margin: -.2rem 2rem 0 0;
  border: .1rem solid #BABABA;
  border-radius: .4rem;
  background-color: #fff;
}
.a-inputField__value::after {
  content: "";
  position: absolute; top: .5rem; left: .4rem;
  width: 1.2rem; height: .6rem;
  border-bottom: .2rem solid currentColor;
  border-left: .2rem solid currentColor;
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  transform: rotate(-90deg) scale(0);
}
.a-inputField__button input:checked + .a-inputField__value::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.a-inputField__button input:focus-visible + .a-inputField__value::before { outline: 2px solid var(--clraccent); outline-offset: 2px; }
.a-inputRadio .a-inputField__value::before { width: 1.6rem; height: 1.6rem; border-radius: 9rem; }
.a-inputRadio .a-inputField__value::after {
  top: 50%; left: .4rem;
  width: .8rem; height: .8rem;
  border: 0;
  border-radius: 9rem;
  background-color: var(--clrnavy);
  transform: translateY(calc(-50% + 1px)) scale(0);
}
.a-inputRadio .a-inputField__button input:checked + .a-inputField__value::after { transform: translateY(calc(-50% + 1px)) scale(1); }
.a-inputField.-divided { padding-bottom: 3.2rem; border-bottom: .1rem solid #CBCBCB; }
.a-inputField.-error .a-inputField__value::before { border-color: #eb0045; }

.o-contactForm__consent .a-inputField__button { padding-left: 4.2rem; }
.o-contactForm__consent .a-inputField__button input { left: 0; }
.o-contactForm__consent .a-inputField__value::before { position: absolute; top: 0; left: 0; margin: 0; transform: translate(-4.2rem); }
.o-contactForm__consent .a-inputField__value::after { left: -3.8rem; }
.o-contactForm__consent .a-inputField__value a { font-weight: 600; text-decoration: underline; }

.a-inputField__upload {
  display: flex; gap: 1.6rem; align-items: flex-start;
  padding: 1.6rem 2rem;
  border: .1rem dashed #CBCBCB;
  border-radius: .4rem;
  font-size: 1.4rem;
  line-height: 1.5;
}
.a-inputField__upload .a-svg { width: 2.2rem; height: 2.2rem; transform: rotate(180deg); }
.a-inputField__upload a { font-weight: 600; text-decoration: underline; }

.o-contactInformations { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; margin-top: 6.4rem; }
.o-contactInformations__item { padding: 5rem; background-color: #fafafa; }
.o-contactInformations__item h2 { margin-bottom: 1.8rem; font-weight: 400; }
.o-contactInformations__wrapper { display: grid; gap: 1rem; }
/* Client, 18 Sept: same fix as the footer. The phone number was 12px text —
   the smallest type on the site carrying the most important action. */
.o-contactInformations__wrapper a {
  display: inline-flex; align-items: center;
  min-height: 4.4rem;
  font-weight: 700; font-size: 2.2rem; line-height: 1.2; letter-spacing: -.01em;
  text-decoration: underline;
  text-decoration-color: rgba(0, 13, 26, .3);
  text-underline-offset: .5rem;
  transition: text-decoration-color .2s ease, transform .16s var(--ease);
}
.o-contactInformations__wrapper a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .o-contactInformations__wrapper a:hover { text-decoration-color: currentColor; }
}

@media (min-width: 1025px) {
  .o-contactForm { width: 75%; margin-left: 12.5%; padding: 7.6rem 0 15.8rem; }
  .o-contactForm__title { width: 80%; margin: 0 auto 9.6rem; }
  .o-contactForm__leftPanel { width: 50%; }
  .o-contactForm__rightPanel { width: 40%; margin: 0 0 0 10%; }
  .o-contactForm__rgpdPanel { margin-top: 8.4rem; }
  .a-inputField__buttons { gap: 1rem 4rem; }
  .o-contactForm__consent .a-inputField__button { padding-left: 5.5rem; }
  .o-contactForm__consent .a-inputField__value::before { transform: translate(-5.5rem); }
  .o-contactForm__consent .a-inputField__value::after { left: -5.1rem; }
  .o-contactInformations { grid-template-columns: repeat(3, 1fr); margin-top: 9.6rem; }
}

/* =====================================================================
   Breadcrumb links and variants
   ===================================================================== */
.o-breadcrumb ol li { position: relative; }
.o-breadcrumb ol li:not(:last-child)::after {
  content: "/";
  position: absolute; top: 50%; left: calc(100% + 1.5rem);
  font-size: 1.4rem;
  transform: translate(-50%, -50%);
}
.o-breadcrumb.-revert { border-color: #344759; background-color: var(--clrnavy); color: #536677; }
@media (hover: hover) and (any-pointer: fine) {
  .o-breadcrumb.-revert a:hover { color: #fff; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .m-hero__categoryTagsList { opacity: 1; }
  .m-hero.is-inview .m-hero__categoryTagsList { animation: none; }
  .is-entering .a-panel, .is-entering .t-page { transform: none; }
  .o-referenceGrid .m-referenceCard, .m-lightbox, .m-lightbox__img { transition: none; }
  .o-referenceGrid__title { display: none; }
  .o-referenceGrid__item.-active { opacity: 1; }
  .o-universeAbout__footerText { transform: none !important; }
}

/* =====================================================================
   Videos page: topic groups of large inline YouTube players
   ===================================================================== */
.o-videoLibrary { padding: 6rem 0 10rem; background-color: #fff; color: var(--clrdarkblue); }
.o-videoLibrary__inner { width: 100%; padding: 0 1.4rem; }
.o-videoLibrary__jump { display: flex; flex-flow: row wrap; gap: 1rem; margin-bottom: 6rem; }
.o-videoLibrary__jump a {
  padding: 1rem 2rem;
  border: .1rem solid rgba(0, 13, 26, .12);
  border-radius: 5rem;
  font-weight: 600; font-size: 1.4rem;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.o-videoLibrary__jump a:hover, .o-videoLibrary__jump a:focus-visible { border-color: var(--clrnavy); background-color: var(--clrnavy); color: #fff; }
.o-videoLibrary__group { scroll-margin-top: 12rem; }
.o-videoLibrary__group + .o-videoLibrary__group { margin-top: 9rem; }
.o-videoLibrary__head {
  display: flex; flex-flow: row wrap; gap: 1.2rem 3rem; align-items: baseline; justify-content: space-between;
  margin-bottom: 3.2rem; padding-bottom: 2.4rem;
  border-bottom: .1rem solid rgba(0, 13, 26, .1);
}
.o-videoLibrary__head .tx-p { color: #4f4f4f; }
.o-videoLibrary__grid { display: grid; gap: 4rem 2.4rem; }
.m-videoCard__player { overflow: hidden; border-radius: 1.6rem; box-shadow: 0 2.4rem 4rem -2.4rem rgba(0, 13, 26, .35); }
.m-videoCard__player .b-video__cover { transition: transform .8s var(--ease); }
.m-videoCard__player.-external .b-video__placeholder::before { background: linear-gradient(0deg, #000a, #0004); }
.m-videoCard__meta { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; padding-top: 1.8rem; }
.m-videoCard__title { font-weight: 600; font-size: 2.2rem; line-height: 1.2; letter-spacing: -.01em; }
.m-videoCard__link {
  display: inline-flex; flex-shrink: 0; gap: .8rem; align-items: center;
  padding: .8rem 1.4rem;
  border: .1rem solid rgba(0, 13, 26, .12);
  border-radius: 5rem;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.m-videoCard__link .a-svg { width: 1.8rem; height: 1.8rem; color: #ff0000; }
.m-videoCard__link:hover, .m-videoCard__link:focus-visible { border-color: #ff0000; }
@media (hover: hover) and (any-pointer: fine) {
  .m-videoCard__player:hover .b-video__cover { transform: scale(1.04); }
}
.o-videoFollow {
  display: flex; flex-flow: row wrap; gap: 2.4rem; align-items: center;
  margin-top: 9rem; padding: 3.2rem;
  border-radius: 2rem;
  background-color: #faf7f1;
}
.o-videoFollow > div { flex: 1 1 24rem; }
.o-videoFollow__icon {
  display: grid; place-items: center;
  width: 6.4rem; height: 6.4rem;
  border-radius: 50%;
  background-color: #ff0000;
  color: #fff;
}
.o-videoFollow__icon .a-svg { width: 3rem; height: 3rem; }
.o-videoFollow .tx-p { color: #4f4f4f; }
@media (min-width: 1025px) {
  .o-videoLibrary { padding: 8rem 0 12rem; }
  .o-videoLibrary__inner { width: 87.5%; margin: 0 auto; padding: 0; }
  .o-videoLibrary__grid { grid-template-columns: repeat(2, 1fr); }
  .m-videoCard.-featured { grid-column: 1 / -1; }
  .m-videoCard.-featured .m-videoCard__title { font-size: 3.4rem; }
  .o-videoFollow { padding: 4rem 5rem; }
}

/* =====================================================================
   Wider copy (client: headings and paragraphs wrapped into too many
   short rows). Desktop only; mobile is already full width.
   ===================================================================== */
@media (min-width: 1025px) {
  .m-hero__wrapper { width: 88%; }
  .m-textScroll__content { width: 84%; }
  .o-universeVision__subtitle { width: 72%; }
  .o-universeVision__textImage .b-twoColumns { grid-template-columns: 50% 42%; gap: 8%; }
  .o-universeResponsability__subtitle { width: 84%; }
  .o-universeResponsability__introduction { width: 62%; margin-left: 30%; }
  .o-universeResponsability__section { grid-template-columns: 36% 56%; gap: 8%; }
  .o-universeTeam__subtitle { width: 44%; }
  .o-universeTeam__galleryText { width: 50%; margin-left: 42%; }
  .o-expertiseApproach__paragraph { width: 88%; }
  .o-expertiseProcess__title { width: 92%; }
  .m-expertiseStep__content { grid-template-columns: 48% 44%; gap: 8%; }
  .m-expertiseClients__title { width: 88%; }
  .t-productsindex__footer { width: 84%; }
}

/* ==== PAGE BANNER ==== */
/* =====================================================================
   Page banner: the compact opening of every page except the homepage
   (client: "like the Glass Tanks page"). Photo or video behind a navy
   scrim, breadcrumb, tag, title and one line of copy.
   ===================================================================== */
.m-pageBanner {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  overflow: hidden;
  min-height: clamp(44rem, 62vh, 58rem);
  padding: 13rem 2rem 7rem;
  background-color: var(--clrdarkblue);
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.m-pageBanner::before {
  content: "";
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0, 13, 26, .78) 0%, rgba(0, 13, 26, .4) 50%, rgba(0, 13, 26, .72) 100%);
  pointer-events: none;
}
.m-pageBanner__media { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 100%; }
.m-pageBanner__media img, .m-pageBanner__media video { width: 100%; height: 100%; object-fit: cover; }
.m-pageBanner__inner { display: grid; gap: 1.8rem; justify-items: center; width: 100%; max-width: 104rem; }
.m-pageBanner__crumbs ol {
  display: flex; flex-flow: row wrap; gap: .8rem; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .62);
  font-size: 1.3rem;
}
.m-pageBanner__crumbs li { display: flex; gap: .8rem; align-items: center; }
.m-pageBanner__crumbs li + li::before { content: "/"; opacity: .45; }
.m-pageBanner__crumbs a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
.m-pageBanner__crumbs a:hover, .m-pageBanner__crumbs a:focus-visible { color: #fff; }
.m-pageBanner__crumbs [aria-current] { color: #fff; }
.m-pageBanner__tag {
  padding: .5rem 1.2rem;
  border-radius: 2.4rem;
  background-color: rgba(255, 255, 255, .18);
  font-weight: 600; font-size: 1.1rem; letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(.4rem);
  backdrop-filter: blur(.4rem);
}
.m-pageBanner__title {
  margin: 0;
  color: #fff;
  font-weight: 300;
  font-size: clamp(3.4rem, 5.4vw, 7.6rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.m-pageBanner__title strong, .m-pageBanner__title b, .m-pageBanner__title .hl { font-weight: 600; }
.js .m-pageBanner__title { opacity: 0; }
.m-pageBanner .a-line-wrapper { overflow: hidden; padding: .04em 0 .08em; }
.m-pageBanner .a-line { transform: translateY(120%); }
.m-pageBanner__lede { margin: 0; max-width: 64rem; color: rgba(255, 255, 255, .86); font-size: 1.7rem; line-height: 1.5; text-wrap: balance; }
.m-pageBanner__actions { display: flex; flex-flow: row wrap; gap: 1.2rem; justify-content: center; margin-top: .8rem; }
/* gentle entrance for everything except the title (pages.js splits that) */
.js .m-pageBanner__inner > :not(.m-pageBanner__title) { opacity: 0; transform: translateY(1.6rem); }
.m-pageBanner.is-inview .m-pageBanner__inner > :not(.m-pageBanner__title) {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.m-pageBanner.is-inview .m-pageBanner__inner > :nth-child(2) { transition-delay: .1s; }
.m-pageBanner.is-inview .m-pageBanner__inner > :nth-child(4) { transition-delay: .5s; }
.m-pageBanner.is-inview .m-pageBanner__inner > :nth-child(5) { transition-delay: .65s; }
.m-pageBanner.is-inview .m-pageBanner__inner > :nth-child(6) { transition-delay: .8s; }
/* trust chips under the banner's buttons (Scratch Removal, 3 Oct) */
.m-pageBanner__chips { display: flex; flex-flow: row wrap; gap: .8rem; justify-content: center; margin-top: .4rem; }
.m-pageBanner__chips li {
  padding: .5rem 1.2rem;
  border: .1rem solid rgba(255, 255, 255, .42);
  border-radius: 3rem;
  color: rgba(255, 255, 255, .9);
  font-weight: 500; font-size: 1.3rem;
}
@media (min-width: 1025px) {
  .m-pageBanner { padding: 15rem 4rem 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .m-pageBanner__title, .js .m-pageBanner__inner > * { opacity: 1; transform: none; }
}

/* ==== SHOP ==== */
/* =====================================================================
   Glass tanks shop + product pages (after livingoceansaquariums.com:
   clean square product cards, range tiles, filter/sort bar, spec table,
   trust strip, help card). Catalogue only: no cart, no checkout.
   ===================================================================== */
.t-shop .t-page { background-color: #fff; }
.t-shop main { background-color: #fff; color: var(--clrdarkblue); }
.m-pageBanner.-compact { min-height: clamp(34rem, 44vh, 42rem); }
.m-pageBanner.-compact .m-pageBanner__title { font-size: clamp(3rem, 3.6vw, 5.2rem); line-height: 1.08; letter-spacing: -.03em; }
.m-pageBanner__actions .a-yelpBadge { padding-right: 2.4rem; }
.a-yelpBadge__icon.-navy { background-color: var(--clraccent); }

/* ---- trust strip ---- */
.o-shopTrust { position: relative; z-index: 2; margin-top: -4.4rem; }
.o-shopTrust__list {
  display: grid; gap: 1px;
  width: 100%;
  overflow: hidden;
  border: .1rem solid rgba(0, 13, 26, .08);
  border-radius: 2rem;
  background-color: rgba(0, 13, 26, .08);
  box-shadow: 0 2.4rem 5rem -2.4rem rgba(0, 13, 26, .25);
}
.o-shopTrust__list > li { display: flex; gap: 1.4rem; align-items: center; padding: 2rem 2.4rem; background-color: #fff; }
.o-shopTrust__list > li > span:last-child { display: flex; flex-direction: column; gap: .2rem; font-size: 1.4rem; line-height: 1.35; color: #5b6570; }
.o-shopTrust__list strong { color: var(--clrdarkblue); font-weight: 600; font-size: 1.5rem; }
.o-shopTrust__list a { color: var(--clrnavy); font-weight: 600; }
.o-shopTrust__icon, .o-tank__trustIcon {
  display: grid; flex-shrink: 0; place-items: center;
  width: 4.8rem; height: 4.8rem;
  border-radius: 50%;
  background-color: #eef4fa;
  color: var(--clrnavy);
}
.o-shopTrust__icon .a-svg, .o-tank__trustIcon .a-svg { width: 2.4rem; height: 2.4rem; fill: none; }
.o-shopTrust__icon .a-svg use, .o-tank__trustIcon .a-svg use { fill: none; }
@media (min-width: 641px) { .o-shopTrust__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .o-shopTrust__list { grid-template-columns: repeat(4, 1fr); } }

/* ---- range tiles ---- */
.o-shopRanges { padding: 8rem 0 2rem; }
.o-shopRanges__head, .o-shop__head, .o-shopRelated__head {
  display: flex; flex-flow: row wrap; gap: 1.2rem 2.4rem; align-items: baseline; justify-content: space-between;
  width: 100%; margin-bottom: 3.2rem;
}
.o-shopRanges__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; width: 100%; }
.m-rangeTile {
  display: flex; flex-direction: column; gap: .4rem; align-items: center;
  width: 100%; height: 100%;
  padding: 1.6rem 1.2rem 2rem;
  border: .1rem solid rgba(0, 13, 26, .08);
  border-radius: 1.6rem;
  background-color: #f4f7fa;
  color: var(--clrdarkblue);
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.m-rangeTile__media { display: block; width: 100%; aspect-ratio: 1; margin-bottom: .8rem; }
.m-rangeTile__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.m-rangeTile__label { font-weight: 600; font-size: 1.6rem; }
.m-rangeTile__count { color: #6b7580; font-size: 1.3rem; }
.m-rangeTile.-active { border-color: var(--clrnavy); box-shadow: inset 0 0 0 .1rem var(--clrnavy); }
@media (hover: hover) and (any-pointer: fine) {
  .m-rangeTile:hover { transform: translateY(-.4rem); box-shadow: 0 1.8rem 3rem -1.8rem rgba(0, 13, 26, .35); }
}
@media (min-width: 641px) { .o-shopRanges__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .o-shopRanges__list { grid-template-columns: repeat(9, 1fr); } }

/* ---- catalogue ---- */
.o-shop { padding: 6rem 0 8rem; scroll-margin-top: 2rem; }
.o-shop__count { color: #6b7580; font-size: 1.4rem; }
.o-shop__toolbar {
  position: sticky; top: 8.8rem; z-index: 5;
  display: flex; flex-flow: row wrap; gap: 1.2rem 2.4rem; align-items: center; justify-content: space-between;
  width: 100%;
  margin-bottom: 3.2rem;
  padding: 1.6rem 0;
  border-bottom: .1rem solid rgba(0, 13, 26, .08);
  background-color: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}
.o-shop__filters {
  display: flex; flex-flow: row nowrap; gap: .8rem;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: .2rem;
  scrollbar-width: none;
}
.o-shop__filters::-webkit-scrollbar { display: none; }
.o-shop__chip {
  flex-shrink: 0;
  padding: .9rem 1.6rem;
  border: .1rem solid rgba(0, 13, 26, .14);
  border-radius: 5rem;
  font-weight: 600; font-size: 1.3rem;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.o-shop__chip:hover { border-color: var(--clrnavy); }
.o-shop__chip.-active { border-color: var(--clrnavy); background-color: var(--clrnavy); color: #fff; }
.o-shop__sort { display: flex; gap: 1rem; align-items: center; font-size: 1.3rem; color: #6b7580; }
.o-shop__sort select {
  padding: .9rem 3.6rem .9rem 1.4rem;
  border: .1rem solid rgba(0, 13, 26, .14);
  border-radius: .8rem;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.72 5.6a.72.72 0 0 0 .51-.21L10.66 1A.36.36 0 0 0 10.4.4H1.04a.36.36 0 0 0-.26.6l4.43 4.39c.13.14.32.21.51.21z' fill='%23000D1A'/%3E%3C/svg%3E") right 1.4rem center no-repeat;
  color: var(--clrdarkblue);
  font-weight: 600; font-size: 1.3rem;
  appearance: none;
}
.o-shop__grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem 2rem; width: 100%; }
.o-shop__empty { width: 100%; padding: 4rem 0; text-align: center; color: #6b7580; }
.o-shop__more { display: flex; justify-content: center; width: 100%; margin-top: 4.8rem; }
.o-shop__more[hidden], .o-shop__more .a-button[hidden] { display: none; }
.o-shop__note { width: 100%; margin-top: 3.2rem; color: #6b7580; font-size: 1.2rem; letter-spacing: .04em; text-align: center; }
.o-shop__note a { color: var(--clrnavy); font-weight: 600; text-decoration: underline; }
@media (min-width: 641px) { .o-shop__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) {
  .o-shop__grid { grid-template-columns: repeat(4, 1fr); gap: 3.2rem 2.4rem; }
  .o-shop__toolbar { flex-wrap: nowrap; }
}

/* ---- tank card ---- */
.m-tankCard[hidden] { display: none; }
.m-tankCard__link { display: flex; flex-direction: column; height: 100%; color: var(--clrdarkblue); }
.m-tankCard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: 1.6rem;
  border-radius: 1.6rem;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #eef2f6 70%);
}
.m-tankCard__media img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 1.6rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .8s var(--ease);
}
.m-tankCard__body { display: flex; flex: 1; flex-direction: column; gap: .8rem; }
.m-tankCard__range { color: #6b7580; font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.m-tankCard__name { font-weight: 500; font-size: 1.7rem; line-height: 1.3; }
.m-tankCard__chips { display: flex; flex-flow: row wrap; gap: .6rem; }
.m-tankCard__chips li {
  padding: .3rem .9rem;
  border-radius: 2rem;
  background-color: #eef4fa;
  color: var(--clrnavy);
  font-weight: 500; font-size: 1.2rem;
  white-space: nowrap;
}
.m-tankCard__chips.-large li { padding: .6rem 1.2rem; font-size: 1.4rem; }
.m-tankCard__foot {
  display: flex; gap: 1.2rem; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 1.2rem;
  border-top: .1rem solid rgba(0, 13, 26, .08);
}
.m-tankCard__price { font-weight: 600; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.m-tankCard__cta { display: inline-flex; gap: .6rem; align-items: center; color: var(--clraccentdeep); font-weight: 600; font-size: 1.3rem; }
.m-tankCard__cta .a-svg { transition: transform .4s var(--ease); }
@media (hover: hover) and (any-pointer: fine) {
  .m-tankCard__link:hover .m-tankCard__media img { transform: scale(1.06); }
  .m-tankCard__link:hover .m-tankCard__cta .a-svg { transform: translateX(.4rem); }
}
.m-tankCard__link:focus-visible { outline: 2px solid var(--clraccent); outline-offset: 4px; border-radius: 1.6rem; }

/* ---- ranges at a glance ---- */
.o-shopCompare { padding: 2rem 0 8rem; }
.o-shopCompare__inner {
  width: 100%;
  padding: 4rem 2rem;
  border-radius: 2.4rem;
  background-color: var(--clrnavy);
  color: #fff;
}
.o-shopCompare__inner .tx-h3 { margin-bottom: 3.2rem; }
.o-shopCompare__scroll { overflow-x: auto; }
.o-shopCompare__table { width: 100%; min-width: 56rem; border-collapse: collapse; font-size: 1.5rem; }
.o-shopCompare__table th, .o-shopCompare__table td { padding: 1.6rem 1.6rem; border-bottom: .1rem solid rgba(255, 255, 255, .12); text-align: left; }
.o-shopCompare__table thead th { color: rgba(255, 255, 255, .6); font-weight: 600; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.o-shopCompare__table tbody th button { color: #fff; font-weight: 600; font-size: 1.6rem; text-align: left; }
.o-shopCompare__table tbody th button:hover { color: var(--clraccentlight); }
.o-shopCompare__table tbody tr:hover { background-color: rgba(255, 255, 255, .04); }
.o-shopCompare__table td:last-child { color: var(--clraccentlight); font-weight: 600; }
@media (min-width: 1025px) { .o-shopCompare__inner { padding: 6rem; } }

/* ---- help card ---- */
.o-shopHelp { padding: 0 0 8rem; }
.o-shopHelp__card {
  display: flex; flex-flow: row wrap; gap: 2.4rem; align-items: center;
  width: 100%;
  padding: 3.2rem;
  border-radius: 2.4rem;
  background-color: #faf7f1;
  color: var(--clrdarkblue);
}
.o-shopHelp__card > div:nth-child(2) { flex: 1 1 32rem; }
.o-shopHelp__card .tx-h5 { margin-bottom: .8rem; }
.o-shopHelp__card .tx-p { color: #5b6570; }
.o-shopHelp__icon {
  display: grid; flex-shrink: 0; place-items: center;
  width: 6.4rem; height: 6.4rem;
  border-radius: 50%;
  background-color: var(--clraccent);
  color: var(--clraccentink);
  font-weight: 700; font-size: 3.2rem;
}
.o-shopHelp__actions { display: flex; flex-flow: row wrap; gap: 1.6rem 2.4rem; align-items: center; }
@media (min-width: 1025px) { .o-shopHelp__card { padding: 4rem 5rem; } }

/* ---- product page ---- */
.o-tank { padding: 6rem 0 8rem; }
.o-tank__grid { display: grid; gap: 4rem; width: 100%; }
.o-tank__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 2.4rem;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #eef2f6 72%);
}
.o-tank__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 3.2rem; object-fit: contain; mix-blend-mode: multiply; }
.o-tank__info { display: flex; flex-direction: column; gap: 1.8rem; }
.o-tank__range { color: #6b7580; font-weight: 600; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.o-tank__name { font-weight: 500; font-size: clamp(2.4rem, 2.4vw, 3.4rem); line-height: 1.15; letter-spacing: -.02em; }
.o-tank__price { font-weight: 600; font-size: 3.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.o-tank__actions { display: flex; flex-flow: row wrap; gap: 1.2rem; margin-top: .8rem; }
.o-tank__actions .a-button.-call {
  display: inline-flex; gap: 1rem; align-items: center;
  padding: 1.6rem 2.4rem;
  border: .1rem solid rgba(0, 13, 26, .16);
  border-radius: 5rem;
  background: none;
  color: var(--clrdarkblue);
}
.o-tank__actions .a-button.-call:hover { border-color: var(--clrnavy); }
.o-tank__trust { display: grid; gap: 1rem; margin-top: .8rem; }
.o-tank__trust > li {
  display: flex; gap: 1.2rem; align-items: center;
  padding: 1.2rem 1.6rem;
  border-radius: 1.2rem;
  background-color: #f4f7fa;
}
.o-tank__trust > li > span:last-child { display: flex; flex-direction: column; font-size: 1.3rem; color: #5b6570; }
.o-tank__trust strong { color: var(--clrdarkblue); font-size: 1.4rem; }
.o-tank__trustIcon { width: 4rem; height: 4rem; }
.o-tank__details { border-bottom: .1rem solid rgba(0, 13, 26, .1); }
.o-tank__details:first-of-type { margin-top: 1.2rem; border-top: .1rem solid rgba(0, 13, 26, .1); }
.o-tank__details summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.8rem 0;
  font-weight: 600; font-size: 1.7rem;
  list-style: none;
  cursor: pointer;
}
.o-tank__details summary::-webkit-details-marker { display: none; }
.o-tank__details summary span { position: relative; width: 1.4rem; height: 1.4rem; }
.o-tank__details summary span::before, .o-tank__details summary span::after {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 100%; height: .2rem;
  background-color: currentColor;
  transition: transform .3s var(--ease);
}
.o-tank__details summary span::after { transform: rotate(90deg); }
.o-tank__details[open] summary span::after { transform: rotate(0); }
.o-tank__detailsBody { display: grid; gap: 1.6rem; padding-bottom: 2.4rem; color: #3d4852; font-size: 1.5rem; line-height: 1.55; }
.o-tank__detailsBody a { color: var(--clrnavy); font-weight: 600; text-decoration: underline; }
.o-tank__table { width: 100%; border-collapse: collapse; }
.o-tank__table th, .o-tank__table td { padding: 1rem 1.2rem; border-bottom: .1rem solid rgba(0, 13, 26, .08); text-align: left; vertical-align: top; }
.o-tank__table th { width: 40%; color: #6b7580; font-weight: 500; }
.o-tank__table tr:nth-child(odd) { background-color: #f7f9fb; }
.o-tank__list { display: grid; gap: .6rem; padding-left: 2rem; list-style: disc; }
.o-shopRelated { padding: 0 0 10rem; }
@media (min-width: 1025px) {
  .o-tank { padding: 8rem 0 10rem; }
  .o-tank__grid { grid-template-columns: 1.05fr 1fr; gap: 6.4rem; align-items: start; }
  .o-tank__media { position: sticky; top: 12rem; }
  .o-tank__trust { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .m-tankCard__media img, .m-rangeTile { transition: none; }
}

/* ==== ROUND 4 ==== */
/* Banners carry only breadcrumb + title now: shorter, and the first
   section below lifts over them with rounded top corners. */
.m-pageBanner { min-height: clamp(30rem, 42vh, 42rem); padding: 12rem 2rem calc(6rem + 3.2rem); }
.m-pageBanner__inner { gap: 1.4rem; }
.m-pageBanner + :where(:not(.o-shopTrust)) {
  position: relative; z-index: 2;
  margin-top: -3.2rem;
  border-radius: 3.2rem 3.2rem 0 0;
  background-color: #fff;
  overflow: clip;
}
.m-pageBanner.-compact { min-height: clamp(26rem, 34vh, 34rem); }
/* About/Process: the wrapper holds dark sections too, so only its first
   (white) section gets the rounded lift. */
.m-pageBanner + .m-pageSummary__container { background-color: transparent; border-radius: 0; overflow: visible; }
.m-pageSummary__container > .o-universeAbout,
.m-pageSummary__container > .o-expertiseApproach { border-radius: 3.2rem 3.2rem 0 0; }
@media (min-width: 1025px) {
  .m-pageSummary__container > .o-universeAbout,
  .m-pageSummary__container > .o-expertiseApproach { border-radius: 4rem 4rem 0 0; }
}
@media (min-width: 1025px) {
  .m-pageBanner { padding: 13rem 4rem calc(7rem + 4rem); }
  .m-pageBanner + :where(:not(.o-shopTrust)) { margin-top: -4rem; border-radius: 4rem 4rem 0 0; }
}

/* Text that used to sit in the banners */
.o-universeAbout__intro, .o-expertiseApproach__intro { margin-bottom: 4rem; color: #3d4852; font-size: 1.8rem; line-height: 1.55; }
.o-expertiseApproach__paragraph + .o-expertiseApproach__intro { margin-top: -2.4rem; }
.t-productsindex__intro { width: 100%; max-width: 86rem; margin: 0 auto 4rem; color: #4f4f4f; font-size: 1.8rem; line-height: 1.55; text-align: center; }
@media (min-width: 1025px) {
  /* the About quote must stay clear of the photo pinned on the right */
  .o-universeAbout .m-textScroll__content, .o-universeAbout__intro { width: 61.5384615385%; }
  .o-expertiseApproach__paragraph { margin-bottom: 4rem; }
  .o-expertiseApproach__intro { width: 69.2307692308%; margin-bottom: 10rem; }
}

/* Process: less empty navy before "Step by step" */
.o-expertiseProcess { padding-top: 16rem; }
.o-expertiseProcess__title { margin-bottom: 8rem; }
@media (min-width: 1025px) {
  .o-expertiseProcess { padding-top: 22rem; }
  .o-expertiseProcess__title { margin-bottom: 10rem; }
}

/* ==== CONTACT EXTRAS ==== */
.a-placeholder {
  display: inline-block;
  margin-left: .6rem; padding: .2rem .8rem;
  border: .1rem dashed var(--clraccent);
  border-radius: 2rem;
  background-color: #fbf6ea;
  color: #8a6a24;
  font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}
.o-contactVisit { display: grid; gap: 3.2rem; margin-top: 8rem; }
.o-contactVisit__map {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 1.2rem;
  min-height: 32rem;
  overflow: hidden;
  border-radius: 2.4rem;
  background-color: #e8eff6;
  background-image:
    linear-gradient(rgba(0, 40, 77, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 40, 77, .06) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, #d3e3f1 0 12%, transparent 13%),
    radial-gradient(circle at 75% 70%, #d9ead9 0 16%, transparent 17%);
  background-size: 4rem 4rem, 4rem 4rem, 100% 100%, 100% 100%;
}
.o-contactVisit__pin { width: 5.6rem; height: 5.6rem; color: var(--clraccent); filter: drop-shadow(0 .8rem 1.2rem rgba(0, 13, 26, .3)); animation: pin-bob 2.4s ease-in-out infinite; }
@keyframes pin-bob { 50% { transform: translateY(-.6rem); } }
.o-contactVisit__mapNote { padding: .6rem 1.4rem; border-radius: 2rem; background-color: #fff; color: var(--clrnavy); font-weight: 600; font-size: 1.3rem; }
.o-contactVisit__info { display: flex; flex-direction: column; gap: 2.8rem; align-items: flex-start; }
.o-contactVisit__group { display: grid; gap: .8rem; width: 100%; font-size: 1.6rem; line-height: 1.5; }
.o-contactVisit__group h3 { color: var(--clraccentdeep); text-transform: uppercase; letter-spacing: .06em; }
.o-contactVisit__muted { color: #6b7580; font-size: 1.4rem; }
.o-contactVisit__hours { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: 1.5rem; }
.o-contactVisit__hours th, .o-contactVisit__hours td { padding: 1rem 0; border-bottom: .1rem solid rgba(0, 13, 26, .08); text-align: left; font-weight: 400; }
.o-contactVisit__hours td { text-align: right; color: #6b7580; }
.o-contactVisit__hours .-emergency th, .o-contactVisit__hours .-emergency td { color: var(--clrnavy); font-weight: 600; }
.o-contactFaq { margin-top: 10rem; padding-bottom: 4rem; scroll-margin-top: 12rem; }
.o-contactFaq__head { display: grid; gap: 1.2rem; margin-bottom: 3.2rem; }
.o-contactFaq__head .tx-p { color: #4f4f4f; }
.o-contactFaq__head a { color: var(--clrnavy); font-weight: 600; text-decoration: underline; }
.o-contactFaq__list { border-top: .1rem solid rgba(0, 13, 26, .1); }
.m-faq { border-bottom: .1rem solid rgba(0, 13, 26, .1); }
.m-faq summary {
  display: flex; gap: 2rem; align-items: center; justify-content: space-between;
  padding: 2.4rem 0;
  font-size: clamp(1.8rem, 1.6vw, 2.2rem); font-weight: 500; line-height: 1.3;
  list-style: none;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary:hover { color: var(--clraccentdeep); }
.m-faq__icon { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; border: .1rem solid rgba(0, 13, 26, .16); border-radius: 50%; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.m-faq__icon::before, .m-faq__icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 1.4rem; height: .2rem;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}
.m-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.m-faq[open] .m-faq__icon { border-color: var(--clrnavy); background-color: var(--clrnavy); color: #fff; }
.m-faq[open] .m-faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.m-faq__body { max-width: 86rem; padding: 0 0 2.8rem; color: #3d4852; font-size: 1.6rem; line-height: 1.6; }
.m-faq__body a { color: var(--clrnavy); font-weight: 600; text-decoration: underline; }
.m-faq[open] .m-faq__body { animation: faq-open .5s var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-.8rem); } to { opacity: 1; transform: none; } }
@media (min-width: 1025px) {
  .o-contactVisit { grid-template-columns: 1.1fr .9fr; gap: 6.4rem; align-items: center; margin-top: 12rem; }
  .o-contactVisit__map { min-height: 48rem; }
  .o-contactFaq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6.4rem; margin-top: 14rem; }
  .o-contactFaq__head { align-self: start; position: sticky; top: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .o-contactVisit__pin, .m-faq[open] .m-faq__body { animation: none; }
}

/* =====================================================================
   Client, 18 Sept — phone layout
   One centre axis per page below 1025px: headings, body copy, lone buttons,
   and the figures the reference design offsets on desktop, which at 390px
   only read as a mistake.
   Lists, form fields and tables keep their left edge — each is read down a
   column rather than across, and centring them removes the edge the eye
   tracks. Everything else centres.
   ===================================================================== */
@media (max-width: 1024px) {
  /* The eyebrow and the display line it introduces are one unit — centring
     one without the other is worse than leaving both alone. The `+` keeps
     body copy out of it: only a display line follows an eyebrow this way. */
  .a-sectionTitle,
  .a-sectionTitle + :is(.tx-h2, .tx-h3, .tx-h4, .tx-h5),
  .a-sectionTitle + .o-universeTeam__subtitle,
  .o-videoLibrary__head,
  .o-shopRanges__head, .o-shop__head, .o-shopRelated__head,
  .o-contactFaq__head { text-align: center; }

  .o-videoLibrary__head,
  .o-videoLibrary__jump { justify-content: center; }

  /* Lone calls to action belong on the centre line, not hard left. */
  .o-videoFollow .a-button,
  .o-shopHelp .a-button,
  .o-contactHero .a-button { margin-inline: auto; }
  .o-videoFollow__icon, .o-shopHelp__icon { margin-inline: auto; }

  .o-universeVision__subtitle, .m-expertiseClients__title { width: 100%; }
  .o-universeAbout__firstImage { width: 88%; margin-inline: auto; }
  .o-universeTeam__galleryThirdImage { width: 66%; margin-inline: auto; }

  /* The last lone buttons sitting hard left. */
  .o-contactVisit__info .a-button { margin-inline: auto; }

  /* Title and the YouTube chip side by side left the title 60% of the row
     and three ragged lines. Stacked, it gets the full measure. */
  .m-videoCard__meta { flex-direction: column; align-items: center; text-align: center; }

  /* Client, 18 Sept (round 3): body copy centres on phones too, not just the
     headings. Asked for twice — the client wants one centre axis per page.
     Lists, forms and tables are excluded below: a bulleted list, a field label
     and a data table each need a left edge to read down. */
  .o-universeResponsability__section > h3,
  .o-universeVision__textImage h3,
  .o-universeVision__contact,
  .o-universeTeam__membersTitle,
  .m-sliderTeam__slide figcaption,
  .o-expertiseApproach__paragraph { text-align: center; }

  main p,
  main .m-textContent,
  main .prose,
  main dd, main figcaption, main blockquote { text-align: center; }

  /* Headings follow the copy onto the centre axis. Product and video cards
     are excluded below — those sit in a grid and keep their own left edge. */
  main :is(h1, h2, h3, h4, h5, .tx-h1, .tx-h2, .tx-h3, .tx-h4, .tx-h5) { text-align: center; }

  /* Back to a left edge: anything read down a column rather than across. */
  main li,
  main label, main .a-inputField, main .a-inputField p,
  main form p, main .o-contactForm__status,
  main th, main td, main caption,
  main summary, main .m-faq__head,
  main .o-breadcrumb, main .m-pageBanner__crumbs,
  main .m-tankCard, main .m-tankCard p, main .m-tankCard :is(h2, h3, h4),
  main .o-shopCompare__table p { text-align: left; }
  .o-universeVision__contact { display: flex; flex-direction: column; align-items: center; }

  /* Contact cards: one full-width card per row on a phone, so their content
     belongs on the card's centre line rather than against its left edge. */
  .o-contactInformations__item { text-align: center; }
  .o-contactInformations__wrapper { justify-items: center; }

  /* The step rail is a desktop device: a 2px dotted line and a badge holding
     a quarter of the screen, which pushed every step's text off the page
     axis. On one column the badge sits above its step and the rail goes. */
  .m-expertiseStep { grid-template-columns: 1fr; }
  .m-expertiseStep__stepper { flex-direction: row; justify-content: center; }
  .m-expertiseStep__stepperSvg { display: none; }
  .m-expertiseStep__content { margin-top: 2.4rem; }
  .m-expertiseStep__textContent { align-items: center; text-align: center; }
}

/* =====================================================================
   FEATURED PROJECTS (21 Sept) — the gallery's editorial sibling: navy
   page, outlined gold chapter numbers, justified rows that keep every
   photo at its own proportions, numbered captions, shared lightbox.
   ===================================================================== */
.o-featured { background-color: var(--clrdarkblue); color: #fff; padding-bottom: 4rem; }  /* was 10rem: with the pond film closing the column the gap above the
     prefooter read as empty space (client, 1 Oct) */
.o-featured .row { row-gap: 0; }

/* ---- intro: one live sentence set large, the rest beside it ----
   Client, 21 Sept: neither navy-on-navy (it ran into the dark banner) nor
   white (too loud against the photo). A deep ocean-blue band, a clear step
   lighter than the banner and the near-black collection, lit from above like
   water; the collection then lifts over it with rounded corners. */
.o-featuredIntro {
  position: relative;
  padding: 8rem 0 calc(6rem + 3.2rem);
  background:
    radial-gradient(60rem 36rem at 18% 0%, rgba(65, 128, 201, .35), transparent 70%),
    radial-gradient(50rem 30rem at 92% 100%, color-mix(in srgb, var(--clraccent) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #00284d 0%, #001a33 100%);
  color: #fff;
}
.o-featuredIntro + .o-featured__chapter {
  position: relative;
  margin-top: -3.2rem;
  border-radius: 3.2rem 3.2rem 0 0;
  background-color: var(--clrdarkblue);
  box-shadow: 0 -2rem 4rem -2rem rgba(0, 0, 0, .5);
}
.o-featuredIntro .row { gap: 4rem; }
.o-featuredIntro__lede {
  position: relative;
  width: 100%;
  padding-top: 3.2rem;
  font-weight: 300; font-size: clamp(2.8rem, 4.4vw, 6.4rem); line-height: 1.06; letter-spacing: -.03em;
  text-wrap: balance;
}
.o-featuredIntro__lede::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 6.4rem; height: .2rem;
  background-color: var(--clraccent);
}
.o-featuredIntro__side { display: grid; gap: 3.2rem; width: 100%; align-content: end; }
.o-featuredIntro__side > .tx-p { color: rgba(255, 255, 255, .72); }
.o-featuredIntro__index a {
  display: flex; gap: 1.6rem; align-items: center;
  padding: 1.2rem 0;
  border-top: .1rem solid rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color .4s var(--ease), padding-left .6s var(--ease);
}
.o-featuredIntro__index li:last-child a { border-bottom: .1rem solid rgba(255, 255, 255, .14); }
.o-featuredIntro__index span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem;
  border: .1rem solid color-mix(in srgb, var(--clraccent) 50%, transparent);
  border-radius: 50%;
  color: var(--clraccent);  /* 11px numerals on the dark blue */
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
@media (hover: hover) and (any-pointer: fine) {
  .o-featuredIntro__index a:hover { padding-left: .8rem; color: var(--clraccentlight); }
  .o-featuredIntro__index a:hover span { background-color: var(--clraccent); color: var(--clraccentink); }
}
@media (max-width: 640px) { .o-featuredIntro__lede::before { left: 50%; transform: translateX(-50%); } }
@media (min-width: 1025px) {
  .o-featuredIntro { padding: 11rem 0 calc(10rem + 3.2rem); }
  .o-featuredIntro .row { flex-wrap: nowrap; gap: 8rem; align-items: end; }
  .o-featuredIntro__lede { flex: 1 1 auto; }
  .o-featuredIntro__side { flex: 0 0 38rem; }
}

/* ---- chapter ---- */
.o-featured__chapter { padding: 6rem 0; scroll-margin-top: 6rem; }
.o-featured__head { display: grid; gap: 1.6rem 4rem; width: 100%; margin-bottom: 4rem; }
.o-featured__num {
  color: transparent;
  font-weight: 200; font-size: clamp(7.2rem, 10vw, 14rem); line-height: .8; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: .1rem var(--clraccent);
}
.o-featured__title strong { font-weight: 600; }
.o-featured__intro { display: grid; gap: 1.6rem; justify-items: start; }
.o-featured__intro .tx-p { color: rgba(255, 255, 255, .72); }
.o-featured__intro .a-link { color: var(--clraccentlight); }
@media (max-width: 640px) { .o-featured__intro { justify-items: center; } } /* phones centre copy site-wide */
@media (min-width: 1025px) {
  .o-featured__chapter { padding: 8rem 0; }
  .o-featured__head { grid-template-columns: auto 1fr 38rem; align-items: end; margin-bottom: 5.6rem; }
}
.js .o-featured__head > *, .js .o-featuredIntro [data-scroll] {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease);
}
.js .o-featured__head.is-inview > *, .js .o-featuredIntro [data-scroll].is-inview { opacity: 1; transform: none; }
.o-featured__head > :nth-child(2) { transition-delay: .1s; }
.o-featured__head > :nth-child(3) { transition-delay: .2s; }

/* ---- justified rows: flex-grow = aspect ratio, so one height per row ---- */
.m-justified {
  display: flex; gap: 1.6rem;
  width: 100%; max-width: calc(var(--sum) * 60rem);
  margin: 0 auto 1.6rem;
}
.m-projectTile { flex: var(--a) 1 0; min-width: 0; margin: 0; }
.m-projectTile__open, .m-projectTile.-video .m-projectTile__image {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--a);
  border-radius: .8rem;
  background-color: #0b1c2d;
}
.m-projectTile__open { cursor: zoom-in; }
.m-projectTile__open .m-projectTile__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.4s var(--ease);
}
.m-projectTile.-video .m-projectTile__image { height: auto; object-fit: cover; } /* the height attribute would win over aspect-ratio */
/* a hairline that turns gold on hover, drawn inside the frame */
.m-projectTile__open::after {
  content: "";
  position: absolute; inset: 0;
  border: .1rem solid rgba(255, 255, 255, .08);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .6s var(--ease);
}
.m-projectTile__open:focus-visible { outline: 2px solid var(--clraccent); outline-offset: 3px; }
@media (hover: hover) and (any-pointer: fine) {
  .m-projectTile__open:hover .m-projectTile__image { transform: scale(1.05); }
  .m-projectTile__open:hover::after { border-color: color-mix(in srgb, var(--clraccent) 70%, transparent); }
}
.js .m-justified .m-projectTile {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease);
}
.js .m-justified.is-inview .m-projectTile { opacity: 1; transform: none; }
.m-justified .m-projectTile:nth-child(2) { transition-delay: .12s; }
.m-justified .m-projectTile:nth-child(3) { transition-delay: .24s; }
/* Phones: each row becomes a swipe strip at one shared height, so three
   portraits never shrink to thumbnails and nothing is cropped. */
@media (max-width: 640px) {
  .m-justified {
    overflow-x: auto;
    max-width: none;
    margin: 0 -1.4rem 1.2rem; padding: 0 1.4rem;
    width: calc(100% + 2.8rem);
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.4rem;
    scrollbar-width: none;
  }
  .m-justified::-webkit-scrollbar { display: none; }
  .m-projectTile { flex: 0 0 auto; width: min(calc(var(--a) * 64vw), 84vw); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .m-justified .m-projectTile, .js .o-featured__head > *, .js .o-featuredIntro [data-scroll] { transform: none; }
}

/* ---- film (Featured Projects, Videos): plays itself, muted, on view.
     The play-button overlay went with it (client, 1 Oct); sound is the
     only control left, same toggle the reels use. ---- */
.m-film { position: relative; overflow: hidden; width: 100%; border-radius: 1.2rem; background-color: #000; }
.m-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.o-featured__chapter.-film .m-film { box-shadow: 0 4rem 8rem -3rem rgba(0, 0, 0, .8); }
.o-videoLibrary .m-film, .o-videoLibrary .m-filmPair { margin-bottom: 2.4rem; }
.o-videoLibrary .m-filmPair .m-film { margin-bottom: 0; }

/* ---- pond film (Featured Projects): the koi-pond video that closes the pond
     chapter. Same ambient player as the homepage band -- muted, looping, no
     controls -- so it needs no chrome of its own. It carries no top or bottom
     padding: the pond chapter's own padding-bottom is the gap above it, and
     .o-featured's padding-bottom closes the page below it. ---- */
.o-featured__chapter.-pondFilm { padding-top: 0; padding-bottom: 0; }
/* and pulled up into the pond chapter's own bottom padding, so the video
   sits close under the last photo rather than a chapter apart (client, 1 Oct) */
.o-featured__chapter.-pondFilm { margin-top: -4rem; }
.o-featured__chapter.-pondFilm .b-video.-ambient {
  width: 100%;
  border-radius: 1.6rem;
  aspect-ratio: 16 / 9;
  box-shadow: 0 4rem 8rem -3rem rgba(0, 0, 0, .6);
  outline: .1rem solid rgba(255, 255, 255, .08);
}
/* phones: laid out at 3x (their screens are 2-3x their CSS width), 1.36x crop,
   same arithmetic as the homepage band */
.o-featured__chapter.-pondFilm .b-video__ambient iframe {
  width: 300%; height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%) scale(.4533);
}
/* The still is only for visitors who asked for reduced motion, for whom the
   video never plays. */
@media (prefers-reduced-motion: no-preference) {
  .o-featured__chapter.-pondFilm .b-video__still { display: none; }
}
@media (min-width: 641px) {
  .o-featured__chapter.-pondFilm { margin-top: -5rem; }
  .o-featured__chapter.-pondFilm .b-video.-ambient { aspect-ratio: 21 / 9; border-radius: 2.4rem; }
  .o-featured__chapter.-pondFilm .b-video__ambient iframe {
    width: 200%;
    transform: translate(-50%, -50%) scale(.56);
  }
}

/* =====================================================================
   ACRYLIC TANKS (21 Sept) — Glass Tanks' layout; tiles and cards are
   photographs rather than cut-outs, and the table is the four steps.
   ===================================================================== */
.m-rangeTile.-photo .m-rangeTile__media { overflow: hidden; border-radius: 1rem; } /* square, as on Glass Tanks */
.m-rangeTile.-photo .m-rangeTile__media img { object-fit: cover; mix-blend-mode: normal; transition: transform .8s var(--ease); }
@media (hover: hover) and (any-pointer: fine) {
  .m-rangeTile.-photo:hover .m-rangeTile__media img { transform: scale(1.05); }
}

.o-shopSteps { display: grid; gap: 3.2rem; }
.o-shopSteps li { display: grid; gap: 1rem; align-content: start; padding-top: 2.4rem; border-top: .1rem solid rgba(255, 255, 255, .16); }
.o-shopSteps__no { color: var(--clraccentlight); font-weight: 600; font-size: 1.2rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.o-shopSteps h3 { font-weight: 600; font-size: 2rem; }
.o-shopSteps p { color: rgba(255, 255, 255, .72); font-size: 1.5rem; line-height: 1.5; }
@media (min-width: 641px) { .o-shopSteps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .o-shopSteps { grid-template-columns: repeat(4, 1fr); gap: 4rem; } }

/* ---- acrylic catalogue (client, 22 Sept: Advanced Acrylics' products) ---- */
/* client, 22 Sept: tiles the size of Glass Tanks' (9 there, 8 groups here) */
@media (min-width: 1025px) {
  /* Glass Tanks' exact column width (a ninth of the row), the 8 centred */
  .t-acrylic .o-shopRanges__list { grid-template-columns: repeat(8, calc((100% - 8 * 1.2rem) / 9)); justify-content: center; }
}
/* no photo in the source store: a branded placeholder, not a broken image */
.m-tankCard__media.-empty { background: var(--clrnavy); }
.m-tankCard__media.-empty::after {
  content: "";
  position: absolute; inset: 30%;
  background-color: rgba(255, 255, 255, .25);
  -webkit-mask: url("fin.png") center / contain no-repeat;
  mask: url("fin.png") center / contain no-repeat;
}
.m-tankCard__media.-large { aspect-ratio: 1; border-radius: 2.4rem; }
/* product page photo gallery */
.o-tank__media.-gallery { overflow: visible; aspect-ratio: auto; border-radius: 0; background: none; }
/* Slide photos keep .o-tank__media img's absolute, contained fill (relative to
   their square slide), so no photo's own size can stretch the track. */
.m-gallery { display: grid; gap: 1.2rem; }
.m-gallery__stage {
  display: flex;
  overflow-x: auto;
  border-radius: 2.4rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.m-gallery__stage::-webkit-scrollbar { display: none; }
.m-gallery__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0; /* else the photo's own width stretches the slide */
  display: grid; place-items: center;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #eef2f6 72%);
  scroll-snap-align: start;
}
.m-gallery__slide img { object-fit: contain; }
.m-gallery__thumbs { display: flex; gap: .8rem; overflow-x: auto; padding: .3rem .3rem .6rem; scrollbar-width: thin; }
.m-gallery__thumb {
  flex: 0 0 7.2rem;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: .8rem;
  opacity: .55;
  outline: 2px solid transparent;
  transition: opacity .3s var(--ease), outline-color .3s var(--ease);
}
.m-gallery__thumb.-active, .m-gallery__thumb:hover { opacity: 1; }
.m-gallery__thumb.-active { outline-color: var(--clraccent); }
.o-tank__media.-gallery .m-gallery__thumb img { position: static; width: 100%; height: 100%; padding: 0; object-fit: cover; mix-blend-mode: normal; }

/* ---- before/after reel (client, 22 Sept: IMG_2548, portrait) ---- */
.m-reel {
  position: relative;
  overflow: hidden;
  width: 100%; max-width: 42rem;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 1.6rem;
  background-color: #000;
}
.m-reel__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the landscape scratch film and the portrait reel side by side: flex-grow
   in the ratio of their aspect ratios gives both one height, no cropping */
.m-filmPair { display: grid; gap: 1.6rem; width: 100%; }
.m-filmPair .m-reel { max-width: 34rem; }
@media (min-width: 1025px) {
  .m-filmPair { display: flex; gap: 2rem; align-items: flex-start; }
  .m-filmPair .m-film { flex: 1.7778 1 0; min-width: 0; }
  .m-filmPair .m-reel { flex: .5625 1 0; min-width: 0; max-width: none; margin: 0; }
}

/* =====================================================================
   ABOUT PAGE LAYOUT
   Client, 23 Sept: "the whole about page design is good but the layout is
   not ... text left and image right and everything is not properly formed."

   The Aquatique template placed every image with a negative margin and a
   percentage offset, so each section was a column of text on the left with
   a tall image floating beside it and several hundred pixels of empty
   background wherever the two columns did not happen to end together.

   This replaces those placements, on the About page only, with one grid per
   section and one spacing scale (4.8 / 8 / 12rem). Nothing moves on any
   other page: every rule below is scoped to .t-about, which only about.html
   carries, and the section classes are shared with the service pages.
   ===================================================================== */
@media (min-width: 1025px) {
  /* --- About Acrylic Pros: intro and quote left, photo alongside them --- */
  .t-about .o-universeAbout__wrapper {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 6.4rem;
    align-items: start;
  }
  .t-about .o-universeAbout__wrapper > .a-sectionTitle { grid-area: 1 / 1 / 2 / -1; }
  /* 61.5% of the old full-width wrapper; inside the grid column that is a
     30-character line, so both the intro and the quote take the column. */
  .t-about .o-universeAbout__intro,
  .t-about .o-universeAbout .m-textScroll__content { width: 100%; }
  .t-about .o-universeAbout__intro { grid-area: 2 / 1 / 3 / 2; margin: 0; }
  /* was: position absolute, top 18.3rem, right 0 */
  .t-about .o-universeAbout__firstImage {
    position: static;
    grid-area: 2 / 2 / 4 / 3;
    width: 100%; margin: 0;
    align-self: center;
  }
  .t-about .o-universeAbout .m-textScroll { grid-area: 3 / 1 / 4 / 2; margin-top: 4.8rem; }
  .t-about .o-universeAbout__imagePair { grid-area: 4 / 1 / 5 / -1; margin-top: 8rem; }
  .t-about .o-universeAbout__quote {
    grid-area: 5 / 1 / 6 / -1;
    width: 100%; max-width: 30ch;
    margin-top: 8rem;
  }
  .t-about .o-universeAbout__footer { margin-top: 10rem; padding: 20rem 0 16rem; }

  /* --- What we offer --- */
  .t-about .o-universeVision { padding: 10rem 0 16rem; }
  .t-about .o-universeVision__subtitle { width: 100%; max-width: 28ch; margin-bottom: 4.8rem; }
  .t-about .o-universeVision .b-twoColumns { width: 100%; margin-bottom: 8rem; }
  .t-about .o-universeVision__visual { width: 100%; margin: 0 0 8rem; }
  /* the text and its photo were top-aligned, so a short paragraph left a
     column of background as tall as the photo beside it */
  .t-about .o-universeVision__textImage .b-twoColumns { align-items: center; margin-bottom: 0; }
  .t-about .o-universeVision__textImage .a-image img { aspect-ratio: 4 / 3; object-fit: cover; }
  .t-about .o-universeVision__contact { width: 100%; margin-top: 8rem; }

  /* --- Our services: rows sized by their own content --- */
  .t-about .o-universeResponsability { padding: 8rem 0 10rem; }
  .t-about .o-universeResponsability__introduction { width: 100%; max-width: 60ch; margin: 0 0 6.4rem; }
  .t-about .o-universeResponsability__visual { width: 100%; margin-bottom: 8rem; }
  .t-about .o-universeResponsability__section {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 6.4rem;
    width: 100%;
  }
  .t-about .o-universeResponsability__section:not(:last-child) { margin-bottom: 4.8rem; padding-bottom: 4.8rem; }

  /* --- Acrylic Pros clients: one three-up grid, no stagger --- */
  .t-about .o-universeTeam__subtitle { width: 100%; max-width: 46ch; }
  .t-about .o-universeTeam__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
    margin: 4.8rem 0 8rem;
  }
  .t-about .o-universeTeam__gallery > .a-image { width: 100%; margin: 0; }
  .t-about .o-universeTeam .m-textScroll { width: 100%; margin-bottom: 8rem; padding-top: 6.4rem; }
  .t-about .o-universeTeam .m-textScroll__content { width: 100%; max-width: 46ch; }
  .t-about .o-universeTeam__members { width: 100%; margin-bottom: 8rem; }
}

/* The clients section used to open with a full-height photograph, so the
   cloud edge that hands over from the white section above it had a picture to
   sit on. With the photograph gone (23 Sept) the cloud fell across "Acrylic
   Pros is ready to service any call". The cloud is cloud.png at its natural
   380px, so it is scaled down here as the footer band already does, and the
   section starts below it. */
.t-about .o-universeTeam { padding-top: 12rem; }
.t-about .o-universeTeam > .a-cloud.-top { background-size: 150% min(12rem, 20%); }
@media (min-width: 1025px) { .t-about .o-universeTeam { padding-top: 18rem; } }

/* The gallery reads as a lead line and then its photographs at every width,
   rather than a caption wedged between the second and third image. */
.t-about .o-universeTeam__galleryText { order: -1; grid-column: 1 / -1; width: 100%; max-width: 60ch; margin: 0; }
.t-about .o-universeTeam__gallery > .a-image img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.t-about .o-universeTeam__galleryThirdImage { width: 100%; margin-left: 0; }