section{
    font-family: system-ui , sans-serif;
    font-size: var(--font-size);
    margin: 0 auto 5rem auto;
}
section h1{
    line-height: 1;
    max-width: 100vw;
}
section h2{
    font-size: var(--font-size-xl);
    line-height: 1;
}
section h2,
section p,
section h3{
    margin: 0 0 0.5em 0;
    padding: unset;
    word-break: normal;
}
section img{
    max-width: 100%;
}
img.icon{
    width: 2rem;
    height: 2rem;
}
img.icon.large{
    width: 4.5rem;
    height: 4.5rem;
}
section > h2+p,
section > h2{
    /* padding-bottom: 0.5em; */
}
@media screen and (max-width : 650px){
    section h2,
    section p,
    section h3{
        padding: 0 0 0 0.5em;
    }
    section > p,
    section > h2{
        padding-left: var(--space-3);
        max-width: calc(100vw - (var(--space-3) * 2));
    }
    section .postscription {
        display: block;
        padding-left: var(--space-3);
        width: calc(100vw - (var(--space-3) * 2));
    }
}
/* form-rigid form */
/* form */
form {
    max-width: 40em;
    grid-template-columns: repeat(2,1fr);
}
form input , form textarea{
    background: var(--color-surface);
}
form > h3{
    line-height: 1;
    padding-left: var(--space-3);
    width: calc(100vw - (var(--space-3) * 2));
    font-size: var(--font-size-xl);
    letter-spacing: -1px;
}
form > .group,
form > .group-text,
form > .group-half,
form > .group-checkbox{
    width: calc(100% - (var(--space-2) * 2));
}
form .group-text,
form .group{
    position: relative;
    margin-top: 1.5rem;
}
form .group-text > label,
form .group > label{
    position: absolute;
    left: 1.25em;
    top: -1.2em;
    font-size: var(--font-size-xs);
}
form .group > input{
    font-size: var(--font-size-md);
    min-height: 2.5em;
    padding-left: 0.75em;
}
form .group-text > textarea{
    font-size: var(--font-size-md);
    width: 100%;
    max-width: unset;
    padding-top: 0.5em;
    padding-left: 0.5em;
    min-height: 12.5em;
}
form .group-checkbox{
    display: flex;
    align-items: center;
}
form .group-checkbox > div{
    display: flex;
    align-items: center;
}
form .group-checkbox > div > label{
    display: flex;
    align-items: center;
    min-height: 2em;
    font-size: var(--font-size-md);
}
form .group-checkbox > div > label::before{
    content: "";
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
    border-radius: 0.75em;
    border: 1px solid var(--color-text);
    aspect-ratio: 1/1;
    margin-left: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}
form .group-checkbox > div > input{
    display: none;
}
form .group-checkbox > div > input:checked + label::before{
    content: "";
    border: 2px solid var(--color-background);
    box-shadow: 0 0 0 1px var(--color-text);
    background: var(--color-text);
}
form > button{
    display: flex;
    align-items: center;
    padding-left: 0.75em;
    padding-right: 0.75em;
    text-transform: uppercase;
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-primary-invert);
    margin-left: auto;
    font-size: var(--font-size-md);
    min-height: 2.5em;
    border-radius: 1.25em;
    margin-right: 0.5em;
}
@media screen and (max-width : 650px) {
    form > .group,form .group-text,form .group-half,form .group-checkbox , form .group > input{
        width: 100%;
    }
}
@media screen and (min-width : 651px) {
    form .group-half{
        display: flex;
        gap: 0.5em;
    }
    form .group > input,
    form .group-text > textarea{
        border-radius: 1.25em;
    }
    form .group > input{
        min-width: 17em;
    }
    form .group > input{
        width: calc(100% - 1.5em);
    }
    form {
        width: calc(100% - (var(--space-2) * 2));
    }
}
/* #popup */
#popup{
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
#popup #closePopup{
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    background: unset;
    font-weight: 600;
    color: #000000;
    outline: unset;
    border: unset;
}
#popup>div{
    position: relative;
    background: white;
    border-radius: var(--space-3);
    border: 1px solid var(--color-border);
    max-width: 320px;
    padding: 2rem var(--space-2) 1rem var(--space-2);
    width: 90%;
    text-align: center;
}
#popup>div>h3{
    margin-top: 0;
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-1);
}
#popup>div>h3+p{
    line-height: 1;
    padding-top: unset;
    margin-top: unset;
    margin-bottom: 2rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
