:root {
    --muted: #696969;
    --line: #e3e3e1;
    --accent: #88703d
}

html {
    scroll-padding-top: 112px
}

h1 {
    font-size: clamp(48px, 5.8vw, 84px);
    font-weight: 500;
    line-height: 1.09;
    letter-spacing: -.058em
}

h1>span {
    color: #8c8c86
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .11em;
    color: #6a6a65
}

.text-link,
.desktop-nav a,
.header-contact {
    font-size: 14px
}

.button {
    font-size: 14px
}

.desktop-nav a[aria-current=page],
.header-contact[aria-current=page] {
    color: #8b713f
}

.site-header {
    gap: 26px
}

.desktop-nav {
    gap: 26px
}

.section-space {
    padding-top: 100px;
    padding-bottom: 100px
}

.section-top {
    margin-bottom: 44px
}

.section-top>p {
    font-size: 16px
}

.experience-copy .eyebrow {
    font-size: 12px
}

.experience-copy h1,
.experience-copy h2 {
    font-size: clamp(53px, 6.1vw, 88px)
}

.experience-copies {
    width: 38%;
    left: var(--pad)
}

.pump-stage {
    left: 36%;
    right: -2%;
    top: 125px;
    bottom: 95px
}

.experience-description {
    font-size: 17px;
    max-width: 410px
}

.experience-footnote {
    font-size: 12px;
    letter-spacing: .09em
}

.experience-rule {
    left: 42%
}

.model-controls>span,
.model-disclaimer {
    font-size: 11px
}

.part-tag {
    font-size: 12px
}

.chapter-nav button {
    font-size: 14px
}

.chapter-nav small {
    font-size: 12px
}

.chapter-nav {
    gap: 25px
}

.scroll-instruction strong,
.scroll-instruction div>span {
    font-size: 12px
}

.scroll-instruction div>span {
    max-width: 330px
}

.model-controls button {
    width: 42px;
    height: 42px
}

.model-controls button:last-child {
    font-size: 12px
}

.intro-strip p:first-child {
    color: #282828
}

.intro-strip strong {
    color: #777
}

.model-loading p,
.model-error p {
    color: #737373
}

.chapter-detail {
    font-size: 15px
}

.chapter-detail span {
    font-size: 12px
}

.water-key {
    font-size: 12px
}

.motion-toggle {
    font-size: 12px;
    padding: 8px 13px
}

/* The featured range continues the scroll story below the WebGL hero. */
.solutions-story {
    height: 310svh;
    position: relative
}

.solutions-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 750px;
    padding-top: 122px;
    padding-bottom: 40px;
    overflow: hidden
}

.solutions-sticky .section-top {
    margin-bottom: 25px;
    align-items: center
}

.solutions-sticky h2 {
    font-size: clamp(37px, 3.8vw, 55px)
}

.product-tabs {
    gap: 32px
}

.product-tabs button {
    font-size: 14px;
    padding: 14px 0
}

.product-panel {
    grid-template-columns: 1.15fr 1fr;
    gap: 62px;
    padding: 28px 0 12px;
    min-height: 380px
}

.product-visual {
    height: 340px;
    border: 0;
    border-radius: 5px;
    padding: 0;
    background: #fff;
    overflow: hidden;
    position: relative;
    transition: opacity .2s, transform .6s cubic-bezier(.2, .7, .3, 1);
    transform: translateY(var(--product-y, 0px)) rotateZ(var(--product-angle, 0deg))
}

.product-visual.photo {
    width: 340px;
    max-width: 100%;
    justify-self: center;
    aspect-ratio: 1/1
}

.product-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal
}

.product-info {
    transition: opacity .3s, transform .4s
}

.product-panel.changing .product-info {
    animation: productCopy .5s both
}

.product-panel.changing .product-visual {
    animation: productArrival .65s both
}

.product-info .eyebrow {
    font-size: 12px;
    margin-bottom: 15px
}

.product-info h3 {
    font-size: clamp(29px, 2.8vw, 41px)
}

.product-info>p:not(.eyebrow) {
    font-size: 15px;
    margin-top: 16px;
    line-height: 1.7
}

.product-info ul {
    font-size: 14px;
    margin: 16px 0 21px
}

.product-info li {
    padding-top: 3px;
    padding-bottom: 3px
}

.product-links {
    gap: 20px
}

.story-progress {
    height: 2px;
    background: #e8e8e5;
    margin-top: 15px
}

.story-progress span {
    display: block;
    height: 100%;
    background: #a88b52;
    width: 0;
    transition: width .15s linear
}

.motion-ribbon {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 34px 0;
    color: #b5b5af;
    background: #fcfcfb
}

.motion-ribbon div {
    width: max-content;
    font-size: clamp(42px, 6.5vw, 100px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.045em;
    animation: ribbonMove 48s linear infinite;
    will-change: transform
}

.collection {
    border-top: 0
}

.collection .section-top h2 {
    font-size: clamp(40px, 4.6vw, 66px)
}

.home-range-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 62px 45px
}

.all-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 58px 28px
}

.solution-card {
    min-width: 0;
    transform: translateY(var(--card-y, 0px));
    transition: transform .3s ease-out
}

.image-frame {
    background: #fff;
    border: 1px solid #ededeb;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.card-image {
    display: block;
    aspect-ratio: 1/1
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .8s cubic-bezier(.2, .7, .3, 1)
}

.card-image.studio img {
    padding: 6%
}

.card-image.photo img {
    padding: 0
}

.card-image:hover img {
    transform: scale(1.025)
}

.card-open {
    position: absolute;
    bottom: 16px;
    right: 16px;
    border-radius: 50%;
    background: #ffffffed;
    border: 1px solid #e3e3df;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 24px;
    transition: transform .25s
}

