/* Marcellus, self-hosted (SIL Open Font License) — no request to Google Fonts */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/web/content/4045/marcellus-400.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: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/web/content/4046/marcellus-ext-400.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.ng-site {
--ivory: #f4ebe4;
  --paper: #e8dfd5;
  --ink: #24251f;
  --olive: #59604d;
  --sage: #a6ab97;
  --clay: #9b8476;
  --line: rgba(36, 37, 31, .22);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
.ng-site * {
box-sizing: border-box;
}


.ng-site {
color: var(--ink); background: var(--ivory); font-family: "Marcellus", Georgia, serif;
}
.ng-site button, .ng-site a {
font: inherit;
}
.ng-site a {
color: inherit;
}
.ng-site .intro-sequence {
position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; overflow: hidden; color: var(--ink); background: var(--ivory); transition: opacity .7s var(--ease), visibility .7s;
}
.ng-site .intro-orbit {
position: relative; width: min(72vmin, 660px); aspect-ratio: 1; transform: scale(.84); opacity: 0; transition: transform 1.05s var(--ease), opacity .65s ease, filter .9s ease;
}
.ng-site .intro-visual {
position: absolute; inset: 4%; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.72), rgba(218,200,201,.38) 55%, rgba(173,164,169,.2)); box-shadow: 0 30px 100px rgba(36,37,31,.1);
}
.ng-site .intro-visual img {
width: 100%; height: 100%; object-fit: contain; transform: scale(1.06); transition: transform 1.8s var(--ease);
}
.ng-site .intro-ring {
position: absolute; border: 1px solid rgba(36,37,31,.18); border-radius: 50%;
}
.ng-site .intro-ring-one {
inset: 0;
}
.ng-site .intro-ring-two {
inset: -5%; opacity: .45;
}
.ng-site .intro-loading {
position: absolute; left: 50%; bottom: 7vh; width: min(250px, 54vw); transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; opacity: 0; transition: opacity .4s ease;
}
.ng-site .intro-loading span {
font-size: 13px; letter-spacing: .06em;
}
.ng-site .intro-loading i {
display: block; width: 100%; height: 1px; background: rgba(36,37,31,.17); overflow: hidden;
}
.ng-site .intro-loading b {
display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left;
}
.ng-site .intro-sequence.is-playing .intro-orbit {
opacity: 1; transform: scale(1);
}
.ng-site .intro-sequence.is-playing .intro-visual img {
transform: scale(1);
}
.ng-site .intro-sequence.is-playing .intro-loading {
opacity: 1;
}
.ng-site .intro-sequence.is-playing .intro-loading b {
animation: intro-progress 1.65s var(--ease) forwards;
}
.ng-site .intro-sequence.is-closing .intro-orbit {
opacity: 0; transform: scale(.06); filter: blur(8px);
}
.ng-site .intro-sequence.is-closing .intro-loading {
opacity: 0;
}
.ng-site .intro-sequence.is-revealing {
opacity: 0; visibility: hidden; pointer-events: none;
}
@keyframes intro-progress {
to {
transform: scaleX(1);
}
}
.ng-site.intro-pending .site-header, .ng-site.intro-pending .scene-progress {
opacity: 0; transform: translateY(-14px);
}
.ng-site.intro-pending .scene-progress {
transform: translateY(calc(-50% - 14px));
}
.ng-site .site-header {
opacity: 1; transition: color .5s var(--ease), opacity .75s var(--ease), transform .75s var(--ease);
}
.ng-site .scene-progress {
opacity: 1; transition: color .5s, opacity .75s var(--ease), transform .75s var(--ease);
}
.ng-site.intro-pending .scene.is-active .scene-copy > *, .ng-site.intro-pending .scene.is-active .scroll-cue {
opacity: 0; transform: translateY(28px);
}
.ng-site.intro-complete .scene.is-active .scene-copy > *, .ng-site.intro-complete .scene.is-active .scroll-cue {
transition-delay: .18s;
}
.ng-site .skip-link {
position: fixed; z-index: 200; top: 8px; left: 8px; padding: 10px 14px; background: var(--ivory); transform: translateY(-150%); transition: transform .2s;
}
.ng-site .skip-link:focus {
transform: none;
}
.ng-site .site-header {
position: fixed; z-index: 100; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px 34px; color: var(--header-color, var(--ivory)); pointer-events: none;
}
.ng-site .brand, .ng-site .header-actions {
pointer-events: auto;
}
.ng-site .brand img {
display: block; width: 128px; max-height: 36px; filter: var(--logo-filter, brightness(0) invert(1)); transition: filter .5s;
}
.ng-site .header-actions {
display: flex; align-items: center; gap: 20px; font-family: Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
}
.ng-site .motion-toggle {
border: 0; color: inherit; background: none; padding: 10px 0; cursor: pointer;
}
.ng-site .contact-link {
text-decoration: none; padding: 10px 0;
}
.ng-site .page-menu {
position: relative;
}
.ng-site .page-menu summary {
padding: 12px 0; cursor: pointer; list-style: none;
}
.ng-site .page-menu summary::-webkit-details-marker {
display: none;
}
.ng-site .page-menu summary span {
margin-left: 8px; display: inline-block;
}
.ng-site .page-menu[open] summary span {
transform: rotate(45deg);
}
.ng-site .page-menu-links {
position: absolute; right: 0; top: 100%; min-width: 190px; padding: 12px; border: 1px solid #bba9ae; border-radius: 18px; background: #f6efec; color: #302b30; box-shadow: 0 12px 30px #302b3012;
}
.ng-site .page-menu-links a {
display: block; padding: 14px 12px; text-decoration: none; text-transform: none; letter-spacing: .02em; font-size: 13px; border-radius: 9px;
}
.ng-site .page-menu-links a:hover, .ng-site .page-menu-links a[aria-current="page"] {
background: #e8dddd;
}
.ng-site .page-menu summary:focus-visible, .ng-site .page-menu-links a:focus-visible {
outline: 2px solid currentColor; outline-offset: 3px;
}
.ng-site .contact-link:hover, .ng-site .contact-link[aria-current="page"] {
text-decoration: underline; text-underline-offset: 5px;
}
@media (max-width: 480px) {
.ng-site .header-actions {
gap: 10px;
}
.ng-site .header-actions .motion-toggle {
max-width: 46px; font-size: 10px;
}
}
.ng-site .reserve-link {
padding: 12px 19px; border: 1px solid currentColor; border-radius: 99px; text-decoration: none; transition: color .25s, background .25s;
}
.ng-site .reserve-link:hover {
color: var(--ink); background: var(--ivory);
}
.ng-site.light-header {
--header-color: var(--ink); --logo-filter: none;
}
.ng-site .scene-progress {
position: fixed; z-index: 90; top: 50%; right: 30px; transform: translateY(-50%); display: grid; justify-items: center; gap: 9px; color: var(--progress-color, var(--ivory)); font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .08em;
}
.ng-site .scene-progress {
gap: 0;
}
.ng-site .scene-progress a {
position: relative; display: grid; place-items: center; width: 28px; height: 28px; color: inherit; text-decoration: none; border-radius: 12px;
}
.ng-site .scene-progress a::after {
content: ""; display: block; width: 3px; height: 14px; border-radius: 2px; background: currentColor; opacity: .5; transition: height .35s var(--ease), opacity .35s ease;
}
.ng-site .scene-progress a[aria-current]::after {
height: 24px; opacity: 1;
}
.ng-site .scene-progress a:hover::after, .ng-site .scene-progress a:focus-visible::after {
opacity: .8;
}
.ng-site.light-header {
--progress-color: var(--ink);
}
.ng-site .scroll-track {
position: fixed; inset: 0; overflow: hidden auto; overscroll-behavior: none; scrollbar-width: none; scroll-snap-type: y mandatory;
}
.ng-site .scroll-track::-webkit-scrollbar {
display: none;
}
.ng-site .scene {
position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; scroll-snap-align: start; isolation: isolate;
}
.ng-site .scene-copy {
position: absolute; z-index: 4;
}
.ng-site .eyebrow {
margin: 0 0 24px; font-family: Arial, sans-serif; font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .2em;
}
.ng-site h1, .ng-site h2 {
margin: 0; font-weight: 400; letter-spacing: -.045em; line-height: .96; text-wrap: balance;
}
.ng-site h1 {
font-size: clamp(58px, 7.6vw, 126px);
}
.ng-site h2 {
font-size: clamp(54px, 7.2vw, 116px);
}
.ng-site p {
line-height: 1.55;
}
.ng-site .scene-hero {
color: var(--ivory); background: #30352e;
}
.ng-site .hero-image, .ng-site .wear-image {
position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.04); transition: transform 1.8s var(--ease);
}
.ng-site .hero-image {
background-image: url("/web/image/4033-78a67b8a/hero.webp");
}
.ng-site .scene.is-active .hero-image, .ng-site .scene.is-active .wear-image {
transform: scale(1);
}
.ng-site .scene-shade {
position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,23,19,.75) 0%, rgba(20,23,19,.25) 50%, rgba(20,23,19,.08) 100%);
}
.ng-site .hero-copy {
left: 7vw; top: 50%; width: min(880px, 73vw); transform: translateY(-43%);
}
.ng-site .hero-copy .intro {
width: min(430px, 80%); margin: 28px 0 0; font-size: 15px;
}
.ng-site .scroll-cue {
position: absolute; z-index: 4; left: 7vw; bottom: 28px; display: flex; align-items: center; gap: 14px; margin: 0; font: 10px Arial, sans-serif; text-transform: uppercase; letter-spacing: .15em;
}
.ng-site .scroll-cue span {
display: block; width: 42px; height: 1px; background: currentColor; transform-origin: left; animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
0%, 100% {
transform: scaleX(.25); opacity: .4;
}
50% {
transform: scaleX(1); opacity: 1;
}
}
.ng-site .scene-question {
background: var(--ivory);
}
.ng-site .split-copy {
inset: 0; padding: 16vh 10vw 10vh; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: auto 1fr; column-gap: 8vw; align-items: end;
}
.ng-site .split-copy .eyebrow {
grid-column: 1 / -1; align-self: start;
}
.ng-site .split-copy h2 {
align-self: end;
}
.ng-site .copy-side {
border-left: 1px solid var(--line); padding-left: 32px; align-self: end; max-width: 420px;
}
.ng-site .copy-side .statement {
font-size: 27px; margin: 0 0 22px;
}
.ng-site .copy-side p:last-child {
font-family: Arial, sans-serif; font-size: 14px; line-height: 1.65;
}
.ng-site .process-scene {
background: var(--paper);
}
.ng-site .scene-speak {
background: var(--olive); color: var(--ivory);
}
.ng-site .scene-relax {
background: #d7d5c9;
}
.ng-site .process-number {
position: absolute; z-index: -1; left: 4vw; bottom: -13vh; font-size: min(56vw, 780px); line-height: .75; color: rgba(36,37,31,.055); letter-spacing: -.1em;
}
.ng-site .scene-speak .process-number {
left: auto; right: -1vw; color: rgba(244,235,228,.07);
}
.ng-site .process-copy {
left: 10vw; top: 50%; width: 72vw; transform: translateY(-48%);
}
.ng-site .process-copy.align-right {
left: auto; right: 11vw; width: 65vw; text-align: right;
}
.ng-site .process-copy > p:last-child {
margin-top: 30px; font-size: 17px;
}
.ng-site .scene-wear {
color: var(--ivory); background: #3a403b;
}
.ng-site .wear-image {
background-image: url("/web/image/4036-0c9883be/wrist.webp");
}
.ng-site .scene-wear .scene-shade {
background: linear-gradient(90deg, rgba(25,27,24,.76), rgba(25,27,24,.15));
}
.ng-site .wear-copy {
left: 8vw; bottom: 10vh; width: min(820px, 72vw);
}
.ng-site .wear-copy p:last-child {
max-width: 520px; margin-top: 28px; font-size: 16px;
}
.ng-site .scene-trust {
color: var(--ivory); background: var(--ink);
}
.ng-site .trust-copy {
inset: 0; padding: 13vh 8vw 7vh; display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 8vw; align-items: center;
}
.ng-site .trust-copy > .eyebrow {
position: absolute; top: 12vh; left: 8vw;
}
.ng-site .trust-copy h2 {
font-size: clamp(55px, 6.4vw, 100px);
}
.ng-site .trust-grid {
display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(244,235,228,.25); border-left: 1px solid rgba(244,235,228,.25);
}
.ng-site .trust-grid article {
min-height: 160px; padding: 24px; border-right: 1px solid rgba(244,235,228,.25); border-bottom: 1px solid rgba(244,235,228,.25); display: flex; flex-direction: column;
}
.ng-site .trust-grid b {
font-size: 34px; font-weight: 400;
}
.ng-site .trust-grid span {
margin-top: auto; font-size: 15px;
}
.ng-site .trust-grid small {
margin-top: 6px; font: 10px/1.4 Arial, sans-serif; opacity: .6;
}
.ng-site .scene-final {
color: var(--ivory); background: #4a4e43;
}
.ng-site .final-product {
position: absolute; inset: 0 0 0 48%; background: url("/web/image/4037-f9bca66f/material.webp") center / cover no-repeat; opacity: .88;
}
.ng-site .final-product::after {
content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #4a4e43 0%, transparent 55%);
}
.ng-site .final-copy {
left: 7vw; top: 49%; width: min(670px, 50vw); transform: translateY(-50%);
}
.ng-site .final-copy h2 {
font-size: clamp(58px, 6.5vw, 104px);
}
.ng-site .final-copy > p:not(.eyebrow) {
width: min(430px, 90%); margin: 26px 0 34px; font-size: 15px;
}
.ng-site .primary-cta {
width: min(380px, 100%); padding: 8px 8px 8px 24px; border: 1px solid rgba(244,235,228,.65); border-radius: 99px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; font: 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .13em; transition: background .3s, color .3s;
}
.ng-site .primary-cta i {
width: 45px; height: 45px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--ink); font-size: 18px; font-style: normal;
}
.ng-site .primary-cta:hover {
color: var(--ink); background: var(--ivory);
}
.ng-site .scene-final footer {
position: absolute; z-index: 5; left: 7vw; right: 7vw; bottom: 24px; display: flex; justify-content: space-between; font: 9px Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; opacity: .72;
}
.ng-site .ambient {
position: fixed; z-index: 20; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .6s;
}
.ng-site.show-ambient .ambient {
opacity: 1;
}
.ng-site .thought {
position: absolute; border: 1px solid currentColor; border-radius: 50%; color: rgba(36,37,31,.22); animation: drift 8s ease-in-out infinite alternate;
}
.ng-site .thought-a {
width: 18px; height: 18px; left: 19%; top: 21%;
}
.ng-site .thought-b {
width: 9px; height: 9px; right: 16%; top: 29%; animation-delay: -3s;
}
.ng-site .thought-c {
width: 26px; height: 26px; right: 24%; bottom: 20%; animation-delay: -5s;
}
@keyframes drift {
to {
transform: translate3d(20px, -22px, 0);
}
}
.ng-site .product-stage {
--px: 0px; --py: 0px; position: fixed; z-index: 30; left: 50%; top: 50%; width: clamp(280px, 34vw, 520px); margin: 0; pointer-events: none; opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.72) rotate(-6deg); transition: left .9s var(--ease), top .9s var(--ease), width .9s var(--ease), opacity .5s, transform .9s var(--ease);
}
.ng-site .product-stage img {
position: relative; z-index: 2; display: block; width: 100%; border-radius: 50%; box-shadow: 0 30px 80px rgba(30,32,26,.17);
}
.ng-site .product-stage figcaption {
position: absolute; z-index: 3; right: 4%; bottom: 7%; padding: 7px 11px; border-radius: 99px; background: rgba(244,235,228,.84); backdrop-filter: blur(8px); font: 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .15em;
}
.ng-site .product-halo {
position: absolute; inset: -12%; border: 1px solid rgba(36,37,31,.12); border-radius: 50%; animation: halo 4s ease-in-out infinite;
}
@keyframes halo {
50% {
transform: scale(1.07); opacity: .35;
}
}
.ng-site[data-scene="1"] .product-stage {
left: 73%; top: 35%; opacity: .92; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.66) rotate(7deg);
}
.ng-site[data-scene="2"] .product-stage {
left: 76%; top: 52%; opacity: 1; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.85) rotate(-3deg);
}
.ng-site[data-scene="3"] .product-stage {
left: 25%; top: 52%; opacity: 1; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.82) rotate(8deg);
}
.ng-site[data-scene="4"] .product-stage {
left: 52%; top: 32%; opacity: .95; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.62) rotate(0);
}
.ng-site .scene-copy > * {
opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.ng-site .scene.is-active .scene-copy > * {
opacity: 1; transform: none;
}
.ng-site .scene.is-active .scene-copy > *:nth-child(2) {
transition-delay: .09s;
}
.ng-site .scene.is-active .scene-copy > *:nth-child(3) {
transition-delay: .17s;
}
.ng-site .scene.is-active .scene-copy > *:nth-child(4) {
transition-delay: .25s;
}
.ng-site *:focus-visible {
outline: 2px solid currentColor; outline-offset: 4px;
}
@media (max-width: 760px) {
.ng-site .intro-orbit {
width: 86vmin;
}
.ng-site .intro-loading {
bottom: 10vh;
}
.ng-site .site-header {
padding: 18px 18px;
}
.ng-site .brand img {
width: 102px;
}
.ng-site .motion-toggle {
display: none;
}
.ng-site .reserve-link {
padding: 9px 14px;
}
.ng-site .scene-progress {
right: 3px;
}
.ng-site .scene-progress a {
width: 24px; height: 24px;
}
.ng-site .scene-progress a[aria-current]::after {
height: 16px;
}
.ng-site .eyebrow {
margin-bottom: 18px; font-size: 9px;
}
.ng-site h1 {
font-size: clamp(48px, 14vw, 72px);
}
.ng-site h2 {
font-size: clamp(46px, 13vw, 68px);
}
.ng-site .hero-copy {
left: 22px; top: auto; bottom: 15vh; width: calc(100% - 52px); transform: none;
}
.ng-site .hero-copy .intro {
width: 92%; font-size: 13px;
}
.ng-site .hero-image {
background-position: 53% center;
}
.ng-site .scroll-cue {
left: 22px; bottom: 22px;
}
.ng-site .split-copy {
padding: 14vh 24px 10vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.ng-site .split-copy h2 {
margin-top: auto;
}
.ng-site .copy-side {
width: 82%; margin-top: 32px; padding-left: 18px; align-self: flex-start;
}
.ng-site .copy-side .statement {
font-size: 22px;
}
.ng-site .process-copy, .ng-site .process-copy.align-right {
left: 24px; right: auto; top: auto; bottom: 12vh; width: calc(100% - 52px); text-align: left; transform: none;
}
.ng-site .process-copy > p:last-child {
margin-top: 22px; font-size: 14px;
}
.ng-site .process-number {
left: -4vw; bottom: 12vh; font-size: 88vw;
}
.ng-site .scene-speak .process-number {
right: -5vw;
}
.ng-site .wear-image {
background-position: 55% center;
}
.ng-site .wear-copy {
left: 22px; bottom: 10vh; width: calc(100% - 48px);
}
.ng-site .trust-copy {
padding: 13vh 24px 7vh; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
.ng-site .trust-copy > .eyebrow {
position: static;
}
.ng-site .trust-copy h2 {
font-size: 12vw; margin-bottom: 34px;
}
.ng-site .trust-grid article {
min-height: 110px; padding: 15px;
}
.ng-site .trust-grid b {
font-size: 24px;
}
.ng-site .trust-grid span {
font-size: 12px;
}
.ng-site .trust-grid small {
font-size: 8px;
}
.ng-site .final-product {
inset: 0; opacity: .42;
}
.ng-site .final-product::after {
background: linear-gradient(0deg, #4a4e43 0%, rgba(74,78,67,.25) 80%);
}
.ng-site .final-copy {
left: 22px; top: auto; bottom: 12vh; width: calc(100% - 48px); transform: none;
}
.ng-site .final-copy h2 {
font-size: 13.2vw;
}
.ng-site .scene-final footer {
left: 22px; right: 22px; bottom: 18px;
}
.ng-site .scene-final footer span:nth-child(2) {
display: none;
}
.ng-site .product-stage {
width: 270px;
}
.ng-site[data-scene="1"] .product-stage {
left: 61%; top: 29%;
}
.ng-site[data-scene="2"] .product-stage {
left: 58%; top: 31%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.72) rotate(-3deg);
}
.ng-site[data-scene="3"] .product-stage {
left: 58%; top: 30%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.7) rotate(6deg);
}
.ng-site[data-scene="4"] .product-stage {
left: 58%; top: 27%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.6);
}
}
@media (prefers-reduced-motion: reduce) {
.ng-site *, .ng-site *::before, .ng-site *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important;
}
}
.ng-site.motion-paused *, .ng-site.motion-paused *::before, .ng-site.motion-paused *::after {
animation-play-state: paused !important;
}
.ng-site {
--pearl: #f6efec;
  --blush: #ead8d5;
  --rose-mist: #d9c3c4;
  --silver: #8c8b90;
  --mulberry: #473741;
  --soft-ink: #302b30;
}
.ng-site {
background: var(--pearl); color: var(--soft-ink);
}
.ng-site .brand-world {
position: fixed; z-index: 0; inset: 0; overflow: hidden; background: linear-gradient(145deg, #f8f3f0 0%, #eee4e1 52%, #e4dddc 100%); transition: background 1.5s var(--ease); pointer-events: none;
}
.ng-site .scroll-track {
z-index: 1; scroll-snap-type: none;
}
.ng-site .scene {
background: transparent;
}
.ng-site .aura {
position: absolute; border-radius: 50%; filter: blur(3px); opacity: .62; transition: transform 1.6s var(--ease), opacity 1.4s ease, background 1.4s ease;
}
.ng-site .aura-one {
width: 58vw; height: 58vw; left: -19vw; top: -20vw; background: radial-gradient(circle at 62% 64%, rgba(225,190,192,.62), rgba(234,216,213,.2) 55%, transparent 72%);
}
.ng-site .aura-two {
width: 67vw; height: 67vw; right: -26vw; bottom: -30vw; background: radial-gradient(circle at 35% 32%, rgba(183,180,186,.55), rgba(228,219,219,.12) 60%, transparent 72%);
}
.ng-site .aura-three {
width: 32vw; height: 32vw; right: 16vw; top: 13vh; background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 69%);
}
.ng-site .calm-orbit {
position: absolute; border: 1px solid rgba(83,66,76,.13); border-radius: 50%; transition: transform 1.7s var(--ease), width 1.7s var(--ease), height 1.7s var(--ease);
}
.ng-site .orbit-one {
width: 56vw; height: 56vw; right: -7vw; top: -11vw;
}
.ng-site .orbit-two {
width: 38vw; height: 38vw; left: 13vw; bottom: -19vw;
}
.ng-site .silver-thread {
position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(98,88,95,.15); stroke-width: 1; transition: transform 1.8s var(--ease), opacity 1.2s ease;
}
.ng-site .silver-thread path:last-child {
stroke-dasharray: 4 11; opacity: .65;
}
.ng-site[data-scene="1"] .aura-one {
transform: translate(24vw, 20vh) scale(.78);
}
.ng-site[data-scene="1"] .aura-two {
transform: translate(-13vw, -10vh) scale(1.08);
}
.ng-site[data-scene="2"] .aura-one {
transform: translate(47vw, 34vh) scale(.55);
}
.ng-site[data-scene="2"] .aura-three {
transform: translate(-36vw, 17vh) scale(1.45);
}
.ng-site[data-scene="3"] .aura-one {
transform: translate(72vw, 8vh) scale(.75);
}
.ng-site[data-scene="3"] .aura-two {
transform: translate(-50vw, -28vh) scale(.78);
}
.ng-site[data-scene="4"] .aura-one {
transform: translate(31vw, 48vh) scale(.52);
}
.ng-site[data-scene="4"] .aura-two {
transform: translate(-18vw, -33vh) scale(1.15);
}
.ng-site[data-scene="5"] .aura-one {
opacity: .38; transform: translate(52vw, 10vh) scale(.9);
}
.ng-site[data-scene="6"] .aura-one {
opacity: .38; transform: translate(52vw, 10vh) scale(.9);
}
.ng-site[data-scene="7"] .brand-world {
background: linear-gradient(145deg, #f8f3f0 0%, #eee4e1 52%, #e4dddc 100%);
}
.ng-site[data-scene="8"] .brand-world {
background: linear-gradient(135deg, #f8f2ef 0%, #eadfdf 56%, #ddd7dc 100%);
}
.ng-site[data-scene="8"] .aura-one {
opacity: .5; transform: translate(46vw, 19vh) scale(.9);
}
.ng-site[data-scene="8"] .aura-two {
opacity: .32; transform: translate(-18vw, -10vh) scale(.8);
}
.ng-site[data-scene="8"] .aura-three {
opacity: .64; transform: translate(18vw, 2vh) scale(1.6);
}
.ng-site .scene-hero {
color: var(--soft-ink);
}
.ng-site .hero-image {
inset: 9vh 5vw 8vh auto; width: 52vw; border-radius: 48% 48% 43% 57% / 40% 54% 46% 60%; background-position: 46% center; box-shadow: 0 35px 100px rgba(69,54,63,.14); opacity: .9;
}
.ng-site .scene-hero .scene-shade {
background: linear-gradient(90deg, rgba(246,239,236,.98) 0%, rgba(246,239,236,.87) 36%, rgba(246,239,236,.06) 67%);
}
.ng-site .hero-copy {
width: min(790px, 66vw);
}
.ng-site .hero-copy .intro {
font-family: Arial, sans-serif;
}
.ng-site .scroll-cue {
color: var(--soft-ink);
}
.ng-site .scene-question, .ng-site .process-scene, .ng-site .scene-speak, .ng-site .scene-relax {
color: var(--soft-ink); background: transparent;
}
.ng-site .scene-speak .process-number {
color: rgba(71,55,65,.055);
}
.ng-site .process-number {
color: rgba(71,55,65,.05);
}
.ng-site .scene-question::before, .ng-site .process-scene::before {
content: ""; position: absolute; inset: 7vh 4vw; z-index: -1; border: 1px solid rgba(71,55,65,.08); border-radius: 48px; background: rgba(255,255,255,.12); backdrop-filter: blur(2px);
}
.ng-site .scene-wear {
color: var(--soft-ink); background: transparent;
}
.ng-site .wear-image {
inset: 10vh auto 9vh 6vw; width: 44vw; border-radius: 54% 46% 56% 44% / 45% 57% 43% 55%; background-position: 50% center; box-shadow: 0 35px 90px rgba(69,54,63,.13); opacity: .9;
}
.ng-site .scene-wear .scene-shade {
background: linear-gradient(270deg, rgba(246,239,236,.96) 0%, rgba(246,239,236,.86) 39%, transparent 67%);
}
.ng-site .wear-copy {
left: auto; right: 6vw; bottom: 15vh; width: 43vw;
}
.ng-site .scene-final {
background: transparent;
}
.ng-site .scene-trust {
color: var(--soft-ink); background: radial-gradient(circle at 78% 17%, rgba(255,255,255,.72), transparent 34%), linear-gradient(145deg, #f8f1ef 0%, #eee2e1 52%, #e5dade 100%);
}
.ng-site .scene-trust::before {
content: ""; position: absolute; z-index: 0; inset: 7vh 4vw; border: 1px solid rgba(71,55,65,.09); border-radius: 48px; background: rgba(255,255,255,.12); backdrop-filter: blur(3px);
}
.ng-site .scene-trust .trust-grid {
border-color: rgba(71,55,65,.18);
}
.ng-site .scene-trust .trust-grid article {
border-color: rgba(71,55,65,.18);
}
.ng-site .scene-final {
color: var(--soft-ink);
}
.ng-site .scene-final::before {
content: ""; position: absolute; z-index: 0; right: 1vw; top: 8vh; width: 52vw; aspect-ratio: 1; border: 1px solid rgba(71,55,65,.11); border-radius: 50%; background: radial-gradient(circle at 48% 45%, rgba(255,255,255,.72), rgba(220,197,201,.26) 52%, transparent 70%);
}
.ng-site .final-product {
z-index: 2; inset: auto 1vw auto auto; top: 50%; width: 56vw; height: 72vh; border-radius: 0; background: none; opacity: .97; filter: drop-shadow(0 35px 36px rgba(54,45,52,.2)); transform: translateY(-50%) rotate(-2deg);
}
.ng-site .final-product img {
display: block; width: 100%; height: 100%; object-fit: contain;
}
.ng-site .final-product::after {
display: none;
}
.ng-site .scene-final .primary-cta {
border-color: rgba(48,43,48,.48);
}
.ng-site .scene-final .primary-cta i {
color: var(--ivory); background: var(--soft-ink);
}
.ng-site .scene-final .primary-cta:hover {
color: var(--ivory); background: var(--soft-ink);
}
.ng-site .product-stage {
width: clamp(360px, 46vw, 700px);
}
.ng-site .product-stage img {
border-radius: 0; box-shadow: none; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 26px 28px rgba(54,45,52,.16));
}
.ng-site .product-stage figcaption {
background: rgba(246,239,236,.72);
}
.ng-site .product-halo {
inset: -2% 4%; border-color: rgba(71,55,65,.12);
}
.ng-site[data-scene="1"] .product-stage {
left: 70%; top: 35%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.78) rotate(3deg);
}
.ng-site[data-scene="2"] .product-stage {
left: 72%; top: 50%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.78) rotate(-2deg);
}
.ng-site[data-scene="3"] .product-stage {
left: 28%; top: 48%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.76) rotate(3deg);
}
.ng-site[data-scene="4"] .product-stage {
left: 58%; top: 29%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.58);
}
.ng-site .site-header, .ng-site .scene-progress {
color: var(--soft-ink);
}
.ng-site .brand img {
filter: brightness(0);
}
.ng-site[data-scene="7"] .site-header, .ng-site[data-scene="7"] .scene-progress {
color: var(--soft-ink);
}
.ng-site[data-scene="7"] .brand img {
filter: brightness(0);
}
.ng-site[data-scene="8"] .site-header, .ng-site[data-scene="8"] .scene-progress {
color: var(--soft-ink);
}
.ng-site[data-scene="8"] .brand img {
filter: brightness(0);
}
.ng-site .process-copy, .ng-site .process-copy.align-right {
width: 43vw;
}
.ng-site .usage-frame {
position: absolute; z-index: 3; top: 14vh; right: 6vw; width: 43vw; height: 70vh; margin: 0; overflow: hidden; border-radius: 48% 52% 45% 55% / 42% 48% 52% 58%; box-shadow: 0 32px 90px rgba(73,56,67,.15);
}
.ng-site .usage-frame::after {
content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.35); border-radius: inherit; pointer-events: none;
}
.ng-site .usage-frame img {
width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.92); transform: scale(1.045); transition: transform 1.6s var(--ease);
}
.ng-site .scene.is-active .usage-frame img {
transform: scale(1);
}
.ng-site .usage-frame figcaption {
position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; justify-content: space-between; gap: 20px; padding: 14px 17px; border-radius: 18px; color: var(--soft-ink); background: rgba(246,239,236,.76); backdrop-filter: blur(15px);
}
.ng-site .usage-frame figcaption span {
font: 9px Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.ng-site .usage-frame figcaption b {
font-size: 13px; font-weight: 400; text-align: right;
}
.ng-site .usage-left {
left: 6vw; right: auto; border-radius: 52% 48% 57% 43% / 48% 55% 45% 52%;
}
.ng-site .usage-press img {
object-position: 58% center;
}
.ng-site .usage-speak img {
object-position: center 36%;
}
.ng-site[data-scene="2"] .product-stage, .ng-site[data-scene="3"] .product-stage, .ng-site[data-scene="4"] .product-stage {
opacity: 0;
}
.ng-site .app-frame {
right: 9vw; width: auto; height: min(670px, 72vh); aspect-ratio: 390 / 844; padding: 7px; border-radius: 56px; color: var(--soft-ink); background: linear-gradient(145deg, #29272b, #111013 56%, #39353a); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 38px 100px rgba(73,56,67,.2), inset 0 0 0 1px rgba(0,0,0,.65);
}
.ng-site .app-frame::before {
content: ""; position: absolute; z-index: 5; top: 17px; left: 50%; width: 88px; height: 23px; border-radius: 99px; background: #09090a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transform: translateX(-50%);
}
.ng-site .app-frame::after {
inset: 5px; border-color: rgba(255,255,255,.12);
}
.ng-site .phone-screen {
position: relative; width: 100%; height: 100%; padding: 42px 27px 25px; overflow: hidden; border-radius: 49px; background: linear-gradient(155deg, rgba(253,250,248,.98), rgba(241,231,230,.98));
}
.ng-site .phone-status {
position: absolute; z-index: 3; top: 13px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font: 7px Arial, sans-serif; letter-spacing: .02em;
}
.ng-site .phone-status i {
width: 6px; height: 6px; margin-left: auto; margin-right: 30px; border-radius: 50%; background: #171619;
}
.ng-site .phone-status b {
font-weight: 400;
}
.ng-site .app-top {
display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(71,55,65,.12);
}
.ng-site .app-top span {
font-size: 21px;
}
.ng-site .app-top i {
font: 9px Arial, sans-serif; font-style: normal; opacity: .48;
}
.ng-site .voice-wave {
height: 80px; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ng-site .voice-wave i {
width: 2px; height: 12px; border-radius: 3px; background: var(--mulberry); animation: voice 1.3s ease-in-out infinite alternate;
}
.ng-site .voice-wave i:nth-child(2n) {
height: 30px; animation-delay: -.6s;
}
.ng-site .voice-wave i:nth-child(3n) {
height: 47px; animation-delay: -.9s;
}
@keyframes voice {
to {
transform: scaleY(.36); opacity: .35;
}
}
.ng-site .captured-thought {
margin: 12px 0 24px; font-size: clamp(18px, 1.65vw, 27px); line-height: 1.35;
}
.ng-site .app-result {
padding: 18px; border-radius: 22px; background: rgba(217,195,196,.34); display: grid; gap: 7px;
}
.ng-site .app-result small, .ng-site .app-result span {
font: 9px Arial, sans-serif; text-transform: uppercase; letter-spacing: .11em; opacity: .64;
}
.ng-site .app-result b {
font-size: 19px; font-weight: 400;
}
.ng-site .app-tags {
display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px;
}
.ng-site .app-tags span {
padding: 8px 11px; border: 1px solid rgba(71,55,65,.16); border-radius: 99px; font: 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.ng-site .app-frame figcaption {
bottom: 18px;
}
.ng-site .scene-faq {
color: var(--soft-ink); background: linear-gradient(145deg, #f8f3f0, #eee4e1 65%, #e4dddc);
}
.ng-site .scene-faq::before {
content: ""; position: absolute; inset: 7vh 4vw; border: 1px solid rgba(71,55,65,.08); border-radius: 48px; background: rgba(255,255,255,.12); pointer-events: none;
}
.ng-site .faq-layout {
position: absolute; inset: 15vh 9vw 10vh 8vw; display: grid; grid-template-columns: .85fr 1.15fr; gap: 6vw; align-items: center;
}
.ng-site .faq-heading {
position: relative;
}
.ng-site .faq-heading h2 {
font-size: clamp(38px, 5vw, 80px);
}
.ng-site .faq-categories {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 32px;
}
.ng-site .faq-categories button {
position: relative; border: 0; background: transparent; color: inherit; font: 15px/1.4 Arial, sans-serif; padding: 12px 0 12px 20px; text-align: left; cursor: pointer; opacity: .6;
}
.ng-site .faq-categories button::before {
content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateY(-50%); opacity: 0;
}
.ng-site .faq-categories button[aria-selected="true"] {
opacity: 1;
}
.ng-site .faq-categories button[aria-selected="true"]::before {
opacity: 1;
}
.ng-site .faq-categories button:hover {
opacity: 1;
}
.ng-site .faq-categories button:focus-visible, .ng-site .faq-list summary:focus-visible {
outline: 2px solid #302b30; outline-offset: 3px; border-radius: 3px;
}
.ng-site .faq-panel[hidden] {
display: none;
}
.ng-site .faq-list {
height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px 4px; scrollbar-width: thin; scrollbar-color: #bba9ae transparent;
}
.ng-site .faq-list details {
border-bottom: 1px solid rgba(71,55,65,.18);
}
.ng-site .faq-list details:first-child {
border-top: 1px solid rgba(71,55,65,.18);
}
.ng-site .faq-list summary {
position: relative; padding: 22px 32px 22px 0; font-size: clamp(17px, 1.45vw, 24px); line-height: 1.35; cursor: pointer; list-style: none;
}
.ng-site .faq-list summary::-webkit-details-marker {
display: none;
}
.ng-site .faq-list summary::after {
content: "+"; position: absolute; right: 3px; top: 22px; font: 22px Arial, sans-serif; font-weight: 300; opacity: .65;
}
.ng-site .faq-list details[open] summary::after {
content: "−";
}
.ng-site .faq-answer {
padding: 0 28px 20px 0; font: 14px/1.7 Arial, sans-serif; color: #514950;
}
.ng-site .faq-answer p {
margin: 0 0 12px;
}
.ng-site .faq-answer p:last-child {
margin-bottom: 0;
}
.ng-site .faq-answer a {
overflow-wrap: anywhere; text-underline-offset: 3px;
}
@media (max-width: 760px) {
.ng-site .scene-faq::before {
inset: 7vh 12px; border-radius: 28px;
}
.ng-site .faq-layout {
inset: 12vh 38px 8vh 24px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 24px;
}
.ng-site .faq-heading h2 {
font-size: clamp(32px, 9vw, 52px);
}
.ng-site .faq-heading .eyebrow {
margin-bottom: 12px;
}
.ng-site .faq-categories {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-top: 16px;
}
.ng-site .faq-categories button {
font-size: 13px; padding: 10px 0 10px 14px;
}
.ng-site .faq-list {
padding-right: 10px;
}
.ng-site .faq-list summary {
font-size: 17px; padding-top: 18px; padding-bottom: 18px;
}
.ng-site .faq-list summary::after {
top: 18px;
}
.ng-site .faq-answer {
padding-right: 6px; font-size: 13px;
}
}
.ng-site .scene-custom::before {
content: ""; position: absolute; inset: 7vh 4vw; z-index: -1; border-radius: 48px; border: 1px solid rgba(71,55,65,.08); background: rgba(255,255,255,.13);
}
.ng-site .custom-copy {
left: 8vw; top: 50%; width: 42vw; transform: translateY(-50%);
}
.ng-site .custom-copy > p:last-child {
width: min(390px, 90%); margin-top: 28px; font-family: Arial, sans-serif; font-size: 14px;
}
.ng-site .custom-product {
position: absolute; z-index: 3; right: 5vw; top: 50%; width: 48vw; aspect-ratio: 1; transform: translateY(-50%);
}
.ng-site .variant-product {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 35px 32px rgba(54,45,52,.16)); transition: opacity .08s linear;
}
.ng-site .variant-product.is-active {
opacity: 1;
}
.ng-site .magic-flash {
position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; transform: translate(-50%,-50%) scale(.45); opacity: 0;
}
.ng-site .custom-product.is-changing .magic-flash {
animation: magic .42s var(--ease);
}
@keyframes magic {
0% {
opacity: 0; transform: translate(-50%,-50%) scale(.45);
}
30% {
opacity: 1;
}
100% {
opacity: 0; transform: translate(-50%,-50%) scale(1.35);
}
}
.ng-site .variant-controls {
position: absolute; z-index: 5; right: 9vw; bottom: 8vh; width: 35vw; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px 20px;
}
.ng-site .variant-name {
font-size: 19px;
}
.ng-site .variant-swatches {
display: flex; justify-content: flex-end; gap: 8px;
}
.ng-site .variant-swatches i {
width: 10px; height: 10px; border-radius: 50%; background: #17233a; outline: 1px solid transparent; outline-offset: 3px;
}
.ng-site .variant-swatches i:nth-child(2) {
background: #233827;
}
.ng-site .variant-swatches i:nth-child(3) {
background: #57463c;
}
.ng-site .variant-swatches i:nth-child(4) {
background: #533224;
}
.ng-site .variant-swatches i:nth-child(5) {
background: #83a9ca;
}
.ng-site .variant-swatches i.is-active {
outline-color: currentColor;
}
.ng-site .variant-controls small {
grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid rgba(71,55,65,.15); font: 8px Arial, sans-serif; text-transform: uppercase; letter-spacing: .14em; opacity: .56;
}
@media (max-width: 760px) {
.ng-site .aura-one {
width: 120vw; height: 120vw; left: -60vw; top: -30vw;
}
.ng-site .aura-two {
width: 145vw; height: 145vw; right: -90vw; bottom: -30vw;
}
.ng-site .orbit-one {
width: 108vw; height: 108vw; right: -55vw; top: 10vh;
}
.ng-site .scene-question::before, .ng-site .process-scene::before {
inset: 7vh 12px; border-radius: 28px;
}
.ng-site .hero-image {
inset: 8vh -24vw 12vh auto; width: 105vw; border-radius: 50%; background-position: 44% center; opacity: .55;
}
.ng-site .scene-hero .scene-shade {
background: linear-gradient(0deg, rgba(246,239,236,.96) 0%, rgba(246,239,236,.35) 72%, rgba(246,239,236,.2));
}
.ng-site .wear-image {
inset: 8vh -10vw auto auto; width: 100vw; height: 42vh; border-radius: 50%; opacity: .48;
}
.ng-site .scene-wear .scene-shade {
background: linear-gradient(0deg, rgba(246,239,236,.98) 0%, rgba(246,239,236,.22) 75%);
}
.ng-site .wear-copy {
left: 22px; right: auto; bottom: 7vh; width: calc(100% - 48px);
}
.ng-site .product-stage {
width: 390px;
}
.ng-site[data-scene="1"] .product-stage {
left: 56%; top: 28%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.68) rotate(2deg);
}
.ng-site[data-scene="2"] .product-stage {
left: 56%; top: 30%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.62);
}
.ng-site[data-scene="3"] .product-stage {
left: 54%; top: 29%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.61);
}
.ng-site[data-scene="4"] .product-stage {
left: 55%; top: 25%; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.52);
}
.ng-site .final-product {
inset: 8vh -28vw auto 24vw; height: 46vh; border-radius: 50%; opacity: .28;
}
.ng-site .process-copy, .ng-site .process-copy.align-right {
left: 24px; right: auto; top: auto; bottom: 9vh; width: calc(100% - 52px); text-align: left; transform: none;
}
.ng-site .process-copy h2 {
font-size: 11.2vw;
}
.ng-site .process-copy > p:last-child {
margin-top: 16px;
}
.ng-site .usage-frame, .ng-site .usage-left {
left: auto; right: 20px; top: 9vh; width: 76vw; height: 45vh; border-radius: 42% 58% 48% 52% / 54% 44% 56% 46%;
}
.ng-site .usage-frame figcaption {
left: 12px; right: 12px; bottom: 12px; padding: 10px 12px;
}
.ng-site .usage-frame figcaption b {
font-size: 10px;
}
.ng-site .app-frame {
width: auto; height: 52vh; aspect-ratio: 390 / 844; padding: 5px; border-radius: 36px;
}
.ng-site .app-frame::before {
top: 11px; width: 58px; height: 16px;
}
.ng-site .phone-screen {
padding: 29px 16px 14px; border-radius: 31px;
}
.ng-site .phone-status {
top: 8px; left: 15px; right: 15px; font-size: 5px;
}
.ng-site .phone-status i {
width: 4px; height: 4px; margin-right: 19px;
}
.ng-site .app-frame figcaption {
display: none;
}
.ng-site .voice-wave {
height: 48px;
}
.ng-site .captured-thought {
margin: 6px 0 11px; font-size: 15px;
}
.ng-site .app-result {
padding: 11px; border-radius: 15px;
}
.ng-site .app-result b {
font-size: 15px;
}
.ng-site .app-tags {
margin-top: 8px;
}
.ng-site .app-tags span {
padding: 6px 8px; font-size: 6px;
}
.ng-site .scene-custom::before {
inset: 7vh 12px; border-radius: 28px;
}
.ng-site .custom-copy {
left: 24px; top: auto; bottom: 11vh; width: calc(100% - 52px); transform: none;
}
.ng-site .custom-copy h2 {
font-size: 12.5vw;
}
.ng-site .custom-copy > p:last-child {
margin-top: 15px; font-size: 11px;
}
.ng-site .custom-product {
right: -10vw; top: 27%; width: 110vw;
}
.ng-site .variant-controls {
right: 23px; bottom: 3.5vh; width: calc(100% - 46px);
}
.ng-site .scene-final::before {
right: -31vw; top: 5vh; width: 128vw;
}
.ng-site .final-product {
inset: auto -28vw auto auto; top: 24%; width: 125vw; height: 46vh; opacity: .9; transform: translateY(-50%) rotate(-2deg);
}
.ng-site .final-copy {
bottom: 10vh;
}
}