#popup > div form input{
    width:100%; 
    background: transparent;
    min-height: var(--button-size);
    padding-left:var(--space-2);
    padding-right:var(--space-2);
    border:1px solid var(--color-border);
    border-radius:var(--space-2);
    font-size:1rem;
}
#popup > div form input + label{
    position: absolute;
    font-size: var(--font-size-xs);
    top: calc(var(--font-size-xs) * -1);
    left: var(--space-2);
}
#popup > div form .group{
    display: flex;
    align-items: center;
    position: relative;
}
#popup > div form button{
    background:var(--color-primary); 
    color:var(--color-primary-invert); 
    border:none;
    min-height: var(--button-size);
    padding-left:var(--space-2);
    padding-right:var(--space-2);
    text-transform: uppercase;
    border-radius:var(--space-2); 
    cursor:pointer; 
    width:max-content;
    margin-top: 0.5rem;
    float: right;
}
/* header.html */
header {
    width: var(--breakpoint-xl);
    padding-left: calc((100vw - var(--breakpoint-xl)) / 2);
    padding-right: calc((100vw - var(--breakpoint-xl)) / 2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
header > svg text{
    font-weight: 600;
    font-size: var(--font-size-lg);
    letter-spacing: -1px;
    fill: var(--color-text);
}
header > .menu > button > span{
    text-transform: uppercase;
    letter-spacing: -1px;
}
header nav > nav{
    display: none;
}
header nav a {
    text-transform:capitalize;
    color: var(--color-text);
}
header nav > a[data-nav]{
    cursor: pointer;
}
header nav > a[data-nav]::after{
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background: url(../icon/arrow_head_bottom.svg);
    background-size: contain;
}
header nav > nav > a{
    white-space: wrap;
    text-align: center;
    line-height: 1;
}
@media screen and (min-width : 651px){
    header {
        height: 48px;
    }
    header > .menu {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    header > .menu > button{
        background: var(--color-surface);
        min-height: 2rem;
        font-size: var(--font-size);
        padding-left: var(--space-2);
        padding-right:var(--space-3);
        border-radius: var(--space-2);
        border: 1px solid var(--color-primary);
    }
    header > .menu > button > span{
        color: var(--color-primary);
    }
    header nav{
        display: flex;
        align-items: center;
        gap: var(--space-2);
        list-style: none;
        overflow-x: auto;
    }
    header nav > nav.active{
        position: absolute;
        display: grid;
        border-radius: 0 0 var(--space-3) var(--space-3);
        grid-template-columns: repeat(auto-fill , minmax(15em , 1fr));
        top: 48px;
        left: calc((100vw - var(--breakpoint-xl)) / 2);
        width: var(--breakpoint-xl);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
    }
    header nav > nav.active > a{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--button-size);
    }
    header address{
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    header address > a,
    header nav > a{
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
}
@media screen and (min-width : 1024px) and (max-width : 1280px){
    header address a:has(span):first-of-type{
        display: none;
    }
}
@media screen and (min-width : 651px) and (max-width : 1024px){
    header address a:has(span){
        display: none;
    }
}
@media screen and (max-width : 650px){
    header{
        position: fixed;
        min-height: 64px;
        z-index: 9;
    }
    header > img{
        margin-left: var(--space-2);
    }
    header > button {
        margin-right: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: 50%;
    }
    header > button{
        margin-left: auto;
        background: transparent;
        z-index: 3;
    }
    header > button > svg > path{
        stroke: var(--color-primary);
        transition: 0.5s;
    }
    header > button.mobile.active > svg > path:nth-child(1) {
        transform: rotate(45deg) translate(8px , -12px);
    }
    header > button.mobile.active > svg > path:nth-child(2) {
        transform: rotate(-45deg) translate(-20px , 8px);
    }
    header > button.mobile.active > svg > path:nth-child(3) {
        display: none;
    }
    .burger.menu{
        display: none;
    }
    .burger.menu.active{
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        z-index: 2;
        width: 80vw;
        height: calc(100vh - 3rem);
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--color-surface);
        border-left: 1px solid var(--color-border);
        padding-top: 3rem;
    }
    .burger.menu.active > nav{
        display: block;
    }
    header nav > nav.active{
        display: block;
    }
    .burger.menu.active > nav a{
        min-height: calc(var(--button-size) * 0.8);
        padding-left: var(--space-2);
        width: calc(100% - var(--space-2));
    }
    .burger.menu.active > nav > a{
        gap: var(--space-2);
        display: flex;
        align-items: center;
    }
    .burger.menu.active > nav > nav > a{
        margin-left: 1rem;
        display: flex;
        align-items: center;
        max-width: calc(100% - 2rem);
        text-align: left;
    }
    .burger.menu.active > address > a:first-of-type{
        border-right: 1px solid var(--color-border);
    }
    .burger.menu.active > address{
        display: grid;
        grid-template-columns: repeat(auto-fill , minmax(170px , 1fr));
        margin-bottom: var(--space-3);
        margin-top: var(--space-2);
    }
    .burger.menu.active > address a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .burger.menu.active > address > a:last-of-type{
        border-bottom: unset;
    }
    .burger.menu.active > address a:has(span){
        grid-column: 1 / -1;
    }
    .burger.menu.active > button{
        background: var(--color-primary);
        color: var(--color-primary-invert);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--button-size);
    }
    .burger.menu.active > button > span{
        text-align: center;
        width: max-content;
        font-size: var(--font-size);
    }
}
/* .actions */
.actions{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-2);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-left: var(--space-2);
}
.actions > a:first-of-type{
    background: #000;
    color: #FFF;
}
.actions > a{
    scroll-snap-align: start;
    border-radius: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    min-height: var(--button-size);
    display: flex;
    align-items: center;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
.actions > a > span{
    font-weight: 500;
    white-space: nowrap;
}
/* .table-scroll */
div.table-scroll {
    display: flex;
    overflow-x: auto;
    max-width: 100vw;
}
div.table-scroll table{
    border-collapse: collapse;
    margin-top: var(--space-3);
    background: var(--color-surface);
}
div.table-scroll table > tbody > tr > td {
    font-size: var(--font-size);
    line-height: 1;
    border: 1px solid var(--color-border);
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    min-height: var(--button-size);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
@media screen and (max-width : 650px){
    div.table-scroll,
    div.table-scroll table{
        width: 100%;
    }
}
/* carousel smooth */
.carousel-smooth{
    display: flex;
    align-items: center;
    overflow-x: auto;
    width: 100%;
    scroll-snap-type: x mandatory;
}
.carousel-smooth > .slide{
    display: flex;
    width: max-content;
    align-items: center;
    background: var(--color-surface);
    position: relative;
    scroll-snap-align: start;
}
.carousel-smooth > .slide > cite{
    position: absolute;
    transform: translateX(-100%);
    left: 100%;
    bottom: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25em;
    width: max-content;
}
.carousel-smooth > .slide > .badge{
    position: absolute;
    top: 0;
    left: 100%;
    transform: translateX(-100%);
    display: flex;
    align-items: center;
    height: 1.75em;
    background-color: var(--color-primary);
    color: var(--color-primary-invert);
    font-weight: 600;
    padding-left: 0.45em;
    font-size: var(--font-size-xs);
    padding-right: 0.45em;
    white-space: nowrap;
}
@media screen and (min-width : 651px){
    .carousel-smooth > .slide{
        height: 25em;
        aspect-ratio: 3/1;
        max-width: calc(100vw - 10em);
        border-bottom-left-radius: 10em;
        border-top-left-radius: 10em;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }
    .carousel-smooth{
        gap: 1em;
        position: relative;
        transform: scale(0.7);
    }
    .carousel-smooth > .slide > img{
        max-width: 21em;
        aspect-ratio: 1/1;
        height: auto;
        border-radius: 10em;
        object-fit: cover;
    }
    .carousel-smooth{
        scroll-padding-inline-start:  15vw;
    }
    .carousel-smooth > .slide > blockquote{
        font-size: var(--font-size-xl);
    }
    .carousel-smooth > .slide:first-of-type{
        margin-left: 15vw;
    }
    .carousel-smooth > .slide:last-of-type{
        margin-right: 15vw;
    }
    .carousel-smooth > .slide > .badge{
        border-top-right-radius: 1rem;
        border-bottom-left-radius: 1em;
        border-top-left-radius: 1em;
        border-bottom-right-radius: 1em;
    }
}
@media screen and (max-width : 650px) {
    .carousel-smooth{
        gap: 0.25em;
    }
    .carousel-smooth .slide > img{
        width: 7rem;
        height:7rem;
        border-radius: 50%;
        object-fit: cover;
    }
    .carousel-smooth .slide{
        padding-top: 2rem;
        display: flex;
        align-items: start;
        position: relative;
        min-width: 90vw;
        padding-bottom: 2em;
    }
    .carousel-smooth > .slide > blockquote{
        font-size: var(--font-size);
        padding: unset;
        margin-top: 0.25em;
        margin-bottom: unset;
        line-height: 0.9;
        padding-right: unset;margin-right: unset;
        margin-left: 0.75em;
        width: calc(100% - 1.5em);
    }
}
/* .carousel */
.carousel {
    margin-top: var(--space-3);
    position: relative;
}
.carousel > .buttons{
    display: flex;
    justify-content: space-between;
}
.carousel > .buttons > button{
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 20px;
    border: unset;
    transition: 0.5s;
    background: unset;
}
.carousel button.right:hover{
    transform: translateX(20px);
}
.carousel button.left:hover{
    transform: translateX(-20px);
}
.carousel .buttons > .position{
    display: flex;
    align-items: center;
    gap: 6px;
}
.carousel .buttons > .position > button{
    width: var(--space-3);
    height: var(--space-3);
    border-radius: 6px;
    border: unset;
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
}
.carousel .buttons > .position > button.active{
    background: var(--color-primary);
}
.carousel > .slide{display: none;}
.carousel {
    position: relative;
    cursor: grab;
}
.carousel.grabbing {
    cursor: grabbing;
}

.carousel .slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel .slide.active {
    display: block;
    opacity: 1;
}
.carousel > .slide .badge{
    color: #fff;
    background: #000;
    font-weight: 500;
    min-height: 30px;
    display: flex;
    align-items: center;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    border-radius: 15px;
}
.carousel > .slide > cite img.icon{
    margin-left: var(--space-2);
}
@media screen and (min-width : 651px){

    .carousel > .slide.active{
        display: grid;
        opacity: 1;
        transform: translateX(0);
    }
    .carousel > .slide{
        grid-template-columns: 1fr 4fr;
        background: var(--color-surface);
        position: relative;
    }
    .carousel > .slide > img.content{
        border-radius: var(--space-2);
        aspect-ratio: 1/1;
        object-fit: contain;
        grid-column: 1/-2;
        grid-row: 1/3;
        height: 100%;
    }
    .carousel > .slide > blockquote{
        font-size: 1.5rem;
        font-style: italic;
        grid-column: 2/3;
        grid-row: 1/2;
        height: max-content;
        position: relative;
    }
    .carousel > .slide > blockquote::before{
        content: '«';
        position: absolute;
        left: -1.5rem;
        transform: translate(0,-50%);
        font-size: 2rem;
        font-weight: 600;
    }
    .carousel > .slide > cite{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        grid-column: 2/3;
        grid-row: 2/3;
        padding-right: var(--space-3);
    }
    .carousel > .slide .badge{
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(15px,-50%);
    }
    .carousel > .slide > img.icon{
        grid-column: 2/3;
    }
}
@media screen and (max-width : 650px){
    .carousel blockquote{
        line-height: 1.1;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
        margin: var(--space-3) 0 var(--space-2) 0;
    }
    .carousel cite{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
        line-height: 1;
    }
    .carousel .slide {
        position: relative;
    }
    .carousel .badge{
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(0,-50%);
    }
}
/* hero.json hero-formular */
#hero-formular{
    width: 100%;
}
#hero-formular article h1{
    font-size: var(--font-size-3xl);
    letter-spacing: -2px;
    line-height: 1;
    text-align: center;
    word-break:normal;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    padding-bottom: unset;
    margin-bottom: var(--space-2);
    max-width: 100vw;
    min-height: max-content;
    overflow-x: hidden;
    overflow-y: hidden;
}
#hero-formular article h2{
    text-align: center;
    font-size: var(--font-size);
    margin-bottom: var(--space-2);
}
#hero-formular article ul{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
#hero-formular article ul > li{
    border-radius: var(--space-4);
    display: flex;
    align-items: center;
    width: max-content;
}
#hero-formular article ul > li:has(img.icon+span){
    padding-left: var(--space-1);
    padding-right: var(--space-3);
}
#hero-formular article p{
    font-size: var(--font-size-xs);
    padding-bottom: var(--space-2);
    padding-top: var(--space-4);
}
#hero-formular article > span{
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-bottom: var(--space-2);
}
#hero-formular .gallery{
    gap: var(--space-3);
    width: var(--breakpoint-xl);
    scroll-snap-type: x mandatory;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    overflow-x: auto;
}
#hero-formular .gallery img{
    scroll-snap-align: start;
    object-fit: cover;
}
@media screen and (max-width:650px){
    #hero-formular .gallery,
    #hero-formular .gallery img{
        min-width: 100%;
    }
    #hero-formular .gallery img{
        aspect-ratio: 4/3;
    }
    #hero-formular article ul{
        gap: var(--space-1);
    }
    #hero-formular article ul > li > span{
        font-size: var(--font-size-xs);
    }
    #hero-formular article p{
        margin-left: var(--space-2);
        width: calc(100% - (var(--space-2) * 2));
    }
}
@media screen and (min-width:651px){
    #hero-formular .gallery img{
        aspect-ratio: 16/9;
        min-width: 100%;
    }
    #hero-formular .gallery,
    #hero-formular .gallery img{
        border-radius: var(--space-5);
    }
    #hero-formular article ul{
        gap: var(--space-2);
    }
    #hero-formular article ul > li{
        min-height: var(--button-size);
        background: var(--color-surface);
    }
    #hero-formular article{
        min-height: 45vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
