/* GENERATED by 05-SYSTEM/build-css.py — DO NOT EDIT. Source of truth: assets/css/styles.css (this is that file with its ~400 KB of documentation removed for the wire). Run the script, or just deploy — the gate rebuilds and blocks on drift. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap'); :root { --cream: #F5F0EB; --cream-dark: #E8E0D8; --porcelain: #F5F3F0; --white: #FFFFFF; --navy: #111827; --indigo: #354875; --gold: #C4A265; --stone: #C4AA88; --gold-lt: #D4B97A; --brown: #5C4033; --oak: #6B4226; --text: #1A1A1A; --text-light: #6B6B6B; --border-color: rgba(196, 162, 101, 0.2); --border: rgba(196, 162, 101, 0.2); --gradient-navy: linear-gradient(135deg, #111827 0%, #354875 100%); --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --max-width: 1560px; --section-padding: 96px; --section-padding-mobile: 72px; --nav-height: 64px; --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --transition: 300ms ease; --transition-slow: 600ms var(--ease-fluid); --radius-pill: 59px; --radius-card: 29px; --radius-gallery: 12px; --glass-bg: rgba(245, 240, 235, 0.5); --glass-blur: 30px; --glass-border: rgba(196, 162, 101, 0.15); --glass-shadow: 0 8px 32px rgba(17, 24, 39, 0.08); --glass-saturate: 1.8; --focus-ring: 0 0 0 3px rgba(196, 162, 101, 0.5); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } body { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--navy); background-color: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; touch-action: manipulation; } :root:has(.hero--service), body:has(.hero--service) { background-color: #000; } :root:has(.hero-v4), body:has(.hero-v4) { background-color: #000; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); } a, button, [role="button"], .testimonials__dot, .gallery-grid__item { cursor: pointer; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } .display-large { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 300; font-size: 56px; line-height: 1.1; color: var(--white); } .section-title { font-family: 'altesse-std-24pt', var(--font-serif); letter-spacing: normal; font-weight: 400; font-size: 40px; line-height: 1.2; color: var(--navy); margin-bottom: 24px; text-align: center; } body:has(.hero-v4) .section-title, body.mastered .section-title { margin-bottom: 40px; } .card-title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--navy); } .subsection-title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--brown); margin-bottom: 16px; } .label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--brown); text-transform: uppercase; letter-spacing: 1.5px; text-align: center; } h1, h2, h3, .section-title, .subsection-title, .hero__title, .hero__subtitle, .label, .why-title, .why-lead, .why-claim, .why-beat__k, .why-beat__v, .opn-lead, .opn-claim, .stmt-fact__k, .stmt-fact__v, .dif-claim, .occ3-col__title, .occ3-col__note, .inc-card__title, .inc-card__body, .sheet__body, .learn__list dt, .learn__list dd, .wd-lead, .wd-fact__k, .wd-fact__v, .who-claim, .tlD-title, .tl-claim, .abt-open__dek, .fmt-tail, .vcard__note, .flow__title, .flow__body, .crs-open__claim, .crs-led__label, .crs-cur__item strong, .crs-inc__body strong, .crs-cert__lead, .luwho__title, .luwho__body, .pgate__title, .pgate__note, .crs-led__note, .sheet__title { text-wrap: balance; } .text-secondary { font-size: 13px; color: var(--text-light); line-height: 1.6; } .quote-text { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 400; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--white); } .stat-number { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 36px; color: var(--navy); } .price-placeholder { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 20px; color: var(--gold); display: inline-block; min-width: 60px; border-bottom: 2px dashed var(--border); } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } @media (min-width: 1200px) { .container { padding: 0 24px; } } .section { padding: var(--section-padding) 0; } .section--cream { background-color: var(--cream); } .section--satin { background-color: var(--cream); } .section--white { background-color: var(--cream); } .section--navy { background: var(--gradient-navy); color: var(--white); } .reveal { opacity: 0; transform: translateY(48px); filter: blur(3px); transition: opacity 1800ms cubic-bezier(0.16, 1, 0.3, 1), transform 1800ms cubic-bezier(0.16, 1, 0.3, 1), filter 1800ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); filter: blur(0); } @media (max-width: 1199px) { .reveal { transition: opacity 1100ms cubic-bezier(0.45, 0, 0.15, 1), transform 1100ms cubic-bezier(0.45, 0, 0.15, 1), filter 1100ms cubic-bezier(0.45, 0, 0.15, 1); } } .reveal--btn.revealed { filter: none; } @media (min-width: 1024px) { .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 250ms; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 500ms; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 750ms; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 1000ms; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 1250ms; } .reveal-stagger > .reveal:nth-child(7) { transition-delay: 1500ms; } .reveal-stagger > .reveal:nth-child(8) { transition-delay: 1750ms; } .reveal-stagger > .reveal:nth-child(n+9) { transition-delay: 2000ms; } } .reveal-card { opacity: 0; transform: translateY(80px) scale(0.95); transition: opacity 2200ms cubic-bezier(0.16, 1, 0.3, 1), transform 2200ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal-card.revealed { opacity: 1; transform: translateY(0) scale(1); } @media (min-width: 1200px) { body:has(.hero-v4) .reveal, body.mastered .reveal { transform: translateY(100px); } body:has(.hero-v4) .reveal.revealed, body.mastered .reveal.revealed { transform: translateY(0); } body:has(.hero-v4) .reveal-stagger > .reveal:nth-child(2), body.mastered .reveal-stagger > .reveal:nth-child(2) { transition-delay: 200ms; } body:has(.hero-v4) .reveal-stagger > .reveal:nth-child(3), body.mastered .reveal-stagger > .reveal:nth-child(3) { transition-delay: 400ms; } body:has(.hero-v4) .reveal-stagger > .reveal:nth-child(4), body.mastered .reveal-stagger > .reveal:nth-child(4) { transition-delay: 600ms; } body:has(.hero-v4) .reveal-stagger > .reveal:nth-child(5), body.mastered .reveal-stagger > .reveal:nth-child(5) { transition-delay: 800ms; } body:has(.hero-v4) .reveal-stagger > .reveal:nth-child(6), body.mastered .reveal-stagger > .reveal:nth-child(6) { transition-delay: 1000ms; } body:has(.hero-v4) .reveal-card, body.mastered .reveal-card { transform: translateY(130px) scale(0.95); } body:has(.hero-v4) .reveal-card.revealed, body.mastered .reveal-card.revealed { transform: translateY(0) scale(1); } body:has(.hero-v4) .reveal-card .swipe-card__image { transform: scale(1.12); transition: filter 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 2600ms cubic-bezier(0.16, 1, 0.3, 1); } body:has(.hero-v4) .reveal-card.revealed .swipe-card__image { transform: scale(1); } body:has(.hero-v4) .proof__image.proof-reveal { transform: translateY(60px) scale(1.06); } body:has(.hero-v4) .proof__image.proof-reveal.revealed { transform: translateY(0) scale(1); } body:has(.hero-v4) .faq__group { --ease-spring: linear( 0, 0.0365 0.9%, 0.1454 2.5%, 0.273 4.4%, 0.3953 6.6%, 0.5076 9%, 0.6056 11.6%, 0.6886 14.4%, 0.7581 17.3%, 0.8144 20.4%, 0.8592 23.7%, 0.8942 27%, 0.9216 30.5%, 0.9423 34.2%, 0.9581 37.9%, 0.9697 41.7%, 0.9784 45.7%, 0.9847 49.7%, 0.9892 53.9%, 0.9925 58.1%, 0.9948 62.4%, 0.9964 66.8%, 0.9976 71.3%, 0.9984 75.9%, 0.9989 80.6%, 0.9993 85.3%, 0.9995 90.1%, 0.9997 95%, 1 ); transform: translateY(70px); filter: none; transition: opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), background 400ms var(--ease-fluid); transition-timing-function: var(--ease-spring), var(--ease-spring), var(--ease-fluid); } body:has(.hero-v4) .faq__group.revealed { opacity: 1; transform: none; } } body { animation: pageFadeIn 400ms var(--ease-fluid) forwards; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 16px 0; padding-top: calc(16px + env(safe-area-inset-top)); transition: background var(--transition-slow), box-shadow var(--transition), transform 260ms ease-out; } @media (max-width: 1199px) { .nav.nav--hidden:not(:focus-within):not(:has(.nav__mobile.open)) { transform: translateY(-100%); } @supports (-webkit-touch-callout: none) { .nav { transform: translateZ(0); transition: background var(--transition-slow), box-shadow var(--transition), opacity 200ms ease-out, visibility 200ms ease-out; } .nav.nav--hidden:not(:focus-within):not(:has(.nav__mobile.open)) { transform: translateZ(0); opacity: 0; visibility: hidden; } } .nav { padding: 10px 0; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 36px; pointer-events: none; } .nav__hamburger, .nav__mobile { pointer-events: auto; } .nav.scrolled { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-bottom: none; } .nav.scrolled::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.18) 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.18) 90%, transparent 100%); } .nav:has(.nav__mobile.open).scrolled::before { content: none; } @supports (-webkit-touch-callout: none) { .nav.scrolled::before { content: none; } } } @media (min-width: 1200px) { .nav { padding: 11px 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background var(--transition-slow), box-shadow var(--transition), transform 260ms ease-out; will-change: transform; } .nav.nav--hidden:not(:focus-within) { transform: translateY(-100%); } @supports (background: -webkit-named-image(i)) { .nav { transition: background var(--transition-slow), box-shadow var(--transition), opacity 200ms ease-out, visibility 200ms ease-out; } .nav.nav--hidden:not(:focus-within) { transform: none; opacity: 0; visibility: hidden; } } .nav.scrolled { background: rgba(245, 240, 235, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; border-bottom: none; } .nav.scrolled.nav--over-dark { background: rgba(17, 24, 39, 0.35); } .nav__cta--desktop { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity 320ms var(--ease-soft), transform 340ms var(--ease-soft), box-shadow 340ms var(--ease-soft), padding 340ms var(--ease-soft), visibility 0s linear 320ms; } .nav--past-hero .nav__cta--desktop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; } .nav--past-hero .nav__cta--desktop:hover { transform: translateY(-4px); } } .nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .nav__logo { font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; font-size: 30px; color: var(--white); letter-spacing: normal; white-space: nowrap; transition: color var(--transition); } .nav.scrolled .nav__logo { color: var(--navy); } .nav__links { display: flex; align-items: center; gap: 22px; } .nav__link { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.7); position: relative; transition: color var(--transition); } .nav__link:hover, .nav__link.active { color: var(--white); font-weight: 600; } .nav.scrolled .nav__link { color: var(--text-light); } .nav.scrolled .nav__link:hover, .nav.scrolled .nav__link.active { color: var(--navy); } .nav.scrolled.nav--over-dark .nav__logo { color: var(--white); } .nav.scrolled.nav--over-dark .nav__link { color: rgba(255, 255, 255, 0.7); } .nav.scrolled.nav--over-dark .nav__link:hover, .nav.scrolled.nav--over-dark .nav__link.active { color: var(--white); } .nav__link.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--gold); } .nav__item { position: relative; } .nav__trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; } .nav__item:hover .nav__trigger, .nav__item:focus-within .nav__trigger { color: var(--white); font-weight: 600; } .nav.scrolled .nav__item:hover .nav__trigger, .nav.scrolled .nav__item:focus-within .nav__trigger { color: var(--navy); } .nav.scrolled.nav--over-dark .nav__item:hover .nav__trigger, .nav.scrolled.nav--over-dark .nav__item:focus-within .nav__trigger { color: var(--white); } .nav__chevron { flex: none; margin-top: 1px; transition: transform 300ms var(--ease-fluid); } .nav__item:hover .nav__chevron, .nav__item:focus-within .nav__chevron, .nav__item.is-open .nav__chevron { transform: rotate(180deg); } .nav__menu { position: fixed; top: var(--menu-y, var(--nav-height, 64px)); left: var(--menu-x, 50%); translate: -50%; padding-top: 12px; pointer-events: none; z-index: 1001; } .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu, .nav__menu.is-open { pointer-events: auto; } @media (max-width: 1023px) { body > .nav__menu { display: none; } } .nav__menu-panel { min-width: 232px; padding: 8px; background: rgba(245, 240, 235, 0.58); -webkit-backdrop-filter: blur(32px) saturate(2); backdrop-filter: blur(32px) saturate(2); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); opacity: 0; transform: translateY(8px) scale(0.94); transform-origin: top center; visibility: hidden; transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms; } .nav__item:hover .nav__menu-panel, .nav__item:focus-within .nav__menu-panel, .nav__menu.is-open .nav__menu-panel { opacity: 1; transform: none; visibility: visible; transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1), transform 350ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } .nav__menu-link { display: block; padding: 10px 14px; border-radius: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--navy); transition: background 200ms ease; } .nav__menu-link:hover, .nav__menu-link:focus-visible { background: rgba(196, 162, 101, 0.12); } .nav__cta { display: inline-flex; } .nav__hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; --burger-bar-h: 1.5px; --burger-gap: 4px; --burger-x: calc((var(--burger-bar-h) + var(--burger-gap)) / 1.41421356); gap: var(--burger-gap); width: 44px; height: 44px; padding: 0; z-index: 1001; position: relative; border-radius: 999px; } .nav__hamburger span { display: block; width: 17px; height: var(--burger-bar-h); background: var(--white); transition: transform var(--transition), opacity var(--transition), background var(--transition); } .nav.scrolled .nav__hamburger span { background: var(--navy); } .nav__hamburger.open span { background: var(--navy); } @media (max-width: 1199px) { .nav.nav--over-dark .nav__hamburger:not(.open) span { background: var(--white); } } .hero-mark { display: none; } @media (max-width: 1023px) { .nav__logo { display: none; } .nav__hamburger { margin-left: auto; } .nav__hamburger:not(.open)::before { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(17, 24, 39, 0.09); opacity: 1; transition: background var(--transition), opacity var(--transition); } .nav.nav--over-dark .nav__hamburger:not(.open)::before { background: rgba(255, 255, 255, 0.16); } .nav:not(.scrolled) .nav__hamburger:not(.open)::before { opacity: 0; } .hero-mark { display: flex; align-items: center; position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 24px; height: 44px; z-index: 2; font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: normal; white-space: nowrap; color: var(--white); text-decoration: none; } } .nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(var(--burger-x), var(--burger-x)); } .nav__hamburger.open span:nth-child(2) { opacity: 0; } .nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(var(--burger-x), calc(var(--burger-x) * -1)); } .nav__mobile { display: none; position: fixed; left: 0; width: 100%; top: 0; height: 100vh; height: 100dvh; background: var(--cream); flex-direction: column; align-items: center; text-align: center; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); gap: 24px; overflow-y: auto; z-index: 999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition), visibility var(--transition); } .nav__mobile.open { opacity: 1; visibility: visible; pointer-events: all; } body.menu-open { overflow: hidden; } @media (min-width: 1024px) { body.menu-open { overflow: visible; } } .nav__mobile-inner { display: flex; flex-direction: column; gap: 22px; width: max-content; max-width: 100%; text-align: left; margin: auto 0; } .nav__mobile-group { display: flex; flex-direction: column; } .nav__mobile-label { font-family: var(--font-sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 4px; } .nav__mobile-link { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--navy); padding: 12px 28px; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(196, 162, 101, 0.16); } .nav__mobile-group:last-child .nav__mobile-link:last-child { border-bottom: none; } @supports (-webkit-touch-callout: none) { .nav__mobile { opacity: 1; transition: none; } .nav__mobile-inner { opacity: 0; transition: opacity var(--transition); } .nav__mobile.open .nav__mobile-inner { opacity: 1; } } .sticky-cta { position: fixed; left: 50%; padding: 72px 40px; bottom: calc(12px - 72px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 48px + 80px); z-index: 900; pointer-events: none; display: flex; justify-content: center; transform-origin: 50% calc(100% - 72px); transform: translate(-50%, 8px) scale(0.72); opacity: 0; visibility: hidden; transition: transform 560ms cubic-bezier(0.45, 0, 0.55, 1), opacity 460ms cubic-bezier(0.45, 0, 0.55, 1), visibility 560ms; } .sticky-cta.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; transition: transform 850ms cubic-bezier(0.45, 0, 0.15, 1), opacity 650ms cubic-bezier(0.45, 0, 0.55, 1), visibility 850ms; } @media (hover: none) and (pointer: coarse) { .sticky-cta, .sticky-cta.is-visible { transition: none; } } @media (prefers-reduced-motion: reduce) { .sticky-cta, .sticky-cta.is-visible { transform: translate(-50%, 0) scale(1); transition: opacity 300ms ease, visibility 300ms; } } .sticky-cta__btn { pointer-events: auto; } @media (min-width: 1024px) { .sticky-cta { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.5px; border-radius: var(--radius-pill); cursor: pointer; transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1200ms cubic-bezier(0.16, 1, 0.3, 1), background 1000ms cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(0) scale(0.98); transition: transform 150ms ease; } .btn--primary { background: var(--gradient-navy); color: var(--white); border: none; } .btn--primary:hover { box-shadow: 0 8px 30px rgba(27, 40, 56, 0.35), 0 0 60px rgba(27, 40, 56, 0.1); } .btn--secondary { background: transparent; color: var(--navy); border: 1px solid rgba(196, 162, 101, 0.3); } .btn--secondary:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(196, 162, 101, 0.2), 0 0 40px rgba(196, 162, 101, 0.05); } .btn--gold { background: var(--gold); color: var(--navy); font-weight: 600; border: none; } .btn--gold:hover { background: var(--gold-lt); box-shadow: 0 12px 40px rgba(196, 162, 101, 0.3), 0 0 80px rgba(196, 162, 101, 0.1); } .btn--link { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--brown); padding: 0; border-bottom: 1px solid var(--gold); border-radius: 0; letter-spacing: -0.035em; overflow: visible; } .btn--link::before, .btn--link::after { display: none; } .btn--link:hover { color: var(--navy); transform: none; } .arrow-loop { display: inline-block; transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .btn--link:hover .arrow-loop { animation: arrowLoop 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes arrowLoop { 0% { opacity: 1; transform: translateX(0); } 30% { opacity: 0; transform: translateX(16px); } 31% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: translateX(0); } } .footer__social { border-radius: var(--radius-pill); } .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: flex-end; background: var(--gradient-navy); overflow: hidden; } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transition: opacity 800ms var(--ease-fluid); } body.mastered .hero__image { opacity: 1; } body.mastered .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.50) 12%, rgba(0, 0, 0, 0.40) 24%, rgba(0, 0, 0, 0.26) 36%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0) 58%), linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.64) 13%, rgba(0, 0, 0, 0.50) 25%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.20) 50%, rgba(0, 0, 0, 0.09) 60%, rgba(0, 0, 0, 0.03) 69%, rgba(0, 0, 0, 0) 78%); } @media (max-width: 1023px) { body.mastered .hero::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.86) 20%, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 0.76) 55%, rgba(0, 0, 0, 0.66) 66%, rgba(0, 0, 0, 0.48) 76%, rgba(0, 0, 0, 0.26) 85%, rgba(0, 0, 0, 0.08) 93%, rgba(0, 0, 0, 0) 100%); } } .hero--dissolve .hero__clip { position: absolute; inset: 0; } .hero--dissolve .hero__label { display: none; } .hero--dissolve .hero__title, .hero--dissolve .hero__subtitle, .hero--dissolve .hero__actions { animation: heroFadeIn 2200ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } .hero--dissolve .hero__title { animation-delay: 400ms; } .hero--dissolve .hero__subtitle { animation-delay: 900ms; } .hero--dissolve .hero__actions { animation-delay: 1500ms; } @media (prefers-reduced-motion: reduce) { .hero--dissolve .hero__title, .hero--dissolve .hero__subtitle, .hero--dissolve .hero__actions, .hero--dissolve .hero__title .word-blur { opacity: 1; filter: none; transform: none; animation: none; } } .hero__title--break .hero__title-line:first-child { display: block; } body:has(.hero--dissolve) .hero-mark { color: var(--navy); } .hero--dissolve .hero__fade { display: block; position: absolute; left: 0; right: 0; bottom: -2px; pointer-events: none; background: linear-gradient(to bottom, rgba(245, 240, 235, 0) 0%, rgba(245, 240, 235, 0.014) 8%, rgba(245, 240, 235, 0.055) 17%, rgba(245, 240, 235, 0.12) 25%, rgba(245, 240, 235, 0.22) 34%, rgba(245, 240, 235, 0.35) 42%, rgba(245, 240, 235, 0.50) 51%, rgba(245, 240, 235, 0.66) 60%, rgba(245, 240, 235, 0.80) 69%, rgba(245, 240, 235, 0.91) 78%, rgba(245, 240, 235, 0.975) 86%, var(--cream) 94%, var(--cream) 100%); } .hero--topshade .hero__clip::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--hero-topshade-h, 180px); opacity: var(--hero-topshade-o, 1); pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.30) 60%, rgba(0, 0, 0, 0.16) 75%, rgba(0, 0, 0, 0.06) 88%, rgba(0, 0, 0, 0) 100%); } body.mastered:has(.hero--topshade) .hero-mark { color: var(--white); } body.mastered:has(.hero--topshade) .nav:not(.scrolled) .nav__hamburger span { background: var(--white); } body.mastered:has(.hero--topshade) .nav:not(.scrolled) .nav__logo, body.mastered:has(.hero--topshade) .nav:not(.scrolled) .nav__link { color: var(--white); } .hero__title span.hero__title-line { color: inherit; } .hero__title span.word-blur { color: inherit; } @media (max-width: 1023px) { .hero.hero--dissolve { height: auto; min-height: 100svh; min-height: 100lvh; padding-top: 0; display: flex; flex-direction: column; align-items: stretch; background: var(--cream); } .hero--dissolve .hero__media { position: relative; inset: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 17 / 20; background: #000; } .hero--dissolve .hero__clip { overflow: hidden; border-radius: 34px 34px 0 0; } .hero--dissolve .hero__image { object-position: 50% 30%; } body.mastered .hero--dissolve::after { display: none; } .hero--dissolve .hero__fade { height: 30%; } .hero--topshade .hero__clip::after { height: var(--hero-topshade-h, 160px); } .hero--dissolve .hero__content { position: relative; z-index: 2; margin: -44px auto 0; padding: 0 clamp(24px, 6.4vw, 32px) 24px; max-width: var(--max-width); width: 100%; } .hero--dissolve .hero__title { font-size: clamp(36px, 9.6vw, 43px); line-height: 1.05; color: var(--navy); margin-bottom: 12px; } .hero--dissolve .hero__title-line:first-child { display: block; } .hero--dissolve .hero__subtitle { font-size: 14px; color: rgba(17, 24, 39, 0.72); margin-bottom: 28px; } body:has(.hero--dissolve) .nav:not(.scrolled) .nav__hamburger span { background: var(--navy); } body.mastered .hero--dissolve + * { padding-top: 32px; } } @media (min-width: 1024px) { .hero.hero--dissolve { height: auto; min-height: 0; padding-top: 0; display: flex; flex-direction: column; align-items: stretch; background: var(--cream); } .hero--dissolve .hero__media { position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: min(70vh, 820px); background: #000; } .hero--dissolve .hero__clip { overflow: hidden; } .hero--dissolve .hero__image { object-position: 50% 34%; } body.mastered .hero--dissolve::after { display: none; } .hero--dissolve .hero__fade { height: 28%; } .hero--dissolve .hero__content { position: relative; z-index: 2; margin: -48px auto 0; padding: 0 clamp(24px, 4vw, 48px) 88px; max-width: var(--max-width); width: 100%; } .hero--dissolve .hero__title { color: var(--navy); font-size: 64px; margin-bottom: 10px; } .hero--dissolve .hero__subtitle { color: rgba(17, 24, 39, 0.72); margin-bottom: 22px; } body:has(.hero--dissolve) .nav:not(.scrolled) .nav__logo, body:has(.hero--dissolve) .nav:not(.scrolled) .nav__link { color: var(--navy); } } .hero__video--mobile { display: none; } @media (max-width: 767px) { .hero__video--desktop { display: none; } .hero__video--mobile { display: block; } } .hero__image-placeholder { position: absolute; inset: 0; background: var(--cream-dark); opacity: 0.3; } .hero--selfmakeup .hero__image-placeholder { opacity: 1; background: #000 50% 34% / cover no-repeat url(data:image/jpeg;base64,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); } @media (max-width: 1023px) { .hero--selfmakeup .hero__image-placeholder { background-position: 50% 30%; } } @media (max-width: 767px) { .hero--selfmakeup .hero__image-placeholder { background-image: url(data:image/jpeg;base64,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); } } .hero__content { position: relative; z-index: 2; padding: 0 24px 80px; max-width: var(--max-width); margin: 0 auto; width: 100%; } .hero__label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; } .hero__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 300; font-size: 56px; line-height: 1.1; color: var(--white); margin-bottom: 20px; max-width: 700px; } body.mastered .hero__title { font-family: 'ratiomodern', var(--font-serif); font-weight: 400; letter-spacing: normal; } .hero__title span { color: var(--gold); } .hero__subtitle { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); max-width: 520px; margin-bottom: 32px; } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero--service { height: 70vh; min-height: 480px; } .text-section { max-width: 720px; margin: 0 auto; } .text-section p { margin-bottom: 20px; font-size: 15px; line-height: 1.8; color: var(--text); } .text-section .label { margin-bottom: 12px; display: block; font-size: 11px; line-height: inherit; color: var(--brown); } .experience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .experience-image { aspect-ratio: 3 / 4; background: var(--cream-dark); border-radius: var(--radius-card); object-fit: cover; width: 100%; transition: transform 600ms var(--ease-fluid); } .experience-image:hover { transform: scale(1.02); } .included-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .included-list__item { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: var(--text); } .included-list__item::before { content: "\2192"; color: var(--gold); font-size: 16px; flex-shrink: 0; margin-top: 2px; } .inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .inc-card-wrap { display: flex; } .inc-card { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; padding: 26px 30px 28px; overflow: hidden; border: 1px solid rgba(196, 162, 101, 0.1); border-radius: var(--radius-card); background: radial-gradient(140% 130px at 50% 0%, rgba(196, 162, 101, 0.09), transparent 75%), var(--white); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(27, 40, 56, 0.08); transition: transform 600ms var(--ease-fluid), box-shadow 600ms var(--ease-fluid); } @media (hover: hover) { .inc-card:hover { transform: translateY(-8px); box-shadow: 0 2px 3px rgba(17, 24, 39, 0.06), 0 14px 30px rgba(27, 40, 56, 0.11), 0 30px 60px rgba(196, 162, 101, 0.16); } } .inc-card::before, .inc-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; } .inc-card::before { background: conic-gradient(from -90deg, #C4A265 0%, #ffffff 2%, #D4B97A 6%, rgba(196, 162, 101, 0.35) 18%, rgba(138, 124, 94, 0.45) 30%, rgba(196, 162, 101, 0.30) 42%, #D4B97A 52%, rgba(154, 138, 104, 0.45) 62%, rgba(196, 162, 101, 0.35) 72%, #C4A265 80%, #ffffff 84%, #D4B97A 88%, #C4A265 100%); } .inc-card::after { background: conic-gradient(from var(--glint-angle, 0deg), transparent, var(--gold-lt) 9%, rgba(255, 253, 248, 0.95) 11%, var(--gold-lt) 13%, transparent 22%); opacity: 0; transition: opacity 500ms var(--ease-smooth); animation: glint-spin 11s linear infinite; animation-play-state: paused; } @media (hover: hover) { .inc-card:hover::after { opacity: 1; animation-play-state: running; } } @media (prefers-reduced-motion: reduce) { .inc-card::after { animation: none; opacity: 0; } } .inc-card__index { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .inc-card__mark { flex-shrink: 0; width: 20px; height: 20px; } .inc-card__mark svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; } .inc-card__ln { transform-box: fill-box; transform-origin: 0 50%; transition: transform 520ms var(--ease-back), opacity 220ms var(--ease-soft); } .inc-card__ln--tail { transform: translate(3.5px, 10px) rotate(0deg) scale(1); } .inc-card__ln--lead { transform: translate(15.2px, 10px) rotate(225deg) scale(1); } .inc-card__ln--fold { transform: translate(15.2px, 10px) rotate(135deg) scale(1); } @media (hover: hover) { .inc-card:hover .inc-card__ln--tail { transform: translate(4.2px, 9.2px) rotate(43.7deg) scale(0.53); } .inc-card:hover .inc-card__ln--lead { transform: translate(8.6px, 13.4px) rotate(310.8deg) scale(1.95); transition-delay: 40ms; } .inc-card:hover .inc-card__ln--fold { transform: translate(15.2px, 10px) rotate(180deg) scale(0.3); opacity: 0; } } @media (hover: none) { .inc-card__ln--tail { transform: translate(4.2px, 9.2px) rotate(43.7deg) scale(0.53); } .inc-card__ln--lead { transform: translate(8.6px, 13.4px) rotate(310.8deg) scale(1.95); } .inc-card__ln--fold { opacity: 0; } } .inc-card__title { position: relative; z-index: 2; font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--navy); margin: 0 0 10px; } .inc-card__body { position: relative; z-index: 2; max-width: calc(100% - 110px); margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-light); } .inc-card__icon { position: absolute; right: 18px; bottom: 14px; width: 110px; height: 110px; z-index: 1; pointer-events: none; transition: transform 700ms var(--ease-fluid); } .inc-card__icon img { width: 100%; height: 100%; object-fit: contain; object-position: bottom right; display: block; transform: scale(var(--icon-scale, 1)); transform-origin: bottom right; } .inc-card__icon--phone { --icon-scale: 0.99; } .inc-card__icon--mirror { --icon-scale: 1.08; } .inc-card__icon--kit { --icon-scale: 0.96; } .inc-card__icon--bag { --icon-scale: 0.96; } .inc-card__icon--train { --icon-scale: 1.01; } .inc-card__icon--watch { --icon-scale: 1.02; } .inc-card__icon--palette { --icon-scale: 0.96; } .inc-card__icon--bottles { --icon-scale: 1.10; } .inc-card__icon--chair { --icon-scale: 1.07; } .inc-card__icon--handmirror { --icon-scale: 1.17; } .inc-card__icon--hourglass { --icon-scale: 1.06; } @media (hover: hover) { .inc-card__icon { will-change: transform; } .inc-card:hover .inc-card__icon { transform: translateY(-6px) scale(1.07) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .inc-card, .inc-card__icon, .inc-card__ln { transition: none; } .inc-card:hover { transform: none; } .inc-card:hover .inc-card__icon { transform: none; } } @media (max-width: 1199px) { .inc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .inc-grid { grid-template-columns: 1fr; gap: 16px; } .inc-card { padding: 24px 26px 26px; } .inc-card__title { font-size: 22px; } .inc-card__body { max-width: calc(100% - 96px); font-size: 14px; } .inc-card__icon { width: 96px; height: 96px; right: 16px; bottom: 14px; } } .occ3-row{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:0 44px; } .occ3-col{ position:relative; padding-top:26px; display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:12px; } .occ3-col::before{ content:'';position:absolute;left:0;right:0;top:0;height:1px; background:rgba(196,162,101,.42); transform:scaleX(0);transform-origin:left center; transition:transform 1000ms var(--ease-fluid); } .occ3-col.revealed::before{transform:scaleX(1)} .occ3-col:nth-child(1)::before{transition-delay:0ms} .occ3-col:nth-child(2)::before{transition-delay:250ms} .occ3-col:nth-child(3)::before{transition-delay:500ms} .occ3-col:nth-child(4)::before{transition-delay:750ms} .occ3-col__title{ font-family:var(--font-serif); font-weight:500; font-size:29px; line-height:1.18; letter-spacing:-.035em; color:var(--navy); margin:0; } .occ3-col__note{ font-family:var(--font-sans); font-size:14px; line-height:1.65; color:var(--text-light); margin:0; } .occ3-claim{ max-width:720px; margin:64px auto 0; padding-top:34px; border-top:1px solid rgba(196,162,101,.42); text-align:center; } .occ3-claim p{ font-family:var(--font-serif); font-size:24px; line-height:1.5; letter-spacing:-.02em; color:var(--navy); margin:0; } .occ3-claim em{font-style:italic} @media (max-width:1199px){ .occ3-row{gap:0 32px} .occ3-col__title{font-size:25px} } @media (max-width:1023px){ .occ3-row{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,auto);gap:0 40px} .occ3-col:nth-child(n+3){margin-top:44px} .occ3-claim{margin-top:52px} } @media (max-width:767px){ .occ3-row{display:block} .occ3-col{display:block;padding-top:22px;padding-bottom:26px} .occ3-col:nth-child(n+3){margin-top:0} .occ3-col__title{font-size:24px} .occ3-col__note{margin-top:8px} .occ3-claim{margin-top:40px;padding-top:28px} .occ3-claim p{font-size:20px} } @media (prefers-reduced-motion:reduce){ .occ3-col::before{transition:none;transform:scaleX(1)} } .learn { max-width: 720px; margin: 44px auto 0; } .learn .learn__group + .learn__group { margin-top: 72px; } .learn .learn__label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #7A5C33; text-align: left; margin: 0 0 22px; padding-top: 16px; border-top: 1px solid rgba(196, 162, 101, 0.45); } .learn .learn__list { margin: 0; } .learn .learn__list dt { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--navy); margin: 0; } .learn .learn__list dd { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: var(--text-light); margin: 3px 0 0; } .learn .learn__group:nth-child(2) { transition-delay: 140ms; } .learn .learn__group:nth-child(3) { transition-delay: 280ms; } @media (max-width: 899px) { .learn .learn__group:nth-child(2), .learn .learn__group:nth-child(3) { transition-delay: 0ms; } } .learn .learn__obj { width: 120px; height: 120px; margin: 0 0 6px -8px; pointer-events: none; } .learn .learn__obj img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; display: block; transform: scale(var(--obj-scale, 1)); transform-origin: left bottom; } .learn .learn__obj--cosmeticbag { --obj-scale: 1; } .learn .learn__obj--lipbrow { --obj-scale: 1; } .learn .learn__obj--notebook { --obj-scale: 1; } .learn .learn__obj--mirror { --obj-scale: 1; } .learn .learn__obj--shadefan { --obj-scale: 1; } .learn .learn__obj--notecard { --obj-scale: 1; } .learn-lead .learn-lead__beat { display: block; text-wrap: balance; } .learn-lead .learn-lead__seg--a { display: block; } @media (min-width: 768px) { .learn-lead .learn-lead__seg--a { display: inline; } .learn-lead .learn-lead__seg--c { display: block; } } .learn-lead .learn-lead__beat--proof { color: #7A5C33; } .learn-lead { text-align: left; } @media (min-width: 768px) { .learn-lead { text-align: center; } .learn .learn__list dt { font-size: 22px; } .learn .learn__list dd { font-size: 15.5px; } } @media (min-width: 900px) { .learn { max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; align-items: start; } .learn .learn__group + .learn__group { margin-top: 0; } .learn .learn__list dt { font-size: 20px; } .learn .learn__list dd { font-size: 14.5px; } .learn .learn__obj { width: 148px; height: 148px; margin-bottom: 10px; } } .learn--tight .learn__obj { width: 160px; height: 96px; } @media (min-width: 900px) { .learn--tight .learn__obj { width: 192px; height: 116px; } } @media (prefers-reduced-motion: reduce) { .learn .learn__group { transition: none; transition-delay: 0ms; } } .testimonials-wall { display: flex; justify-content: center; gap: 24px; max-height: 700px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); } .testimonials-col { display: flex; flex-direction: column; gap: 20px; will-change: transform; backface-visibility: hidden; } .testimonial-card { background: var(--cream-dark); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; box-shadow: 0 4px 20px rgba(27, 40, 56, 0.04); transition: transform 400ms var(--ease-fluid), box-shadow 400ms var(--ease-fluid); max-width: 320px; width: 100%; } @media (hover: hover) and (pointer: fine) { .testimonial-card:not(.reveal):hover, .testimonial-card.entrance-done:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(27, 40, 56, 0.1); } } @media (min-width: 1200px) and (hover: hover) { body.mastered .testimonial-card.reveal.entrance-done:hover { transform: translateY(-4px); } } .testimonial-card.reveal { transition: opacity 1800ms cubic-bezier(0.16, 1, 0.3, 1), transform 1800ms cubic-bezier(0.16, 1, 0.3, 1), filter 1800ms cubic-bezier(0.16, 1, 0.3, 1); } .testimonial-card.reveal.entrance-done { transition: transform 400ms var(--ease-fluid), box-shadow 400ms var(--ease-fluid); filter: none; } body .testimonials-wall.reveal { opacity: 1; transform: none; filter: none; transition: none; } @keyframes testimonialCardRise { from { opacity: 0; transform: translate3d(0, var(--card-rise, 48px), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .testimonials-wall .testimonials-col > .testimonial-card:nth-child(-n+4) { opacity: 0; } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(-n+4) { opacity: 1; animation: testimonialCardRise 1100ms cubic-bezier(0.45, 0, 0.15, 1) backwards; } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(2) { animation-delay: 150ms; } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(3) { animation-delay: 300ms; } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(4) { animation-delay: 450ms; } @media (min-width: 1200px) { .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(-n+4) { --card-rise: 100px; animation-duration: 1800ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(2) { animation-delay: 250ms; } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(3) { animation-delay: 500ms; } .testimonials-wall.revealed .testimonials-col > .testimonial-card:nth-child(4) { animation-delay: 750ms; } } .testimonial-card__quote { font-family: var(--font-serif); letter-spacing: -0.035em; font-style: italic; font-size: 16px; line-height: 1.55; color: var(--navy); margin-bottom: 20px; } .testimonial-card__quote::before { content: "\201C"; font-size: 40px; color: var(--gold); line-height: 0; vertical-align: -14px; margin-right: 2px; } .testimonial-card__author-row { display: flex; align-items: center; gap: 10px; } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--cream-dark); flex-shrink: 0; } .testimonial-card__author-info { display: flex; flex-direction: column; } .testimonial-card__author { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--navy); line-height: 1.3; } .testimonial-card__occasion { font-family: var(--font-sans); font-size: 12px; color: var(--text-light); line-height: 1.3; } .testimonials-col--phone { display: none; } @media (min-width: 1200px) { .testimonial-card { max-width: 284px; } } @media (max-width: 1199px) { .testimonials-col:nth-child(1), .testimonials-col:nth-child(n+4) { display: none; } } @media (max-width: 767px) { .testimonials-wall { gap: 16px; max-height: 660px; -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); } .testimonials-col:nth-child(1), .testimonials-col:nth-child(n+3) { display: none; } .testimonial-card { max-width: 100%; } .testimonials-col:nth-child(2) { display: none; } .testimonials-col.testimonials-col--phone { display: flex; } } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .spectrum { margin-top: 48px; } .spectrum__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; } .spectrum__frame { aspect-ratio: 3 / 4; border-radius: var(--radius-gallery); overflow: hidden; background: var(--cream-dark); } .spectrum__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-fluid); } .spectrum__item:hover .spectrum__frame img { transform: scale(1.04); } .spectrum__item:nth-child(1) .spectrum__frame { aspect-ratio: 3 / 3.5; } .spectrum__item:nth-child(5) .spectrum__frame { aspect-ratio: 3 / 4.4; } .spectrum__caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--text-light); text-align: center; margin-top: 12px; } .spectrum__axis { display: flex; align-items: center; gap: 18px; margin-top: 26px; } .spectrum__axis-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--cream-dark) 0%, var(--gold) 100%); } .spectrum__axis-end { font-family: var(--font-serif); font-size: 16px; letter-spacing: -0.035em; color: var(--gold); white-space: nowrap; } @media (max-width: 767px) { .spectrum__row { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .spectrum__item { flex: 0 0 148px; scroll-snap-align: start; } .spectrum__axis-end { font-size: 13px; } } .session-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; } .session-flow__frame { aspect-ratio: 4 / 3; border-radius: var(--radius-gallery); overflow: hidden; background: var(--cream-dark); } .session-flow__frame img { width: 100%; height: 100%; object-fit: cover; } .session-flow__num { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 30px; color: var(--gold); line-height: 1; margin-top: 18px; } .session-flow__label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); margin-top: 10px; } .session-flow__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 21px; line-height: 1.25; color: var(--text); margin-top: 4px; } .session-flow__desc { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--text-light); margin-top: 8px; } @media (max-width: 1199px) { .session-flow { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (max-width: 767px) { .session-flow { grid-template-columns: 1fr; gap: 32px; } .session-flow__frame { aspect-ratio: 16 / 9; } .session-flow.reveal-stagger > .reveal { transition-delay: 0ms; } } .looks-grid { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 24px; row-gap: 40px; } .looks-grid__item:nth-child(1) { grid-column: 1 / span 2; } .looks-grid__item:nth-child(2) { grid-column: 3 / span 2; margin-top: 72px; } .looks-grid__item:nth-child(3) { grid-column: 5 / span 2; margin-top: 20px; } .looks-grid__item:nth-child(4) { grid-column: 2 / span 2; } .looks-grid__item:nth-child(5) { grid-column: 4 / span 2; margin-top: 72px; } .looks-grid__item:nth-child(2) .looks-grid__frame, .looks-grid__item:nth-child(4) .looks-grid__frame { aspect-ratio: 4 / 5; } .looks-grid__item { display: flex; flex-direction: column; } .looks-grid__frame { aspect-ratio: 3 / 4; border-radius: var(--radius-gallery); overflow: hidden; background: var(--cream-dark); } .looks-grid__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-fluid); } .looks-grid__item:hover .looks-grid__frame img { transform: scale(1.04); } .looks-grid__num { font-family: var(--font-serif); font-size: 14px; color: var(--gold); letter-spacing: -0.035em; margin-top: 16px; } .looks-grid__name { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 20px; line-height: 1.25; color: var(--text); margin-top: 2px; } .looks-grid__desc { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.55; color: var(--text-light); margin-top: 8px; } @media (max-width: 1199px) { .looks-grid { grid-template-columns: repeat(3, 1fr); column-gap: 18px; row-gap: 28px; } .looks-grid__item:nth-child(1), .looks-grid__item:nth-child(2), .looks-grid__item:nth-child(3), .looks-grid__item:nth-child(4), .looks-grid__item:nth-child(5) { grid-column: auto; margin-top: 0; } .looks-grid__item:nth-child(2) .looks-grid__frame, .looks-grid__item:nth-child(4) .looks-grid__frame { aspect-ratio: 3 / 4; } } @media (max-width: 767px) { .looks-grid { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 22px; } .looks-grid__name { font-size: 17px; } .looks-grid__desc { font-size: 12px; } } .gallery-grid__item { aspect-ratio: 3 / 4; border-radius: var(--radius-gallery); overflow: hidden; background: var(--cream-dark); cursor: pointer; } .gallery-grid__item img, .gallery-grid__item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-fluid); } @media (hover: hover) and (pointer: fine) { .gallery-grid__item:hover img, .gallery-grid__item:hover video { transform: scale(1.05); } } body.mastered .cf { --cf-w: 78; --cf-max-w: 440px; --cf-h-mult: 1.5; display: none; } @media (max-width: 767px) { body.mastered .cf { display: block; } body.mastered .gallery-grid:has(~ .cf) { display: none; } } body.mastered .cf__stage { position: relative; height: min(calc(var(--cf-w) * 1vw * var(--cf-h-mult)), calc(var(--cf-max-w) * var(--cf-h-mult))); perspective: 1000px; margin: 0 calc(-1 * clamp(24px, 6.4vw, 32px)); overflow: hidden; overflow-x: clip; overflow-y: visible; touch-action: pan-y; } body.mastered .cf__track { position: absolute; inset: 0; } body.mastered .cf__cell { position: absolute; top: 50%; left: 50%; width: min(calc(var(--cf-w) * 1%), var(--cf-max-w)); aspect-ratio: 2 / 3; margin: 0; border-radius: 12px; box-shadow: 0 1px 1px rgba(27, 40, 56, 0.10), 0 4px 9px rgba(27, 40, 56, 0.10), 0 18px 34px rgba(27, 40, 56, 0.14); transition: transform 500ms var(--ease-soft), opacity 500ms var(--ease-soft); } body.mastered .cf__cell img, body.mastered .cf__cell video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid rgba(196, 162, 101, 0.22); background: var(--cream-dark); transition: filter 500ms var(--ease-soft); } body.mastered .cf__controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 40px; } body.mastered .cf__arrow { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--navy); background: rgba(247, 239, 223, 0.72); border: 1px solid rgba(196, 162, 101, 0.28); box-shadow: 0 2px 8px rgba(27, 40, 56, 0.06); transition: opacity 300ms var(--ease-soft); } body.mastered .cf__arrow:active { opacity: 0.6; } body.mastered .cf__counter { text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; color: var(--gold); font-variant-numeric: tabular-nums; } body.mastered .cf__counter-sep { margin: 0 8px; opacity: 0.5; } body.mastered .cf__counter-all { opacity: 0.5; } @media (prefers-reduced-motion: reduce) { body.mastered .cf__cell, body.mastered .cf__cell img, body.mastered .cf__cell video { transition: none; } } .students-grid { column-count: 3; column-gap: 24px; } .students-grid .testimonial-card { max-width: none; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: block; margin-bottom: 24px; width: 100%; } @media (max-width: 1199px) { .students-grid { column-count: 2; } } @media (max-width: 767px) { .students-grid { column-count: 1; column-gap: 16px; } .students-grid .testimonial-card { margin-bottom: 16px; } } body.mastered .students-grid { column-count: initial; column-gap: normal; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.mastered .students-grid .testimonial-card { display: flex; flex-direction: column; margin-bottom: 0; } body.mastered .students-grid .testimonial-card__author-row { margin-top: auto; } @media (max-width: 1199px) { body.mastered .students-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { body.mastered .students-grid { grid-template-columns: 1fr; gap: 16px; } } .pricing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--max-width); margin: 32px auto 0; } .pricing-tiers__card { position: relative; background: radial-gradient(140% 130px at 50% 0%, rgba(196, 162, 101, 0.09), transparent 75%), var(--white); border: none; border-radius: var(--radius-card); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(27, 40, 56, 0.08); transition: transform 600ms var(--ease-fluid), box-shadow 600ms var(--ease-fluid); } @media (hover: hover) { .pricing-tiers__card:not(.reveal):hover, .pricing-tiers__card.entrance-done:hover { transform: translateY(-8px); box-shadow: 0 2px 3px rgba(17, 24, 39, 0.06), 0 14px 30px rgba(27, 40, 56, 0.11), 0 30px 60px rgba(196, 162, 101, 0.16); } } @media (min-width: 1200px) and (hover: hover) { body.mastered .pricing-tiers__card.reveal.entrance-done:hover { transform: translateY(-8px); } } .pricing-tiers__card.reveal { transition: opacity 1800ms var(--ease-fluid), transform 1800ms var(--ease-fluid), filter 1800ms var(--ease-fluid); } @media (max-width: 1199px) { .pricing-tiers__card.reveal { transition: opacity 1100ms cubic-bezier(0.45, 0, 0.15, 1), transform 1100ms cubic-bezier(0.45, 0, 0.15, 1), filter 1100ms cubic-bezier(0.45, 0, 0.15, 1); } } .pricing-tiers__card.reveal.entrance-done { transition: transform 600ms var(--ease-fluid), box-shadow 600ms var(--ease-fluid); filter: none; } .pricing-tiers__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from -90deg, #C4A265 0%, #ffffff 2%, #D4B97A 6%, rgba(196, 162, 101, 0.35) 18%, rgba(138, 124, 94, 0.45) 30%, rgba(196, 162, 101, 0.30) 42%, #D4B97A 52%, rgba(154, 138, 104, 0.45) 62%, rgba(196, 162, 101, 0.35) 72%, #C4A265 80%, #ffffff 84%, #D4B97A 88%, #C4A265 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; } .pricing-tiers__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--glint-angle, 0deg), transparent, var(--gold-lt) 9%, rgba(255, 253, 248, 0.95) 11%, var(--gold-lt) 13%, transparent 22%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 500ms var(--ease-smooth); animation: glint-spin 11s linear infinite; animation-play-state: paused; } @media (hover: hover) { .pricing-tiers__card:hover::after { opacity: 1; animation-play-state: running; } } @media (prefers-reduced-motion: reduce) { .pricing-tiers__card::after { animation: none; opacity: 0; } } .pricing-tiers__zone { font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; } .pricing-tiers__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 28px; line-height: 1.1; color: var(--navy); margin: 0; font-weight: 400; } .pricing-tiers__title small { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--text-light); letter-spacing: 1px; text-transform: uppercase; font-weight: 500; margin-top: 6px; } .pricing-tiers__from { display: flex; align-items: baseline; gap: 10px; margin: 0 -32px; padding: 14px 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%), rgba(196, 162, 101, 0.07); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pricing-tiers__from-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); } .pricing-tiers__from-price { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 52px; color: var(--gold); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums lining-nums; } .pricing-tiers__from-price--text { font-size: 28px; } .pricing-tiers__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .pricing-tiers__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; } .pricing-tiers__list li:first-child { padding-top: 0; } .pricing-tiers__list li:last-child { padding-bottom: 0; } .pricing-tiers__list li + li { border-top: 1px solid rgba(196, 162, 101, 0.12); } .pricing-tiers__svc { font-family: var(--font-sans); font-size: 16px; color: var(--text); line-height: 1.4; } .pricing-tiers__price { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 20px; color: var(--gold); font-weight: 500; font-style: italic; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } .pricing-tiers__note { font-family: var(--font-sans); font-size: 12px; color: var(--text-light); font-style: italic; margin-top: auto; padding-top: 8px; } .pricing-tiers--solo { grid-template-columns: 1fr; max-width: 520px; } @media (max-width: 1199px) { .pricing-tiers { grid-template-columns: 1fr; } } @media (max-width: 767px) { .pricing-tiers__card { padding: 26px 24px; gap: 14px; } .pricing-tiers__from { margin: 0 -24px; padding: 12px 24px; } } .party-est { --ease-spring: linear( 0, 0.0365 0.9%, 0.1454 2.5%, 0.273 4.4%, 0.3953 6.6%, 0.5076 9%, 0.6056 11.6%, 0.6886 14.4%, 0.7581 17.3%, 0.8144 20.4%, 0.8592 23.7%, 0.8942 27%, 0.9216 30.5%, 0.9423 34.2%, 0.9581 37.9%, 0.9697 41.7%, 0.9784 45.7%, 0.9847 49.7%, 0.9892 53.9%, 0.9925 58.1%, 0.9948 62.4%, 0.9964 66.8%, 0.9976 71.3%, 0.9984 75.9%, 0.9989 80.6%, 0.9993 85.3%, 0.9995 90.1%, 0.9997 95%, 1 ); position: relative; max-width: var(--max-width); margin: 24px auto 0; background: radial-gradient(140% 130px at 50% 0%, rgba(196, 162, 101, 0.09), transparent 75%), var(--white); border: 1px solid rgba(196, 162, 101, 0.1); border-radius: var(--radius-card); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(27, 40, 56, 0.08); } .party-est.reveal.revealed { filter: none; } .party-est::before, .party-est::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; } .party-est::before { background: conic-gradient(from -90deg, #C4A265 0%, #ffffff 2%, #D4B97A 6%, rgba(196, 162, 101, 0.35) 18%, rgba(138, 124, 94, 0.45) 30%, rgba(196, 162, 101, 0.30) 42%, #D4B97A 52%, rgba(154, 138, 104, 0.45) 62%, rgba(196, 162, 101, 0.35) 72%, #C4A265 80%, #ffffff 84%, #D4B97A 88%, #C4A265 100%); } .party-est::after { background: conic-gradient(from var(--glint-angle, 0deg), transparent, var(--gold-lt) 9%, rgba(255, 253, 248, 0.95) 11%, var(--gold-lt) 13%, transparent 22%); opacity: 0; transition: opacity 500ms var(--ease-smooth); animation: glint-spin 11s linear infinite; animation-play-state: paused; } @media (hover: hover) { .party-est:hover::after { opacity: 1; animation-play-state: running; } } @media (prefers-reduced-motion: reduce) { .party-est::after { animation: none; opacity: 0; } } .party-est__group { display: flex; flex-direction: column; gap: 10px; } .party-est__label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); font-weight: 600; } .party-est__zones { display: flex; gap: 10px; flex-wrap: wrap; } .party-est__zone, .party-est__btn { position: relative; border: none; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: var(--font-sans); font-weight: 500; color: var(--navy); background: linear-gradient(180deg, #FFFDFA 0%, #F4EEE6 46%, #E9E0D4 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 2px rgba(92, 64, 51, 0.12), inset 0 -9px 16px rgba(92, 64, 51, 0.05), 0 1px 1px rgba(0, 0, 0, 0.11), 0 3px 7px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.12); transition: transform 340ms var(--ease-soft), box-shadow 340ms var(--ease-soft), opacity 340ms var(--ease-soft); } .party-est__zone::before, .party-est__btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: conic-gradient(from 40deg, #2b3242 0%, #C4A265 8%, #ffffff 12%, #D4B97A 16%, #374053 24%, #8a7c5e 33%, #333c50 41%, #D4B97A 53%, #374053 60%, #9a8a68 68%, #C4A265 74%, #ffffff 78%, #C4A265 82%, #2b3242 91%, #2b3242 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .party-est__zone { font-size: 13px; letter-spacing: 0.5px; padding: 10px 24px; white-space: nowrap; } @media (hover: hover) { .party-est__zone:hover, .party-est__btn:hover:not(:disabled) { transition-duration: 300ms; transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 2px rgba(92, 64, 51, 0.12), inset 0 -9px 16px rgba(92, 64, 51, 0.05), 0 1px 1px rgba(0, 0, 0, 0.11), 0 9px 15px rgba(0, 0, 0, 0.18), 0 18px 32px rgba(0, 0, 0, 0.20); } } .party-est__zone[aria-pressed="true"] { background: linear-gradient(180deg, #E0C593 0%, #C4A265 52%, #A8863E 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 2px rgba(60, 40, 10, 0.22), inset 0 -10px 18px rgba(60, 40, 10, 0.07), 0 1px 1px rgba(0, 0, 0, 0.12), 0 3px 7px rgba(0, 0, 0, 0.13), 0 8px 16px rgba(0, 0, 0, 0.13); } .party-est__zone:active, .party-est__zone.is-pressed, .party-est__btn:active:not(:disabled), .party-est__btn.is-pressed:not(:disabled) { transition-duration: 90ms; transform: translateY(1px) scale(0.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 2px rgba(92, 64, 51, 0.12), 0 1px 1px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.14); } .party-est__stepper { display: flex; align-items: center; gap: 14px; } .party-est__btn { width: 44px; height: 44px; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .party-est__btn:disabled { opacity: .35; cursor: default; } .haptic-tick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 5; } :disabled > .haptic-tick { pointer-events: none; } .cf__arrow, .nav__hamburger, .nav__mobile-link { position: relative; } @media (hover: hover) and (pointer: fine) { .haptic-tick { pointer-events: none; } } .party-est__count { font-family: var(--font-serif); font-size: 26px; color: var(--navy); min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums lining-nums; } .party-est__count small { display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); } .party-est__total { text-align: right; flex: 0 0 360px; max-width: 360px; } .party-est__amount { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--gold); font-weight: 500; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; display: inline-flex; align-items: center; position: relative; } .party-est__delta { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(196, 162, 101, 0.14); color: var(--navy); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; vertical-align: middle; opacity: 0; } .party-est__delta-arrow { display: inline-block; transition: transform 200ms var(--ease-soft); } .party-est__delta--down .party-est__delta-arrow { transform: rotate(180deg); } .party-est__delta.is-show { animation: delta-pop 500ms var(--ease-spring) both; } @keyframes delta-pop { 0% { opacity: 0; transform: translateY(5px) scale(0.85); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .party-est__delta.is-show { animation: none; opacity: 1; } .party-est__delta-arrow { transition: none; } .party-est__reel { transition: none; } } .party-est__digit { display: inline-block; height: 1.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 68%, transparent 100%); } .party-est__reel { display: flex; flex-direction: column; transition: transform 420ms var(--ease-spring); } .party-est__reel span { height: 1.5em; line-height: 1; display: flex; align-items: center; justify-content: center; } .party-est__digit + .party-est__digit .party-est__reel { transition-delay: 50ms; } .party-est__digit + .party-est__digit + .party-est__digit .party-est__reel { transition-delay: 100ms; } .party-est__words { font-family: var(--font-serif); font-size: 28px; line-height: 66px; color: var(--gold); font-style: italic; display: none; } .party-est.is-words .party-est__amount { display: none; } .party-est.is-words .party-est__words { display: inline; } .party-est__foot { font-family: var(--font-sans); font-size: 11px; color: var(--text-light); font-style: italic; margin-top: 8px; min-height: 38px; } .party-est__sr-total { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 1199px) { .party-est { flex-direction: column; align-items: center; text-align: center; } .party-est__group { align-items: center; align-self: stretch; } .party-est__zones { justify-content: center; } .party-est__stepper { justify-content: center; } .party-est__total { text-align: center; flex: 0 0 auto; max-width: none; } .party-est__delta { position: absolute; left: calc(100% + 12px); top: 50%; margin-left: 0; transform: translateY(-50%); } .party-est__delta.is-show { animation-name: delta-pop-centered; } } @keyframes delta-pop-centered { 0% { opacity: 0; transform: translateY(calc(-50% + 5px)) scale(0.85); } 100% { opacity: 1; transform: translateY(-50%); } } @media (min-width: 1200px) { .party-est { justify-content: center; gap: clamp(32px, 5vw, 72px); } .party-est__group { align-items: center; text-align: center; } .party-est__zones, .party-est__stepper { justify-content: center; } .party-est__total { text-align: center; } .party-est__count { min-width: 102px; } .party-est__delta { position: absolute; left: calc(100% + 12px); top: 50%; margin-left: 0; transform: translateY(-50%); } .party-est__delta.is-show { animation-name: delta-pop-centered; } } @media (max-width: 767px) { .party-est { padding: 26px 24px; } .party-est__zone { padding: 14px 22px; } .party-est__zones { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .party-est__zone { padding-left: 8px; padding-right: 8px; } .party-est__zone:last-child:nth-child(n+3) { grid-column: 1 / -1; } } .pricing-table { max-width: 640px; margin: 0 auto; } .pricing-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border); } .pricing-row__service { font-size: 15px; color: var(--text); } .pricing-row__price { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 18px; color: var(--gold); } .pricing-note { font-size: 13px; color: var(--text-light); font-style: italic; margin-top: 16px; } .cta-block { text-align: center; padding: 48px 0; } .cta-final__pulse.revealed { animation: ctaPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; box-shadow: 0 0 24px rgba(196, 162, 101, 0.18); } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 24px rgba(196, 162, 101, 0.18); } 50% { box-shadow: 0 0 50px rgba(196, 162, 101, 0.35), 0 0 80px rgba(196, 162, 101, 0.1); } } .cta-final__pulse.cta-final__btn--settled:hover { animation: none; box-shadow: 0 12px 40px rgba(196, 162, 101, 0.3), 0 0 80px rgba(196, 162, 101, 0.1); } .cta-final__title { font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; font-size: clamp(56px, 12vw, 96px); line-height: 1; color: var(--white); letter-spacing: normal; margin-bottom: 48px; } .cta-final__title .proof-word { padding: 0 0.3em; margin: 0 -0.3em; } .cta-final__title .proof-word.revealed { transform: none; filter: none; } @media (min-width: 1200px) { @supports ((-webkit-background-clip: text) or (background-clip: text)) { .cta-final__title .proof-word { background-image: radial-gradient(90% 160% at 50% 120%, #F7EFDF 0%, #E3CD9C 55%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } } .cta-final__btn:not(.cta-final__btn--settled), body .cta-final__btn:not(.cta-final__btn--settled):hover { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 1200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1200ms cubic-bezier(0.16, 1, 0.3, 1), background 1000ms cubic-bezier(0.16, 1, 0.3, 1); } .cta-final__btn.revealed, body .cta-final__btn.revealed:not(.cta-final__btn--settled):hover { opacity: 1; transform: translateY(0); filter: none; } @media (hover: hover) and (pointer: fine) { .cta-final__btn.cta-final__btn--settled:hover { transform: translateY(-4px); } } .cta-final__btn.revealed:active, .cta-final__btn.revealed.is-pressed { transform: translateY(1px) scale(0.985); } @media (min-width: 1200px) { .cta-block.cta-final { padding: 0; } } .cta-final__pre-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 28px; opacity: 0; transform: translateY(8px); transition: opacity 800ms var(--ease-fluid), transform 800ms var(--ease-fluid); } .cta-final__pre-label.revealed { opacity: 1; transform: translateY(0); } .cta-final__anna-line { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 400; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5; color: rgba(245, 240, 235, 0.85); margin: 0 0 56px; } .cta-final__anna-l { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 1000ms var(--ease-fluid), transform 1000ms var(--ease-fluid); } .cta-final__anna-line.revealed .cta-final__anna-l { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .cta-final__anna-l { transform: translateY(14px); transition: opacity 950ms cubic-bezier(0.45, 0, 0.15, 1), transform 950ms cubic-bezier(0.45, 0, 0.15, 1); } .cta-final__anna-line.revealed .cta-final__anna-l--2 { transition-delay: 260ms; } .cta-final__pre-label, .cta-final__reassurance { transition: opacity 950ms cubic-bezier(0.45, 0, 0.15, 1), transform 950ms cubic-bezier(0.45, 0, 0.15, 1); } } .cta-final__brk { display: none; } @media (max-width: 768px) { .cta-final__brk { display: inline; } } .cta-final__reassurance { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.5px; margin-top: 20px; opacity: 0; transform: translateY(8px); transition: opacity 1000ms var(--ease-fluid), transform 1000ms var(--ease-fluid); } .cta-final__reassurance.revealed { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .cta-block.cta-final { padding: 0; } .cta-final__pre-label { margin-bottom: 16px; } .cta-final__anna-line { margin-bottom: 24px; } .cta-final__title { margin-bottom: 28px; } .cta-final__reassurance { font-size: 11px; margin-top: 16px; } .cta-final__dot, .cta-final__dash, .cta-final__studio { display: none; } } .cta-block .section-title { margin-bottom: 12px; } .cta-block__text { font-size: 15px; color: var(--text-light); margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; } .cta-block__secondary { display: block; margin-top: 16px; font-size: 13px; color: var(--text-light); } .cta-block__secondary a { color: var(--brown); font-weight: 500; border-bottom: 1px solid var(--gold); } .facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fact-card { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid var(--glass-border); border-radius: var(--radius-card); padding: 32px 24px; text-align: center; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 500ms var(--ease-fluid), box-shadow 500ms var(--ease-fluid); } .fact-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(27, 40, 56, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .fact-card__number { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 36px; color: var(--navy); margin-bottom: 4px; } .fact-card__label { font-size: 13px; color: var(--text-light); } .about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .about-portrait { aspect-ratio: 3 / 4; background: var(--cream-dark); border-radius: var(--radius-card); object-fit: cover; width: 100%; } .about-facts { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .about-facts__item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--text); } .about-facts__item::before { content: "\2192"; color: var(--gold); flex-shrink: 0; } .footer { background: var(--gradient-navy); color: var(--white); padding: 48px 0 24px; } body::after { content: ''; position: fixed; left: 0; right: 0; bottom: -50vh; height: 50vh; background: var(--navy); z-index: -1; pointer-events: none; } .footer__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; } .footer__logo { font-family: 'altesse-std-24pt', var(--font-serif); letter-spacing: normal; font-weight: 400; font-size: 30px; color: var(--white); margin-bottom: 12px; } .footer__text { font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.6; } .footer__heading { font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 16px; } .footer__links { display: flex; flex-direction: column; gap: 10px; } .footer__link { font-size: 13px; color: rgba(255, 255, 255, 0.7); transition: color var(--transition); } .footer__link:hover { color: var(--white); } @media (max-width: 1023px) { .footer__links { gap: 0; } .footer__link { min-height: 44px; display: flex; align-items: center; } } .footer__socials { display: flex; gap: 16px; margin-top: 16px; } .footer__social { font-size: 13px; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 16px; border-radius: var(--radius-pill); transition: all var(--transition); } .footer__social:hover { color: var(--white); border-color: var(--gold); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); } @media (min-width: 1200px) { body:has(.hero-v4) .footer, body.mastered .footer { position: relative; background: linear-gradient(180deg, #10192e 0%, #0b101c 100%); border-top: 1px solid rgba(247, 239, 223, 0.12); padding-top: 72px; overflow: hidden; } body:has(.hero-v4) .footer::before, body.mastered .footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(35% 128px at 50% 0%, rgba(247, 239, 223, 0.08), transparent); } body:has(.hero-v4) .footer::after, body.mastered .footer::after { content: ''; position: absolute; top: 0; left: 50%; width: 33.33%; height: 1px; transform: translateX(-50%); background: rgba(247, 239, 223, 0.2); filter: blur(8px); pointer-events: none; } body:has(.hero-v4) .footer__inner, body.mastered .footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } } @media (max-width: 1023px) { .nav__links { display: none; } .nav__cta.nav__cta--desktop { display: none; } .nav__hamburger { display: flex; } .nav__mobile { display: flex; } } @media (max-width: 1199px) { :root { --section-padding: 96px; } .hero__title { font-size: 44px; } .section-title { font-size: 32px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .facts-grid { grid-template-columns: repeat(2, 1fr); } .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } .experience-grid { gap: 32px; } .about-hero { gap: 32px; } .container { padding: 0 32px; } } @media (max-width: 767px) { :root { --section-padding: 72px; } .hero { height: auto; min-height: 100vh; padding-top: 100px; } .hero--service { min-height: 70vh; padding-top: 100px; } .hero__title { font-size: 36px; } .hero__subtitle { font-size: 14px; } .display-large { font-size: 36px; } .section-title { font-size: 30px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .facts-grid { grid-template-columns: 1fr; } .experience-grid { grid-template-columns: 1fr; } .about-hero { grid-template-columns: 1fr; } .footer__inner { grid-template-columns: 1fr; } .footer { padding-top: 40px; } .footer__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } .testimonial-card { flex: 0 0 auto; } .pricing-row { flex-direction: column; gap: 4px; } .container { padding: 0 24px; } } @media (max-width: 400px) { .hero__title { font-size: 30px; } .section-title { font-size: 26px; } .testimonial-card { flex: 0 0 auto; padding: 24px; } .hero__content { padding-bottom: 60px; } .container { padding: 0 24px; } } .hero-v4 { position: relative; background: var(--cream); } @media (max-width: 1023px) { .hero-v4 { min-height: 100svh; min-height: 100lvh; } .hero-v4 + .section { padding-top: 32px; } } @media (max-width: 1023px) { .section:has(#proof-section) { padding-bottom: 40px; } } @media (min-width: 1200px) { .section:has(#proof-section) { padding-bottom: 48px; } } .hero-v4__media { position: relative; width: 100%; aspect-ratio: 17 / 20; background: #000; } .hero-v4__clip { position: absolute; inset: 0; overflow: hidden; border-radius: 34px 34px 0 0; background: #836c66 url(data:image/webp;base64,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) 50% 30% / cover no-repeat; } .hero-v4__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .hero-v4__fade { position: absolute; left: 0; right: 0; bottom: -2px; height: 46%; pointer-events: none; background: linear-gradient(to bottom, rgba(245, 240, 235, 0) 0%, rgba(245, 240, 235, 0.014) 8%, rgba(245, 240, 235, 0.055) 17%, rgba(245, 240, 235, 0.12) 25%, rgba(245, 240, 235, 0.22) 34%, rgba(245, 240, 235, 0.35) 42%, rgba(245, 240, 235, 0.50) 51%, rgba(245, 240, 235, 0.66) 60%, rgba(245, 240, 235, 0.80) 69%, rgba(245, 240, 235, 0.91) 78%, rgba(245, 240, 235, 0.975) 86%, var(--cream) 94%, var(--cream) 100%); } .hero-v4__content { position: relative; z-index: 2; margin: -44px auto 0; padding: 0 clamp(24px, 6.4vw, 32px) 24px; max-width: var(--max-width); width: 100%; } .hero-v4__headline, .hero-v4__subline, .hero-v4__cta { animation: heroFadeIn 2200ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } .hero-v4__headline { animation-delay: 400ms; } .hero-v4__subline { animation-delay: 900ms; } .hero-v4__cta { animation-delay: 1500ms; } @keyframes heroFadeIn { 0% { opacity: 0; transform: translateY(24px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: none; } } .word-blur { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(14px); animation: wordBlurIn 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(600ms + var(--i, 0) * 200ms); padding-bottom: .26em; margin-bottom: -.26em; } @keyframes wordBlurIn { 0% { opacity: 0; filter: blur(12px); transform: translateY(14px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-v4__headline, .hero-v4__subline, .hero-v4__cta { opacity: 1; transform: none; animation: none; } .word-blur { opacity: 1; filter: none; transform: none; animation: none; } } .hero-v4__proof { display: flex; align-items: center; gap: 14px; margin-top: clamp(14px, 3.73vw, 18px); text-decoration: none; color: inherit; cursor: pointer; } .hero-v4__avatars { display: flex; } .hero-v4__avatars img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream); background: var(--navy); display: block; position: relative; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } .hero-v4__avatars .hero-tip + .hero-tip { margin-left: -14px; } @media (hover: hover) and (pointer: fine) { .hero-tip:hover img { transform: scale(1.18); } .hero-tip:hover + .hero-tip img, .hero-tip:has(+ .hero-tip:hover) img { transform: scale(1.09); } .hero-tip:hover ~ .hero-tip { transform: translateX(10px); } } .hero-tip:hover + .hero-tip, .hero-tip:has(+ .hero-tip:hover) { z-index: 20; } .hero-tip { position: relative; display: inline-block; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } .hero-tip:hover { z-index: 30; } .hero-tip__card { position: absolute; bottom: calc(100% + 14px); left: 50%; z-index: 40; pointer-events: none; transform: translateX(-50%); } .hero-tip__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 190px; background: var(--cream); border-radius: 12px; padding: 14px 18px 16px; box-shadow: 0 14px 34px rgba(10, 18, 32, 0.45); opacity: 0; transform: translateY(10px) scale(0.95); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease; } .hero-tip.is-active .hero-tip__inner { opacity: 1; transform: translateY(0) scale(1); } .hero-tip__inner::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .hero-tip__name { font-family: var(--font-serif); font-weight: 400; font-size: 19px; color: var(--navy); line-height: 1.25; } .hero-tip__role { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark, #a8853c); margin-top: 3px; } .hero-tip__quote { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(15, 26, 44, 0.78); margin-top: 7px; line-height: 1.45; } @media (max-width: 1023px) { .hero-tip__card { display: none; } .hero-tip, .hero-tip:hover, .hero-tip:hover ~ .hero-tip, .hero-tip:hover img, .hero-tip:hover + .hero-tip img, .hero-tip:has(+ .hero-tip:hover) img { transform: none; transition: none; } .hero-tip, .hero-tip:hover, .hero-tip:hover + .hero-tip, .hero-tip:has(+ .hero-tip:hover) { z-index: auto; } .testimonial-card:hover, .testimonial-card:not(.reveal):hover, .testimonial-card.entrance-done:hover { transform: none; box-shadow: 0 4px 20px rgba(27, 40, 56, 0.04); } } .hero-v4__avatars .hero-tip { opacity: 0; animation: proofPop 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-v4__avatars .hero-tip:nth-child(2) { animation-delay: 1150ms; } .hero-v4__avatars .hero-tip:nth-child(3) { animation-delay: 1215ms; } .hero-v4__avatars .hero-tip:nth-child(1), .hero-v4__avatars .hero-tip:nth-child(4) { animation-name: proofPopWide; } .hero-v4__avatars .hero-tip:nth-child(1) { animation-delay: 1330ms; } .hero-v4__avatars .hero-tip:nth-child(4) { animation-delay: 1395ms; } .hero-v4__stat { opacity: 0; animation: proofPop 820ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms forwards; } .hero-v4__avatars .hero-tip.is-settled, .hero-v4__stat.is-settled { animation: none; opacity: 1; } @keyframes proofPop { 0% { opacity: 0; transform: translateY(10px) scale(0.88); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes proofPopWide { 0% { opacity: 0; transform: translateY(16px) scale(0.82); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-v4__avatars .hero-tip, .hero-v4__stat { opacity: 1; transform: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .hero-tip, .hero-tip__inner, .hero-v4__avatars img { transition: none; } } .hero-v4__stat { display: flex; flex-direction: column; line-height: 1.15; } .hero-v4__stat-number { font-family: var(--font-serif); font-weight: 300; font-size: 26px; color: #A8853C; letter-spacing: -0.035em; } .hero-v4__stat-number em { font-style: normal; } .hero-v4__stat-label { font-family: var(--font-sans); font-weight: 400; font-size: 13px; color: rgba(17, 24, 39, 0.62); } .cta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; transition: transform 340ms var(--ease-soft), box-shadow 340ms var(--ease-soft); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 4px 9px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.16); } @media (hover: hover) and (pointer: fine) { .cta-btn:hover { transition-duration: 300ms; transform: translateY(-4px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 12px 20px rgba(0, 0, 0, 0.22), 0 26px 46px rgba(0, 0, 0, 0.28); } } .cta-btn:active, .cta-btn.is-pressed { transition-duration: 90ms; transform: translateY(1px) scale(0.985); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.14); } .cta-btn__label { position: relative; z-index: 2; flex: 0 0 auto; padding: 14px 32px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.5px; white-space: nowrap; pointer-events: none; } .cta-btn__fill { position: absolute; inset: 0; border-radius: inherit; } .cta-btn__ring { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; } @property --sticky-rim-angle { syntax: ''; initial-value: 0deg; inherits: false; } @supports (-webkit-touch-callout: none) { .sticky-cta .cta-btn__ring { display: none; } .sticky-cta .cta-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: conic-gradient(from var(--sticky-rim-angle, 0deg), #2b3242 0%, #C4A265 8%, #ffffff 12%, #D4B97A 16%, #374053 24%, #8a7c5e 33%, #333c50 41%, #D4B97A 53%, #374053 60%, #9a8a68 68%, #C4A265 74%, #ffffff 78%, #C4A265 82%, #2b3242 91%, #2b3242 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; animation: stickyRimSpin 7s linear infinite; } @keyframes stickyRimSpin { to { --sticky-rim-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .sticky-cta .cta-btn::after { animation: none; } } .sticky-cta .cta-btn { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 3px 6px rgba(0, 0, 0, 0.12); } } .cta-btn--metal .cta-btn__fill { background: linear-gradient(180deg, #E0C593 0%, #C4A265 52%, #A8863E 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 2px rgba(60, 40, 10, 0.22), inset 0 -10px 18px rgba(60, 40, 10, 0.07); } .cta-btn--metal .cta-btn__label { color: var(--navy); } .cta-btn--sm .cta-btn__label { padding: 10px 24px; } .cta-btn--rim { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 4px 8px rgba(0, 0, 0, 0.13), 0 11px 22px rgba(0, 0, 0, 0.16); } .cta-btn--rim:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 12px 19px rgba(0, 0, 0, 0.21), 0 25px 44px rgba(0, 0, 0, 0.27); } .cta-btn__shader { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .cta-btn__shader canvas { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: block !important; border-radius: inherit; } .cta-btn__core { position: absolute; inset: 1.2px; border-radius: 999px; background: linear-gradient(180deg, #FFFDFA 0%, #F4EEE6 46%, #E9E0D4 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 2px rgba(92, 64, 51, 0.12), inset 0 -9px 16px rgba(92, 64, 51, 0.05); } .cta-btn--rim .cta-btn__label { color: var(--navy); } .cta-btn__ripple { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; animation: cta-btn-ripple 600ms ease-out forwards; } @keyframes cta-btn-ripple { from { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } to { transform: translate(-50%, -50%) scale(4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cta-btn { transition: none; } .cta-btn:hover { transform: none; } .cta-btn__ripple { display: none; } } .hero-v4__headline { font-family: 'ratiomodern', var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.05; color: var(--navy); letter-spacing: normal; margin-bottom: 12px; } .hero-br { display: inline; } @media (min-width: 1024px) { .hero-br { display: none; } } .hero-v4__subline { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.6; color: rgba(17, 24, 39, 0.72); margin-bottom: 28px; max-width: 400px; } .hero-v4__cta { display: inline-flex; margin-top: clamp(16px, 4.27vw, 19px); } @media (max-width: 767px) { .hero-v4__headline { font-size: clamp(36px, 9.6vw, 43px); } .hero-v4__subline { font-size: clamp(14px, 3.73vw, 16px); } } @media (max-width: 1023px) { .hero-v4__headline { margin-bottom: 0.42em; } .hero-v4__subline { line-height: 1.5; margin-bottom: 0; } } @media (min-width: 768px) { .hero-v4__headline { font-size: 44px; } .hero-v4__subline { font-size: 15px; } } .hero-v3d { display: none; } @media (min-width: 1024px) { .hero-v4 { display: none; } .hero-v3d { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; min-height: 100lvh; padding-bottom: calc(100lvh - 100svh); overflow: hidden; background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAQAA/AAD//gAQTGF2YzYyLjI4LjEwMgD/2wBDAAgYGBwYHCEhISEhISckJygoKCcnJycoKCgrKyszMzMrKysoKCsrMDAzMzc5NzQ0MzQ5OTw8PEhIRUVUVFdnZ3z/xABhAAEBAQEAAAAAAAAAAAAAAAAFBgIDAQEBAQAAAAAAAAAAAAAAAAAEAwAQAAEEAQUBAQAAAAAAAAAAAAEDAAIRMQTRQSFREqERAAMBAQEBAAAAAAAAAAAAAAEAAhEhAyL/wAARCAAQABwDASIAAhIAAxIA/9oADAMBAAIRAxEAPwBxNaSYoevqSFj2MOdVkE93vSqFQT+TjhmqcUWNUR9F3kcTNQCD165YylZ2b5mFbHIP6yLyxjqgDGh4xojX/9k=) 40% center / cover no-repeat var(--navy); } .hero-v3d__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; opacity: 1; } .hero-v3d__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.74) 10%, rgba(0, 0, 0, 0.60) 20%, rgba(0, 0, 0, 0.42) 30%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0.04) 55%, rgba(0, 0, 0, 0) 62%); } .hero-v3d__content { position: relative; z-index: 2; padding: 0 48px max(12vh, 80px); max-width: var(--max-width); margin: 0 auto; width: 100%; } .hero-v3d__row { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } .hero-v3d__side { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } .hero-v4__headline { font-size: clamp(34px, 6vw - 24px, 58px); line-height: 1.08; margin-bottom: 14px; white-space: nowrap; } .hero-v4__subline { font-size: 15px; max-width: none; margin-bottom: 0; } .hero-v3d .hero-v4__headline { color: var(--white); } .hero-v3d .hero-v4__subline { color: rgba(255, 255, 255, 0.7); } .hero-v3d .hero-v4__stat-number { color: var(--gold); } .hero-v3d .hero-v4__stat-label { color: rgba(255, 255, 255, 0.72); } .hero-v3d .hero-v4__proof { margin-top: 0; } .hero-v3d .hero-v4__cta { margin-top: 0; } } @media (min-width: 1200px) { .hero-v4__subline { font-size: 16px; } .hero-v3d__content { padding-left: 24px; padding-right: 24px; } } .swipe-carousel { max-width: var(--max-width); margin: 0 auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; display: flex; gap: 16px; padding: 0 24px 56px; margin-bottom: -32px; scrollbar-width: none; } .swipe-carousel::-webkit-scrollbar { display: none; } .swipe-card { flex: 0 0 75%; scroll-snap-align: center; background: var(--cream-dark); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: block; border: 1px solid rgba(196, 162, 101, 0.1); position: relative; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(27, 40, 56, 0.08); transition: opacity 2200ms cubic-bezier(0.16, 1, 0.3, 1), transform 2200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms var(--ease-fluid); } .swipe-card:hover { box-shadow: 0 2px 3px rgba(17, 24, 39, 0.06), 0 14px 30px rgba(27, 40, 56, 0.11), 0 30px 60px rgba(27, 40, 56, 0.12); } @property --glint-angle { syntax: ''; inherits: false; initial-value: 0deg; } .swipe-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from -90deg, #C4A265 0%, #ffffff 2%, #D4B97A 6%, rgba(196, 162, 101, 0.35) 18%, rgba(138, 124, 94, 0.45) 30%, rgba(196, 162, 101, 0.30) 42%, #D4B97A 52%, rgba(154, 138, 104, 0.45) 62%, rgba(196, 162, 101, 0.35) 72%, #C4A265 80%, #ffffff 84%, #D4B97A 88%, #C4A265 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; } .swipe-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--glint-angle, 0deg), transparent, var(--gold-lt) 9%, rgba(255, 253, 248, 0.95) 11%, var(--gold-lt) 13%, transparent 22%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 500ms var(--ease-smooth); animation: glint-spin 11s linear infinite; animation-play-state: paused; } @media (hover: hover) { .swipe-card:hover::after { opacity: 1; animation-play-state: running; } } @keyframes glint-spin { to { --glint-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .swipe-card::after { animation: none; opacity: 0; } } .swipe-card__image { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--cream-dark); display: block; filter: grayscale(1); transition: filter 800ms cubic-bezier(0.16, 1, 0.3, 1); } .swipe-card:hover .swipe-card__image { filter: grayscale(0); } @media (max-width: 1023px) { .swipe-card:hover { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(27, 40, 56, 0.08); } .swipe-card:hover .swipe-card__image { filter: grayscale(1); } } @media (max-width: 767px) { .swipe-card__image, .swipe-card:hover .swipe-card__image { filter: none; } } .swipe-card__body { padding: 28px; } .swipe-card__label { font-family: var(--font-sans); font-weight: 600; font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; } .swipe-card__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--navy); margin-bottom: 8px; } .swipe-card__text { font-size: 13px; color: #585858; line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .swipe-card__footer { display: flex; justify-content: space-between; align-items: center; } .swipe-card__price { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 16px; color: var(--brown); } .swipe-card__link { font-family: var(--font-sans); font-weight: 500; font-size: 12px; color: var(--brown); } @media (min-width: 768px) { .swipe-carousel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px; margin-bottom: 0; overflow: visible; scroll-snap-type: none; } .swipe-card { flex: none; will-change: transform; backface-visibility: hidden; } .swipe-card__image { aspect-ratio: 4 / 3; } } @media (min-width: 1200px) { .swipe-carousel { grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0 24px; } } @media (max-width: 767px) { .swipe-card__text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .swipe-card { flex: 0 0 86%; } .swipe-card__image { aspect-ratio: 1 / 1; } } @media (min-width: 1200px) and (max-width: 1599px) { .container, .hero-v4__content { padding-left: 64px; padding-right: 64px; } .swipe-carousel { padding: 0 64px; } } @media (min-width: 1200px) { .nav__inner { max-width: none; padding-left: 48px; padding-right: 48px; } } @media (max-width: 767px) { .container, .hero-v4__content, .nav__inner, .swipe-carousel { padding-left: clamp(24px, 6.4vw, 32px); padding-right: clamp(24px, 6.4vw, 32px); } .hero-mark { left: clamp(24px, 6.4vw, 32px); } } @media (min-width: 1200px) { body:has(.hero-v4), body.mastered { --section-padding: 120px; } } .proof { display: flex; flex-direction: column; } .proof__picture { display: contents; } .proof__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--cream-dark); } .proof__content { display: flex; flex-direction: column; gap: 28px; max-width: 880px; } .proof__intro { display: contents; } .proof__label { margin-bottom: 4px; } .proof__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.28; letter-spacing: -0.035em; margin: 0; } .proof__quote .proof-word { padding: 0 0.3em; margin: 0 -0.3em; } .proof__quote-pri { color: var(--navy); } .proof__quote-sec { color: #8A6B3F; } .proof__body { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.7; color: var(--navy); max-width: 580px; margin: 0; } .proof__ledger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 28px; max-width: 620px; font-family: var(--font-sans); font-size: 12px; line-height: 1.6; } .proof__ledger-item { display: inline-flex; align-items: baseline; gap: 8px; } .proof__ledger-label { font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: #7A5C33; } .proof__ledger-value { color: #434852; } .proof__link { display: inline-block; font-family: var(--font-sans); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brown); padding-bottom: 2px; margin-top: 12px; align-self: flex-start; transition: color 300ms var(--ease-fluid); } .proof__link:hover { color: var(--navy); } .proof__link-arrow { display: inline-block; margin-left: 4px; color: var(--gold); transition: transform 300ms var(--ease-fluid); } @media (hover: hover) and (pointer: fine) { .proof__link:hover .proof__link-arrow { transform: translateX(6px); } } .proof-word { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(18px); transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); } .proof-word.revealed { opacity: 1; filter: blur(0); transform: translateY(0); } .proof-pill { opacity: 0; filter: blur(8px); transform: translateY(20px); transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); } .proof-pill.revealed { opacity: 1; filter: blur(0); transform: translateY(0); } .proof-reveal { opacity: 0; filter: blur(6px); transform: translateY(30px); transition: opacity 1600ms cubic-bezier(0.16, 1, 0.3, 1), filter 1600ms cubic-bezier(0.16, 1, 0.3, 1), transform 1600ms cubic-bezier(0.16, 1, 0.3, 1); } .proof-reveal.revealed { opacity: 1; filter: blur(0); transform: translateY(0); } @media (max-width: 1199px) { .proof-word, .proof-pill, .proof-reveal { transition: opacity 1100ms cubic-bezier(0.45, 0, 0.15, 1), filter 1100ms cubic-bezier(0.45, 0, 0.15, 1), transform 1100ms cubic-bezier(0.45, 0, 0.15, 1); } } @media (min-width: 768px) { .proof { flex-direction: row; align-items: flex-start; gap: 56px; } .proof__image { width: 38%; flex-shrink: 0; aspect-ratio: 4 / 5; position: sticky; top: 100px; } .proof__content { flex: 1; max-width: none; } .proof__quote { font-size: 33px; } .proof__quote-sec { display: block; } .proof__body { font-size: 16px; } } @media (min-width: 1200px) { .proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; } .proof__image { grid-area: 1 / 1; width: 100%; height: 100%; aspect-ratio: 16 / 7.5; object-position: 50% 0; border-radius: 12px; position: static; } .proof::after { content: ''; grid-area: 1 / 1; position: relative; z-index: 1; border-radius: 12px; background: linear-gradient(to top left, rgba(14, 13, 12, 0.58) 0%, rgba(14, 13, 12, 0.34) 26%, rgba(14, 13, 12, 0.1) 46%, rgba(14, 13, 12, 0) 62%); pointer-events: none; } .proof__content { grid-area: 1 / 1; position: relative; z-index: 2; align-self: end; justify-self: end; width: min(52%, 620px); max-width: none; gap: 22px; margin: 0 clamp(40px, 3.6vw, 64px) clamp(36px, 3.2vw, 56px) 0; text-align: left; } .proof__label { text-align: left; color: rgba(255, 255, 255, 0.66); } .proof__quote { font-size: clamp(30px, 2.3vw, 36px); line-height: 1.22; } .proof__quote-pri { color: #FFFFFF; } .proof__quote-sec { color: #E8CFA6; } .proof__body { color: rgba(255, 255, 255, 0.86); max-width: 100%; } .proof__ledger { max-width: none; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .proof__ledger-label { color: #E8CFA6; } .proof__ledger-value { color: rgba(255, 255, 255, 0.92); } .proof__link { color: rgba(255, 255, 255, 0.86); } .proof__link:hover { color: #FFFFFF; } } @media (max-width: 767px) { .proof { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .proof__content { display: contents; } .proof__label { grid-row: 1; } .proof__image { grid-row: 2; grid-column: 1; } .proof__intro { grid-row: 2; grid-column: 1; } .proof__ledger { grid-row: 3; } .proof__link { grid-row: 4; } .proof__label-dash { display: none; } .proof__label { margin-bottom: 0; font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--navy); text-align: center; text-transform: none; letter-spacing: normal; } .proof__image { aspect-ratio: 3 / 5; } .proof__image.proof-reveal, .proof__image.proof-reveal.revealed { transform: none; } .proof__intro { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-width: 0; position: relative; z-index: 1; padding: 0 18px 26px; border-radius: 12px; background: linear-gradient(to bottom, rgba(14, 13, 12, 0) 58%, rgba(14, 13, 12, 0.22) 66%, rgba(14, 13, 12, 0.55) 74%, rgba(14, 13, 12, 0.8) 86%, rgba(14, 13, 12, 0.88) 100%); pointer-events: none; } .proof__intro .proof__quote, .proof__intro .proof__body { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } .proof__intro .proof__quote-pri { color: #FFFFFF; } .proof__intro .proof__quote-sec { color: #E8CFA6; } .proof__intro .proof__body { color: rgba(255, 255, 255, 0.88); max-width: none; } .proof__quote { font-size: 20px; line-height: 1.32; } .proof__body { font-size: 14px; } .proof__link { font-size: 11px; min-height: 44px; display: inline-flex; align-items: center; margin-top: -13px; margin-bottom: -13px; } } [data-load] { opacity: 0; transform: translateY(50px); transition: opacity 1200ms var(--ease-fluid), transform 1200ms var(--ease-fluid); } [data-load].loaded { opacity: 1; transform: translateY(0); } .v2-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--gradient-navy); } .v2-hero__bg { position: absolute; inset: 0; z-index: 0; } .v2-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; } .v2-hero__bg-placeholder { width: 100%; height: 100%; background: var(--cream-dark); opacity: 0.15; } .v2-hero__content { position: relative; z-index: 2; text-align: center; padding: 140px 24px 48px; max-width: 800px; margin: 0 auto; } .v2-hero__label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } .v2-hero__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 300; font-size: 64px; line-height: 1.05; color: var(--white); margin-bottom: 20px; } .v2-hero__title em { font-style: italic; color: var(--gold); } .v2-hero__subtitle { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 500px; margin: 0 auto 32px; } .v2-hero__cta { display: inline-flex; } .v2-carousel { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding: 40px 0 80px; overflow: hidden; cursor: grab; } .v2-carousel:active { cursor: grabbing; } .v2-carousel__track { display: flex; gap: 28px; padding: 0 calc(50vw - 160px); will-change: transform; transition: none; } .v2-card { flex: 0 0 300px; height: 420px; border-radius: var(--radius-card); overflow: hidden; position: relative; cursor: pointer; transition: transform 600ms var(--ease-fluid), opacity 400ms var(--ease-fluid), box-shadow 400ms var(--ease-fluid); transform-style: preserve-3d; will-change: transform, opacity; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .v2-card:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); } .v2-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v2-card__image-placeholder { position: absolute; inset: 0; background: var(--cream-dark); } .v2-card__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(to top, rgba(27, 40, 56, 0.85) 0%, transparent 100%); z-index: 2; } .v2-card__label { font-family: var(--font-sans); font-weight: 600; font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; display: inline-block; background: rgba(196, 162, 101, 0.15); padding: 3px 10px; border-radius: 20px; } .v2-card__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 400; font-size: 24px; color: var(--white); margin-bottom: 4px; } .v2-card__price { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 20px; color: var(--gold); } .v2-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms var(--ease-fluid), visibility 400ms; } .v2-modal.open { opacity: 1; visibility: visible; pointer-events: all; } .v2-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .v2-modal__card { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; width: 90%; max-width: 820px; max-height: 85vh; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4); transform: scale(0.9) translateY(30px); transition: transform 500ms var(--ease-fluid); } .v2-modal.open .v2-modal__card { transform: scale(1) translateY(0); } .v2-modal__image { background-color: var(--cream-dark); background-size: cover; background-position: center; min-height: 400px; } .v2-modal__body { background: var(--navy); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .v2-modal__label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; } .v2-modal__title { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 400; font-size: 36px; color: var(--white); line-height: 1.15; } .v2-modal__desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); } .v2-modal__price { font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 600; font-size: 24px; color: var(--gold); } .v2-modal__actions { display: flex; gap: 12px; margin-top: 8px; } .v2-modal__close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: var(--white); font-size: 18px; cursor: pointer; transition: background var(--transition); } .v2-modal__close:hover { background: rgba(255, 255, 255, 0.3); } .v2-modal__prev, .v2-modal__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; color: var(--white); font-size: 20px; cursor: pointer; transition: background var(--transition), transform var(--transition); } .v2-modal__prev { left: -60px; } .v2-modal__next { right: -60px; } .v2-modal__prev:hover, .v2-modal__next:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-50%) scale(1.1); } @media (max-width: 1199px) { .v2-hero__title { font-size: 52px; } .v2-card { flex: 0 0 260px; height: 380px; } } @media (max-width: 767px) { .v2-hero__title { font-size: 38px; } .v2-hero__content { padding: 120px 20px 32px; } .v2-card { flex: 0 0 220px; height: 320px; } .v2-carousel__track { gap: 16px; padding: 0 calc(50vw - 110px); } .v2-modal__card { grid-template-columns: 1fr; max-width: 95%; } .v2-modal__image { min-height: 200px; max-height: 250px; } .v2-modal__body { padding: 28px 24px; } .v2-modal__title { font-size: 28px; } .v2-modal__prev { left: 8px; } .v2-modal__next { right: 8px; } .v2-modal__actions { flex-direction: column; } } @media (max-width: 400px) { .v2-hero__title { font-size: 32px; } .v2-card { flex: 0 0 200px; height: 280px; } } .chapter-split { padding: var(--section-padding) 0; } .chapter-split .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; } .chapter-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .chapter-split__grid--reverse { grid-template-areas: "media text"; } .chapter-split__grid--reverse .chapter-split__media { grid-area: media; } .chapter-split__grid--reverse .chapter-split__text { grid-area: text; } .chapter-split__grid--photo-wide { grid-template-columns: 1fr 1.4fr; } .chapter-split__grid--photo-wide.chapter-split__grid--reverse { grid-template-columns: 1.4fr 1fr; } .chapter-split__grid--text-wide { grid-template-columns: 1.4fr 1fr; } .chapter-split__grid--text-wide.chapter-split__grid--reverse { grid-template-columns: 1fr 1.4fr; } .chapter-split__media--landscape { aspect-ratio: 16 / 9; } .chapter-split__signature { margin-top: 40px; display: flex; align-items: center; gap: 20px; } .chapter-split__signature::before { content: ""; width: 48px; height: 1px; background: var(--gold); flex-shrink: 0; } .chapter-split__signature-text { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--gold); letter-spacing: -0.035em; line-height: 1; } .chapter-split__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-card); overflow: hidden; background: var(--cream-dark); } .chapter-split__header { margin-bottom: 56px; } .chapter-split__grid--bio { align-items: stretch; } .chapter-split__media--stack { aspect-ratio: auto; background: transparent; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; border-radius: 0; overflow: visible; } .chapter-split__media--stack::after { display: none; } .chapter-split__media-cell { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; background: var(--cream-dark); } .chapter-split__media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .chapter-split__media-cell::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px rgba(196, 162, 101, 0.25); pointer-events: none; } .chapter-split__media img, .chapter-split__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .chapter-split__media::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px rgba(196, 162, 101, 0.25); pointer-events: none; } .chapter-split__text .included-list__item { margin-bottom: 18px; } .chapter-split__text .included-list__item:last-child { margin-bottom: 0; } @media (max-width: 1199px) { .chapter-split__grid { gap: 56px; } } @media (max-width: 767px) { .chapter-split { padding: var(--section-padding-mobile) 0; } .chapter-split .container { padding: 0 20px; } .chapter-split__header { margin-bottom: 36px; } .chapter-split__grid, .chapter-split__grid--reverse { display: flex; flex-direction: column; gap: 32px; } .chapter-split__media { order: -1; aspect-ratio: 1 / 1; min-height: 320px; width: 100%; } } .timing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 56px auto 0; max-width: 1100px; opacity: 1 !important; transform: none !important; position: relative; padding-top: 32px; } .timing-grid::before { content: ""; position: absolute; top: 0; left: 50%; width: 60%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); } .timing-grid.revealed::before { transform: translateX(-50%) scaleX(1); } .timing-grid__item { text-align: center; padding: 8px 32px; position: relative; } .timing-grid__item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--border-color); transform-origin: top; transform: scaleY(0); transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms; } .timing-grid.revealed .timing-grid__item:not(:first-child)::before { transform: scaleY(1); } .timing-grid__num { font-family: var(--font-serif); font-size: 88px; font-weight: 300; line-height: 1; margin-bottom: 20px; font-variant-numeric: lining-nums; letter-spacing: -0.035em; color: var(--gold); background: linear-gradient(120deg, var(--gold) 0%, var(--gold) 38%, var(--gold-lt) 50%, var(--gold) 62%, var(--gold) 100%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 1400ms cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { .timing-grid__item:hover .timing-grid__num { background-position: 0 0; } } .timing-grid__label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 10px; } .timing-grid__duration { font-family: var(--font-serif); letter-spacing: -0.035em; font-size: 24px; font-style: italic; font-weight: 400; color: var(--navy); line-height: 1.4; } .timing-grid__note { margin: 56px auto 0; max-width: 720px; text-align: center; font-style: italic; color: var(--text-light); font-size: 15px; line-height: 1.7; } .timing-grid__num { opacity: 0; filter: blur(14px); transform: translateY(24px) scale(0.82); transform-origin: center bottom; transition: opacity 1500ms cubic-bezier(0.16, 1, 0.3, 1), filter 1500ms cubic-bezier(0.16, 1, 0.3, 1), transform 1500ms cubic-bezier(0.16, 1, 0.3, 1), background-position 1400ms cubic-bezier(0.16, 1, 0.3, 1); } .timing-grid__label, .timing-grid__duration { opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); } .timing-grid.revealed .timing-grid__num { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } .timing-grid.revealed .timing-grid__label, .timing-grid.revealed .timing-grid__duration { opacity: 1; filter: blur(0); transform: translateY(0); } .timing-grid.revealed .timing-grid__item:nth-child(1) .timing-grid__num { transition-delay: 400ms; } .timing-grid.revealed .timing-grid__item:nth-child(1) .timing-grid__label { transition-delay: 700ms; } .timing-grid.revealed .timing-grid__item:nth-child(1) .timing-grid__duration { transition-delay: 920ms; } .timing-grid.revealed .timing-grid__item:nth-child(2) .timing-grid__num { transition-delay: 800ms; } .timing-grid.revealed .timing-grid__item:nth-child(2) .timing-grid__label { transition-delay: 1100ms; } .timing-grid.revealed .timing-grid__item:nth-child(2) .timing-grid__duration { transition-delay: 1320ms; } .timing-grid.revealed .timing-grid__item:nth-child(3) .timing-grid__num { transition-delay: 1200ms; } .timing-grid.revealed .timing-grid__item:nth-child(3) .timing-grid__label { transition-delay: 1500ms; } .timing-grid.revealed .timing-grid__item:nth-child(3) .timing-grid__duration { transition-delay: 1720ms; } @media (prefers-reduced-motion: reduce) { .timing-grid__num, .timing-grid__label, .timing-grid__duration { opacity: 1; filter: none; transform: none; transition: none; } .timing-grid__item:not(:first-child)::before { transform: scaleY(1); transition: none; } } @media (max-width: 1199px) { .timing-grid { max-width: 880px; } .timing-grid__num { font-size: 72px; } .timing-grid__duration { font-size: 21px; } .timing-grid__item { padding: 4px 20px; } .timing-grid__num { transition: opacity 1000ms cubic-bezier(0.45, 0, 0.15, 1), filter 1000ms cubic-bezier(0.45, 0, 0.15, 1), transform 1000ms cubic-bezier(0.45, 0, 0.15, 1), background-position 1400ms cubic-bezier(0.45, 0, 0.15, 1); } .timing-grid__label, .timing-grid__duration { transition: opacity 1000ms cubic-bezier(0.45, 0, 0.15, 1), filter 1000ms cubic-bezier(0.45, 0, 0.15, 1), transform 1000ms cubic-bezier(0.45, 0, 0.15, 1); } } @media (max-width: 767px) { .timing-grid { grid-template-columns: 1fr; gap: 0; max-width: 420px; } .timing-grid__item { padding: 36px 0; border-top: 1px solid var(--border-color); } .timing-grid__item:first-child { border-top: none; padding-top: 8px; } .timing-grid__item:not(:first-child)::before { display: none; } .timing-grid__num { font-size: 64px; margin-bottom: 14px; } .timing-grid__duration { font-size: 20px; } .timing-grid__note { margin-top: 40px; padding: 0 20px; } } .text-section .timeline__lead { max-width: 620px; margin: 0 auto; font-family: var(--font-serif); font-size: 21px; font-style: italic; font-weight: 400; line-height: 1.6; letter-spacing: -0.02em; color: var(--navy); text-align: center; } .timeline { --tl-fig: 64px; --tl-rail: calc(var(--tl-fig) + 34px); list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 64px auto 0; padding: 0; max-width: 1100px; opacity: 1 !important; transform: none !important; filter: none !important; } .timeline__stop { position: relative; text-align: center; padding: 0 22px; } .timeline__stop::before { content: ""; position: absolute; left: 50%; top: var(--tl-rail); width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); background: var(--cream); opacity: 0; transform: translate(-50%, -50%) scale(0.94); transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 380ms var(--ease-soft); z-index: 1; } .timeline__stop--end::before { border-radius: 0; background: var(--gold); width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg) scale(0.94); } .timeline__stop:not(:last-child)::after { content: ""; position: absolute; left: 50%; right: -50%; top: var(--tl-rail); height: 1px; background: var(--border-color); transform: scaleX(0); transform-origin: left center; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } .timeline__time { font-family: var(--font-serif); font-size: var(--tl-fig); font-weight: 300; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: lining-nums; margin: 0 0 68px; color: var(--gold); background: linear-gradient(120deg, var(--gold) 0%, var(--gold) 38%, var(--gold-lt) 50%, var(--gold) 62%, var(--gold) 100%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (hover: hover) { .timeline__stop:hover .timeline__time { background-position: 0 0; } } .timeline__unit { font-family: var(--font-sans); font-size: 0.34em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; vertical-align: 0.62em; margin: 0 0.14em; } .timeline__label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin: 0 0 10px; } .timeline__brk { display: none; } .timeline__brk-wide { display: inline; } .timeline__desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--text-light); margin: 0; } .timeline__aside { max-width: 720px; margin: 64px auto 0; padding: 28px 34px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.42); text-align: center; } .timeline__aside-label { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .plusone.revealed { filter: none; } .plusone { --pl-card-h: 78px; --pl-peek: 10px; --pl-fan: 8px; --pl-spring: cubic-bezier(0.34, 1.32, 0.58, 1); } .plusone__stack { list-style: none; margin: 18px auto 0; padding: 0; max-width: 400px; } .plusone__card { position: relative; box-sizing: border-box; min-height: var(--pl-card-h); padding: 14px 20px; text-align: left; background: var(--white); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 16px rgba(17, 24, 39, 0.05); transition: margin-top 620ms var(--pl-spring), transform 620ms var(--pl-spring), box-shadow 400ms var(--ease-soft); } .plusone__card + .plusone__card { margin-top: var(--pl-fan); } .plusone__card:nth-child(1) { z-index: 3; } .plusone__card:nth-child(2) { z-index: 2; } .plusone__card:nth-child(3) { z-index: 1; } .plusone__title { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--navy); margin: 0 0 4px; } .plusone__sub { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--text-light); margin: 0; } .plusone__foot { margin: 16px 0 0; } @media (hover: hover) and (pointer: fine) { .plusone__card + .plusone__card { margin-top: calc((var(--pl-card-h) - var(--pl-peek)) * -1); } .plusone__card:nth-child(2) { transform: scaleX(0.945); } .plusone__card:nth-child(3) { transform: scaleX(0.89); } .plusone:hover .plusone__card + .plusone__card, .plusone:focus-within .plusone__card + .plusone__card { margin-top: var(--pl-fan); } .plusone:hover .plusone__card, .plusone:focus-within .plusone__card { transform: none; } .plusone:hover .plusone__card:nth-child(1) { box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 14px 30px rgba(17, 24, 39, 0.07); } } .plusone.js-fan .plusone__card + .plusone__card { margin-top: calc((var(--pl-card-h) - var(--pl-peek)) * -1); } .plusone.js-fan .plusone__card:nth-child(2) { transform: scaleX(0.945); } .plusone.js-fan .plusone__card:nth-child(3) { transform: scaleX(0.89); transition-delay: 90ms; } .plusone.js-fan.is-fanned .plusone__card + .plusone__card { margin-top: var(--pl-fan); } .plusone.js-fan.is-fanned .plusone__card { transform: none; } @media (prefers-reduced-motion: reduce) { .plusone__card, .plusone__card + .plusone__card { margin-top: var(--pl-fan); } .plusone__card:nth-child(2), .plusone__card:nth-child(3) { transform: none; } } .timeline__time, .timeline__label, .timeline__desc { opacity: 0; filter: blur(8px); transform: translateY(16px); transition: opacity 1000ms cubic-bezier(0.45, 0, 0.15, 1), filter 1000ms cubic-bezier(0.45, 0, 0.15, 1), transform 1000ms cubic-bezier(0.45, 0, 0.15, 1); } .timeline__time { transition: opacity 1000ms cubic-bezier(0.45, 0, 0.15, 1), filter 1000ms cubic-bezier(0.45, 0, 0.15, 1), transform 1000ms cubic-bezier(0.45, 0, 0.15, 1), background-position 1400ms var(--ease-fluid); } .timeline.revealed .timeline__time, .timeline.revealed .timeline__label, .timeline.revealed .timeline__desc { opacity: 1; filter: none; transform: translateY(0); } .timeline.revealed .timeline__stop::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .timeline.revealed .timeline__stop--end::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); } .timeline.revealed .timeline__stop:not(:last-child)::after { transform: scaleX(1); } .timeline.revealed .timeline__stop:nth-child(1)::before { transition-delay: 120ms; } .timeline.revealed .timeline__stop:nth-child(1)::after { transition-delay: 260ms; } .timeline.revealed .timeline__stop:nth-child(1) .timeline__time { transition-delay: 200ms; } .timeline.revealed .timeline__stop:nth-child(1) .timeline__label { transition-delay: 340ms; } .timeline.revealed .timeline__stop:nth-child(1) .timeline__desc { transition-delay: 440ms; } .timeline.revealed .timeline__stop:nth-child(2)::before { transition-delay: 460ms; } .timeline.revealed .timeline__stop:nth-child(2)::after { transition-delay: 600ms; } .timeline.revealed .timeline__stop:nth-child(2) .timeline__time { transition-delay: 540ms; } .timeline.revealed .timeline__stop:nth-child(2) .timeline__label { transition-delay: 680ms; } .timeline.revealed .timeline__stop:nth-child(2) .timeline__desc { transition-delay: 780ms; } .timeline.revealed .timeline__stop:nth-child(3)::before { transition-delay: 800ms; } .timeline.revealed .timeline__stop:nth-child(3)::after { transition-delay: 940ms; } .timeline.revealed .timeline__stop:nth-child(3) .timeline__time { transition-delay: 880ms; } .timeline.revealed .timeline__stop:nth-child(3) .timeline__label { transition-delay: 1020ms; } .timeline.revealed .timeline__stop:nth-child(3) .timeline__desc { transition-delay: 1120ms; } .timeline.revealed .timeline__stop:nth-child(4)::before { transition-delay: 1140ms; } .timeline.revealed .timeline__stop:nth-child(4) .timeline__time { transition-delay: 1220ms; } .timeline.revealed .timeline__stop:nth-child(4) .timeline__label { transition-delay: 1360ms; } .timeline.revealed .timeline__stop:nth-child(4) .timeline__desc { transition-delay: 1460ms; } @media (max-width: 1199px) { .timeline { --tl-fig: 56px; max-width: 900px; } .timeline__stop { padding: 0 14px; } .timeline__desc { font-size: 13px; } } @media (max-width: 1023px) { .timeline { --tl-fig: 46px; --tl-rail: 24px; grid-template-columns: 1fr; max-width: 460px; padding-left: 54px; text-align: left; } .timeline__stop { text-align: left; padding: 0 0 34px; } .timeline__stop:last-child { padding-bottom: 0; } .timeline__stop::before { left: -36px; top: var(--tl-rail); } .timeline__stop:not(:last-child)::after { left: -36px; right: auto; top: var(--tl-rail); bottom: calc(var(--tl-rail) * -1); width: 1px; height: auto; transform: scaleY(0); transform-origin: top center; } .timeline.revealed .timeline__stop:not(:last-child)::after { transform: scaleY(1); } .timeline__time { margin-bottom: 10px; } .timeline__desc { max-width: 320px; } .timeline__brk { display: inline; } .timeline__brk-wide { display: none; } .text-section .timeline__lead { font-size: 19px; } .timeline__aside { margin-top: 48px; padding: 24px 26px; } } @media (max-width: 767px) { .timeline { max-width: 100%; padding-left: 48px; } .timeline__stop::before, .timeline__stop:not(:last-child)::after { left: -32px; } } @media (prefers-reduced-motion: reduce) { .timeline__time, .timeline__label, .timeline__desc { opacity: 1; filter: none; transform: none; transition: none; } .timeline__stop::before { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: none; } .timeline__stop--end::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); } .timeline__stop:not(:last-child)::after { transform: none; transition: none; } } .faq__header { margin-bottom: 40px; } .faq__title-muted { color: #8A6B3F; } .faq__list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .faq__group { background: rgba(232, 224, 216, 0.5); border-radius: 16px; overflow: hidden; transition: background 400ms var(--ease-fluid); } .faq__group:hover { background: rgba(232, 224, 216, 0.8); } .faq__group.open { background: rgba(232, 224, 216, 0.65); } .faq__group-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; text-align: left; font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--navy); } .faq__group.open > .faq__group-head .faq__icon { transform: rotate(45deg); } .faq__group-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 320ms var(--ease-soft), visibility 0s 320ms; } .faq__group.open > .faq__group-body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; } .faq__group-inner { overflow: hidden; min-height: 0; } .faq__group .faq__question .faq__icon { width: 13px; height: 13px; } .faq__item { border-top: 1px solid rgba(17, 24, 39, 0.07); margin: 0 28px; } @media (max-width: 1199px) { body:has(.hero-v4) .faq__group { filter: none; transition: opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), background 400ms var(--ease-fluid); } } .faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 0; text-align: left; font-family: var(--font-serif); letter-spacing: -0.035em; font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--navy); } .faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: transform 220ms var(--ease-soft); } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--gold); } .faq__icon::before { left: 0; top: 50%; width: 100%; height: 1px; margin-top: -0.5px; } .faq__icon::after { top: 0; left: 50%; height: 100%; width: 1px; margin-left: -0.5px; } .faq__item.open .faq__icon { transform: rotate(45deg); } .faq__answer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 320ms var(--ease-soft), visibility 0s 320ms; } .faq__item.open .faq__answer { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; } .faq__answer-inner { overflow: hidden; } .faq__answer-inner p { padding: 0 0 20px; max-width: 660px; font-size: 14px; line-height: 1.7; color: var(--text-light); opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-fluid) 120ms, transform 500ms var(--ease-fluid) 120ms; } .faq__item.open .faq__answer-inner p { opacity: 1; transform: translateY(0); } @media (max-width: 767px) { .faq__question { font-size: 15px; padding: 14px 0; gap: 16px; } .faq__answer-inner p { padding: 0 0 18px; } .faq__group-head { font-size: 18px; padding: 20px 22px; gap: 16px; } .faq__item { margin: 0 22px; } } @supports (-webkit-touch-callout: none) { .bottom-blur { display: none; } } .bottom-blur { position: fixed; left: 0; right: 0; bottom: -10rem; height: calc(25vh + 10rem); z-index: 800; pointer-events: none; opacity: 1; transition: opacity 500ms ease, visibility 500ms; } .bottom-blur--hidden { opacity: 0; visibility: hidden; } body:has(.nav__mobile.open) .bottom-blur { opacity: 0; visibility: hidden; } .bottom-blur__layer { position: absolute; inset: 0; } .bottom-blur__layer:nth-child(1) { -webkit-backdrop-filter: blur(0.0390625px); backdrop-filter: blur(0.0390625px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.125vh, #000 6.25vh, transparent 9.375vh); mask-image: linear-gradient(to bottom, transparent 0, #000 3.125vh, #000 6.25vh, transparent 9.375vh); } .bottom-blur__layer:nth-child(2) { -webkit-backdrop-filter: blur(0.078125px); backdrop-filter: blur(0.078125px); -webkit-mask-image: linear-gradient(to bottom, transparent 3.125vh, #000 6.25vh, #000 9.375vh, transparent 12.5vh); mask-image: linear-gradient(to bottom, transparent 3.125vh, #000 6.25vh, #000 9.375vh, transparent 12.5vh); } .bottom-blur__layer:nth-child(3) { -webkit-backdrop-filter: blur(0.15625px); backdrop-filter: blur(0.15625px); -webkit-mask-image: linear-gradient(to bottom, transparent 6.25vh, #000 9.375vh, #000 12.5vh, transparent 15.625vh); mask-image: linear-gradient(to bottom, transparent 6.25vh, #000 9.375vh, #000 12.5vh, transparent 15.625vh); } .bottom-blur__layer:nth-child(4) { -webkit-backdrop-filter: blur(0.3125px); backdrop-filter: blur(0.3125px); -webkit-mask-image: linear-gradient(to bottom, transparent 9.375vh, #000 12.5vh, #000 15.625vh, transparent 18.75vh); mask-image: linear-gradient(to bottom, transparent 9.375vh, #000 12.5vh, #000 15.625vh, transparent 18.75vh); } .bottom-blur__layer:nth-child(5) { -webkit-backdrop-filter: blur(0.625px); backdrop-filter: blur(0.625px); -webkit-mask-image: linear-gradient(to bottom, transparent 12.5vh, #000 15.625vh, #000 18.75vh, transparent 21.875vh); mask-image: linear-gradient(to bottom, transparent 12.5vh, #000 15.625vh, #000 18.75vh, transparent 21.875vh); } .bottom-blur__layer:nth-child(6) { -webkit-backdrop-filter: blur(1.25px); backdrop-filter: blur(1.25px); -webkit-mask-image: linear-gradient(to bottom, transparent 15.625vh, #000 18.75vh, #000 21.875vh, transparent 25vh); mask-image: linear-gradient(to bottom, transparent 15.625vh, #000 18.75vh, #000 21.875vh, transparent 25vh); } .bottom-blur__layer:nth-child(7) { -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 18.75vh, #000 21.875vh, #000 100%); mask-image: linear-gradient(to bottom, transparent 18.75vh, #000 21.875vh, #000 100%); } .bottom-blur__layer:nth-child(8) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, transparent 21.875vh, #000 25vh, #000 100%); mask-image: linear-gradient(to bottom, transparent 21.875vh, #000 25vh, #000 100%); } @media (max-width: 767px) { .bottom-blur__layer:nth-child(-n + 5) { display: none; } .bottom-blur__layer:nth-child(6) { -webkit-mask-image: linear-gradient(to bottom, transparent 15.625vh, #000 18.75vh, #000 21.875vh, transparent calc(25vh + 1.5rem)); mask-image: linear-gradient(to bottom, transparent 15.625vh, #000 18.75vh, #000 21.875vh, transparent calc(25vh + 1.5rem)); } .bottom-blur__layer:nth-child(8) { -webkit-mask-image: linear-gradient(to bottom, transparent 21.875vh, #000 calc(25vh + 3rem), #000 100%); mask-image: linear-gradient(to bottom, transparent 21.875vh, #000 calc(25vh + 3rem), #000 100%); } } body.mastered .cgal { display: none; } @media (max-width: 1023px) { .gallery-grid__item--ring-only { display: none; } } @media (min-width: 1024px) { body.mastered .gallery-grid--desktop-off { display: none; } body.mastered .cgal { display: block; position: relative; width: 100%; height: min(72vh, calc(100vh - 220px)); min-height: 520px; cursor: grab; touch-action: pan-y; } body.mastered .section:has(.cgal) { padding-bottom: 24px; } body.mastered .cgal:active { cursor: grabbing; } body.mastered .cgal canvas { display: block; position: absolute; top: 0; left: 0; pointer-events: none; } } body.mastered .cgal-pop { position: fixed; z-index: 3000; cursor: pointer; transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } body.mastered .cgal-pop[hidden] { display: none; } body.mastered .cgal-pop img, body.mastered .cgal-pop video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 1px 1px rgba(27, 40, 56, 0.10), 0 8px 18px rgba(27, 40, 56, 0.12), 0 32px 64px rgba(27, 40, 56, 0.22); } .dif { --dif-col: 32%; --dif-gap: 48px; border-top: 1px solid var(--border-color); } .dif__row { display: grid; grid-template-columns: var(--dif-col) 1fr; gap: var(--dif-gap); align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--border-color); position: relative; } .dif__t { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.12; letter-spacing: -0.018em; color: var(--navy); text-align: right; margin: 0; } .dif__s { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: var(--text-light); max-width: 56ch; margin: 0; } .dif__row::before { content: ""; position: absolute; top: 32px; bottom: 32px; left: var(--dif-col); transform: translateX(calc(var(--dif-gap) / 2)); width: 1px; background: var(--border-color); } .dif__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--gold); transition: width 1400ms var(--ease-fluid); } .dif__row.revealed::after { width: 100%; } @media (min-width: 1200px) { .dif.reveal-stagger > .dif__row:nth-child(2)::after { transition-delay: 200ms; } .dif.reveal-stagger > .dif__row:nth-child(3)::after { transition-delay: 400ms; } } @media (max-width: 900px) { .dif__row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } .dif__t { font-size: clamp(24px, 6.4vw, 32px); text-align: left; } .dif__s { font-size: 14px; max-width: none; } .dif__row::before { display: none; } } .dif-claim { margin: 64px auto -96px; max-width: 820px; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(21px, 2vw, 30px); line-height: 1.4; letter-spacing: -0.01em; color: var(--navy); } .dif-claim__line { display: block; } .dif-claim__line + .dif-claim__line { margin-top: 0.28em; } .dif-claim em { font-style: italic; color: var(--gold); } @media (max-width: 900px) { .dif-claim { margin-top: 44px; margin-bottom: -40px; text-align: left; font-size: 20px; line-height: 1.45; } } @media (prefers-reduced-motion: reduce) { .dif__row::after { transition: none; } } .opn-line { font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; font-size: clamp(26px, 7vw, 60px); line-height: 1.06; letter-spacing: -0.005em; color: var(--navy); text-align: center; margin: 0 auto; padding: 0.12em 0.14em; } .opn-line em { font-style: italic; color: var(--gold); } .opn-lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(17px, 1.32vw, 20px); line-height: 1.6; letter-spacing: -0.012em; color: var(--navy); text-align: center; max-width: 74ch; margin: 26px auto 0; } .opn-lead::after { content: ""; display: block; width: 0; height: 1px; margin: 32px auto 0; background: var(--gold); transition: width 1400ms var(--ease-fluid); } .opn-lead.revealed::after { width: 108px; } .stmt-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1240px; margin: 56px auto 0; border-top: 1px solid var(--border-color); } .stmt-fact { padding: 28px 22px 0; text-align: center; position: relative; } .stmt-fact + .stmt-fact::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 4px; width: 1px; background: var(--border-color); } .stmt-fact__k { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brown); margin: 0 0 10px; } .stmt-fact__v { font-family: var(--font-serif); font-weight: 400; font-size: clamp(17px, 1.25vw, 18px); line-height: 1.5; letter-spacing: -0.01em; color: var(--navy); margin: 0; } .opn-claim { max-width: 820px; margin: 56px auto -96px; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px, 1.62vw, 25px); line-height: 1.42; letter-spacing: -0.01em; color: var(--navy); } .opn-claim__line { display: block; } .opn-claim__line + .opn-claim__line { margin-top: 0.28em; } .opn-claim em { font-style: italic; color: var(--gold); } @media (max-width: 899px) { .opn-lead { font-size: 17px; line-height: 1.55; text-align: left; max-width: none; margin-top: 22px; } .opn-lead::after { margin-left: 0; margin-top: 26px; } .opn-claim { text-align: left; } } @media (max-width: 1199px) { .stmt-facts { grid-template-columns: 1fr; margin-top: 40px; border-top: 0; } .stmt-fact { padding: 22px 0; text-align: left; border-top: 1px solid var(--border-color); } .stmt-fact + .stmt-fact::before { display: none; } .stmt-fact__v { font-size: 17px; } .opn-claim { margin-top: 44px; margin-bottom: -40px; font-size: 20px; line-height: 1.45; } } @media (min-width: 768px) and (max-width: 1199px) { .opn-claim { margin-bottom: -88px; } } @media (prefers-reduced-motion: reduce) { .opn-lead::after { transition: none; width: 108px; } } .why-title { font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; letter-spacing: normal; font-size: min(52px, 4.4vw); line-height: 1.12; color: var(--navy); text-align: center; margin: 0 auto 34px; } @media (max-width: 1023px) { .why-title { font-size: 36px; } } @media (max-width: 767px) { .why-title { font-size: min(32px, 8vw); } } .why-lead { text-align: center; font-family: var(--font-serif); font-weight: 300; font-size: 22px; line-height: 1.5; color: var(--navy); margin: 0 auto 36px; max-width: 640px; } .why-grid { display: grid; grid-template-columns: 1fr minmax(460px, 1fr); gap: clamp(60px, 8vw, 104px); align-items: stretch; max-width: 1160px; margin: 0 auto; } .why-shot { position: relative; aspect-ratio: 5 / 4; max-width: 100%; border-radius: var(--radius-gallery); overflow: hidden; background: var(--cream-dark); box-shadow: 0 14px 30px -20px rgba(17, 24, 39, 0.45); } .why-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(196, 162, 101, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); } .why-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .why-beat { position: relative; padding: 26px 0; } .why-beat:first-child { padding-top: 0; } .why-beat:last-child { padding-bottom: 0; } .why-beat + .why-beat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(196, 162, 101, .42); transform: scaleX(0); transform-origin: left center; transition: transform 1000ms var(--ease-fluid); } .why-beat.revealed + .why-beat.revealed::before { transform: scaleX(1); } .why-beat__k { font-family: var(--font-serif); font-weight: 500; font-size: 29px; line-height: 1.18; letter-spacing: -0.035em; color: var(--navy); margin: 0 0 12px; } .why-beat__line { display: block; } @media (min-width: 901px) and (max-width: 1023px) { .why-beat__line { display: inline; } } .why-beat__v { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.65; letter-spacing: normal; color: var(--text-light); margin: 0; } .why-claim { max-width: 820px; margin: 64px auto -96px; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px, 1.62vw, 25px); line-height: 1.42; letter-spacing: -0.01em; color: var(--navy); } .why-claim em { font-style: italic; color: var(--gold); } .why-title.reveal { transition-delay: 0ms; } .why-lead.reveal { transition-delay: 180ms; } .why-shot.reveal { transition-delay: 360ms; } body.mastered .why-beats > .reveal:nth-child(1) { transition-delay: 540ms; } body.mastered .why-beats > .reveal:nth-child(2) { transition-delay: 720ms; } body.mastered .why-beats > .reveal:nth-child(3) { transition-delay: 900ms; } .why-claim.reveal { transition-delay: 1120ms; } .why-beat:nth-child(2)::before { transition-delay: 840ms; } .why-beat:nth-child(3)::before { transition-delay: 1020ms; } @media (prefers-reduced-motion: reduce) { .why-beat + .why-beat::before { transform: scaleX(1); transition: none; } .why-title.reveal, .why-lead.reveal, .why-shot.reveal, .why-claim.reveal, .why-beats > .reveal { transition-delay: 0ms; } } .why-claim__line { display: block; } .why-claim__line + .why-claim__line { margin-top: 0.28em; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } .why-shot { width: 100%; max-width: 520px; margin-inline: auto; } .why-beat { padding: 20px 0; } .why-beat__k, .why-beat__v { text-align: center; } .why-claim { margin-top: 44px; margin-bottom: -40px; font-size: 20px; line-height: 1.45; } .why-lead.reveal { transition-delay: 0ms; } .why-shot.reveal { transition-delay: 0ms; } body.mastered .why-beats > .reveal:nth-child(1), body.mastered .why-beats > .reveal:nth-child(2), body.mastered .why-beats > .reveal:nth-child(3) { transition-delay: 0ms; } .why-beat:nth-child(2)::before, .why-beat:nth-child(3)::before { transition-delay: 120ms; } .why-claim.reveal { transition-delay: 0ms; } } @media (min-width: 901px) and (max-width: 1199px) { .why-claim { margin-bottom: -48px; } } @media (min-width: 768px) and (max-width: 900px) { .why-claim { margin-bottom: -88px; } } @media (max-width: 767px) { .why-lead { display: none; } .why-beat__line { display: inline; } .why-claim { text-align: center; } .why-beat__k { font-size: 19px; } } .wd-line { font-family: 'altesse-std-24pt', var(--font-serif); font-weight: 400; font-size: clamp(26px, 8.8vw, 48px); line-height: 1.12; letter-spacing: .005em; color: var(--navy); text-align: center; margin: 0 auto; max-width: 16em; padding: .14em .12em .2em; } .wd-line em { font-style: italic; color: var(--gold); } .wd-lead { font-family: var(--font-serif); font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; color: var(--navy); text-align: center; max-width: 820px; margin: 20px auto 0; } .wd-lead__brk { display: none; } @media (min-width: 901px) { .wd-lead__brk--d { display: block; } } @media (min-width: 365px) and (max-width: 767px) { .wd-lead__brk--m { display: block; } } @media (max-width: 1097px) { .wd-lead { line-height: 1.6; } } @media (max-width: 767px) { .wd-lead { text-wrap: wrap; } } .wd-band { width: 100%; margin-top: 44px; overflow: hidden; } .wd-band img { display: block; width: 100%; height: clamp(280px, 38vw, 480px); object-fit: cover; object-position: 50% 50%; } .wd-facts { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; row-gap: 0; max-width: 1160px; margin: 44px auto 0; border-top: 1px solid var(--gold); } .wd-fact { padding: 28px 0 0; position: relative; } .wd-fact + .wd-fact::before { content: ""; position: absolute; left: -24px; top: 28px; bottom: 4px; width: 1px; background: rgba(196, 162, 101, .28); } .wd-fact__k { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--navy); margin: 0 0 6px; } .wd-fact__v { font-family: var(--font-sans); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.6; color: var(--navy); margin: 0; } @media (max-width: 1023px) { .wd-facts { column-gap: 36px; } .wd-fact + .wd-fact::before { left: -18px; } .wd-fact__k { font-size: 19px; } } @media (max-width: 767px) { .wd-band { margin-top: 36px; } .wd-band img { height: 340px; } .wd-facts { grid-template-columns: 1fr; column-gap: 0; margin-top: 36px; text-align: center; } .wd-fact { padding: 22px 0 0; } .wd-fact + .wd-fact::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; } } @media (max-width: 600px) { .wd-band img { height: auto; aspect-ratio: 25 / 16; } } @media (min-width: 1024px) { .wd-band img { height: clamp(300px, min(38vw, 46vh), 480px); } } .who-claim { max-width: 660px; margin: 0 auto; text-align: center; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.4; color: var(--navy); } .who-claim em { font-style: italic; color: #7A5C33; } .who-claim__line { display: block; } .who-claim__dash { display: none; } @media (max-width: 1199px) { } @media (max-width: 1023px) { } @media (max-width: 899px) { .who-claim { font-size: 23px; } .who-claim__line { display: inline; } .who-claim__dash { display: inline; } } @media (max-width: 767px) { .who-claim { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { } .fmt-tail{ max-width:820px; margin:64px auto -96px; font-family:var(--font-serif); font-size:24px; line-height:1.5; letter-spacing:-.02em; color:var(--navy); text-align:center; } .fmt-tail em{font-style:italic;color:var(--brown)} @media (max-width:900px){.fmt-tail{font-size:21px;margin:44px auto -40px}} .fmt3{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto auto auto; gap:0 72px; max-width:1240px; margin:72px auto 0; } .fmt3__col{ display:grid; grid-row:span 4; grid-template-rows:subgrid; align-content:start; } .fmt3__shot{ position:relative; aspect-ratio:4/3; max-width:100%; border-radius:var(--radius-gallery); overflow:hidden; margin-bottom:26px; background:var(--cream-dark); box-shadow:0 14px 30px -20px rgba(17,24,39,.45); } .fmt3__shot::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; border:1px solid rgba(196,162,101,.38); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } .fmt3__shot img{ position:absolute;inset:0; width:100%;height:100%;object-fit:cover; } .fmt3__t::before{ content:''; position:absolute; top:0;left:0;right:0; height:1px; background:rgba(196,162,101,.55); transform:scaleX(0); transform-origin:left center; transition:transform 1100ms var(--ease-fluid); } .fmt3__col.revealed .fmt3__t::before{transform:scaleX(1)} .fmt3__t{ position:relative; padding-top:26px; font-family:var(--font-serif); font-weight:500; font-size:29px; line-height:1.18; letter-spacing:-.035em; color:var(--navy); margin:0 0 10px; } .fmt3__spec{ font-family:var(--font-sans); font-weight:600; font-size:11px; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--brown); margin:0 0 16px; } .fmt3__note{ font-family:var(--font-sans); font-size:15px; line-height:1.72; color:var(--navy); margin:0; } .fmt3__col:nth-child(2){transition-delay:150ms} .fmt3__col:nth-child(2) .fmt3__t::before{transition-delay:150ms} .fmt3__col:nth-child(3){transition-delay:300ms} .fmt3__col:nth-child(3) .fmt3__t::before{transition-delay:300ms} @media (max-width:1199px){ .fmt3{gap:0 40px;margin-top:60px} .fmt3__t{font-size:26px} } @media (max-width:899px){ .fmt3{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(8,auto);gap:0 36px} .fmt3__col:nth-child(n+3){margin-top:44px} .fmt3__col:nth-child(3){grid-column:1 / -1} .fmt3__col:nth-child(3) .fmt3__shot{max-width:calc((100% - 36px) / 2)} .fmt3__col:nth-child(3) .fmt3__note{max-width:60ch} } @media (max-width:767px){ .fmt3{grid-template-columns:1fr;margin-top:48px} .fmt3__t,.fmt3__spec,.fmt3__note{text-align:center} .fmt3__t::before{transform-origin:center center} .fmt3__col:nth-child(n+2){margin-top:40px} .fmt3__col:nth-child(3){grid-column:auto} .fmt3__col:nth-child(3) .fmt3__shot{max-width:100%} .fmt3__col:nth-child(3) .fmt3__note{max-width:none} .fmt3__t{font-size:25px} .fmt3__col:nth-child(2),.fmt3__col:nth-child(3), .fmt3__col:nth-child(2) .fmt3__t::before,.fmt3__col:nth-child(3) .fmt3__t::before{transition-delay:0ms} } @media (prefers-reduced-motion:reduce){ .fmt3__t::before{transition:none;transform:scaleX(1)} } .tl-track{position:absolute;top:0;bottom:0;width:1px;background:rgba(196,162,101,.22); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%)} .tl-fill{position:absolute;inset:0; background:linear-gradient(to bottom,rgba(196,162,101,.35),var(--gold) 18%,var(--gold-lt))} .tl-dot{position:absolute;left:50%;width:11px;height:11px;transform:translate(-50%,-50%); border-radius:50%;background:var(--cream);border:1px solid var(--gold);z-index:1; box-shadow:inset 0 0 0 1.5px var(--cream),inset 0 0 0 5.5px var(--gold)} .tlD{position:relative;max-width:1160px;margin:64px auto 0;padding-left:44px} .tlD .tl-track{left:5px} .tlD-entry{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px;align-items:center;padding:52px 0} .tlD-entry + .tlD-entry{border-top:1px solid rgba(196,162,101,.14)} .tlD-entry:last-child{padding-bottom:0} .section--cream:has(.tlD){padding-bottom:40px} .tlD-entry .tl-dot{left:-39px;top:50%} .tlD-entry:nth-child(even) .tlD-plate{order:2} .tlD-plate{position:relative;aspect-ratio:4/5;max-width:380px;width:100%;justify-self:center; border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#EDE4D8,#E2D6C4); box-shadow:0 6px 20px -8px rgba(17,24,39,.18)} .tlD-plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; border:1px solid rgba(196,162,101,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .tlD-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tlD-num{display:block;font:600 11px/1 var(--font-sans);letter-spacing:.22em; color:#7A5C33;margin-bottom:14px} .tlD-title{font-family:'ratiomodern',var(--font-serif);font-weight:400; font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:var(--navy); margin-bottom:16px} .tlD-body p{font-size:15px;line-height:1.8;color:var(--text);max-width:58ch;margin-bottom:16px} .tlD-body p:last-child{margin-bottom:0} .tlD-pull{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.5; color:var(--brown);border-left:2px solid var(--gold);padding-left:18px;margin-top:22px} .tl-claim{max-width:820px;margin:72px auto 0;text-align:center; font-family:var(--font-serif);font-size:clamp(20px,2.2vw,26px);line-height:1.5;color:var(--navy)} .tl-claim .gold{display:block;font-style:italic;color:var(--brown);margin-top:6px} @media (max-width:1023px){ .tlD{padding-left:32px;margin-top:48px} .tlD .tl-track{left:4px} .tlD-entry{grid-template-columns:1fr;gap:24px;padding:40px 0} .tlD-entry .tl-dot{left:-28px;top:30px} .tlD-entry:nth-child(even) .tlD-plate{order:0} .tlD-plate{max-width:320px;justify-self:start} } @media (max-width:767px){ .tl-claim{margin-top:56px} } @supports (animation-timeline: view()) { @media not (prefers-reduced-motion: reduce) { .tlD .tl-fill{transform:scaleY(0);transform-origin:top; animation:tl-grow linear both; animation-timeline:view(block 0% 45%); animation-range:entry 0% contain 100%} .tlD .tl-dot{border-color:rgba(196,162,101,.55);box-shadow:none; animation:tl-dot-light linear both; animation-timeline:view(block 0% 45%); animation-range:entry} } } @keyframes tl-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes tl-dot-light{to{border-color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--cream),inset 0 0 0 5.5px var(--gold)}} body.mastered .tlD-plate.reveal, body.mastered .tlD-body > .reveal{opacity:0;transform:translateY(26px);filter:blur(2px); transition:opacity 1100ms cubic-bezier(.45,0,.15,1), transform 1100ms cubic-bezier(.45,0,.15,1), filter 1100ms cubic-bezier(.45,0,.15,1)} body.mastered .tlD-plate.reveal{transform:translateY(40px)} body.mastered .tlD-plate.reveal.revealed, body.mastered .tlD-body > .reveal.revealed{opacity:1;transform:none;filter:none} body.mastered .tlD-title.reveal{transition-delay:150ms} body.mastered .tlD-pull.reveal{transition-delay:120ms} body.mastered .abt-open__name.reveal{transition-delay:160ms} body.mastered .abt-open__dek.reveal{transition-delay:320ms} @media (prefers-reduced-motion:reduce){ body.mastered .tlD-plate.reveal, body.mastered .tlD-body > .reveal{opacity:1;transform:none;filter:none;transition:none} body.mastered .abt-open__name.reveal, body.mastered .abt-open__dek.reveal{transition-delay:0ms} } .story-open{position:relative;padding-top:calc(var(--nav-height) + 72px)} body:has(.story-open) .nav:not(.scrolled) .nav__logo{color:var(--navy)} body:has(.story-open) .nav:not(.scrolled) .nav__link{color:var(--text-light)} body:has(.story-open) .nav:not(.scrolled) .nav__link:hover, body:has(.story-open) .nav:not(.scrolled) .nav__link.active, body:has(.story-open) .nav:not(.scrolled) .nav__item:hover .nav__trigger, body:has(.story-open) .nav:not(.scrolled) .nav__item:focus-within .nav__trigger{color:var(--navy)} body:has(.story-open) .nav:not(.scrolled) .nav__hamburger:not(.open) span{background:var(--navy)} body:has(.story-open) .hero-mark{color:var(--navy)} .abt-open .container{text-align:center} .abt-open__name{font-family:'ratiomodern',var(--font-serif);font-weight:400; font-size:clamp(44px,7vw,84px);line-height:1.04;color:var(--navy);margin-top:18px; padding-bottom:.26em;margin-bottom:-.26em} .abt-open__name.reveal.revealed{transform:none;filter:none;position:relative;z-index:1} .abt-open__dek{font-family:var(--font-serif);font-size:clamp(17px,1.6vw,21px); line-height:1.65;color:var(--text);max-width:1160px;margin:26px auto 0} .abt-open__frame{display:contents} .abt-open__picture{display:block;position:relative;margin:52px auto 0;max-width:1160px; border-radius:12px;overflow:hidden;background:var(--cream-dark); box-shadow:0 14px 30px -20px rgba(17,24,39,.45)} .abt-open__picture::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; border:1px solid rgba(196,162,101,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .abt-open__picture img{display:block;width:100%;height:100%;object-fit:cover} @media (min-width:768px){ .abt-open__picture{aspect-ratio:16/9} } .abt-open__vidbox video{display:block;width:100%;height:100%;max-width:100%;object-fit:cover} @media (min-width:768px){ .abt-open__still{display:none} .abt-open__vidbox{background-image:url("../../videos/pages/about/masthead-poster-v2.jpg"); background-size:cover;background-position:center} } .abt-open__vidbox{display:none} .abt-open__phonevid{display:none} @media (min-width:768px){ .abt-open.story-open{ display:flex;flex-direction:column;justify-content:flex-end; min-height:100lvh; padding-top:0; padding-bottom:calc(100lvh - 100svh); overflow:hidden; background:var(--navy); } .abt-open__vidbox{display:block;position:absolute;inset:0;z-index:0} .abt-open__shade{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.90) 12%, rgba(0,0,0,.83) 22%, rgba(0,0,0,.71) 30%, rgba(0,0,0,.54) 38%, rgba(0,0,0,.36) 46%, rgba(0,0,0,.20) 54%, rgba(0,0,0,.08) 60%, rgba(0,0,0,0) 64%); } .abt-open__topshade{ position:absolute;top:0;left:0;right:0;height:180px;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.16) 75%, rgba(0,0,0,.06) 88%, rgba(0,0,0,0) 100%); } .abt-open .container{position:relative;z-index:2;padding-bottom:max(12vh,80px);text-align:left} .abt-open__dek{margin-left:0;margin-right:0} .abt-open__name{color:var(--white);text-shadow:0 1px 14px rgba(0,0,0,.45)} .abt-open__dek{font-family:var(--font-sans);font-weight:400; font-size:clamp(15px,1.18vw,17px);line-height:1.72;letter-spacing:.005em; color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.45)} body:has(.story-open) .nav:not(.scrolled) .nav__logo{color:var(--white)} body:has(.story-open) .nav:not(.scrolled) .nav__link{color:var(--white)} body:has(.story-open) .nav:not(.scrolled) .nav__link:hover, body:has(.story-open) .nav:not(.scrolled) .nav__link.active, body:has(.story-open) .nav:not(.scrolled) .nav__item:hover .nav__trigger, body:has(.story-open) .nav:not(.scrolled) .nav__item:focus-within .nav__trigger{color:var(--white)} body:has(.story-open) .nav:not(.scrolled) .nav__hamburger:not(.open) span{background:var(--white)} body:has(.story-open) .hero-mark{color:var(--white)} body:has(.story-open) .nav:not(.scrolled){ -webkit-backdrop-filter:none; backdrop-filter:none; } } @media (max-width:767px){ .abt-open__picture{aspect-ratio:3/4;margin-top:40px} .abt-open__picture img{object-position:center 22%} } .inc-card__icon--diploma { --icon-scale: 1.00; } .inc-card__icon--brushcup { --icon-scale: 1.08; } .inc-card__icon--stool { --icon-scale: 1.13; } .inc-card__icon--salon { --icon-scale: 0.98; } .inc-card__icon--spain { --icon-scale: 1.03; } .inc-card__icon--bubbles { --icon-scale: 1.02; } .abt-open__l{display:block} @media (max-width: 767px) { .hero--service .hero__label, .hero--service .hero__title, .hero--service .hero__subtitle { text-align: center; margin-left: auto; margin-right: auto; } .hero--service .hero__actions { justify-content: center; } body:not(.page-about) .text-section p { text-align: center; } .section:has(.fmt3), .section:has(.vdk) { padding-top: 32px; } .occ3-col__title, .occ3-col__note { text-align: center; } .pricing-tiers__zone, .pricing-tiers__title, .pricing-tiers__note { text-align: center; } .pricing-tiers__from { justify-content: center; } .included-list__item { display: block; text-align: center; } .included-list__item::before { display: inline; margin-right: 6px; } .looks-grid__num, .looks-grid__name, .looks-grid__desc { text-align: center; } .session-flow__num, .session-flow__label, .session-flow__title, .session-flow__desc { text-align: center; } .hero-v4__content { text-align: center; } .hero-v4__subline { margin-left: auto; margin-right: auto; } .hero-v4__proof { justify-content: center; } .hero-v4__stat { text-align: left; } .footer__inner { text-align: center; } .footer__links { align-items: center; } .footer__link { justify-content: center; } .footer__socials { justify-content: center; } } @media (max-width: 899px) { .learn .learn__label { text-align: center; } .learn .learn__list dt, .learn .learn__list dd { text-align: center; } .learn .learn__obj { margin: 0 auto 6px; } .learn .learn__obj img { object-position: center bottom; transform-origin: center bottom; } .opn-lead { text-align: center; } .opn-lead::after { margin-left: auto; margin-right: auto; } .opn-claim { text-align: center; } } @media (max-width: 900px) { .dif__t, .dif__s { text-align: center; } .dif__s { margin-left: auto; margin-right: auto; } .dif-claim { text-align: center; } } @media (max-width: 767px) { .pricing-tiers__from-label { display: inline-flex; justify-content: flex-end; width: 0; overflow: visible; white-space: nowrap; margin-right: -10px; } .pricing-tiers__from-label::after { content: ""; display: inline-block; width: 10px; } .pricing-tiers__from--stacked { flex-direction: column; align-items: center; gap: 4px; } .pricing-tiers__from--stacked .pricing-tiers__from-label { width: auto; margin-right: 0; } .pricing-tiers__from--stacked .pricing-tiers__from-label::after { display: none; } } .testimonial-card__sidecard { display: none; } @media (max-width: 767px) { .testimonial-card, .testimonial-card__quote { text-align: left; } .testimonial-card__sidecard { display: block; float: right; width: 96px; margin: 2px 0 10px 14px; text-align: center; } .testimonial-card__avatar--side { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin: 0 auto 6px; } .testimonial-card__side-name { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 13px; font-style: normal; letter-spacing: normal; color: var(--navy); line-height: 1.3; } .testimonial-card__side-occ { display: block; font-family: var(--font-sans); font-size: 11px; font-style: normal; letter-spacing: normal; color: var(--text-light); line-height: 1.35; margin-top: 2px; } .testimonial-card__author-row { display: none; } .testimonial-card__quote { margin-bottom: 0; } } .learn .learn__pair + .learn__pair { margin-top: 20px; } .learn .learn__pair { opacity: 0; transform: translateY(26px); filter: blur(2px); transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 1100ms cubic-bezier(0.16, 1, 0.3, 1); } .learn .learn__group.revealed .learn__pair { opacity: 1; transform: none; filter: blur(0); } .learn .learn__pair:nth-child(1) { transition-delay: 160ms; } .learn .learn__pair:nth-child(2) { transition-delay: 340ms; } .learn .learn__pair:nth-child(3) { transition-delay: 520ms; } @media (prefers-reduced-motion: reduce) { .learn .learn__pair { transition: none; opacity: 1; transform: none; filter: none; } } .footer__sig, .footer__desc, .footer__socials--m { display: none; } @media (max-width: 767px) { .footer__logo, .footer__text, .footer__heading { display: none; } .footer__inner .footer__socials { display: none; } .footer__sig { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--gold); } .footer__desc { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.55); margin: 8px 0 20px; } .footer__inner { gap: 0; } .footer__inner .footer__socials--m { display: flex; justify-content: center; margin-top: 12px; } } @media (min-width: 768px) { .opn-sec { padding-bottom: 64px; } } @media (min-width: 768px) { .wd-band { margin-top: 16px; } } @media (max-width: 767px) { .timeline__lead-b { display: none; } } @media (max-width: 767px) { .timeline__brk { display: none; } } @keyframes hero-settle { from { transform: scale(1.10); } to { transform: scale(1); } } .hero--dissolve .hero__image { transform-origin: 50% 50%; animation: hero-settle 2600ms cubic-bezier(0.16, 1, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { .hero--dissolve .hero__image { animation: none; } } .party-est__foot-line { display: block; } .opn-sec .text-section .label.reveal { transition-delay: 0ms; } .opn-sec .opn-line.reveal { transition-delay: 140ms; } .opn-sec .opn-lead.reveal { transition-delay: 280ms; } @media (max-width: 1023px) { .page-destination .hero--dissolve .hero__title { font-size: clamp(28px, 9.2vw, 40px); } } @media (max-width: 1023px) { .page-destination .hero--dissolve .hero__sub-line { display: block; } } @media (max-width: 1023px) { .page-destination .hero--dissolve .hero__content { margin-top: -14px; } } @media (max-width: 767px) { .tlD { margin-top: 28px; } .tlD-entry { padding: 28px 0; gap: 20px; } .tlD-entry:nth-child(2) { padding-top: 0; } } @media (max-width: 767px) { .abt-open__frame { display: grid; grid-template-columns: 1fr; } .abt-open__frame > .abt-open__picture { grid-area: 1 / 1; aspect-ratio: 3 / 5; } .abt-open__frame > .abt-open__picture.reveal, .abt-open__frame > .abt-open__picture.reveal.revealed { transform: none; } .abt-open__frame > .abt-open__dek { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; margin: 40px 0 0; padding: 0 18px 22px; border-radius: 12px; text-align: left; background: linear-gradient(to bottom, rgba(14, 13, 12, 0) 58%, rgba(14, 13, 12, 0.22) 66%, rgba(14, 13, 12, 0.55) 74%, rgba(14, 13, 12, 0.8) 86%, rgba(14, 13, 12, 0.88) 100%); pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } .abt-open__frame > .abt-open__dek .abt-open__l:first-child { font-size: 23px; line-height: 1.28; font-style: italic; color: #E8CFA6; margin-bottom: 8px; } .abt-open__frame > .abt-open__dek .abt-open__l + .abt-open__l { font-size: 16.5px; line-height: 1.48; color: rgba(255, 255, 255, 0.88); } } @media (max-width: 767px) { .abt-open.story-open { padding-top: calc(var(--nav-height) + 8px); } } @media (max-width: 767px) { .abt-open__frame > .abt-open__picture { aspect-ratio: 2 / 3; } .abt-open__frame > .abt-open__picture img { object-position: center center; } .abt-open__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-width: 767px) { .abt-open.story-open { padding-bottom: 28px; } } @media (max-width: 767px) { .abt-open__frame > .abt-open__picture, .abt-open__frame > .abt-open__dek { margin-top: 12px; } .section--cream:has(.tlD) { padding-top: 36px; } } .whoc { max-width: 1240px; margin: 52px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .whoc__card { position: relative; border-radius: 18px; padding: 38px 34px 34px; background: radial-gradient(140% 130px at 50% 0%, rgba(196, 162, 101, 0.09), transparent 75%), var(--white); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 16px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(27, 40, 56, 0.08); } @media (hover: hover) { .whoc__card { transition: transform 600ms var(--ease-fluid), box-shadow 600ms var(--ease-fluid); } .whoc__card:hover { transform: translateY(-8px); box-shadow: 0 2px 3px rgba(17, 24, 39, 0.06), 0 14px 30px rgba(27, 40, 56, 0.11), 0 30px 60px rgba(196, 162, 101, 0.16); } } .whoc__card::before, .whoc__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; } .whoc__card::before { background: conic-gradient(from -90deg, #C4A265 0%, #ffffff 2%, #D4B97A 6%, rgba(196, 162, 101, 0.35) 18%, rgba(138, 124, 94, 0.45) 30%, rgba(196, 162, 101, 0.30) 42%, #D4B97A 52%, rgba(154, 138, 104, 0.45) 62%, rgba(196, 162, 101, 0.35) 72%, #C4A265 80%, #ffffff 84%, #D4B97A 88%, #C4A265 100%); } .whoc__card::after { background: conic-gradient(from var(--glint-angle, 0deg), transparent, var(--gold-lt) 9%, rgba(255, 253, 248, 0.95) 11%, var(--gold-lt) 13%, transparent 22%); opacity: 0; transition: opacity 500ms var(--ease-smooth); animation: glint-spin 11s linear infinite; animation-play-state: paused; } @media (hover: hover) { .whoc__card:hover::after { opacity: 1; animation-play-state: running; } } @media (prefers-reduced-motion: reduce) { .whoc__card::after { animation: none; opacity: 0; } } .whoc__eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase; color: #7A5C33; margin: 0 0 10px; } .whoc__t { font-family: var(--font-serif); font-weight: 500; font-size: 38px; line-height: 1.1; color: var(--navy); margin: 0 0 18px; text-wrap: balance; } .whoc__quote { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.32; color: #7A5C33; margin: 0 0 18px; padding-top: 16px; border-top: 1px solid rgba(196, 162, 101, 0.45); text-wrap: balance; } .whoc__ans { font-family: var(--font-sans); font-size: 15px; line-height: 1.8; color: var(--text); margin: 0; } .whoc__ans + .whoc__ans { margin-top: 14px; } .whoc__wrap:nth-child(2) { transition-delay: 140ms; } @media (max-width: 899px) { .whoc { grid-template-columns: 1fr; gap: 22px; max-width: 780px; } .whoc__t { font-size: 34px; } .whoc__wrap:nth-child(2) { transition-delay: 0ms; } } @media (max-width: 767px) { .whoc { margin-top: 40px; } .whoc__card { padding: 30px 24px 28px; border-radius: 16px; text-align: center; } .whoc__t { font-size: 32px; } .whoc__quote { font-size: 19px; } } .whoc + .who-claim { margin-top: 64px; } @media (max-width: 1023px) { .whoc + .who-claim { margin-top: 52px; } } @media (max-width: 767px) { .whoc + .who-claim { margin-top: 40px; } } .pricing-tiers__save { display: inline-block; margin-left: 8px; padding: 3px 8px; border: 1px solid rgba(196, 162, 101, 0.55); border-radius: 100px; font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--brown); vertical-align: middle; white-space: nowrap; } .vcard__note-line{display:block} .vdk-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:30; width:46px;height:46px;border-radius:50%; background:rgba(30,30,30,.22); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); border:0; cursor:pointer;padding:0; transition:background 300ms ease, transform 300ms ease; } .vdk-arrow:active, .vdk-arrow.is-pressed{ transition-duration:90ms; transform:translateY(-50%) scale(.92); } .vdk-arrow::before{ content:'';position:absolute;top:50%;left:50%; width:9px;height:9px; border-left:1.5px solid var(--cream);border-bottom:1.5px solid var(--cream); } .vdk-arrow--prev{left:22px} .vdk-arrow--next{right:22px} .vdk-arrow--prev::before{transform:translate(-30%,-50%) rotate(45deg)} .vdk-arrow--next::before{transform:translate(-70%,-50%) rotate(225deg)} @media (hover:hover){ .vdk-arrow:hover{background:rgba(30,30,30,.42)} } .vdk{ --vk-offset:18px; --vk-scale:.03; --vk-dim:.10; --vk-dur:950ms; --vk-ease:cubic-bezier(.32,.08,.18,1); --vk-ratio:2/1; position:relative; margin:64px auto 0; padding-top:calc(2 * var(--vk-offset) + 4px); } .vdk__deck{ position:relative;list-style:none;margin:0;padding:0; width:100%; aspect-ratio:var(--vk-ratio); -webkit-tap-highlight-color:transparent; user-select:none; } .vdk__deck > .haptic-tick{z-index:25} .vcard{ position:absolute;inset:0;margin:0; border-radius:var(--radius-gallery); transform-origin:center top; transform: translate3d(0, calc(var(--d,0) * -1 * var(--vk-offset)), 0) scale(calc(1 - var(--d,0) * var(--vk-scale))); z-index:calc(10 - var(--d,0)); transition:transform var(--vk-dur) var(--vk-ease); cursor:pointer; } .vcard::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:0 2px 4px rgba(17,24,39,.10),0 14px 28px -8px rgba(17,24,39,.22),0 34px 64px -16px rgba(27,40,56,.42); opacity:clamp(0, 1 - var(--d,0), 1); transition:opacity var(--vk-dur) var(--vk-ease); } .vcard::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:0 10px 22px -6px rgba(27,40,56,.20); opacity:clamp(0, var(--d,0), 1); transition:opacity var(--vk-dur) var(--vk-ease); } .vcard__ph{ position:absolute;inset:0;overflow:hidden;border-radius:inherit; background:var(--navy); } .vcard__ph video, .vcard__ph img{ display:block; position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 38%; user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none; } .vcard__ph .vcard__veil{ position:absolute;inset:0;z-index:3; background:var(--navy); opacity:calc(var(--d,0) * var(--vk-dim)); transition:opacity var(--vk-dur) var(--vk-ease); pointer-events:none; } .vcard__ph .vcard__rim{ position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none; border:1px solid rgba(196,162,101,.38); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .vcard__shade{ position:absolute;inset:0;z-index:1;pointer-events:none; border-radius:inherit; background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.50) 20%, rgba(0,0,0,0) 42%); } .vcard__copy{ position:absolute;z-index:2; left:56px;right:56px;bottom:42px; color:var(--cream); } .vcard__spec{ font-family:var(--font-sans);font-weight:600; font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase; color:#D4B97A; margin:0 0 14px; } .vcard__t{ font-family:'ratiomodern',var(--font-serif);font-weight:400; font-size:clamp(30px,2.9vw,42px);line-height:1.12;letter-spacing:-.02em; color:var(--cream); margin:0 0 7px; } .vcard__note{ font-family:var(--font-sans);font-weight:400; font-size:15px;line-height:1.7; color:rgba(244,239,232,.92); max-width:92ch; margin:0; } .vdk-rail{ display:flex;gap:44px;justify-content:center;align-items:baseline; margin-top:36px; } .vdk-rail button{ position:relative; font-family:var(--font-sans);font-weight:600; font-size:11px;line-height:1;letter-spacing:.15em;text-transform:uppercase; color:var(--text-light);background:none;border:0;padding:8px 2px 12px;cursor:pointer; transition:color 300ms ease, transform 300ms ease; } .vdk-rail button:active, .vdk-rail button.is-pressed{ transition-duration:90ms; transform:scale(.94); } .vdk-rail button::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:rgba(196,162,101,.55); transform:scaleX(0);transform-origin:center; transition:transform 500ms var(--ease-fluid); } .vdk-rail button.on{color:var(--brown)} .vdk-rail button.on::after{transform:scaleX(1)} @media (hover:hover){ .vdk-rail button:hover{color:var(--brown)} } @keyframes vcard-tuck{0%{z-index:20;animation-timing-function:step-end}30%,100%{z-index:1}} @keyframes vcard-untuck{0%{z-index:1;animation-timing-function:step-end}30%,100%{z-index:20}} .vcard--tuck{animation:vcard-tuck 950ms linear both} .vcard--untuck{animation:vcard-untuck 950ms linear both} .vdk--frozen .vcard, .vdk--frozen .vcard::before, .vdk--frozen .vcard::after, .vdk--frozen .vcard__veil{transition:none} .vdk-note-ph{display:none} @media (max-width:767px){ .vdk{--vk-offset:12px;--vk-scale:.025;--vk-ratio:4/5;max-width:none} .vcard__copy{ left:18px;right:18px;bottom:18px;top:auto;transform:none;max-width:none; text-align:center} .vcard__t{font-size:28px;margin:0 auto 6px} .vcard__spec{margin:0} .vcard__note{display:none} .vcard__shade{ background:linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.38) 20%, rgba(0,0,0,0) 44%)} .vdk-note-ph{ display:block; margin:24px auto 0; max-width:34ch; font-family:var(--font-sans);font-size:15px;line-height:1.7; color:var(--navy);text-align:center; transition:opacity 300ms ease; } .vdk-note-ph .vcard__note-line{display:inline} .vdk-arrow{width:38px;height:38px} .vdk-arrow--prev{left:10px} .vdk-arrow--next{right:10px} .vdk-rail{gap:14px;flex-wrap:nowrap;margin-top:28px} .vdk-rail button{font-size:10px;letter-spacing:.07em;white-space:nowrap;padding:6px 0 10px} .vdk-note-in{animation:vdk-note-in 560ms cubic-bezier(.32,.08,.18,1) backwards} } @keyframes vdk-note-in{from{opacity:0;transform:translateY(14px)}} @media (min-width: 1024px){ html[data-lang='es'] .hero--dissolve .hero__subtitle, html[data-lang='uk'] .hero--dissolve .hero__subtitle, html[data-lang='ru'] .hero--dissolve .hero__subtitle{ max-width: 640px; } } @media (max-width: 767px) { html[data-lang="uk"] .hero__title--pairlock .hero__title-line:first-child, html[data-lang="ru"] .hero__title--pairlock .hero__title-line:first-child { white-space: nowrap; } html[data-lang="uk"] .hero--dissolve .hero__title--pairlock, html[data-lang="ru"] .hero--dissolve .hero__title--pairlock { font-size: clamp(30px, 8.6vw, 38px); } } @media (max-width: 767px) and (orientation: portrait) { .hero.hero--dissolve, .hero-v4 { height: 100svh; height: 100lvh; } .hero-v4 { display: flex; flex-direction: column; align-items: stretch; } .hero--dissolve .hero__media, .hero-v4__media { flex: 0 1 auto; min-height: 78vw; } .hero--dissolve .hero__content, .hero-v4__content { flex: 0 0 auto; padding-bottom: 104px; padding-bottom: calc(100lvh - 100svh + 32px); } } @media (prefers-reduced-motion:reduce){ .vcard,.vcard::before,.vcard::after,.vcard__veil{transition:none} .vcard--tuck,.vcard--untuck{animation:none} } @media (max-width:767px){ .abt-open__phonevid{ display:block;position:relative;width:100%; aspect-ratio:17/20; background:#000; margin:0; } .abt-open__phoneclip{ position:absolute;inset:0;overflow:hidden; border-radius:34px 34px 0 0; } .abt-open__phonevid video{display:block;width:100%;height:100%;max-width:100%;object-fit:cover} .abt-open__phoneclip::after{ content:"";position:absolute;top:0;left:0;right:0;height:180px;pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.16) 75%, rgba(0,0,0,.06) 88%, rgba(0,0,0,0) 100%); } .abt-open__phonefade{ position:absolute;left:0;right:0;bottom:-2px;height:65%; pointer-events:none; background:linear-gradient(to bottom, rgba(245,240,235,0) 0%, rgba(245,240,235,.014) 7.2%, rgba(245,240,235,.055) 15.4%, rgba(245,240,235,.12) 22.6%, rgba(245,240,235,.22) 30.8%, rgba(245,240,235,.35) 38%, rgba(245,240,235,.50) 46.1%, rgba(245,240,235,.66) 54.3%, rgba(245,240,235,.80) 62.4%, rgba(245,240,235,.91) 70.6%, rgba(245,240,235,.975) 77.8%, var(--cream) calc(100% - 46px), var(--cream) 100%); } .abt-open__still{display:none} body:has(.story-open) .nav:not(.scrolled) .nav__logo{color:var(--white)} body:has(.story-open) .nav:not(.scrolled) .nav__link{color:var(--white)} body:has(.story-open) .nav:not(.scrolled) .nav__link:hover, body:has(.story-open) .nav:not(.scrolled) .nav__link.active, body:has(.story-open) .nav:not(.scrolled) .nav__item:hover .nav__trigger, body:has(.story-open) .nav:not(.scrolled) .nav__item:focus-within .nav__trigger{color:var(--white)} body:has(.story-open) .nav:not(.scrolled) .nav__hamburger:not(.open) span{background:var(--white)} body:has(.story-open) .hero-mark{color:var(--white)} .abt-open__frame{display:block} .abt-open.story-open{padding-top:0;padding-bottom:28px} .abt-open.story-open > .container{ margin-top:-44px; padding:0 clamp(24px,6.4vw,32px) 24px; } .abt-open .container{text-align:center} .abt-open__name{ position:static;width:auto;height:auto;overflow:visible;clip-path:none; white-space:normal;padding:0 0 .26em; margin:0 0 calc(12px - .26em); font-family:'ratiomodern',var(--font-serif);font-weight:400; font-size:36px;line-height:1.05;letter-spacing:normal; color:var(--navy);text-shadow:none; } .abt-open__name{text-align:left} .abt-open__frame > .abt-open__dek{ margin:0;padding:0;background:none;border-radius:0;display:block; max-width:none;text-shadow:none;text-align:left;text-wrap:auto; } .abt-open__frame > .abt-open__dek .abt-open__l:first-child, .abt-open__frame > .abt-open__dek .abt-open__l + .abt-open__l{ font-family:var(--font-sans);font-weight:400;font-style:normal; font-size:14px;line-height:1.6;letter-spacing:normal; color:rgba(17,24,39,.72);margin:0;text-shadow:none; display:inline; } .abt-open__frame > .abt-open__dek .abt-open__l + .abt-open__l::before{content:" "} } .hero--levelup .hero__image-placeholder { opacity: 1; background: #6A5F5B 50% 34% / cover no-repeat url(data:image/jpeg;base64,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); } @media (max-width: 1023px) { .hero--levelup .hero__image-placeholder { background-position: 50% 30%; } } @media (max-width: 767px) { .hero--levelup .hero__image-placeholder { background-color: #65554F; background-image: url(data:image/jpeg;base64,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); } } @media (min-width: 1024px) { .hero--levelup .hero__subtitle { max-width: 700px; } html[data-lang='es'] .hero--levelup .hero__title, html[data-lang='uk'] .hero--levelup .hero__title, html[data-lang='ru'] .hero--levelup .hero__title { max-width: 880px; } html[data-lang='es'] .hero--levelup .hero__subtitle, html[data-lang='uk'] .hero--levelup .hero__subtitle, html[data-lang='ru'] .hero--levelup .hero__subtitle { max-width: 820px; } }