.card-image:hover .card-open {
    transform: rotate(45deg);
    color: var(--accent)
}

.card-category {
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a7342;
    margin: 22px 0 11px
}

.solution-card h3 {
    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.2
}

.solution-card>p:not(.card-category) {
    font-size: 16px;
    margin-top: 13px;
    line-height: 1.6;
    color: #717171
}

.solution-card>.text-link {
    margin-top: 18px;
    font-size: 14px
}

.catalog-banner {
    margin-top: 65px;
    padding: 39px 42px
}

.catalog-banner .eyebrow {
    font-size: 12px
}

.catalog-banner p:not(.eyebrow) {
    font-size: 16px
}

.home-about {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 90px;
    border-top: 1px solid var(--line);
    background: #fafafa
}

.home-about h2 {
    font-size: clamp(40px, 4.7vw, 65px)
}

.home-about>div>p:not(.eyebrow) {
    font-size: 18px;
    max-width: 555px;
    margin-top: 28px;
    line-height: 1.8
}

.home-about .button {
    margin-top: 33px
}

.about-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-left: 1px solid #e5e5e2;
    justify-content: center
}

.about-signature img {
    width: 92px;
    height: 92px;
    margin-bottom: 25px
}

.about-signature>span {
    font-size: 12px;
    letter-spacing: .14em;
    color: #797971
}

.about-signature>p {
    font-size: 33px !important;
    line-height: 1.3 !important;
    color: #3d3d39;
    letter-spacing: -.035em
}

.about-signature a {
    margin-top: 27px
}

.closing-cta {
    text-align: center;
    border-top: 1px solid var(--line);
    padding-top: 115px;
    padding-bottom: 115px
}

.closing-cta h2 {
    font-size: clamp(40px, 5.5vw, 77px);
    max-width: 970px;
    margin: auto
}

.closing-cta>p:not(.eyebrow) {
    font-size: 17px;
    max-width: 620px;
    margin: 25px auto 31px;
    line-height: 1.8
}

.site-footer {
    padding-top: 42px
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 45px;
    padding: 28px 0 44px;
    border-top: 1px solid var(--line)
}

.footer-links>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px
}

.footer-links span {
    font-size: 12px;
    letter-spacing: .11em;
    color: #8c7750;
    margin-bottom: 11px
}

.footer-links a {
    font-size: 15px;
    color: #5f5f5b
}

.footer-links a:hover {
    color: var(--accent)
}

.footer-bottom {
    font-size: 12px
}

.footer-bottom a {
    font-size: 14px
}

.render-note {
    font-size: 12px
}

.footer-top p {
    font-size: 12px
}

.footer-top .brand-name {
    font-size: 30px
}

/* Product index and detail pages. */
.page-intro {
    padding-top: 174px;
    padding-bottom: 65px
}

.page-intro h1 {
    font-size: clamp(47px, 5.7vw, 82px);
    max-width: 1050px
}

.page-intro>p:not(.eyebrow) {
    font-size: 19px;
    line-height: 1.8;
    max-width: 615px;
    margin-top: 28px
}

.collection-summary {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 45px;
    padding-top: 22px;
    font-size: 14px;
    color: #74746c;
    gap: 25px
}

.all-products {
    padding-top: 15px
}

.detail-hero {
    padding-top: 137px;
    padding-bottom: 56px
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #777;
    margin-bottom: 43px;
    line-height: 1.5
}

.breadcrumb a:hover {
    color: var(--accent)
}

.breadcrumb [aria-current] {
    color: #333
}

.detail-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 65px;
    align-items: center
}

.detail-copy h1 {
    font-size: clamp(46px, 4.8vw, 70px);
    line-height: 1.10
}

.detail-copy .eyebrow {
    margin-bottom: 21px
}

.detail-lead {
    font-size: 18px;
    line-height: 1.8;
    margin-top: 27px;
    max-width: 570px
}

.detail-actions {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 32px
}

.detail-image {
    margin: 0;
    aspect-ratio: 1.2/1;
    display: grid;
    place-items: center;
    transform: translateY(var(--float-y, 0px)) rotateZ(var(--float-angle, 0deg));
    transition: transform .4s ease-out
}

.detail-image.photo {
    aspect-ratio: 1/1
}

.detail-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 100%;
    min-height: 0;
    min-width: 0
}

.detail-image.studio img {
    padding: 4% 4% 8%
}

.detail-image figcaption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    font-size: 10px;
    letter-spacing: .09em;
    color: #69695f;
    background: #ffffffdb;
    justify-self: center;
    padding: 5px 9px;
    text-align: center;
    max-width: max-content
}

.feature-strip {
    padding: 25px 0 0;
    margin: 49px 0 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    border-top: 1px solid var(--line)
}

.feature-strip li {
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 12px
}

.feature-strip li:before {
    content: '+';
    color: #9c8150;
    flex-shrink: 0
}

.detail-components {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 90px;
    border-top: 1px solid var(--line)
}

.detail-section-copy {
    position: sticky;
    top: 140px;
    align-self: start
}

.detail-section-copy h2 {
    font-size: clamp(39px, 4.5vw, 64px)
}

.detail-section-copy>p:not(.eyebrow) {
    font-size: 18px;
    line-height: 1.8;
    max-width: 390px;
    margin-top: 27px
}

.component-row {
    display: flex;
    gap: 25px;
    border-top: 1px solid var(--line);
    padding: 29px 0
}

.component-row:last-child {
    border-bottom: 1px solid var(--line)
}

.component-number {
    font-size: 13px;
    color: #9c8252;
    line-height: 2
}

.component-row h3 {
    font-size: 27px;
    line-height: 1.2
}