/* hero.json hero*/
#hero .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
#hero .gallery > img{
    scroll-snap-align: start;
    object-fit: contain;
    min-width: 100%;
}
#hero article ul{
    list-style: none;
    margin-left: unset;
}
#hero article ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}
@media screen and (min-width : 651px) {
    #hero {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 12px;
    }
}
#hero .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
#hero .gallery > img{
    scroll-snap-align: start;
    min-width: 100%;
}
#hero article ul li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
#hero h2,
#hero p{
    padding-bottom: 0.75em;
}
#hero ul{
    margin-bottom: 1rem;
}
@media screen and (max-width : 650px) {
    #hero h1,
    #hero h2,
    #hero ul,
    #hero p{
        padding-left: var(--space-3);
    }
}
@media screen and (min-width : 651px) {
    section#hero {
        margin: 0 auto;
        max-width: var(--breakpoint-2xl);
        height: 90vh;
    }
    #hero article ul{
        padding-left: unset;
    }
    #hero {
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        gap: var(--space-5);
    }
    #hero h1{
        font-size: var(--font-size-2xl);
    }
    #hero img{
        height: 100%;
        object-fit: cover;
        border-radius: var(--space-3);
    }
    #hero .gallery img{
        height: auto;
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: var(--space-3);
    }
    section#hero article{
        max-width: var(--breakpoint-md);
        align-self: center;
    }
}

