@charset "UTF-8";
/*!
* Bootstrap Reboot v5.2.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color);text-decoration:underline}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}
/*!
* Bootstrap Grid v5.2.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}}@media (min-width:768px){.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}}@media (min-width:992px){.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}}@media (min-width:1200px){.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}}@media (min-width:1400px){.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*!
* Bootstrap Extended v1.0.0
* Copyright 2024 Web Lab
*
* Klinon: ίδιο σύστημα κλάσεων με τα υπόλοιπα projects της Web Lab, ώστε να
* ταιριάζουν τα ACF (Container / Row / Column), αλλά με την κλίμακα του design
* του Klinon (10 / 20 / 50 / 80 / 110 / 130) και όχι του ΚΤΕΛ. Οι μειώσεις ανά
* οθόνη κρατούν τα σημεία που είχε ήδη ρυθμίσει το design (xxl 90 και xl 80
* κάτω από 992px, lg 50 κάτω από 768px). Τα resets, τα text-align και το
* max-width του container δεν μπήκαν εδώ: τα έχει ήδη το style.css.
*/
.no-padding{
padding-top: 0;
padding-bottom: 0;
}
.no-top-padding{
padding-top: 0;
}
.no-bot-padding{
padding-bottom: 0;
}
.xsm-padding{
padding-top: 10px;
padding-bottom: 10px;
}
.xsm-top-padding{
padding-top: 10px;
}
.xsm-bot-padding{
padding-bottom: 10px;
}
.sm-padding{
padding-top: 20px;
padding-bottom: 20px;
}
.sm-top-padding{
padding-top: 20px;
}
.sm-bot-padding{
padding-bottom: 20px;
}
.md-padding{
padding-top: 50px;
padding-bottom: 50px;
}
.md-top-padding{
padding-top: 50px;
}
.md-bot-padding{
padding-bottom: 50px;
}
.lg-padding{
padding-top: 80px;
padding-bottom: 80px;
}
.lg-top-padding{
padding-top: 80px;
}
.lg-bot-padding{
padding-bottom: 80px;
}
.xl-padding{
padding-top: 110px;
padding-bottom: 110px;
}
.xl-top-padding{
padding-top: 110px;
}
.xl-bot-padding{
padding-bottom: 110px;
}
.xxl-padding{
padding-top: 130px;
padding-bottom: 130px;
}
.xxl-top-padding{
padding-top: 130px;
}
.xxl-bot-padding{
padding-bottom: 130px;
}
.no-margin{
margin-top: 0;
margin-bottom: 0;
}
.no-top-margin{
margin-top: 0;
}
.no-bot-margin{
margin-bottom: 0;
}
.xsm-margin{
margin-top: 10px;
margin-bottom: 10px;
}
.xsm-top-margin{
margin-top: 10px;
}
.xsm-bot-margin{
margin-bottom: 10px;
}
.sm-margin{
margin-top: 20px;
margin-bottom: 20px;
}
.sm-top-margin{
margin-top: 20px;
}
.sm-bot-margin{
margin-bottom: 20px;
}
.md-margin{
margin-top: 50px;
margin-bottom: 50px;
}
.md-top-margin{
margin-top: 50px;
}
.md-bot-margin{
margin-bottom: 50px;
}
.lg-margin{
margin-top: 80px;
margin-bottom: 80px;
}
.lg-top-margin{
margin-top: 80px;
}
.lg-bot-margin{
margin-bottom: 80px;
}
.xl-margin{
margin-top: 110px;
margin-bottom: 110px;
}
.xl-top-margin{
margin-top: 110px;
}
.xl-bot-margin{
margin-bottom: 110px;
}
.xxl-margin{
margin-top: 130px;
margin-bottom: 130px;
}
.xxl-top-margin{
margin-top: 130px;
}
.xxl-bot-margin{
margin-bottom: 130px;
}
.container.no-gutters,
.container-fluid.no-gutters{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
.g-6, .gx-6{
--bs-gutter-x: 5rem;
}
.order-6{
order: 6 !important;
}
.order-7{
order: 7 !important;
}
.order-8{
order: 8 !important;
}
.order-9{
order: 9 !important;
}
.order-10{
order: 10 !important;
}
.order-11{
order: 11 !important;
}
.order-12{
order: 12 !important;
}
@media (min-width: 576px) {
.order-sm-6{
order: 6 !important;
}
.order-sm-7{
order: 7 !important;
}
.order-sm-8{
order: 8 !important;
}
.order-sm-9{
order: 9 !important;
}
.order-sm-10{
order: 10 !important;
}
.order-sm-11{
order: 11 !important;
}
.order-sm-12{
order: 12 !important;
}
}
@media (min-width: 768px) {
.order-md-6{
order: 6 !important;
}
.order-md-7{
order: 7 !important;
}
.order-md-8{
order: 8 !important;
}
.order-md-9{
order: 9 !important;
}
.order-md-10{
order: 10 !important;
}
.order-md-11{
order: 11 !important;
}
.order-md-12{
order: 12 !important;
}
}
@media (min-width: 992px) {
.order-lg-6{
order: 6 !important;
}
.order-lg-7{
order: 7 !important;
}
.order-lg-8{
order: 8 !important;
}
.order-lg-9{
order: 9 !important;
}
.order-lg-10{
order: 10 !important;
}
.order-lg-11{
order: 11 !important;
}
.order-lg-12{
order: 12 !important;
}
}
@media (min-width: 1200px) {
.order-xl-6{
order: 6 !important;
}
.order-xl-7{
order: 7 !important;
}
.order-xl-8{
order: 8 !important;
}
.order-xl-9{
order: 9 !important;
}
.order-xl-10{
order: 10 !important;
}
.order-xl-11{
order: 11 !important;
}
.order-xl-12{
order: 12 !important;
}
}
@media (min-width: 1400px) {
.order-xxl-6{
order: 6 !important;
}
.order-xxl-7{
order: 7 !important;
}
.order-xxl-8{
order: 8 !important;
}
.order-xxl-9{
order: 9 !important;
}
.order-xxl-10{
order: 10 !important;
}
.order-xxl-11{
order: 11 !important;
}
.order-xxl-12{
order: 12 !important;
}
}
@media only screen and (max-width: 991px) {
.xsm-padding{
padding-top: 8px;
padding-bottom: 8px;
}
.xsm-top-padding{
padding-top: 8px;
}
.xsm-bot-padding{
padding-bottom: 8px;
}
.sm-padding{
padding-top: 15px;
padding-bottom: 15px;
}
.sm-top-padding{
padding-top: 15px;
}
.sm-bot-padding{
padding-bottom: 15px;
}
.md-padding{
padding-top: 40px;
padding-bottom: 40px;
}
.md-top-padding{
padding-top: 40px;
}
.md-bot-padding{
padding-bottom: 40px;
}
.lg-padding{
padding-top: 60px;
padding-bottom: 60px;
}
.lg-top-padding{
padding-top: 60px;
}
.lg-bot-padding{
padding-bottom: 60px;
}
.xl-padding{
padding-top: 80px;
padding-bottom: 80px;
}
.xl-top-padding{
padding-top: 80px;
}
.xl-bot-padding{
padding-bottom: 80px;
}
.xxl-padding{
padding-top: 90px;
padding-bottom: 90px;
}
.xxl-top-padding{
padding-top: 90px;
}
.xxl-bot-padding{
padding-bottom: 90px;
}
.xsm-margin{
margin-top: 8px;
margin-bottom: 8px;
}
.xsm-top-margin{
margin-top: 8px;
}
.xsm-bot-margin{
margin-bottom: 8px;
}
.sm-margin{
margin-top: 15px;
margin-bottom: 15px;
}
.sm-top-margin{
margin-top: 15px;
}
.sm-bot-margin{
margin-bottom: 15px;
}
.md-margin{
margin-top: 40px;
margin-bottom: 40px;
}
.md-top-margin{
margin-top: 40px;
}
.md-bot-margin{
margin-bottom: 40px;
}
.lg-margin{
margin-top: 60px;
margin-bottom: 60px;
}
.lg-top-margin{
margin-top: 60px;
}
.lg-bot-margin{
margin-bottom: 60px;
}
.xl-margin{
margin-top: 80px;
margin-bottom: 80px;
}
.xl-top-margin{
margin-top: 80px;
}
.xl-bot-margin{
margin-bottom: 80px;
}
.xxl-margin{
margin-top: 90px;
margin-bottom: 90px;
}
.xxl-top-margin{
margin-top: 90px;
}
.xxl-bot-margin{
margin-bottom: 90px;
}
}
@media only screen and (max-width: 767px) {
.xsm-padding{
padding-top: 6px;
padding-bottom: 6px;
}
.xsm-top-padding{
padding-top: 6px;
}
.xsm-bot-padding{
padding-bottom: 6px;
}
.sm-padding{
padding-top: 12px;
padding-bottom: 12px;
}
.sm-top-padding{
padding-top: 12px;
}
.sm-bot-padding{
padding-bottom: 12px;
}
.md-padding{
padding-top: 30px;
padding-bottom: 30px;
}
.md-top-padding{
padding-top: 30px;
}
.md-bot-padding{
padding-bottom: 30px;
}
.lg-padding{
padding-top: 50px;
padding-bottom: 50px;
}
.lg-top-padding{
padding-top: 50px;
}
.lg-bot-padding{
padding-bottom: 50px;
}
.xl-padding{
padding-top: 65px;
padding-bottom: 65px;
}
.xl-top-padding{
padding-top: 65px;
}
.xl-bot-padding{
padding-bottom: 65px;
}
.xxl-padding{
padding-top: 75px;
padding-bottom: 75px;
}
.xxl-top-padding{
padding-top: 75px;
}
.xxl-bot-padding{
padding-bottom: 75px;
}
.xsm-margin{
margin-top: 6px;
margin-bottom: 6px;
}
.xsm-top-margin{
margin-top: 6px;
}
.xsm-bot-margin{
margin-bottom: 6px;
}
.sm-margin{
margin-top: 12px;
margin-bottom: 12px;
}
.sm-top-margin{
margin-top: 12px;
}
.sm-bot-margin{
margin-bottom: 12px;
}
.md-margin{
margin-top: 30px;
margin-bottom: 30px;
}
.md-top-margin{
margin-top: 30px;
}
.md-bot-margin{
margin-bottom: 30px;
}
.lg-margin{
margin-top: 50px;
margin-bottom: 50px;
}
.lg-top-margin{
margin-top: 50px;
}
.lg-bot-margin{
margin-bottom: 50px;
}
.xl-margin{
margin-top: 65px;
margin-bottom: 65px;
}
.xl-top-margin{
margin-top: 65px;
}
.xl-bot-margin{
margin-bottom: 65px;
}
.xxl-margin{
margin-top: 75px;
margin-bottom: 75px;
}
.xxl-top-margin{
margin-top: 75px;
}
.xxl-bot-margin{
margin-bottom: 75px;
}
}
@media only screen and (max-width: 575px) {
.xsm-padding{
padding-top: 5px;
padding-bottom: 5px;
}
.xsm-top-padding{
padding-top: 5px;
}
.xsm-bot-padding{
padding-bottom: 5px;
}
.sm-padding{
padding-top: 10px;
padding-bottom: 10px;
}
.sm-top-padding{
padding-top: 10px;
}
.sm-bot-padding{
padding-bottom: 10px;
}
.md-padding{
padding-top: 25px;
padding-bottom: 25px;
}
.md-top-padding{
padding-top: 25px;
}
.md-bot-padding{
padding-bottom: 25px;
}
.lg-padding{
padding-top: 40px;
padding-bottom: 40px;
}
.lg-top-padding{
padding-top: 40px;
}
.lg-bot-padding{
padding-bottom: 40px;
}
.xl-padding{
padding-top: 55px;
padding-bottom: 55px;
}
.xl-top-padding{
padding-top: 55px;
}
.xl-bot-padding{
padding-bottom: 55px;
}
.xxl-padding{
padding-top: 60px;
padding-bottom: 60px;
}
.xxl-top-padding{
padding-top: 60px;
}
.xxl-bot-padding{
padding-bottom: 60px;
}
.xsm-margin{
margin-top: 5px;
margin-bottom: 5px;
}
.xsm-top-margin{
margin-top: 5px;
}
.xsm-bot-margin{
margin-bottom: 5px;
}
.sm-margin{
margin-top: 10px;
margin-bottom: 10px;
}
.sm-top-margin{
margin-top: 10px;
}
.sm-bot-margin{
margin-bottom: 10px;
}
.md-margin{
margin-top: 25px;
margin-bottom: 25px;
}
.md-top-margin{
margin-top: 25px;
}
.md-bot-margin{
margin-bottom: 25px;
}
.lg-margin{
margin-top: 40px;
margin-bottom: 40px;
}
.lg-top-margin{
margin-top: 40px;
}
.lg-bot-margin{
margin-bottom: 40px;
}
.xl-margin{
margin-top: 55px;
margin-bottom: 55px;
}
.xl-top-margin{
margin-top: 55px;
}
.xl-bot-margin{
margin-bottom: 55px;
}
.xxl-margin{
margin-top: 60px;
margin-bottom: 60px;
}
.xxl-top-margin{
margin-top: 60px;
}
.xxl-bot-margin{
margin-bottom: 60px;
}
}
/*!
* Generic Styles v1.0.0
* Copyright 2027 web.lab
*/
@font-face {
font-family: "Century Gothic Paneuropean";
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/century-gothic-paneuropean-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Century Gothic Paneuropean";
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/century-gothic-paneuropean-semibold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Century Gothic Paneuropean";
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/century-gothic-paneuropean-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-greek.woff2") format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-greek.woff2") format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-greek.woff2") format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Commissioner";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/commissioner-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/jetbrains-mono-greek.woff2") format("woff2");
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/jetbrains-mono-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://weblab.gr/wp-content/themes/weblab/css/../webfonts/jetbrains-mono-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--pink: #E8114F;
--pink-hover: #d4104f;
--pink-tint: #fde8ef;
--pink-tint-border: #f9c9d9;
--pink-light: #ff8fb3;
--pink-text: #d90f49;
--ink: #1f1e1b;
--bg: #f7f6f3;
--surface-2: #ecebe6;
--border: #e2e0da;
--card-border: #e9e7e1;
--input-border: #d6d3cc;
--input-border-2: #cfccc4;
--muted: #55524b;
--muted-2: #6f6c64;
--muted-3: #8a877f;
--on-dark-muted: #bdb9b0;
--error: #c40f49;
--white: #ffffff;
--display: "Century Gothic Paneuropean", "Century Gothic Paneuropean W1G", "CenturyGothicPaneuropean", "Century Gothic", sans-serif;
--sans: "Commissioner", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--ease-press: cubic-bezier(0.23, 1, 0.32, 1);
--gutter: clamp(20px, 5vw, 72px);
--section: clamp(112px, 13vw, 170px);
--gap-cards: clamp(12px, 1.4vw, 20px);
--gap-list: clamp(32px, 4vw, 56px);
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: normal;
-webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
::selection {
background: var(--pink);
color: #fff;
}
a {
color: var(--ink);
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
a:hover {
color: var(--error);
}
:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 3px;
border-radius: 2px;
}
img {
max-width: 100%;
}
button {
font: inherit;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.01em;
}
p {
margin: 0;
}
#page {
background: var(--bg);
min-height: 100vh;
overflow-x: clip;
}
.container {
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.no-spacer { padding-top: 0; padding-bottom: 0; }
.xl-top-spacer { padding-top: var(--section); }
.xl-spacer { padding-top: var(--section); padding-bottom: var(--section); }
.lg-top-spacer { padding-top: clamp(96px, 11vw, 150px); }
.md-top-spacer { padding-top: clamp(64px, 8vw, 120px); }
.sm-top-spacer { padding-top: clamp(24px, 3vw, 48px); }
.h1-hero {
font-family: var(--display);
font-size: clamp(52px, 8vw, 120px);
line-height: 0.95;
font-weight: 700;
letter-spacing: -0.02em;
text-wrap: pretty;
}
.h2 {
font-family: var(--display);
font-size: clamp(34px, 4.2vw, 56px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.h3 {
font-family: var(--display);
font-size: clamp(21px, 1.8vw, 24px);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.lead {
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.55;
color: var(--muted);
text-wrap: pretty;
}
.body-text {
font-size: 17px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.mono {
font-family: var(--mono);
font-size: 13px;
font-weight: 400;
color: var(--muted-2);
}
.dot,
.pink {
color: var(--pink);
}
.ink-dot {
color: var(--ink);
}
.btn {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
padding: 18px 30px;
border: 0;
border-radius: 999px;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-press);
}
.btn:active {
transform: scale(0.97);
}
.btn-pink {
background: var(--pink);
color: #fff;
font-weight: 600;
}
.btn-pink:hover {
color: #fff;
}
.btn-soft {
background: var(--surface-2);
color: var(--ink);
}
.btn-soft:hover {
color: var(--ink);
}
.btn-ink {
background: var(--ink);
color: var(--bg);
}
.btn-ink:hover {
color: var(--bg);
}
.btn-sm {
padding: 13px 22px;
font-size: 15px;
}
.link-arrow {
display: inline-flex;
gap: 10px;
align-items: center;
font-weight: 600;
font-size: 16px;
text-decoration: none;
color: var(--ink);
}
.link-arrow:hover {
color: var(--pink);
}
.link-arrow .arr {
color: var(--pink);
}
.round-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--input-border);
background: transparent;
font-size: 18px;
cursor: pointer;
color: var(--ink);
transition: background-color 200ms ease, transform 140ms var(--ease-press);
}
.round-btn:hover {
background: var(--surface-2);
}
.round-btn:active {
transform: scale(0.94);
}
.sec-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 20px;
flex-wrap: wrap;
}
.sec-head .meta {
display: flex;
gap: 28px;
align-items: baseline;
}
.sec-head .meta a {
font-size: 16px;
font-weight: 500;
}
[data-divider] {
position: relative;
}
.ph {
background: var(--surface-2);
}
.is-embed .site-nav,
.is-embed .megamenu,
.is-embed .site-footer,
.is-embed #legalToc,
.is-embed .to-top {
display: none !important;
}
.site-nav {
position: sticky;
top: 0;
z-index: 30;
background: rgba(247, 246, 243, 0);
transition: background-color 300ms ease, box-shadow 300ms ease;
}
.site-nav.scrolled {
background: rgba(247, 246, 243, 0.88);
box-shadow: 0 1px 0 rgba(31, 30, 27, 0.08);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
}
.site-nav.menu-open {
z-index: 61;
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.nav-inner {
display: flex;
align-items: center;
gap: 20px 14px;
flex-wrap: wrap;
padding-top: 20px;
padding-bottom: 20px;
}
.nav-inner > * {
transition: opacity 300ms ease;
}
.site-nav.menu-open .nav-inner > :not(.menu-btn) {
opacity: 0;
pointer-events: none;
}
.nav-brand {
display: flex;
align-items: flex-end;
gap: 16px;
}
.nav-brand .logo {
display: flex;
}
.nav-brand .logo img {
height: 42px;
width: auto;
display: block;
}
.years {
display: flex;
align-items: center;
margin: 0;
padding: 0 0 1px 16px;
border: 0;
border-left: 1px solid var(--input-border);
background: none;
cursor: pointer;
color: var(--ink);
transition: transform 160ms var(--ease-press);
}
.years:active {
transform: scale(0.95);
}
.years-in {
display: inline-flex;
flex-direction: column;
align-items: stretch;
}
.years-num {
position: relative;
font-family: var(--display);
font-size: 30px;
line-height: 0.78;
font-weight: 700;
letter-spacing: -0.01em;
}
.years-num .b1,
.years-num .b2 {
position: absolute;
border-radius: 50%;
background: var(--pink);
}
.years-num .b1 {
right: -9px;
top: -4px;
width: 6px;
height: 6px;
}
.years-num .b2 {
right: -14px;
top: -11px;
width: 4px;
height: 4px;
}
.years-word {
display: flex;
justify-content: space-between;
font-size: 9px;
line-height: 1;
font-weight: 600;
}
.years-word:not(.is-split) {
justify-content: center;
}
.lang-switch {
position: relative;
display: flex;
flex: none;
padding: 3px;
border: 1px solid var(--input-border);
border-radius: 999px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
}
.lang-switch .lang-pill {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
width: 38px;
border-radius: 999px;
background: var(--pink);
transition: transform 500ms var(--ease-spring), width 300ms ease;
}
.lang-switch button,
.lang-switch a {
position: relative;
width: 38px;
height: 28px;
border: 0;
background: none;
cursor: pointer;
font: inherit;
color: var(--muted);
transition: color 300ms ease;
}
.lang-switch a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.lang-switch a:hover {
color: var(--ink);
}
.lang-switch button.active,
.lang-switch a.active,
.lang-switch a.active:hover {
color: #fff;
}
.lang-switch[data-lang-active="en"] .lang-pill,
.lang-switch[data-lang-index="1"] .lang-pill {
transform: translateX(38px);
}
.btn-mylab {
display: flex;
align-items: center;
margin-left: auto;
height: 46px;
padding: 0 20px;
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.01em;
border: 1px solid var(--input-border);
border-radius: 999px;
text-decoration: none;
color: var(--ink);
font-size: 16px;
transition: border-color 220ms ease, background-color 220ms ease, transform 140ms var(--ease-press);
}
.btn-mylab:hover {
color: var(--ink);
}
.btn-cta {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
background: var(--ink);
color: var(--bg);
padding: 0 20px 0 16px;
height: 46px;
border-radius: 999px;
font-size: 15px;
font-weight: 500;
transition: transform 140ms var(--ease-press);
}
.btn-cta:hover {
color: var(--bg);
}
.btn-cta:active {
transform: scale(0.97);
}
.btn-cta .cta-fill {
position: relative;
z-index: -1;
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--pink);
transition: transform 650ms var(--ease-out);
}
.btn-cta .cta-label {
display: block;
line-height: 1;
transform: translateY(-1.5px);
}
.btn-cta .cta-arrow {
display: inline-block;
line-height: 1;
margin-top: -2px;
transition: transform 450ms var(--ease-out);
}
.btn-cta:hover .cta-arrow {
transform: translateX(4px) rotate(-45deg);
}
.menu-btn {
position: relative;
z-index: 61;
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 6px 0 14px;
border: 0;
background: none;
cursor: pointer;
font-size: 15px;
font-weight: 500;
color: inherit;
transition: color 300ms ease;
}
.menu-btn .bars {
position: relative;
width: 26px;
height: 14px;
display: block;
}
.menu-btn .bars span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 500ms var(--ease-out);
}
.menu-btn .bars span:first-child {
top: 2px;
}
.menu-btn .bars span:last-child {
bottom: 2px;
}
.menu-btn[aria-expanded="true"] {
color: var(--bg);
}
.menu-btn[aria-expanded="true"] .bars span:first-child {
transform: translateY(4px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .bars span:last-child {
transform: translateY(-4px) rotate(-45deg);
}
.megamenu {
position: fixed;
inset: 0;
z-index: 60;
pointer-events: none;
visibility: hidden;
}
.megamenu.open {
visibility: visible;
pointer-events: auto;
}
.megamenu > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.megamenu-inner {
position: relative;
height: 100%;
max-width: 1360px;
margin: 0 auto;
padding: clamp(110px, 16vh, 160px) var(--gutter) clamp(32px, 6vh, 64px);
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
gap: 40px clamp(40px, 8vw, 140px);
color: var(--bg);
overflow-y: auto;
}
.mm-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.8vh, 20px);
flex: 1 1 420px;
}
.mm-list li {
overflow: hidden;
padding-bottom: 0.08em;
}
.mm-list a[data-mi] {
display: inline-flex;
align-items: center;
gap: 0.3em;
text-decoration: none;
color: var(--bg);
font-family: var(--display);
font-size: clamp(44px, 7.5vh, 92px);
line-height: 1.05;
transform: translateY(110%);
font-weight: 700;
letter-spacing: -0.01em;
position: relative;
}
.mm-list a[data-mi] [data-mi-liquid] {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
color: var(--pink);
pointer-events: none;
clip-path: inset(100% 0 0 0);
}
.mm-side {
flex: 0 1 320px;
display: flex;
flex-direction: column;
gap: 22px;
align-self: center;
opacity: 0;
transform: translateY(16px);
transition: opacity 500ms ease, transform 700ms var(--ease-out);
}
.mm-bubbles {
position: relative;
width: 92px;
height: 92px;
}
.mm-bubbles > span {
position: absolute;
}
.mm-bubbles > span > span {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--pink);
}
.mm-bubbles .mb0 { left: 13px; top: 39px; width: 44px; height: 44px; }
.mm-bubbles .mb1 { left: 52px; top: 21px; width: 24px; height: 24px; }
.mm-bubbles .mb2 { left: 42px; top: 5px; width: 13px; height: 13px; }
.mm-side .lang-switch {
align-self: flex-start;
border-color: rgba(247, 246, 243, 0.22);
}
.mm-side .lang-switch button,
.mm-side .lang-switch a {
color: var(--on-dark-muted);
}
.mm-side .lang-switch a:hover,
.mm-side .lang-switch button:hover {
color: var(--bg);
}
.mm-side .lang-switch button.active,
.mm-side .lang-switch a.active {
color: #fff;
}
.mm-contact {
color: var(--bg);
font-size: 20px;
text-decoration: none;
}
.mm-contact:hover {
color: var(--pink);
}
.mm-social {
display: flex;
gap: 22px;
font-size: 14px;
}
.mm-social a {
color: var(--on-dark-muted);
}
.mm-social a:hover {
color: var(--pink);
}
.mm-place {
font-size: 13px;
color: var(--muted-3);
}
.mm-legal {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
padding-top: 18px;
border-top: 1px solid rgba(247, 246, 243, 0.14);
}
.mm-legal a {
color: var(--muted-3);
font-size: 12px;
text-decoration: none;
transition: color 200ms ease;
}
.mm-legal a:hover {
color: var(--pink);
}
.mm-list li.has-sub {
display: flex;
align-items: center;
gap: 0.28em;
}
.mm-sub-go {
flex: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.08em;
margin-left: -0.04em;
height: 1em;
border: 0;
background: none;
color: var(--bg);
cursor: pointer;
font-size: clamp(44px, 7.5vh, 92px);
line-height: 1;
transition: color 260ms ease;
}
.mm-sub-go:hover {
color: var(--pink);
}
.mm-sub-go svg {
display: block;
overflow: visible;
}
.mm-sub-go path {
transition: transform 450ms var(--ease-out);
}
.mm-sub-go:hover path {
transform: translateX(10px);
}
.mm-sub {
flex: 1 1 420px;
display: none;
flex-direction: column;
gap: clamp(18px, 3vh, 32px);
}
.mm-back {
align-self: flex-start;
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 18px 0 12px;
border: 1px solid rgba(247, 246, 243, 0.25);
border-radius: 999px;
background: none;
color: var(--bg);
cursor: pointer;
font-family: var(--mono);
font-size: 13px;
transition: background-color 220ms ease, border-color 220ms ease, transform 140ms var(--ease-out);
}
.mm-back span {
display: inline-block;
transition: transform 300ms var(--ease-out);
}
.mm-back:hover {
background: var(--pink);
border-color: var(--pink);
}
.mm-back:hover span {
transform: translateX(-4px);
}
.mm-sub-groups {
display: flex;
flex-direction: column;
gap: clamp(16px, 2.6vh, 28px);
}
.mm-sub-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.mm-sub-group > a {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-3);
text-decoration: none;
margin-bottom: 2px;
transition: color 200ms ease;
}
.mm-sub-group > a:hover {
color: var(--pink);
}
.mm-sub-row {
display: flex;
flex-wrap: wrap;
gap: clamp(6px, 1.2vh, 14px) clamp(32px, 3.4vw, 60px);
}
.mm-sub-row a {
position: relative;
display: inline-flex;
align-items: baseline;
gap: 10px;
text-decoration: none;
color: var(--bg);
font-family: var(--display);
font-weight: 700;
font-size: clamp(26px, 4.4vh, 48px);
line-height: 1.12;
letter-spacing: -0.01em;
transition: color 260ms ease;
}
.mm-sub-row a .arr {
font-size: 0.5em;
color: var(--pink);
opacity: 0;
transform: translateX(-8px);
transition: opacity 260ms ease, transform 400ms var(--ease-out);
}
.mm-sub-row a:hover {
color: var(--pink);
}
.mm-sub-row a:hover .arr {
opacity: 1;
transform: none;
}
.mm-sub-all {
align-self: flex-start;
display: inline-flex;
gap: 10px;
align-items: center;
color: var(--bg);
font-size: 16px;
font-weight: 600;
text-decoration: none;
padding-top: 6px;
}
.mm-sub-all:hover {
color: var(--bg);
}
.site-footer {
position: relative;
margin-top: var(--section);
overflow: hidden;
}
.site-footer .f-bubbles {
position: absolute;
inset: 0;
pointer-events: none;
}
.site-footer .f-inner {
position: relative;
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: 48px;
}
.f-head {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 28px);
flex-wrap: wrap;
}
.f-head svg {
height: clamp(56px, 6vw, 92px);
width: auto;
flex: none;
}
.f-head h2 {
font-size: clamp(38px, 5vw, 72px);
line-height: 1.04;
}
.f-lead {
margin-top: 32px;
max-width: 46ch;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.f-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 40px;
}
.f-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 120px;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--muted-2);
}
.f-bottom img {
height: 36px;
width: auto;
display: block;
}
.f-bottom .f-social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
}
.f-bottom a {
color: var(--muted-2);
}
.site-footer.slim {
margin-top: clamp(48px, 6vw, 80px);
}
.site-footer.slim .f-inner {
padding-top: 48px;
}
.site-footer.slim .f-bottom {
margin-top: 0;
}
.fx-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: visible;
}
.cur-ring {
position: fixed;
left: 0;
top: 0;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 50%;
border: 1.5px solid rgba(240, 20, 90, 0.55);
pointer-events: none;
z-index: 9998;
opacity: 0;
transition: width 300ms var(--ease-out), height 300ms var(--ease-out), margin 300ms var(--ease-out), background-color 300ms ease, opacity 300ms ease;
}
.cur-ring.hot {
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
background-color: rgba(240, 20, 90, 0.08);
}
.cur-dot {
position: fixed;
left: 0;
top: 0;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: var(--pink);
pointer-events: none;
z-index: 9999;
opacity: 0;
transition: opacity 300ms ease;
}
.side-bubbles {
position: absolute;
top: -160px;
bottom: -160px;
left: 0;
right: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
}
.side-bubbles.wide {
left: calc(50% - 50vw);
right: auto;
width: 100vw;
}
.side-bubbles > span {
position: absolute;
border-radius: 50%;
opacity: 0;
}
.rv-word {
display: inline-block;
white-space: nowrap;
}
.rv-mask {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding: 0.12em 0.02em 0.14em;
margin: -0.12em -0.02em -0.14em;
}
.rv-ch {
display: inline-block;
will-change: transform;
}
.to-top {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 50;
width: 56px;
height: 56px;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--ink);
color: var(--bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(16px) scale(0.8);
pointer-events: none;
transition: opacity 300ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 200ms ease;
box-shadow: 0 10px 24px -10px rgba(31, 30, 27, 0.5);
}
.to-top.on {
opacity: 1;
transform: none;
pointer-events: auto;
}
.to-top:hover {
background: var(--pink);
}
.to-top .ring {
position: absolute;
inset: 0;
transform: rotate(-90deg);
}
.to-top .arr {
position: relative;
}
.wl-wa {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 50;
display: flex;
align-items: center;
gap: 10px;
color: var(--ink);
text-decoration: none;
}
.wl-wa ~ .to-top {
bottom: calc(clamp(16px, 3vw, 32px) + 68px);
}
.wl-wa-i {
position: relative;
flex: none;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ink);
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px -10px rgba(31, 30, 27, 0.5);
transition: background-color 200ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wl-wa-live {
position: absolute;
top: 5px;
right: 5px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 0 2px var(--ink);
transition: background-color 200ms ease, box-shadow 200ms ease;
}
.wl-wa-t {
padding: 10px 16px;
border-radius: 999px;
background: #fff;
box-shadow: 0 10px 24px -12px rgba(31, 30, 27, 0.45);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
opacity: 0;
transform: translateX(10px);
pointer-events: none;
transition: opacity 200ms ease, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wl-wa:hover .wl-wa-i,
.wl-wa:focus-visible .wl-wa-i {
background: var(--pink);
}
.wl-wa:hover .wl-wa-live,
.wl-wa:focus-visible .wl-wa-live {
background: #fff;
box-shadow: 0 0 0 2px var(--pink);
}
.wl-wa:hover .wl-wa-t,
.wl-wa:focus-visible .wl-wa-t {
opacity: 1;
transform: none;
}
.wl-wa:active .wl-wa-i {
transform: scale(0.92);
}
.wl-wa:focus-visible {
outline: none;
}
.wl-wa:focus-visible .wl-wa-i {
outline: 2px solid var(--pink);
outline-offset: 3px;
}
.flow-page .wl-wa {
display: none;
}
@media (hover: none) {
.wl-wa-t {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wl-wa-i,
.wl-wa-t {
transition: none;
}
}
@media print {
.wl-wa {
display: none;
}
}
.home-hero {
padding-top: clamp(32px, 4vh, 64px);
padding-bottom: clamp(32px, 4vh, 64px);
min-height: calc(100svh - var(--navh, 86px) - var(--mqh, 104px));
display: flex;
flex-wrap: wrap;
gap: 56px 64px;
align-items: center;
align-content: center;
}
.home-hero .hero-copy {
flex: 1 1 520px;
display: flex;
flex-direction: column;
gap: 36px;
}
.home-hero h1 {
font-size: clamp(40px, 5.2vw, 76px);
line-height: 1.06;
}
.home-hero h1 .ln {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
}
.home-hero h1 .ln > span {
display: block;
}
.rotator {
display: inline-block;
vertical-align: bottom;
height: 1.12em;
overflow: hidden;
color: var(--pink);
transition: width 600ms var(--ease-out);
}
.rotator .rot-track {
display: flex;
flex-direction: column;
gap: 0.6em;
transition: transform 700ms var(--ease-out);
}
.rotator .rot-track span {
height: 1.12em;
white-space: nowrap;
display: block;
width: max-content;
}
.home-hero .hero-intro {
max-width: 46ch;
font-size: 18px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.hero-actions {
display: flex;
gap: 24px 40px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.btn-start {
display: inline-flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
isolation: isolate;
text-decoration: none;
background: var(--pink);
color: #fff;
padding: 19px 30px 19px 26px;
border-radius: 8px;
font-weight: 600;
font-size: 17px;
transition: background-color 200ms ease, transform 400ms var(--ease-out);
}
.btn-start:hover {
color: #fff;
}
.btn-start svg {
width: 26px;
height: 26px;
flex: none;
overflow: visible;
margin: -4px 0 -2px;
}
.ratings {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.ratings a {
display: inline-flex;
gap: 10px;
align-items: center;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.ratings .stars-tp {
display: flex;
gap: 2px;
}
.ratings .stars-tp svg {
display: block;
}
.ratings .g-score {
display: flex;
align-items: center;
gap: 6px;
}
.ratings .g-score b {
font-weight: 600;
}
.ratings .g-stars {
display: inline-flex;
gap: 1px;
color: #FBBC05;
}
.ratings .g-stars span {
display: inline-block;
}
.ratings .g-icon {
display: flex;
}
.ratings .g-icon svg {
display: block;
}
.ratings .g-score b {
font-variant-numeric: tabular-nums;
}
.hero-bubbles {
flex: 1 1 460px;
position: relative;
aspect-ratio: 1 / 1;
max-height: 640px;
min-height: 300px;
}
.hero-bubbles > div {
position: absolute;
aspect-ratio: 1;
}
.hero-bubbles > div > span {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--pink);
}
.hero-bubbles .hb0 { left: 6%; top: 30%; width: 58%; }
.hero-bubbles .hb1 { left: 58%; top: 12%; width: 32%; }
.hero-bubbles .hb2 { left: 44%; top: 0; width: 17%; }
.hero-bubbles .seal {
position: absolute;
right: 0;
bottom: 4%;
width: 30%;
aspect-ratio: 1;
padding: 0;
border: 0;
background: none;
cursor: pointer;
z-index: 3;
transition: transform 160ms var(--ease-press);
}
.hero-bubbles .seal:active {
transform: scale(0.94);
}
.hero-bubbles .seal svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.seal .seal-ring {
font-family: var(--mono);
font-size: 15.5px;
letter-spacing: 3.2px;
fill: #F7F6F3;
}
.seal .seal-num {
font-family: var(--display);
font-size: 62px;
fill: var(--pink);
font-weight: 700;
}
.hero-bubbles .rise {
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
background: var(--pink);
opacity: 0;
}
.marquee {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
padding: 22px 0;
}
.marquee-track {
display: flex;
width: max-content;
will-change: transform;
}
.marquee-track > span {
display: flex;
align-items: center;
gap: 40px;
padding-right: 40px;
font-family: var(--display);
font-size: clamp(28px, 3.4vw, 48px);
letter-spacing: -0.02em;
white-space: nowrap;
}
.marquee-track > span::after {
content: "";
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--pink);
}
.work {
position: relative;
height: 440vh;
margin-top: clamp(24px, 3vw, 48px);
}
.work-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(16px, 3.5vh, 44px);
padding-top: 72px;
padding-bottom: 16px;
}
.work-ghost {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-family: var(--display);
font-size: clamp(140px, 22vw, 340px);
line-height: 1;
color: transparent;
pointer-events: none;
will-change: transform;
font-weight: 700;
letter-spacing: -0.01em;
}
.work-stage > .container {
position: relative;
}
.work-track {
position: relative;
display: flex;
gap: clamp(24px, 4vw, 64px);
padding: 0 max(var(--gutter), calc((100vw - 1360px) / 2 + 72px));
width: max-content;
will-change: transform;
}
.work-panel {
flex: none;
width: min(74vw, 1000px);
display: flex;
flex-direction: column;
gap: 18px;
text-decoration: none;
transform-origin: 50% 60%;
will-change: transform;
}
.browser {
aspect-ratio: 16 / 9.5;
max-height: calc(100vh - var(--navh, 90px) - 220px);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
box-shadow: 0 1px 2px rgba(31, 30, 27, 0.06), 0 30px 60px -24px rgba(31, 30, 27, 0.25);
}
.browser-bar {
height: 34px;
flex: none;
display: flex;
align-items: center;
gap: 6px;
padding: 0 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.browser-bar > i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #d3d0c8;
}
.browser-bar .url {
margin-left: 12px;
font-family: var(--mono);
font-size: 12px;
color: #6b6860;
background: var(--bg);
padding: 3px 10px;
border-radius: 4px;
}
.browser-site {
position: relative;
flex: 1;
overflow: hidden;
background: #f2f1ed;
}
.scene {
position: relative;
width: 100%;
aspect-ratio: var(--sr, 990 / 590);
}
.scene-c {
position: absolute;
left: 0;
top: 0;
width: var(--sw, 990px);
height: var(--sh, 590px);
transform-origin: 0 0;
transform: scale(var(--k, 1));
visibility: hidden;
}
.scene.is-ready .scene-c {
visibility: visible;
}
.scene.is-fit .sc-desk,
.scene.is-fit .sc-phone {
visibility: visible;
}
.sc-desk {
position: absolute;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
.sc-bar {
height: 28px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
background: #e5e2db;
}
.sc-bar > span:not(.url) {
width: 8px;
height: 8px;
border-radius: 50%;
background: #c6c2b9;
}
.sc-bar .url {
margin-left: 10px;
padding: 2px 9px;
border-radius: 4px;
background: var(--bg);
font-family: var(--mono);
font-size: 11px;
color: var(--muted-2);
}
.sc-desk img {
display: block;
width: 100%;
object-fit: cover;
object-position: top;
}
.sc-phone {
position: absolute;
z-index: 2;
border: 7px solid var(--ink);
overflow: hidden;
background: #fff;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.22);
}
.sc-phone img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
[data-scene="kerkyra-lines"] .sc-desk {
left: 70px;
top: 50px;
width: 760px;
}
[data-scene="kerkyra-lines"] .sc-desk img {
height: 417px;
}
[data-scene="kerkyra-lines"] .sc-phone {
left: 760px;
top: 150px;
width: 200px;
height: 400px;
border-radius: 32px;
}
.sc-corfu {
position: absolute;
z-index: 3;
left: 0;
top: 350px;
width: 160px;
height: 194px;
pointer-events: none;
}
.sc-corfu svg {
position: absolute;
left: -60px;
top: -20px;
width: 280px;
height: 233.5px;
overflow: visible;
}
.sc-corfu-t {
font-family: var(--mono);
font-size: 22px;
letter-spacing: 2px;
fill: var(--ink);
}
.sc-ticket {
position: absolute;
z-index: 1;
left: 772px;
top: 165px;
}
.sc-t {
position: relative;
width: 176px;
border-radius: 14px;
background: #fff;
box-shadow: 0 18px 44px rgba(31, 30, 27, 0.16);
font-family: var(--mono);
color: var(--ink);
}
.sc-t-top {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px 10px;
}
.sc-t-co,
.sc-t-en,
.sc-t-pax,
.sc-t-bot > span:first-child {
font-size: 11px;
color: var(--muted-2);
}
.sc-t-co {
font-size: 10px;
letter-spacing: 0.08em;
}
.sc-t-route {
font-size: 20px;
letter-spacing: 0.02em;
}
.sc-t-en {
margin-top: -4px;
font-size: 10px;
}
.sc-t-tear {
position: relative;
height: 18px;
background: radial-gradient(circle at 0 50%, var(--bg) 9px, transparent 10px), radial-gradient(circle at 100% 50%, var(--bg) 9px, transparent 10px);
}
.sc-t-tear span {
position: absolute;
left: 14px;
right: 14px;
top: 8px;
border-top: 2px dashed var(--border);
}
.sc-t-bot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 16px 14px;
}
.sc-t-code {
display: flex;
gap: 2px;
}
.sc-t-code i {
display: block;
width: 2px;
height: 22px;
background: var(--ink);
}
.sc-t-code i.w1 {
width: 1px;
}
.sc-t-code i.w3 {
width: 3px;
}
.sc-t-code i.w4 {
width: 4px;
}
.sc-stamp {
position: absolute;
right: -18px;
top: -16px;
padding: 6px 10px;
border: 2px solid var(--pink);
border-radius: 8px;
background: #fff;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--pink);
opacity: 0;
}
[data-scene="ktel-kerkyras"] .sc-desk {
left: 122px;
top: 70px;
width: 700px;
}
[data-scene="ktel-kerkyras"] .sc-desk img {
height: 384px;
}
[data-scene="ktel-kerkyras"] .sc-phone {
left: 782px;
top: 160px;
width: 190px;
height: 380px;
border-radius: 31px;
}
.sc-gphone {
position: absolute;
z-index: 3;
left: 30px;
top: 290px;
width: 140px;
height: 288px;
border: 6px solid var(--ink);
border-radius: 26px;
overflow: hidden;
background: #fff;
box-shadow: 0 24px 56px rgba(31, 30, 27, 0.28);
transform: rotate(-6deg);
}
.sc-gphone img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.sc-chip {
position: absolute;
z-index: 4;
left: 112px;
top: 262px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 8px;
border-radius: 999px;
background: #004d22;
color: #fff;
font-size: 12px;
white-space: nowrap;
box-shadow: 0 12px 30px rgba(0, 40, 15, 0.28);
}
.sc-chip svg {
display: block;
width: 18px;
height: 18px;
}
.sc-chip b {
font-family: var(--mono);
font-size: 10px;
font-weight: 400;
color: #004d22;
background: #c3dc3a;
padding: 2px 6px;
border-radius: 5px;
}
.sc-board {
position: absolute;
z-index: 1;
left: 612px;
top: 12px;
width: 268px;
overflow: hidden;
border-radius: 16px;
background: #004d22;
box-shadow: 0 22px 50px rgba(0, 40, 15, 0.28);
color: #fff;
font-family: var(--sans);
}
.sc-board-h {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px 10px;
}
.sc-live {
display: flex;
align-items: center;
gap: 6px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
color: #c3dc3a;
}
.sc-live i {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #c3dc3a;
}
.sc-clock {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.08em;
}
.sc-board-t {
padding: 0 16px 10px;
font-size: 16px;
font-weight: 600;
}
.sc-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
border-top: 1px solid #0f6232;
}
.sc-row:first-child {
background: #0d5a2c;
}
.sc-row-time {
min-width: 46px;
font-size: 17px;
font-weight: 600;
}
.sc-row-line {
padding: 3px 9px;
background: #1f6a2a;
font-size: 11px;
font-weight: 600;
color: #c3dc3a;
transform: skewX(-14deg);
}
.sc-row-to {
margin-left: auto;
display: flex;
flex-direction: column;
text-align: right;
}
.sc-row-to b {
font-size: 13px;
}
.sc-row-to span {
font-size: 9px;
color: #8fb59a;
}
[data-scene="klinon"] .sc-desk {
left: 265px;
top: 110px;
width: 560px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.16);
}
[data-scene="klinon"] .sc-desk img {
height: 360px;
}
.sc-cart {
position: absolute;
right: 12px;
top: 50px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
border-radius: 999px;
background: #556b45;
color: #fff;
font-size: 11px;
letter-spacing: 0.08em;
box-shadow: 0 6px 16px rgba(40, 55, 30, 0.25);
}
[data-scene="klinon"] .sc-phone {
left: 35px;
top: 40px;
width: 250px;
height: 510px;
border-width: 8px;
border-radius: 38px;
background: #f9f6f0;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.26);
}
.sc-add {
position: absolute;
left: 79px;
top: 387px;
width: 148px;
height: 30px;
}
.sc-fly {
position: absolute;
z-index: 5;
left: 0;
top: 0;
width: 0;
height: 0;
pointer-events: none;
}
.sc-fly-chip,
.sc-sw {
background-image: repeating-linear-gradient(0deg, rgba(60, 50, 35, 0.1) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(60, 50, 35, 0.08) 0 1px, transparent 1px 3px);
}
.sc-fly-chip {
position: absolute;
left: -26px;
top: -26px;
width: 52px;
height: 52px;
border: 3px solid #fff;
border-radius: 50%;
background-color: #76918f;
box-shadow: 0 12px 30px rgba(31, 30, 27, 0.3);
opacity: 0;
}
.sc-linen {
position: absolute;
z-index: 3;
left: 725px;
top: 360px;
width: 230px;
height: 190px;
}
.sc-sw {
position: absolute;
left: 20px;
top: 30px;
width: 150px;
height: 120px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 3px;
box-shadow: 0 10px 26px rgba(31, 30, 27, 0.14);
transform-origin: 10% 100%;
}
.sc-sw span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(249, 246, 240, 0.92);
font-size: 8px;
letter-spacing: 0.14em;
color: #3d3b36;
}
.sc-linen-tag {
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 13px;
background: #556b45;
color: #f9f6f0;
box-shadow: 0 10px 26px rgba(40, 55, 30, 0.25);
}
.sc-linen-tag span {
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.1;
}
.sc-linen-tag small {
font-size: 8px;
letter-spacing: 0.14em;
}
.sc-linen-c {
position: absolute;
left: 20px;
bottom: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
letter-spacing: 0.14em;
color: #3d3b36;
}
.sc-linen-c b {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
}
[data-scene="hellenic-grocery"] .sc-desk {
left: 170px;
top: 115px;
width: 640px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.16);
}
[data-scene="hellenic-grocery"] .sc-desk img {
height: 382px;
}
[data-scene="hellenic-grocery"] .sc-phone {
left: 760px;
top: 215px;
width: 200px;
height: 360px;
border-radius: 30px;
}
.sc-honey {
position: absolute;
z-index: 4;
left: 0;
top: 0;
width: 990px;
height: 590px;
pointer-events: none;
}
.sc-dip {
position: absolute;
width: 48px;
height: 150px;
transform-origin: 50% 0;
transform: rotate(8deg);
}
.sc-dip span {
position: absolute;
}
.sc-dip .stick {
left: 20px;
top: 0;
width: 8px;
height: 80px;
border-radius: 4px;
background: #c99a5b;
}
.sc-dip .ring {
height: 10px;
border-radius: 5px;
background: #c99a5b;
}
.sc-dip .ring.dark {
background: #a8650d;
}
.sc-dip .blob {
left: 8px;
top: 84px;
width: 32px;
height: 54px;
border-radius: 40% 40% 50% 50%;
background: #e8a317;
opacity: 0.85;
mix-blend-mode: multiply;
}
.sc-pool {
position: absolute;
width: 120px;
height: 8px;
border-radius: 50%;
background: #e8a317;
opacity: 0;
}
.sc-olive {
position: absolute;
z-index: 3;
left: 30px;
top: 345px;
width: 280px;
height: 240px;
}
.sc-olive-tag {
position: absolute;
left: 150px;
top: 176px;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background: #fbf8f1;
box-shadow: 0 10px 26px rgba(23, 52, 107, 0.14);
font-family: Georgia, serif;
font-size: 17px;
font-style: italic;
color: #17346b;
white-space: nowrap;
}
.sc-olive-tag i {
display: block;
width: 9px;
height: 12px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: #c9a227;
}
[data-scene="corfu-green-way"] .sc-desk {
left: 160px;
top: 43px;
width: 640px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.16);
}
[data-scene="corfu-green-way"] .sc-desk img {
height: 380px;
}
[data-scene="corfu-green-way"] .sc-phone {
left: 10px;
top: 193px;
width: 190px;
height: 340px;
border-radius: 30px;
background: #f4f1e8;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.26);
}
.sc-sprinkler {
position: absolute;
z-index: 4;
left: 212px;
top: 407px;
width: 150px;
height: 140px;
pointer-events: none;
}
.sc-plan {
position: absolute;
z-index: 3;
left: 700px;
top: 303px;
width: 280px;
height: 220px;
}
[data-scene="louloudi-milano"] .sc-desk {
left: 91px;
top: 135px;
width: 620px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.16);
}
[data-scene="louloudi-milano"] .sc-desk img {
height: 360px;
}
[data-scene="louloudi-milano"] .sc-phone {
left: 671px;
top: 45px;
width: 200px;
height: 400px;
border-radius: 32px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-espresso,
.sc-hanger {
position: absolute;
z-index: 3;
pointer-events: none;
}
.sc-espresso {
left: -14px;
top: 355px;
width: 200px;
height: 200px;
}
.sc-hanger {
left: 786px;
top: 325px;
width: 200px;
height: 240px;
}
[data-scene="eflowers"] .sc-desk {
left: 228px;
top: 58px;
width: 690px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.16);
}
[data-scene="eflowers"] .sc-desk img {
height: 338px;
}
[data-scene="eflowers"] .sc-phone {
left: 88px;
top: 188px;
width: 190px;
height: 380px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-bouquet {
position: absolute;
z-index: 1;
left: 63px;
top: -28px;
width: 240px;
height: 290px;
pointer-events: none;
}
.sc-track {
position: absolute;
z-index: 3;
left: 528px;
top: 388px;
width: 420px;
pointer-events: none;
}
[data-scene="ekdoseis-arsinoi"] .sc-desk {
left: 167px;
top: 28px;
width: 640px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.16);
}
[data-scene="ekdoseis-arsinoi"] .sc-desk img {
height: 386px;
}
[data-scene="ekdoseis-arsinoi"] .sc-phone {
left: 777px;
top: 108px;
width: 190px;
height: 380px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-typewriter {
position: absolute;
z-index: 3;
left: 23px;
top: 410px;
width: 300px;
pointer-events: none;
}
.sc-books {
position: absolute;
z-index: 1;
left: 585px;
top: 260px;
width: 200px;
height: 260px;
pointer-events: none;
}
[data-scene="unileague"] .sc-desk {
left: 120px;
top: 40px;
width: 680px;
background: #0b1530;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="unileague"] .sc-desk img {
height: 378px;
}
[data-scene="unileague"] .sc-phone {
left: 10px;
top: 220px;
width: 190px;
height: 330px;
border-radius: 30px;
background: #0b1530;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.28);
}
.sc-ball {
position: absolute;
z-index: 3;
left: 730px;
top: 270px;
width: 250px;
height: 290px;
pointer-events: none;
}
[data-scene="vassia-petrovic"] .sc-desk {
left: 190px;
top: 50px;
width: 660px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="vassia-petrovic"] .sc-desk img {
height: 380px;
}
[data-scene="vassia-petrovic"] .sc-phone {
left: 800px;
top: 190px;
width: 180px;
height: 350px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-viewfinder {
position: absolute;
right: 60px;
top: 108px;
width: 230px;
height: 160px;
pointer-events: none;
}
.sc-polaroids {
position: absolute;
z-index: 3;
left: -15px;
top: 270px;
width: 300px;
height: 290px;
pointer-events: none;
}
.sc-flash {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 28px;
bottom: 0;
background: #fff;
opacity: 0;
pointer-events: none;
}
[data-scene="villa-alexandra"] .sc-desk {
left: 14px;
top: 70px;
width: 640px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="villa-alexandra"] .sc-desk img {
height: 370px;
}
[data-scene="villa-alexandra"] .sc-phone {
left: 594px;
top: 205px;
width: 190px;
height: 370px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-booking {
position: absolute;
z-index: 3;
left: 706px;
top: 18px;
width: 270px;
pointer-events: none;
}
[data-scene="eturn"] .sc-desk {
left: 115px;
top: 76px;
width: 680px;
background: #12263a;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="eturn"] .sc-desk img {
height: 376px;
}
[data-scene="eturn"] .sc-phone {
left: 745px;
top: 236px;
width: 180px;
height: 330px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-growth,
.sc-fives {
position: absolute;
z-index: 3;
pointer-events: none;
}
.sc-growth {
left: 15px;
top: 366px;
width: 320px;
height: 210px;
}
.sc-fives {
left: 642px;
top: 14px;
width: 330px;
height: 190px;
}
[data-scene="corefood"] .sc-desk {
z-index: 1;
left: 175px;
top: 96px;
width: 690px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="corefood"] .sc-desk img {
height: 388px;
}
[data-scene="corefood"] .sc-phone {
left: 85px;
top: 256px;
width: 180px;
height: 320px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-flow {
position: absolute;
z-index: 0;
left: 15px;
top: 10px;
width: 250px;
height: 220px;
pointer-events: none;
}
.sc-label {
position: absolute;
z-index: 3;
left: 725px;
top: 326px;
width: 250px;
pointer-events: none;
}
[data-scene="dr-klimis"] .sc-desk {
left: 120px;
top: 95px;
width: 700px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="dr-klimis"] .sc-desk img {
height: 392px;
}
[data-scene="dr-klimis"] .sc-phone {
left: 20px;
top: 245px;
width: 180px;
height: 330px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-pulse,
.sc-articles {
position: absolute;
z-index: 3;
pointer-events: none;
}
.sc-pulse {
left: 660px;
top: 15px;
width: 290px;
}
.sc-articles {
left: 700px;
top: 370px;
width: 270px;
}
[data-scene="socca-crete"] .sc-desk {
left: 160px;
top: 40px;
width: 700px;
background: #1a1450;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="socca-crete"] .sc-desk img {
height: 410px;
}
[data-scene="socca-crete"] .sc-phone {
left: 800px;
top: 160px;
width: 180px;
height: 350px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-pitch {
position: absolute;
z-index: 3;
left: 10px;
top: 375px;
width: 320px;
height: 200px;
pointer-events: none;
}
[data-scene="leisos"] .sc-desk {
left: 150px;
top: 50px;
width: 700px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="leisos"] .sc-desk img {
height: 400px;
}
[data-scene="leisos"] .sc-phone {
left: 800px;
top: 190px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-minibus {
position: absolute;
z-index: 3;
left: 10px;
top: 430px;
width: 300px;
height: 130px;
pointer-events: none;
}
[data-scene="tsiouda"] .sc-desk {
left: 75px;
top: 50px;
width: 720px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="tsiouda"] .sc-desk img {
height: 430px;
}
[data-scene="tsiouda"] .sc-phone {
left: 735px;
top: 190px;
width: 180px;
height: 350px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-stetho {
position: absolute;
z-index: 3;
left: 345px;
top: 170px;
width: 300px;
height: 328px;
pointer-events: none;
}
[data-scene="architechnio"] .sc-desk {
left: 100px;
top: 80px;
width: 680px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="architechnio"] .sc-desk img {
height: 400px;
}
[data-scene="architechnio"] .sc-phone {
left: 15px;
top: 240px;
width: 180px;
height: 320px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-cad,
.sc-rulers {
position: absolute;
z-index: 3;
pointer-events: none;
}
.sc-cad {
left: 670px;
top: 12px;
width: 310px;
height: 220px;
}
.sc-rulers {
left: 643px;
top: 390px;
width: 370px;
height: 200px;
}
[data-scene="ferryway"] .sc-desk {
left: 95px;
top: 45px;
width: 700px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="ferryway"] .sc-desk img {
height: 420px;
}
[data-scene="ferryway"] .sc-phone {
left: 765px;
top: 185px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-stamps {
position: absolute;
z-index: 3;
left: 45px;
top: 325px;
width: 330px;
height: 220px;
pointer-events: none;
}
[data-scene="jp-yachting"] .sc-desk {
left: 150px;
top: 50px;
width: 700px;
background: #0d2340;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="jp-yachting"] .sc-desk img {
height: 400px;
}
[data-scene="jp-yachting"] .sc-phone {
left: 795px;
top: 200px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-yacht {
position: absolute;
z-index: 3;
left: 0;
top: 425px;
width: 330px;
height: 140px;
pointer-events: none;
}
[data-scene="socca-league"] .sc-desk {
left: 185px;
top: 45px;
width: 680px;
background: #3a1f6e;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="socca-league"] .sc-desk img {
height: 420px;
}
[data-scene="socca-league"] .sc-phone {
left: 805px;
top: 175px;
width: 180px;
height: 350px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-trophy {
position: absolute;
z-index: 3;
left: -10px;
top: 255px;
width: 240px;
height: 280px;
pointer-events: none;
}
[data-scene="kosma-law"] .sc-desk {
left: 170px;
top: 45px;
width: 680px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="kosma-law"] .sc-desk img {
height: 400px;
}
[data-scene="kosma-law"] .sc-phone {
left: 800px;
top: 195px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-scales {
position: absolute;
z-index: 3;
left: 0;
top: 245px;
width: 280px;
height: 300px;
pointer-events: none;
}
[data-scene="ecopoint"] .sc-desk {
left: 180px;
top: 45px;
width: 680px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="ecopoint"] .sc-desk img {
height: 400px;
}
[data-scene="ecopoint"] .sc-phone {
left: 800px;
top: 195px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-thermo {
position: absolute;
z-index: 3;
left: 10px;
top: 262px;
width: 240px;
height: 260px;
pointer-events: none;
}
[data-scene="evi-chavele"] .sc-desk {
left: 180px;
top: 45px;
width: 680px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="evi-chavele"] .sc-desk img {
height: 400px;
}
[data-scene="evi-chavele"] .sc-phone {
left: 800px;
top: 195px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-venn {
position: absolute;
z-index: 3;
left: 0;
top: 290px;
width: 300px;
height: 270px;
pointer-events: none;
}
[data-scene="maratos-service"] .sc-desk {
left: 180px;
top: 45px;
width: 680px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="maratos-service"] .sc-desk img {
height: 400px;
}
[data-scene="maratos-service"] .sc-phone {
left: 800px;
top: 195px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-wrench {
position: absolute;
z-index: 3;
left: 0;
top: 310px;
width: 300px;
height: 240px;
pointer-events: none;
}
[data-scene="corfu-yacht-yard"] .sc-desk {
left: 75px;
top: 75px;
width: 720px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="corfu-yacht-yard"] .sc-desk img {
height: 404px;
}
[data-scene="corfu-yacht-yard"] .sc-phone {
left: 735px;
top: 225px;
width: 180px;
height: 330px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-gulls {
position: absolute;
z-index: 4;
left: 0;
top: -25px;
width: 990px;
height: 300px;
overflow: hidden;
pointer-events: none;
}
[data-scene="generic"] .sc-desk {
left: 80px;
top: 45px;
width: 700px;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="generic"] .sc-desk img {
height: 420px;
}
[data-scene="generic"] .sc-phone {
left: 720px;
top: 175px;
width: 190px;
height: 370px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
[data-scene="mparmparis"] .sc-desk {
left: 215px;
top: 60px;
width: 660px;
background: #2b3540;
box-shadow: 0 30px 70px rgba(31, 30, 27, 0.18);
}
[data-scene="mparmparis"] .sc-desk img {
height: 380px;
}
[data-scene="mparmparis"] .sc-phone {
left: 800px;
top: 205px;
width: 180px;
height: 340px;
border-radius: 30px;
box-shadow: 0 24px 60px rgba(31, 30, 27, 0.24);
}
.sc-stones {
position: absolute;
z-index: 3;
left: 0;
top: 348px;
width: 300px;
height: 240px;
pointer-events: none;
}
.browser.is-scene {
aspect-ratio: 990 / 590;
max-height: none;
display: flex;
align-items: center;
overflow: visible;
border-radius: 0;
background: none;
box-shadow: none;
}
.proj-shot.is-scene,
.proj-shot.is-scene:hover {
overflow: visible;
border-radius: 0;
background: none;
box-shadow: none;
}
.proj-scene {
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
}
.browser.is-art {
background: var(--bg);
box-shadow: 0 0 0 1px var(--card-border), 0 30px 60px -24px rgba(31, 30, 27, 0.2);
}
.browser.is-art img {
display: block;
flex: 1;
width: 100%;
min-height: 0;
object-fit: cover;
}
.browser-site iframe {
position: absolute;
top: 0;
left: 0;
width: 1440px;
height: 2800px;
border: 0;
transform-origin: 0 0;
pointer-events: none;
}
.work-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.work-meta .name {
font-family: var(--display);
font-size: clamp(28px, 3.4vw, 46px);
letter-spacing: -0.03em;
line-height: 1;
}
.work-meta .type {
display: flex;
gap: 20px;
align-items: baseline;
font-size: 15px;
color: var(--muted);
}
.work-meta .type .mono {
color: var(--muted);
}
.progress {
height: 2px;
background: var(--border);
overflow: hidden;
}
.progress > div {
height: 100%;
background: var(--pink);
transform-origin: left;
transform: scaleX(0);
}
.svc-scroll {
position: relative;
height: 540vh;
margin-top: clamp(96px, 11vw, 150px);
background: var(--pink);
color: #fff;
}
.svc-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.svc-title {
position: absolute;
left: var(--gutter);
top: clamp(96px, 14vh, 140px);
display: flex;
flex-direction: column;
gap: 14px;
z-index: 3;
}
.svc-title .count {
font-family: var(--mono);
font-size: 14px;
letter-spacing: 0.02em;
}
.svc-orb {
position: absolute;
left: 50%;
top: 50%;
width: min(78vh, 62vw);
aspect-ratio: 1;
transform: translate(-42%, -50%);
z-index: 1;
}
.svc-shape {
position: absolute;
left: 18%;
top: 18%;
width: 64%;
height: 64%;
background: #fff;
border-radius: 50% 50% 50% 0;
transition: border-radius 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.svc-orb img {
position: absolute;
left: 37%;
top: 37%;
width: 26%;
height: 26%;
opacity: 0;
transform: scale(0.6) rotate(-12deg);
transition: opacity 450ms ease, transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
z-index: 2;
}
.svc-orb .sat {
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
}
.svc-orb .sat0 {
left: 84%;
top: 10%;
width: 9%;
transition: left 900ms var(--ease-out), top 900ms var(--ease-out);
}
.svc-orb .sat1 {
left: 76%;
top: 0;
width: 5%;
transition: left 1100ms var(--ease-out), top 1100ms var(--ease-out);
}
.svc-orb svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.svc-orb svg g {
opacity: 0;
transform-origin: 150px 150px;
transition: opacity 500ms ease, transform 900ms var(--ease-out);
}
.svc-orb svg text {
font-family: var(--display);
font-size: 27px;
font-weight: 700;
fill: #fff;
}
.svc-descs {
position: absolute;
left: var(--gutter);
bottom: clamp(40px, 9vh, 96px);
width: min(440px, calc(100% - 40px));
min-height: 7.2em;
z-index: 3;
}
.svc-descs p {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
font-weight: 500;
color: #fff;
text-wrap: pretty;
opacity: 0;
transform: translateY(14px);
transition: opacity 450ms ease, transform 600ms var(--ease-out);
}
.svc-descs p a {
color: #fff;
}
.svc-descs .svc-more {
display: flex;
align-items: center;
gap: 8px;
width: max-content;
max-width: 100%;
margin-top: 14px;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
transition: gap 200ms var(--ease-out);
}
.svc-descs .svc-more:hover,
.svc-descs .svc-more:focus-visible {
gap: 12px;
text-decoration-thickness: 2px;
}
.svc-dots {
position: absolute;
right: clamp(16px, 2.5vw, 36px);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
z-index: 3;
}
.svc-dots button {
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.svc-dots button span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
opacity: 0.45;
transition: opacity 300ms ease, transform 300ms var(--ease-out);
}
.clients {
display: flex;
flex-wrap: wrap;
gap: 48px clamp(40px, 6vw, 96px);
align-items: flex-start;
}
.clients-copy {
flex: 1 1 300px;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 24px;
}
.stat-95 {
display: flex;
align-items: center;
gap: 20px;
padding: 22px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stat-95 .num {
display: flex;
align-items: flex-start;
font-family: var(--display);
font-size: clamp(64px, 6.5vw, 92px);
line-height: 0.8;
color: var(--pink);
font-weight: 700;
letter-spacing: -0.01em;
}
.stat-95 .num small {
font-size: 0.42em;
line-height: 1;
margin-left: 0.06em;
margin-top: 0.04em;
letter-spacing: 0;
-webkit-text-stroke: 0.06em currentColor;
}
.stat-95 .txt {
font-size: 16px;
line-height: 1.35;
font-weight: 500;
color: var(--ink);
max-width: 15ch;
}
.clients-copy p {
font-size: 17px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.clients-copy p.strong {
color: var(--ink);
font-weight: 500;
}
.logo-grid {
flex: 2 1 560px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-cards);
}
.logo-card {
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
background: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--card-border);
border-radius: 18px;
text-decoration: none;
transition: transform 260ms var(--ease-press), box-shadow 260ms ease, border-color 260ms ease;
}
.logo-card:hover {
border-color: var(--border);
}
.logo-card:active {
transform: scale(0.99);
}
.logo-card img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
position: relative;
z-index: 2;
transition: transform 500ms var(--ease-out);
}
.why {
display: flex;
flex-direction: column;
gap: clamp(36px, 4vw, 56px);
}
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: clamp(20px, 2.4vw, 36px);
}
.why-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.why-bub {
width: min(100%, 220px);
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
border: 1px solid var(--card-border);
display: flex;
align-items: center;
justify-content: center;
padding: 14%;
position: relative;
overflow: hidden;
transition: border-color 420ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease;
}
.why-bub .t,
.why-liq .t {
font-family: var(--display);
font-size: clamp(19px, 1.6vw, 23px);
line-height: 1.15;
text-wrap: pretty;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
.why-liq {
position: absolute;
inset: 0;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
padding: 14%;
clip-path: inset(100% 0 0 0);
pointer-events: none;
}
.why-liq .t {
color: #fff;
}
.why-item p {
max-width: 24ch;
font-size: 15px;
line-height: 1.55;
color: var(--muted);
text-wrap: pretty;
}
.anniversary {
position: relative;
height: calc(100vh + (var(--stops, 8) - 0.65) * 26vh);
margin-top: clamp(64px, 8vw, 120px);
}
.ann-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(16px, 3vh, 32px);
}
.ann-row {
display: flex;
align-items: flex-end;
gap: clamp(20px, 4vw, 64px);
flex-wrap: wrap;
}
.ann-year {
font-family: var(--display);
font-size: clamp(120px, 22vw, 340px);
line-height: 0.86;
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: -0.01em;
}
.ann-year span {
display: inline-block;
color: var(--pink);
-webkit-text-stroke-color: var(--pink);
}
.ann-ms {
flex: 1 1 280px;
max-width: 420px;
min-height: 5.5em;
position: relative;
padding-bottom: clamp(10px, 2vw, 28px);
}
.ann-ms p {
position: absolute;
left: 0;
bottom: clamp(10px, 2vw, 28px);
margin: 0;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
color: var(--ink);
text-wrap: pretty;
opacity: 0;
transform: translateY(12px);
transition: opacity 400ms ease, transform 600ms var(--ease-out);
}
.ann-ms p.on {
opacity: 1;
transform: none;
}
.ann-ms p strong {
display: block;
font-family: var(--mono);
font-size: 13px;
font-weight: 400;
color: var(--pink);
margin-bottom: 6px;
}
.ann-ruler-wrap {
position: relative;
height: 120px;
}
.ann-ruler-wrap::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--pink);
transform: translateX(-1px);
z-index: 2;
}
.ann-ruler {
position: absolute;
left: 50%;
top: 0;
height: 100%;
display: flex;
align-items: flex-end;
will-change: transform;
}
.reviews {
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 44px);
}
.reviews .quote-box {
display: grid;
min-height: clamp(180px, 16vw, 230px);
}
.reviews figure {
margin: 0;
transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}
.reviews .quote-box > figure {
grid-area: 1 / 1;
}
.reviews .quote-box > figure[hidden] {
display: block !important;
visibility: hidden;
}
.reviews blockquote {
margin: 0;
max-width: 42ch;
font-family: var(--display);
font-size: clamp(22px, 2.6vw, 36px);
line-height: 1.22;
letter-spacing: -0.02em;
text-wrap: pretty;
}
.reviews .is-long blockquote {
max-width: 52ch;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.3;
letter-spacing: -0.015em;
text-wrap: pretty;
}
.reviews .is-xlong blockquote {
max-width: 64ch;
font-size: clamp(18px, 1.55vw, 23px);
line-height: 1.4;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.reviews figcaption {
margin-top: 24px;
font-size: 16px;
color: var(--muted);
}
.reviews-ctrl {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.reviews-ctrl .progress {
flex: 1 1 200px;
max-width: 320px;
}
.reviews-ctrl .progress > div {
width: 100%;
}
.reviews-ctrl .btns {
display: flex;
align-items: center;
gap: 16px;
}
.insta-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 24px;
}
.insta-head h2 {
font-family: var(--sans);
font-size: 20px;
font-weight: 600;
letter-spacing: 0;
}
.insta-head a {
font-size: 15px;
font-weight: 500;
}
.insta-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
gap: 12px;
}
.insta-grid > div {
position: relative;
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
}
.insta-grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.insta-feed #sb_instagram {
width: 100% !important;
padding: 0 !important;
}
.insta-feed #sb_instagram #sbi_images {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
padding: 0 !important;
float: none !important;
}
.insta-feed #sb_instagram .sbi_item {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
@media (max-width: 900px) {
.insta-feed #sb_instagram #sbi_images {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px) {
.insta-feed #sb_instagram #sbi_images {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
.insta-feed #sb_instagram .sbi_photo_wrap {
position: relative;
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
}
.insta-feed #sb_instagram .sbi_photo {
display: block;
width: 100%;
height: 100% !important;
background-size: cover;
background-position: center;
}
.insta-feed #sb_instagram .sbi_photo img {
width: 100%;
height: 100% !important;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out);
}
.insta-feed #sb_instagram .sbi_photo:hover img {
transform: scale(1.04);
}
#sbi-fr-ce-license-error,
.instagram .sbi_info_wrapper,
.instagram .sbi_link {
display: none !important;
}
.ann-ruler .tick {
position: absolute;
bottom: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.ann-ruler .tick .b {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--pink);
opacity: 0;
transform: translateY(20px) scale(0.4);
transition: opacity 400ms ease, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ann-ruler .tick.ms .b {
width: 18px;
height: 18px;
}
.ann-ruler .tick.on .b {
opacity: 1;
transform: none;
}
.ann-ruler .tick .l {
width: 1px;
height: 18px;
background: var(--on-dark-muted);
}
.ann-ruler .tick.big .l {
height: 34px;
}
.ann-ruler .tick .y {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-3);
}
.ann-ruler .tick.big .y {
color: var(--ink);
}
.ann-ruler .sub {
position: absolute;
bottom: 26px;
width: 1px;
height: 8px;
background: var(--input-border);
}
[data-swap] {
position: relative;
display: inline-block;
font-weight: 600;
color: var(--ink);
}
[data-swap].bad {
color: var(--error);
}
.why-item p {
position: relative;
}
.srv-hero,
.srv-list-hero {
padding-top: clamp(48px, 7vw, 96px);
}
.container.srv-sec,
.container.srv-cta-sec {
margin-top: var(--section);
}
.srv-sec {
display: flex;
flex-direction: column;
gap: clamp(36px, 4vw, 56px);
}
.srv-cta-sec {
scroll-margin-top: 110px;
}
.srv-h1 {
font-size: min(clamp(52px, 8vw, 120px), calc(100cqi / var(--fit, 1)));
line-height: 0.95;
letter-spacing: -0.02em;
}
.srv-h1 .ln {
display: block;
overflow: hidden;
padding-bottom: 0.2em;
margin-bottom: -0.14em;
}
.srv-h1 .ln > span {
display: block;
}
.srv-head {
position: relative;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px 40px;
flex-wrap: wrap;
padding-bottom: clamp(20px, 2.4vw, 32px);
}
.srv-head .h2 {
text-wrap: wrap;
}
.srv-head-note {
max-width: 44ch;
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
.srv-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 40px clamp(24px, 3vw, 40px);
}
.srv-steps li {
display: flex;
flex-direction: column;
gap: 14px;
}
.srv-step-n {
font-family: var(--display);
font-weight: 700;
font-size: clamp(56px, 6vw, 84px);
line-height: 0.9;
color: var(--pink);
letter-spacing: -0.02em;
}
.srv-step-t {
font-family: var(--display);
font-weight: 700;
font-size: 22px;
line-height: 1.15;
}
.srv-step-d {
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 28ch;
}
.srv-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 48px clamp(40px, 6vw, 96px);
}
.srv-hero-copy {
flex: 1 1 560px;
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 24px;
}
.srv-crumbs {
display: flex;
gap: 10px;
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
}
.srv-crumbs a {
color: var(--muted-2);
text-decoration: none;
}
.srv-crumbs a:hover {
color: var(--pink);
}
.srv-lead {
max-width: 50ch;
}
.srv-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
.srv-art {
flex: 0 1 340px;
position: relative;
aspect-ratio: 1;
max-width: 340px;
width: 100%;
}
.srv-art > span {
position: absolute;
border-radius: 50%;
background: var(--pink);
}
.srv-art .srv-art-main {
left: 4%;
top: 30%;
width: 66%;
height: 66%;
background: #fff;
border: 1px solid var(--card-border);
display: flex;
align-items: center;
justify-content: center;
}
.srv-art-main img {
width: 42%;
height: auto;
display: block;
}
.srv-art .srv-art-b1 {
left: 60%;
top: 16%;
width: 26%;
height: 26%;
}
.srv-art .srv-art-b2 {
left: 50%;
top: 0;
width: 14%;
height: 14%;
}
.srv-incl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
}
.srv-incl-item {
display: flex;
flex-direction: column;
gap: 12px;
}
.srv-num {
font-family: var(--mono);
font-size: 12px;
color: var(--pink-text);
}
.srv-incl-item h3 {
font-size: 24px;
line-height: 1.15;
letter-spacing: normal;
}
.srv-incl-item p {
font-size: 16px;
line-height: 1.6;
color: var(--muted);
max-width: 40ch;
text-wrap: pretty;
}
.srv-who {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--gap-cards);
}
.srv-who-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 2.6vw, 36px);
background: #fff;
border: 1px solid var(--card-border);
border-radius: 18px;
}
.srv-mark {
display: flex;
align-items: flex-end;
gap: 3px;
}
.srv-mark span {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--pink);
}
.srv-mark span + span {
width: 7px;
height: 7px;
margin-bottom: 9px;
}
.srv-who-card h3 {
font-size: 21px;
line-height: 1.2;
letter-spacing: normal;
}
.srv-who-card p {
font-size: 15px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.srv-work {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: var(--gap-cards);
}
.srv-work-item {
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
color: var(--ink);
}
.srv-work-item:hover {
color: var(--ink);
}
.srv-work-logo {
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 18px;
transition: border-color 260ms ease, transform 260ms var(--ease-press);
}
.srv-work-logo:hover {
border-color: var(--pink);
}
.srv-work-logo img {
max-width: 62%;
width: auto;
height: auto;
display: block;
}
.srv-work-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.srv-work-name {
font-family: var(--display);
font-weight: 700;
font-size: 20px;
}
.srv-work-cat {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.srv-quote {
margin: 0;
display: flex;
flex-direction: column;
gap: 28px;
padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 96px);
background: var(--ink);
color: var(--bg);
border-radius: 28px;
position: relative;
overflow: hidden;
}
.srv-quote-mark {
font-family: var(--display);
font-weight: 700;
font-size: 120px;
line-height: 0.6;
color: var(--pink);
height: 48px;
}
.srv-quote blockquote {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.18;
letter-spacing: -0.01em;
max-width: 34ch;
text-wrap: pretty;
}
.srv-quote figcaption {
font-size: 16px;
color: var(--on-dark-muted);
}
.srv-tech {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.srv-tech span {
padding: 12px 20px;
border: 1px solid var(--input-border);
border-radius: 999px;
font-size: 15px;
font-weight: 500;
}
.srv-cta {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 32px 48px;
padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 96px);
background: var(--pink);
color: #fff;
border-radius: 28px;
}
.srv-cta-copy {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 620px;
}
.srv-cta-copy p {
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
color: #fff;
text-wrap: pretty;
}
.srv-cta-btn {
flex: none;
padding: 20px 34px;
font-size: 18px;
font-weight: 600;
color: #fff;
}
.srv-cta-btn:hover {
color: #fff;
}
.srv-faq {
display: flex;
flex-direction: column;
max-width: 960px;
}
.srv-faq details {
border-bottom: 1px solid var(--border);
}
.srv-faq summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: clamp(22px, 2.4vw, 30px) 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.3;
}
.srv-faq summary::-webkit-details-marker {
display: none;
}
.srv-faq-plus {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--pink);
font-size: 20px;
font-family: var(--sans);
font-weight: 500;
}
.srv-faq details p {
padding: 0 56px clamp(22px, 2.4vw, 30px) 0;
font-size: 17px;
line-height: 1.65;
color: var(--muted);
max-width: 70ch;
text-wrap: pretty;
}
.srv-list-hero {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 32px 64px;
}
.srv-list-copy {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 820px;
}
.srv-list-h1 {
font-size: clamp(56px, 9vw, 132px);
line-height: 0.95;
letter-spacing: -0.02em;
}
.srv-list-h1 .ln {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
}
.srv-list-h1 .ln > span {
display: block;
}
.srv-list-lead {
max-width: 46ch;
}
.srv-groups-nav {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 15px;
font-weight: 500;
}
.srv-groups-nav a {
display: flex;
gap: 14px;
align-items: baseline;
text-decoration: none;
}
.srv-groups-nav .srv-num,
.srv-row-n {
font-family: var(--mono);
font-size: 12px;
}
.container.srv-group {
margin-top: clamp(96px, 11vw, 150px);
scroll-margin-top: 110px;
}
.srv-row {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(20px, 3vw, 48px);
align-items: start;
padding: clamp(28px, 3.4vw, 48px) 0;
border-bottom: 1px solid var(--border);
}
.srv-bub {
width: clamp(84px, 9vw, 128px);
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
border: 1px solid var(--card-border);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: border-color 420ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease;
}
.srv-bub > span {
display: flex;
}
.srv-bub img {
width: clamp(36px, 3.8vw, 52px);
height: auto;
display: block;
}
.srv-bub-liq {
position: absolute;
inset: 0;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
clip-path: inset(100% 0 0 0);
pointer-events: none;
}
.srv-bub-liq img {
filter: brightness(0) invert(1);
}
.srv-row-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 16px clamp(24px, 4vw, 64px);
}
.srv-row-copy {
display: flex;
flex-direction: column;
gap: 12px;
}
.srv-row-n {
color: var(--muted-2);
}
.srv-row h3 {
font-size: clamp(28px, 3vw, 40px);
line-height: 1.05;
}
.srv-row-copy p {
font-size: 17px;
line-height: 1.6;
color: var(--muted);
max-width: 44ch;
text-wrap: pretty;
}
.srv-more {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 6px;
font-weight: 600;
font-size: 16px;
color: var(--ink);
}
.srv-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
}
.srv-tags li {
padding: 8px 14px;
border-radius: 999px;
background: var(--surface-2);
font-size: 14px;
}
.srv-row-link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: 4px;
}
.srv-steps.srv-steps-list {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(24px, 3vw, 40px);
}
.srv-agency {
background: var(--ink);
color: var(--bg);
border-radius: 28px;
padding: clamp(36px, 5vw, 80px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: 32px clamp(40px, 6vw, 96px);
align-items: end;
}
.srv-agency-copy {
display: flex;
flex-direction: column;
gap: 20px;
}
.srv-agency-copy .mono {
color: var(--on-dark-muted);
}
.srv-agency-copy p {
font-size: 17px;
line-height: 1.6;
color: var(--input-border);
max-width: 44ch;
}
.srv-agency-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-start;
}
@media only screen and (max-width: 767px) {
.srv-faq details p {
padding-right: 0;
}
}
@media only screen and (max-width: 420px) {
.srv-h1 {
font-size: min(clamp(40px, 12vw, 52px), calc(100cqi / var(--fit, 1)));
}
.srv-hero-copy {
min-width: 0;
}
}
.care-top {
padding-top: clamp(48px, 7vw, 96px);
}
.care-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 48px clamp(40px, 6vw, 96px);
}
.care-hero-copy {
flex: 1 1 560px;
display: flex;
flex-direction: column;
gap: 24px;
}
.care-hero-col {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 900px;
}
.care-crumbs {
display: flex;
gap: 10px;
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
}
.care-crumbs a {
color: var(--muted-2);
text-decoration: none;
}
.care-crumbs a:hover {
color: var(--pink);
}
.care-h1 {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(52px, 8vw, 120px);
line-height: 0.95;
letter-spacing: -0.02em;
}
.care-h1-xl {
font-size: clamp(56px, 9vw, 132px);
}
.care-ln {
display: block;
overflow: hidden;
padding-bottom: 0.2em;
margin-bottom: -0.14em;
}
.care-blk {
display: block;
}
.care-lead {
margin: 0;
max-width: 50ch;
}
.care-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
.care-hero-art {
flex: 0 1 340px;
position: relative;
aspect-ratio: 1;
max-width: 340px;
width: 100%;
}
.care-hero-art > span {
position: absolute;
border-radius: 50%;
}
.care-art-main {
left: 4%;
top: 30%;
width: 66%;
height: 66%;
background: #fff;
border: 1px solid var(--card-border);
display: flex;
align-items: center;
justify-content: center;
}
.care-art-main img {
width: 42%;
height: auto;
display: block;
}
.care-art-b1 {
left: 60%;
top: 16%;
width: 26%;
height: 26%;
background: var(--pink);
}
.care-art-b2 {
left: 50%;
top: 0;
width: 14%;
height: 14%;
background: var(--pink);
}
.care-sec {
margin-top: var(--section);
display: flex;
flex-direction: column;
gap: clamp(36px, 4vw, 56px);
scroll-margin-top: 110px;
}
.care-sec-b {
margin-top: var(--section);
}
.care-sec-b.lg {
margin-top: clamp(96px, 11vw, 150px);
}
.care-head {
position: relative;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px 40px;
flex-wrap: wrap;
padding-bottom: clamp(20px, 2.4vw, 32px);
}
.care-head-b {
position: relative;
padding-bottom: clamp(20px, 2.4vw, 32px);
}
.care-head .h2,
.care-head-b .h2,
.care-dark .h2,
.care-sec > .h2 {
text-wrap: wrap;
}
.care-head-note {
margin: 0;
max-width: 44ch;
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
.care-num {
font-family: var(--mono);
font-size: 12px;
color: var(--pink-text);
}
.care-billing {
align-self: flex-start;
position: relative;
display: flex;
padding: 5px;
border-radius: 999px;
background: var(--surface-2);
}
.care-bill-pill {
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
border-radius: 999px;
background: var(--ink);
transition: transform 500ms var(--ease-spring), width 300ms ease;
}
.care-bill-btn {
position: relative;
height: 46px;
padding: 0 24px;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--ink);
transition: color 300ms ease;
}
.care-bill-btn.active {
color: #fff;
}
.care-bill-y {
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px 0 24px;
}
.care-save-tag {
padding: 4px 10px;
border-radius: 999px;
background: var(--pink);
color: #fff;
font-size: 12px;
font-weight: 600;
}
.care-plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--gap-cards);
align-items: stretch;
}
.care-plan {
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
border-radius: 24px;
background: #fff;
border: 1px solid var(--card-border);
}
.care-plan.is-pink {
background: var(--pink);
border: 0;
color: #fff;
}
.care-plan-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
min-height: 28px;
}
.care-plan-name {
font-family: var(--display);
font-weight: 700;
font-size: 30px;
line-height: 1;
}
.care-badge {
padding: 6px 12px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-family: var(--mono);
font-size: 11px;
}
.care-plan-for {
font-size: 15px;
line-height: 1.5;
color: var(--muted);
min-height: 2.9em;
text-wrap: pretty;
}
.care-price {
display: flex;
flex-direction: column;
gap: 8px;
}
.care-price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 8px;
white-space: nowrap;
}
.care-price-num {
font-family: var(--display);
font-weight: 700;
font-size: clamp(44px, 4.4vw, 60px);
line-height: 1;
letter-spacing: -0.02em;
}
.care-per {
font-size: 15px;
color: var(--muted);
}
.care-year {
display: flex;
flex-direction: column;
min-height: 36px;
font-size: 13px;
line-height: 18px;
white-space: nowrap;
color: var(--muted);
}
.care-year .save {
font-weight: 600;
}
.care-checks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 16px;
line-height: 1.45;
}
.care-checks li {
display: flex;
gap: 12px;
}
.care-check {
flex: none;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 50%;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
}
.care-check.lo {
margin-top: 2px;
}
details[data-exp] {
interpolate-size: allow-keywords;
}
details[data-exp]::details-content {
block-size: 0;
overflow: hidden;
opacity: 0;
transition: block-size 520ms var(--ease-out), opacity 320ms ease, content-visibility 520ms allow-discrete;
}
details[data-exp][open]::details-content {
block-size: auto;
opacity: 1;
}
details[data-exp] > summary::-webkit-details-marker {
display: none;
}
details[data-exp][open] > summary [data-plus] {
transform: rotate(45deg);
}
.care-more {
border-top: 1px solid var(--border);
}
.care-more > summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 0 4px;
font-size: 15px;
font-weight: 600;
}
.care-plus {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--surface-2);
color: var(--pink);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 500;
transition: transform 400ms var(--ease-spring);
}
.care-more ul {
list-style: none;
margin: 0;
padding: 16px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 15px;
line-height: 1.45;
}
.care-more li {
display: flex;
gap: 10px;
}
.care-more strong {
font-weight: 600;
}
.care-bullet {
flex: none;
width: 6px;
height: 6px;
margin-top: 8px;
border-radius: 50%;
background: var(--pink);
}
.care-plan-cta {
margin-top: auto;
display: flex;
justify-content: center;
padding: 17px 28px;
font-size: 16px;
font-weight: 600;
}
.care-plan-cta.is-ink,
.care-plan-cta.is-ink:hover {
background: var(--ink);
color: #fff;
}
.is-pink .care-plan-for,
.is-pink .care-per,
.is-pink .care-year,
.is-pink .mono {
color: #fff;
}
.is-pink .care-check,
.is-pink .care-bullet {
background: #fff;
}
.is-pink .care-more {
border-top-color: rgba(255, 255, 255, 0.35);
}
.is-pink .care-plus {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.care-compare-btn {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 14px;
height: 58px;
padding: 0 10px 0 26px;
border: 0;
border-radius: 999px;
background: var(--surface-2);
font: inherit;
font-size: 16px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: background-color 200ms ease, transform 140ms var(--ease-press);
}
.care-compare-btn:hover {
background: var(--border);
}
.care-compare-btn:active {
transform: scale(0.97);
}
.care-compare-ic {
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--ink);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.care-compare-src {
display: none;
}
.care-cmp-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 28px calc(-1 * var(--gutter)) 0;
padding: 0 var(--gutter);
}
.care-cmp {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(170px, 1fr));
min-width: 700px;
}
.care-cmp-col {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px 20px 24px;
}
.care-cmp-col.is-pink {
background: var(--pink);
color: #fff;
border-radius: 20px 20px 0 0;
}
.care-tag {
display: block;
height: 18px;
line-height: 18px;
overflow: hidden;
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.is-pink .care-tag {
color: #fff;
}
.care-cmp-name {
font-family: var(--display);
font-weight: 700;
font-size: 26px;
line-height: 1;
}
.care-cmp-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
white-space: nowrap;
}
.care-cmp-num {
font-family: var(--display);
font-weight: 700;
font-size: clamp(30px, 3vw, 44px);
line-height: 1;
letter-spacing: -0.02em;
}
.care-cmp-per {
font-size: 14px;
color: var(--muted);
}
.is-pink .care-cmp-per {
color: #fff;
}
.care-cmp-cta {
margin-top: auto;
display: flex;
justify-content: center;
text-decoration: none;
padding: 13px 18px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
background: var(--surface-2);
color: var(--ink);
transition: transform 140ms var(--ease-press);
}
.care-cmp-cta:hover {
color: var(--ink);
}
.care-cmp-cta.is-ink,
.care-cmp-cta.is-ink:hover {
background: var(--ink);
color: #fff;
}
.care-cmp-cta:active {
transform: scale(0.97);
}
.care-cmp-label {
padding: 16px 20px 16px 0;
border-top: 1px solid var(--border);
font-size: 16px;
line-height: 1.4;
}
.care-cmp-cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px 8px;
border-top: 1px solid var(--border);
}
.care-cmp-cell.hl {
border-top-color: var(--pink-tint-border);
background: var(--pink-tint);
}
.care-cmp-cell.txt {
font-size: 14px;
line-height: 1.35;
font-weight: 500;
color: var(--muted);
}
.care-cmp-cell.max {
font-weight: 700;
color: var(--pink);
}
.care-yes {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
}
.care-no {
width: 14px;
height: 2px;
border-radius: 2px;
background: var(--input-border-2);
}
.care-cmp-end {
height: 20px;
border-top: 1px solid var(--border);
}
.care-cmp-end.hl {
border-top-color: var(--pink-tint-border);
background: var(--pink-tint);
border-radius: 0 0 20px 20px;
}
.care-fx {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 10001;
overflow: visible;
}
.care-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
}
.care-modal-bd {
position: absolute;
inset: 0;
background: rgba(31, 30, 27, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.care-modal-pn {
position: relative;
margin: clamp(8px, 2vw, 24px);
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--bg);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(31, 30, 27, 0.35);
}
.care-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px clamp(20px, 4vw, 56px);
border-bottom: 1px solid var(--border);
}
.care-modal-head h2 {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(24px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ink);
}
.care-modal-x {
flex: none;
width: 48px;
height: 48px;
border-radius: 50%;
border: 0;
background: var(--ink);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 160ms var(--ease-press);
}
.care-modal-body {
flex: 1;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 8px clamp(20px, 4vw, 56px) 40px;
}
.care-notes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 24px clamp(32px, 5vw, 80px);
align-items: start;
}
.care-excl {
display: flex;
flex-direction: column;
gap: 16px;
padding: clamp(22px, 2.6vw, 32px);
border-radius: 22px;
background: var(--surface-2);
}
.care-excl-title {
font-family: var(--display);
font-weight: 700;
font-size: 20px;
line-height: 1.2;
}
.care-chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.care-chips li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--card-border);
font-size: 15px;
font-weight: 500;
color: var(--ink);
}
.care-chip-x {
flex: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted-3);
}
.care-terms {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
column-gap: 32px;
}
.care-terms > div {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 0;
border-top: 1px solid var(--border);
}
.care-terms dt {
font-family: var(--mono);
font-size: 12px;
font-weight: 400;
color: var(--muted-3);
}
.care-terms dd {
margin: 0;
font-size: 16px;
line-height: 1.45;
color: var(--ink);
}
.care-custom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 40px;
padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
border: 1px solid var(--card-border);
border-radius: 22px;
background: #fff;
}
.care-custom-l {
display: flex;
align-items: center;
gap: 20px;
}
.care-mini-bub {
position: relative;
flex: none;
width: 44px;
height: 44px;
}
.care-mini-bub span {
position: absolute;
border-radius: 50%;
background: var(--pink);
}
.care-mini-bub span:nth-child(1) {
left: 0;
bottom: 0;
width: 30px;
height: 30px;
}
.care-mini-bub span:nth-child(2) {
left: 28px;
top: 8px;
width: 13px;
height: 13px;
}
.care-mini-bub span:nth-child(3) {
left: 22px;
top: 0;
width: 7px;
height: 7px;
}
.care-custom-txt {
display: flex;
flex-direction: column;
gap: 6px;
}
.care-custom-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.15;
}
.care-custom-desc {
font-size: 16px;
line-height: 1.5;
color: var(--muted);
max-width: 52ch;
text-wrap: pretty;
}
.care-custom-cta,
.care-custom-cta:hover {
flex: none;
padding: 16px 28px;
font-size: 16px;
font-weight: 600;
background: var(--ink);
color: #fff;
}
.care-audit-note {
margin: 0;
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
.care-audit-note a {
color: var(--ink);
font-weight: 600;
text-underline-offset: 4px;
}
.care-audit-note a:hover {
color: var(--pink);
}
.care-inc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--gap-list) clamp(24px, 4vw, 64px);
}
.care-inc {
display: flex;
flex-direction: column;
gap: 12px;
}
.care-inc-title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 24px;
line-height: 1.15;
}
.care-inc-text {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: var(--muted);
max-width: 40ch;
text-wrap: pretty;
}
.care-who-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--gap-cards);
}
.care-who {
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 2.6vw, 36px);
background: #fff;
border: 1px solid var(--card-border);
border-radius: 18px;
}
.care-who-ic {
display: flex;
align-items: flex-end;
gap: 3px;
}
.care-who-ic span {
border-radius: 50%;
background: var(--pink);
}
.care-who-ic span:nth-child(1) {
width: 12px;
height: 12px;
}
.care-who-ic span:nth-child(2) {
width: 7px;
height: 7px;
margin-bottom: 9px;
}
.care-who-title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 21px;
line-height: 1.2;
}
.care-who-text {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.care-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 40px clamp(24px, 3vw, 40px);
}
.care-steps-b {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(24px, 3vw, 40px);
}
.care-step {
display: flex;
flex-direction: column;
gap: 14px;
}
.care-step-num {
font-family: var(--display);
font-weight: 700;
font-size: clamp(56px, 6vw, 84px);
line-height: 0.9;
color: var(--pink);
letter-spacing: -0.02em;
}
.care-step-title {
font-family: var(--display);
font-weight: 700;
font-size: 22px;
line-height: 1.15;
}
.care-step-text {
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 28ch;
}
.care-work-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: var(--gap-cards);
}
.care-work {
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
color: var(--ink);
}
.care-work:hover {
color: var(--ink);
}
.care-work-logo {
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 18px;
transition: border-color 260ms ease, transform 260ms var(--ease-press);
}
.care-work-logo:hover {
border-color: var(--pink);
}
.care-work-logo img {
max-width: 62%;
width: auto;
height: auto;
display: block;
}
.care-work-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.care-work-name {
font-family: var(--display);
font-weight: 700;
font-size: 20px;
}
.care-quote {
margin: 0;
display: flex;
flex-direction: column;
gap: 28px;
padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 96px);
background: var(--ink);
color: var(--bg);
border-radius: 28px;
position: relative;
overflow: hidden;
}
.care-quote-mark {
font-family: var(--display);
font-weight: 700;
font-size: 120px;
line-height: 0.6;
color: var(--pink);
height: 48px;
}
.care-quote blockquote {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.18;
letter-spacing: -0.01em;
max-width: 34ch;
text-wrap: pretty;
}
.care-quote figcaption {
font-size: 16px;
color: var(--on-dark-muted);
}
.care-faq {
display: flex;
flex-direction: column;
max-width: 960px;
}
.care-faq details {
border-bottom: 1px solid var(--border);
}
.care-faq summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: clamp(22px, 2.4vw, 30px) 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.3;
}
.care-faq summary::-webkit-details-marker {
display: none;
}
.care-faq-plus {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--pink);
font-size: 20px;
font-family: var(--sans);
font-weight: 500;
}
.care-faq p {
margin: 0;
padding: 0 56px clamp(22px, 2.4vw, 30px) 0;
font-size: 17px;
line-height: 1.65;
color: var(--muted);
max-width: 70ch;
text-wrap: pretty;
}
.care-audit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: var(--gap-cards);
max-width: 1000px;
}
.care-acard {
display: flex;
flex-direction: column;
gap: 22px;
padding: clamp(28px, 3.4vw, 44px);
border-radius: 24px;
background: #fff;
border: 1px solid var(--card-border);
}
.care-acard.is-pink {
background: var(--pink);
border: 0;
color: #fff;
}
.care-acard-title {
font-family: var(--display);
font-weight: 700;
font-size: 28px;
line-height: 1.1;
}
.care-acard-price {
display: flex;
align-items: baseline;
gap: 10px;
}
.care-acard-num {
font-family: var(--display);
font-weight: 700;
font-size: clamp(48px, 5vw, 68px);
line-height: 1;
letter-spacing: -0.02em;
}
.care-fine {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
font-size: 14px;
color: var(--muted-2);
}
.care-svc {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 12px clamp(24px, 4vw, 64px);
padding: clamp(24px, 3vw, 40px) 0;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.care-svc-h {
display: flex;
gap: 20px;
align-items: baseline;
}
.care-svc-title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.1;
letter-spacing: -0.01em;
}
.care-svc-text {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: var(--muted);
max-width: 48ch;
text-wrap: pretty;
}
.care-dark {
background: var(--ink);
color: var(--bg);
border-radius: 28px;
padding: clamp(36px, 5vw, 80px);
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 56px);
}
.care-dark-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 32px clamp(28px, 4vw, 56px);
}
.care-dark-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--pink);
}
.care-dark-title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 22px;
line-height: 1.2;
}
.care-dark-text {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: var(--input-border);
}
@media only screen and (max-width: 991px) {
.care-hero-art {
max-width: 280px;
}
}
@media only screen and (max-width: 767px) {
.care-hero-art {
flex-basis: 200px;
max-width: 220px;
}
.care-custom-l {
align-items: flex-start;
}
.care-custom-cta {
width: 100%;
justify-content: center;
}
.care-faq p {
padding-right: 0;
}
.care-modal-pn {
border-radius: 22px;
}
}
@media only screen and (max-width: 420px) {
.care-h1 {
font-size: 46px;
}
.care-h1-xl {
font-size: 52px;
}
.care-bill-btn {
padding: 0 18px;
}
.care-bill-y {
padding: 0 12px 0 18px;
}
.care-plan-cta,
.btn {
max-width: 100%;
}
}
.proj-main {
padding-top: clamp(48px, 7vw, 96px);
}
.cs-main {
padding-top: clamp(40px, 6vw, 80px);
}
.about-main {
padding-top: clamp(32px, 5vw, 72px);
}
.page-h1 {
font-size: clamp(52px, 8.4vw, 124px);
line-height: 0.95;
letter-spacing: -0.02em;
}
.page-h1.xl {
font-size: clamp(56px, 9vw, 132px);
}
.page-h1 .ln {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
}
.page-h1 .ln > span {
display: block;
}
.browser-bar.lg {
height: 38px;
padding: 0 16px;
}
.browser-bar.lg > i {
width: 10px;
height: 10px;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: clamp(20px, 2.4vw, 36px);
}
.stat-grid.sm {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 24px;
}
.stat .v {
font-family: var(--display);
font-weight: 700;
font-size: clamp(56px, 6vw, 88px);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--pink);
}
.stat .l {
max-width: 26ch;
font-size: 16px;
line-height: 1.5;
color: var(--muted);
}
.stat-grid.sm .stat .l {
max-width: 24ch;
}
.proj-intro {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 32px 64px;
}
.proj-intro-copy {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 760px;
}
.proj-lead {
max-width: 48ch;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.proj-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.proj-filter {
height: 40px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid var(--input-border);
background: transparent;
color: var(--ink);
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-press);
}
.proj-filter:active {
transform: scale(0.96);
}
.proj-filter.active {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
.proj-filter .n {
font-family: var(--mono);
font-size: 11px;
opacity: 0.7;
}
.proj-grid {
margin-top: clamp(48px, 6vw, 80px);
display: flex;
flex-direction: column;
gap: clamp(64px, 8vw, 120px);
}
.proj-card {
display: grid;
grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
align-items: center;
gap: clamp(28px, 4.5vw, 72px);
}
.proj-card:nth-child(even of .proj-card:not([hidden])) {
grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
}
.proj-card:nth-child(even of .proj-card:not([hidden])) .proj-shot {
order: 2;
}
.proj-card.is-more {
display: none;
}
.proj-shot {
display: block;
text-decoration: none;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 2px rgba(31, 30, 27, 0.06), 0 24px 48px -24px rgba(31, 30, 27, 0.22);
transition: transform 500ms var(--ease-out), box-shadow 500ms ease;
}
.proj-shot:hover {
transform: translateY(-6px);
box-shadow: 0 1px 2px rgba(31, 30, 27, 0.06), 0 36px 64px -28px rgba(31, 30, 27, 0.32);
}
.proj-shot .browser-site {
flex: none;
aspect-ratio: 16 / 10;
}
.proj-shot.is-art {
background: var(--bg);
box-shadow: 0 0 0 1px var(--card-border), 0 24px 48px -24px rgba(31, 30, 27, 0.18);
}
.proj-shot.is-art:hover {
box-shadow: 0 0 0 1px var(--border), 0 36px 64px -28px rgba(31, 30, 27, 0.28);
}
.proj-shot.is-art img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.proj-shot.is-soon,
.proj-shot.is-soon:hover {
transform: none;
background: var(--surface-2);
box-shadow: 0 0 0 1px var(--card-border), 0 24px 48px -24px rgba(31, 30, 27, 0.18);
}
.proj-soon {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, var(--surface-2), var(--pink-tint));
}
.browser.is-soon .proj-soon {
flex: 1;
aspect-ratio: auto;
}
.proj-soon::before {
content: "";
position: absolute;
inset: -40px;
background: var(--soon-img, none) center / cover no-repeat;
filter: blur(26px) saturate(1.15);
transform: scale(1.1);
}
.proj-soon::after {
content: "";
position: absolute;
inset: 0;
background: rgba(247, 246, 243, 0.28);
}
.proj-soon-badge {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.proj-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.proj-logo {
display: block;
width: auto;
height: 34px;
max-width: 190px;
object-fit: contain;
object-position: left center;
}
.proj-desc {
margin: 0;
max-width: 42ch;
font-size: 17px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.proj-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.proj-tags a,
.proj-tags span {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
border: 1px solid var(--input-border);
border-radius: 999px;
font-size: 14px;
color: var(--ink);
text-decoration: none;
transition: border-color 200ms ease, background-color 200ms ease;
}
.proj-tags a:hover {
border-color: var(--ink);
color: var(--ink);
}
.proj-more-wrap {
display: flex;
justify-content: center;
margin-top: clamp(56px, 7vw, 96px);
}
.proj-more {
height: 52px;
padding: 0 28px;
border-radius: 999px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-press);
}
.proj-more:hover {
background: var(--ink);
color: var(--bg);
}
.proj-more:active {
transform: scale(0.97);
}
.proj-more[hidden] {
display: none;
}
.proj-more .n {
font-family: var(--mono);
font-size: 12px;
opacity: 0.7;
}
@media only screen and (max-width: 860px) {
.proj-card,
.proj-card:nth-child(even of .proj-card:not([hidden])) {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
.proj-card:nth-child(even of .proj-card:not([hidden])) .proj-shot {
order: 0;
}
}
.proj-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.proj-name {
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.05;
}
.proj-name a,
.proj-name a:hover {
text-decoration: none;
color: inherit;
}
.proj-type {
font-size: 15px;
color: var(--muted);
}
.proj-links {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.btn-case {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px;
border-radius: 999px;
background: var(--pink);
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: transform 140ms var(--ease-press);
}
.btn-case:hover {
color: #fff;
}
.btn-case:active {
transform: scale(0.97);
}
.proj-host,
.proj-host:hover {
font-family: var(--mono);
font-size: 13px;
color: var(--muted);
}
.cs-back,
.cs-back:hover {
display: inline-flex;
gap: 8px;
align-items: center;
font-size: 15px;
font-weight: 500;
text-decoration: none;
color: var(--muted);
}
.cs-hero {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 56px);
}
.cs-hero-copy {
display: flex;
flex-direction: column;
gap: 20px;
}
.cs-brand {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.cs-brand img {
height: clamp(36px, 3.4vw, 48px);
width: auto;
display: block;
}
.cs-brand .sep {
width: 1px;
height: 28px;
background: var(--input-border);
}
.cs-brand .lbl {
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
letter-spacing: 0.02em;
}
.cs-lead {
max-width: 44ch;
font-size: clamp(19px, 1.7vw, 24px);
line-height: 1.45;
color: var(--ink);
text-wrap: pretty;
}
.cs-facts {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
padding: 24px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.cs-facts > div {
display: flex;
flex-direction: column;
gap: 6px;
}
.cs-facts dt {
font-family: var(--mono);
font-size: 12px;
font-weight: 400;
color: var(--muted-2);
}
.cs-facts dd {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.cs-preview {
margin-top: clamp(40px, 5vw, 72px);
}
.cs-browser {
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 2px rgba(31, 30, 27, 0.06), 0 40px 80px -32px rgba(31, 30, 27, 0.3);
}
.cs-shot,
.cs-phone-screen {
position: relative;
overflow: hidden;
background: #fff;
}
.cs-shot {
aspect-ratio: 16 / 9;
background: #f2f1ed;
}
.cs-shot.white {
background: #fff;
}
.cs-shot img,
.cs-phone-screen img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
display: block;
will-change: transform;
}
.cs-story {
margin-top: clamp(96px, 11vw, 150px);
display: flex;
flex-direction: column;
gap: clamp(72px, 8vw, 120px);
}
.cs-chapter {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 24px clamp(40px, 6vw, 96px);
align-items: start;
}
.cs-ch-head {
display: flex;
gap: 16px;
align-items: baseline;
}
.cs-ch-head .n {
font-family: var(--mono);
font-size: 13px;
color: var(--pink);
}
.cs-ch-head h2 {
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.05;
}
.cs-chapter > p {
max-width: 56ch;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.65;
color: var(--muted);
text-wrap: pretty;
}
.cs-screens {
margin-top: clamp(72px, 8vw, 120px);
display: flex;
flex-direction: column;
gap: clamp(72px, 8vw, 120px);
}
.cs-fig {
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.cs-fig figcaption,
.cs-phone-fig figcaption {
font-size: 14px;
color: var(--muted);
}
.cs-phones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: clamp(24px, 4vw, 64px);
align-items: start;
}
.cs-phone-fig {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.cs-phone-fig.offset {
padding-top: clamp(0px, 6vw, 96px);
}
.cs-phone {
width: 100%;
max-width: 300px;
padding: 10px;
border-radius: 44px;
background: var(--ink);
box-shadow: 0 1px 2px rgba(31, 30, 27, 0.1), 0 40px 70px -30px rgba(31, 30, 27, 0.45);
}
.cs-phone-screen {
aspect-ratio: 9 / 19.5;
border-radius: 34px;
}
.cs-phone-screen .notch {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 24px;
border-radius: 999px;
background: var(--ink);
}
.cs-results {
margin-top: clamp(96px, 11vw, 150px);
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 56px);
}
.cs-quote {
margin-top: clamp(96px, 11vw, 150px);
}
.cs-quote figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.cs-quote blockquote {
margin: 0;
max-width: 26ch;
font-family: var(--display);
font-size: clamp(30px, 3.8vw, 52px);
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: pretty;
}
.cs-quote figcaption {
font-size: 16px;
color: var(--muted);
}
.cs-next-sec {
margin-top: var(--section);
}
.cs-next,
.cs-next:hover {
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: var(--ink);
padding: clamp(32px, 4vw, 56px) 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.cs-next .lbl {
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
}
.cs-next .next-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.cs-next .name {
font-family: var(--display);
font-weight: 700;
font-size: clamp(44px, 7vw, 104px);
line-height: 0.95;
letter-spacing: -0.02em;
}
.cs-next .arr {
font-size: clamp(36px, 4vw, 56px);
line-height: 1;
color: var(--pink);
transition: transform 500ms var(--ease-out);
}
.about-hero {
display: flex;
flex-direction: column;
gap: clamp(20px, 3vw, 32px);
max-width: 1000px;
}
.about-lead {
max-width: 52ch;
font-size: clamp(19px, 1.7vw, 24px);
line-height: 1.55;
text-wrap: pretty;
}
.about-sub {
max-width: 58ch;
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.journey {
position: relative;
height: calc(100vh + (var(--stops, 8) - 0.65) * 26vh);
margin-top: var(--section);
}
.jr-stage {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(20px, 3.5vh, 40px);
padding-top: var(--navh, 86px);
}
.jr-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(24px, 4vw, 64px);
align-items: center;
}
.jr-copy {
display: flex;
flex-direction: column;
gap: clamp(16px, 2.4vh, 28px);
}
.jr-year {
font-family: var(--display);
font-weight: 700;
font-size: clamp(72px, 9vw, 136px);
line-height: 0.86;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.jr-year span {
display: inline-block;
color: var(--pink);
}
.jr-ms {
position: relative;
min-height: 7.5em;
}
.jr-item {
position: absolute;
left: 0;
top: 0;
max-width: 40ch;
opacity: 0;
transform: translateY(12px);
transition: opacity 400ms ease, transform 600ms var(--ease-out);
}
.jr-item.on {
opacity: 1;
transform: none;
}
.jr-item h3 {
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.15;
margin-bottom: 8px;
}
.jr-item p {
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.55;
color: var(--muted);
text-wrap: pretty;
}
.jr-photos {
position: relative;
aspect-ratio: 16 / 10;
max-height: 48vh;
width: 100%;
justify-self: end;
border-radius: 18px;
overflow: hidden;
background: var(--surface-2);
}
.jr-photo {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.04);
transition: opacity 600ms ease, transform 1200ms var(--ease-out);
}
.jr-photo.on {
opacity: 1;
transform: none;
}
.jr-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.journey + .poem-row {
margin-top: 16px;
}
@media only screen and (max-width: 767px) {
.jr-row {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.jr-photos {
order: -1;
max-height: 30vh;
justify-self: stretch;
}
.jr-year {
font-size: clamp(56px, 18vw, 80px);
}
.jr-ms {
min-height: 8.5em;
}
}
.about-team,
.about-values {
margin-top: var(--section);
display: flex;
flex-direction: column;
gap: clamp(36px, 4vw, 56px);
}
.about-num,
.about-wishes {
margin-top: var(--section);
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 56px);
}
.about-sec-head {
position: relative;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px 40px;
flex-wrap: wrap;
padding-bottom: clamp(20px, 2.4vw, 32px);
}
.about-sec-head .h2 {
text-wrap: wrap;
}
.about-sec-head p {
max-width: 44ch;
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
.poem-row {
display: flex;
justify-content: flex-end;
margin-top: calc(-1 * clamp(16px, 2vw, 28px));
}
.poem-btn {
display: flex;
align-items: center;
gap: 12px;
border: 0;
background: none;
padding: 8px 4px;
cursor: pointer;
font-family: var(--mono);
font-size: 16px;
color: var(--muted-3);
transition: color 220ms ease;
}
.poem-btn:hover {
color: var(--pink);
}
.poem-dots {
display: flex;
align-items: flex-end;
gap: 2px;
}
.poem-dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--pink);
}
.poem-dots span + span {
width: 5px;
height: 5px;
margin-bottom: 7px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: clamp(24px, 3vw, 48px);
}
.team-card {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
.team-img {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 28px;
overflow: hidden;
background: var(--surface-2);
}
.team-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--ease-out);
}
.team-card:hover .team-img img {
transform: scale(1.04);
}
.team-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.team-body h3 {
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.05;
letter-spacing: normal;
}
.team-body .role {
font-family: var(--mono);
font-size: 13px;
color: var(--pink-text);
}
.team-body p {
margin-top: 6px;
max-width: 40ch;
font-size: 16px;
line-height: 1.6;
color: var(--muted);
}
.btn-drawer {
position: relative;
overflow: hidden;
isolation: isolate;
align-self: flex-start;
margin-top: 10px;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
height: 46px;
padding: 0 20px;
border-radius: 999px;
background: var(--surface-2);
color: var(--ink);
font-size: 15px;
font-weight: 600;
transition: transform 140ms var(--ease-press), color 220ms ease;
}
.btn-drawer:active {
transform: scale(0.97);
}
a.btn-drawer {
text-decoration: none;
}
a.btn-drawer:hover {
color: var(--ink);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: clamp(32px, 4vw, 64px) clamp(32px, 5vw, 80px);
}
.value {
position: relative;
padding: clamp(40px, 5vw, 72px) 0 0 clamp(40px, 5vw, 72px);
}
.value .num {
position: absolute;
left: 0;
top: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(120px, 14vw, 200px);
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 2px var(--pink);
opacity: 0.35;
}
.value h3 {
position: relative;
margin: 0 0 12px;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.1;
letter-spacing: normal;
}
.value p {
position: relative;
max-width: 42ch;
font-size: 17px;
line-height: 1.6;
color: var(--muted);
}
.wish-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: clamp(20px, 2.4vw, 32px);
}
.wish {
margin: 0;
padding: clamp(24px, 3vw, 36px);
border-radius: 24px;
background: #fff;
border: 1px solid var(--card-border);
display: flex;
flex-direction: column;
gap: 20px;
}
.wish blockquote {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.35;
}
.wish figcaption {
font-size: 14px;
color: var(--muted);
}
.drawer {
position: fixed;
inset: 0;
z-index: 70;
visibility: hidden;
pointer-events: none;
}
.drawer-bg {
position: absolute;
inset: 0;
background: rgba(31, 30, 27, 0.45);
opacity: 0;
transition: opacity 400ms ease;
}
.drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(100%, 980px);
background: var(--bg);
overflow-y: auto;
transform: translateX(100%);
transition: transform 700ms var(--ease-out);
box-shadow: -30px 0 80px -30px rgba(31, 30, 27, 0.5);
}
.drawer-top {
position: sticky;
top: 0;
z-index: 2;
display: flex;
justify-content: flex-end;
padding: 20px 24px;
background: linear-gradient(#f7f6f3 60%, rgba(247, 246, 243, 0));
}
.drawer-close {
width: 48px;
height: 48px;
border-radius: 50%;
border: 0;
background: var(--ink);
color: var(--bg);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background-color 200ms ease, transform 140ms var(--ease-press);
}
.drawer-close:hover {
background: var(--pink);
}
.drawer-close:active {
transform: scale(0.94);
}
.drawer-body {
padding: 0 clamp(24px, 5vw, 64px) clamp(48px, 6vw, 80px);
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 40px);
}
.drawer-body h2 {
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: -0.02em;
}
.drawer-lead {
max-width: 60ch;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.6;
text-wrap: pretty;
}
.drawer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 40px clamp(32px, 4vw, 64px);
align-items: start;
}
.drawer-text {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 62ch;
}
.drawer-text p {
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.7;
color: var(--ink);
text-wrap: pretty;
}
.drawer-fig {
margin: 0;
position: relative;
max-width: 520px;
width: 100%;
justify-self: end;
}
.drawer-fig img {
display: block;
width: 100%;
height: auto;
border-radius: 28px;
}
.drawer-mark {
position: absolute;
right: -18px;
top: -18px;
display: flex;
}
.ct-main {
padding-top: clamp(48px, 7vw, 96px);
}
.ct-intro {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 900px;
}
.ct-h1,
.blog-h1 {
font-size: clamp(56px, 9vw, 132px);
line-height: 0.95;
letter-spacing: -0.02em;
}
.ct-h1 .ln,
.blog-h1 .ln {
display: block;
overflow: hidden;
padding-bottom: 0.06em;
}
.ct-h1 .ln > span,
.blog-h1 .ln > span {
display: block;
}
.ct-lead {
max-width: 46ch;
}
.ct-brief {
scroll-margin-top: 110px;
margin-top: clamp(56px, 7vw, 96px);
display: flex;
flex-wrap: wrap;
gap: clamp(48px, 6vw, 96px);
align-items: flex-start;
}
.ct-card {
flex: 2 1 560px;
min-width: 0;
padding: clamp(24px, 3.4vw, 48px);
background: #fff;
border: 1px solid var(--card-border);
border-radius: 28px;
}
.ct-quote {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px 28px;
padding: clamp(20px, 2.4vw, 28px);
margin-bottom: clamp(28px, 3vw, 40px);
background: var(--pink-tint);
border: 1px solid var(--pink-tint-border);
border-radius: 18px;
}
.ct-quote-copy {
flex: 1 1 260px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ct-quote-copy h2 {
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.15;
}
.ct-quote-copy p {
font-size: 15px;
line-height: 1.5;
color: var(--muted);
}
.ct-quote-btn {
flex: none;
}
.ct-quote-btn span {
display: inline-block;
transition: transform 450ms var(--ease-out);
}
.ct-quote-btn:hover span {
transform: translateX(4px);
}
.ct-form-title {
font-size: 22px;
line-height: 1.2;
}
.ct-form {
display: flex;
flex-direction: column;
gap: 32px;
}
.ct-set {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.ct-set legend {
float: none;
width: auto;
padding: 0;
margin-bottom: 14px;
font-family: var(--display);
font-weight: 700;
font-size: 22px;
line-height: normal;
}
.ct-set legend .ct-opt {
font-family: var(--sans);
font-weight: 400;
font-size: 15px;
color: var(--muted-2);
}
.ct-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ct-chip {
height: 44px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid var(--input-border);
background: transparent;
color: var(--ink);
font: inherit;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-press);
}
.ct-chip:active {
transform: scale(0.96);
}
.ct-chip[aria-pressed="true"] {
background: var(--ink);
border-color: var(--ink);
color: var(--bg);
}
.ct-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
gap: 18px;
}
.ct-field {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
font-size: 14px;
font-weight: 500;
}
.ct-field input,
.ct-field textarea {
width: 100%;
height: 56px;
padding: 0 18px;
border: 1px solid var(--input-border);
border-radius: 14px;
background: #fff;
font: inherit;
font-size: 16px;
font-weight: 400;
color: var(--ink);
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ct-field textarea {
display: block;
height: auto;
min-height: 150px;
padding: 16px 18px;
resize: vertical;
line-height: 1.55;
}
.ct-field input:focus,
.ct-field textarea:focus {
border-color: var(--pink);
box-shadow: 0 0 0 4px rgba(240, 20, 90, 0.12);
}
.ct-error {
font-size: 15px;
color: var(--error);
}
.ct-submit {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px 24px;
flex-wrap: wrap;
}
.ct-consent {
flex: 1 1 300px;
max-width: 52ch;
}
.ct-consent .cs-terms-row > span {
font-size: 13px;
}
.ct-note {
max-width: 44ch;
font-size: 13px;
line-height: 1.5;
color: var(--muted-2);
}
.ct-note a,
.ct-note a:hover {
color: var(--muted-2);
}
.ct-send {
padding: 18px 34px;
gap: 10px;
}
.ct-done {
min-height: 420px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 20px;
}
.ct-form[hidden],
.ct-done[hidden] {
display: none;
}
.ct-ok {
width: 88px;
height: 88px;
border-radius: 50%;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
}
.ct-done h2 {
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.05;
}
.ct-done p {
max-width: 42ch;
font-size: 18px;
line-height: 1.6;
color: var(--muted);
}
.ct-reset {
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 15px;
font-weight: 500;
color: var(--ink);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.ct-aside {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 40px;
}
.ct-label {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.ct-direct {
display: flex;
flex-direction: column;
gap: 14px;
}
.ct-direct a {
font-family: var(--display);
font-weight: 700;
font-size: clamp(26px, 2.6vw, 34px);
letter-spacing: -0.01em;
text-decoration: none;
overflow-wrap: anywhere;
}
.ct-offices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 28px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.ct-office {
display: flex;
flex-direction: column;
gap: 8px;
}
.ct-office .addr {
font-size: 16px;
line-height: 1.55;
}
.ct-office a,
.ct-office a:hover {
font-size: 14px;
color: var(--muted);
}
.ct-social {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.ct-social-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ct-pill {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 20px 0 14px;
border-radius: 999px;
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: transform 140ms var(--ease-press);
}
.ct-pill:hover {
color: #fff;
}
.ct-pill:active {
transform: scale(0.97);
}
.ct-pill.fb {
background: #1877F2;
}
.ct-pill.ig {
background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 80%, #515BD4 100%);
}
.ct-pill.tp {
background: #00B67A;
}
.ct-agency {
display: flex;
flex-direction: column;
gap: 6px;
padding: 24px;
border-radius: 20px;
background: var(--ink);
color: var(--bg);
text-decoration: none;
font-size: 16px;
line-height: 1.5;
}
.ct-agency:hover {
color: var(--bg);
}
.ct-agency .ct-label {
line-height: normal;
color: var(--on-dark-muted);
}
.ct-map {
margin-top: clamp(72px, 8vw, 120px);
display: flex;
flex-direction: column;
gap: 20px;
}
.ct-map-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.ct-map:has(.map-wrap.is-failed) .ct-map-head .ct-chips {
display: none;
}
.map-wrap {
position: relative;
height: clamp(380px, 48vw, 560px);
border-radius: 28px;
overflow: hidden;
background: var(--surface-2);
border: 1px solid var(--border);
}
.googlemap {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms ease;
}
.map-wrap.is-ready .googlemap {
opacity: 1;
}
.googlemap img {
max-width: none;
}
.map-card {
display: none;
}
.map-wrap.is-failed .map-card {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
padding: 32px var(--gutter);
text-align: center;
}
.map-card-sym {
width: 92px;
height: 92px;
}
.map-card-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.map-card-links .btn {
padding: 16px 26px;
font-size: 16px;
gap: 10px;
background: #fff;
}
.map-zoom {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
display: none;
flex-direction: column;
gap: 8px;
}
.map-wrap.is-ready .map-zoom {
display: flex;
}
.map-zoom button {
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: #fff;
color: var(--ink);
font-size: 22px;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 16px -8px rgba(31, 30, 27, 0.35);
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-press);
}
.map-zoom button:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--bg);
}
.map-zoom button:active {
transform: scale(0.94);
}
.map-pin {
position: absolute;
width: 0;
height: 0;
overflow: visible;
cursor: pointer;
}
.map-pin-hit {
position: absolute;
left: -24px;
top: -24px;
width: 48px;
height: 48px;
border-radius: 50%;
}
.map-pin-body {
position: absolute;
left: -22.8px;
top: -39.6px;
width: 60px;
height: 60px;
transform-origin: 38% 66%;
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 6px 10px rgba(31, 30, 27, 0.3));
}
.map-pin-body svg,
.map-pin-body img {
display: block;
width: 60px;
height: 60px;
overflow: visible;
}
.map-pin:hover .map-pin-body {
transform: scale(1.2);
}
.ct-foot {
margin-top: var(--section);
}
.ct-foot .f-inner {
padding-top: clamp(80px, 10vw, 140px);
}
.blog-main {
padding-top: clamp(48px, 7vw, 96px);
}
.blog-intro {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-h1 {
font-size: clamp(56px, 9vw, 140px);
}
.blog-h1 .ln {
padding-bottom: 0.2em;
margin-bottom: -0.14em;
}
.blog-lead {
max-width: 52ch;
}
.blog-featured {
margin-top: clamp(56px, 7vw, 96px);
}
.bl-feat {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: clamp(24px, 4vw, 64px);
align-items: center;
text-decoration: none;
color: var(--ink);
}
.bl-feat:hover,
.bl-card:hover {
color: var(--pink);
}
.bl-feat-media,
.bl-media,
.art-cover-media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: 22px;
overflow: hidden;
background: var(--surface-2);
}
.bl-feat-media img,
.bl-media img,
.art-cover-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bl-feat-body {
display: flex;
flex-direction: column;
gap: 20px;
}
.bl-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.bl-meta .cat {
color: var(--pink-text);
}
.bl-feat-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1.08;
letter-spacing: -0.01em;
text-wrap: pretty;
transition: color 200ms ease;
}
.bl-feat-excerpt {
max-width: 46ch;
font-size: 18px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.bl-feat-more {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.blog-posts {
margin-top: clamp(80px, 10vw, 140px);
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 48px);
}
.bl-head {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px 40px;
flex-wrap: wrap;
padding-bottom: clamp(20px, 2.4vw, 32px);
}
.bl-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.bl-filters button {
height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 600;
background: var(--surface-2);
color: var(--ink);
transition: background-color 220ms ease, color 220ms ease, transform 140ms var(--ease-press);
}
.bl-filters button:active {
transform: scale(0.96);
}
.bl-filters button[aria-pressed="true"] {
background: var(--ink);
color: #fff;
}
.bl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: clamp(40px, 4vw, 56px) clamp(20px, 2.4vw, 32px);
}
.bl-card {
display: flex;
flex-direction: column;
gap: 18px;
text-decoration: none;
color: var(--ink);
}
.bl-media {
aspect-ratio: 4 / 3;
}
.bl-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(21px, 1.8vw, 25px);
line-height: 1.2;
text-wrap: pretty;
transition: color 200ms ease;
}
.bl-excerpt {
font-size: 15px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.bl-empty {
font-size: 17px;
color: var(--muted);
}
.art-main {
padding-top: clamp(40px, 6vw, 80px);
}
.art-head {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
max-width: 980px;
}
.art-crumbs {
display: flex;
gap: 10px;
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
}
.art-crumbs a {
color: var(--muted-2);
text-decoration: none;
}
.art-crumbs a:hover {
color: var(--pink);
}
.art-h1 {
font-size: clamp(40px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
text-wrap: pretty;
}
.art-lead {
max-width: 56ch;
}
.art-byline {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 15px;
color: var(--muted);
}
.art-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--ink);
display: flex;
align-items: center;
justify-content: center;
}
.art-avatar span {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--pink);
}
.art-author {
font-weight: 600;
color: var(--ink);
}
.art-cover {
margin-top: clamp(40px, 5vw, 64px);
}
.art-cover-media {
aspect-ratio: 21 / 9;
}
.art-layout {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(40px, 6vw, 96px);
margin-top: clamp(48px, 6vw, 80px);
}
.art-toc {
flex: 0 1 260px;
position: sticky;
top: 110px;
display: flex;
flex-direction: column;
gap: 12px;
}
.art-toc-label {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.art-toc ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 15px;
line-height: 1.4;
}
.art-toc a {
position: relative;
display: inline-block;
color: var(--muted);
text-decoration: none;
transition: color 200ms ease, transform 300ms var(--ease-out);
}
.art-toc a::before {
content: "";
position: absolute;
left: -16px;
top: 0.5em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pink);
transform: scale(0);
transition: transform 400ms var(--ease-spring);
}
.art-toc a:hover {
color: var(--pink);
}
.art-toc a.is-active {
color: var(--ink);
}
.art-toc a.is-active::before {
transform: scale(1);
}
.art-body {
flex: 1 1 560px;
min-width: 0;
max-width: 720px;
display: flex;
flex-direction: column;
gap: 22px;
}
.art-body p {
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.75;
color: #33312c;
text-wrap: pretty;
}
.art-body h2 {
margin-top: 24px;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.2;
letter-spacing: normal;
scroll-margin-top: 110px;
}
.art-body h2 .num {
display: block;
margin-bottom: 10px;
font-family: var(--mono);
font-size: 13px;
font-weight: 400;
color: var(--pink-text);
}
.art-body h3 {
margin-top: 6px;
font-size: clamp(19px, 1.6vw, 22px);
line-height: 1.3;
letter-spacing: normal;
}
.art-body ul,
.art-body ol {
margin: 0;
padding-left: 1.3em;
display: flex;
flex-direction: column;
gap: 10px;
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.65;
color: #33312c;
}
.art-body li {
padding-left: 4px;
}
.art-body li::marker {
color: var(--pink);
}
.art-body ol > li::marker {
font-family: var(--mono);
font-size: 0.8em;
}
.art-body strong {
font-weight: 600;
color: var(--ink);
}
.art-body p a,
.art-body li a,
.art-body td a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--pink);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: color 200ms ease;
}
.art-body p a:hover,
.art-body li a:hover,
.art-body td a:hover {
color: var(--pink);
}
.art-body blockquote {
margin: 6px 0;
padding-left: 22px;
border-left: 3px solid var(--pink);
}
.art-body blockquote p {
font-family: var(--display);
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.45;
color: var(--ink);
}
.art-body table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
line-height: 1.5;
color: #33312c;
}
.art-body th,
.art-body td {
min-width: 140px;
padding: 12px 16px 12px 0;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.art-body th {
font-weight: 600;
color: var(--ink);
border-bottom-color: var(--ink);
}
.art-body img {
display: block;
max-width: 100%;
height: auto;
border-radius: 22px;
}
.art-body .wp-caption {
max-width: 100%;
width: auto !important;
margin: 6px 0;
}
.art-body .wp-caption-text {
margin-top: 10px;
font-size: 14px;
color: var(--muted-2);
}
.art-note {
padding: 20px 24px;
border-radius: 18px;
border: 1px solid var(--pink-tint-border);
background: var(--pink-tint);
font-size: 17px;
line-height: 1.65;
color: #33312c;
}
.art-body .art-note p {
font-size: 17px;
line-height: 1.65;
}
.art-sources {
margin-top: 16px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.art-body .art-sources-title {
margin-bottom: 12px;
font-family: var(--mono);
font-size: 12px;
line-height: 1.4;
color: var(--muted-2);
}
.art-body .art-sources ol {
gap: 8px;
font-size: 14px;
line-height: 1.5;
color: var(--muted-2);
}
.art-body .art-sources a {
color: var(--muted);
text-decoration-thickness: 1px;
overflow-wrap: anywhere;
}
.art-body .art-credits {
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
color: var(--muted-2);
}
.art-body .art-credits a {
color: var(--muted-2);
text-decoration-thickness: 1px;
}
.art-callout {
margin-top: 24px;
padding: clamp(24px, 3vw, 36px);
border-radius: 22px;
background: var(--surface-2);
display: flex;
flex-direction: column;
gap: 10px;
}
.art-callout-title {
font-family: var(--display);
font-weight: 700;
font-size: 21px;
line-height: 1.25;
}
.art-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.art-ctas .btn,
.nf-nav .btn {
padding: 16px 26px;
font-size: 16px;
}
.art-related {
margin-top: var(--section);
display: flex;
flex-direction: column;
gap: clamp(32px, 4vw, 48px);
}
.art-related .bl-head {
align-items: baseline;
gap: 16px 40px;
}
.bl-all {
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.bl-all:hover {
color: var(--pink);
}
.nf-main {
padding-top: clamp(24px, 4vw, 56px);
}
.nf {
position: relative;
min-height: min(80vh, 860px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 28px;
}
.nf-field {
position: absolute;
top: -80px;
bottom: -40px;
left: calc(-1 * var(--gutter));
right: calc(-1 * var(--gutter));
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.nf-field > button {
position: absolute;
padding: 0;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
}
.nf-label,
.nf-num,
.nf-copy,
.nf-nav {
position: relative;
z-index: 1;
}
.nf-num {
display: flex;
align-items: center;
justify-content: center;
gap: 0.03em;
font-size: clamp(140px, 27vw, 400px);
line-height: 0.8;
letter-spacing: -0.04em;
color: var(--ink);
pointer-events: none;
}
.nf-zero {
pointer-events: auto;
flex: none;
font-size: inherit;
width: 0.74em;
height: 0.74em;
margin: 0 0.02em;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--pink);
cursor: pointer;
box-shadow: inset -0.06em -0.08em 0 rgba(31, 30, 27, 0.12);
}
.nf-copy {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 620px;
pointer-events: none;
}
.nf-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.15;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.nf-text {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.nf-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
@media only screen and (max-width: 991px) {
.art-toc {
position: static;
flex-basis: 100%;
}
.art-toc a::before {
display: none;
}
}
@media only screen and (max-width: 767px) {
.ct-card {
border-radius: 22px;
}
.ct-submit .ct-send {
width: 100%;
justify-content: center;
}
.ct-done {
min-height: 320px;
}
.map-wrap {
border-radius: 22px;
}
.art-cover-media {
aspect-ratio: 16 / 10;
}
.art-body table {
display: block;
overflow-x: auto;
}
}
@media only screen and (max-width: 420px) {
.ct-chip {
height: 40px;
padding: 0 14px;
font-size: 14px;
}
.bl-filters button {
height: 38px;
padding: 0 14px;
}
.nf-nav .btn {
padding: 14px 20px;
font-size: 15px;
}
}
.legal-page {
padding-top: clamp(48px, 7vw, 96px);
}
.legal-hero {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
padding-bottom: clamp(32px, 4vw, 56px);
}
.legal-hero h1 {
font-size: clamp(44px, 7vw, 104px);
line-height: 0.98;
letter-spacing: -0.02em;
max-width: 14ch;
}
.legal-hero h1 .ln {
display: block;
overflow: hidden;
padding-bottom: 0.2em;
margin-bottom: -0.14em;
}
.legal-hero h1 .ln > span {
display: block;
}
.legal-hero .lead {
max-width: 56ch;
}
.legal {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(40px, 6vw, 96px);
margin-top: clamp(48px, 6vw, 80px);
}
.toc {
flex: 0 1 260px;
position: sticky;
top: 110px;
display: flex;
flex-direction: column;
gap: 36px;
}
.toc-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.toc-sections {
padding-top: 28px;
border-top: 1px solid var(--border);
}
.toc .k {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-3);
}
.toc ul,
.toc ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.toc-pages a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
text-decoration: none;
font-size: 15px;
color: var(--muted-2);
transition: color 200ms ease;
}
.toc-pages a::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid var(--input-border-2);
flex: none;
}
.toc-pages a:hover {
color: var(--pink);
}
.toc-pages a[aria-current="page"],
.toc-pages a[aria-current="page"]:hover {
font-weight: 600;
color: var(--ink);
}
.toc-pages a[aria-current="page"]::before {
border: 0;
background: var(--pink);
}
.toc-sections a {
display: flex;
gap: 10px;
padding: 6px 0;
text-decoration: none;
font-size: 14px;
line-height: 1.4;
color: var(--muted-2);
transition: color 200ms ease;
}
.toc-sections a:hover,
.toc-sections a.active {
color: var(--ink);
}
.toc-sections .n {
font-family: var(--mono);
font-size: 12px;
color: var(--pink);
padding-top: 1px;
}
.legal-body {
flex: 1 1 560px;
min-width: 0;
display: flex;
flex-direction: column;
gap: clamp(44px, 5vw, 64px);
}
.legal-body section {
scroll-margin-top: 120px;
display: flex;
flex-direction: column;
gap: 16px;
}
.legal-body h2 {
display: flex;
align-items: baseline;
gap: 14px;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.15;
letter-spacing: -0.01em;
}
.legal-body h2 .n {
font-family: var(--mono);
font-weight: 400;
font-size: 13px;
color: var(--pink);
}
.legal-body p {
font-size: 17px;
line-height: 1.7;
color: #3a3833;
max-width: 68ch;
text-wrap: pretty;
}
.legal-body ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 68ch;
}
.legal-body li {
position: relative;
padding-left: 26px;
font-size: 17px;
line-height: 1.65;
color: #3a3833;
}
.legal-body li::before {
content: "";
position: absolute;
left: 0;
top: 0.68em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pink);
}
.legal-body p.legal-note {
padding-top: 28px;
border-top: 1px solid var(--border);
font-size: 15px;
line-height: 1.6;
color: var(--muted-2);
text-wrap: wrap;
}
@media only screen and (max-width: 991px) {
.toc {
position: static;
flex-basis: 100%;
}
}
@media only screen and (max-width: 767px) {
.legal-body {
overflow-wrap: anywhere;
}
}
.rv-stars {
display: flex;
gap: 8px;
}
.rv-stars svg {
display: block;
width: 34px;
height: 34px;
fill: var(--pink);
}
.legal-body .rv-card {
gap: 22px;
padding: clamp(26px, 3vw, 36px);
border: 1px solid var(--border);
border-radius: 24px;
background: #fbfaf8;
}
.legal-body .rv-card.is-main {
border-color: var(--pink);
background: var(--white);
}
.rv-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.legal-body .rv-card h2 {
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.1;
}
.rv-badge {
padding: 4px 10px;
border-radius: 999px;
background: var(--pink);
font-family: var(--mono);
font-size: 12px;
color: var(--white);
}
.legal-body .rv-card > p {
line-height: 1.6;
max-width: 52ch;
}
.legal-body .rv-steps {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.legal-body .rv-steps li {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 8px;
padding: 12px 0;
border-top: 1px solid var(--surface-2);
font-size: 16px;
line-height: 1.55;
}
.legal-body .rv-steps li::before {
content: none;
}
.rv-steps .n {
padding-top: 2px;
font-family: var(--mono);
font-size: 13px;
color: var(--pink);
}
.rv-go {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px 24px;
}
.rv-go .btn {
padding: 16px 26px;
font-size: 16px;
font-weight: 600;
}
.rv-needs {
font-size: 14px;
line-height: 1.5;
color: var(--muted-2);
}
.legal-body .rv-tips {
margin-top: clamp(20px, 3vw, 40px);
}
.rv-faq {
max-width: 68ch;
}
.rv-faq summary {
font-size: clamp(17px, 1.4vw, 19px);
}
.legal-body .rv-faq details p {
font-size: 16px;
color: var(--muted);
}
.flow-page input::placeholder,
.flow-page textarea::placeholder {
color: #b9b5ac;
}
.flow {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg);
}
.flow-bubbles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.flow-bubbles > span {
position: absolute;
border-radius: 50%;
box-sizing: border-box;
opacity: 0;
}
.flow-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--surface-2);
z-index: 20;
}
.flow-bar {
height: 100%;
width: 0;
background: var(--pink);
border-radius: 0 999px 999px 0;
transition: width 700ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.flow-head {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px var(--gutter);
}
.flow-logo {
display: flex;
}
.flow-logo img {
height: 38px;
width: auto;
display: block;
}
.flow-head-r {
display: flex;
align-items: center;
gap: 20px;
}
.flow-step {
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
}
.flow-close {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
text-decoration: none;
font-size: 20px;
line-height: 1;
transition: background-color 200ms ease;
}
.flow-close:hover {
background: #e2e0d9;
color: var(--ink);
}
.flow-main {
position: relative;
z-index: 5;
flex: 1;
display: flex;
align-items: center;
padding: 0 var(--gutter) clamp(40px, 8vh, 96px);
}
.flow-stage {
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.flow-nav button,
.lm-x,
.ml-user button,
.ml-chat .ft button,
.ml-chat-btn,
.ml-pay-form .hd button,
.ml-pdf .hd button {
font-family: system-ui, -apple-system, sans-serif;
}
.flow-form,
.flow-form .q {
display: flex;
flex-direction: column;
gap: clamp(24px, 3.4vh, 40px);
}
.q-head {
display: flex;
flex-direction: column;
gap: 14px;
}
.q-num {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 13px;
color: var(--pink);
}
.q-title {
font-size: clamp(30px, 4.2vw, 54px);
line-height: 1.08;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.q-help {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: var(--muted);
max-width: 52ch;
}
.q-opts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: 10px;
}
.q-opts.cols-260 {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.q-opts.cols-300 {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.opt {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 60px;
padding: 12px 18px 12px 12px;
border-radius: 16px;
border: 1.5px solid var(--input-border);
background: #fff;
color: var(--ink);
font: inherit;
font-size: 17px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 140ms var(--ease-press);
}
.opt:hover {
border-color: var(--ink);
}
.opt:active {
transform: scale(0.98);
}
.opt-key {
flex: none;
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 13px;
background: var(--surface-2);
color: var(--muted);
transition: background-color 220ms ease, color 220ms ease;
}
.opt-label {
flex: 1;
line-height: 1.3;
}
.opt-check {
flex: none;
font-size: 18px;
opacity: 0;
transition: opacity 200ms ease;
}
.opt[aria-pressed="true"] {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
.opt[aria-pressed="true"] .opt-key {
background: var(--pink);
color: #fff;
}
.opt[aria-pressed="true"] .opt-check {
opacity: 1;
}
.q-input,
.q-area {
width: 100%;
border: 0;
border-bottom: 2px solid var(--input-border);
background: transparent;
padding: 10px 0 14px;
font: inherit;
font-size: clamp(24px, 3vw, 36px);
color: var(--ink);
outline: none;
border-radius: 0;
transition: border-color 200ms ease;
}
.q-area {
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.45;
resize: none;
}
.q-input:focus,
.q-area:focus {
border-bottom-color: var(--pink);
}
.q-sum {
margin: 0;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.sum-row {
display: grid;
grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.6fr) auto;
gap: 16px;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.sum-row dt {
font-size: 14px;
font-weight: 400;
color: var(--muted-2);
}
.sum-row dd {
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.45;
overflow-wrap: anywhere;
}
.sum-edit,
.flow-skip {
border: 0;
background: none;
padding: 0;
font: inherit;
font-size: 14px;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.flow-skip {
font-size: 15px;
}
.flow-err {
font-size: 15px;
color: var(--error);
}
.flow-actions {
display: flex;
align-items: center;
gap: 16px 20px;
flex-wrap: wrap;
}
.flow-next {
position: relative;
overflow: hidden;
isolation: isolate;
border: 0;
cursor: pointer;
font: inherit;
height: 56px;
padding: 0 30px;
border-radius: 999px;
font-weight: 600;
font-size: 17px;
background: var(--pink);
color: #fff;
display: flex;
align-items: center;
gap: 10px;
transition: transform 140ms var(--ease-press);
}
.flow-next:active {
transform: scale(0.97);
}
.flow-hint {
font-size: 13px;
color: var(--muted-2);
}
.flow-nav {
display: flex;
gap: 8px;
margin-left: auto;
}
.flow-nav button {
width: 48px;
height: 48px;
border-radius: 14px;
border: 0;
background: var(--ink);
color: var(--bg);
font-size: 18px;
cursor: pointer;
transition: opacity 200ms ease, transform 140ms var(--ease-press);
}
.flow-nav button:active {
transform: scale(0.94);
}
.flow-nav button:disabled {
opacity: 0.3;
}
.flow-done,
.cart-done {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.ok-badge {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
}
.ok-badge.sm {
width: 88px;
height: 88px;
}
.done-title {
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.01em;
}
.done-text {
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.6;
color: var(--muted);
max-width: 46ch;
}
.done-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.done-actions .btn {
display: block;
}
.done-home {
display: flex;
align-items: center;
padding: 0 8px;
font-size: 16px;
font-weight: 500;
}
.wl-hp {
position: absolute !important;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.wl-ts:empty {
display: none;
}
.wl-ck {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 9990;
width: min(440px, calc(100vw - 48px));
padding: 22px 24px 16px;
border-radius: 28px;
background: var(--ink);
color: #fff;
box-shadow: 0 28px 70px -18px rgba(31, 30, 27, 0.55), 0 2px 8px rgba(31, 30, 27, 0.18);
opacity: 0;
transform: translateY(24px);
pointer-events: none;
overflow: hidden;
}
.wl-ck.is-in {
opacity: 1;
transform: none;
pointer-events: auto;
}
.wl-ck::before {
content: "";
position: absolute;
left: -40px;
top: -50px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 20, 90, 0.28), rgba(240, 20, 90, 0) 68%);
pointer-events: none;
}
.wl-ck > * {
position: relative;
}
.wl-ck-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 10px;
}
.wl-ck-cookie {
flex: none;
width: 56px;
height: 56px;
overflow: visible;
transition: transform 420ms var(--ease-spring);
}
.wl-ck-cookie:hover {
transform: rotate(-10deg) scale(1.04);
}
.wl-ck-dough {
fill: #F0145A;
}
.wl-ck-chips {
fill: var(--ink);
}
.wl-ck-chips circle,
.wl-ck-bite circle {
transform-box: fill-box;
transform-origin: center;
}
.wl-ck-bite circle {
transform: scale(0);
}
.wl-ck-chips circle[data-b="1"],
.wl-ck-chips circle[data-b="2"] {
animation: wlChip 3.2s ease-in-out infinite;
}
.wl-ck-chips circle[data-b="2"] {
animation-duration: 2.6s;
animation-delay: -0.8s;
}
@keyframes wlChip {
50% {
transform: translate(0.8px, -1.6px) scale(1.1);
}
}
.wl-ck-title {
margin: 0;
font-family: var(--display);
font-size: 21px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: #fff;
}
.wl-ck-title .dot {
color: #F0145A;
}
.wl-ck-text {
margin: 0 0 18px;
font-size: 14.5px;
line-height: 1.55;
color: var(--on-dark-muted);
}
.wl-ck-text a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
}
.wl-ck-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.wl-ck-actions .btn {
justify-content: center;
min-height: 50px;
padding: 13px 16px;
font-size: 15.5px;
}
.btn-paper {
background: #fff;
color: var(--ink);
font-weight: 600;
}
.btn-paper:hover {
color: var(--ink);
}
.wl-ck-more {
display: block;
width: 100%;
margin-top: 8px;
padding: 8px;
border: 0;
background: none;
color: var(--on-dark-muted);
font: inherit;
font-size: 14px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.wl-ck-more:hover {
color: #fff;
}
.wl-ck :focus-visible,
.wl-ckp :focus-visible {
outline: 2px solid #F0145A;
outline-offset: 3px;
}
.wl-ckp {
position: fixed;
inset: 0;
z-index: 9995;
display: grid;
place-items: center;
padding: 20px;
}
.wl-ckp[hidden] {
display: none;
}
html.wl-ckp-open {
overflow: hidden;
}
.wl-ckp-bg {
position: absolute;
inset: 0;
background: rgba(31, 30, 27, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.wl-ckp-panel {
position: relative;
width: min(680px, 100%);
max-height: min(88vh, 880px);
overflow: auto;
overscroll-behavior: contain;
padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 44px) 0;
border-radius: 28px;
background: var(--bg);
color: var(--ink);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.45);
outline: none;
}
.wl-ckp-x {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--surface-2);
color: var(--ink);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: transform 300ms var(--ease-spring);
}
.wl-ckp-x:hover {
transform: rotate(90deg);
}
.wl-ckp-eyebrow {
font-size: 13px;
color: var(--muted-2);
}
.wl-ckp-title {
margin: 8px 48px 10px 0;
font-family: var(--display);
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
}
.wl-ckp-title .dot {
color: var(--pink);
}
.wl-ckp-intro {
margin: 0 0 12px;
font-size: 16px;
line-height: 1.55;
color: var(--muted);
}
.wl-ckp-intro a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.wl-ckp-cat {
padding: 18px 0;
border-top: 1px solid var(--border);
}
.wl-ckp-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.wl-ckp-name {
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
.wl-ckp-always {
flex: none;
padding: 5px 11px;
border-radius: 999px;
background: var(--pink-tint);
color: var(--error);
font-family: var(--mono);
font-size: 12px;
}
.wl-ckp-desc {
max-width: 54ch;
margin: 6px 0 0;
font-size: 15px;
line-height: 1.55;
color: var(--muted);
}
.wl-ckp-more {
margin-top: 10px;
}
.wl-ckp-more summary {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.wl-ckp-more summary::-webkit-details-marker {
display: none;
}
.wl-ckp-more summary::before {
content: "+";
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--surface-2);
font-family: var(--mono);
font-size: 14px;
transition: transform 300ms var(--ease-spring), background-color 200ms;
}
.wl-ckp-more[open] summary::before {
transform: rotate(45deg);
background: var(--pink-tint);
}
.wl-ckp-scroll {
overflow-x: auto;
}
.wl-ckp-table {
width: 100%;
min-width: 480px;
margin-top: 10px;
border-collapse: collapse;
font-size: 13.5px;
line-height: 1.45;
}
.wl-ckp-table th {
padding: 6px 12px 6px 0;
text-align: left;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 400;
color: var(--muted-2);
}
.wl-ckp-table td {
padding: 9px 12px 9px 0;
border-top: 1px solid var(--card-border);
vertical-align: top;
}
.wl-ckp-table code,
.wl-ckp-id code {
padding: 2px 6px;
border-radius: 6px;
background: var(--surface-2);
font-family: var(--mono);
font-size: 12px;
}
.wl-ckp-id {
margin: 4px 0 0;
padding-top: 14px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--muted-2);
}
.wl-ckp-actions {
position: sticky;
bottom: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 8px;
padding: 18px 0 clamp(22px, 4vw, 40px);
background: linear-gradient(to top, var(--bg) 80%, rgba(247, 246, 243, 0));
}
.wl-ckp-actions .btn {
justify-content: center;
padding: 15px 14px;
font-size: 15.5px;
}
.wl-switch {
-webkit-appearance: none;
appearance: none;
flex: none;
width: 48px;
height: 28px;
margin: 0;
border: 0;
border-radius: 999px;
background-color: var(--input-border-2);
background-image: radial-gradient(circle, #fff 9.6px, rgba(255, 255, 255, 0) 10.6px);
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 3px 3px;
cursor: pointer;
transition: background-color 200ms, background-position 380ms cubic-bezier(0.34, 1.5, 0.64, 1);
}
.wl-switch:checked {
background-color: var(--pink);
background-position: 23px 3px;
}
.map-wrap.is-consent .map-card {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 32px var(--gutter);
text-align: center;
}
.ct-map:has(.map-wrap.is-consent) .ct-map-head .ct-chips {
display: none;
}
.map-consent {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 420px;
}
.map-consent[hidden] {
display: none;
}
.map-consent p {
margin: 0;
font-size: 15px;
color: var(--muted);
}
.map-consent .btn {
padding: 15px 26px;
font-size: 16px;
}
.map-consent a {
font-size: 14px;
color: var(--muted-2);
text-decoration: underline;
text-underline-offset: 3px;
}
.f-cookies {
padding: 0;
border: 0;
background: none;
color: var(--muted-2);
font: inherit;
cursor: pointer;
}
.f-cookies:hover {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 600px) {
.wl-ck {
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
width: auto;
padding: 18px 18px 12px;
border-radius: 24px;
}
.wl-ck-cookie {
width: 48px;
height: 48px;
}
.wl-ck-title {
font-size: 19px;
}
.wl-ckp {
place-items: end center;
padding: 0;
}
.wl-ckp-panel {
max-height: 92vh;
border-radius: 24px 24px 0 0;
padding: 24px 20px 0;
}
.wl-ckp-actions {
grid-template-columns: 1fr;
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.wl-ck-chips circle {
animation: none;
}
}
.cart-flow {
overflow: visible;
overflow-x: clip;
color: var(--ink);
}
.cart-head {
flex-wrap: wrap;
}
.cart-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 14px;
font-weight: 500;
}
.cart-steps li {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted-3);
}
.cart-steps .n {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 12px;
background: var(--surface-2);
color: var(--muted-2);
transition: background-color 300ms ease, color 300ms ease;
}
.cart-steps .chk,
.cart-steps .past .num {
display: none;
}
.cart-steps .past .chk {
display: inline;
}
.cart-steps li.on {
color: var(--ink);
}
.cart-steps li.on .n {
background: var(--pink);
color: #fff;
}
.cart-steps .sep {
display: block;
width: 28px;
height: 1px;
background: var(--input-border);
}
.cart-main {
position: relative;
z-index: 5;
flex: 1;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: clamp(24px, 5vh, 56px) var(--gutter) 96px;
}
.cart-title {
margin: 0 0 clamp(28px, 4vh, 48px);
font-size: clamp(40px, 6vw, 80px);
line-height: 1;
letter-spacing: -0.02em;
}
.cart-empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
max-width: 560px;
}
.cart-empty p {
font-size: 20px;
line-height: 1.55;
color: var(--muted);
}
.cart-empty-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn.cart-btn {
display: block;
padding: 17px 28px;
font-size: 16px;
}
.cart-cols {
display: flex;
flex-wrap: wrap;
gap: 40px clamp(32px, 5vw, 72px);
align-items: flex-start;
}
.cart-items {
flex: 1 1 560px;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.cart-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px 32px;
padding: 28px 0;
border-bottom: 1px solid var(--border);
}
.ci-info {
flex: 1 1 280px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ci-kind {
font-family: var(--mono);
font-size: 12px;
color: var(--pink);
}
.ci-name {
font-family: var(--display);
font-weight: 700;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.15;
}
.ci-meta {
font-size: 15px;
line-height: 1.5;
color: var(--muted);
overflow-wrap: anywhere;
}
.ci-acts {
display: flex;
gap: 20px;
margin-top: 6px;
font-size: 14px;
}
.ci-edit,
.cart-more {
color: var(--ink);
text-underline-offset: 4px;
}
.ci-edit:hover,
.cart-more:hover {
color: var(--pink);
}
.ci-remove,
.cart-back {
border: 0;
background: none;
padding: 0;
font: inherit;
font-size: 14px;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.ci-remove:hover {
color: var(--error);
}
.ci-price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.ci-amount {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 3vw, 38px);
line-height: 1;
letter-spacing: -0.01em;
}
.ci-per {
font-size: 13px;
color: var(--muted);
}
.cart-more {
align-self: flex-start;
margin-top: 24px;
font-size: 15px;
}
.cart-sum {
flex: 1 1 340px;
position: sticky;
top: 24px;
display: flex;
flex-direction: column;
gap: 20px;
padding: clamp(24px, 3vw, 36px);
background: #fff;
border: 1px solid var(--card-border);
border-radius: 24px;
}
.cs-title {
font-family: var(--display);
font-weight: 700;
font-size: 22px;
}
.cs-totals {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 16px;
}
.cs-totals > div {
display: flex;
justify-content: space-between;
gap: 16px;
}
.cs-totals dt {
font-weight: 400;
color: var(--muted);
}
.cs-totals dd {
margin: 0;
}
.cs-totals .cs-total {
align-items: baseline;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.cs-total dt {
font-weight: 600;
color: var(--ink);
}
.cs-total dd {
font-family: var(--display);
font-weight: 700;
font-size: 34px;
line-height: 1;
letter-spacing: -0.01em;
}
.cs-note {
font-size: 14px;
line-height: 1.55;
color: var(--muted-2);
text-wrap: pretty;
}
.cart-go {
position: relative;
overflow: hidden;
isolation: isolate;
border: 0;
cursor: pointer;
font: inherit;
height: 60px;
padding: 0 30px;
border-radius: 999px;
font-weight: 600;
font-size: 17px;
background: var(--pink);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: transform 140ms var(--ease-press);
}
.cart-go:active {
transform: scale(0.97);
}
.cart-go.is-off {
background: var(--surface-2);
color: var(--muted-3);
cursor: not-allowed;
}
.cart-go.is-off > span[aria-hidden="true"]:first-child {
display: none;
}
.pay-hint {
margin: -4px 0 0;
font-size: 13px;
line-height: 1.45;
color: var(--muted-2);
text-align: center;
}
.cs-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cs-items li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: 15px;
line-height: 1.4;
}
.cs-per {
display: block;
font-size: 13px;
color: var(--muted-2);
}
.cs-price {
font-weight: 600;
white-space: nowrap;
}
.cs-line {
height: 1px;
background: var(--border);
}
.cs-terms {
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-terms-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.cs-terms-row > span {
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
.cs-terms-row a {
color: var(--ink);
}
.cs-terms-row a:hover {
color: var(--pink);
}
.cs-terms .check {
flex: none;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 7px;
border: 2px solid var(--input-border-2);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background-color 200ms ease, border-color 200ms ease;
}
.cs-terms .check svg {
opacity: 0;
transition: opacity 160ms ease;
}
.cs-terms .check.err {
border-color: var(--error);
}
.cs-terms .check[aria-checked="true"] {
background: var(--pink);
border-color: var(--pink);
}
.cs-terms .check[aria-checked="true"] svg {
opacity: 1;
}
.cart-back {
align-self: center;
}
.co-main {
flex: 1 1 560px;
display: flex;
flex-direction: column;
gap: 48px;
}
.checkout fieldset,
.wl-pay fieldset {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
.checkout legend,
.wl-pay legend {
float: none;
width: auto;
padding: 0;
margin-bottom: 20px;
font-family: var(--display);
font-weight: 700;
font-size: 24px;
line-height: 1.2;
}
.checkout .co-doc {
display: flex;
flex-direction: column;
gap: 20px;
}
.co-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 18px 20px;
}
.fld {
display: flex;
flex-direction: column;
gap: 8px;
}
.fld-full {
grid-column: 1 / -1;
}
.fld > span:first-child {
font-size: 14px;
color: var(--muted);
}
.fld input {
height: 56px;
padding: 0 18px;
border-radius: 14px;
border: 1.5px solid var(--input-border);
background: #fff;
font: inherit;
font-size: 17px;
color: var(--ink);
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.fld input[aria-invalid="true"] {
border-color: var(--error);
}
.fld input:focus {
border-color: var(--ink);
box-shadow: 0 0 0 4px rgba(240, 20, 90, 0.12);
}
.fld-err {
font-size: 13px;
color: var(--error);
}
.co-mylab {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
padding: 16px 20px;
border-radius: 16px;
background: var(--pink-tint);
}
.co-mylab-tag {
flex: none;
font-family: var(--display);
font-weight: 700;
font-size: 15px;
padding: 7px 12px;
border-radius: 999px;
background: var(--ink);
color: #fff;
}
.co-mylab > span:last-child {
font-size: 15px;
line-height: 1.5;
color: var(--ink);
text-wrap: pretty;
}
.seg {
align-self: flex-start;
display: flex;
padding: 5px;
border-radius: 999px;
background: var(--surface-2);
}
.seg button {
height: 46px;
padding: 0 24px;
border: 0;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-size: 15px;
font-weight: 600;
background: transparent;
color: var(--ink);
transition: background-color 250ms ease, color 250ms ease;
}
.seg button[aria-checked="true"],
.seg button[aria-selected="true"] {
background: var(--ink);
color: #fff;
}
.co-methods {
display: flex;
flex-direction: column;
gap: 10px;
}
.co-methods button {
display: flex;
align-items: center;
gap: 16px;
min-height: 68px;
padding: 14px 20px;
border-radius: 16px;
border: 1.5px solid var(--border);
background: #fff;
text-align: left;
font: inherit;
cursor: pointer;
color: var(--ink);
transition: border-color 220ms ease, transform 140ms var(--ease-press);
}
.co-methods button:hover {
border-color: var(--ink);
}
.co-methods button:active {
transform: scale(0.99);
}
.co-methods button[aria-checked="true"] {
border-color: var(--pink);
}
.co-methods .radio {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--input-border-2);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 220ms ease;
}
.co-methods .radio > span {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--pink);
transform: scale(0);
transition: transform 260ms var(--ease-spring);
}
.co-methods [aria-checked="true"] .radio {
border-color: var(--pink);
}
.co-methods [aria-checked="true"] .radio > span {
transform: scale(1);
}
.m-txt {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.m-label {
font-size: 17px;
font-weight: 600;
}
.m-note {
font-size: 14px;
line-height: 1.45;
color: var(--muted);
}
.cart-done {
max-width: 720px;
margin: clamp(24px, 6vh, 72px) auto 0;
}
.cd-no {
font-family: var(--mono);
font-size: 13px;
color: var(--muted-2);
}
.done-text.cd-text {
max-width: 48ch;
text-wrap: pretty;
}
.cd-steps {
margin: 0;
padding: 24px 0 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
border-top: 1px solid var(--border);
}
.cd-steps li {
display: flex;
gap: 16px;
font-size: 17px;
line-height: 1.5;
}
.cd-steps .i {
flex: none;
font-family: var(--mono);
font-size: 13px;
color: var(--pink);
padding-top: 3px;
}
.cd-actions {
margin-top: 8px;
}
.cd-actions .btn {
font-weight: 600;
}
.legal-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 3vw, 40px);
}
.lm-backdrop {
position: absolute;
inset: 0;
background: rgba(31, 30, 27, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.lm-panel {
position: relative;
width: 100%;
max-width: 860px;
height: min(86vh, 900px);
display: flex;
flex-direction: column;
background: var(--bg);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(31, 30, 27, 0.35);
}
.lm-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 20px 18px clamp(20px, 3vw, 32px);
border-bottom: 1px solid var(--border);
}
.lm-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.lm-tabs {
align-self: auto;
overflow-x: auto;
}
.lm-tabs button {
flex: none;
height: 44px;
padding: 0 20px;
white-space: nowrap;
}
.lm-x {
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: var(--surface-2);
color: var(--ink);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 200ms ease, transform 140ms var(--ease-press);
}
.lm-x:hover {
background: var(--border);
}
.lm-x:active {
transform: scale(0.92);
}
.lm-body {
position: relative;
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg);
padding: clamp(24px, 3.4vw, 44px) clamp(20px, 4vw, 56px);
}
.lm-doc-head {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 24px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.lm-doc-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.05;
letter-spacing: -0.01em;
}
.lm-doc-head .lead {
font-size: 17px;
max-width: 60ch;
}
.lm-doc .legal-body {
max-width: none;
gap: 32px;
padding-top: 24px;
}
.lm-foot {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 12px 20px;
padding: 18px clamp(20px, 3vw, 32px);
border-top: 1px solid var(--border);
background: #fff;
}
.lm-close {
border: 0;
background: none;
padding: 0 6px;
font: inherit;
font-size: 15px;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.lm-agree {
border: 0;
cursor: pointer;
font: inherit;
height: 54px;
padding: 0 28px;
border-radius: 999px;
font-weight: 600;
font-size: 16px;
background: var(--pink);
color: #fff;
display: flex;
align-items: center;
gap: 10px;
transition: transform 140ms var(--ease-press), background-color 200ms ease;
}
.lm-agree:hover {
background: var(--pink-hover);
}
.lm-agree:active {
transform: scale(0.96);
}
.mylab {
min-height: 100vh;
background: var(--bg);
position: relative;
overflow-x: clip;
}
.mylab h2 {
font-family: var(--sans);
letter-spacing: normal;
}
.ml-field {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
font-weight: 500;
}
.ml-field input {
height: 50px;
padding: 0 14px;
border: 1px solid var(--input-border);
border-radius: 12px;
background: #fff;
font: inherit;
font-size: 15px;
font-weight: 400;
outline: none;
}
.ml-field input:focus {
border-color: var(--pink);
}
.ml-field.lg input {
height: 54px;
padding: 0 16px;
border-radius: 14px;
font-size: 16px;
}
.ml-field.lg input:focus {
box-shadow: 0 0 0 4px rgba(240, 20, 90, 0.12);
}
.ml-shell {
display: flex;
min-height: 100vh;
}
.ml-side {
position: sticky;
top: 0;
height: 100vh;
width: 260px;
flex: none;
display: flex;
flex-direction: column;
gap: 28px;
padding: 24px 16px;
background: var(--ink);
color: var(--bg);
}
.ml-side-logo {
display: flex;
padding: 4px 8px 0;
text-decoration: none;
}
.ml-side-logo img {
height: 36px;
width: auto;
display: block;
}
.ml-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.ml-nav-i {
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 12px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--input-border);
font: inherit;
font-size: 15px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background-color 200ms ease, color 200ms ease;
}
.ml-nav-i[aria-current="page"] {
background: var(--pink);
color: #fff;
}
.ml-nav-i:hover {
background: #33312c;
color: #fff;
}
.ml-nav-i .ic {
width: 22px;
text-align: center;
font-size: 16px;
}
.ml-nav-i .lb {
flex: 1;
}
.ml-nav-i .badge {
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: var(--pink);
color: #fff;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.ml-user {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 14px;
background: #2a2925;
}
.ml-user .av {
width: 38px;
height: 38px;
border-radius: 50%;
background: #0B3A8C;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.ml-user .av.has-img {
flex: none;
padding: 5px;
background: #fff;
overflow: hidden;
}
.ml-user .av img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ml-user .tx {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.ml-user .n {
font-size: 14px;
font-weight: 600;
}
.ml-user .e {
font-size: 12px;
color: var(--on-dark-muted);
overflow: hidden;
text-overflow: ellipsis;
}
.ml-user button {
border: 0;
background: none;
color: var(--on-dark-muted);
cursor: pointer;
font-size: 16px;
}
.ml-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ml-top {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 16px;
padding: 18px clamp(16px, 3vw, 40px);
background: rgba(247, 246, 243, 0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--card-border);
}
.ml-top-ic {
display: none;
width: 32px;
height: 32px;
}
.ml-top h1 {
font-size: clamp(22px, 2.4vw, 30px);
line-height: normal;
letter-spacing: -0.01em;
}
.ml-top-r {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
}
.ml-new {
height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--pink);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.ml-new:active {
transform: scale(0.97);
}
.ml-main {
flex: 1;
padding: clamp(16px, 3vw, 40px);
padding-bottom: 40px;
max-width: 1280px;
width: 100%;
}
.ml-view[data-view="dash"] {
display: flex;
flex-direction: column;
gap: 28px;
}
.ml-hello {
font-size: 18px;
color: var(--muted);
}
.ml-hello strong {
color: var(--ink);
}
.ml-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.ml-stat {
text-align: left;
border: 1px solid var(--card-border);
background: #fff;
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
cursor: pointer;
font: inherit;
color: inherit;
transition: transform 300ms var(--ease-out), border-color 200ms ease;
}
.ml-stat:hover {
transform: translateY(-3px);
border-color: var(--ink);
}
.ml-stat .lb {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.ml-stat .val {
font-family: var(--display);
font-weight: 700;
font-size: 34px;
line-height: 1;
color: var(--ink);
}
.ml-stat .val.pink {
color: var(--pink);
}
.ml-stat .sub {
font-size: 13px;
color: var(--muted);
}
.ml-dash2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: 20px;
}
.ml-card {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ml-card + .ml-card {
gap: 14px;
}
.ml-card h2 {
font-size: 18px;
font-weight: 600;
line-height: normal;
}
.ml-pend {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
border-radius: 16px;
background: var(--bg);
}
.ml-pend .ic {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--ink);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: none;
}
.ml-pend .ic.pink-bg {
background: var(--pink);
}
.ml-pend .tx {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ml-pend .t {
font-weight: 600;
font-size: 15px;
}
.ml-pend .s {
font-size: 13px;
color: var(--muted);
}
.ml-pend button {
height: 38px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: var(--ink);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.ml-pend button:hover {
background: var(--pink);
}
.ml-act {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.ml-act li {
display: flex;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid #f0eee9;
}
.ml-act .d {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 6px;
flex: none;
}
.d-pink { background: var(--pink); }
.d-ink { background: var(--ink); }
.d-blue { background: #1aa3e8; }
.d-green { background: #34c759; }
.ml-act li > div {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.ml-act .t {
font-size: 15px;
}
.ml-act .w {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.pill {
white-space: nowrap;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.pill-wait { background: #fff1d6; color: #8a5a00; }
.pill-ok { background: #e3f5ea; color: #1f7a3f; }
.pill-off { background: #f0eee9; color: var(--muted-2); }
.pill-bad { background: #fde3ea; color: var(--error); }
.ml-quotes {
display: flex;
flex-direction: column;
gap: 14px;
}
.ml-quote {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 22px;
padding: 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) 130px 260px;
gap: 16px 24px;
align-items: center;
}
.ml-quote .qi {
display: flex;
flex-direction: column;
gap: 4px;
}
.ml-quote .m {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.ml-quote .t {
font-weight: 600;
font-size: 17px;
}
.ml-quote .d {
font-size: 14px;
color: var(--muted);
}
.ml-quote .amt {
font-family: var(--display);
font-weight: 700;
font-size: 28px;
}
.ml-quote .acts,
.ml-row .acts {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.ml-row .acts.nowrap {
flex-wrap: nowrap;
}
.b-out {
height: 40px;
padding: 0 16px;
border: 1px solid var(--input-border);
border-radius: 999px;
background: #fff;
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.b-out:hover {
border-color: var(--ink);
}
.b-pink {
height: 40px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--pink);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.b-pink:hover {
background: #d00f4e;
}
a.b-pink,
a.b-pink:hover,
a.b-pink:focus {
color: #fff;
text-decoration: none;
}
.ml-row .b-pink {
height: 38px;
}
.ml-table {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 22px;
overflow: hidden;
}
.ml-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) 140px 110px 240px;
gap: 10px 20px;
align-items: center;
padding: 18px 22px;
border-bottom: 1px solid #f0eee9;
}
.ml-row .c1 {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ml-row .t {
font-weight: 600;
}
.ml-row .t.nw {
white-space: nowrap;
}
.ml-row .s {
font-size: 13px;
color: var(--muted);
}
.ml-row .mono-s {
font-family: var(--mono);
font-size: 13px;
color: var(--muted);
}
.ml-row .amt {
font-weight: 600;
font-size: 17px;
}
.ml-row .amt-s {
font-weight: 600;
}
.b-pdf {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
text-decoration: none;
transition: border-color 200ms ease, background-color 200ms ease;
}
.b-pdf:hover {
border-color: var(--ink);
background: #fff;
color: var(--ink);
}
.ml-projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 18px;
}
.ml-proj {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 22px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.ml-proj .hd {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
}
.ml-proj .t {
font-weight: 600;
font-size: 18px;
}
.ml-proj .hd a {
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.ml-proj .ph {
font-size: 14px;
color: var(--muted);
}
.ml-proj .bar {
height: 10px;
border-radius: 999px;
background: var(--surface-2);
overflow: hidden;
}
.ml-proj .bar > div {
height: 100%;
background: var(--pink);
border-radius: 999px;
}
.ml-proj .ft {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--muted);
}
.ml-files {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.ml-file {
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--card-border);
border-radius: 18px;
padding: 18px;
display: flex;
gap: 14px;
align-items: center;
transition: border-color 200ms ease;
}
.ml-file:hover {
border-color: var(--ink);
color: var(--ink);
}
.ml-file .ext {
width: 44px;
height: 52px;
border-radius: 10px;
color: #fff;
font-family: var(--mono);
font-size: 11px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
flex: none;
}
.ext-pink { background: var(--pink); }
.ext-ink { background: var(--ink); }
.ext-taupe { background: #8a7f6e; }
.ext-green { background: #1f7a3f; }
.ml-file > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ml-file .t {
font-weight: 600;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ml-file .s {
font-size: 12px;
color: var(--muted-2);
}
.ml-tickets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 18px;
align-items: start;
}
.ml-tk-list {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 22px;
overflow: hidden;
}
.ml-tk {
width: 100%;
text-align: left;
border: 0;
border-bottom: 1px solid #f0eee9;
background: #fff;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
font: inherit;
color: inherit;
}
.ml-tk.on {
background: var(--bg);
}
.ml-tk .r {
display: flex;
justify-content: space-between;
gap: 10px;
}
.ml-tk .id,
.ml-thread .id {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.ml-tk .pill {
padding: 3px 10px;
font-size: 12px;
}
.ml-tk .t {
font-weight: 600;
font-size: 15px;
}
.ml-tk .w {
font-size: 13px;
color: var(--muted);
}
.ml-tk-box {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 22px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 420px;
}
.ml-thread {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.ml-thread .hd {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
flex-wrap: wrap;
}
.ml-thread h2 {
font-size: 19px;
font-weight: 600;
line-height: normal;
}
.ml-thread .msgs {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.ml-msg {
align-self: flex-start;
max-width: 82%;
display: flex;
flex-direction: column;
gap: 4px;
}
.ml-msg .b {
padding: 12px 16px;
border-radius: 18px;
background: var(--bg);
color: var(--ink);
font-size: 15px;
line-height: 1.5;
}
.ml-msg .w {
font-size: 12px;
color: var(--muted-2);
text-align: left;
}
.ml-msg.me {
align-self: flex-end;
}
.ml-msg.me .b {
background: var(--ink);
color: var(--bg);
}
.ml-msg.me .w {
text-align: right;
}
.ml-reply {
display: flex;
gap: 10px;
border-top: 1px solid #f0eee9;
padding-top: 16px;
}
.ml-reply input {
flex: 1;
min-width: 0;
height: 48px;
padding: 0 16px;
border: 1px solid var(--input-border);
border-radius: 999px;
font: inherit;
font-size: 15px;
outline: none;
}
.ml-reply input:focus {
border-color: var(--pink);
}
.ml-reply button,
.ml-profile-f button {
height: 48px;
padding: 0 20px;
border: 0;
border-radius: 999px;
background: var(--pink);
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ml-profile {
background: #fff;
border: 1px solid var(--card-border);
border-radius: 22px;
padding: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 18px;
max-width: 880px;
}
.ml-profile-f {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
}
.ml-profile-f button {
padding: 0 24px;
}
.ml-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: none;
justify-content: space-around;
padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
background: var(--ink);
}
.ml-tabs button {
flex: 1;
min-height: 52px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--input-border);
font: inherit;
font-size: 11px;
cursor: pointer;
}
.ml-tabs button[aria-current="page"] {
color: #fff;
}
.ml-tabs button > span {
font-size: 18px;
}
.ml-chat-w {
position: fixed;
right: clamp(14px, 2.4vw, 28px);
bottom: 24px;
z-index: 30;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.ml-chat {
width: min(92vw, 360px);
height: min(70vh, 500px);
background: #fff;
border-radius: 24px;
box-shadow: 0 30px 60px -20px rgba(31, 30, 27, 0.4);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--card-border);
}
.ml-chat .hd {
padding: 16px 18px;
background: var(--ink);
color: var(--bg);
display: flex;
align-items: center;
gap: 12px;
}
.ml-chat .av {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--pink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.ml-chat .av > span {
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #34c759;
box-shadow: 0 0 0 2px var(--ink);
}
.ml-chat .hd > div {
display: flex;
flex-direction: column;
}
.ml-chat .n {
font-weight: 600;
font-size: 15px;
}
.ml-chat .hd .s {
font-size: 12px;
color: var(--on-dark-muted);
}
.ml-chat .bd {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg);
}
.ml-chat .m {
align-self: flex-start;
max-width: 80%;
padding: 10px 14px;
border-radius: 16px;
background: #fff;
color: var(--ink);
font-size: 14px;
line-height: 1.45;
}
.ml-chat .m.me {
align-self: flex-end;
background: var(--pink);
color: #fff;
}
.ml-chat .m.typing {
color: var(--muted-2);
line-height: normal;
}
.ml-chat .ft {
display: flex;
gap: 8px;
padding: 12px;
border-top: 1px solid #f0eee9;
}
.ml-chat .ft input {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 1px solid var(--input-border);
border-radius: 999px;
font: inherit;
font-size: 14px;
outline: none;
}
.ml-chat .ft input:focus {
border-color: var(--pink);
}
.ml-chat .ft button {
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--pink);
color: #fff;
font-size: 16px;
cursor: pointer;
}
.ml-chat-btn {
width: 60px;
height: 60px;
border-radius: 50%;
border: 0;
background: var(--pink);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14px 30px -10px rgba(240, 20, 90, 0.6);
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ml-chat-btn:active {
transform: scale(0.92);
}
.ml-chat-btn > span {
font-size: 24px;
line-height: 1;
}
.ml-pay {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.ml-pay > .bd {
position: absolute;
inset: 0;
background: rgba(31, 30, 27, 0.5);
}
.ml-pay .box {
position: relative;
width: min(100%, 480px);
background: var(--bg);
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 40px 80px -30px rgba(31, 30, 27, 0.5);
}
.ml-pay-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.ml-pay-form .hd {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.ml-pay-form .hd > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.ml-pay-form .hd .id {
font-family: var(--mono);
font-size: 12px;
color: var(--muted-2);
}
.ml-pay-form .hd .amt {
font-family: var(--display);
font-weight: 700;
font-size: 36px;
line-height: 1;
}
.ml-pay-form .hd .t {
font-size: 14px;
color: var(--muted);
}
.ml-pay-form .hd button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: var(--surface-2);
font-size: 18px;
cursor: pointer;
}
.ml-pay-m {
display: flex;
flex-direction: column;
gap: 8px;
}
.ml-pay-m button {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 10px 16px;
border-radius: 16px;
border: 1.5px solid var(--input-border);
background: #fff;
font: inherit;
font-size: 15px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: border-color 200ms ease;
}
.ml-pay-m .ic {
width: 36px;
text-align: center;
font-size: 18px;
}
.ml-pay-m .lb {
flex: 1;
}
.ml-pay-m .rd {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--input-border);
background: #fff;
box-shadow: inset 0 0 0 3px #fff;
}
.ml-pay-m [aria-pressed="true"],
.ml-pay-m [aria-pressed="true"] .rd {
border-color: var(--pink);
}
.ml-pay-m [aria-pressed="true"] .rd {
background: var(--pink);
}
.ml-iban {
padding: 14px 16px;
border-radius: 14px;
background: #fff;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
}
.ml-pay-go {
height: 56px;
border: 0;
border-radius: 999px;
background: var(--pink);
color: #fff;
font: inherit;
font-size: 17px;
font-weight: 600;
cursor: pointer;
}
.ml-pay-go:hover {
background: #d00f4e;
}
.ml-pay-note {
font-size: 12px;
color: var(--muted-2);
text-align: center;
}
.ml-pay-done {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 20px 0;
}
.ml-pay-done .t {
font-family: var(--display);
font-weight: 700;
font-size: 28px;
}
.ml-pay-done .s {
font-size: 15px;
color: var(--muted);
}
.ml-pay-done button {
height: 48px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--ink);
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ml-pdf {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 3vw, 40px);
}
.ml-pdf > .bd {
position: absolute;
inset: 0;
background: rgba(20, 19, 17, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
}
.ml-pdf .card {
position: relative;
width: min(920px, 100%);
height: min(92vh, 1200px);
display: flex;
flex-direction: column;
background: var(--bg);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
opacity: 0;
}
.ml-pdf .hd {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px 14px 22px;
border-bottom: 1px solid var(--border);
}
.ml-pdf .tag {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--pink);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
font-family: var(--mono);
}
.ml-pdf .t {
font-weight: 600;
font-size: 16px;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ml-pdf .dl,
.ml-pdf .nt {
display: flex;
align-items: center;
height: 40px;
padding: 0 16px;
border-radius: 999px;
background: var(--ink);
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.ml-pdf .nt {
padding: 0 14px;
background: none;
border: 1px solid var(--input-border);
color: var(--ink);
font-weight: 400;
}
.ml-pdf .hd button {
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: var(--surface-2);
cursor: pointer;
font-size: 20px;
line-height: 1;
color: var(--ink);
}
.ml-pdf .sw {
flex: none;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.ml-pdf .seg {
display: inline-flex;
}
.ml-pdf .seg button {
height: 36px;
padding: 0 16px;
font-size: 14px;
white-space: nowrap;
}
.ml-pdf iframe {
flex: 1;
width: 100%;
border: 0;
background: #e4e2dd;
}
.invoice-page {
margin: 0;
background: #f5f5f4;
}
.invoice-page * {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.invoice-page a {
color: var(--ink);
}
.invoice-page a:hover {
color: var(--pink);
}
.inv-desk {
min-height: 100vh;
padding: 48px 24px;
}
.inv-page {
width: 210mm;
height: 297mm;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 12mm 14mm 9mm;
font-family: var(--sans);
color: var(--ink);
background: #fff;
font-size: 9pt;
line-height: 1.45;
border-radius: 7px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.inv-page dl,
.inv-page dd {
margin: 0;
}
.inv-page dt {
font-weight: 400;
}
.inv-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.inv-logo {
height: 10mm;
width: auto;
display: block;
}
.inv-title {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
}
.inv-title .t {
font-family: var(--display);
font-weight: 700;
font-size: 19pt;
line-height: 1.1;
}
.inv-title .no {
font-family: var(--mono);
font-size: 9pt;
}
.inv-rule {
display: flex;
align-items: center;
gap: 2mm;
margin-top: 7mm;
}
.inv-rule span:first-child {
flex: none;
width: 22mm;
height: 1.4mm;
border-radius: 2mm;
background: var(--pink);
}
.inv-rule span:last-child {
flex: 1;
height: 0.3mm;
background: var(--border);
}
.inv-parties {
display: grid;
grid-template-columns: 1fr 1.15fr 0.85fr;
gap: 7mm;
margin-top: 4mm;
}
.inv-party {
display: flex;
flex-direction: column;
gap: 2px;
}
.inv-page .lb {
font-family: var(--mono);
font-size: 7pt;
color: var(--muted-3);
}
.inv-party .lb {
margin-bottom: 4px;
}
.inv-party strong {
font-weight: 600;
}
.inv-meta {
display: flex;
flex-direction: column;
gap: 5px;
}
.inv-meta > div {
display: flex;
justify-content: space-between;
gap: 8px;
}
.inv-meta dt,
.inv-totals dt {
color: var(--muted-2);
}
.inv-meta dd.b {
font-weight: 600;
}
.inv-meta .mark {
flex-direction: column;
gap: 2px;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--border);
}
.inv-meta .mark dd {
font-family: var(--mono);
font-size: 8.5pt;
}
.inv-lines {
width: 100%;
margin-top: 6mm;
border-collapse: collapse;
font-size: 8.5pt;
}
.inv-lines thead tr {
font-family: var(--mono);
font-size: 6.8pt;
color: var(--muted-2);
}
.inv-lines th {
padding: 0 0 7px;
font-weight: 400;
text-align: right;
}
.inv-lines th.l {
text-align: left;
}
.inv-lines th:nth-child(1) { width: 5%; }
.inv-lines th:nth-child(2) { width: 6%; }
.inv-lines th:nth-child(4) { width: 6%; }
.inv-lines th:nth-child(5) { width: 9%; }
.inv-lines th:nth-child(6) { width: 8%; }
.inv-lines th:nth-child(7) { width: 9%; }
.inv-lines th:nth-child(8) { width: 6%; }
.inv-lines th:nth-child(9) { width: 8%; }
.inv-lines th:nth-child(10) { width: 10%; }
.inv-lines tbody {
text-align: right;
}
.inv-lines tbody tr {
border-top: 1px solid var(--border);
}
.inv-lines tbody tr:last-child {
border-bottom: 1px solid var(--border);
}
.inv-lines td {
padding: 5px 0;
}
.inv-lines td.n,
.inv-lines td.code,
.inv-lines td.desc {
text-align: left;
}
.inv-lines td.n,
.inv-lines td.mut {
color: var(--muted-3);
}
.inv-lines td.code {
font-family: var(--mono);
}
.inv-lines td.desc {
padding-right: 8px;
}
.inv-lines td.tot {
font-weight: 600;
}
.inv-sum {
display: grid;
grid-template-columns: 1fr 78mm;
gap: 8mm;
margin-top: 5mm;
align-items: start;
}
.inv-notes {
display: flex;
flex-direction: column;
gap: 4px;
}
.inv-totals {
display: flex;
flex-direction: column;
gap: 5px;
}
.inv-totals > div {
display: flex;
justify-content: space-between;
}
.inv-totals .b {
font-weight: 600;
}
.inv-totals .b dt {
color: inherit;
}
.inv-totals .ded {
color: var(--muted-3);
font-size: 8pt;
padding-top: 5px;
border-top: 1px solid var(--border);
}
.inv-totals .ded dt {
color: inherit;
}
.inv-totals .due {
align-items: baseline;
margin-top: 4px;
padding: 10px 14px;
border-radius: 10px;
background: var(--pink);
color: #fff;
}
.inv-totals .due dt {
color: inherit;
font-weight: 600;
}
.inv-totals .due dd {
font-family: var(--display);
font-weight: 700;
font-size: 16pt;
line-height: 1;
}
.inv-pay {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6mm;
margin-top: 6mm;
}
.inv-box {
display: flex;
flex-direction: column;
gap: 3px;
padding: 4.5mm;
border-radius: 10px;
background: var(--bg);
}
.inv-box .lb {
margin-bottom: 2px;
}
.invoice-page .inv-box a {
font-weight: 600;
color: var(--pink);
text-decoration: none;
}
.inv-box .iban {
font-family: var(--mono);
font-size: 8pt;
}
.inv-box strong {
font-weight: 600;
}
.inv-fill {
flex: 1 0 6mm;
}
.inv-foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 8mm;
padding-top: 5mm;
border-top: 1px solid var(--border);
}
.inv-foot .inv-legal {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 7pt;
color: var(--muted-2);
}
.inv-foot .qr {
flex: none;
box-sizing: content-box;
width: 22mm;
height: 22mm;
border: 1px dashed var(--input-border-2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--mono);
font-size: 6.5pt;
color: var(--muted-3);
}
@page invoice {
size: A4;
margin: 0;
}
@media print {
.invoice-page {
background: none;
}
.inv-desk {
min-height: 0;
padding: 0;
}
.inv-page {
page: invoice;
border-radius: 0;
box-shadow: none;
margin: 0;
}
}
@media only screen and (max-width: 820px) {
.ml-side {
display: none;
}
.ml-top-ic {
display: block;
}
.ml-main {
padding-bottom: 110px;
}
.ml-tabs {
display: flex;
}
.ml-chat-w {
bottom: 86px;
}
}
@media only screen and (max-width: 600px) {
.ml-row,
.ml-quote {
grid-template-columns: 1fr;
}
.ml-quote .acts,
.ml-row .acts.nowrap {
justify-content: flex-start;
}
}
@media only screen and (max-width: 991px) {
.inv-page {
zoom: 0.85;
}
}
@media only screen and (max-width: 767px) {
.flow-head {
padding-top: 18px;
padding-bottom: 18px;
}
.flow-logo img {
height: 32px;
}
.flow-nav {
margin-left: 0;
}
.sum-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 16px;
}
.sum-row dd {
grid-column: 1 / -1;
grid-row: 2;
}
.cart-steps .sep {
width: 16px;
}
.cart-head {
row-gap: 16px;
}
.ci-price {
flex-direction: row;
align-items: baseline;
gap: 10px;
}
.cs-total dd {
font-size: 28px;
}
.lm-head {
padding: 12px;
gap: 10px;
}
.lm-tabs button {
height: 40px;
padding: 0 14px;
font-size: 14px;
}
.inv-desk {
padding: 12px;
}
.inv-page {
zoom: 0.5;
}
}
@media only screen and (max-width: 420px) {
.opt {
font-size: 16px;
}
.flow-next {
padding: 0 24px;
}
.cart-steps {
gap: 8px;
font-size: 13px;
}
.cart-steps li {
gap: 8px;
}
.cart-steps .sep {
width: 10px;
}
.lm-panel {
border-radius: 22px;
}
.lm-foot {
justify-content: space-between;
}
.inv-page {
zoom: 0.44;
}
.ml-pdf .sw {
padding: 8px 12px;
}
.ml-pdf .seg button {
padding: 0 12px;
font-size: 13px;
}
}
.admin-bar .site-nav {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .site-nav {
top: 46px;
}
}
/*!
* Responsive Styles v1.0.0
* Copyright 2027 web.lab
*
* Το design είναι ρευστό (clamp, auto-fit grids). Εδώ μόνο ό,τι δεν
* χωράει: το header σε στενές οθόνες και οι σκηνές της αρχικής σε κινητό.
*/
@media only screen and (max-width: 991px) {
.btn-cta {
display: none;
}
}
@media only screen and (max-width: 767px) {
.nav-inner {
padding-top: 14px;
padding-bottom: 14px;
column-gap: 10px;
}
.nav-brand {
gap: 12px;
}
.nav-brand .logo img {
height: 34px;
}
.years {
padding-left: 12px;
}
.years-num {
font-size: 24px;
}
.btn-mylab {
height: 40px;
padding: 0 14px;
font-size: 15px;
}
.menu-btn {
padding-left: 6px;
}
.menu-btn .menu-label {
display: none;
}
.megamenu-inner {
align-content: flex-start;
padding-top: 96px;
}
.mm-list a[data-mi],
.mm-sub-go {
font-size: clamp(36px, 10vw, 48px);
}
.mm-side {
flex-basis: 100%;
}
.mm-bubbles {
display: none;
}
.home-hero {
min-height: 0;
gap: 40px;
}
.hero-bubbles {
flex-basis: 100%;
max-width: 420px;
margin: 0 auto;
}
.work-panel {
width: 84vw;
}
.svc-orb {
width: min(92vw, 58vh);
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
}
.svc-title {
top: calc(var(--navh, 70px) + 20px);
}
.svc-descs {
bottom: 32px;
min-height: 0;
}
.svc-descs p {
font-size: 16px;
}
.svc-dots {
right: 6px;
}
.logo-grid {
grid-template-columns: minmax(0, 1fr);
}
.logo-card {
aspect-ratio: 2 / 1;
}
.why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.why-item:last-child {
grid-column: 1 / -1;
}
.why-item:last-child .why-bub {
width: min(50%, 220px);
}
.f-bottom {
margin-top: 72px;
}
}