.component-row p {
    font-size: 16px;
    margin-top: 13px;
    line-height: 1.8
}

.product-journey {
    background: #f8f8f7;
    border-top: 1px solid var(--line)
}

.product-journey h2 {
    font-size: clamp(40px, 4.7vw, 67px)
}

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

.process-step {
    position: relative;
    padding-top: 28px;
    border-top: 1px solid #d5d5cf
}

.process-step:before {
    content: '';
    height: 2px;
    width: 0;
    position: absolute;
    top: -1px;
    left: 0;
    background: #b69a5d;
    transition: width 1.2s .15s
}

.process-step.revealed:before {
    width: 100%
}

.process-step>span {
    font-size: 13px;
    color: #877446;
    letter-spacing: .05em
}

.process-step>p {
    font-size: 18px;
    line-height: 1.8;
    color: #52524e;
    margin-top: 21px
}

.process-step h3 {
    font-size: 27px;
    margin-top: 26px;
    line-height: 1.2
}

.process-step h3+p {
    font-size: 16px;
    color: #6c6c65
}

.application-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    border-bottom: 1px solid var(--line)
}

.application-section h2 {
    font-size: clamp(39px, 4.5vw, 64px)
}

.application-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.application-tags span {
    border: 1px solid #deded9;
    border-radius: 30px;
    padding: 10px 19px;
    color: #5d5d56;
    font-size: 15px
}

.application-content>p {
    font-size: 18px;
    line-height: 1.8;
    margin: 28px 0 25px
}

.related-section .section-top h2 {
    font-size: 46px
}

.related-section .solution-card h3 {
    font-size: 25px
}

/* About and Contact retain the same generous white studio language. */
.about-page-hero {
    padding-top: 174px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 80px;
    padding-bottom: 85px
}

.about-story h1 {
    font-size: clamp(48px, 5.5vw, 78px)
}

.about-story>p:not(.eyebrow) {
    font-size: 19px;
    line-height: 1.8;
    margin-top: 28px;
    max-width: 620px
}

.about-story .text-link {
    margin-top: 29px
}

.founder-portrait {
    margin: 0;
    transform: translateY(var(--float-y, 0px));
    transition: transform .4s;
    max-width: 420px;
    justify-self: end
}

.founder-portrait img {
    width: 100%;
    height: auto;
    border-radius: 50%
}

.founder-portrait figcaption {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 21px
}

.founder-portrait strong {
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.035em
}

.founder-portrait figcaption>span {
    font-size: 14px;
    color: #7b7568;
    margin-top: 3px
}

.story-section {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
    border-top: 1px solid var(--line)
}

.story-heading {
    position: sticky;
    top: 143px;
    align-self: start
}

.story-heading h2 {
    font-size: clamp(39px, 4.4vw, 62px)
}

.story-heading>p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.8;
    margin-top: 28px;
    max-width: 430px
}

.milestone-list article {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 27px;
    border-top: 1px solid var(--line);
    padding: 30px 0 43px
}

.milestone-list article>strong {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -.06em;
    color: #998353
}

.milestone-list h3 {
    font-size: 26px;
    line-height: 1.25
}

.milestone-list p {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 15px
}

.people-section {
    background: #fafaf9;
    border-top: 1px solid var(--line)
}

.instagram-section {
    text-align: center
}

.instagram-section h2 {
    font-size: clamp(42px, 5vw, 70px)
}

.instagram-section .button {
    margin-top: 33px
}

.contact-page {
    padding-top: 166px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start
}

.contact-info h1 {
    font-size: clamp(51px, 5.6vw, 80px)
}

.contact-info>p:not(.eyebrow) {
    font-size: 18px;
    line-height: 1.8;
    margin-top: 27px;
    max-width: 450px
}

.contact-info address {
    font-size: 16px;
    line-height: 1.8;
    color: #777
}

.contact-phone {
    font-size: 32px;
    margin-top: 33px
}

.secondary-phone {
    font-size: 16px;
    margin-bottom: 19px;
    color: #6b6b63
}

.contact-email {
    font-size: 16px;
    color: #646459
}

.address-link {
    margin-top: 21px
}

.contact-page .enquiry-form {
    padding: 36px;
    background: #fafaf8
}

.enquiry-form h2 {
    font-size: 30px;
    margin-bottom: 31px;
    letter-spacing: -.045em
}

.enquiry-form label {
    font-size: 14px;
    color: #5f5f57
}

.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
    color: #343430;
    border-bottom-color: #ccccbf
}

.form-note {
    font-size: 13px;
    color: #76766a
}

.contact-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    border-top: 1px solid var(--line);
    padding-top: 62px;
    padding-bottom: 72px
}

.contact-links h2 {
    font-size: 41px
}

.contact-links .eyebrow {
    margin-bottom: 19px
}

.not-found {
    padding-top: 190px;
    min-height: 70svh
}

.not-found h1 {
    margin-bottom: 35px
}

.not-found>.text-link {
    margin-left: 27px
}

/* Motion is visible throughout the site and remains optional. */
[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity .8s, transform 1s cubic-bezier(.16, 1, .3, 1)
}

.motion-ready [data-reveal]:not(.revealed) {
    opacity: 0;
    transform: translateY(54px)
}

.motion-ready .motion-card:not(.revealed) {
    opacity: 0;
    transform: translateY(70px)
}

.motion-card {
    transition: opacity .9s calc(var(--item-order, 0)*90ms), transform 1s cubic-bezier(.16, 1, .3, 1);
    will-change: transform
}

.motion-paused [data-reveal],
.motion-paused .motion-card {
    opacity: 1 !important;
    transform: none !important
}

.motion-paused .process-step:before {
    width: 100%
}

.motion-paused .product-visual {
    transform: none !important
}