/* testimonial.json testimonial-wide */
#testimonial-wide > h2{
    font-size: var(--font-size-2xl);
    letter-spacing: -1px;
    padding-bottom: 1rem;
}
#testimonial-wide h2,
#testimonial-wide p{
    padding-left: 0.75rem;
}
#testimonial-wide > .buttons{
    display: flex;
    justify-content: space-between;
}
#testimonial-wide > .buttons > button{
    width: 4em;
    height: 4em;
    background: unset;
    transition: 1s;
}
#testimonial-wide > .buttons > .position {
    display: flex;
    align-items: center;
    gap: 0.25em;
}
#testimonial-wide > .buttons > .position > button{
    background: var(--color-surface);
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.75em;
}
#testimonial-wide > .buttons > .position > button.active{
    background: var(--color-text);
}
#testimonial-wide > .buttons > button:first-of-type:hover{
    transform: translateX(10%);
}
#testimonial-wide > .buttons > button:last-of-type:hover{
    transform: translateX(-10%);
}
@media screen and (min-width : 651px){
    #testimonial-wide > h2,#testimonial-wide > p{
        text-align: center;
        padding-left: calc((100vw - var(--breakpoint-md)) / 2);
        padding-right: calc((100vw - var(--breakpoint-md)) / 2);
    }
    #testimonial-wide p{
        color: var(--color-text-muted);
        line-height: 1;
    }
}
@media screen and (max-width : 650px) {
    #testimonial-wide p{
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
    #testimonial-wide .buttons{
        display: none !important;
    }
}
/* faq.json faq-large */
#faq-large > h2{
    letter-spacing: -1px;
}
#faq-large > p {
    color: var(--color-text-muted);
}
#faq-large > article{
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
#faq-large details{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
#faq-large details summary{
    padding-right: 3em;
    padding-left: 1em;
    font-size: var(--font-size-md);
    font-weight: 500;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    min-height: 3em;
    width: calc(100% - 4em);
    position: relative;
}
#faq-large details summary::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3em;
    height: 3em;
    background: url(../icon/arrow_head_bottom.svg);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.5s;
}
#faq-large details[open] summary::after{
    transform: scaleX(-1) rotate(180deg);
}
#faq-large details summary + div {
    border-top: 1px solid var(--color-border);
    padding-right: 1.5em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}
