/* styles.css */
:root {
--white: #FFFFFF;
--cream: #FAF7F1;
--stone: #D8D8C9;
--gold: #D3A66F;
--sage: #B5C3B3;
--olive: #7D7C64;
--mauve: #7D6F77;
--lemon: #F2E37A;
--charcoal: #3F3B36;
--champagne: #F6EBDD;
--olive-text: #6A6952;
--mauve-text: #72656D;
--font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
--fs-body: 1.125rem;
--lh-body: 1.8;
--fs-small: 0.875rem;
--fs-h1: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
--fs-h2: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
--gutter: 16px;
--header-h: 72px;
--header-h-compact: 0px;
--frame-line: 1.5px;
--frame-radius: 32px;
--frame-inset: 16px;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--door-open: 600ms;
}
@media (min-width: 768px) {
:root { --gutter: 32px; }
}
@media (min-width: 1024px) {
:root {
--gutter: 48px;
--header-h: 96px;
--frame-inset: 24px;
}
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-h-compact);
}
body {
margin: 0;
min-height: 100vh;
font-family: var(--font);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--charcoal);
background: var(--cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--charcoal);
outline-offset: 3px;
}
.icon {
width: 1.25em;
height: 1.25em;
flex: none;
fill: currentColor;
}
.skip-link {
position: absolute;
inset-inline-start: var(--gutter);
top: 8px;
z-index: 100;
padding: 8px 20px;
border-radius: 999px;
background: var(--charcoal);
color: var(--cream);
font-size: var(--fs-small);
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.frame {
position: absolute;
top: var(--frame-inset);
left: var(--frame-inset);
width: calc(100% - 2 * var(--frame-inset));
height: calc(100% - 2 * var(--frame-inset));
overflow: visible;
pointer-events: none;
transform: scaleX(-1);
}
.frame__line {
fill: none;
stroke: var(--frame-color, var(--white));
stroke-width: var(--frame-line);
}
.frame--gold { --frame-color: var(--gold); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: 52px;
padding: 0 1.5rem;
border: 1px solid transparent;
border-radius: 999px;
font: 600 1.0625rem/1.2 var(--font);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn--primary {
background-color: var(--gold);
color: var(--charcoal);
}
.btn--primary:hover { background-color: #DDB98C; }
.btn--secondary {
border-color: var(--charcoal);
background-color: transparent;
color: var(--charcoal);
}
.btn--secondary:hover {
background-color: var(--charcoal);
color: var(--cream);
}
.btn--slim {
min-height: 40px;
padding: 0 1.125rem;
font-size: 0.9375rem;
}
.quiet-link {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(211 166 111 / 0.75);
text-underline-offset: 0.5em;
transition: text-decoration-color 0.3s var(--ease-out);
}
.quiet-link:hover,
.quiet-link.is-active {
text-decoration-color: var(--gold);
text-decoration-thickness: 2px;
}
.rule {
display: block;
width: 120px;
height: var(--frame-line);
background: var(--gold);
}
.container {
width: 100%;
max-width: calc(1344px + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.label {
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.6;
color: var(--olive-text);
}
.section-title {
margin-top: 8px;
font-size: var(--fs-h2);
font-weight: 600;
line-height: 1.3;
text-wrap: balance;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
height: var(--header-h);
border-bottom: 1px solid transparent;
transition:
height 0.35s var(--ease-out),
background-color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out);
}
.site-header.is-scrolled {
height: var(--header-h-compact);
background-color: rgb(250 247 241 / 0.85);
-webkit-backdrop-filter: blur(16px) saturate(1.1);
backdrop-filter: blur(16px) saturate(1.1);
border-bottom-color: rgb(216 216 201 / 0.7);
}
.site-header__inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-inline: var(--gutter);
}
.brand {
display: block;
border-radius: 50%;
text-decoration: none;
}
.brand__badge {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--white);
transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out);
}
.brand__badge img { width: 88%; height: auto; }
.is-scrolled .brand__badge { width: 44px; height: 44px; }
.site-nav,
.site-header__cta { display: none; }
.menu-toggle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: rgb(250 247 241 / 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
cursor: pointer;
transition: background-color 0.35s var(--ease-out);
}
.menu-toggle svg { width: 24px; height: 24px; }
.is-scrolled .menu-toggle { background-color: transparent; }
.site-nav {
position: relative;
padding: 4px 8px;
border-radius: 999px;
background-color: rgb(250 247 241 / 0.72);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: background-color 0.35s var(--ease-out);
}
.is-scrolled .site-nav {
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-nav__list { display: flex; gap: 2px; }
.site-nav__link {
display: block;
padding: 8px 16px 12px;
border-radius: 999px;
font-size: 1rem;
line-height: 1.5;
text-decoration: none;
}
.site-nav__link span { display: inline-block; }
.site-nav__underline {
position: absolute;
left: 0;
bottom: 10px;
width: 0;
height: var(--frame-line);
background: var(--gold);
pointer-events: none;
transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
}
@media (min-width: 1024px) {
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.brand { justify-self: start; }
.site-nav { display: block; }
.site-header__cta {
display: inline-flex;
justify-self: end;
}
.menu-toggle { display: none; }
.brand__badge { width: 68px; height: 68px; }
.is-scrolled .brand__badge { width: 48px; height: 48px; }
}
html.menu-open { overflow: hidden; }
.menu-sheet {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--cream);
color: var(--charcoal);
}
.menu-sheet::backdrop { background: transparent; }
.menu-sheet__inner {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
padding: 12px calc(var(--gutter) + 16px) calc(40px + env(safe-area-inset-bottom));
}
.menu-sheet__top {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
margin-top: 12px;
}
.menu-sheet__top img { width: 44px; height: auto; }
.menu-sheet__close {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.menu-sheet__close svg { width: 24px; height: 24px; }
.menu-sheet__nav { margin-top: 40px; }
.menu-sheet__nav a {
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--stone);
font-size: 1.625rem;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
}
.menu-sheet .btn { margin-top: auto; }
.menu-sheet[open] .menu-sheet__nav li,
.menu-sheet[open] .btn {
animation: fade-rise 0.45s var(--ease-out) both;
animation-delay: calc(var(--i, 0) * 60ms + 60ms);
}
.hero {
position: relative;
display: flex;
flex-direction: column;
background: var(--cream);
}
.hero__media {
position: relative;
order: -1;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--stone);
isolation: isolate;
}
.hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 58% 30%;
}
.hero__photo--main { object-position: 50% 28%; }
@media (min-width: 600px) and (max-width: 1023.98px) {
.hero__photo--main { object-position: 78% 35%; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 2/1) {
.hero__photo--main { object-position: 78% 35%; }
}
.hero__photo--dept {
opacity: 0;
transition: opacity 400ms var(--ease-out);
}
.hero__photo--dept.is-visible { opacity: 1; }
.hero__light {
position: absolute;
left: 0;
top: 0;
width: 80%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(211 166 111 / 0.15), rgb(211 166 111 / 0));
mix-blend-mode: screen;
pointer-events: none;
transform: translate(-15%, -20%);
will-change: transform;
}
.hero__veil {
position: absolute;
inset: 0;
background: var(--cream);
opacity: 0;
pointer-events: none;
}
.hero__text { padding: 40px var(--gutter) 64px; }
.hero__text-inner { max-width: 36rem; }
.hero__label {
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.6;
color: var(--olive-text);
}
.hero__label [lang="en"] { letter-spacing: 0.2em; }
.hero__title {
margin-top: 12px;
font-size: var(--fs-h1);
font-weight: 600;
line-height: 1.35;
text-wrap: balance;
}
.hero .rule { margin-block: 28px 24px; }
.hero__sub { margin-top: 2px; }
.hero__actions {
display: grid;
gap: 12px;
margin-top: 36px;
}
@media (min-width: 600px) {
.hero__media { aspect-ratio: 4 / 3; }
.hero__actions {
display: flex;
flex-wrap: wrap;
}
}
@media (min-width: 1024px) {
.hero {
display: grid;
grid-template-columns: 45fr 55fr;
min-height: 100vh;
min-height: 100svh;
}
.hero__media {
order: 0;
aspect-ratio: auto;
min-height: 100%;
}
.hero__text {
display: flex;
align-items: center;
padding-block: calc(var(--header-h) + 24px) 72px;
padding-inline: clamp(40px, 9vw - 40px, 116px) clamp(32px, 3.5vw, 64px);
}
.hero .rule { margin-block: 32px 28px; }
.hero__actions { margin-top: 44px; }
}
.services {
position: relative;
isolation: isolate;
padding-block: 72px 64px;
background: var(--white);
}
.services::before {
content: "";
position: absolute;
inset: 50% 0 0;
z-index: -1;
background: rgb(216 216 201 / 0.32);
}
.services .section-head { margin-bottom: 20px; }
.stories-bars {
display: flex;
gap: 6px;
padding-inline: var(--gutter);
margin-bottom: 8px;
}
.stories-bars__bar {
position: relative;
flex: 1;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.stories-bars__bar::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 11px;
height: 2px;
border-radius: 2px;
background: var(--gold);
opacity: 0.3;
transition: opacity 0.3s var(--ease-out);
}
.stories-bars__bar.is-seen::before,
.stories-bars__bar[aria-current="true"]::before { opacity: 1; }
.container--doors { padding-inline: 0; }
.doors {
display: flex;
gap: 12px;
padding-inline: var(--gutter);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.doors::-webkit-scrollbar { display: none; }
@media (max-width: 1023.98px) {
.services.is-hscroll {
height: calc(100svh - var(--header-h-compact) + var(--hs-travel, 0px));
padding-block: 0;
}
.services.is-hscroll .services__sticky {
position: sticky;
top: var(--header-h-compact);
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100svh - var(--header-h-compact));
padding-block: 24px 16px;
isolation: isolate;
}
.services.is-hscroll .section-head { margin-bottom: 14px; }
.services.is-hscroll .doors {
flex: 1 1 auto;
min-height: 0;
max-height: 560px;
overflow-x: hidden;
scroll-snap-type: none;
}
.services.is-hscroll .door { aspect-ratio: auto; height: 100%; }
.services.is-hscroll .services__helper { margin-top: 12px; }
}
@media (max-width: 767.98px) {
.services.is-hscroll .services__sticky {
padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
}
@media (max-width: 1023.98px) and (max-height: 720px) {
.services.is-hscroll .section-sub { display: none; }
}
.door {
--frame-inset: 16px;
position: relative;
flex: 0 0 78vw;
aspect-ratio: 9 / 16;
overflow: hidden;
scroll-snap-align: start;
background: var(--stone);
color: var(--white);
}
@media (min-width: 600px) {
.door { flex-basis: 42vw; }
}
.door__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
}
.door__scrim {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 75%;
background: linear-gradient(to top, rgb(63 59 54 / 0.78), rgb(63 59 54 / 0.72) 48%, rgb(63 59 54 / 0));
pointer-events: none;
}
.door__wash {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40%;
background: var(--tint);
opacity: 0.12;
-webkit-mask-image: linear-gradient(to top, #000 70%, transparent);
mask-image: linear-gradient(to top, #000 70%, transparent);
pointer-events: none;
}
.door__toggle { display: none; }
.door__content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 0 32px 36px;
}
.door__name {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.3;
}
.door__line {
margin-top: 6px;
font-size: 1rem;
line-height: 1.7;
}
.door__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 48px;
margin-top: 20px;
padding: 0 1.25rem;
border: 1px solid color-mix(in srgb, var(--white) 50%, var(--tint));
border-radius: 999px;
color: var(--white);
font: 600 1rem/1.2 var(--font);
text-decoration: none;
transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.door__btn:hover {
background-color: var(--white);
color: var(--charcoal);
}
.door__btn:focus-visible { outline-color: var(--white); }
.services__helper {
margin-top: 32px;
padding-inline: var(--gutter);
font-size: 1rem;
text-align: center;
}
@media (min-width: 1024px) {
.services { padding-block: 120px 104px; }
.services .section-head { margin-bottom: 56px; }
.stories-bars { display: none; }
.container--doors { padding-inline: var(--gutter); }
.doors {
height: 560px;
padding-inline: 0;
overflow: visible;
scroll-snap-type: none;
}
.door {
flex: 1 1 0;
min-width: 0;
aspect-ratio: auto;
cursor: pointer;
transition: flex-grow var(--door-open) var(--ease-out);
}
.door.is-open {
flex-grow: 4;
cursor: auto;
}
.door__toggle {
display: block;
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--white);
cursor: inherit;
}
.door__toggle:focus-visible {
outline: 2px solid var(--white);
outline-offset: -6px;
}
.door:has(.door__toggle:focus-visible) {
outline: 2px solid var(--charcoal);
outline-offset: 3px;
}
.door:has(.door__toggle:focus-visible) .door__toggle { outline: none; }
.door__vname {
position: absolute;
bottom: 48px;
left: 50%;
translate: -50% 0;
writing-mode: vertical-rl;
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
transition: opacity 0.3s var(--ease-out) 0.25s;
}
.door.is-open .door__vname {
opacity: 0;
transition-delay: 0s;
}
.door__content {
left: auto;
width: calc(clamp(18rem, 30vw, 28rem) + 96px);
padding: 0 48px 48px;
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.door.is-open .door__content {
opacity: 1;
transform: none;
pointer-events: auto;
transition:
opacity 0.45s var(--ease-out) calc(var(--door-open) + 200ms),
transform 0.45s var(--ease-out) calc(var(--door-open) + 200ms);
}
.door__name { font-size: 2.25rem; }
.door__line { font-size: 1.125rem; }
.door__btn {
display: inline-flex;
margin-top: 24px;
padding: 0 1.5rem;
}
.services__helper { margin-top: 48px; }
.services {
height: 320vh;
padding-block: 0;
}
.services::before { content: none; }
.services__sticky {
position: sticky;
top: var(--header-h-compact);
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--header-h-compact));
padding-block: 40px;
isolation: isolate;
}
.services__sticky::before {
content: "";
position: absolute;
inset: 50% 0 0;
z-index: -1;
background: rgb(216 216 201 / 0.32);
}
.services .section-head { margin-bottom: 40px; }
.doors { height: min(560px, calc(100vh - 330px)); min-height: 400px; }
.services__helper { margin-top: 32px; }
}
.chips {
display: flex;
gap: 8px;
}
.chip {
flex: none;
min-height: 44px;
padding: 0 1.125rem;
border: 1.5px solid transparent;
border-radius: 999px;
background-color: var(--stone);
color: var(--charcoal);
font: 400 1rem/1.2 var(--font);
white-space: nowrap;
cursor: pointer;
transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.chip:hover { border-color: var(--charcoal); }
.chip[aria-checked="true"],
.chip[aria-pressed="true"] {
border-color: var(--gold);
background-color: var(--lemon);
font-weight: 600;
}
.text-link {
min-height: 44px;
padding: 0 4px;
border: 0;
background: none;
color: var(--charcoal);
font: 600 1rem/1.2 var(--font);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgb(211 166 111 / 0.75);
text-underline-offset: 0.5em;
cursor: pointer;
}
.text-link:hover {
text-decoration-color: var(--gold);
text-decoration-thickness: 2px;
}
.try {
padding-block: 72px 80px;
background: var(--cream);
}
.try__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "stage" "chips" "lead" "how" "actions";
}
.try__head { grid-area: head; margin-bottom: 40px; }
.try__stage { grid-area: stage; }
.try__lead { grid-area: lead; margin-top: 24px; }
.try__how { grid-area: how; margin-top: 20px; }
.try__chips {
grid-area: chips;
margin: 28px calc(-1 * var(--gutter)) 0;
padding-inline: var(--gutter);
overflow-x: auto;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.try__chips::-webkit-scrollbar { display: none; }
.try__actions {
grid-area: actions;
display: grid;
justify-items: center;
gap: 8px;
margin-top: 28px;
}
.try__actions .btn { width: 100%; }
.try__how summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
border-block: 1px solid var(--stone);
font-weight: 600;
list-style: none;
cursor: pointer;
}
.try__how summary::-webkit-details-marker { display: none; }
.try__how summary::after {
content: "";
width: 14px;
height: 14px;
background:
linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
transition: transform 0.3s var(--ease-out);
}
.try__how[open] summary::after { transform: rotate(45deg); }
.try__steps {
margin: 0;
padding: 0;
list-style: none;
}
.try__steps li {
display: flex;
align-items: center;
gap: 16px;
padding-block: 14px;
border-bottom: 1px solid var(--stone);
}
.try__num {
flex: none;
width: 1.4em;
font-size: 1.75rem;
font-weight: 600;
line-height: 1;
color: var(--gold);
}
.try__stage {
display: flex;
flex-direction: column;
align-items: center;
}
.mirror {
position: relative;
width: 100%;
max-width: 500px;
padding: 12px;
border: var(--frame-line) solid var(--gold);
border-radius: 999px 999px 44px 44px;
box-shadow: 0 0 96px 24px rgb(211 166 111 / 0.2);
}
.mirror__glass {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 999px 999px 32px 32px;
background: var(--stone);
isolation: isolate;
}
.mirror__split,
.mirror__steps {
position: absolute;
inset: 0;
transition: opacity 0.25s var(--ease-out);
}
.mirror__split.is-swapping,
.mirror__steps.is-swapping { opacity: 0; }
.mirror__split {
touch-action: pan-y;
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
}
.mirror__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.mirror__now {
position: absolute;
inset: 0;
clip-path: inset(0 0 0 var(--split, 50%));
}
.mirror__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--split, 50%);
width: var(--frame-line);
margin-left: calc(var(--frame-line) / -2);
background: var(--white);
pointer-events: none;
}
.mirror__handle {
position: absolute;
top: 56%;
left: var(--split, 50%);
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: -22px 0 0 -22px;
border-radius: 50%;
cursor: ew-resize;
touch-action: none;
}
.mirror__handle:focus-visible {
outline: 2px solid var(--white);
outline-offset: 0;
}
.mirror__knob {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--lemon);
color: var(--charcoal);
font-size: 1.25rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
direction: ltr;
unicode-bidi: isolate;
}
.mirror__tag,
.mirror__pill {
position: absolute;
z-index: 3;
padding: 3px 12px;
border-radius: 999px;
background: rgb(250 247 241 / 0.9);
color: var(--charcoal);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
pointer-events: none;
}
.mirror__tag { bottom: 20px; }
.mirror__tag--now { right: 22px; }
.mirror__tag--visual { left: 22px; }
.mirror__pill {
top: 13%;
left: 50%;
translate: -50% 0;
}
.mirror.is-user-photo.is-placeholder .mirror__img--visual { filter: brightness(1.05) saturate(1.06); }
.mirror__steps { cursor: pointer; }
.mirror__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s var(--ease-out);
}
.mirror__slide.is-active { opacity: 1; }
.mirror__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mirror__steps::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 42%;
background: linear-gradient(to top, rgb(63 59 54 / 0.78), rgb(63 59 54 / 0.6) 45%, rgb(63 59 54 / 0));
pointer-events: none;
}
.mirror__steps-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: grid;
justify-items: center;
gap: 6px;
padding: 0 64px 18px;
color: var(--white);
}
.mirror__caption {
min-height: 1.7em;
font-size: 1rem;
font-weight: 600;
line-height: 1.7;
text-align: center;
}
.mirror__dots { display: flex; gap: 2px; }
.mirror__dot {
position: relative;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.mirror__dot::before {
content: "";
position: absolute;
inset: 9px;
border-radius: 50%;
background: rgb(255 255 255 / 0.55);
transition: background-color 0.3s var(--ease-out), inset 0.3s var(--ease-out);
}
.mirror__dot[aria-current="step"]::before {
inset: 7px;
background: var(--white);
}
.mirror__dot:focus-visible,
.mirror__pause:focus-visible { outline-color: var(--white); outline-offset: 0; }
.mirror__pause {
position: absolute;
left: 18px;
bottom: 18px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgb(255 255 255 / 0.7);
border-radius: 50%;
background: none;
color: var(--white);
cursor: pointer;
}
.mirror__pause svg { width: 18px; height: 18px; }
.mirror__note {
max-width: 30rem;
margin-top: 28px;
font-size: var(--fs-small);
line-height: 1.7;
color: var(--olive-text);
text-align: center;
text-wrap: balance;
}
.mirror__clear {
margin-top: 8px;
min-height: 44px;
padding: 0 4px;
border: 0;
background: none;
color: var(--charcoal);
font: 600 0.9375rem/1.2 var(--font);
text-decoration: underline;
text-underline-offset: 0.4em;
cursor: pointer;
}
@media (min-width: 600px) {
.try__chips {
flex-wrap: wrap;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
}
}
@media (min-width: 1024px) {
.try { padding-block: 128px; }
.try__grid {
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
grid-template-rows: 1fr repeat(5, auto) 1fr;
grid-template-areas:
".       stage"
"head    stage"
"lead    stage"
"chips   stage"
"how     stage"
"actions stage"
".       stage";
column-gap: clamp(48px, 6vw, 104px);
}
.try__head { margin-bottom: 0; }
.try__lead { margin-top: 20px; }
.try__chips { margin-top: 32px; }
.try__how { margin-top: 32px; }
.try__how summary { display: none; }
.try__steps { border-top: 1px solid var(--stone); }
.try__actions {
display: flex;
align-items: center;
gap: 28px;
margin-top: 36px;
}
.try__actions .btn { width: auto; }
}
.why {
padding-block: 96px;
background: linear-gradient(to bottom, var(--white) 55%, var(--cream));
}
.why__statement {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.why__title {
max-width: 14ch;
margin-top: 12px;
font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);
font-weight: 600;
line-height: 1.3;
text-wrap: balance;
}
.why__brandline {
margin-top: 24px;
font-size: 1.25rem;
color: var(--olive-text);
}
.why__text {
max-width: 36rem;
margin-top: 12px;
}
.journey {
position: relative;
margin-top: 72px;
}
.journey__line {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.journey__line path {
fill: none;
stroke: var(--gold);
stroke-width: var(--frame-line);
stroke-linecap: round;
}
.journey__stops {
display: grid;
gap: 56px;
margin: 0;
padding: 24px 0 0;
padding-inline-start: 40px;
list-style: none;
}
.stop { position: relative; }
.stop__ring {
position: absolute;
top: 12px;
inset-inline-start: -28px;
width: 14px;
height: 14px;
margin-top: -7px;
margin-inline-start: -7px;
border: var(--frame-line) solid var(--gold);
border-radius: 50%;
background: var(--white);
transition: background-color 0.4s var(--ease-out);
}
.stop.is-reached .stop__ring { background: var(--gold); }
.stop__media {
--frame-inset: 12px;
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--stone);
}
.stop__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stop__num {
margin-top: 18px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--olive-text);
}
.stop__title {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4;
}
.stop__line { margin-top: 4px; }
.why__note {
margin-top: 56px;
font-size: 0.8125rem;
color: var(--olive-text);
text-align: center;
}
.reveal-ready .stop:not(.is-reached) :is(.stop__media, .stop__num, .stop__title, .stop__line) {
opacity: 0;
transform: translateY(16px);
}
.stop :is(.stop__media, .stop__num, .stop__title, .stop__line) {
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.stop .stop__num { transition-delay: 80ms; }
.stop .stop__title { transition-delay: 140ms; }
.stop .stop__line { transition-delay: 200ms; }
@media (min-width: 1024px) {
.why { padding-block: 160px; }
.journey { margin-top: 120px; }
.journey__stops {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
padding: 56px 0 0;
}
.stop__ring {
top: -32px;
inset-inline-start: 12px;
}
.stop__media { aspect-ratio: 4 / 5; }
}
.reveal-ready [data-reveal]:not(.is-in) {
opacity: 0;
transform: translateY(16px);
}
[data-reveal] {
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms);
}
.booking {
padding-block: 80px;
background: radial-gradient(ellipse at 50% 45%, var(--champagne) 55%, var(--cream) 100%);
}
.booking__head {
max-width: 40rem;
margin: 0 auto 40px;
text-align: center;
}
.booking__sub { margin-top: 12px; }
.booking__grid {
display: grid;
gap: 48px;
align-items: center;
}
.appt {
--frame-inset: 12px;
position: relative;
border-radius: 32px;
background: var(--white);
}
.appt__progress {
position: absolute;
top: calc(var(--frame-inset) - 1px);
right: calc(var(--frame-inset) + 20px);
left: calc(var(--frame-inset) + 20px);
height: 3px;
pointer-events: none;
}
.appt__progress span {
display: block;
width: calc(var(--step, 1) / 3 * 100%);
height: 100%;
margin-inline-start: 0;
border-radius: 3px;
background: var(--gold);
transition: width 0.4s var(--ease-out);
}
.appt__seal {
position: absolute;
top: -14px;
left: -14px;
width: 64px;
height: 64px;
padding: 4px;
border-radius: 50%;
background: var(--white);
}
.appt__form,
.appt__done { padding: 40px 28px 32px; }
.appt__count {
font-size: var(--fs-small);
font-weight: 600;
color: var(--olive-text);
}
.appt__step {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.appt__step.is-entering { animation: step-in 0.3s var(--ease-out) both; }
.appt__step.is-entering-back { animation: step-in-back 0.3s var(--ease-out) both; }
@keyframes step-in {
from { opacity: 0; transform: translateX(-32px); }
to { opacity: 1; transform: none; }
}
@keyframes step-in-back {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: none; }
}
.appt__legend {
float: right;
width: 100%;
margin: 4px 0 20px;
padding: 0;
font-size: 1.75rem;
font-weight: 600;
line-height: 1.4;
}
.appt__legend:focus { outline: none; }
.appt__legend + * { clear: both; }
.appt__sublabel {
margin: 20px 0 10px;
font-size: 1rem;
font-weight: 600;
}
.chips--wrap { flex-wrap: wrap; }
.chips--scroll {
margin-inline: -28px;
padding-inline: 28px;
overflow-x: auto;
scrollbar-width: none;
}
.chips--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 600px) {
.chips--scroll,
.chips--scroll:is(*) {
flex-wrap: wrap;
margin-inline: 0 !important;
padding-inline: 0 !important;
overflow: visible;
}
}
.chip--lg {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 0 1.25rem;
font-size: 1.0625rem;
}
.chip__dot {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--dot, var(--charcoal));
box-shadow: inset 0 0 0 1px rgb(63 59 54 / 0.15);
}
.chips--sm .chip {
min-height: 40px;
font-size: 0.9375rem;
}
.appt__hint {
margin-top: 16px;
font-size: var(--fs-small);
color: var(--olive-text);
}
.field { margin-bottom: 18px; }
.field label {
display: block;
margin-bottom: 6px;
font-size: 1rem;
font-weight: 600;
}
.field__opt {
font-weight: 400;
color: var(--olive-text);
}
.field input,
.field textarea {
display: block;
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 1.5px solid transparent;
border-radius: 16px;
background: rgb(216 216 201 / 0.55);
color: var(--charcoal);
font: 400 1.0625rem/1.6 var(--font);
resize: vertical;
}
.field input[dir="ltr"] { text-align: left; }
.field input:focus-visible,
.field textarea:focus-visible {
outline: none;
border-color: var(--gold);
background: var(--white);
box-shadow: 0 0 0 3px rgb(211 166 111 / 0.35);
}
.field input[aria-invalid="true"] { border-color: var(--mauve); }
.field__hint {
margin-top: 6px;
font-size: var(--fs-small);
color: var(--olive-text);
}
.field__error {
font-size: var(--fs-small);
font-weight: 600;
color: var(--mauve-text);
}
.field__error:not(:empty) { margin-top: 8px; }
.appt__step .check { margin-top: 4px; }
.appt__submit {
width: 100%;
margin-top: 24px;
}
.appt__note {
margin-top: 12px;
font-size: var(--fs-small);
color: var(--olive-text);
text-align: center;
}
.appt__nav {
display: flex;
justify-content: space-between;
margin-top: 28px;
}
.appt__next { margin-inline-start: auto; }
.appt__preview {
margin-top: 20px;
border-radius: 24px;
background: var(--cream);
}
.appt__preview summary {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
font-size: 0.9375rem;
font-weight: 600;
list-style: none;
cursor: pointer;
}
.appt__preview summary::-webkit-details-marker { display: none; }
.appt__preview .bubble { margin: 0 16px 16px; }
.appt__done {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
min-height: 460px;
justify-content: center;
text-align: center;
}
.appt__done:focus { outline: none; }
.appt__done-seal {
width: 120px;
height: 120px;
animation: seal-in 0.5s var(--ease-out) both;
}
@keyframes seal-in {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: none; }
}
.appt__done-title {
font-size: 2rem;
font-weight: 600;
}
.status-pill {
padding: 4px 16px;
border: 1.5px solid var(--gold);
border-radius: 999px;
font-size: var(--fs-small);
font-weight: 600;
}
.appt__done .btn { margin-top: 10px; }
.phone-wrap { display: none; }
.bubble {
padding: 12px 16px;
border-radius: 20px 20px 20px 6px;
background: color-mix(in srgb, var(--sage) 40%, var(--white));
font-size: 0.9375rem;
line-height: 1.95;
overflow-wrap: anywhere;
}
.bubble__ph {
padding-inline: 2px;
border-bottom: 1.5px dashed rgb(63 59 54 / 0.3);
color: rgb(63 59 54 / 0.45);
}
@media (min-width: 1024px) {
.booking { padding-block: 128px; }
.booking__head { margin-bottom: 64px; }
.booking__grid {
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
gap: clamp(48px, 6vw, 96px);
}
.appt__form,
.appt__done { padding: 56px 48px 44px; }
.chips--scroll {
margin-inline: -48px;
padding-inline: 48px;
}
.appt__preview { display: none; }
.phone-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
justify-self: center;
width: min(100%, 330px);
}
.phone {
width: 100%;
padding: 10px;
border: 1.5px solid rgb(211 166 111 / 0.55);
border-radius: 52px;
background: var(--cream);
}
.phone__screen {
display: flex;
flex-direction: column;
aspect-ratio: 9 / 17.5;
overflow: hidden;
border-radius: 42px;
background: color-mix(in srgb, var(--stone) 28%, var(--white));
}
.phone__top {
display: flex;
align-items: center;
gap: 12px;
padding: 34px 20px 14px;
border-bottom: 1px solid rgb(216 216 201 / 0.7);
background: var(--white);
}
.phone__top img {
flex: none;
width: 40px;
height: 40px;
}
.phone__who {
display: grid;
line-height: 1.4;
}
.phone__who strong { font-size: 0.9375rem; font-weight: 600; }
.phone__who small { font-size: 0.75rem; color: var(--olive-text); }
.phone__chat {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-end;
gap: 14px;
padding: 16px 14px;
}
.phone__date {
align-self: center;
margin-bottom: auto;
padding: 2px 12px;
border-radius: 999px;
background: rgb(255 255 255 / 0.8);
font-size: 0.75rem;
color: var(--olive-text);
}
.msg {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
max-width: 90%;
margin-inline-start: auto;
}
.msg__time {
padding-inline: 6px;
font-size: 0.6875rem;
color: var(--olive-text);
}
.phone__bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 22px;
}
.phone__input {
flex: 1;
padding: 8px 16px;
border-radius: 999px;
background: var(--white);
font-size: 0.8125rem;
color: rgb(63 59 54 / 0.45);
}
.phone__send {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--gold);
color: var(--charcoal);
}
.phone__send .icon { width: 18px; height: 18px; }
.phone-wrap__caption {
font-size: var(--fs-small);
color: var(--olive-text);
text-align: center;
}
}
.faq {
padding-block: 72px 80px;
background: #F8F6F0;
}
.faq__grid {
display: grid;
gap: 56px;
}
.helper {
--frame-inset: 12px;
position: relative;
padding: 36px 28px 28px;
border-radius: 32px;
background: var(--white);
}
.helper__title {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4;
}
.helper__question {
margin: 6px 0 18px;
color: var(--olive-text);
}
.helper__answer:not(:empty) {
margin-top: 20px;
padding: 20px;
border-radius: 20px;
background: color-mix(in srgb, var(--tint, var(--stone)) var(--tint-mix, 30%), var(--white));
animation: fade-rise 0.4s var(--ease-out) both;
}
.helper__answer p { font-weight: 600; line-height: 1.7; }
.helper__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
margin-top: 14px;
}
.helper__actions .btn { min-height: 46px; }
.helper__actions .quiet-link { white-space: nowrap; font-weight: 600; }
.helper__foot {
margin-top: 20px;
font-size: var(--fs-small);
color: var(--olive-text);
}
.faq__title { margin: 0 0 20px; }
.qa { border-bottom: 1px solid var(--stone); }
.accordion { border-top: 1px solid var(--stone); }
.qa summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 64px;
padding-block: 14px;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
list-style: none;
cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
content: "";
flex: none;
width: 16px;
height: 16px;
background:
linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
transition: transform 0.3s var(--ease-out);
}
.qa[open] summary::after,
.qa.is-opening summary::after { transform: rotate(45deg); }
.qa.is-closing summary::after { transform: none; }
.qa__a { overflow: hidden; }
.qa__a p { padding-bottom: 20px; }
.faq__all {
display: inline-block;
margin-top: 24px;
font-weight: 600;
}
.faq__media { display: none; }
@media (min-width: 1024px) {
.faq { padding-block: 128px; }
.faq__grid {
grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
.helper { padding: 48px 40px 36px; }
.helper__title { font-size: 1.625rem; }
}
@media (min-width: 1440px) {
.faq__grid { grid-template-columns: minmax(0, 36fr) minmax(0, 40fr) minmax(0, 24fr); }
.faq__media {
--frame-inset: 12px;
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--stone);
}
.faq__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.final {
--frame-inset: 16px;
position: relative;
display: flex;
align-items: flex-end;
min-height: 80vh;
min-height: 80svh;
overflow: hidden;
background: var(--champagne);
isolation: isolate;
}
.final__photo {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 22% 40%;
}
.final__wash {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgb(250 247 241 / 0.94) 0%, rgb(250 247 241 / 0.85) 38%, rgb(250 247 241 / 0) 70%);
}
.final__frame { z-index: 0; }
.final__inner {
position: relative;
z-index: 1;
padding-block: 96px 56px;
}
.final__text { max-width: 30rem; }
.final__title {
font-size: var(--fs-h1);
font-weight: 600;
line-height: 1.3;
}
.final__line { margin-top: 12px; }
.final__cta {
position: relative;
display: inline-block;
margin-top: 32px;
}
.final__ring {
position: absolute;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
overflow: visible;
pointer-events: none;
transform: scaleX(-1);
}
.final__ring rect {
fill: none;
stroke: var(--gold);
stroke-width: var(--frame-line);
}
@media (min-width: 1024px) {
.final {
--frame-inset: 24px;
align-items: center;
}
.final__wash {
background: linear-gradient(to left, rgb(250 247 241 / 0.92) 0%, rgb(250 247 241 / 0.82) 34%, rgb(250 247 241 / 0) 62%);
}
.final__inner { padding-block: 120px; }
}
.footer {
padding-block: 64px 24px;
background: var(--sage);
color: var(--charcoal);
}
.footer__grid {
display: grid;
gap: 40px;
}
.footer__brand {
position: relative;
width: min(100%, 240px);
}
.footer__photo {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 24px;
background: var(--stone);
}
.footer__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.footer__photo::after {
content: "";
position: absolute;
inset: 12px;
border: var(--frame-line) solid var(--white);
border-radius: 14px;
pointer-events: none;
}
.footer__seal {
position: absolute;
top: -22px;
right: -22px;
width: 88px;
height: auto;
padding: 8px;
border-radius: 50%;
background: var(--sage);
}
@media (max-width: 599.98px) {
.footer__brand { width: 180px; margin-top: 20px; }
.footer__seal { width: 72px; }
}
.footer__h {
margin-bottom: 14px;
font-size: 1.125rem;
font-weight: 600;
}
.footer__col ul { display: grid; gap: 6px; }
.footer a {
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.4em;
transition: text-decoration-color 0.3s var(--ease-out);
}
.footer a:hover { text-decoration-color: currentColor; }
.footer__hours div {
display: flex;
justify-content: space-between;
gap: 16px;
padding-block: 4px;
}
.footer__hours dt,
.footer__hours dd { margin: 0; white-space: nowrap; }
.footer__bottom li { white-space: nowrap; }
.footer__map {
position: relative;
margin-top: 20px;
aspect-ratio: 16 / 10;
overflow: hidden;
border: var(--frame-line) solid var(--white);
border-radius: 24px;
}
.footer__map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 24px;
margin-top: 48px;
padding-top: 20px;
border-top: 1px solid rgb(255 255 255 / 0.4);
font-size: var(--fs-small);
}
.footer__bottom ul {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.footer :focus-visible { outline-color: var(--charcoal); }
@media (min-width: 1024px) {
.footer { padding-block: 88px 28px; }
.footer__grid {
grid-template-columns: 1fr 1fr 1.2fr 1.4fr;
gap: 48px;
}
}
.helper__intro .label { margin-bottom: 4px; }
.helper__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.helper__body {
display: grid;
gap: 20px;
}
.chips--list {
flex-direction: column;
gap: 8px;
}
.chips--list .chip {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 0 18px;
border-radius: 16px;
background: color-mix(in srgb, var(--stone) 45%, var(--white));
text-align: start;
white-space: nowrap;
}
.chips--list .chip[aria-checked="true"] { background: var(--white); }
.chips--list .chip::after {
content: "←";
margin-inline-start: auto;
opacity: 0.35;
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.chips--list .chip:hover::after { opacity: 0.8; transform: translateX(-3px); }
.chips--list .chip[aria-checked="true"]::after { opacity: 1; }
.chips--list .chip:not(:has(.chip__dot))::before {
content: "";
width: 10px;
height: 10px;
border: 1.5px solid var(--olive-text);
border-radius: 50%;
}
.helper__window {
display: grid;
align-content: start;
gap: 14px;
}
.helper__photo {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 24px;
background: var(--stone);
}
.helper__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s var(--ease-out);
}
.helper__photo img.is-on { opacity: 1; }
.helper__photo::after {
content: "";
position: absolute;
inset: 10px;
border: var(--frame-line) solid var(--white);
border-radius: 16px;
pointer-events: none;
}
.helper__answer:not(:empty) { margin-top: 0; }
.helper__hint { color: var(--olive-text); font-weight: 400 !important; }
.helper__answer:has(.helper__hint) { background: color-mix(in srgb, var(--stone) 25%, var(--white)); animation: none; }
.faq__list .label { margin-bottom: 2px; }
.qa summary {
justify-content: flex-start;
gap: 18px;
min-height: 76px;
}
.qa summary::after { margin-inline-start: auto; }
.qa__n {
flex: none;
width: 2.2ch;
font-size: 1.75rem;
font-weight: 600;
line-height: 1;
color: var(--gold);
}
.qa__a p {
padding-inline-start: calc(2.2ch * 1.555 + 18px);
padding-bottom: 24px;
color: var(--charcoal);
}
.qa[open] .qa__q { color: var(--charcoal); }
@media (min-width: 1024px) {
.faq__grid,
.faq .faq__grid {
grid-template-columns: minmax(0, 1fr);
gap: 96px;
}
.helper { padding: 56px 56px 40px; }
.helper__body {
grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
gap: clamp(28px, 3vw, 48px);
margin-top: 32px;
}
.helper__window {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 3vw, 40px);
}
.helper__photo { aspect-ratio: 3 / 3.6; border-radius: 999px 999px 24px 24px; }
.helper__photo::after { border-radius: 999px 999px 16px 16px; }
.faq__list {
display: grid;
grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
column-gap: clamp(28px, 3vw, 48px);
align-items: start;
}
.faq__list > .label,
.faq__list > .faq__title { grid-column: 1; }
.faq__list > .accordion {
grid-column: 2;
grid-row: 1 / span 3;
}
.faq__list > .faq__all { grid-column: 2; }
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.booking__head {
max-width: 34rem;
margin: 0 0 36px;
text-align: start;
}
.booking__head .section-title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.stepper {
position: relative;
display: flex;
justify-content: space-between;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.stepper::before {
content: "";
position: absolute;
top: 18px;
right: 18px;
left: 18px;
height: 1px;
background: var(--stone);
}
.stepper__item { position: relative; z-index: 1; }
.stepper__item button {
display: grid;
justify-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
color: var(--olive-text);
font: 400 0.875rem/1.3 var(--font);
cursor: default;
}
.stepper__item:first-child button { justify-items: start; }
.stepper__item:last-child button { justify-items: end; }
.stepper__n {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1.5px solid var(--stone);
border-radius: 50%;
background: var(--white);
font-size: 1rem;
font-weight: 600;
transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.stepper__item.is-current button { color: var(--charcoal); font-weight: 600; }
.stepper__item.is-current .stepper__n { border-color: var(--gold); background: var(--lemon); color: var(--charcoal); }
.stepper__item.is-done .stepper__n { border-color: var(--gold); background: var(--gold); color: var(--charcoal); }
.stepper__item.is-done button { color: var(--charcoal); cursor: pointer; }
.stepper__item.is-done button:hover .stepper__t { text-decoration: underline; text-underline-offset: 0.4em; }
.stepper::after {
content: "";
position: absolute;
top: 18px;
right: 18px;
width: calc((100% - 36px) * (var(--step, 1) - 1) / 2);
height: 1.5px;
background: var(--gold);
transition: width 0.4s var(--ease-out);
}
.booking__aside { display: none; }
@media (max-width: 599.98px) {
.appt__seal { top: -12px; left: -8px; width: 46px; height: 46px; padding: 3px; }
.appt__form { padding-top: 48px; }
}
@media (min-width: 1024px) {
.booking__head { margin-bottom: 44px; }
.booking__grid {
grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
gap: clamp(48px, 6vw, 104px);
align-items: start;
}
.booking__aside {
position: relative;
display: block;
padding-bottom: 64px;
}
.doorway {
position: relative;
width: 82%;
margin-inline-start: auto;
aspect-ratio: 3 / 4.3;
overflow: hidden;
border-radius: 999px 999px 32px 32px;
background: var(--stone);
}
.doorway img {
width: 100%;
height: 100%;
object-fit: cover;
}
.doorway::after {
content: "";
position: absolute;
inset: 16px;
border: var(--frame-line) solid var(--white);
border-radius: 999px 999px 20px 20px;
pointer-events: none;
}
.doorway__note {
position: absolute;
top: 11%;
left: 44%;
translate: -50% 0;
z-index: 1;
width: max-content;
max-width: 80%;
padding: 6px 16px;
border-radius: 999px;
background: rgb(250 247 241 / 0.92);
font-size: 0.875rem;
font-weight: 600;
text-align: center;
}
.booking__aside .phone-wrap {
position: absolute;
right: 0;
bottom: 0;
width: min(62%, 270px);
}
.booking__aside .phone { border-color: var(--gold); }
.booking__aside .phone__screen { aspect-ratio: 9 / 16.5; }
.booking__aside .phone-wrap__caption { max-width: 14rem; }
}
.footer { padding-top: 24px; padding-bottom: 24px; }
@media (max-width: 767.98px) {
.footer { padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom)); }
}
.ft {
--frame-inset: 0px;
position: relative;
padding: 40px 24px 24px;
}
.ft__frame .frame__line { stroke: var(--white); }
.ft__top {
display: grid;
gap: 40px;
align-items: end;
}
.ft__eyebrow {
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.02em;
}
.ft__big {
margin-top: 10px;
font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem);
font-weight: 600;
line-height: 1.2;
}
.ft__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
margin-top: 28px;
}
.ft__insta {
font-weight: 600;
text-decoration-line: underline !important;
text-decoration-color: rgb(255 255 255 / 0.8) !important;
text-underline-offset: 0.5em;
}
.ft__arch {
position: relative;
width: min(220px, 60%);
aspect-ratio: 3 / 4.2;
margin: 40px auto 0;
}
.ft__arch > img:first-child {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 999px 999px 24px 24px;
}
.ft__arch::after {
content: "";
position: absolute;
inset: 10px;
border: var(--frame-line) solid var(--white);
border-radius: 999px 999px 16px 16px;
pointer-events: none;
}
.ft__seal {
position: absolute;
top: -26px;
left: 50%;
translate: -50% 0;
z-index: 1;
width: 84px;
height: auto;
padding: 8px;
border-radius: 50%;
background: var(--sage);
}
.ft__chapters {
display: grid;
margin-top: 56px;
border-top: 1px solid rgb(255 255 255 / 0.55);
}
.ft__chapter {
padding-block: 24px;
border-bottom: 1px solid rgb(255 255 255 / 0.55);
}
.ft__h {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
font-size: 1.125rem;
font-weight: 600;
}
.ft__h span {
font-size: 1.5rem;
line-height: 1;
color: var(--charcoal);
}
.ft__rooms a { white-space: nowrap; }
.ft__rooms {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ft__rooms a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 14px;
border: 1px solid rgb(255 255 255 / 0.75);
border-radius: 999px;
text-decoration: none !important;
transition: background-color 0.3s var(--ease-out);
}
.ft__rooms a:hover { background: rgb(255 255 255 / 0.45); }
.ft__rooms i {
width: 9px;
height: 9px;
border: 1px solid var(--white);
border-radius: 50%;
background: var(--dot);
}
.ft__list { display: grid; gap: 4px; }
.ft__map {
margin-top: 14px;
aspect-ratio: 16 / 9;
overflow: hidden;
border: var(--frame-line) solid var(--white);
border-radius: 24px;
}
.ft__map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.ft__hours div {
display: flex;
justify-content: space-between;
gap: 16px;
padding-block: 6px;
border-bottom: 1px dashed rgb(255 255 255 / 0.55);
}
.ft__hours dt,
.ft__hours dd { margin: 0; white-space: nowrap; }
.ft__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 24px;
margin-top: 24px;
font-size: var(--fs-small);
}
.ft__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ft__bottom li { white-space: nowrap; }
@media (min-width: 768px) {
.ft { padding: 64px 56px 28px; }
.ft__top {
grid-template-columns: minmax(0, 1fr) auto;
gap: 48px;
}
.ft__arch { width: 240px; margin: 0; }
.ft__chapters {
grid-template-columns: 1.3fr 1fr 1fr;
border-bottom: 1px solid rgb(255 255 255 / 0.55);
}
.ft__chapter {
padding: 32px 0;
padding-inline-end: 32px;
border-bottom: 0;
}
.ft__chapter + .ft__chapter {
padding-inline-start: 32px;
border-inline-start: 1px solid rgb(255 255 255 / 0.55);
}
.ft__chapter:last-child { padding-inline-end: 0; }
}
@media (min-width: 1024px) {
.ft { padding: 80px 72px 32px; }
.ft__arch { width: 280px; }
}
.ft__top { align-items: center; }
.ft__big { font-size: clamp(2.75rem, 1.4rem + 4.4vw, 5.5rem); line-height: 1.15; }
.ft__mapcard {
--frame-inset: 12px;
position: relative;
padding: 36px 28px 24px;
border-radius: 32px;
background: var(--cream);
}
.ft__mapcard .ft__seal {
top: -22px;
left: -14px;
translate: none;
width: 72px;
padding: 6px;
background: var(--white);
}
.syria {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.syria__outline {
fill: rgb(211 166 111 / 0.08);
stroke: var(--gold);
stroke-width: 2;
stroke-linejoin: round;
}
.syria__sea {
fill: var(--olive-text);
font: 400 12px var(--font);
letter-spacing: 0.02em;
}
.syria__halo { fill: rgb(211 166 111 / 0.18); }
.syria__ring {
fill: none;
stroke: var(--gold);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.syria__dot { fill: var(--charcoal); }
.ft__mapbox { position: relative; }
.ft__pinlabel {
position: absolute;
top: 73.3%;
left: calc(22% + 24px);
white-space: nowrap;
display: grid;
padding: 6px 14px;
border: 1px solid var(--gold);
border-radius: 14px;
background: var(--white);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
transform: translateY(-50%);
}
.ft__pinlabel small {
font-size: 0.75rem;
font-weight: 400;
color: var(--olive-text);
}
.ft__mapcap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px 16px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--stone);
font-size: var(--fs-small);
color: var(--olive-text);
}
.ft__mapcap a { color: var(--charcoal); font-weight: 600; }
.map-ready .syria__outline { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.map-ready .syria__pin,
.map-ready .ft__pinlabel { opacity: 0; }
.map-drawn .syria__outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1); }
.map-drawn .syria__pin,
.map-drawn .ft__pinlabel { opacity: 1; transition: opacity 0.5s var(--ease-out) 1.4s; }
@media (min-width: 768px) {
.ft__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ft__mapcard { padding: 44px 36px 28px; }
}
.ft__mapbox {
position: relative;
perspective: 1100px;
padding-block: 8px 24px;
}
.syria {
transform: rotateX(36deg) rotateZ(-6deg) scale(1.12);
transform-origin: 50% 55%;
margin-block: -12px -4px;
}
html,
body { overflow-x: clip; }
.syria__outline { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.syria__rim { fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 3; stroke-linejoin: round; transform: translate(-0.8px, -1px); }
.syria__river { fill: none; stroke: #8FA3A1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.map-ready .syria__shadow,
.map-ready .syria__river,
.map-ready .syria__rim { opacity: 0; }
.map-drawn .syria__shadow { opacity: 0.28; transition: opacity 0.8s var(--ease-out) 1.2s; }
.map-drawn .syria__river,
.map-drawn .syria__rim { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.5s; }
.syria__sides path { stroke-linejoin: round; }
.syria__anchor { fill: none; }
.syria__sea { font-size: 13px; }
.ft__pin {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ft__pin-head {
position: absolute;
left: -15px;
bottom: 10px;
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: var(--gold);
transform: rotate(-45deg);
}
.ft__pin-head::after {
content: "";
position: absolute;
inset: 9px;
border-radius: 50%;
background: var(--white);
}
.ft__pin-base {
position: absolute;
left: -14px;
top: -5px;
width: 28px;
height: 10px;
border: 1.5px solid var(--gold);
border-radius: 50%;
background: rgb(211 166 111 / 0.25);
}
.ft__mapbox .ft__pinlabel {
top: 0;
left: 0;
padding: 4px 12px;
font-size: 0.8125rem;
transform: translate(20px, -58px);
}
.map-ready .syria__sides,
.map-ready .syria__top { opacity: 0; }
.map-ready .ft__pin { opacity: 0; transform: translateY(-18px); }
.map-drawn .syria__sides,
.map-drawn .syria__top { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.2s; }
.map-drawn .ft__pin { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out) 1.7s, transform 0.5s var(--ease-out) 1.7s; }
.map-drawn .ft__pinlabel { transition-delay: 2s; }
.ft .ft__chapters {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
margin-top: 56px;
border: 0;
}
.ft__card {
position: relative;
overflow: hidden;
padding: 32px 28px 28px;
border-radius: 28px;
isolation: isolate;
}
.ft__num {
position: absolute;
top: -18px;
left: 18px;
z-index: -1;
font-size: 8rem;
font-weight: 600;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgb(211 166 111 / 0.7);
}
.ft__card .ft__h {
display: block;
margin-bottom: 18px;
font-size: 1.375rem;
}
.ft__card--rooms {
padding-top: 92px;
border-radius: 50% 50% 28px 28px / 96px 96px 28px 28px;
background: var(--cream);
text-align: center;
}
.ft__card--rooms .ft__num { left: 50%; translate: -50% 0; top: 14px; font-size: 5rem; }
.ft__num { direction: ltr; letter-spacing: -0.02em; }
.ft__palette { display: grid; gap: 2px; text-align: start; }
.ft__palette a {
display: flex;
align-items: center;
gap: 14px;
min-height: 48px;
padding-inline: 8px;
border-bottom: 1px solid var(--stone);
text-decoration: none !important;
transition: padding 0.3s var(--ease-out);
}
.ft__palette li:last-child a { border-bottom: 0; }
.ft__palette i {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--dot);
box-shadow: inset 0 0 0 1px rgb(63 59 54 / 0.12);
}
.ft__palette b {
margin-inline-start: auto;
font-weight: 400;
opacity: 0.4;
transition: opacity 0.3s var(--ease-out);
}
.ft__palette a:hover { padding-inline-start: 14px; }
.ft__palette a:hover b { opacity: 1; }
.ft__card--contact {
--frame-inset: 10px;
background: var(--white);
}
.ft__card--contact::after {
content: "";
position: absolute;
inset: 10px;
z-index: -1;
border: var(--frame-line) solid var(--gold);
border-radius: 20px;
pointer-events: none;
}
.ft__calling { display: grid; gap: 16px; }
.ft__calling dt {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--olive-text);
}
.ft__calling dd {
margin: 2px 0 0;
font-size: 1.0625rem;
}
.ft__calling a[href^="tel"] {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.ft__card--hours { background: var(--champagne); }
.ft__timetable div {
display: flex;
align-items: baseline;
gap: 12px;
padding-block: 12px;
border-bottom: 1px solid rgb(63 59 54 / 0.12);
}
.ft__timetable dt,
.ft__timetable dd { margin: 0; white-space: nowrap; }
.ft__timetable dt::after {
content: "";
display: inline-block;
width: 0;
}
.ft__timetable div::before {
content: "";
order: 1;
flex: 1;
border-bottom: 1.5px dotted rgb(63 59 54 / 0.35);
transform: translateY(-4px);
}
.ft__timetable dd { order: 2; font-weight: 600; }
.ft__note {
margin-top: 16px;
font-size: var(--fs-small);
color: var(--olive-text);
}
@media (min-width: 900px) {
.ft .ft__chapters {
grid-template-columns: 1fr 1.1fr 1fr;
align-items: stretch;
gap: 24px;
}
}
html.sheet-open { overflow: hidden; }
.sheet {
position: fixed;
inset: auto 0 0;
width: 100%;
max-width: 560px;
max-height: 90vh;
margin: 0 auto;
padding: 0;
border: 0;
border-radius: 32px 32px 0 0;
background: var(--cream);
color: var(--charcoal);
}
.sheet::backdrop { background: rgb(63 59 54 / 0.45); }
.sheet[open] { animation: fade-rise 0.45s var(--ease-out) both; }
.sheet__inner {
display: flex;
flex-direction: column;
gap: 20px;
padding: 14px 24px calc(28px + env(safe-area-inset-bottom));
}
.sheet__grip {
align-self: center;
width: 40px;
height: 4px;
border-radius: 4px;
background: var(--stone);
}
.sheet__title {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4;
}
.sheet__points { display: grid; }
.sheet__points li {
padding-block: 12px;
border-bottom: 1px solid var(--stone);
font-size: 1rem;
line-height: 1.75;
}
.sheet__points li:first-child { padding-top: 0; }
.sheet__points strong { display: block; font-weight: 600; }
.check {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 1rem;
line-height: 1.7;
cursor: pointer;
}
.check input {
flex: none;
width: 22px;
height: 22px;
margin: 3px 0 0;
accent-color: var(--charcoal);
}
.sheet__actions { display: grid; gap: 10px; }
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (min-width: 600px) {
.sheet {
bottom: 24px;
border-radius: 32px;
}
.sheet__inner { padding: 14px 32px 32px; }
.sheet__actions { grid-template-columns: 1fr 1fr; }
}
.mobile-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 12px;
min-height: calc(64px + env(safe-area-inset-bottom));
padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
border-top: 1px solid var(--gold);
background-color: rgb(250 247 241 / 0.92);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition:
opacity 0.45s var(--ease-out),
transform 0.45s var(--ease-out),
visibility 0s linear 0.45s;
}
.mobile-bar.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.mobile-bar__book { flex: 1; min-height: 48px; }
.mobile-bar__wa {
display: grid;
place-items: center;
flex: none;
width: 48px;
height: 48px;
border: 1px solid var(--charcoal);
border-radius: 50%;
text-decoration: none;
}
.mobile-bar__wa .icon { width: 22px; height: 22px; }
@media (max-width: 767.98px) {
.footer { padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
.mobile-bar { display: none; }
}
.intro-mark { display: none; }
html.intro .intro-mark {
position: fixed;
left: 0;
top: 0;
z-index: 60;
pointer-events: none;
transform-origin: 0 0;
}
.intro-mark svg {
width: 100%;
height: 100%;
overflow: visible;
}
.intro-mark path {
fill: var(--gold);
fill-opacity: 0;
stroke: var(--gold);
stroke-linejoin: round;
}
html.intro .reveal,
html.intro .brand__badge,
html.intro .site-nav,
html.intro .site-header__cta,
html.intro .menu-toggle,
html.intro .hero .frame,
html.intro .hero__light { opacity: 0; }
html.intro .hero__veil { opacity: 0.9; }
@keyframes fade-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
}
/* terra.css */
:root {
--cream: #F8F3EA;
--linen: #F3EBDF;
--sand: #EEE4D4;
--stone: #E3D9C8;
--olive-deep: #545A35;
--olive-ink: #4A4F2E;
--moss: #7E8459;
--em: #6B7144;
--clay: #9A5A3C;
--terracotta: #B5704F;
--charcoal: #3B3A33;
--olive-text: #5F6243;
--font-display: "Markazi Text", "Amiri", "Times New Roman", serif;
--fs-h1: clamp(2.9rem, 1.7rem + 4vw, 5.4rem);
--fs-h2: clamp(2.5rem, 1.7rem + 2.6vw, 3.9rem);
--shadow-soft: 0 1px 0 rgb(59 58 51 / 0.04), 0 22px 44px -30px rgb(84 90 53 / 0.45);
--blob: 58% 42% 52% 48% / 46% 54% 46% 54%;
}
body { background: var(--cream); color: var(--charcoal); }
:focus-visible { outline-color: var(--olive-deep); }
.hero__title,
.section-title,
.why__title,
.final__title,
.door__name,
.stop__title,
.helper__title,
.appt__legend,
.appt__done-title,
.ft__big,
.sheet__title,
.ft__card .ft__h,
.menu-sheet__nav a {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0;
}
.hero__title { line-height: 1.15; }
.section-title { line-height: 1.2; }
:is(h1, h2, h3, .ft__big) em {
font-style: normal;
color: var(--em);
}
.label,
.hero__label,
.ft__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--clay);
font-size: 0.875rem;
font-weight: 600;
}
.label::before,
.hero__label::before,
.ft__eyebrow::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--leaf-mask) center / contain no-repeat;
mask: var(--leaf-mask) center / contain no-repeat;
}
:root {
--leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10 11 5 20 4c0 9-5 15-15 15Z'/%3E%3Cpath d='M5 19 14 10'/%3E%3C/svg%3E");
}
.section-sub {
max-width: 34rem;
margin: 14px auto 0;
color: var(--olive-text);
}
.frame { display: none; }
.btn { font-size: 1rem; letter-spacing: 0; }
.btn--primary {
background-color: var(--olive-deep);
color: var(--cream);
}
.btn--primary:hover { background-color: #464B2B; }
.btn--secondary {
border-color: var(--olive-deep);
color: var(--olive-ink);
}
.btn--secondary:hover {
background-color: var(--olive-deep);
color: var(--cream);
}
.btn--light {
background-color: var(--cream);
color: var(--olive-ink);
}
.btn--light:hover { background-color: #FFFFFF; }
.quiet-link,
.text-link { text-decoration-color: rgb(126 132 89 / 0.6); }
.quiet-link:hover,
.quiet-link.is-active,
.text-link:hover { text-decoration-color: var(--olive-deep); }
.rule { width: 72px; background: var(--moss); }
.chip {
background-color: var(--sand);
color: var(--charcoal);
}
.chip:hover { border-color: var(--moss); }
.chip[aria-checked="true"],
.chip[aria-pressed="true"] {
border-color: var(--olive-deep);
background-color: var(--olive-deep);
color: var(--cream);
}
.chip[aria-checked="true"] .chip__dot { box-shadow: 0 0 0 1.5px var(--cream); }
.check input { accent-color: var(--olive-deep); }
.sprig {
position: absolute;
z-index: 0;
width: 110px;
height: 200px;
color: var(--moss);
opacity: 0.45;
pointer-events: none;
}
.wave {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
z-index: 3;
width: 100%;
height: clamp(34px, 6vw, 92px);
fill: var(--sand);
pointer-events: none;
}
.site-header.is-scrolled {
background-color: rgb(248 243 234 / 0.9);
border-bottom-color: rgb(126 132 89 / 0.2);
}
.brand__badge { background: #FFFDF9; box-shadow: 0 0 0 1px rgb(126 132 89 / 0.18); }
.site-nav {
background-color: rgb(248 243 234 / 0.82);
box-shadow: 0 0 0 1px rgb(126 132 89 / 0.16);
}
.site-nav__link { font-size: 0.95rem; color: var(--charcoal); }
.site-nav__link[aria-current] { color: var(--olive-ink); font-weight: 600; }
.site-nav__underline { background: var(--olive-deep); }
.menu-toggle { background-color: rgb(248 243 234 / 0.9); }
.menu-sheet { background: var(--cream); }
.menu-sheet__nav a { font-size: 2.1rem; border-bottom-color: var(--stone); }
.hero { overflow: hidden; }
.hero__media {
background: var(--sand);
border-radius: 0 0 50% 50% / 0 0 36px 36px;
}
.hero__text { position: relative; z-index: 1; padding-bottom: 96px; }
.hero__label [lang="en"] { color: var(--olive-text); }
.hero__services { color: var(--charcoal); }
.hero__sub { color: var(--olive-text); }
.hero__light { display: none; }
.hero__sprig { display: none; }
@media (min-width: 1024px) {
.hero__media {
border-radius: 0 220px 0 0 / 0 62% 0 0;
}
.hero__text { padding-block-end: 120px; }
.hero__text::before {
content: "";
position: absolute;
z-index: -1;
top: 18%;
inset-inline-start: 6%;
width: 78%;
aspect-ratio: 1.1;
border-radius: var(--blob);
background: radial-gradient(closest-side, rgb(238 228 212 / 0.85), rgb(238 228 212 / 0));
}
}
@media (min-width: 1200px) {
.hero__sprig {
display: block;
top: calc(var(--header-h) + 12px);
left: calc(55% + 12px);
width: 80px;
height: 146px;
transform: rotate(-168deg);
opacity: 0.5;
}
}
.services--cards {
background: var(--sand);
padding-block: 64px 72px;
}
.services--cards::before { content: none; }
.services--cards .section-head {
margin-bottom: 36px;
text-align: center;
}
.services__sprig {
top: 28px;
left: 4%;
transform: rotate(-18deg) scaleX(-1);
width: 84px;
height: 154px;
opacity: 0.4;
}
.stories-bars__bar::before { background: var(--olive-deep); opacity: 0.22; }
.services--cards .doors { padding-block: 34px 18px; }
.services--cards .door {
flex: 0 0 74vw;
aspect-ratio: auto;
display: flex;
flex-direction: column;
padding: 12px;
overflow: visible;
border-radius: 26px;
background: var(--linen);
color: var(--charcoal);
box-shadow: var(--shadow-soft);
transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), outline-color 0.45s var(--ease-out);
outline: 2px solid transparent;
outline-offset: 4px;
}
@media (min-width: 600px) {
.services--cards .door { flex-basis: 42vw; }
}
.services--cards .door__photo {
position: relative;
inset: auto;
flex: none;
height: auto;
aspect-ratio: 4 / 3.6;
border-radius: 18px;
}
.services--cards :is(.door__wash, .door__scrim, .door__toggle) { display: none !important; }
.door__icon { display: none; }
.services--cards .door__content {
position: relative;
left: auto;
right: auto;
bottom: auto;
z-index: 1;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
width: auto;
padding: 0 10px 8px;
text-align: center;
opacity: 1;
transform: none;
pointer-events: auto;
transition: none;
}
.services--cards .door__icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-top: -29px;
border: 4px solid var(--linen);
border-radius: 50%;
background: var(--olive-deep);
color: var(--cream);
}
.services--cards .door__icon svg { width: 24px; height: 24px; }
.services--cards .door__name {
margin-top: 8px;
font-size: 1.9rem;
line-height: 1.2;
}
.services--cards .door__line {
margin: 6px 0 12px;
font-size: 0.95rem;
line-height: 1.75;
color: var(--olive-text);
}
.services--cards .door__btn {
display: inline-flex;
min-height: 40px;
margin-top: auto;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--olive-ink);
font-size: 0.95rem;
transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.services--cards .door__btn:hover {
background: none;
color: var(--clay);
gap: 0.85em;
}
.services--cards .door__btn:focus-visible { outline-color: var(--olive-deep); }
.services--cards .door.is-highlight { outline-color: var(--moss); }
.services--cards .services__helper { margin-top: 28px; }
@media (min-width: 1024px) {
.services--cards {
height: auto;
padding-block: 112px 104px;
}
.services--cards .services__sticky {
position: relative;
top: auto;
display: block;
min-height: 0;
padding-block: 0;
}
.services--cards .services__sticky::before { content: none; }
.services--cards .section-head { margin-bottom: 64px; }
.services--cards .doors {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(16px, 1.6vw, 28px);
height: auto;
min-height: 0;
padding: 0;
}
.services--cards .door {
flex: none;
min-width: 0;
cursor: auto;
}
.services--cards .door:hover {
transform: translateY(-6px);
box-shadow: 0 1px 0 rgb(59 58 51 / 0.04), 0 30px 54px -30px rgb(84 90 53 / 0.55);
}
.services--cards .door__photo { aspect-ratio: 4 / 4.4; }
.services--cards .door__name { font-size: 2rem; }
.services__sprig { top: 64px; left: 5%; width: 110px; height: 200px; }
}
.services--doors { background: var(--sand); }
.services--doors::before { content: none; }
.services--doors .section-head { text-align: center; }
.services--doors .doors { gap: 14px; }
.services--doors .door {
border-radius: 28px;
box-shadow: 0 30px 60px -36px rgb(59 58 51 / 0.6);
}
.services--doors .door__photo { transition: transform 1.2s var(--ease-out); }
.services--doors .door.is-open .door__photo { transform: scale(1.04); }
.services--doors .door__scrim {
background: linear-gradient(to top, rgb(46 50 28 / 0.84), rgb(46 50 28 / 0.66) 48%, rgb(46 50 28 / 0));
}
.services--doors .door__icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin-bottom: 14px;
border: 1.5px solid rgb(248 243 234 / 0.7);
border-radius: 50%;
background: rgb(84 90 53 / 0.85);
color: var(--cream);
}
.services--doors .door__icon svg { width: 24px; height: 24px; }
.services--doors .door__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 2.2rem;
line-height: 1.15;
}
.services--doors .door__btn {
border-color: rgb(248 243 234 / 0.7);
}
.services--doors .door__btn:hover {
background-color: var(--cream);
color: var(--olive-ink);
}
.services--doors .services__sprig { opacity: 0.35; }
@media (min-width: 1024px) {
.services--doors .services__sticky::before { content: none; }
.services--doors .door__vname {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.9rem;
}
.services--doors .door::after {
content: "";
position: absolute;
inset: 0;
background: rgb(84 90 53 / 0.28);
pointer-events: none;
transition: opacity var(--door-open) var(--ease-out);
}
.services--doors .door.is-open::after { opacity: 0; }
.services--doors .door__name { font-size: 2.8rem; }
}
.services--doors .services__sticky {
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
padding-block: calc(var(--header-h-compact) + 16px) 20px;
}
.services--doors { padding-block: 0; }
.services--doors .section-head { margin-bottom: 14px; }
.services--doors .section-sub { margin-top: 6px; font-size: 0.95rem; }
.services--doors .container--doors {
display: flex;
flex: 1;
min-height: 0;
}
.services--doors .doors {
flex: 1;
min-height: 0;
padding-block: 4px;
}
.services--doors .door {
height: 100%;
aspect-ratio: auto;
flex-basis: 72vw;
}
.services--doors .services__helper { margin-top: 14px; }
@media (min-width: 600px) {
.services--doors .door { flex-basis: 40vw; }
}
@media (min-width: 1024px) {
.services--doors .services__sticky {
top: 0;
min-height: 0;
justify-content: flex-start;
padding-block: calc(var(--header-h-compact) + 28px) 28px;
}
.services--doors .section-head { margin-bottom: 28px; }
.services--doors .doors {
height: auto;
min-height: 0;
padding-block: 0;
}
.services--doors .door { flex-basis: 0; }
.services--doors .services__helper { margin-top: 20px; }
}
.try { background: var(--cream); }
.try__stage { position: relative; }
.try__stage::before {
content: "";
position: absolute;
z-index: 0;
top: 4%;
left: 50%;
width: min(118%, 640px);
aspect-ratio: 1 / 1;
translate: -50% 0;
border-radius: var(--blob);
background: var(--sand);
}
.try__stage > * { position: relative; z-index: 1; }
.mirror {
border-color: rgb(126 132 89 / 0.55);
background: rgb(248 243 234 / 0.6);
box-shadow: 0 34px 70px -40px rgb(84 90 53 / 0.55);
}
.mirror__knob {
background: var(--olive-deep);
color: var(--cream);
}
.mirror__note { color: var(--olive-text); }
.try__num {
font-family: var(--font-display);
font-size: 2.1rem;
color: var(--terracotta);
}
.try__steps li,
.try__how summary { border-color: var(--stone); }
.why {
position: relative;
overflow: hidden;
background: var(--sand);
}
.why__title { max-width: 16ch; font-size: clamp(2.7rem, 1.6rem + 3.8vw, 4.8rem); line-height: 1.15; }
.why__brandline {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--clay);
}
.why__text { color: var(--olive-text); }
.why__sprig {
top: 48px;
right: 3%;
width: 96px;
height: 176px;
transform: rotate(16deg);
}
.journey__line path { stroke: var(--moss); stroke-width: 1.4; }
.journey__stops { padding-inline-start: 64px; }
.stop__ring {
display: grid;
place-items: center;
top: 0;
inset-inline-start: -54px;
width: 44px;
height: 44px;
margin: 0;
border: 1.5px solid var(--moss);
background: var(--sand);
color: var(--moss);
box-shadow: 0 0 0 6px var(--sand);
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.stop__ring svg { width: 20px; height: 20px; }
.stop.is-reached .stop__ring {
border-color: var(--olive-deep);
background: var(--olive-deep);
color: var(--cream);
}
.stop__media {
border-radius: 999px 999px 24px 24px;
background: var(--stone);
}
.stop__num {
font-family: var(--font-display);
font-size: 1.35rem;
color: var(--terracotta);
}
.stop__title { font-size: 1.9rem; line-height: 1.25; }
.stop__line { color: var(--olive-text); }
.why__note { color: var(--olive-text); }
@media (min-width: 1024px) {
.journey__stops { padding: 0; }
.stop {
padding-top: 92px;
text-align: center;
}
.stop__ring {
top: 0;
inset-inline-start: 50%;
width: 60px;
height: 60px;
margin-inline-start: -30px;
}
.stop__ring svg { width: 26px; height: 26px; }
.stop__media { width: 84%; margin-inline: auto; }
.why__sprig { width: 130px; height: 236px; right: 5%; top: 80px; }
}
.booking { background: var(--cream); position: relative; }
.booking__sub { color: var(--olive-text); }
.appt {
border-radius: 30px;
background: #FFFCF7;
box-shadow: var(--shadow-soft), 0 0 0 1px rgb(126 132 89 / 0.12);
}
.appt__progress span { background: var(--olive-deep); }
.appt__seal { box-shadow: 0 0 0 1px rgb(126 132 89 / 0.2); }
.stepper::before { background: var(--stone); }
.stepper::after { background: var(--olive-deep); }
.stepper__n { border-color: var(--stone); }
.stepper__item.is-current .stepper__n {
border-color: var(--olive-deep);
background: var(--olive-deep);
color: var(--cream);
}
.stepper__item.is-done .stepper__n {
border-color: var(--moss);
background: var(--moss);
color: var(--cream);
}
.field input,
.field textarea { background: var(--linen); }
.field input:focus-visible,
.field textarea:focus-visible {
border-color: var(--moss);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgb(126 132 89 / 0.28);
}
.status-pill { border-color: var(--moss); }
.appt__preview { background: var(--linen); }
@media (min-width: 1024px) {
.booking__aside::before {
content: "";
position: absolute;
z-index: 0;
top: 6%;
right: -8%;
width: 92%;
aspect-ratio: 1 / 1.05;
border-radius: var(--blob);
background: var(--sand);
}
.doorway { z-index: 1; }
.doorway::after { display: none; }
.booking__aside .phone-wrap { z-index: 2; }
.booking__aside .phone { border-color: var(--moss); }
.phone { background: var(--cream); }
.phone__send { background: var(--olive-deep); color: var(--cream); }
}
.faq { background: var(--sand); }
.helper {
overflow: hidden;
border-radius: 40px 40px 40px 140px / 40px 40px 40px 110px;
background: var(--olive-deep);
color: var(--cream);
isolation: isolate;
}
.helper :focus-visible { outline-color: var(--cream); }
.helper .label { color: #E2C7A5; }
.helper__question,
.helper__foot { color: rgb(248 243 234 / 0.82); }
.helper__sprig {
left: 22px;
bottom: 10px;
z-index: -1;
width: 96px;
height: 176px;
color: var(--cream);
opacity: 0.2;
transform: rotate(-10deg);
}
.helper .chips--list .chip {
background: rgb(248 243 234 / 0.1);
color: var(--cream);
border-color: rgb(248 243 234 / 0.18);
}
.helper .chips--list .chip:hover { border-color: rgb(248 243 234 / 0.6); }
.helper .chips--list .chip[aria-checked="true"] {
background: var(--cream);
border-color: var(--cream);
color: var(--olive-ink);
}
.helper .chips--list .chip:not(:has(.chip__dot))::before { border-color: currentColor; }
.helper__photo { background: rgb(248 243 234 / 0.15); }
.helper__photo::after { display: none; }
.helper__answer:not(:empty) { color: var(--charcoal); }
.helper__answer:has(.helper__hint) { background: rgb(248 243 234 / 0.12); }
.helper__answer .helper__hint { color: rgb(248 243 234 / 0.85); }
.helper__answer :focus-visible { outline-color: var(--olive-deep); }
.accordion,
.qa { border-color: rgb(59 58 51 / 0.14); }
.qa__n {
font-family: var(--font-display);
font-size: 2.2rem;
color: var(--terracotta);
}
.final {
display: block;
min-height: 0;
padding-block: 72px;
overflow: visible;
background: var(--cream);
}
.final__panel {
position: relative;
display: grid;
overflow: hidden;
border-radius: 32px;
background: var(--olive-deep);
color: var(--cream);
isolation: isolate;
}
.final__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--moss);
}
.final__photo {
position: absolute;
inset: 0;
z-index: auto;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 26% 45%;
}
.final__text {
position: relative;
z-index: 1;
max-width: none;
padding: 36px 28px 44px;
}
.final__label { color: #E2C7A5; }
.final__title {
margin-top: 8px;
font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.2rem);
line-height: 1.15;
color: var(--cream);
}
.final__title em { color: #DCCBA4; }
.final__line { color: rgb(248 243 234 / 0.85); }
.final__ring rect { stroke: rgb(248 243 234 / 0.55); }
.final__sprig {
top: 18px;
left: 18px;
width: 80px;
height: 146px;
color: var(--cream);
opacity: 0.22;
transform: rotate(-12deg);
display: none;
}
@media (min-width: 1024px) {
.final { padding-block: 104px; }
.final__panel {
grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
grid-template-areas: "text media";
min-height: 420px;
}
.final__media {
grid-area: media;
aspect-ratio: auto;
border-radius: 0 0 0 0;
border-top-right-radius: 180px 100%;
}
.final__text {
grid-area: text;
align-self: center;
padding: 64px clamp(48px, 6vw, 96px);
}
.final__sprig {
display: block;
top: auto;
bottom: 22px;
left: calc(45% + 18px);
}
}
.footer { background: var(--linen); color: var(--charcoal); }
.ft { position: relative; }
.ft__sprig {
top: 24px;
left: 8px;
width: 90px;
height: 164px;
opacity: 0.35;
transform: rotate(-10deg);
}
.ft__top,
.ft__chapters,
.ft__bottom { position: relative; z-index: 1; }
.ft__big { line-height: 1.1; }
.ft__mapcard {
background: #FFFCF7;
box-shadow: var(--shadow-soft);
}
.ft__card--rooms { background: var(--cream); }
.ft__card--contact { background: #FFFCF7; }
.ft__card--contact::after { display: none; }
.ft__card--hours { background: var(--sand); }
.ft__card { box-shadow: var(--shadow-soft); }
.ft__num { -webkit-text-stroke-color: rgb(126 132 89 / 0.45); }
.ft__palette a { border-bottom-color: var(--stone); }
.ft__bottom {
margin-top: 32px;
padding: 12px 24px;
border-radius: 999px;
background: var(--olive-deep);
color: var(--cream);
}
.ft__bottom :focus-visible { outline-color: var(--cream); }
.site-footer {
--sf-ink: #F8F3EA;
--sf-soft: rgb(248 243 234 / 0.72);
--sf-rule: rgb(248 243 234 / 0.2);
position: relative;
padding-block: 72px 28px;
background: #6B6A52;
color: var(--sf-ink);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer :focus-visible { outline-color: var(--sf-ink); }
.sf-gram {
position: relative;
isolation: isolate;
}
.sf-gram__ghost {
position: absolute;
top: 46%;
left: 50%;
z-index: -1;
translate: -50% -50%;
font: 600 clamp(7rem, 4rem + 16vw, 20rem)/1 "Markazi Text", serif;
letter-spacing: 0.06em;
color: transparent;
-webkit-text-stroke: 1px rgb(248 243 234 / 0.14);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.sf-gram__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px 32px;
}
.sf-gram__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
font-weight: 600;
color: var(--gold);
}
.sf-gram__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.sf-gram__title {
margin-top: 6px;
font-family: var(--font-display);
font-size: clamp(2.8rem, 1.8rem + 3.6vw, 5rem);
font-weight: 500;
line-height: 1.05;
}
.sf-gram__title em { font-style: normal; color: var(--gold); }
.sf-gram__follow {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 8px 8px 24px;
border-radius: 999px;
background: var(--cream);
color: var(--charcoal) !important;
box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.55);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.sf-gram__follow:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px -22px rgb(0 0 0 / 0.6);
}
.sf-gram__follow:focus-visible { outline-color: var(--cream); outline-offset: 4px; }
.sf-gram__follow-ico {
position: relative;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: conic-gradient(from 200deg, #D3A66F, #B5704F, #E9C99A, #D3A66F);
color: var(--cream);
}
.sf-gram__follow-ico::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--olive-deep);
}
.sf-gram__follow-ico svg {
position: relative;
z-index: 1;
width: 22px;
height: 22px;
}
.sf-gram__follow-txt {
display: grid;
line-height: 1.3;
}
.sf-gram__follow-txt small {
font-size: 0.75rem;
font-weight: 600;
color: var(--clay);
}
.sf-gram__follow-txt span {
font-weight: 600;
font-size: 0.95rem;
}
.sf-reel {
position: relative;
margin: 40px calc(-1 * var(--gutter)) 0;
padding-block: 36px 48px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}
.sf-reel__track {
display: flex;
width: max-content;
animation: sf-reel 70s linear infinite;
}
@keyframes sf-reel { to { transform: translateX(50%); } }
.sf-reel:hover .sf-reel__track,
.sf-reel:focus-within .sf-reel__track { animation-play-state: paused; }
.sf-reel__group {
display: flex;
align-items: center;
gap: 18px;
padding-inline-end: 18px;
}
.sf-tile {
flex: none;
width: clamp(170px, 15vw, 230px);
height: clamp(230px, 20vw, 300px);
overflow: hidden;
border-radius: 22px;
background: rgb(248 243 234 / 0.1);
box-shadow: 0 26px 46px -28px rgb(0 0 0 / 0.65);
}
.sf-tile--arch { border-radius: 999px 999px 22px 22px; }
.sf-tile--pill { border-radius: 999px; height: clamp(250px, 22vw, 330px); }
.sf-tile--round { height: clamp(200px, 17vw, 250px); }
.sf-tile:nth-child(odd) { translate: 0 -18px; }
.sf-tile:nth-child(even) { translate: 0 18px; }
.sf-tile a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.sf-tile img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85);
transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}
.sf-tile a::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(36 39 22 / 0.75), rgb(36 39 22 / 0) 55%);
opacity: 0;
transition: opacity 0.45s var(--ease-out);
}
.sf-tile__tag {
position: absolute;
inset-inline: 0;
bottom: 22px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 600;
color: var(--cream);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.sf-tile__tag svg { width: 18px; height: 18px; }
.sf-tile a:hover img,
.sf-tile a:focus-visible img { transform: scale(1.07); filter: saturate(1.05); }
.sf-tile a:hover::after,
.sf-tile a:focus-visible::after,
.sf-tile a:hover .sf-tile__tag,
.sf-tile a:focus-visible .sf-tile__tag { opacity: 1; transform: none; }
.sf-tile a:focus-visible { outline: 2px solid var(--cream); outline-offset: -6px; }
.sf-tile--card {
width: clamp(220px, 19vw, 280px);
height: clamp(250px, 21vw, 310px);
border-radius: 28px;
background: linear-gradient(160deg, #F8F3EA, #EEDFC6);
}
.sf-tile--card a {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 26px;
color: var(--charcoal) !important;
}
.sf-tile--card a::after { content: none; }
.sf-tile--card img { width: 52px; height: auto; margin-bottom: 4px; filter: none; }
.sf-tile--card a:hover img { transform: rotate(-8deg); }
.sf-tile__k { font-size: 0.8125rem; font-weight: 600; color: var(--clay); }
.sf-tile__t {
font-family: var(--font-display);
font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem);
line-height: 1.12;
}
.sf-tile__l { margin-top: 4px; font-size: 0.9rem; font-weight: 600; color: var(--olive-ink); }
.sf-tile--card a:hover .sf-tile__l { color: var(--clay); }
.sf-tile--card a:focus-visible { outline-color: var(--olive-deep); }
.sf-reel-wrap { position: relative; margin-top: 32px; }
.sf-reel-wrap .sf-reel { margin-top: 0; }
.sf-seal {
position: relative;
z-index: 3;
display: grid;
flex: none;
place-items: center;
width: 96px;
height: 96px;
margin: 0;
border-radius: 50%;
pointer-events: none;
}
.sf-seal__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
direction: ltr;
animation: sf-turn 26s linear infinite;
}
.sf-seal__ring text {
fill: var(--gold);
font: 700 14px/1 var(--font);
letter-spacing: 0;
word-spacing: -0.6px;
}
.sf-seal img {
width: 44px;
height: auto;
padding: 6px;
border-radius: 50%;
background: var(--cream);
box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.5);
}
@keyframes sf-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.sf-reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.sf-reel__track { animation: none; }
.sf-reel__group[aria-hidden="true"] { display: none; }
}
@media (min-width: 1024px) {
.sf-reel-wrap { margin-top: 24px; }
.sf-seal { width: 150px; height: 150px; margin: 0 0 -8px; align-self: center; }
.sf-seal img { width: 70px; }
.sf-reel { padding-block: 44px 56px; }
}
.btn--gold {
background-color: var(--gold);
color: var(--charcoal);
}
.btn--gold:hover { background-color: #DDB98C; }
.sf-place {
position: relative;
display: grid;
gap: 8px;
margin-top: 56px;
overflow: hidden;
border: 1px solid rgb(211 166 111 / 0.28);
border-radius: 36px;
background:
radial-gradient(120% 90% at 18% 40%, rgb(211 166 111 / 0.16), transparent 55%),
linear-gradient(140deg, #3A3E25 0%, #474C2E 55%, #565B38 100%);
color: var(--sf-ink);
isolation: isolate;
}
.sf-place::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(rgb(248 243 234 / 0.16) 1px, transparent 1.4px);
background-size: 18px 18px;
-webkit-mask-image: linear-gradient(to left, transparent 15%, #000 75%);
mask-image: linear-gradient(to left, transparent 15%, #000 75%);
}
.sf-place__text {
position: relative;
z-index: 2;
padding: 40px 28px 8px;
}
.sf-place__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
font-weight: 600;
color: var(--gold);
}
.sf-place__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.sf-place__title {
margin-top: 10px;
font-family: var(--font-display);
font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.9rem);
font-weight: 500;
line-height: 1.12;
}
.sf-place__title em { font-style: normal; color: var(--gold); }
.sf-place__line {
max-width: 26rem;
margin-top: 14px;
color: var(--sf-soft);
}
.sf-place__facts {
display: flex;
flex-wrap: wrap;
gap: 14px 32px;
margin: 24px 0 0;
padding-top: 20px;
border-top: 1px solid rgb(211 166 111 / 0.3);
}
.sf-place__facts dt { font-size: 0.75rem; color: var(--sf-soft); }
.sf-place__facts dd {
margin: 2px 0 0;
font-family: var(--font-display);
font-size: 1.5rem;
line-height: 1.2;
}
.sf-place__facts dd[dir="ltr"] { font-family: var(--font); font-size: 1.05rem; letter-spacing: 0.04em; padding-top: 4px; }
.sf-place__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 24px;
margin-top: 28px;
}
.site-footer .sf-place .btn--gold { color: var(--charcoal); }
.sf-place__link {
font-weight: 600;
color: var(--sf-ink);
background: linear-gradient(var(--gold), var(--gold)) 100% 100% / 100% 1px no-repeat;
padding-bottom: 2px;
}
.sf-place__link:hover { color: var(--gold) !important; }
.sf-place__stage {
position: relative;
display: grid;
place-items: center;
min-height: 340px;
padding: 8px 12px 28px;
}
.sf-place__stage::before {
content: "";
position: absolute;
inset: 12% 10% 6%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(211 166 111 / 0.42), rgb(211 166 111 / 0));
filter: blur(8px);
}
.sf-place__rings {
position: absolute;
z-index: 0;
width: min(520px, 110%);
height: auto;
fill: none;
stroke: rgb(211 166 111 / 0.22);
stroke-width: 0.8;
stroke-dasharray: 2 6;
animation: sf-turn 120s linear infinite;
}
.sf-place__compass {
position: absolute;
top: 18px;
left: 20px;
z-index: 2;
width: 58px;
height: 58px;
overflow: visible;
}
.sf-place__compass circle { fill: none; stroke: rgb(211 166 111 / 0.6); stroke-width: 1; }
.sf-place__needle { fill: rgb(248 243 234 / 0.25); }
.sf-place__needle-n { fill: var(--gold); }
.sf-place__compass text { fill: var(--gold); font: 600 9px var(--font); }
.sf-place .ft__mapcard {
position: relative;
z-index: 1;
width: min(100%, 520px);
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.sf-place .ft__mapcard .ft__seal { display: none; }
.sf-place .syria__sea { fill: rgb(248 243 234 / 0.55); }
.sf-place .syria__shadow { fill: #0F1108; }
.sf-place .map-drawn .syria__shadow,
.sf-place .ft__mapcard:not(.map-ready) .syria__shadow { opacity: 0.55; }
.sf-place .ft__pinlabel {
border-color: rgb(211 166 111 / 0.8);
background: rgb(36 39 22 / 0.82);
color: var(--sf-ink);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6);
}
.sf-place .ft__pinlabel small { color: var(--gold); }
.sf-place .ft__pin-head { box-shadow: 0 6px 14px -4px rgb(0 0 0 / 0.55); }
.sf-place .ft__pin-base::before,
.sf-place .ft__pin-base::after {
content: "";
position: absolute;
inset: -1.5px;
border: 1.5px solid var(--gold);
border-radius: 50%;
opacity: 0;
animation: sf-pulse 2.6s var(--ease-out) infinite;
}
.sf-place .ft__pin-base::after { animation-delay: 1.3s; }
@keyframes sf-pulse {
0% { transform: scale(1); opacity: 0.85; }
100% { transform: scale(3.6); opacity: 0; }
}
@media (min-width: 900px) {
.sf-place {
grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
align-items: center;
gap: 0;
min-height: 460px;
}
.sf-place__text { padding: 56px clamp(40px, 5vw, 72px); }
.sf-place__stage { min-height: 460px; padding: 32px 24px; }
.sf-place__compass { top: 28px; left: 32px; }
}
.site-footer { padding-bottom: 0; }
.sf-band {
position: relative;
margin-top: clamp(96px, 10vw, 150px);
background: var(--cream);
color: var(--charcoal);
}
.sf-band__wave {
position: absolute;
inset-inline: 0;
bottom: calc(100% - 1px);
width: 100%;
height: clamp(44px, 6vw, 96px);
fill: var(--cream);
}
.sf-band__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.sf-band__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 14px;
padding: 56px 28px 72px;
background: linear-gradient(160deg, #A8603F, var(--clay) 70%);
color: var(--cream);
border-start-end-radius: 85% 72px;
border-end-start-radius: 70% 56px;
border-end-end-radius: 30% 32px;
}
.sf-band__title {
max-width: 15ch;
font-family: var(--font-display);
font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
font-weight: 500;
line-height: 1.25;
color: var(--cream);
}
.sf-band__title em { color: #F4D9B3; }
.sf-band__rule {
display: block;
width: 56px;
height: 1px;
margin-block: 22px 18px;
background: rgb(248 243 234 / 0.55);
}
.sf-band__text {
font-size: 1rem;
line-height: 1.9;
color: rgb(248 243 234 / 0.9);
}
.sf-band__sprig {
width: 34px;
height: 62px;
margin-top: 26px;
color: rgb(248 243 234 / 0.8);
transform: rotate(-24deg);
}
.sf-contact {
display: grid;
align-content: center;
gap: 18px;
padding: 48px 28px;
}
.sf-contact a {
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 1rem;
color: var(--charcoal);
transition: color 0.3s var(--ease-out);
}
.sf-contact a:hover { color: var(--clay); }
.site-footer .sf-contact a:focus-visible { outline-color: var(--olive-deep); outline-offset: 4px; }
.sf-contact__ico {
display: grid;
flex: none;
place-items: center;
width: 26px;
height: 26px;
color: var(--olive-ink);
}
.sf-contact a:hover .sf-contact__ico { color: var(--clay); }
.sf-contact__ico svg { width: 22px; height: 22px; fill: currentColor; }
.sf-contact__ico use:not([href="#i-whatsapp"]) { fill: none; }
.sf-band__photo {
height: 300px;
margin: 0;
overflow: hidden;
border-start-start-radius: 60% 72px;
border-start-end-radius: 24% 40px;
}
.sf-band__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% 60%;
}
.sf-band__base {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 20px;
padding: 18px 16px;
border-top: 1px solid var(--stone);
font-size: 0.8125rem;
color: var(--olive-text);
}
.sf-band__base a:hover { color: var(--clay); }
.site-footer .sf-band__base a:focus-visible { outline-color: var(--olive-deep); }
@media (max-width: 767.98px) {
.sf-band__base { padding-bottom: calc(18px + 72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
.sf-band__inner {
grid-template-columns: minmax(0, 36fr) minmax(0, 32fr) minmax(0, 32fr);
min-height: 440px;
}
.sf-band__panel {
margin-top: 0;
padding: 96px clamp(56px, 6vw, 110px) 64px clamp(64px, 7vw, 130px);
border-radius: 0;
clip-path: url(#sf-clip-panel);
}
.sf-contact { padding: 72px clamp(16px, 2vw, 40px) 56px; }
.sf-band__photo {
height: auto;
margin-top: clamp(-96px, -6.5vw, -52px);
border-radius: 0;
clip-path: url(#sf-clip-photo);
}
}
@media (min-width: 1024px) {
.site-footer { padding-top: 104px; }
}
[data-reveal] {
transition:
opacity 0.9s var(--ease-out),
transform 0.9s var(--ease-out);
transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-ready [data-reveal]:not(.is-in) { transform: translateY(28px); }
@keyframes sway {
from { rotate: -2.5deg; }
to { rotate: 3deg; }
}
.sprig {
transform-origin: 50% 100%;
animation: sway 6.5s ease-in-out infinite alternate;
}
.services__sprig { animation-duration: 7.5s; animation-delay: -2s; }
.why__sprig { animation-duration: 8s; animation-delay: -4s; }
.helper__sprig { animation-duration: 9s; }
.final__sprig { animation-duration: 7s; animation-delay: -3s; }
@keyframes blob-morph {
0% { border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; rotate: 0deg; }
50% { border-radius: 44% 56% 40% 60% / 56% 44% 58% 42%; rotate: 6deg; }
100% { border-radius: 52% 48% 60% 40% / 42% 58% 44% 56%; rotate: -4deg; }
}
.try__stage::before,
.booking__aside::before,
.hero__text::before {
animation: blob-morph 16s ease-in-out infinite alternate;
}
.booking__aside::before { animation-duration: 19s; animation-delay: -6s; }
@keyframes slow-zoom {
from { scale: 1; }
to { scale: 1.07; }
}
.hero__photo--main,
.final__photo {
transform-origin: 50% 40%;
animation: slow-zoom 22s ease-in-out infinite alternate;
}
@keyframes float {
from { translate: 0 -5px; }
to { translate: 0 6px; }
}
.mirror { animation: float 5.5s ease-in-out infinite alternate; }
.door__icon { animation: float 4.5s ease-in-out infinite alternate; }
.door:nth-child(2) .door__icon { animation-delay: -1s; }
.door:nth-child(3) .door__icon { animation-delay: -2s; }
.door:nth-child(4) .door__icon { animation-delay: -3s; }
.door:nth-child(5) .door__icon { animation-delay: -4s; }
.stop__ring::after {
content: "";
position: absolute;
inset: -2px;
border: 1.5px solid var(--moss);
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
.stop.is-reached .stop__ring::after { animation: ripple 1.4s var(--ease-out) 1; }
@keyframes ripple {
from { transform: scale(1); opacity: 0.7; }
to { transform: scale(1.9); opacity: 0; }
}
@keyframes breathe {
from { opacity: 0.7; scale: 0.96; }
to { opacity: 1; scale: 1.04; }
}
.sf-place__stage::before { animation: breathe 5s ease-in-out infinite alternate; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
translate: 110% 0;
pointer-events: none;
}
.btn:hover::after { translate: -110% 0; transition: translate 0.9s var(--ease-out); }
.reveal-ready .is-in .label::before,
.label::before { transition: rotate 0.8s var(--ease-out); }
.reveal-ready [data-reveal]:not(.is-in) .label::before { rotate: -40deg; }
.mobile-bar {
border-top-color: rgb(126 132 89 / 0.35);
background-color: rgb(248 243 234 / 0.94);
}
.mobile-bar__wa { border-color: var(--olive-deep); color: var(--olive-ink); }
.sheet { background: var(--cream); }
/* boho.css */
:root {
--b-ivory: #F5EDE0;
--b-paper: #EADCC8;
--b-print: #FBF6EC;
--b-terracotta: #B65C32;
--b-burnt: #A64B29;
--b-burnt-dark: #8E3F22;
--b-sage: #929B84;
--b-sage-wash: #C4C8B1;
--b-olive: #777F68;
--b-olive-deep: #5E6650;
--b-espresso: #493329;
--b-sand: #D2AF8E;
--cream: var(--b-ivory);
--linen: #F0E6D6;
--sand: var(--b-paper);
--stone: #DCCBB2;
--gold: var(--b-sand);
--olive-deep: var(--b-olive-deep);
--olive-ink: #4E5442;
--moss: var(--b-olive);
--em: var(--b-burnt);
--clay: var(--b-burnt);
--terracotta: var(--b-terracotta);
--charcoal: var(--b-espresso);
--olive-text: #6A5B4C;
--font: "DM Sans", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
--font-display: "Cormorant Garamond", "Markazi Text", "Amiri", "Times New Roman", serif;
--fs-h1: clamp(2.9rem, 1.6rem + 4.4vw, 5.9rem);
--fs-h2: clamp(2.5rem, 1.7rem + 2.8vw, 4.3rem);
--b-div-h: clamp(46px, 6.5vw, 104px);
--b-shadow-print: 0 1px 2px rgb(73 51 41 / 0.08), 0 22px 40px -22px rgb(73 51 41 / 0.5);
--b-radius-a: 40px 26px 46px 30px / 30px 44px 28px 42px;
--b-radius-b: 26px 44px 32px 42px / 42px 28px 46px 30px;
--b-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .2 0 0 0 0 .16 .2 0 0 0 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--b-wash:
radial-gradient(42% 36% at 12% 22%, rgb(210 175 142 / 0.2), transparent 70%),
radial-gradient(38% 40% at 88% 62%, rgb(146 155 132 / 0.12), transparent 70%);
}
body {
background: var(--b-grain), var(--b-ivory);
color: var(--b-espresso);
}
::selection { background: rgb(182 92 50 / 0.25); }
:focus-visible { outline-color: var(--b-burnt); }
.hero__title,
.section-title,
.why__title,
.final__title,
.helper__title,
.door__name,
.stop__title,
.appt__legend,
.appt__done-title,
.sheet__title,
.sf-gram__title,
.sf-place__title,
.sf-band__title,
.menu-sheet__nav a {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0;
}
.section-title { font-size: var(--fs-h2); line-height: 1.15; }
:is(h1, h2, h3) em { color: var(--b-burnt); }
.b-script {
display: block;
margin-bottom: 6px;
font: 700 clamp(1.15rem, 0.95rem + 0.7vw, 1.55rem) / 1.5 "Aref Ruqaa", "Markazi Text", serif;
color: var(--b-terracotta);
letter-spacing: 0;
direction: rtl;
}
.label,
.hero__label {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--b-burnt);
}
.section-sub,
.booking__sub,
.why__text { color: var(--olive-text); }
.rule {
width: 84px;
height: 2px;
border-radius: 2px;
background: currentColor;
opacity: 0.55;
}
.btn {
min-height: 52px;
padding-inline: 1.7rem;
font-weight: 600;
transition:
background-color 0.35s var(--ease-out),
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
transform 0.35s var(--ease-out),
box-shadow 0.35s var(--ease-out);
}
.btn--primary {
background-color: var(--b-burnt);
color: var(--b-ivory);
box-shadow: 0 12px 24px -16px rgb(142 63 34 / 0.95);
}
.btn--primary:hover {
background-color: var(--b-burnt-dark);
transform: translateY(-2px);
box-shadow: 0 18px 28px -16px rgb(142 63 34 / 0.95);
}
.btn--secondary,
.btn--secondary:hover {
min-height: 48px;
padding-inline: 4px;
border: 0;
border-radius: 0;
background: none;
color: inherit;
box-shadow: none;
}
.btn--secondary span,
.btn--secondary { text-decoration: underline 1px; text-underline-offset: 0.6em; }
.btn--secondary::after { display: none; }
.btn--secondary::before {
content: "←";
order: 1;
transition: transform 0.35s var(--ease-out);
}
.btn--secondary:hover { color: var(--b-burnt); }
.btn--secondary:hover::before { transform: translateX(-5px); }
.btn--light {
background-color: var(--b-ivory);
color: var(--b-espresso);
}
.btn--light:hover {
background-color: var(--b-print);
transform: translateY(-2px);
}
.btn--gold { background-color: var(--b-sand); color: var(--b-espresso); }
.btn--gold:hover { background-color: #DDBE9F; }
.quiet-link,
.text-link { text-decoration-color: rgb(166 75 41 / 0.5); }
.quiet-link:hover,
.quiet-link.is-active,
.text-link:hover { text-decoration-color: var(--b-burnt); color: var(--b-burnt); }
.chip {
border-color: var(--stone);
background-color: var(--b-print);
color: var(--b-espresso);
}
.chip:hover { border-color: var(--b-terracotta); }
.chip[aria-checked="true"],
.chip[aria-pressed="true"] {
border-color: var(--b-burnt);
background-color: var(--b-burnt);
color: var(--b-ivory);
}
.check input { accent-color: var(--b-burnt); }
.sprig { color: var(--b-olive); }
.site-header,
.site-header.is-scrolled {
position: absolute;
height: var(--header-h);
background: var(--b-grain), rgb(245 237 224 / 0.96);
border-bottom: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-nav,
.is-scrolled .site-nav {
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-nav__link {
font-size: 0.98rem;
color: var(--b-espresso);
transition: color 0.3s var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link[aria-current] { color: var(--b-burnt); }
.site-nav__underline { height: 1.5px; background: var(--b-burnt); }
.brand__badge { background: var(--b-print); box-shadow: 0 0 0 1px rgb(166 75 41 / 0.18); }
.menu-toggle,
.is-scrolled .menu-toggle { background: none; color: var(--b-espresso); }
.menu-sheet { background: var(--b-grain), var(--b-wash), var(--b-ivory); }
.menu-sheet__nav a { font-size: 2.3rem; border-bottom-color: rgb(166 75 41 / 0.16); }
.mobile-bar {
border-top-color: rgb(166 75 41 / 0.25);
background-color: rgb(245 237 224 / 0.95);
}
.mobile-bar__wa { border-color: var(--b-burnt); color: var(--b-burnt); }
.hero {
background:
var(--b-grain),
radial-gradient(48% 58% at 78% 28%, rgb(222 150 102 / 0.55), transparent 70%),
radial-gradient(40% 50% at 8% 92%, rgb(110 46 22 / 0.45), transparent 70%),
radial-gradient(36% 40% at 96% 96%, rgb(210 175 142 / 0.3), transparent 70%),
radial-gradient(30% 30% at 40% 6%, rgb(120 52 26 / 0.35), transparent 70%),
linear-gradient(162deg, #BA663B 0%, #AC532E 52%, #93421F 100%);
color: var(--b-ivory);
padding-top: var(--header-h);
}
.hero__text::before {
background: radial-gradient(closest-side, rgb(232 162 112 / 0.32), rgb(232 162 112 / 0));
}
.hero__label,
.hero__label [lang="en"] { color: #F4D6B4; }
.hero__title { color: var(--b-ivory); line-height: 1.1; }
.hero__title em { color: #F7D3A8; }
.hero .rule { color: #F4D6B4; }
.hero__services,
.hero__sub { color: rgb(245 237 224 / 0.9); }
.hero .quiet-link { text-decoration-color: rgb(247 211 168 / 0.6); }
.hero .quiet-link:hover,
.hero .quiet-link.is-active { color: #FFF3E2; text-decoration-color: #F7D3A8; }
.hero :focus-visible { outline-color: var(--b-ivory); }
.hero .btn--primary {
background-color: var(--b-olive-deep);
box-shadow: 0 14px 26px -16px rgb(40 30 20 / 0.9);
}
.hero .btn--primary:hover { background-color: #4E5543; }
.hero .btn--secondary { color: var(--b-ivory); }
.hero .btn--secondary:hover { color: #F7D3A8; }
.hero__media {
margin: 20px var(--gutter) 0;
border: 10px solid var(--b-print);
border-radius: 50% 50% 26px 26px / 30% 30% 26px 26px;
background: var(--b-paper);
box-shadow: 0 34px 60px -34px rgb(50 18 6 / 0.85);
rotate: -1.2deg;
}
.hero__sprig {
display: block;
z-index: 2;
color: var(--b-ivory);
opacity: 0.5;
inset: auto auto 34px 10px;
width: 70px;
height: 128px;
transform: rotate(-18deg);
}
.hero__sprig--b {
inset: auto 8px 40px auto;
transform: rotate(14deg) scaleX(-1);
opacity: 0.4;
}
.hero__wave { height: var(--b-div-h); fill: color-mix(in srgb, var(--b-ivory) 94%, #4A3329); }
.hero__wave .b-under { fill: var(--b-sand); opacity: 0.55; }
.hero__text { padding-bottom: calc(var(--b-div-h) + 40px); }
@media (min-width: 1024px) {
.hero { padding-top: 0; }
.hero__media {
min-height: 0;
margin: calc(var(--header-h) + 28px) clamp(32px, 4vw, 72px) calc(var(--b-div-h) + 24px);
border-width: 12px;
border-radius: 50% 50% 30px 30px / 34% 34% 30px 30px;
rotate: 1.4deg;
}
.hero__text { padding-block: calc(var(--header-h) + 24px) calc(var(--b-div-h) + 48px); }
.hero__sprig {
top: auto;
left: auto;
right: 2px;
bottom: calc(var(--b-div-h) - 14px);
width: 66px;
height: 120px;
transform: rotate(-16deg) scaleX(-1);
opacity: 0.42;
}
.hero__sprig--b {
right: auto;
left: 18px;
bottom: calc(var(--b-div-h) - 6px);
transform: rotate(16deg);
opacity: 0.42;
}
}
.b-div {
position: absolute;
top: -1px;
left: 0;
z-index: 2;
width: 100%;
height: var(--b-div-h);
overflow: visible;
fill: color-mix(in srgb, var(--b-from, var(--b-ivory)) 94%, #4A3329);
pointer-events: none;
}
.b-div path,
.hero__wave path { filter: url(#b-rough); }
.hero__wave,
.sf-band__wave { overflow: visible; }
.b-div .b-under { opacity: 0.5; }
.b-div--try { --b-from: var(--b-ivory); }
.b-div--why { --b-from: var(--b-sage-wash); }
.b-div--booking { --b-from: var(--b-paper); }
.b-div--faq { --b-from: var(--b-ivory); }
.b-div--final { --b-from: var(--b-sage-wash); }
.b-div--footer { --b-from: var(--b-ivory); }
.try,
.why,
.booking,
.faq,
.final { position: relative; }
.services--doors,
.services--cards {
background: var(--b-grain), var(--b-wash), var(--b-ivory);
}
.services .section-head .label { justify-content: center; }
.services--doors .door {
border: 7px solid var(--b-print);
border-radius: var(--b-radius-a);
box-shadow: var(--b-shadow-print);
}
.services--doors .door:nth-child(even) { border-radius: var(--b-radius-b); }
.services--doors .door__scrim {
background: linear-gradient(to top, rgb(60 38 28 / 0.86), rgb(60 38 28 / 0.6) 48%, rgb(60 38 28 / 0));
}
.services--doors .door__icon {
border-color: rgb(245 237 224 / 0.75);
background: rgb(166 75 41 / 0.88);
}
.services--doors .door__btn { border-color: rgb(245 237 224 / 0.75); }
.services--doors .door__btn:hover { background-color: var(--b-ivory); color: var(--b-espresso); }
.stories-bars__bar::before { background: var(--b-burnt); }
@media (min-width: 1024px) {
.services--doors .door::after { background: rgb(150 70 38 / 0.26); }
.services--doors .door:nth-child(odd) { rotate: -0.6deg; }
.services--doors .door:nth-child(even) { rotate: 0.5deg; }
.services--doors .door { container-type: size; }
.services--doors .door__vname {
--vn-bottom: clamp(18px, 14cqh, 48px);
bottom: var(--vn-bottom);
font-size: clamp(0.95rem, calc((100cqh - var(--vn-bottom) - 58px) / 3.8), 1.9rem);
}
@container (max-height: 300px) {
.services--doors .door__icon,
.services--doors .door__line { display: none; }
.services--doors .door__content { padding-bottom: 24px; }
.services--doors .door__name { font-size: 2rem; margin-bottom: 8px; }
}
}
.try {
--olive-text: #4E4236;
padding-top: calc(72px + var(--b-div-h));
background:
var(--b-grain),
radial-gradient(40% 44% at 82% 30%, rgb(245 237 224 / 0.35), transparent 70%),
radial-gradient(36% 40% at 10% 70%, rgb(119 127 104 / 0.22), transparent 70%),
var(--b-sage-wash);
}
.try__stage::before { background: rgb(245 237 224 / 0.72); }
.mirror {
border: 0;
background: var(--b-print);
box-shadow: var(--b-shadow-print), 0 0 0 1px rgb(73 51 41 / 0.08);
}
.mirror__knob { background: var(--b-burnt); color: var(--b-ivory); }
.try__num { color: var(--b-burnt); }
.try__steps li,
.try__how summary { border-color: rgb(73 51 41 / 0.18); }
.try .chip { border-color: rgb(73 51 41 / 0.14); }
.why {
padding-top: calc(96px + var(--b-div-h));
background:
var(--b-grain),
radial-gradient(40% 40% at 86% 18%, rgb(182 92 50 / 0.1), transparent 70%),
radial-gradient(44% 40% at 10% 80%, rgb(146 155 132 / 0.16), transparent 70%),
var(--b-paper);
}
.why__brandline { color: var(--b-burnt); }
.journey__line path { stroke: var(--b-terracotta); stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 1.6; }
.stop__ring { border-color: var(--b-terracotta); background: var(--b-paper); color: var(--b-burnt); box-shadow: 0 0 0 6px var(--b-paper); }
.stop.is-reached .stop__ring { border-color: var(--b-burnt); background: var(--b-burnt); color: var(--b-ivory); }
.stop__ring::after { border-color: var(--b-terracotta); }
.stop__media {
padding: 10px 10px 30px;
border-radius: 3px;
background: var(--b-print);
box-shadow: var(--b-shadow-print);
rotate: -2.4deg;
transition: rotate 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}
.stop:nth-child(2) .stop__media { rotate: 1.8deg; }
.stop:nth-child(3) .stop__media { rotate: -1.2deg; }
.stop:nth-child(4) .stop__media { rotate: 2.6deg; }
.stop:hover .stop__media { rotate: 0deg; translate: 0 -4px; }
.stop__media img { border-radius: 1px; filter: sepia(0.12) saturate(0.95); }
.stop__num { color: var(--b-terracotta); }
.booking {
padding-top: calc(80px + var(--b-div-h));
background: var(--b-grain), var(--b-wash), var(--b-ivory);
}
.appt {
border-radius: var(--b-radius-a);
background: var(--b-grain), var(--b-print);
box-shadow: var(--b-shadow-print), 0 0 0 1px rgb(166 75 41 / 0.1);
}
.appt__progress span,
.stepper::after { background: var(--b-burnt); }
.stepper__item.is-current .stepper__n { border-color: var(--b-burnt); background: var(--b-burnt); color: var(--b-ivory); }
.stepper__item.is-done .stepper__n { border-color: var(--b-olive); background: var(--b-olive); color: var(--b-ivory); }
.field input,
.field textarea {
border-color: var(--stone);
background: #F6EEE2;
}
.field input:focus-visible,
.field textarea:focus-visible {
border-color: var(--b-terracotta);
background: var(--b-print);
box-shadow: 0 0 0 3px rgb(182 92 50 / 0.2);
}
.status-pill { border-color: var(--b-terracotta); color: var(--b-burnt); }
.appt__preview { background: #F6EEE2; }
@media (min-width: 1024px) {
.booking__aside::before { background: var(--b-paper); }
.doorway {
border: 10px solid var(--b-print);
border-radius: 4px;
box-shadow: var(--b-shadow-print);
rotate: 2deg;
}
.booking__aside .phone { border-color: var(--b-olive); }
.phone__send { background: var(--b-burnt); }
}
.faq {
--olive-text: #4E4236;
padding-top: calc(72px + var(--b-div-h));
background:
var(--b-grain),
radial-gradient(40% 40% at 15% 25%, rgb(245 237 224 / 0.3), transparent 70%),
radial-gradient(40% 46% at 90% 76%, rgb(119 127 104 / 0.2), transparent 70%),
var(--b-sage-wash);
}
.helper {
border-radius: 44px 30px 150px 36px / 36px 46px 120px 30px;
background:
var(--b-grain),
radial-gradient(60% 50% at 80% 10%, rgb(222 150 102 / 0.4), transparent 70%),
linear-gradient(160deg, #B0582F, var(--b-burnt) 60%, #93421F);
box-shadow: 0 30px 60px -36px rgb(80 30 12 / 0.8);
}
.helper .label { color: #F7D3A8; }
.helper__photo { border: 6px solid rgb(251 246 236 / 0.9); border-radius: 4px; background: rgb(251 246 236 / 0.2); }
.faq .qa,
.faq .accordion { border-color: rgb(73 51 41 / 0.18); }
.qa summary { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.qa__n { color: var(--b-burnt); }
.final {
padding-top: calc(72px + var(--b-div-h));
background: var(--b-grain), var(--b-wash), var(--b-ivory);
}
.final__panel {
overflow: visible;
border-radius: 48px 34px 56px 30px / 34px 54px 30px 50px;
background:
var(--b-grain),
radial-gradient(50% 60% at 20% 20%, rgb(146 155 132 / 0.45), transparent 70%),
linear-gradient(150deg, #6B735C, var(--b-olive-deep) 60%, #545B47);
box-shadow: 0 34px 60px -36px rgb(40 36 24 / 0.8);
}
.final__media {
margin: 16px 16px 0;
border: 10px solid var(--b-print);
border-radius: 4px;
box-shadow: var(--b-shadow-print);
rotate: -1.6deg;
}
.final__label { color: #F0DDB8; }
.final__title em { color: #F7D3A8; }
.final .b-script { color: #F2C9A0; }
.final .btn--light { background-color: var(--b-burnt); color: var(--b-ivory); }
.final .btn--light:hover { background-color: var(--b-burnt-dark); }
.final__ring rect { stroke: rgb(245 237 224 / 0.45); }
@media (min-width: 1024px) {
.final__media {
margin: -36px 0 -36px 40px;
border-width: 12px;
border-radius: 4px;
rotate: 2.2deg;
}
}
.site-footer {
padding-top: calc(72px + var(--b-div-h));
background:
var(--b-grain),
radial-gradient(50% 40% at 85% 12%, rgb(182 92 50 / 0.35), transparent 70%),
radial-gradient(40% 40% at 8% 60%, rgb(146 155 132 / 0.14), transparent 70%),
#4F382C;
}
.sf-gram__title em,
.sf-place__title em { color: #F7D3A8; }
.sf-tile { border: 6px solid var(--b-print); box-shadow: 0 20px 34px -22px rgb(0 0 0 / 0.7); }
.sf-place {
border-color: rgb(210 175 142 / 0.3);
border-radius: 48px 32px 52px 36px / 36px 50px 32px 46px;
background:
radial-gradient(120% 90% at 18% 40%, rgb(182 92 50 / 0.22), transparent 55%),
linear-gradient(140deg, #3E2C23 0%, #4A3428 55%, #5A4032 100%);
}
.sf-band { background: var(--b-grain), var(--b-ivory); }
.sf-band__wave { fill: color-mix(in srgb, var(--b-ivory) 94%, #4A3329); }
.sf-band__wave path { filter: url(#b-rough); }
.sf-band__panel {
background:
var(--b-grain),
radial-gradient(60% 50% at 70% 20%, rgb(222 150 102 / 0.4), transparent 70%),
linear-gradient(160deg, #B0582F, var(--b-burnt) 60%, #93421F);
}
.sf-band__title { color: var(--b-ivory); }
.sf-band__title em { color: #F7D3A8; }
.sf-band__base {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 12px 28px;
padding: 18px clamp(20px, 5vw, 88px);
border: 0;
border-top: 1px solid rgb(210 175 142 / 0.28);
background: var(--b-grain), #22140F;
color: rgb(245 237 224 / 0.74);
font-size: 0.875rem;
line-height: 1.6;
}
.sf-credit {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.sf-credit strong { color: #F2CF92; font-weight: 700; transition: color 0.3s ease; }
.sf-credit:hover { color: var(--b-ivory); }
.sf-credit:hover strong { color: #FFE6BD; }
.sf-credit__logo {
flex: none;
width: auto;
height: 38px;
opacity: 0.92;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.sf-credit:hover .sf-credit__logo { opacity: 1; transform: translateY(-2px) scale(1.06); }
.sf-rights { margin: 0; justify-self: center; text-align: center; }
.sf-rights__sep { margin-inline: 10px; opacity: 0.5; }
.sf-rights a { color: inherit; text-decoration: underline 1px; text-underline-offset: 0.35em; text-decoration-color: rgb(242 207 146 / 0.4); }
.sf-band__base a:hover { color: #F7D3A8; }
.site-footer .sf-band__base a:focus-visible { outline-color: #F2CF92; }
.sf-flag {
justify-self: end;
display: block;
width: 46px;
filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.45));
transform-origin: 0 50%;
}
.sf-flag svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
.sf-flag { animation: sf-flag-wave 4.5s ease-in-out infinite alternate; }
.sf-flag__shade { animation: sf-flag-sheen 4.5s ease-in-out infinite alternate; }
}
@keyframes sf-flag-wave {
from { transform: perspective(200px) rotateY(-8deg) skewY(-1.5deg); }
to { transform: perspective(200px) rotateY(6deg) skewY(1.5deg); }
}
@keyframes sf-flag-sheen {
from { transform: translateX(-24px); }
to { transform: translateX(24px); }
}
@media (max-width: 767.98px) {
.sf-band__base { padding-bottom: calc(18px + 72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 719.98px) {
.sf-band__base { grid-template-columns: 1fr; justify-items: center; gap: 10px; text-align: center; }
.sf-credit,
.sf-rights,
.sf-flag { justify-self: center; }
.sf-flag { order: -1; width: 40px; }
}
.b-flora {
position: absolute;
z-index: 1;
width: var(--w, 120px);
max-width: none;
height: auto;
pointer-events: none;
user-select: none;
transform-origin: 50% 100%;
filter: drop-shadow(0 2px 2px rgb(73 51 41 / 0.18)) drop-shadow(0 10px 12px rgb(73 51 41 / 0.12));
will-change: rotate;
animation: b-breeze 9s ease-in-out infinite alternate;
}
.b-flora--services,
.b-flora--try,
.b-flora--why,
.b-flora--why-b,
.b-flora--booking,
.b-flora--appt,
.b-flora--faq-b {
mix-blend-mode: multiply;
filter: sepia(0.12) saturate(0.92) drop-shadow(0 1px 1px rgb(73 51 41 / 0.12)) drop-shadow(0 6px 8px rgb(73 51 41 / 0.08));
}
.b-flora--band {
mix-blend-mode: normal;
filter:
saturate(1.04) brightness(1.03)
drop-shadow(0 1px 1px rgb(73 51 41 / 0.28))
drop-shadow(0 8px 12px rgb(58 30 18 / 0.22));
}
.b-flora--hero,
.b-flora--mirror,
.b-flora--final,
.b-flora--faq { filter: drop-shadow(0 3px 3px rgb(50 25 12 / 0.3)) drop-shadow(0 12px 16px rgb(50 25 12 / 0.22)); }
@keyframes b-breeze {
from { rotate: -1.4deg; }
to { rotate: 1.6deg; }
}
.b-flora--desk { display: none; }
.hero__sprig:not(.hero__sprig--b) { display: none; }
.helper__sprig,
.final__sprig { display: none !important; }
.b-flora--hero {
--w: 112px;
z-index: 4;
top: calc(var(--header-h) + 20px + (100vw - 2 * var(--gutter)) * 1.25 - 124px);
left: calc(var(--gutter) + 12px);
transform: scaleX(-1);
animation-duration: 11s;
}
@media (min-width: 600px) {
.b-flora--hero {
--w: 146px;
top: calc(var(--header-h) + 20px + (100vw - 2 * var(--gutter)) * 0.75 - 158px);
left: calc(var(--gutter) + 14px);
}
}
.b-flora--services { --w: 160px; top: calc(var(--header-h-compact) - 6px); right: 30px; transform: rotate(10deg); opacity: 0.95; }
.try__stage > .b-flora--mirror {
--w: 104px;
position: absolute;
z-index: 2;
top: 14px;
left: max(18px, calc(50% - 300px));
transform: rotate(-10deg);
animation-delay: -2s;
}
.b-flora--try { --w: 62px; bottom: 6px; right: 3%; animation-delay: -5s; }
.b-flora--why {
--w: 132px;
top: calc(var(--b-div-h) - 22px);
left: 8px;
transform-origin: 0 0;
animation-delay: -1s;
}
.b-flora--why-b { --w: 112px; bottom: 12px; right: 1.5%; transform: rotate(-4deg); }
.b-flora--appt { --w: 70px; z-index: 3; bottom: -26px; right: 4px; transform: rotate(12deg); animation-delay: -4s; }
.b-flora--booking { --w: 66px; top: calc(var(--b-div-h) - 46px); left: 22px; transform: rotate(-6deg) scaleX(-1); }
.b-flora--faq { --w: 84px; z-index: 2; top: calc(var(--b-div-h) + 30px); left: calc(var(--gutter) - 26px); transform: rotate(-14deg); }
.b-flora--faq-b { --w: 70px; bottom: 14px; left: 10px; animation-delay: -6s; }
@media (max-width: 1023.98px) { .faq { padding-bottom: 140px; } }
.b-flora--final {
--w: 168px;
z-index: 3;
top: -46px;
right: 30px;
transform: rotate(6deg) scaleX(-1);
animation-duration: 10s;
}
.b-flora--band { --w: 66px; z-index: 2; bottom: 258px; right: 22px; transform: rotate(10deg); animation-delay: -2s; }
.b-flora--band-b { --w: 140px; top: -104px; left: 44%; transform: rotate(-8deg); }
@media (min-width: 900px) {
.b-flora--band { --w: 84px; bottom: 18px; right: auto; left: calc(32% + 10px); transform: rotate(-10deg); }
}
@media (min-width: 1024px) {
.b-flora--desk { display: block; }
.b-flora--hero {
--w: 210px;
grid-column: 2;
grid-row: 1;
top: auto;
left: auto;
right: calc(clamp(32px, 4vw, 72px) - 88px - 10px);
bottom: calc(var(--b-div-h) + 24px - 73px - 2px);
transform: rotate(-4deg);
}
.try__stage > .b-flora--mirror { --w: 140px; top: 6px; }
.b-flora--why { --w: 290px; left: 12px; top: calc(var(--b-div-h) - 28px); }
.b-flora--appt { --w: 98px; bottom: -38px; right: -28px; }
.b-flora--faq-b { --w: 96px; bottom: 24px; left: auto; right: 2%; }
.b-flora--final {
--w: 240px;
top: auto;
right: auto;
bottom: -84px;
left: calc(45% - 122px);
transform: rotate(-3deg);
}
.final { padding-bottom: 136px; }
}
.btn::after { display: none; }
@media (prefers-reduced-motion: reduce) {
.stop__media,
.btn { transition: none; }
.stop:hover .stop__media { translate: none; }
}
@media (max-width: 1023.98px) {
.services--doors .door { border-width: 5px; }
.final__media { rotate: -1deg; }
.stop__media { padding: 8px 8px 24px; }
.services__sprig,
.why__sprig,
.helper__sprig,
.hero__sprig { display: none; }
}
@media (max-width: 599.98px) {
.hero__media { border-width: 8px; }
.hero__sprig { display: none; }
.b-script { font-size: 1.2rem; }
.helper { border-radius: 34px 26px 90px 30px / 30px 36px 70px 26px; }
.final__panel { border-radius: 34px 26px 40px 24px / 26px 38px 24px 36px; }
}
/* motion.css */
:root {
--m-expo: cubic-bezier(0.16, 1, 0.3, 1);
--m-inout: cubic-bezier(0.65, 0, 0.35, 1);
--bloom-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-52 -52 104 104'%3E%3Cg fill='black'%3E%3Cpath id='p' d='M0 -3C-12 -7 -27 -19 -27.5 -32C-28 -42 -19 -48.5 -10.5 -46C-6 -49.5 -2 -49 0 -46.5C2.5 -49.5 7 -49.5 11 -46.5C19.5 -48.5 28 -41.5 27 -31.5C26 -18 12 -7 0 -3Z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3Ccircle r='17'/%3E%3C/g%3E%3C/svg%3E");
}
.sprig,
.services__sprig,
.why__sprig,
.helper__sprig,
.final__sprig,
.hero__sprig { animation: none; }
.try__stage::before,
.booking__aside::before,
.hero__text::before,
.hero__photo--main,
.mirror,
.door__icon,
.sf-place__rings,
.sf-place__stage::before,
.sf-seal__ring { animation: none; }
.b-flora { animation: none; }
.b-flora--why-b,
.b-flora--try { animation: b-breeze 9s ease-in-out infinite alternate; }
.motion-ready .sf-reel__track { animation: none; will-change: transform; }
.motion-ready .w { display: inline-block; }
.motion-ready .w__i {
display: inline-block;
padding-block: 0.12em;
margin-block: -0.12em;
opacity: 0;
transform: translateY(0.4em);
filter: blur(8px);
transition:
opacity 0.9s var(--m-expo),
transform 1.1s var(--m-expo),
filter 1s var(--m-expo),
background-position 1.4s var(--m-inout);
transition-delay: calc(var(--wi, 0) * 90ms + 60ms);
}
.motion-ready .is-inview .w__i {
opacity: 1;
transform: none;
filter: none;
}
.motion-ready .w--ink .w__i {
background: linear-gradient(to left, var(--ink-a) 50%, var(--ink-b) 50%) 0 0 / 200% 100% no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.motion-ready .is-inview .w--ink .w__i {
background-position: 100% 0;
transition-delay: calc(var(--wi, 0) * 90ms + 60ms), calc(var(--wi, 0) * 90ms + 60ms), calc(var(--wi, 0) * 90ms + 60ms), calc(var(--wi, 0) * 90ms + 520ms);
}
.hero .rule.rule--thread {
width: 120px;
height: 10px;
background: none;
opacity: 0.95;
}
.rule--thread svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rule--thread path {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.b-stitch {
fill: none;
stroke: var(--b-terracotta);
stroke-opacity: 0.5;
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transform: translateY(9px);
filter: url(#b-rough);
}
.hero__wave .b-stitch { stroke: var(--b-burnt); stroke-opacity: 0.45; }
.b-div--footer .b-stitch,
.sf-band__wave .b-stitch { stroke: var(--b-sand); stroke-opacity: 0.6; }
.b-div path,
.hero__wave path { transition: transform 0.2s linear; }
.journey__line path { stroke: var(--b-terracotta); stroke-width: 1.8; stroke-linecap: round; }
.final__ring rect { stroke: #F7D3A8; stroke-width: 1.6; }
html.intro .hero__media {
-webkit-mask: var(--bloom-mask) 50% 52% / 0% auto no-repeat;
mask: var(--bloom-mask) 50% 52% / 0% auto no-repeat;
}
html.intro .hero__media.is-blooming { animation: bloom-open 1.6s 0.5s cubic-bezier(0.7, 0, 0.2, 1) both; }
@keyframes bloom-open {
from { -webkit-mask-size: 0% auto; mask-size: 0% auto; }
to { -webkit-mask-size: 360% auto; mask-size: 360% auto; }
}
html.intro .hero__photo--main { scale: 1.14; }
html.intro .hero__media.is-blooming .hero__photo--main {
scale: 1;
transition: scale 2.4s var(--m-expo) 0.5s;
}
.hero__arch-line {
position: absolute;
inset: 0;
z-index: 5;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.hero__arch-line path {
fill: none;
stroke: #E9C08F;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.hero__light {
display: block;
z-index: 1;
background: radial-gradient(closest-side, rgb(255 222 182 / 0.34), rgb(255 222 182 / 0));
mix-blend-mode: soft-light;
}
.motion-ready .hero__photo--dept {
-webkit-mask: var(--bloom-mask) center / 0% auto no-repeat;
mask: var(--bloom-mask) center / 0% auto no-repeat;
transition:
opacity 0.3s var(--ease-out),
-webkit-mask-size 1.1s var(--m-expo),
mask-size 1.1s var(--m-expo);
}
.motion-ready .hero__photo--dept.is-visible {
-webkit-mask-size: 360% auto;
mask-size: 360% auto;
}
.services--doors .door::before {
content: "";
position: absolute;
inset: -10% -30%;
z-index: 1;
pointer-events: none;
background: linear-gradient(110deg, transparent 38%, rgb(255 226 188 / 0.42) 48%, rgb(255 238 214 / 0.16) 54%, transparent 64%);
mix-blend-mode: screen;
opacity: 0;
}
.motion-ready .services--doors .door.is-open::before { animation: room-light 1.9s var(--m-inout) both; }
@keyframes room-light {
0% { transform: translateX(45%); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateX(-45%); opacity: 0; }
}
.motion-ready .services--doors .door.is-open .door__photo {
transform: scale(1.08);
transition: transform 7s var(--m-expo);
}
.door__flora {
position: absolute;
top: 18px;
left: 16px;
z-index: 2;
width: 58px;
height: auto;
pointer-events: none;
filter: drop-shadow(0 3px 3px rgb(30 15 8 / 0.35)) drop-shadow(0 10px 14px rgb(30 15 8 / 0.25));
opacity: 0;
transform: translateY(-12px) rotate(-14deg) scale(1.1);
transition: opacity 0.7s var(--m-expo) 0.4s, transform 1.2s var(--m-expo) 0.4s;
}
.door__flora--derma { width: 92px; transform: translateY(-12px) rotate(-24deg) scale(1.1); }
.door__flora--dental { width: 44px; }
.door__flora--bath { width: 46px; }
.door.is-open .door__flora { opacity: 1; transform: rotate(-8deg); }
.door.is-open .door__flora--derma { transform: rotate(-18deg); }
@media (max-width: 1023.98px) {
.door__flora { opacity: 1; transform: rotate(-8deg); }
.door__flora--derma { transform: rotate(-18deg); }
}
.mirror__sheen {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: linear-gradient(105deg, transparent 32%, rgb(255 250 240 / 0.38) 47%, rgb(255 250 240 / 0) 58%);
opacity: 0;
}
.mirror.is-breathing .mirror__sheen { animation: sheen 2.3s 0.15s var(--m-inout) both; }
@keyframes sheen {
from { transform: translateX(70%); opacity: 1; }
to { transform: translateX(-70%); opacity: 1; }
}
.motion-ready .mirror__split:not(.is-swapping) .mirror__img { animation: iris 1.1s var(--m-expo) both; }
@keyframes iris {
from { clip-path: ellipse(0% 0% at 50% 42%); }
to { clip-path: ellipse(100% 100% at 50% 42%); }
}
.mirror__divider { transform-origin: 50% 100%; rotate: var(--lean, 0deg); }
.motion-ready .mirror__slide.is-active img { animation: drift-a 7s ease-out both; }
.motion-ready .mirror__slide:nth-child(even).is-active img { animation-name: drift-b; }
@keyframes drift-a {
from { transform: scale(1.12) translate(2%, 1.5%); }
to { transform: scale(1.02); }
}
@keyframes drift-b {
from { transform: scale(1.02) translate(-1.5%, 0); }
to { transform: scale(1.12) translate(1.5%, -1%); }
}
.mirror__caption.is-writing { animation: write 0.9s var(--m-expo) both; }
@keyframes write {
from { clip-path: inset(-20% 0 -20% 100%); opacity: 0.3; }
to { clip-path: inset(-20% 0 -20% 0); opacity: 1; }
}
.motion-ready .stop .stop__media {
transition:
opacity 0.8s var(--m-expo),
transform 1.3s var(--m-expo),
filter 1.9s ease 0.3s,
box-shadow 1.3s var(--m-expo),
rotate 0.6s var(--ease-out),
translate 0.6s var(--ease-out);
}
.motion-ready .stop:not(.is-reached) .stop__media {
opacity: 0;
transform: translateY(-28px) rotate(5deg) scale(1.06);
filter: sepia(1) contrast(0.7) brightness(1.12);
box-shadow: 0 48px 60px -26px rgb(73 51 41 / 0.32);
}
.motion-ready .appt__form { perspective: 1400px; }
.motion-ready .appt__step.is-entering { transform-origin: 100% 50%; animation: page-in 0.6s var(--m-expo) both; }
.motion-ready .appt__step.is-entering-back { transform-origin: 0 50%; animation: page-in-back 0.6s var(--m-expo) both; }
@keyframes page-in {
from { opacity: 0; transform: rotateY(-16deg) translateX(-14px); }
to { opacity: 1; transform: none; }
}
@keyframes page-in-back {
from { opacity: 0; transform: rotateY(16deg) translateX(14px); }
to { opacity: 1; transform: none; }
}
.motion-ready .appt .chip[aria-checked="true"] .chip__dot { animation: stamp 0.55s var(--m-expo); }
@keyframes stamp {
0% { transform: scale(2.4); opacity: 0.2; box-shadow: 0 0 0 6px rgb(166 75 41 / 0.3); }
60% { transform: scale(0.85); opacity: 1; }
100% { transform: none; box-shadow: 0 0 0 0 rgb(166 75 41 / 0); }
}
.motion-ready .appt:has(.appt__done:not([hidden])) { animation: letter-seal 0.9s var(--m-expo); }
@keyframes letter-seal {
0% { transform: scale(0.965) rotateX(8deg); }
45% { transform: scale(0.985); }
100% { transform: none; }
}
.motion-ready .appt__done:not([hidden]) .appt__done-seal { animation: seal-press 1s 0.1s var(--m-expo) both; }
@keyframes seal-press {
0% { transform: scale(1.7) rotate(-28deg); opacity: 0; }
55% { transform: scale(0.93) rotate(0deg); opacity: 1; }
100% { transform: none; opacity: 1; }
}
.appt__done-flora {
width: 112px;
height: auto;
margin-block: -4px -2px;
filter: drop-shadow(0 2px 2px rgb(73 51 41 / 0.2)) drop-shadow(0 8px 10px rgb(73 51 41 / 0.14));
}
.motion-ready .appt__done:not([hidden]) .appt__done-flora { animation: flora-land 1.2s 0.6s var(--m-expo) both; }
@keyframes flora-land {
from { opacity: 0; transform: translateY(-46px) rotate(-20deg) scale(1.12); }
to { opacity: 1; transform: none; }
}
.motion-ready .helper__photo img {
clip-path: inset(0 0 0 100%);
transition: clip-path 0.9s var(--m-inout), opacity 0s 0.9s;
}
.motion-ready .helper__photo img.is-on {
z-index: 1;
clip-path: inset(0);
opacity: 1;
transition: clip-path 0.9s var(--m-inout), opacity 0s;
}
.motion-ready .helper__answer > * { animation: write 0.8s var(--m-expo) both; }
.motion-ready .qa .qa__n { display: inline-block; transition: transform 0.6s var(--m-expo); }
.motion-ready .qa[open] .qa__n { transform: rotate(-12deg); }
.motion-ready .qa[open] .qa__a p { animation: write 0.8s 0.08s var(--m-expo) both; }
.qa__a::after {
content: "";
display: block;
width: 96px;
height: 1.6px;
margin: -12px calc(2.2ch * 1.555 + 18px) 18px 0;
border-radius: 2px;
background: var(--b-terracotta);
opacity: 0.6;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform 0.9s var(--m-inout) 0.25s;
}
.qa[open] .qa__a::after { transform: scaleX(1); }
.motion-ready .final__panel .final__media {
transition:
opacity 0.8s var(--m-expo),
transform 1.4s var(--m-expo),
filter 1.9s ease 0.25s;
}
.reveal-ready .final__panel:not(.is-in) .final__media {
opacity: 0;
transform: translateY(-34px) rotate(6deg) scale(1.05);
filter: sepia(1) contrast(0.72) brightness(1.1);
}
.final .btn--light::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgb(255 206 160 / 0.55), transparent 70%);
opacity: 0;
transition: opacity 0.4s var(--ease-out);
}
.final .btn--light:hover::before { opacity: 1; }
.sf-place__route {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.sf-place__route path {
fill: none;
stroke: #E9C08F;
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: 0.85;
}
.motion-ready .sf-band .sf-band__panel,
.motion-ready .sf-band .sf-band__photo {
transition: opacity 1s var(--m-expo), transform 1.3s var(--m-expo);
}
.motion-ready .sf-band .sf-band__photo { transition-delay: 0.2s; }
.motion-ready .sf-band:not(.is-in) .sf-band__panel { opacity: 0; transform: translateX(56px); }
.motion-ready .sf-band:not(.is-in) .sf-band__photo { opacity: 0; transform: translateX(-40px); }
.motion-ready .b-flora {
transition:
opacity 0.9s var(--m-expo),
scale 1.3s var(--m-expo),
translate 1.3s var(--m-expo),
rotate 0.8s var(--ease-out);
}
.motion-ready .b-flora:not(.is-placed) {
opacity: 0;
scale: 1.09;
translate: 0 -16px;
}
.site-nav__underline {
bottom: 6px;
height: 7px;
background: var(--b-burnt);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4C20 1.8 34 5.6 52 3.6S82 2.2 99 4.2' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4C20 1.8 34 5.6 52 3.6S82 2.2 99 4.2' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.site-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -7px;
height: 8px;
background: rgb(245 237 224 / 0.96);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V4C560 7 530 2 495 5S430 8 400 4 340 1 300 5 230 8 190 4 120 2 80 6 20 3 0 5Z'/%3E%3C/svg%3E") 0 0 / 600px 100% repeat-x;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V4C560 7 530 2 495 5S430 8 400 4 340 1 300 5 230 8 190 4 120 2 80 6 20 3 0 5Z'/%3E%3C/svg%3E") 0 0 / 600px 100% repeat-x;
pointer-events: none;
}
/* signature.css */
.mirror__fog {
position: absolute;
inset: 0;
z-index: 6;
width: 100%;
height: 100%;
border-radius: inherit;
touch-action: pan-y;
cursor: crosshair;
opacity: 0;
pointer-events: none;
transition: opacity 1.1s var(--m-expo);
}
.mirror.is-fogged .mirror__fog { opacity: 1; pointer-events: auto; }
.mirror__fog-hint {
position: absolute;
left: 50%;
top: 50%;
z-index: 7;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid rgb(73 51 41 / 0.14);
border-radius: 999px;
background: rgb(251 246 236 / 0.82);
color: var(--b-espresso);
font: 600 0.9rem/1.3 var(--font);
white-space: nowrap;
translate: -50% -50%;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(--ease-out), scale 0.5s var(--m-expo);
box-shadow: 0 10px 24px -14px rgb(73 51 41 / 0.6);
}
.mirror__fog-hint svg { width: 20px; height: 20px; fill: none; stroke: var(--b-burnt); stroke-width: 1.7; stroke-linecap: round; }
.mirror.is-fogged:not(.is-wiping) .mirror__fog-hint { opacity: 1; pointer-events: auto; animation: hint-breathe 2.6s ease-in-out infinite; }
.mirror.is-fogged.is-wiping .mirror__fog-hint { opacity: 0; scale: 0.9; }
.mirror__fog-hint:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--b-burnt); outline-offset: 3px; }
@keyframes hint-breathe {
0%, 100% { scale: 1; }
50% { scale: 1.04; }
}
.b-petals {
position: fixed;
inset: 0;
z-index: 45;
pointer-events: none;
overflow: hidden;
}
.b-petal {
position: absolute;
left: -17px;
top: -15px;
width: 34px;
height: 30px;
opacity: 0;
background: url("../assets/boho_floral_assets/bloom-rose.webp") 50% 4% / 260% auto no-repeat;
clip-path: path("M17 30C8 26 0 17 0 10 0 3 6 0 10 1 13-1 21-1 24 1 28 0 34 3 34 10 34 17 26 26 17 30Z");
will-change: transform, opacity;
}
.b-petal--1 { background-image: url("../assets/boho_floral_assets/bloom-cream.webp"); }
.b-petal--2 { background-position: 50% 96%; }
.door__fx {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s var(--m-expo) 0.3s;
}
.sig-on .door.is-open .door__fx { opacity: 1; }
@media (max-width: 1023.98px) {
.sig-on .door.is-live .door__fx { opacity: 1; }
}
.door__fx i { position: absolute; display: block; }
.door__fx--bath i {
bottom: -25%;
width: 55%;
height: 75%;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 60%, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0) 66%);
filter: blur(16px);
opacity: 0;
animation: steam 6.5s ease-in infinite;
}
.door__fx--bath i:nth-child(1) { left: 5%; }
.door__fx--bath i:nth-child(2) { left: 32%; animation-delay: -2.2s; }
.door__fx--bath i:nth-child(3) { left: 55%; animation-delay: -4.4s; }
@keyframes steam {
0% { transform: translateY(15%) scale(0.75); opacity: 0; }
25% { opacity: 0.9; }
100% { transform: translate(12%, -78%) scale(1.35); opacity: 0; }
}
.door__fx--dental i:nth-child(1) {
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.55) 49%, rgb(255 255 255 / 0) 57%);
mix-blend-mode: screen;
animation: gleam 5s 0.5s ease-in-out infinite;
}
.door__fx--dental i:nth-child(2) {
left: 47%;
top: 52%;
width: 26px;
height: 26px;
background:
linear-gradient(transparent 46%, #FFFDF8 46% 54%, transparent 54%),
linear-gradient(90deg, transparent 46%, #FFFDF8 46% 54%, transparent 54%);
border-radius: 50%;
filter: drop-shadow(0 0 6px rgb(255 250 235 / 0.9));
animation: twinkle-star 5s 0.5s ease-in-out infinite;
}
@keyframes gleam {
0% { transform: translateX(70%); opacity: 0; }
6% { opacity: 1; }
28% { transform: translateX(-70%); opacity: 1; }
32%, 100% { transform: translateX(-70%); opacity: 0; }
}
@keyframes twinkle-star {
0%, 22% { transform: scale(0) rotate(0deg); opacity: 0; }
28% { transform: scale(1) rotate(45deg); opacity: 1; }
38%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
.door__fx--skin i:nth-child(1) {
left: 20%;
top: 18%;
width: 60%;
height: 50%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(255 236 214 / 0.42), rgb(255 236 214 / 0));
mix-blend-mode: screen;
animation: dew-glow 4.5s ease-in-out infinite alternate;
}
.door__fx--skin i:not(:first-child) {
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFFDF6;
box-shadow: 0 0 8px 2px rgb(255 250 235 / 0.85);
opacity: 0;
animation: dew 3.6s ease-in-out infinite;
}
.door__fx--skin i:nth-child(2) { left: 38%; top: 30%; }
.door__fx--skin i:nth-child(3) { left: 55%; top: 26%; animation-delay: -0.8s; }
.door__fx--skin i:nth-child(4) { left: 47%; top: 44%; animation-delay: -1.6s; }
.door__fx--skin i:nth-child(5) { left: 62%; top: 40%; animation-delay: -2.4s; }
.door__fx--skin i:nth-child(6) { left: 33%; top: 47%; animation-delay: -3s; }
@keyframes dew-glow {
from { opacity: 0.55; transform: scale(0.95); }
to { opacity: 1; transform: scale(1.06); }
}
@keyframes dew {
0%, 100% { opacity: 0; transform: scale(0.4); }
45% { opacity: 1; transform: scale(1); }
}
.door__fx--derma i {
inset: -20%;
background: url("../assets/boho_floral_assets/leaf-branch.webp") 30% 30% / 75% auto no-repeat;
filter: brightness(0) blur(6px);
opacity: 0.22;
mix-blend-mode: multiply;
animation: leaf-drift 10s ease-in-out infinite alternate;
}
@keyframes leaf-drift {
from { transform: translate(-6%, -3%) rotate(-6deg); }
to { transform: translate(8%, 5%) rotate(5deg); }
}
.door__fx--aura i {
bottom: -6%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #FFE7C2;
box-shadow: 0 0 10px 3px rgb(255 214 160 / 0.75);
opacity: 0;
animation: mote 7s linear infinite;
}
.door__fx--aura i:nth-child(1) { left: 12%; }
.door__fx--aura i:nth-child(2) { left: 26%; animation-delay: -1.2s; animation-duration: 8s; }
.door__fx--aura i:nth-child(3) { left: 40%; animation-delay: -2.6s; }
.door__fx--aura i:nth-child(4) { left: 54%; animation-delay: -3.4s; animation-duration: 9s; }
.door__fx--aura i:nth-child(5) { left: 66%; animation-delay: -4.8s; }
.door__fx--aura i:nth-child(6) { left: 78%; animation-delay: -5.5s; animation-duration: 7.6s; }
.door__fx--aura i:nth-child(7) { left: 20%; animation-delay: -6.1s; width: 4px; height: 4px; }
.door__fx--aura i:nth-child(8) { left: 60%; animation-delay: -0.4s; width: 4px; height: 4px; }
.door__fx--aura i:nth-child(9) { left: 86%; animation-delay: -3.9s; width: 4px; height: 4px; }
@keyframes mote {
0% { transform: translate(0, 0); opacity: 0; }
15% { opacity: 1; }
50% { transform: translate(14px, -45vh); }
85% { opacity: 0.9; }
100% { transform: translate(-6px, -90vh); opacity: 0; }
}
.b-dapple {
position: fixed;
inset: -14%;
z-index: 40;
pointer-events: none;
background: #2F2A1C;
opacity: 0.05;
-webkit-mask:
url("../assets/boho_floral_assets/leaf-branch.webp") 6% 8% / 34% auto no-repeat,
url("../assets/boho_floral_assets/leafy-sprig.webp") 96% 72% / 22% auto no-repeat,
url("../assets/boho_floral_assets/leaf-branch.webp") 74% 2% / 26% auto no-repeat,
url("../assets/boho_floral_assets/leafy-sprig.webp") 14% 96% / 18% auto no-repeat;
mask:
url("../assets/boho_floral_assets/leaf-branch.webp") 6% 8% / 34% auto no-repeat,
url("../assets/boho_floral_assets/leafy-sprig.webp") 96% 72% / 22% auto no-repeat,
url("../assets/boho_floral_assets/leaf-branch.webp") 74% 2% / 26% auto no-repeat,
url("../assets/boho_floral_assets/leafy-sprig.webp") 14% 96% / 18% auto no-repeat;
filter: blur(11px);
transform: translate3d(var(--dx, 0), var(--dy, 0), 0);
transition: transform 1.4s var(--m-expo);
animation: dapple 18s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes dapple {
from { rotate: -1.5deg; scale: 1; }
to { rotate: 2deg; scale: 1.04; }
}
@media (max-width: 767.98px) {
.b-dapple { opacity: 0.04; }
}
.sf-band__panel.has-signature .sf-band__sprig { display: none; }
.b-signature {
position: relative;
display: block;
width: max-content;
max-width: 100%;
margin-top: 22px;
padding: 4px 6px 0;
}
.b-signature__word {
display: block;
font: 700 clamp(3.4rem, 2.6rem + 3vw, 5rem) / 1.15 "Aref Ruqaa", var(--font-display);
background: linear-gradient(100deg, #A86E2E 0%, #E8BE7C 16%, #FFF4DA 30%, #F2CF92 40%, #B8813F 54%, #F6D9A4 70%, #FFF1D2 80%, #C38E4C 100%);
background-size: 240% 100%;
background-position: 0% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 1.5px 0 rgb(110 46 22 / 0.6)) drop-shadow(0 8px 16px rgb(58 20 8 / 0.35));
-webkit-mask: linear-gradient(to left, #000 42%, transparent 58%) 0 0 / 300% 100% no-repeat;
mask: linear-gradient(to left, #000 42%, transparent 58%) 0 0 / 300% 100% no-repeat;
}
.b-signature__swash {
display: block;
width: min(100%, 15rem);
height: auto;
margin: -0.55em 0 0 auto;
overflow: visible;
}
.b-signature__line {
fill: none;
stroke: url(#b-sig-gold);
stroke-width: 1.8;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.b-signature__leaf,
.b-signature__dot {
fill: #F2CF92;
opacity: 0;
transform-box: fill-box;
transform-origin: 50% 100%;
}
.b-signature__spark {
position: absolute;
width: 12px;
height: 12px;
background: #FFF1D2;
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
filter: drop-shadow(0 0 5px rgb(255 214 150 / 0.95));
opacity: 0;
pointer-events: none;
}
.b-signature__spark:nth-of-type(1) { top: 2px; right: -4px; }
.b-signature__spark:nth-of-type(2) { top: 38%; left: -10px; width: 8px; height: 8px; }
.b-signature__spark:nth-of-type(3) { bottom: 18%; right: 34%; width: 7px; height: 7px; }
.sf-band.is-in .b-signature__word {
animation:
write-ink 2.2s 0.6s var(--m-inout) both,
sig-foil 7s 3.2s ease-in-out infinite;
}
.sf-band.is-in .b-signature__line { animation: sig-draw 1.4s 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.sf-band.is-in .b-signature__leaf { animation: sig-leaf 0.7s 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.sf-band.is-in .b-signature__leaf--2 { animation-delay: 3.45s; }
.sf-band.is-in .b-signature__dot { animation: sig-leaf 0.5s 3.6s ease-out forwards; }
.sf-band.is-in .b-signature__spark { animation: sig-twinkle 3.6s 3.4s ease-in-out infinite; }
.sf-band.is-in .b-signature__spark:nth-of-type(2) { animation-delay: 4.6s; }
.sf-band.is-in .b-signature__spark:nth-of-type(3) { animation-delay: 5.5s; }
@keyframes write-ink {
from { -webkit-mask-position: 0 0; mask-position: 0 0; }
to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes sig-foil {
0%, 55% { background-position: 0% 0; }
85%, 100% { background-position: 100% 0; }
}
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@keyframes sig-leaf {
from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
to { opacity: 1; transform: none; }
}
@keyframes sig-twinkle {
0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0); }
82% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
.b-signature__word { -webkit-mask: none; mask: none; animation: none !important; }
.b-signature__line { stroke-dashoffset: 0; animation: none !important; }
.b-signature__leaf,
.b-signature__dot { opacity: 1; animation: none !important; }
.b-signature__spark { display: none; }
}
.b-press {
position: fixed;
inset: 0;
z-index: 46;
pointer-events: none;
visibility: hidden;
}
.b-press__sheet {
position: absolute;
left: -4%;
right: -4%;
height: 50.5%;
background: var(--b-grain), radial-gradient(70% 90% at 50% 50%, #FBF6EC, #EFE4D3);
will-change: transform;
}
.b-press__sheet--top {
top: 0;
transform: translateY(-100%);
-webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 14px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V6C560 12 530 3 495 8S430 14 400 7 340 2 300 9 230 13 190 6 120 3 80 10 20 5 0 8Z'/%3E%3C/svg%3E") 0 100% / 600px 14px repeat-x;
mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 14px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V6C560 12 530 3 495 8S430 14 400 7 340 2 300 9 230 13 190 6 120 3 80 10 20 5 0 8Z'/%3E%3C/svg%3E") 0 100% / 600px 14px repeat-x;
filter: drop-shadow(0 10px 18px rgb(73 51 41 / 0.25));
}
.b-press__sheet--bottom {
bottom: 0;
transform: translateY(100%);
-webkit-mask: linear-gradient(#000, #000) 0 100% / 100% calc(100% - 14px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14H600V8C560 2 530 11 495 6S430 0 400 7 340 12 300 5 230 1 190 8 120 11 80 4 20 9 0 6Z'/%3E%3C/svg%3E") 0 0 / 600px 14px repeat-x;
mask: linear-gradient(#000, #000) 0 100% / 100% calc(100% - 14px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14H600V8C560 2 530 11 495 6S430 0 400 7 340 12 300 5 230 1 190 8 120 11 80 4 20 9 0 6Z'/%3E%3C/svg%3E") 0 0 / 600px 14px repeat-x;
}
.b-press__sheet--top img {
position: absolute;
left: 50%;
bottom: 10%;
width: min(42vw, 360px);
height: auto;
opacity: 0.16;
mix-blend-mode: multiply;
filter: grayscale(0.6) sepia(0.4);
translate: -50% 0;
}
.sig-on #why .b-flora.is-pressed { animation: press-flat 1.2s var(--m-expo) both; }
@keyframes press-flat {
0% { transform: perspective(600px) rotateX(38deg) scale(1.16); filter: drop-shadow(0 24px 22px rgb(73 51 41 / 0.35)); }
100% { transform: none; }
}
.deal-ready .stop:not(.is-reached) .stop__media {
z-index: var(--deal-z, 1);
opacity: 1;
transform: translate(var(--deal-x, 0), var(--deal-y, 0)) rotate(var(--deal-r, 0deg)) scale(0.96);
filter: sepia(1) contrast(0.72) brightness(1.1);
box-shadow: 0 18px 30px -18px rgb(73 51 41 / 0.45);
}
.deal-ready .stop .stop__media {
position: relative;
transition:
transform 1.1s var(--m-expo),
filter 1.8s ease 0.4s,
box-shadow 1.1s var(--m-expo),
rotate 0.6s var(--ease-out),
translate 0.6s var(--ease-out);
}
.deal-ready .stop:not(.is-reached) { z-index: 3; }
.appt__wax-wrap {
position: relative;
display: grid;
place-items: center;
width: 150px;
height: 150px;
}
.appt__wax-wrap .appt__done-seal { position: relative; z-index: 1; width: 96px; height: 96px; }
.appt__wax {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.wax-drop,
.wax-pool { transform-box: fill-box; transform-origin: center; }
.wax-pool { transform: scale(0); }
.wax-ring { fill: none; stroke: rgb(255 240 220 / 0.22); stroke-width: 2; opacity: 0; }
.sig-on .appt__done:not([hidden]) .wax-drop { animation: wax-fall 0.75s var(--m-inout) both; }
.sig-on .appt__done:not([hidden]) .wax-drop--1 { --wx: -46px; --wy: -70px; }
.sig-on .appt__done:not([hidden]) .wax-drop--2 { --wx: 38px; --wy: -78px; animation-delay: 0.08s; }
.sig-on .appt__done:not([hidden]) .wax-drop--3 { --wx: 62px; --wy: -20px; animation-delay: 0.16s; }
.sig-on .appt__done:not([hidden]) .wax-drop--4 { --wx: -64px; --wy: -14px; animation-delay: 0.22s; }
.sig-on .appt__done:not([hidden]) .wax-drop--5 { --wx: 4px; --wy: -96px; animation-delay: 0.3s; }
.sig-on .appt__done:not([hidden]) .wax-pool { animation: wax-pool 0.7s 0.55s var(--m-expo) both; }
.sig-on .appt__done:not([hidden]) .wax-ring { animation: wax-ring 0.6s 1.15s ease both; }
.sig-on .appt__done:not([hidden]) .appt__wax-wrap .appt__done-seal { animation: seal-press 0.9s 1.05s var(--m-expo) both; }
.sig-on .appt__done:not([hidden]) .appt__done-flora { animation-delay: 1.6s; }
@keyframes wax-fall {
from { transform: translate(var(--wx), var(--wy)) scale(0.6); opacity: 0; }
20% { opacity: 1; }
to { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes wax-pool {
from { transform: scale(0.25); }
70% { transform: scale(1.06); }
to { transform: scale(1); }
}
@keyframes wax-ring {
from { opacity: 0; }
to { opacity: 1; }
}
.appt__done:not([hidden]) .wax-pool { transform: scale(1); }
.sig-on .sf-place .syria {
transform:
rotateX(calc(36deg * var(--fly, 1)))
rotateZ(calc(-6deg * var(--fly, 1)))
scale(calc(0.96 + 0.16 * var(--fly, 1)));
}
.sig-on .sf-place .ft__mapcard:not(.pin-drop) .ft__pin,
.sig-on .sf-place .ft__mapcard:not(.pin-drop) .ft__pinlabel { opacity: 0; }
.sig-on .sf-place .ft__mapcard.pin-drop .ft__pin-head { animation: pin-drop 0.75s var(--m-expo) both; }
.sig-on .sf-place .ft__mapcard.pin-drop .ft__pinlabel { animation: fade-in 0.6s 0.5s ease both; }
@keyframes pin-drop {
from { transform: translateY(-70px) scale(0.8); opacity: 0; }
60% { opacity: 1; }
to { transform: none; opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.b-cursor {
position: fixed;
left: 0;
top: 0;
z-index: 60;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}
.b-cursor.is-on { opacity: 1; }
.b-cursor.is-hidden { opacity: 0; }
.b-cursor__petal {
position: absolute;
left: 10px;
top: 12px;
width: 15px;
height: 17px;
overflow: visible;
fill: var(--b-terracotta);
opacity: 0.85;
rotate: var(--ang, 0deg);
filter: drop-shadow(0 2px 2px rgb(73 51 41 / 0.25));
transition: scale 0.35s var(--m-expo), opacity 0.3s;
}
.b-cursor__ring {
position: absolute;
left: -18px;
top: -18px;
width: 36px;
height: 36px;
border: 1.5px solid var(--b-terracotta);
border-radius: 50%;
opacity: 0;
scale: 0.4;
transition: scale 0.4s var(--m-expo), opacity 0.3s;
}
.b-cursor__label {
position: absolute;
left: 18px;
top: 16px;
padding: 3px 10px;
border-radius: 999px;
background: var(--b-burnt);
color: var(--b-ivory);
font: 600 0.75rem/1.4 var(--font);
white-space: nowrap;
opacity: 0;
scale: 0.7;
transition: scale 0.35s var(--m-expo), opacity 0.25s;
}
.b-cursor.is-link .b-cursor__ring { opacity: 0.7; scale: 1; }
.b-cursor.is-link .b-cursor__petal { scale: 0.6; opacity: 0.6; }
.b-cursor.is-drag .b-cursor__label:not(:empty) { opacity: 1; scale: 1; }
.b-cursor.is-drag .b-cursor__petal { opacity: 0; }
/* cta.css */
:root {
--cta-cut: 26px 40px 30px 44px / 34px 26px 42px 30px;
--cta-cut-alt: 40px 26px 44px 30px / 26px 40px 30px 42px;
--cta-ease: cubic-bezier(0.22, 1, 0.36, 1);
--cta-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.2C14 2.4 24 9.4 38 5.6S62 1.6 76 5.8 104 9.2 119 4.4' fill='none' stroke='%23A64B29' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
--cta-squiggle-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.2C14 2.4 24 9.4 38 5.6S62 1.6 76 5.8 104 9.2 119 4.4' fill='none' stroke='%23D2AF8E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.btn--primary,
.btn--light,
.btn--gold {
--seam: rgb(245 237 224 / 0.55);
--wash: rgb(222 150 102 / 0.8);
position: relative;
isolation: isolate;
overflow: hidden;
border: 0;
border-radius: var(--cta-cut);
padding-inline: 0.75rem 1.6rem;
background-image: var(--b-grain);
letter-spacing: 0;
transition:
border-radius 0.7s var(--cta-ease),
transform 0.45s var(--cta-ease),
box-shadow 0.45s var(--cta-ease),
background-color 0.35s ease,
color 0.35s ease;
}
.btn--primary:not(:has(.icon)),
.btn--light:not(:has(.icon)),
.btn--gold:not(:has(.icon)) { padding-inline: 1.6rem; }
.btn--gold { --seam: rgb(73 51 41 / 0.35); --wash: rgb(255 240 220 / 0.7); }
.btn--primary::before,
.btn--light::before,
.btn--gold::before,
.final .btn--light::before {
content: "";
position: absolute;
inset: 4px;
z-index: 1;
border: 1.5px dashed var(--seam);
border-radius: inherit;
background: none;
opacity: 1;
pointer-events: none;
transition: inset 0.5s var(--cta-ease), border-color 0.4s ease;
}
.btn--primary::after,
.btn--light::after,
.btn--gold::after {
content: "";
display: block !important;
position: absolute;
inset: -40% -12%;
z-index: -1;
background:
radial-gradient(55% 50% at 30% 105%, var(--wash), transparent 70%),
radial-gradient(45% 45% at 78% 112%, rgb(110 46 22 / 0.45), transparent 70%);
opacity: 0;
transform: translateY(35%) scale(0.9);
translate: none;
transition: transform 0.8s var(--cta-ease), opacity 0.5s ease;
pointer-events: none;
}
.final .btn--light::after {
background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 90%), rgb(255 206 160 / 0.6), transparent 70%);
transform: none;
}
.btn--primary:hover,
.btn--light:hover,
.btn--gold:hover {
border-radius: var(--cta-cut-alt);
transform: translateY(-2px) rotate(-0.6deg);
}
.btn--primary:hover::after,
.btn--light:hover::after,
.btn--gold:hover::after { opacity: 1; transform: translateY(0) scale(1); }
.btn--primary:hover::before,
.btn--light:hover::before,
.btn--gold:hover::before { inset: 5px; border-color: rgb(245 237 224 / 0.8); }
.btn--gold:hover::before { border-color: rgb(73 51 41 / 0.5); }
.btn--primary:active,
.btn--light:active,
.btn--gold:active { transform: translateY(0) scale(0.97); transition-duration: 0.15s; }
.btn--primary .icon,
.btn--light .icon,
.btn--gold .icon {
box-sizing: content-box;
flex: none;
width: 1em;
height: 1em;
padding: 0.45em;
border-radius: 52% 46% 50% 48% / 48% 52% 46% 54%;
background: var(--b-ivory);
color: var(--b-burnt);
box-shadow:
inset 0 0 0 1.5px rgb(166 75 41 / 0.22),
inset 0 -3px 5px rgb(166 75 41 / 0.14),
0 2px 5px -1px rgb(73 51 41 / 0.4);
transition: transform 0.7s var(--cta-ease);
}
.btn--gold .icon { background: var(--b-burnt); color: var(--b-ivory); box-shadow: 0 2px 5px -1px rgb(73 51 41 / 0.4); }
.btn--primary:hover .icon,
.btn--light:hover .icon,
.btn--gold:hover .icon { transform: rotate(-16deg) scale(1.08); }
.btn--slim .icon { padding: 0.32em; }
.btn--slim { padding-inline: 0.55rem 1.15rem; }
.btn:disabled,
.btn:disabled:hover { transform: none; border-radius: var(--cta-cut); }
.btn:disabled::after { opacity: 0 !important; }
.services--doors .door__btn {
position: relative;
border: 1.5px dashed rgb(245 237 224 / 0.7);
border-radius: var(--cta-cut);
background: rgb(245 237 224 / 0.12);
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
transition:
border-radius 0.7s var(--cta-ease),
background-color 0.35s ease,
color 0.35s ease,
border-color 0.35s ease;
}
.services--doors .door__btn span {
display: inline-block;
transition: transform 0.5s var(--cta-ease);
}
.services--doors .door__btn:hover {
border-style: solid;
border-color: var(--b-ivory);
border-radius: var(--cta-cut-alt);
background: var(--b-ivory);
color: var(--b-espresso);
}
.services--doors .door__btn:hover span { transform: translateX(-6px); }
[dir="ltr"] .services--doors .door__btn:hover span { transform: translateX(6px); }
.btn--secondary,
.btn--secondary span,
.faq__all,
.services__helper .quiet-link,
.helper__actions .quiet-link {
text-decoration: none;
}
.btn--secondary,
.faq__all,
.services__helper .quiet-link,
.helper__actions .quiet-link {
padding-bottom: 6px;
background:
var(--cta-squiggle) no-repeat,
var(--cta-squiggle-soft) no-repeat;
background-size: 0% 8px, 100% 8px;
background-position: right bottom, right bottom;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size 0.7s var(--cta-ease), color 0.35s ease;
}
[dir="ltr"] .btn--secondary,
[dir="ltr"] .faq__all,
[dir="ltr"] .services__helper .quiet-link,
[dir="ltr"] .helper__actions .quiet-link { background-position: left bottom, left bottom; }
.btn--secondary { min-height: 48px; background-position: right 0 bottom 6px, right 0 bottom 6px; }
[dir="ltr"] .btn--secondary { background-position: left 0 bottom 6px, left 0 bottom 6px; }
.btn--secondary:hover,
.faq__all:hover,
.services__helper .quiet-link:hover,
.helper__actions .quiet-link:hover {
background-size: 100% 8px, 100% 8px;
color: var(--b-burnt);
}
.hero .btn--secondary { --cta-squiggle-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.2C14 2.4 24 9.4 38 5.6S62 1.6 76 5.8 104 9.2 119 4.4' fill='none' stroke='%23F7D3A8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sf-place__actions .btn--primary { --wash: rgb(232 190 140 / 0.8); }
@media (prefers-reduced-motion: reduce) {
.btn--primary,
.btn--light,
.btn--gold,
.services--doors .door__btn { transition-duration: 0.01s; }
.btn--primary:hover,
.btn--light:hover,
.btn--gold:hover { transform: none; }
}
/* lang.css */
.site-header__end { display: contents; }
.lang-switch {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 0 12px;
margin-inline-start: auto;
border: 1px solid rgb(166 75 41 / 0.28);
border-radius: 999px;
background: rgb(250 244 234 / 0.72);
color: var(--b-espresso, #3F3B36);
font: 600 0.95rem/1 "Cairo", var(--font), sans-serif;
text-decoration: none;
white-space: nowrap;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.4s ease;
}
.lang-switch .icon {
width: 19px;
height: 19px;
flex: none;
color: var(--b-burnt, #A64B29);
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lang-switch:hover {
color: var(--b-burnt, #A64B29);
border-color: rgb(166 75 41 / 0.55);
background: var(--b-ivory, #FAF4EA);
}
.lang-switch:hover .icon { transform: rotate(-24deg); }
.lang-switch:focus-visible {
outline: 2px solid var(--b-burnt, #A64B29);
outline-offset: 3px;
}
.is-scrolled .lang-switch { background: transparent; }
html.intro .site-header .lang-switch { opacity: 0; }
@media (max-width: 599.98px) {
.site-header .lang-switch {
width: 44px;
padding: 0;
justify-content: center;
gap: 0;
}
.site-header .lang-switch__txt {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (min-width: 1024px) {
.site-header__end {
display: flex;
align-items: center;
justify-self: end;
gap: 12px;
}
.site-header .lang-switch { margin-inline-start: 0; }
}
.lang-switch--menu {
align-self: center;
margin: 16px 0 0;
padding: 0 18px;
font-size: 1.05rem;
}
.menu-sheet[open] .lang-switch--menu {
animation: fade-rise 0.45s var(--ease-out, ease) both;
animation-delay: calc(var(--i, 0) * 60ms + 60ms);
}
html[lang="en"] {
--font: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
html[lang="en"] .b-script {
font: italic 400 clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem)/1.2 "Cormorant Garamond", Georgia, serif;
direction: ltr;
letter-spacing: 0.01em;
}
html[lang="en"] .sf-seal__ring text { letter-spacing: 0.284em; }
html[lang="en"] .sf-gram__ghost { font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: 0.04em; }
html[lang="en"] .b-signature__word { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: 0.02em; }
html[lang="en"] .btn--secondary::before { content: "→"; }
html[lang="en"] .btn--secondary:hover::before { transform: translateX(5px); }
html[lang="en"] .chips--list .chip::after { content: "→"; }
html[lang="en"] .chips--list .chip:hover::after { transform: translateX(3px); }
html[lang="en"] .door__flora { left: auto; right: 16px; }
html[lang="en"] .mirror__now { clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
html[lang="en"] .mirror__tag--now { right: auto; left: 22px; }
html[lang="en"] .mirror__tag--visual { left: auto; right: 22px; }
html[lang="en"] .appt__seal { left: auto; right: -14px; }
@media (max-width: 599.98px) {
html[lang="en"] .appt__seal { left: auto; right: -8px; }
}
html[lang="en"]:not(.motion-ready) .appt__step.is-entering { animation-name: step-in-ltr; }
html[lang="en"]:not(.motion-ready) .appt__step.is-entering-back { animation-name: step-in-back-ltr; }
html[lang="en"].motion-ready .appt__step.is-entering { transform-origin: 0 50%; animation-name: page-in-ltr; }
html[lang="en"].motion-ready .appt__step.is-entering-back { transform-origin: 100% 50%; animation-name: page-in-back-ltr; }
@keyframes page-in-ltr { from { opacity: 0; transform: rotateY(16deg) translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes page-in-back-ltr { from { opacity: 0; transform: rotateY(-16deg) translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes step-in-ltr { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back-ltr { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
html[lang="en"] .hero__sprig--b {
left: auto;
right: 18px;
transform: rotate(-16deg) scaleX(-1);
}
}
html[lang="en"] .sf-reel { direction: rtl; }
html[lang="en"] .sf-tile__tag { direction: ltr; }
@media (min-width: 900px) {
html[lang="en"] .sf-band__panel { padding: 96px clamp(64px, 7vw, 130px) 64px clamp(56px, 6vw, 110px); }
}
html[lang="en"].motion-ready .sf-band:not(.is-in) .sf-band__panel { transform: translateX(-56px); }
html[lang="en"].motion-ready .sf-band:not(.is-in) .sf-band__photo { transform: translateX(40px); }
html[lang="en"] .b-signature__word {
-webkit-mask: linear-gradient(to right, #000 42%, transparent 58%) 100% 0 / 300% 100% no-repeat;
mask: linear-gradient(to right, #000 42%, transparent 58%) 100% 0 / 300% 100% no-repeat;
}
html[lang="en"] .sf-band.is-in .b-signature__word { animation-name: write-ink-ltr, sig-foil; }
html[lang="en"] .b-signature__swash { margin: -0.55em auto 0 0; transform: scaleX(-1); }
@keyframes write-ink-ltr {
from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}