.reduced-motion .solutions-story {
    height: auto
}

.reduced-motion .solutions-sticky {
    position: relative;
    height: auto
}

.reduced-motion .solutions-sticky .section-top>p {
    font-size: 0
}

.reduced-motion .solutions-sticky .section-top>p:after {
    content: 'Choose a system below to explore the range.';
    font-size: 16px
}

.reduced-motion .motion-ribbon div {
    animation: none
}

.reduced-motion [data-float] {
    transform: none !important
}

@keyframes ribbonMove {
    to {
        transform: translateX(-33.333%)
    }
}

@keyframes productArrival {
    from {
        opacity: 0;
        transform: translateY(40px) rotateZ(-2deg) scale(.96)
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateZ(0) scale(1)
    }
}

@keyframes productCopy {
    from {
        opacity: 0;
        transform: translateX(23px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@media(min-width:1800px) {

    .experience-copy h1,
    .experience-copy h2 {
        font-size: 96px
    }

    .product-visual {
        height: 390px
    }

    .product-visual.photo {
        width: 390px
    }

    .solutions-sticky {
        padding-top: 150px
    }

    .product-panel {
        padding-top: 38px
    }
}

@media(max-height:850px) and (min-width:761px) {
    .solutions-sticky {
        padding-top: 112px;
        min-height: 680px
    }

    .solutions-sticky h2 {
        font-size: 41px
    }

    .solutions-sticky .section-top {
        margin-bottom: 16px
    }

    .product-tabs button {
        padding: 10px 0
    }

    .product-visual {
        height: 285px
    }

    .product-visual.photo {
        width: 285px
    }

    .product-info .eyebrow {
        margin-bottom: 11px
    }

    .product-info h3 {
        font-size: 31px
    }

    .product-info>p:not(.eyebrow) {
        font-size: 15px;
        margin-top: 11px
    }

    .product-info ul {
        margin-top: 11px;
        margin-bottom: 15px
    }

    .product-panel {
        min-height: 320px;
        padding-top: 20px
    }

    .product-links .button {
        padding: 13px 17px
    }

    .product-links .text-link {
        font-size: 13px
    }

    .story-progress {
        margin-top: 7px
    }
}

@media(max-width:1100px) {
    .desktop-nav {
        gap: 19px
    }

    .desktop-nav a {
        font-size: 13px
    }

    .site-header {
        gap: 17px
    }

    .header-contact {
        margin-left: 0
    }

    .experience-description {
        font-size: 16px
    }

    .experience-footnote {
        font-size: 11px
    }

    .experience-copy .eyebrow {
        font-size: 11px
    }

    .scroll-instruction div>span {
        display: none
    }

    .scroll-instruction {
        min-width: 220px
    }

    .chapter-nav {
        gap: 19px
    }

    .product-panel {
        gap: 33px
    }

    .product-links {
        gap: 13px
    }

    .detail-hero-grid {
        gap: 38px
    }

    .detail-copy h1 {
        font-size: 49px
    }

    .detail-lead {
        font-size: 17px
    }

    .detail-components,
    .application-section {
        gap: 48px
    }

    .about-page-hero,
    .story-section {
        gap: 50px
    }

    .contact-page {
        gap: 44px
    }

    .all-product-grid {
        gap: 43px 23px
    }

    .home-range-grid {
        gap: 48px 32px
    }

    .home-about {
        gap: 48px
    }

    .contact-page .enquiry-form {
        padding: 29px 25px
    }

    .milestone-list article {
        grid-template-columns: 90px 1fr;
        gap: 20px
    }

    .milestone-list article>strong {
        font-size: 34px
    }
}

@media(max-width:760px) {
    html {
        scroll-padding-top: 94px
    }

    .section-space {
        padding-top: 62px;
        padding-bottom: 62px
    }

    .experience-copies {
        width: auto;
        left: var(--pad);
        right: var(--pad);
        top: 112px
    }

    .experience-copy h1,
    .experience-copy h2 {
        font-size: clamp(42px, 10.3vw, 64px)
    }

    .experience-copy .eyebrow {
        font-size: 10px
    }

    .experience-description {
        font-size: 15px;
        line-height: 1.7
    }

    .experience-footnote {
        display: none
    }

    .pump-stage {
        left: -9%;
        right: -9%;
        top: 344px;
        bottom: 105px
    }

    .model-controls>span {
        font-size: 10px
    }

    .model-disclaimer {
        font-size: 9px
    }

    .model-controls button {
        width: 38px;
        height: 38px
    }

    .chapter-nav {
        gap: 7px
    }

    .chapter-nav button {
        font-size: 12px
    }

    .chapter-nav small {
        font-size: 11px
    }

    .scroll-instruction {
        display: none
    }

    .part-tag {
        font-size: 10px
    }

    .chapter-detail {
        font-size: 13px;
        line-height: 2.0;
        margin-top: 15px
    }

    .chapter-detail span {
        font-size: 11px
    }

    .water-key {
        font-size: 12px
    }

    .motion-text {
        display: none
    }

    .motion-toggle {
        padding: 8px 10px
    }

    .solutions-story {
        height: auto
    }

    .solutions-sticky {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible
    }

    .solutions-sticky .section-top {
        display: block;
        margin-bottom: 24px
    }

    .solutions-sticky h2 {
        font-size: 41px
    }

    .solutions-sticky .section-top>p {
        font-size: 0;
        margin-top: 19px
    }

    .solutions-sticky .section-top>p:after {
        content: 'Choose a system to explore the range.';
        font-size: 16px
    }

    .product-panel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 26px;
        min-height: 0;
        padding-top: 23px;
        padding-bottom: 16px
    }

    .product-visual {
        height: auto;
        aspect-ratio: 1.38/1;
        transform: none !important
    }

    .product-visual.photo {
        width: 100%;
        height: auto;
        max-width: 350px;
        aspect-ratio: 1/1
    }

    .product-tabs {
        gap: 24px
    }

    .product-tabs button {
        font-size: 14px;
        padding: 13px 0
    }

    .product-info h3 {
        font-size: 34px
    }

    .product-info>p:not(.eyebrow) {
        font-size: 16px
    }

    .product-info ul {
        font-size: 15px;
        margin: 19px 0 23px
    }

    .product-links .button {
        font-size: 14px
    }

    .product-links .text-link {
        font-size: 14px
    }

    .story-progress {
        margin-top: 18px
    }

    .motion-ribbon {
        padding: 24px 0
    }

    .motion-ribbon div {
        font-size: 57px
    }

    .home-range-grid,
    .all-product-grid {
        grid-template-columns: 1fr;
        gap: 37px
    }

    .card-image {
        aspect-ratio: 1/1
    }

    .solution-card h3 {
        font-size: 29px
    }

    .card-category {
        font-size: 12px;
        margin-top: 21px
    }

    .solution-card>p:not(.card-category) {
        font-size: 16px
    }

    .collection .section-top h2 {
        font-size: 41px
    }

    .collection .section-top>.text-link {
        margin-top: 25px
    }

    .catalog-banner {
        padding: 28px 23px
    }

    .catalog-banner .eyebrow {
        font-size: 11px
    }

    .catalog-banner p:not(.eyebrow) {
        font-size: 16px
    }

    .catalog-banner .button {
        font-size: 14px
    }

    .home-about {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .home-about h2 {
        font-size: 40px
    }

    .home-about>div>p:not(.eyebrow) {
        font-size: 17px
    }

    .about-signature {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-top: 38px
    }

    .about-signature>p {
        font-size: 30px !important;
        margin-top: 19px !important
    }

    .closing-cta {
        padding-top: 72px;
        padding-bottom: 72px
    }

    .closing-cta h2 {
        font-size: 43px
    }

    .closing-cta>p:not(.eyebrow) {
        font-size: 16px
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 30px 22px
    }

    .footer-links>div:last-child {
        grid-column: 1/-1
    }

    .footer-links a {
        font-size: 14px
    }

    .footer-links span {
        font-size: 11px
    }

    .footer-top .brand-name {
        font-size: 27px
    }

    .footer-bottom {
        font-size: 12px
    }

    .page-intro {
        padding-top: 135px;
        padding-bottom: 35px
    }

    .page-intro h1 {
        font-size: 44px
    }

    .page-intro>p:not(.eyebrow) {
        font-size: 17px;
        line-height: 1.8;
        margin-top: 25px
    }

    .collection-summary {
        flex-direction: column;
        gap: 9px;
        margin-top: 32px;
        font-size: 13px
    }

    .all-products {
        padding-top: 0
    }

    .detail-hero {
        padding-top: 116px;
        padding-bottom: 35px
    }

    .breadcrumb {
        font-size: 12px;
        gap: 9px;
        margin-bottom: 30px
    }

    .detail-hero-grid {
        grid-template-columns: 1fr;
        gap: 31px
    }

    .detail-copy h1 {
        font-size: 45px
    }

    .detail-copy .eyebrow {
        font-size: 11px;
        margin-bottom: 19px
    }

    .detail-lead {
        font-size: 17px;
        margin-top: 22px
    }

    .detail-actions {
        margin-top: 26px;
        gap: 23px
    }

    .detail-image {
        aspect-ratio: 1.15/1
    }

    .detail-image.photo {
        aspect-ratio: 1/1
    }

    .detail-image figcaption {
        font-size: 9px
    }

    .feature-strip {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 29px;
        padding-top: 24px
    }

    .feature-strip li {
        font-size: 15px
    }

    .detail-components {
        grid-template-columns: 1fr;
        gap: 31px
    }

    .detail-section-copy {
        position: relative;
        top: auto
    }

    .detail-section-copy h2 {
        font-size: 40px
    }

    .detail-section-copy>p:not(.eyebrow) {
        font-size: 17px;
        margin-top: 22px;
        max-width: none
    }

    .component-row {
        gap: 18px;
        padding: 24px 0
    }

    .component-row h3 {
        font-size: 24px
    }

    .component-row p {
        font-size: 16px
    }

    .product-journey h2 {
        font-size: 41px
    }

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

    .process-step {
        padding-top: 22px
    }

    .process-step>p {
        font-size: 17px;
        line-height: 1.7;
        margin-top: 15px
    }

    .process-step h3 {
        margin-top: 20px;
        font-size: 25px
    }

    .application-section {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .application-section h2 {
        font-size: 41px
    }

    .application-content>p {
        font-size: 17px
    }

    .application-tags {
        gap: 9px
    }

    .application-tags span {
        font-size: 14px;
        padding: 9px 16px
    }

    .related-section .section-top h2 {
        font-size: 39px
    }

    .related-section .section-top>.text-link {
        margin-top: 23px
    }

    .related-section .solution-card h3 {
        font-size: 29px
    }

    .about-page-hero {
        padding-top: 137px;
        grid-template-columns: 1fr;
        gap: 37px
    }

    .about-story h1 {
        font-size: 44px
    }

    .about-story>p:not(.eyebrow) {
        font-size: 17px
    }

    .founder-portrait {
        max-width: 300px;
        justify-self: center
    }

    .founder-portrait strong {
        font-size: 25px
    }

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

    .story-heading {
        position: relative;
        top: auto
    }

    .story-heading h2 {
        font-size: 41px
    }

    .milestone-list article {
        grid-template-columns: 82px 1fr;
        gap: 16px;
        padding-top: 25px;
        padding-bottom: 31px
    }

    .milestone-list article>strong {
        font-size: 31px
    }

    .milestone-list h3 {
        font-size: 23px
    }

    .milestone-list p {
        font-size: 16px
    }

    .people-section .section-top h2 {
        font-size: 41px
    }

    .instagram-section h2 {
        font-size: 42px
    }

    .contact-page {
        padding-top: 136px;
        grid-template-columns: 1fr;
        gap: 37px
    }

    .contact-info h1 {
        font-size: 52px
    }

    .contact-info>p:not(.eyebrow) {
        font-size: 17px
    }

    .contact-info address {
        font-size: 15px
    }

    .contact-phone {
        font-size: 30px
    }

    .contact-email {
        font-size: 15px
    }

    .secondary-phone {
        font-size: 16px
    }

    .contact-page .enquiry-form {
        padding: 27px 22px
    }

    .enquiry-form h2 {
        font-size: 27px
    }

    .contact-links {
        display: block
    }

    .contact-links h2 {
        font-size: 37px
    }

    .contact-links>.text-link {
        display: flex;
        width: max-content;
        margin-top: 26px
    }

    .not-found {
        padding-top: 145px
    }

    .not-found>.text-link {
        display: block;
        margin: 25px 0 0
    }
}

@media(max-width:760px) and (max-height:760px) {
    .experience-copies {
        top: 104px
    }

    .experience-copy h1,
    .experience-copy h2 {
        font-size: 42px
    }

    .experience-description {
        font-size: 14px;
        margin-top: 14px
    }

    .experience-copy .eyebrow {
        font-size: 10px;
        margin-bottom: 13px
    }

    .pump-stage {
        top: 306px
    }

    .chapter-detail {
        font-size: 12px;
        line-height: 1.9
    }

    .hero-actions .button {
        font-size: 13px
    }

    .hero-actions .text-link {
        font-size: 13px
    }
}

@media(prefers-reduced-motion:reduce) {
    .motion-ribbon div {
        animation: none
    }

    .motion-ready [data-reveal],
    .motion-ready .motion-card {
        opacity: 1;
        transform: none
    }

    * {
        scroll-behavior: auto !important
    }
}

.motion-paused .product-panel.changing .product-info,
.motion-paused .product-panel.changing .product-visual {
    animation: none;
    opacity: 1;
    transform: none
}

.reduced-motion .product-panel.changing .product-info,
.reduced-motion .product-panel.changing .product-visual {
    animation: none;
    opacity: 1;
    transform: none
}

[data-float].revealed {
    transform: translateY(var(--float-y, 0px)) rotateZ(var(--float-angle, 0deg))
}

@media(max-width:760px) and (max-height:660px) {
    .experience-sticky {
        min-height: 0;
        height: 100svh
    }

    .experience-copies {
        top: 101px;
        height: 230px
    }

    .experience-copy h1,
    .experience-copy h2 {
        font-size: 36px
    }

    .experience-description {
        font-size: 14px;
        line-height: 1.55;
        margin-top: 12px
    }

    .experience-copy .eyebrow {
        font-size: 10px;
        margin-bottom: 12px
    }

    .hero-actions {
        margin-top: 13px
    }

    .hero-actions .button {
        padding: 10px 14px
    }

    .chapter-detail,
    .water-key {
        display: none
    }

    .pump-stage {
        top: 297px;
        bottom: 83px
    }

    .model-controls {
        bottom: 12px
    }

    .model-controls>span,
    .model-disclaimer,
    .part-tag {
        display: none !important
    }

    .model-controls button {
        width: 33px;
        height: 33px
    }

    .model-controls button:last-child {
        width: auto
    }

    .experience-bottom {
        bottom: 12px
    }

    .chapter-nav button {
        font-size: 12px
    }

    .chapter-nav small {
        font-size: 10px
    }
}

/* The original catalogue logos sit on a gently moving glass ribbon. */
.clients-section {
    position: relative;
    margin: 72px calc(-1 * var(--pad)) 0;
    padding: 36px 0 42px;
    border-top: 1px solid #e7e7e4;
    border-bottom: 1px solid #e7e7e4;
    background: radial-gradient(ellipse at 16% 78%, rgba(181, 180, 173, .20), transparent 46%), radial-gradient(ellipse at 86% 21%, rgba(218, 208, 183, .20), transparent 42%), linear-gradient(110deg, #f7f7f5, #fff 48%, #f4f4f2);
    isolation: isolate;
    overflow: hidden
}

.clients-heading {
    display: flex;
    align-items: baseline;
    gap: 25px;
    max-width: 1480px;
    padding: 0 var(--pad) 22px;
    margin: auto
}

.clients-heading .eyebrow {
    font-size: 12px;
    margin: 0;
    color: #8b764c
}

.clients-heading h2 {
    font-size: 32px;
    letter-spacing: -.04em;
    font-weight: 500;
    line-height: 1.25
}

.clients-marquee {
    position: relative;
    overflow: hidden;
    padding: 16px 0 22px;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)
}

.client-logo-track {
    display: flex;
    width: max-content;
    animation: clientLogosFlow 128s linear infinite;
    will-change: transform
}

.client-logo-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    list-style: none;
    padding: 0 20px 0 0;
    margin: 0
}

.client-logo-card {
    position: relative;
    flex: 0 0 204px;
    width: 204px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 21px 22px;
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 23px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .46) 48%, rgba(234, 235, 234, .50));
    box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(183, 188, 190, .20), 0 9px 24px rgba(54, 59, 65, .07);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    overflow: hidden
}

.client-logo-card:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .48), transparent 38%, rgba(255, 255, 255, .08) 65%, rgba(255, 255, 255, .50));
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .75)
}