@media screen and (max-width: 650px) {
    #faq-large > h2+p{
        font-size: var(--font-size-xs);
    }
}
@media screen and (min-width: 651px) {
    #faq-large{
        text-align: right;
    }
    #faq-large{
        padding-left: calc((100vw - var(--breakpoint-lg)) / 2);
        padding-right: calc((100vw - var(--breakpoint-lg)) / 2);
    }
    #faq-large > article > details:first-of-type{
        border-top-right-radius: 1.5em;
        border-top-left-radius: 1.5em;
    }
    #faq-large > article > details:last-of-type{
        border-bottom-right-radius: 1.5em;
        border-bottom-left-radius: 1.5em;
    }
}
/* faq.json faq */
#faq p{
    margin-bottom: 1rem;
}
#faq details{
    position: relative;
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
    border-radius: var(--space-2);
    background: var(--color-surface);
}
#faq details > summary {
    min-height: var(--button-size);
    font-weight: 500;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-left: var(--space-2);
    padding-right: calc(var(--space-2) + 1.5rem);
    line-height: 1;
    position: relative;
}
#faq details[open] > summary::after{
    transform: scaleY(1) translateY(-50%);
}
#faq details > summary::after{
    content: "";
    transition: 0.5s;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%) scaleY(-1);
    right: var(--space-2);
    width: 2rem;
    height: 2rem;
    background-image: url(../icon/arrow_head_top.svg);
    background-position: center;
    background-repeat: no-repeat;
}
#faq details[open] > summary {
    border-bottom: 1px solid var(--color-border);
}
#faq details > div {
  padding: 0.5em var(--space-2);
  transition: all 0.3s ease;
}
@media screen and (max-width : 650px){
    #faq details{
        border-radius: var(--space-3);
        margin-left: var(--space-2);
        margin-right: var(--space-2);
    }
}
/* contact.json contact-rigid */
#contact-rigid > h2{
    text-align: center;
    padding-right: var(--space-3);
    font-size: var(--font-size-2xl);
    padding-bottom: var(--space-3);
    letter-spacing: -1px;
    line-height: 1;
}
#contact-rigid > p{
    max-width: 50rem;
    padding-right: var(--space-3);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
#contact-rigid > address{
    margin-top: 1em;
}
#contact-rigid > address > a:has(span){
    font-weight: 600;
    padding-right: var(--space-2);
    background: var(--color-surface);
    line-height: 1;
}
#contact-rigid > article > p{
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    margin-top: 0.5rem;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
section > .block iframe{
    background-color: #000;
}
@media screen and (min-width : 651px){
    #contact-rigid > article > p{
        margin-left: auto;
        margin-right: auto;
        max-width: 45rem;
        font-size: var(--font-size-xl);
    }
    #contact-rigid > address{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    #contact-rigid > address > a{
        display: flex;
        border-radius: 1em;
        align-items: center;
        border: 1px solid var(--color-border);
        animation: shake 2s infinite;
    }
    #contact-rigid > .social img{
        width: 3.5em;
    }
    section > .block{
        display: flex;
        gap: var(--space-4);
        margin-top: var(--space-3);
    }
    section > .block #map,
    section > .block iframe{
        width: 50%;
        border-top-right-radius: var(--space-3);
        border-bottom-right-radius: var(--space-3);
    }
}
@media screen and (max-width : 650px){
    #contact-rigid > p{
        font-size: var(--font-size-xs);
    }
    #contact-rigid > address > a:has(span){
        min-height: 3.25rem;
    }
    #contact-rigid > address > a > span{
        color: var(--color-text);
    }
    #contact-rigid > article > p{
        margin-left: var(--space-2);
        width: calc(100% - (var(--space-2) * 2));
        font-size: var(--font-size-lg);
    }
    #contact-rigid > address{
        width: 100%;
    }
    #contact-rigid > address > a{
        display: flex;
        align-items: center;
        gap: var(--space-2);
        border-bottom: 1px solid var(--color-border);
    }
    section > .block{
       display: flex;
       flex-direction: column-reverse;
       margin-top: 0em;
    }
    section > .block iframe{
        aspect-ratio: 4/3;
        width: 100%;
        margin-top: 1.5em;
    }
}
@keyframes shake {
    0%{transform: translateX(0%);}
    30%{
        transform: translateX(-2%);
    }
    80%{
        transform: translateX(3%);
    }
    100%{transform: translateX(0%);}
}
/* contact.json contact*/
#contact span[itemprop="openingHours"]{
    display: flex;
    min-height: var(--button-size);
    align-items: center;
    font-weight: 600;
}
#contact span[itemprop="address"]{
    display: flex;
    line-height: 1.1;
}
#contact > address {
    display: flex;
    flex-direction: column;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}
#contact > address > a{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: var(--space-2);
    min-height: 30px;
    line-height: 1;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
}
#contact > address > a:has(img){
    padding-left: var(--space-1);
}
#contact > form{
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
}
#contact > form > h3{
    font-size: 1.5rem;
    line-height: 1.1;
    padding: unset;
    width: 100%;
    margin-bottom: var(--space-6);
}
#contact form .group{
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
#contact form .group-text > label,
#contact form .group > label{
    position: absolute;
    left: var(--space-3);
    top: -18px;
    font-size: 14px;
}
#contact form .group > input{
    width: 100%;
    min-width: 100%;
    min-height: var(--button-size);
    background: var(--color-surface);
    font-size: 17.5px;
    padding-left: var(--space-2);
    border: unset;
    border-radius: var(--space-2);
}
#contact form .group-text{
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}
#contact form .group-text > textarea{
    width: 100%;
    min-width: 100%;
    background: var(--color-surface);
    border-radius: var(--space-2);
    font-size: 17.5px;
    padding-left: var(--space-2);
    padding-top: 6px;
    border: unset;
    min-height: 3rem;
    max-height: 10rem;
    resize: vertical;
}
#contact form .group-checkbox{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
#contact form .group-checkbox > div {
    display: flex;
    align-items: center;
    min-height: var(--button-size);
}
#contact form .group-checkbox > div > input{
    display: none;
}
#contact form .group-checkbox > div > input:checked + label::before{
    background: #000;
    box-shadow: 0 0 0 2px #fff inset;
}
#contact form .group-checkbox > div > label::before{
    content: "";
    display: block;
    position: absolute;
    margin: unset;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #000;
}
#contact form .group-checkbox > div > label{
    margin-left: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