.ng-site.editorial-page {
height: auto; min-height: 100dvh; overflow: visible; padding: 105px 4vw 40px; background: linear-gradient(145deg, #f8f3f0, #eee4e1 65%, #e4dddc); color: #302b30;
}
.ng-site.editorial-page .site-header {
background: #f6efec;
}
.ng-site .editorial-card {
max-width: 1600px; min-height: calc(100dvh - 145px); margin: auto; border: 1px solid rgba(71,55,65,.1); border-radius: 48px; padding: clamp(30px, 5vw, 80px); background: rgba(255,255,255,.12);
}
.ng-site .editorial-card h1 {
font-size: clamp(45px, 5.3vw, 84px);
}
.ng-site .page-lead {
font-size: clamp(20px, 2vw, 29px); margin: 25px 0 18px;
}
.ng-site .page-body {
max-width: 490px; font: 14px/1.8 Arial, sans-serif; color: #615860;
}
.ng-site .team-intro {
display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 5vw;
}
.ng-site .team-photo {
margin: 0;
}
.ng-site .team-photo img {
display: block; width: 100%; height: auto; border-radius: 26px;
}
.ng-site .team-photo figcaption {
margin-top: 12px; color: #615860; font: 11px/1.5 Arial, sans-serif;
}
.ng-site .team-members {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 45px;
}
.ng-site .team-members article {
border-top: 1px solid #bba9ae; padding-top: 24px;
}
.ng-site .team-members .eyebrow {
margin-bottom: 16px; font-size: 9px;
}
.ng-site .team-members h2 {
font-size: clamp(23px, 2.2vw, 35px); line-height: 1.12;
}
.ng-site .team-members article > p:last-child {
font: 13px/1.7 Arial, sans-serif; color: #615860;
}
.ng-site .page-bottom {
display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid rgba(71,55,65,.15); margin-top: 30px; padding-top: 16px; font: 12px/1.6 Arial, sans-serif;
}
.ng-site .editorial-card a {
text-underline-offset: 5px;
}
.ng-site.editorial-page a:focus-visible {
outline: 2px solid #514950; outline-offset: 5px;
}
.ng-site .project-card {
display: grid; grid-template-columns: 1fr 1.1fr; gap: 7vw; align-items: start;
}
.ng-site .supporter-offer {
border-top: 1px solid #bba9ae; margin-top: 30px; padding-top: 24px;
}
.ng-site .supporter-offer h2 {
font-size: 28px;
}
.ng-site .supporter-offer p:not(.eyebrow):not(.offer-price), .ng-site .supporter-offer a {
font: 14px/1.7 Arial, sans-serif;
}
.ng-site .supporter-offer .offer-price {
font-size: 52px; margin: 20px 0 0;
}
.ng-site .offer-price span {
font: 13px Arial, sans-serif;
}
.ng-site .supporter-offer .offer-note {
color: #615860; max-width: 370px;
}
.ng-site .project-timeline ol {
list-style: none; margin: 0 0 28px; padding: 0 0 0 23px; border-left: 1px solid #bba9ae;
}
.ng-site .project-timeline li {
position: relative; padding: 0 0 25px 0;
}
.ng-site .project-timeline li:last-child {
padding-bottom: 0;
}
.ng-site .project-timeline li::before {
content: ""; position: absolute; left: -28px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #bba9ae; border: 2px solid #f6efec;
}
.ng-site .project-timeline li:first-child::before {
background: #302b30;
}
.ng-site .timeline-date {
font: 9px/1.5 Arial, sans-serif; letter-spacing: .1em; margin: 0 0 10px;
}
.ng-site .project-timeline h2 {
font-size: clamp(23px, 2.3vw, 34px); line-height: 1.15;
}
.ng-site .project-timeline li > p:last-child, .ng-site .community-event > p:last-child {
font: 13px/1.7 Arial, sans-serif; color: #615860; margin-bottom: 0;
}
.ng-site .community-event {
border-top: 1px solid #bba9ae; padding-top: 22px;
}
.ng-site .community-event .eyebrow {
line-height: 1.5; margin-bottom: 12px;
}
.ng-site .timeline-note {
font: 11px/1.6 Arial, sans-serif; color: #615860; margin: 24px 0 18px;
}
.ng-site .page-text-link {
font: 12px/1.6 Arial, sans-serif;
}
@media (max-width: 760px) {
.ng-site.editorial-page {
padding: 90px 12px 20px;
}
.ng-site.editorial-page .site-header {
padding: 20px;
}
.ng-site.editorial-page .brand img {
width: 70px;
}
.ng-site .editorial-card {
border-radius: 28px; padding: 30px 22px;
}
.ng-site .team-intro, .ng-site .project-card {
grid-template-columns: 1fr; gap: 35px;
}
.ng-site .team-members {
grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px;
}
.ng-site .team-members h2 {
font-size: 23px;
}
.ng-site .team-members article > p:last-child {
font-size: 12px;
}
.ng-site .page-bottom {
align-items: flex-start; flex-direction: column; gap: 8px;
}
}

.ng-site.contact-page {
height: auto; min-height: 100dvh; overflow: visible; color: #302b30; background: linear-gradient(145deg, #f8f3f0, #eee4e1 65%, #e4dddc); padding: 105px 4vw 40px;
}
.ng-site.contact-page .site-header {
background: #f6efec;
}
.ng-site .contact-card {
min-height: calc(100dvh - 145px); border: 1px solid rgba(71,55,65,.1); border-radius: 48px; background: rgba(255,255,255,.12); padding: clamp(32px, 5vw, 80px); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 7vw; max-width: 1600px; margin: auto;
}
.ng-site .contact-copy h1 {
font-size: clamp(56px, 6.7vw, 104px);
}
.ng-site .contact-copy > p:not(.eyebrow) {
font-size: clamp(17px, 1.5vw, 23px); margin: 28px 0 40px;
}
.ng-site .contact-faq {
display: inline-block; max-width: 290px; font: 12px/1.7 Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.ng-site .contact-form {
min-width: 0; font: 13px/1.5 Arial, sans-serif;
}
.ng-site .form-intro {
font: 24px/1.3 "Marcellus", Georgia, serif; margin: 0 0 26px;
}
.ng-site .contact-fields {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.ng-site .contact-form label {
display: block; margin-bottom: 22px;
}
.ng-site .contact-form input, .ng-site .contact-form select, .ng-site .contact-form textarea {
display: block; width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #bba9ae; border-radius: 0; background: transparent; color: #302b30; font: 16px/1.5 Arial, sans-serif; padding: 10px 0;
}
.ng-site .contact-form input::placeholder, .ng-site .contact-form textarea::placeholder {
color: #776e74; opacity: 1;
}
.ng-site .contact-form textarea {
resize: vertical; min-height: 105px; max-height: 320px;
}
.ng-site .contact-form select {
cursor: pointer;
}
.ng-site .contact-form :is(input, select, textarea, button):focus-visible, .ng-site.contact-page a:focus-visible {
outline: 2px solid #514950; outline-offset: 5px;
}
.ng-site .contact-note {
color: #615860; font-size: 12px; margin: 0 0 22px; max-width: 400px;
}
.ng-site .contact-submit {
display: flex; justify-content: space-between; align-items: center; gap: 45px; border: 1px solid #302b30; border-radius: 99px; padding: 15px 23px; background: #302b30; color: #f6efec; font: 13px Arial, sans-serif; cursor: pointer;
}
.ng-site .contact-submit:hover {
background: #514950;
}
.ng-site .contact-submit:disabled {
opacity: .55; cursor: wait;
}
.ng-site .contact-status {
margin: 16px 0 0; font-size: 13px;
}
.ng-site .contact-status[data-state="error"] {
color: #8b303a;
}
.ng-site .contact-trap {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
@media (max-width: 760px) {
.ng-site.contact-page {
padding: 90px 12px 20px;
}
.ng-site .contact-card {
grid-template-columns: 1fr; gap: 36px; border-radius: 28px; padding: 30px 22px;
}
.ng-site .contact-copy h1 {
font-size: 58px;
}
.ng-site .contact-copy > p:not(.eyebrow) {
margin: 20px 0;
}
.ng-site .contact-fields {
grid-template-columns: 1fr; gap: 0;
}
.ng-site.contact-page .header-actions {
gap: 12px; font-size: 10px;
}
.ng-site.contact-page .site-header {
padding: 20px;
}
.ng-site.contact-page .brand img {
width: 62px;
}
.ng-site.contact-page .reserve-link {
padding: 10px;
}
}
/* --- Charte NAGOME p.02 : taille optique du logo (140 px confortable, 96 px minimum). Le SVG est recadré sur le dessin visible ; la hauteur n'est plus bridée. --- */
.ng-site .brand img { width: 140px; max-height: none; height: auto; }
@media (max-width: 760px) { .ng-site .brand img { width: 102px; } }
@media (max-width: 760px) { .ng-site.editorial-page .brand img, .ng-site.contact-page .brand img { width: 96px; } }
/* --- Odoo integration layer (added for the CMS; the mockup's own rules are above) --- */
.ng-site { --ng-top: 0px; }
.ng-site p { margin: 1em 0; }  /* browser default, which Bootstrap overrides */
.ng-site img { max-width: none; }
.ng-site .page-menu summary { display: list-item; }
.ng-site .site-header, .ng-site .intro-sequence, .ng-site .brand-world, .ng-site .ambient, .ng-site .scroll-track { top: var(--ng-top); }
.ng-site .scene { min-height: calc(100vh - var(--ng-top)); min-height: calc(100dvh - var(--ng-top)); }
/* finition 2 : Champagne sand (remplace Forest green) */
.ng-site .variant-swatches i:nth-child(2) { background: #c9b4a0; }
/* mobile, scène 6 : le bracelet était décalé de 5 vw vers la droite (0 → 110 vw) ; recentré */
@media (max-width: 760px) { .ng-site .custom-product { right: -5vw; } }
.ng-site .scroll-track { touch-action: pan-x; }
.ng-site .faq-list { touch-action: pan-y; }
.ng-site .scene-progress button { position: relative; display: grid; place-items: center; width: 28px; height: 28px; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 12px; }
.ng-site .scene-progress button::after { content: ""; display: block; width: 3px; height: 14px; border-radius: 2px; background: currentColor; opacity: .5; transition: height .35s var(--ease), opacity .35s ease; }
.ng-site .scene-progress button[aria-current]::after { height: 24px; opacity: 1; }
.ng-site .scene-progress button:hover::after, .ng-site .scene-progress button:focus-visible::after { opacity: .8; }
.ng-site .brand { cursor: pointer; }
html.ng-scenes, html.ng-scenes body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html.ng-scenes #wrapwrap { overflow: hidden; height: 100%; }
html.ng-scenes { background: #24251f; }
@media (max-width: 760px) { .ng-site .scene-progress button { width: 24px; height: 24px; } .ng-site .scene-progress button[aria-current]::after { height: 16px; } }
/* Odoo-native contact form, styled like the mockup's form */
.ng-site .contact-form .row { display: block; margin: 0; }
.ng-site .contact-form [class*="col-"] { padding: 0; width: 100%; max-width: 100%; flex: none; }
.ng-site .contact-form .form-group { margin-bottom: 22px; }
.ng-site .contact-form .contact-fields .form-group { margin-bottom: 0; }
.ng-site .contact-form label { margin-bottom: 0; }
.ng-site .contact-form .s_website_form_mark { color: #8b303a; }
.ng-site .contact-form .form-control, .ng-site .contact-form .form-select { box-shadow: none; background-image: none; height: auto; line-height: 1.5; }
.ng-site .contact-form .form-control:focus, .ng-site .contact-form .form-select:focus { border-color: #302b30; box-shadow: none; outline: 2px solid #514950; outline-offset: 5px; }
.ng-site .contact-form .form-select { appearance: auto; -webkit-appearance: auto; }
.ng-site .contact-form .is-invalid { border-bottom-color: #8b303a; }
.ng-site .contact-form .s_website_form_dnone { display: none; }
.ng-site .contact-form .contact-submit { text-decoration: none; width: fit-content; }
.ng-site .contact-form .s_website_form_submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ng-site .contact-form .s_website_form_end_message { margin-top: 16px; }
.ng-site .contact-form .s_website_form_end_message.d-none { display: none; }
.ng-site .contact-form .o_website_form_send_error, .ng-site .contact-form .invalid-feedback { color: #8b303a; font-size: 12px; }