.client-logo-card img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: brightness(1.04) contrast(1.17)
}

.clients-marquee:hover .client-logo-track,
.clients-marquee:focus-within .client-logo-track {
    animation-play-state: paused
}

.clients-marquee:focus-visible {
    outline-offset: -4px
}

.reduced-motion .clients-marquee {
    overflow-x: auto;
    scrollbar-width: thin;
    mask-image: none;
    -webkit-mask-image: none;
    padding-left: var(--pad);
    padding-right: var(--pad)
}

.reduced-motion .client-logo-track {
    animation: none;
    transform: none
}

.reduced-motion .client-logo-group[aria-hidden=true] {
    display: none
}

.reduced-motion .client-logo-group {
    padding-right: 0
}

@keyframes clientLogosFlow {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@media(max-width:760px) {
    .clients-section {
        margin-top: 44px;
        padding-top: 28px;
        padding-bottom: 26px
    }

    .clients-heading {
        display: block;
        padding-bottom: 16px
    }

    .clients-heading .eyebrow {
        margin-bottom: 11px
    }

    .clients-heading h2 {
        font-size: 29px
    }

    .client-logo-group {
        gap: 16px;
        padding-right: 16px
    }

    .client-logo-card {
        flex-basis: 170px;
        width: 170px;
        height: 113px;
        padding: 19px 18px;
        border-radius: 20px
    }

    .clients-marquee {
        padding-top: 12px;
        padding-bottom: 17px
    }
}

@media(prefers-reduced-motion:reduce) {
    .client-logo-track {
        animation: none;
        transform: none
    }

    .client-logo-group[aria-hidden=true] {
        display: none
    }

    .clients-marquee {
        overflow-x: auto;
        scrollbar-width: thin;
        mask-image: none;
        -webkit-mask-image: none;
        padding-left: var(--pad);
        padding-right: var(--pad)
    }
}

#product-panel[aria-labelledby="product-tab-2"] #product-visual {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 2.35 / 1;
    padding: 0;
    justify-self: stretch;
}