#contact form .group-checkbox > div > label a{
    color: var(--color-primary);
    text-decoration: underline;
}

#contact form > button{
    min-height: var(--button-size);
    font-size: 17.5px;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    color: var(--color-surface);
    background: var(--color-primary);
    border: unset;
    border-radius: var(--space-2);
}

@media screen and (min-width : 651px){
    #contact{
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: var(--space-3);
    }
    #contact > h2,
    #contact > p{
        grid-column: 1 / -1;
    }
    #contact form .group-half{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    #contact > address > a {
        border-radius: var(--space-3);
    }
}
/* advantage.json advantage-wide */
#advantage-wide > h2{
    text-align: center;
    letter-spacing: -1px;
    line-height: 1;
}
#advantage-wide > p{
    width: var(--breakpoint-md);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
@media screen and (min-width : 651px){
    #advantage-wide > h2{
        font-size: var(--font-size-2xl);
    }
    #advantage-wide > .grid{
        /* CHANGED: Switched to Flexbox to allow last-row centering */
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centers content on every line */
        align-items: center;
        
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: var(--breakpoint-2xl);
        gap: var(--space-1);
    }

    /* CONTAINER STYLE */
    #advantage-wide > .grid > div:nth-child(2n){
        margin-top: 3rem;
        animation: bubble-even 2s infinite;
    }
    #advantage-wide > .grid > div {
        /* CHANGED: Flex sizing logic */
        flex-basis: 230px; /* Matches your previous minmax min */
        flex-grow: 1;      /* Allows filling small gaps */
        max-width: 260px;  /* IMPORTANT: Prevents last row items from becoming huge */
        
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 1px solid var(--color-border);
        position: relative;
        
        display: block;
        font-size: var(--font-size-md);
        
        padding-top: 4rem;
        box-sizing: border-box;
        overflow: hidden; 
        background: #fff; 

        animation: bubble 2s infinite;
        transition: 2s;
        transform: scale(1);
    }
    #advantage-wide > .grid > div:hover{
        transform: scaleX(-1) !important;
        padding-top: unset;
    }
    #advantage-wide > .grid > div img{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 4rem;
    }
    #advantage-wide > .grid > div:hover > img{
        position: absolute !important;
        max-width: unset !important;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: scale(0.5);
    }
    #advantage-wide > .grid > div:hover > h3,
    #advantage-wide > .grid > div:hover > p{
        display: none !important;
    }
    #advantage-wide > .grid > div::before {
        content: "";
        float: left;
        width: 50%;
        height: 100%;
        shape-margin: 4%;
        shape-outside: polygon(
            0 -10%, 95% -10%, 50% -5%, 23.4% 5%, 6% 15.6%, 
            0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100%
        );
    }
    #advantage-wide > .grid > div > h3::before {
        content: "";
        float: right;
        width: 50%;
        height: 100%;
        shape-margin: 4%;
        shape-outside: polygon(
            2% -10%, 100% -10%, 100% 100%, 2% 100%, 50% 94%, 
            76.6% 84%, 94% 52%, 100% 35%, 94% 15%, 
            76.6% -5%, 50% -10%
        );
    }
    
    /* Image sits at the top center */
    #advantage-wide > .grid > div > img {
        display: block;
        margin: 0 auto 10px auto;
        position: absolute;
        z-index: 2;
        max-width: 30%;
    }

    /* Text must be inline to wrap around the floats continuously */
    #advantage-wide > .grid > div > h3,
    #advantage-wide > .grid > div > p {
        text-align: center;
        display: block;
        word-break:normal;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        line-height: 1.05;
    }
    #advantage-wide > .grid > div > h3::after {
        content: "\A";
        white-space: pre;
        display: inline;
    }
    #advantage-wide > .grid > div > h3{
        line-height: 1;
    }
    #advantage-wide > .grid > div > p{
        display: block;
        padding-top: 1rem;
    }
}
@media screen and (max-width : 650px) {
    #advantage-wide > .grid{
        margin-left: var(--space-3);
        width: calc(100vw - (var(--space-3) * 2));
        border-radius: var(--space-3);
        overflow-y: auto;
        max-height: 40vh;
        scroll-snap-type: y mandatory;
    }
    #advantage-wide > .grid > div{
        margin-top: var(--space-2);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--space-2);
        scroll-snap-align: start;
        display: grid;
        grid-template-columns: 7rem 3fr;
    }
    #advantage-wide > .grid > div img{
        width: 100%;
        aspect-ratio: 1/1;
        grid-column: 1/2;
        grid-row: 1/3;
    }
    #advantage-wide > .grid > div > h3{
        font-size: var(--font-size-lg);
        padding-top: 0.5rem;
        line-height: 1;
    }
    #advantage-wide > .grid > div > p{
        line-height: 1;
        font-size: var(--font-size-xs);
    }
}
@keyframes bubble {
    0%{
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(0.9,0.95,1.1) translateY(2%) skew(0turn, -2deg) ;
    }
    100%{
        transform: scale3d(1,1,1);
    }
}
@keyframes bubble-even {
    0%{
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(0.9,0.95,1.1) translateY(-2%) skew(0turn, 2deg) ;
    }
    100%{
        transform: scale3d(1,1,1);
    }
}
/* advantage.json advantage*/
#advantage > ul{
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill , minmax(220px , 1fr));
    list-style: none;
    padding: unset;
}
#advantage > ul > li{
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--space-3);
}
#advantage > ul > li > h3{
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-3);
    line-height: 1;
    margin: unset;
}
#advantage > ul > li > p{
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    line-height: 1;
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-xs);
}
@media screen and (max-width : 650px){
    #advantage > ul{
        padding-right: var(--space-2);
        margin-left: var(--space-3);
    }
}