#product-panel[aria-labelledby="product-tab-2"] #product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

/* Header social actions */
.header-socials{display:flex;align-items:center;gap:7px;flex-shrink:0}
.social-icon{width:36px;height:36px;border:1px solid #deded9;border-radius:50%;display:grid;place-items:center;color:#555;background:rgba(255,255,255,.8);transition:color .2s,border-color .2s,transform .2s,background .2s}
.social-icon:hover{color:#88703d;border-color:#b9aa82;background:#fff;transform:translateY(-1px)}
.social-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.social-icon .social-dot{fill:currentColor;stroke:none}
.mobile-socials{display:none}
.contact-social-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;margin-bottom:20px}
.contact-social{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid #deded9;border-radius:999px;font-size:13px;color:#555;background:#fff;transition:color .2s,border-color .2s,transform .2s}
.contact-social:hover{color:#88703d;border-color:#b9aa82;transform:translateY(-1px)}
.contact-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.contact-social .social-dot{fill:currentColor;stroke:none}
@media(max-width:1100px) and (min-width:761px){.header-socials{gap:5px}.social-icon{width:33px;height:33px}.social-icon svg{width:15px;height:15px}.header-contact{margin-left:0;gap:12px}}
@media(max-width:760px){.header-socials{display:none}.mobile-socials{display:flex;gap:10px;padding-top:16px;margin-top:8px}.mobile-socials a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #deded9!important;border-radius:999px;padding:10px 12px!important;font-size:13px}.mobile-socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.mobile-socials .social-dot{fill:currentColor;stroke:none}.contact-social-actions{margin-top:16px}}


/* Branded social colours */
.social-icon.social-whatsapp{color:#fff;background:#25D366;border-color:#25D366;box-shadow:0 3px 12px rgba(37,211,102,.18)}
.social-icon.social-whatsapp:hover{color:#fff;background:#20bd5a;border-color:#20bd5a;transform:translateY(-1px)}
.social-icon.social-instagram{color:#fff;background:radial-gradient(circle at 30% 107%,#fdf497 0 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:transparent;box-shadow:0 3px 12px rgba(193,53,132,.18)}
.social-icon.social-instagram:hover{color:#fff;border-color:transparent;filter:saturate(1.08);transform:translateY(-1px)}
.mobile-socials a[href*="wa.me"] svg{color:#25D366;stroke:#25D366}
.mobile-socials a[href*="instagram.com"]{border-color:#e7d2e0!important}
.mobile-socials a[href*="instagram.com"] svg{color:#C13584;stroke:#C13584}
.contact-social.whatsapp{color:#128C7E;border-color:#bfe9ce;background:#f4fff7}
.contact-social.whatsapp:hover{color:#075E54;border-color:#25D366;background:#effcf3}
.contact-social.whatsapp svg{stroke:#25D366}
.contact-social.instagram{color:#C13584;border-color:#ead0df;background:linear-gradient(135deg,#fff9ef,#fff5fb 50%,#f5f7ff)}
.contact-social.instagram:hover{color:#833AB4;border-color:#d9b4cf;background:linear-gradient(135deg,#fff5e8,#fff0f8 50%,#eef2ff)}
.contact-social.instagram svg{stroke:#C13584}

/* Contact form backend helpers */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.enquiry-form button[disabled]{opacity:.65;cursor:wait;transform:none!important}
/* Mobile featured-system responsiveness + social icon sizing (2026-09-24) */
.social-icon svg{width:22px;height:22px}
@media(max-width:1100px) and (min-width:761px){.social-icon svg{width:20px;height:20px}}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .solutions-story{height:auto;min-height:320svh}
  .solutions-sticky{position:relative;top:auto;height:auto;min-height:320svh;overflow:visible;padding-bottom:70px}
  .product-tabs{position:sticky;top:82px;z-index:12;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none}
  .product-tabs::-webkit-scrollbar{display:none}
  .product-tabs button{scroll-snap-align:center}
  .product-panel{position:sticky;top:132px;z-index:6;background:#fff;padding-top:20px;padding-bottom:24px}
}
@media(max-width:760px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .solutions-story,.solutions-sticky{min-height:360svh}
  .product-panel{top:126px;gap:18px}
  .product-visual{max-height:225px}
  .product-info h3{font-size:30px}
  .product-info>p:not(.eyebrow){font-size:14px;line-height:1.55}
  .product-info ul{font-size:13px;margin:13px 0 16px}
  .product-info li{padding-top:4px;padding-bottom:4px}
  .product-links .button,.product-links .text-link{font-size:13px}
}

/* Clean header social marks — logo only, no coloured outer circles */
.header-socials{gap:14px}
.social-icon{
  width:38px;
  height:38px;
  padding:0;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  transition:transform .2s ease,opacity .2s ease;
}
.social-icon svg{
  width:30px;
  height:30px;
  stroke-width:1.8;
}
.social-icon.social-whatsapp{
  color:#25D366!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.social-icon.social-instagram{
  color:#E1306C!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.social-icon:hover{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:scale(1.1)!important;
}
.social-icon.social-whatsapp:hover{color:#20bd5a!important;background:transparent!important}
.social-icon.social-instagram:hover{color:#C13584!important;background:transparent!important;filter:none!important}
@media(max-width:1100px) and (min-width:761px){
  .header-socials{gap:10px}
  .social-icon{width:34px;height:34px}
  .social-icon svg{width:27px;height:27px}
}


/* Entry experience: full-screen liquid-glass loader (first visit per tab/session) */
.entry-loading{overflow:hidden}
.skip-entry-loader .entry-loader{display:none!important}
.entry-loader{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(204,227,221,.62),transparent 35%),
    radial-gradient(circle at 82% 30%,rgba(219,210,184,.52),transparent 34%),
    radial-gradient(circle at 55% 88%,rgba(201,216,232,.5),transparent 38%),
    linear-gradient(145deg,rgba(250,251,249,.9),rgba(241,245,244,.72));
  -webkit-backdrop-filter:blur(28px) saturate(125%);backdrop-filter:blur(28px) saturate(125%);
  transition:opacity .32s ease,visibility .32s ease;
}
.entry-loader::before,.entry-loader::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(18px);opacity:.48;mix-blend-mode:multiply}
.entry-loader::before{width:min(62vw,760px);aspect-ratio:1;left:-17vw;top:-24vw;background:radial-gradient(circle at 65% 65%,rgba(255,255,255,.95),rgba(129,179,169,.22) 48%,transparent 72%);animation:liquidFloatA 4s ease-in-out infinite alternate}
.entry-loader::after{width:min(56vw,680px);aspect-ratio:1;right:-14vw;bottom:-25vw;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.92),rgba(178,160,112,.18) 50%,transparent 73%);animation:liquidFloatB 4.6s ease-in-out infinite alternate}
.entry-loader-content{position:relative;z-index:1;width:min(420px,80vw);display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-1vh);transition:transform .32s ease,opacity .25s ease}
.entry-loader-logo{width:82px;height:82px;object-fit:contain;margin-bottom:24px;filter:drop-shadow(0 10px 24px rgba(35,35,35,.07));animation:loaderLogoIn .7s cubic-bezier(.2,.8,.2,1) both}
.entry-loader-title{margin:0;color:#242424;font-size:clamp(24px,3.1vw,36px);line-height:1.15;letter-spacing:-.035em;font-weight:500}
.entry-loader-track{width:min(330px,72vw);height:2px;background:rgba(55,55,55,.14);margin-top:34px;overflow:hidden;border-radius:999px}
.entry-loader-track span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#252525,#877443);transform:scaleX(0);transform-origin:left center;will-change:transform}
.entry-loader-meta{width:min(330px,72vw);display:flex;align-items:center;justify-content:space-between;margin-top:11px;color:#777;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.entry-loader-meta strong{font-size:11px;font-weight:600;color:#4e4e4e;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.entry-loader.is-complete{opacity:0;visibility:hidden;pointer-events:none}
.entry-loader.is-complete .entry-loader-content{opacity:0;transform:translateY(-12px) scale(.985)}
@keyframes loaderLogoIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes liquidFloatA{to{transform:translate(5vw,3vw) scale(1.05)}}
@keyframes liquidFloatB{to{transform:translate(-4vw,-3vw) scale(1.06)}}
@media(max-width:760px){.entry-loader-logo{width:70px;height:70px;margin-bottom:21px}.entry-loader-title{font-size:27px}.entry-loader-track,.entry-loader-meta{width:min(290px,76vw)}}
@media(prefers-reduced-motion:reduce){.entry-loader::before,.entry-loader::after,.entry-loader-logo{animation:none}.entry-loader,.entry-loader-content{transition-duration:.18s}}

/* Familiar brand logo artwork in header/mobile/contact social links */
.social-icon img.brand-social-logo{display:block;width:31px;height:31px;object-fit:contain}
.social-icon.social-whatsapp,.social-icon.social-instagram{color:inherit!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}
.social-icon.social-whatsapp:hover,.social-icon.social-instagram:hover{background:transparent!important;filter:none!important}
.mobile-socials img.brand-social-logo,.contact-social img.brand-social-logo{display:block;width:19px;height:19px;object-fit:contain;flex:0 0 auto}
@media(max-width:1100px) and (min-width:761px){.social-icon img.brand-social-logo{width:28px;height:28px}}