/* about.json about-rotate */
#about-rotate{
    width: var(--breakpoint-xl);
    font-size: var(--font-size-lg);
}
#about-rotate article > h2,
#about-rotate article > p,
#about-rotate article > ul{
    margin-bottom: 0.5em;
}
#about-rotate h2{
    font-size: var(--font-size-2xl);
}
#about-rotate ul{
    list-style: none;
}
#about-rotate > .image{
    text-align: center;
}
#about-rotate > .image img{
    width: 100%;
}
#about-rotate > .image img+span{
    font-size: var(--font-size-xs);
    display: flex;
    justify-content: center;
    padding-top: var(--space-2);
}
@media screen and (min-width: 651px){
    #about-rotate {
        padding-top: 10vh;
        min-height: 90vh;
    }
    #about-rotate > article{
        text-align: justify;
        z-index: 2;
        position: relative;
        transform: rotate(-4deg);
    }
    #about-rotate > article p,
    #about-rotate > article ul li p{
        text-shadow: 0 0 0 var(--space-2) #FFFFFF;
        -webkit-text-stroke: -1px #FFFFFF;
    }
    #about-rotate > .image{
        z-index: 1;
        position: relative;
    }
    #about-rotate > article,
    #about-rotate > .image{
        width: 62%;
    }
    #about-rotate > .image{
        display: block;
        margin-left: auto;
        transform: translateY(-24%) rotate(7deg);
    }
    #about-rotate > .image > img{
        border-radius: var(--space-5);
    }
}
@media screen and (max-width: 650px){
    #about-rotate > article {
        padding-left: var(--space-2);
        width: calc(100% - (var(--space-2) * 2));
    }
}
/* about.json about */
#about > h2{
    height: min-content;
    padding: unset;
    margin: unset;
}
#about > img + span{
    text-align: right;
    display: flex;
    padding-top: 0.5em;
}
@media screen and (min-width : 651px){
    #about {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-row: min-content 1fr 1fr 1fr;
        gap: 8px 12px;
    }
    #about > img {
    grid-column: 2 / -1;
    grid-row: 1 / 4;
    }
    #about > img + span{
        grid-column: 1 / -1;
        grid-row: 4/ 5;
    }
    div.table-scroll {
        grid-row: 3 / 4;
        grid-column: 1 / 2;
    }
}
@media screen and (max-width : 650px){
    #about{
        display: block;
    }
}
/* key-benefits.json */
#key-benefits > .grid{
    margin-top: 1rem;
}
#key-benefits > .grid > div a{
    display: flex;
    align-items: center;
    min-height: var(--button-size);
    position: relative;
    margin-bottom: var(--space-3);
}
#key-benefits > .grid > div a > span{
    line-height: 1.1;
    color: var(--color-primary);
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: underline;
}
#key-benefits > .grid > div p{
    margin-bottom: var(--space-3);
    line-height: 1;
    font-size: var(--font-size-xs);
}
@media screen and (min-width : 651px) {
    #key-benefits > .grid{
        counter-reset: benefits;
        margin-bottom: var(--space-6);
        position: relative;
        display: grid;
        grid-template-columns: repeat(5 , 1fr);
        gap: var(--space-2);
    }
    #key-benefits > .grid::after{
        content: "";
        position: absolute;
        bottom: -10px;
        width: 100%;
        height: 2px;
        background: #000;
    }
    #key-benefits > .grid > div{
        position: relative;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--space-3);
        margin-bottom: var(--space-2);
    }
    #key-benefits > .grid > div h3{
        line-height: 1;
        margin-bottom: var(--space-3);
    }
    
    #key-benefits > .grid > div h3,
    #key-benefits > .grid > div p,
    #key-benefits > .grid > div a{
        padding-left: var(--space-2);
        padding-right: var(--space-1);
    }
    #key-benefits > .grid > div::before{
        counter-increment: benefits;
        content: counter(benefits);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        right: -1rem;
        bottom: calc(-16px - 2rem);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        z-index: 1;
    }
    #key-benefits > .grid > div:last-of-type::before,
    #key-benefits > .grid > div:last-of-type::after{
        display: none;
    }
}
@media screen and (max-width : 650px){
    #key-benefits > .grid {
        counter-reset: benefits;
        position: relative;
        margin-left: 3rem;
    }
    #key-benefits > .grid::before{
        content: "";
        position: absolute;
        left: -10px;
        width: 2px;
        height: 100%;
        background: #000;
    }
    #key-benefits > .grid > div{
        position: relative;
    }
    #key-benefits > .grid > div::before{
        position: absolute;
        counter-increment: benefits;
        content: counter(benefits);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        bottom: -1rem;
        left: calc(-12px - 2rem);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        z-index: 1;
    }
    #key-benefits > .grid > div::after{
        content: "➤";
        position: absolute;
        left: -1rem;
        bottom: calc(-1rem);
        transform: rotate(90deg);
    }
    #key-benefits > .grid > div:last-of-type::before,
    #key-benefits > .grid > div:last-of-type::after{
        display: none;
    }
}
/* price.json price-list */
section#price-list {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2rem;
    padding-top: 1rem;
    color: var(--color-primary-invert);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
section#price-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        var(--color-primary-light), 
        var(--color-primary-dark),
        var(--color-primary-light),
        var(--color-primary-dark)
    );
    background-size: 400% 400%;
    animation: gradientShift 2s ease infinite;
    z-index: -1;
    opacity: 0.92;
}

section#price-list::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    transform: rotate(30deg);
    animation: pulse 1s infinite alternate;
    z-index: -1;
    opacity: 0.7;
}
section#price-list > p{
    font-size: var(--font-size-xs);
    opacity: .5;
}
#price-list ol{
    overflow-x: auto;
    margin-left: 0.25em;
    margin-right: 0.25em;
    list-style: none;
}
#price-list ol>li{
    display: flex;
    margin-top: 0.5em;
    font-size: var(--font-size-lg);
    align-items: center;
    white-space: nowrap;
}
#price-list ol>li>b{
    display: flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-primary-invert);
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-radius: 1em;
    font-weight: 600;
    line-height: 1;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    height: 1.5em;
    transition: 0.5s;
}
#price-list ol>li:hover>b{
    padding-left: 3em;
    background: var(--color-primary-hover);
}
#price-list ol>li>p{
    padding-left: 0.5em;
    text-transform: uppercase;
}
@media screen and (min-width : 651px){
    #price-list{
        padding-left: calc((100vw - var(--breakpoint-lg)) / 2);
        padding-right: calc((100vw - var(--breakpoint-lg)) / 2);
    }
    #price-list ol>li{
        display: flex;
    }
}
@keyframes gradientShift {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

@keyframes pulse {
    0% { transform: rotate(30deg) scale(0.95); opacity: 0.6; }
    100% { transform: rotate(30deg) scale(1.05); opacity: 0.85; }
}
/* price.json price */
#price table {
    border: 1px solid #0004;
}
#price table thead tr > th,
#price table tbody tr > td{
    border: unset;
    min-height: max-content;
    height: 32px;
    padding-left: var(--space-3);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-right: var(--space-3);
}
#price table thead tr > th > span,
#price table tbody tr > td > span{
    display: flex;
    align-items: center;
    min-height: var(--button-size);
}
#price table thead tr th{
    background: #000;
    color: #FFF;
}
#price table > tbody > tr{
    border-bottom: 1px solid #0004;
}
@media screen and (max-width : 650px) {
    #price .table-scroll ,
    #price table{width: 100%;}
}
/* product.json */
#product .grid{
    display: grid;
    margin-top: var(--space-3);
    grid-template-columns: repeat(auto-fill , minmax(220px , 1fr));
    gap: var(--space-3);
}
#product .grid > div{
    border-radius: var(--space-2);
    background: var(--color-surface);
    padding-bottom: 1.5rem !important;
    position: relative;
}
#product .grid > div > h3 {
    line-height: 1.1;
    padding-top: var(--space-1);
    padding-bottom: var(--space-2);
    font-size: var(--font-size-md);
}
#product .grid > div > p{
    line-height: 1;
    padding-bottom: 1rem;
    font-size: var(--font-size-xs);
}
#product .grid > div > h3,
#product .grid > div > p,
#product .grid > div > a > span,
#product .grid > div > a{
    display: flex;
    padding-left: var(--space-2);
    padding-right: var(--space-1);
}
#product .grid > div > a{
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    padding-left: unset;
}
#product .grid > div > a > span{
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: -1px;
}
@media screen and (min-width : 651px){
    #product .grid > div > img{
        border-radius: var(--space-2);
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
    }
}
/* team.json */
#team-v1 > article > h2{
    margin-bottom: var(--space-3);
}
#team-v1 .grid > div {
    background: var(--color-surface);
    border-radius: var(--space-2);
    display: grid;
    grid-template-columns: 5rem 1fr;
    padding-bottom: var(--space-1);
}
#team-v1 .grid > div > img{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    aspect-ratio: 1/1;
    height: 100%;
}
#team-v1 .grid > div > h3{
    padding-top: var(--space-2);
    line-height: 1.1;
    margin-bottom: var(--space-2);
}
#team-v1 .grid > div > a{
    color: var(--color-primary);
    text-decoration: underline;
}
@media screen and (min-width : 651px){
    #team-v1 {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-row: min-content 1fr 1fr;
        gap: var(--space-3);
    }
    #team-v1 > img{
        grid-row: 1 / 3;
        grid-column: 2 / -1;
        border-radius: var(--space-2);
    }
    #team-v1 .grid{
        margin-top: var(--space-3);
        display: grid;
        grid-column: 1/-1;
        grid-template-columns: repeat(3,1fr);
        gap: var(--space-3);
    }
    #team-v1 > article{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    #team-v1 > p.postscription{
        grid-column: 1/-1;
        margin-top: var(--space-3);
    }
}
@media screen and (max-width: 650px){
    #team-v1 > article > h2,
    #team-v1 > article > p{
        padding-left: var(--space-2);
    }
    #team-v1 > article > p{
        margin-bottom: var(--space-3);
    }
    #team-v1 .grid > div{
        margin-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border);
        padding-bottom: var(--space-2);
    }
}
/* testimonial.json */
#testimonial .carousel .slide{
    margin-bottom: var(--space-3);
    border-radius: var(--space-2);
}
#testimonial a.cta{
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-primary);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    min-height: var(--button-size);
}
@media screen and (max-width : 650px){
    #testimonial a.cta{
        width:100%;
    }
}
@media screen and (min-width: 651px){
    #testimonial a.cta{
        width: max-content;
        border-radius: var(--space-2);
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}