html {
scroll-behavior: smooth;
}
body {
background: #fff;
color: #1e1b19;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/*
clip, not hidden — hidden turns into a scroll container and
quietly kills position:sticky (#stackPin)
*/
@supports (overflow-x: clip) {
body {
overflow-x: clip;
}
}
/*
LAYOUT SHELL
One side-padding token instead of a centred box, so
anything that has to reach the screen edge simply
opts out of .shell (hero, colour bands, marquee).
*/
:root {
--pad: 6.25%;
}
@media (max-width: 1023px) {
:root {
--pad: 28px;
}
}
@media (max-width: 520px) {
:root {
--pad: 20px;
}
}
.shell {
padding-inline: var(--pad);
}
/* quick-contact rail, pinned to the screen edge */
.rail {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 0 8px 8px 0;
box-shadow: 0 4px 24px rgba(30, 27, 25, 0.14);
overflow: hidden;
}
.rail a {
display: grid;
place-items: center;
width: 48px;
height: 50px;
color: #6b6a68;
transition:
color 0.35s ease,
background-color 0.35s ease;
}
.rail a + a {
border-top: 1px solid rgba(30, 27, 25, 0.1);
}
.rail a:hover {
color: #1e1b19;
background: #f5f3f1;
}
@media (max-width: 640px) {
.rail {
/* display: none; */
}
}
/* brand mark */
.logo {
font-family: "Jost", sans-serif;
font-weight: 300;
letter-spacing: 0.34em;
}
/* triangle motif */
.tri {
width: 42px;
height: 40px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tri-down {
transform: rotate(180deg);
}
@media (max-width: 640px) {
.tri {
width: 28px;
height: 26px;
}
}
/* hero headline mask reveal */
.line-mask {
overflow: hidden;
display: block;
}
.line-mask > span {
display: block;
will-change: transform;
}
#about {
padding-top: 64px;
padding-left: 64px;
padding-bottom: 128px;
}
/* stacked gallery (scroll driven) */
#stackPin {
position: sticky;
top: 0;
}
.stack {
position: relative;
overflow: hidden;
}
.stack-card {
position: absolute;
inset: 0;
overflow: hidden;
will-change: transform, clip-path;
backface-visibility: hidden;
}
.stack-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
}
.stack-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(30, 27, 25, 0.34),
rgba(30, 27, 25, 0) 45%
);
pointer-events: none;
}
/* titles cross-fade in place as the deck advances */
.stack-title {
position: absolute;
inset-inline-start: 0;
top: 0;
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.stack-title.is-active {
opacity: 1;
transform: translateY(0);
}
.stack-title sup {
font-size: 0.42em;
vertical-align: super;
opacity: 0.5;
margin-inline-start: 0.4em;
}
/* reduced motion / no-JS: plain vertical list, nothing pinned */
.stack.is-static {
height: auto !important;
}
.stack.is-static .stack-card {
position: relative;
inset: auto;
margin-bottom: 12px;
clip-path: none !important;
transform: none !important;
}
.stack.is-static .stack-card img {
height: 46vh;
}
.dot {
width: 30px;
height: 2px;
background: #1e1b19;
opacity: 0.18;
transition: opacity 0.45s ease;
}
.dot.on {
opacity: 1;
}
/*
PORTFOLIO STATS — pinned horizontal deck
Everything here is namespaced .st-* / #st* so it can
never collide with .stack-*, .svc-* or .marquee.
It also uses its own --st-pad token instead of --pad,
because --pad is a percentage and would resolve
against the shrink-to-fit track, not the viewport.
*/
#stats {
--st-pad: 6.25vw;
--st-gap: 0px;
--st-card-w: calc((100vw - 2 * var(--st-pad)) / 3);
}
@media (max-width: 1023px) {
#stats {
--st-pad: 28px;
--st-card-w: calc((100vw - 2 * var(--st-pad)) / 2);
}
}
@media (max-width: 520px) {
#stats {
--st-pad: 20px;
--st-card-w: calc(100vw - 2 * var(--st-pad) - 3rem);
}
}
.st-pad {
padding-inline: var(--st-pad);
}
/* the stage: clip outside, perspective inside, so the arc survives */
.st-stage {
perspective: 1500px;
perspective-origin: 50% 45%;
}
.st-img-left {
text-align: left;
text-align: -webkit-left;
}
.st-track {
display: flex;
width: max-content;
align-items: stretch;
gap: var(--st-gap);
transform-style: preserve-3d;
will-change: transform;
}
.st-card {
width: var(--st-card-w);
flex-shrink: 0;
backface-visibility: hidden;
transform-origin: 50% 50%;
}
.st-num {
font-family: "Archivo", system-ui, sans-serif;
font-variant-numeric: tabular-nums;
}
/* fine grain so the flat taupe doesn't read as a dead fill */
.st-grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.3;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* ruler: one tick per card, the active one widens */
.st-tick {
display: block;
height: 2px;
width: 16px;
background: rgba(255, 255, 255, 0.3);
transition:
width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.35s ease;
}
.st-tick.is-on {
width: 40px;
background: #ffffff;
}
/* reduced motion: plain swipeable rail, no pin, no tilt (class set by JS) */
.st-rail {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.st-rail .st-card {
scroll-snap-align: center;
}
/* vertical-park card deck (services), driven by page scroll */
.svc-scroll-section {
height: 420vh;
position: relative;
}
.svc-pin-wrap {
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
.svc-pin-inner {
width: 100%;
padding-inline: var(--pad);
padding-left: 0;
}
/* strip-format track: cards are short bands now, not 66vh panels */
.svc-track {
position: relative;
height: clamp(250px, 35vh, 640px);
width: 100%;
overflow: hidden;
}
.svc-card {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: calc(100% / 3); /* three cards fill the track */
max-width: none;
padding: 30px 36px 24px;
direction: rtl;
display: flex;
flex-direction: column;
justify-content: space-between; /* title top / icon + triangles bottom */
align-items: stretch;
cursor: pointer;
will-change: right;
transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* three alternating tones */
.svc-card:nth-child(3n + 1) {
background: #ddcfc5;
}
.svc-card:nth-child(3n + 2) {
background: #c0b6af;
}
.svc-card:nth-child(3n) {
background: #a79b93;
}
.svc-card h2 {
font-family: "Readex Pro", sans-serif;
font-size: clamp(19px, 1.75vw, 29px);
font-weight: 600;
line-height: 1.65;
text-align: right;
color: #1e1b19;
padding: 0;
}
/*
bottom row — the card is rtl, so .svc-tris (first child) lands on
the RIGHT and .svc-icon on the LEFT
*/
.svc-card-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
/*
NOTE: these paths are namespaced .svc-tri-* on purpose — the page
already has a global .tri clip-path motif that must not touch them
*/
.svc-tris svg {
width: clamp(90px, 8.5vw, 130px);
height: auto;
display: block;
}
.svc-card .svc-icon {
/* width: clamp(56px, 5.5vw, 78px); */
padding: 0;
}
.svc-card .svc-icon img {
width: 100%;
height: auto;
display: block;
}
/* two-up on tablets so the text stays readable */
@media (max-width: 900px) {
.svc-card {
width: 50%;
}
}
.svc-progress-track {
position: absolute;
left: var(--pad);
right: var(--pad);
bottom: 26px;
height: 2px;
background: rgba(30, 27, 25, 0.15);
}
.svc-progress-fill {
height: 100%;
width: 0%;
background: #1e1b19;
}
.svc-scroll-note {
text-align: center;
color: #6b6a68;
font-size: 13px;
padding: 20px 20px 60px;
}
/* static fallback for reduced motion */
.svc-track.is-static {
height: auto;
overflow: visible;
display: flex;
flex-direction: column;
gap: 12px;
}
.svc-track.is-static .svc-card {
position: relative;
right: auto;
width: 100%;
max-width: 100%;
height: auto;
min-height: 180px;
gap: 28px;
}
@media (max-width: 760px) {
.svc-card {
/*
narrower than the parked sliver budget so the active card
is always fully readable on a phone
*/
width: 78vw;
max-width: 78vw;
padding: 18px 20px 16px;
}
.svc-card h2 {
font-size: 20px;
line-height: 1.7;
}
.svc-track {
height: 230px;
}
.svc-pin-wrap {
height: 100svh;
}
}
@media (max-width: 420px) {
.svc-card h2 {
font-size: 18px;
}
}
/* marquee */
.marquee {
display: flex;
width: max-content;
gap: 148px;
will-change: transform;
}
.marquee-set {
display: flex;
flex: none;
gap: 148px;
}
.logo-item {
width: 180px;
/* height: 90px; */
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.logo-item img {
width: 100%;
/* max-height: 70px; */
object-fit: contain;
display: block;
}
@media (max-width: 640px) {
.marquee,
.marquee-set {
gap: 36px;
}
.logo-item {
width: 130px;
height: 70px;
}
.logo-item img {
max-height: 52px;
}
}
/* misc */
.link-underline {
position: relative;
}
.link-underline::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: -4px;
height: 1px;
width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after {
transform: scaleX(1);
}
.reveal {
opacity: 0;
}
/*
nav: transparent at the very top, solid as soon as
the page scrolls (or the mobile menu is open)
*/
#nav.is-solid {
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(30, 27, 25, 0.08);
}
#nav.is-solid a,
#nav.is-solid button {
color: #1e1b19;
}
#nav.is-solid a[href="#contact"] {
border-color: rgba(30, 27, 25, 0.28);
}
#nav.is-solid a[href="#contact"]:hover {
background: #1e1b19;
color: #fff;
}
nav a {
font-size: 18px;
}
/* burger button */
#menuToggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: 0;
cursor: pointer;
z-index: 60;
}
.burger-line {
display: block;
width: 24px;
height: 2px;
background: currentColor;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease;
}
#menuToggle.is-open .burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#menuToggle.is-open .burger-line:nth-child(2) {
opacity: 0;
}
#menuToggle.is-open .burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 767px) {
#menuToggle {
display: flex;
}
}
/* mobile menu panel */
.mobile-menu {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 45;
background: #fff;
padding: 88px var(--pad) 32px;
transform: translateY(-105%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 24px 48px rgba(30, 27, 25, 0.16);
}
.mobile-menu.is-open {
transform: translateY(0);
}
.mobile-menu nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-menu nav a {
display: block;
padding: 14px 0;
font-size: 18px;
color: #1e1b19;
border-bottom: 1px solid rgba(30, 27, 25, 0.08);
}
.mobile-menu .mm-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
}
.mobile-menu .mm-actions a,
.mobile-menu .mm-actions button {
display: block;
width: 100%;
text-align: center;
padding: 13px 20px;
font-size: 15px;
}
@media (min-width: 768px) {
.mobile-menu {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
#heroVideo {
margin-top: -24px;
}
.paragraph-home-1 {
max-width: 720px;
}
.paragraph-home-w-450 {
max-width: 450px;
}
.home-story {
padding-top: 128px;
}
.hero-content {
padding-bottom: 20vh;
}
/* hero buttons wrap instead of overflowing on small screens */
.hero-btns {
flex-wrap: wrap;
justify-content: center;
}
.h2-services {
padding-bottom: 128px;
}
@media (min-width: 1925px) {
.img-logo-about {
padding-bottom: 64px;
}
.h2-numbers {
padding-bottom: 128px;
}
.reserve-now-btns {
padding-bottom: 64px !important;
}
}
@media (max-width: 1910px) {
.svc-card .svc-icon {
width: clamp(56px, 5.5vw, 78px);
}
.icon-5-spc img {
width: 80% !important;
}
.h2-services {
padding-bottom: 64px;
}
.hero-content {
padding-bottom: 15vh;
}
.hero-content h1 {
font-size: 64px;
}
}
@media (max-width: 1080px) {
#about {
padding-top: 32px;
padding-bottom: 64px;
padding-left: 32px;
}
.home-story {
padding-top: 32px;
}
}
/*
the 1910px rule above pins the hero title at 64px all the way
down — re-scale it (and the buttons) for tablets and phones
*/
@media (max-width: 760px) {
.hero-content {
padding-bottom: 12vh;
}
.hero-content h1 {
font-size: 38px;
line-height: 1.55;
}
.hero-content .hero-btns a {
margin-top: 24px;
padding: 10px 22px;
font-size: 15px;
}
#about {
/* padding-left: 0; */
}
#about .flex.gap-6 {
flex-wrap: wrap;
}
#about .flex.gap-6 a {
padding: 10px 22px;
font-size: 15px;
}
.paragraph-home-1 {
font-size: 17px;
}
.home-story .grid p {
font-size: 18px;
}
}
@media (max-width: 420px) {
.hero-content h1 {
font-size: 31px;
}
}
/*
re-apply the mobile svc title size — later rules in this sheet
would otherwise win the cascade over the 760px block above
*/
@media (max-width: 760px) {
.svc-card h2 {
font-size: 20px;
}
}
@media (max-width: 420px) {
.svc-card h2 {
font-size: 18px;
}
}
/* Footer */
.site-footer {
background: #7d7a76;
padding: 70px var(--pad) 24px;
color: #111;
}
.footer-main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 60px;
align-items: start;
}
.footer-logo {
text-align: right;
justify-self: end;
}
.footer-logo img {
width: 160px;
height: auto;
display: block;
margin-right: 0;
margin-left: auto;
transform: translateX(150px);
}
.footer-menu {
display: flex;
flex-direction: column;
gap: 12px;
text-align: right;
}
.footer-menu a {
font-family: "Readex Pro", sans-serif;
color: #111;
font-size: 14px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
text-align: right;
justify-self: start;
}
.footer-contact a {
font-family: "Readex Pro", sans-serif;
color: #111;
font-size: 14px;
}
.footer-newsletter {
text-align: right;
}
.newsletter-row {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
padding-bottom: 10px;
margin-bottom: 15px;
}
.newsletter-row input {
font-family: "Readex Pro", sans-serif;
background: none;
border: none;
width: 100%;
outline: none;
color: #111;
}
.newsletter-row input::placeholder {
color: rgba(17, 17, 17, 0.6);
}
.newsletter-row button {
background: none;
border: none;
cursor: pointer;
color: #111;
font-size: 18px;
line-height: 1;
}
.footer-newsletter p {
font-family: "Readex Pro", sans-serif;
font-size: 13px;
line-height: 1.9;
color: #222;
}
.footer-bottom {
margin-top: 50px;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.35);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-social {
display: flex;
gap: 24px;
}
.footer-social a {
font-family: "Readex Pro", sans-serif;
color: #111;
font-size: 13px;
}
.footer-copy {
font-family: "Readex Pro", sans-serif;
font-size: 12px;
}
@media (max-width: 900px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-logo {
grid-column: 1 / -1;
text-align: center;
justify-self: stretch;
}
.footer-logo img {
margin-inline: auto;
transform: none; /* the desktop 150px nudge pushed it off-screen */
}
.footer-contact {
text-align: right;
}
}
@media (max-width: 560px) {
.footer-main {
grid-template-columns: 1fr;
}
.footer-contact {
text-align: right;
}
.site-footer {
padding-top: 48px;
}
.footer-bottom {
justify-content: center;
text-align: center;
}
}
/* end footer */
@media (max-width: 1920px) and (min-width: 1730px) {
#about .grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
align-items: start;
}
.svc-track {
height: 42vh;
}
}
@media (max-width: 1729px) and (min-width: 1081px) {
.gival-text1 p {
font-size: 16px;
}
#about .grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
align-items: start;
}
p {
font-size: 18px;
}
h2 {
font-size: 64px !important;
}
.svc-card h2 {
font-size: 26px !important;
}
.bm-title {
font-size: 32px !important;
}
.svc-track {
height: 42vh;
}
}
.partners-header {
padding-bottom: 48px;
}
@media (min-width: 1920px) {
.partners-header {
padding-bottom: 64px !important;
}
.bg-partners {
padding-top: 240px !important;
padding-bottom: 240px !important;
}
}
@media (min-width: 768px) {
.only-phone {
display: none;
}
}
/*
BOOKING MODAL — "مرحبًا بك في إنمار"
Namespaced .bm-* so it can never collide with the
rest of the page. Opened from any "سجّل اهتمامك".
*/
.bm-overlay {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: rgba(30, 27, 25, 0.55);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
}
.bm-overlay.is-open {
opacity: 1;
visibility: visible;
}
.bm-modal {
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100svh - 48px);
overflow-y: auto;
background: #fff;
border-radius: 14px;
padding: 48px 44px 36px;
box-shadow: 0 32px 80px rgba(30, 27, 25, 0.35);
transform: translateY(26px) scale(0.98);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
font-family: "Readex Pro", sans-serif;
}
.bm-overlay.is-open .bm-modal {
transform: translateY(0) scale(1);
}
.bm-close {
position: absolute;
top: 18px;
inset-inline-end: 20px;
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: none;
border: 0;
cursor: pointer;
color: #1e1b19;
border-radius: 50%;
transition: background-color 0.25s ease;
}
.bm-close:hover {
background: #f5f3f1;
}
.bm-title {
text-align: center;
color: #a47865;
font-size: 30px;
font-weight: 600;
margin-bottom: 34px;
}
.bm-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.bm-field {
margin-bottom: 22px;
}
.bm-field label {
display: block;
font-size: 14px;
color: #1e1b19;
margin-bottom: 8px;
}
.bm-field label .bm-req {
color: #a47865;
}
.bm-input {
width: 100%;
border: 1px solid #d9d5d2;
border-radius: 8px;
background: #fff;
padding: 13px 16px;
font-family: "Readex Pro", sans-serif;
font-size: 15px;
color: #1e1b19;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.bm-input::placeholder {
color: #b3aeaa;
}
.bm-input:focus {
border-color: #a47865;
box-shadow: 0 0 0 3px rgba(164, 120, 101, 0.12);
}
/* phone: country selector + number */
.bm-phone-row {
display: flex;
gap: 12px;
}
.bm-cc {
position: relative;
flex: none;
}
.bm-cc-btn {
display: flex;
align-items: center;
gap: 10px;
height: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #d9d5d2;
border-radius: 8px;
background: #fff;
cursor: pointer;
font-family: "Readex Pro", sans-serif;
font-size: 14px;
color: #1e1b19;
transition: border-color 0.25s ease;
}
.bm-cc-btn:hover,
.bm-cc.is-open .bm-cc-btn {
border-color: #a47865;
}
.bm-cc-btn img {
width: 26px;
height: 18px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(30, 27, 25, 0.08);
}
.bm-cc-chev {
display: grid;
place-items: center;
transition: transform 0.3s ease;
}
.bm-cc.is-open .bm-cc-chev {
transform: rotate(180deg);
}
.bm-cc-list {
position: absolute;
top: calc(100% + 6px);
inset-inline-start: 0;
min-width: 230px;
max-height: 240px;
overflow-y: auto;
background: #fff;
border: 1px solid #e3e0dd;
border-radius: 10px;
box-shadow: 0 18px 48px rgba(30, 27, 25, 0.18);
padding: 6px;
margin: 0;
list-style: none;
z-index: 5;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity 0.25s ease,
transform 0.25s ease,
visibility 0.25s ease;
}
.bm-cc.is-open .bm-cc-list {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bm-cc-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 7px;
font-size: 14px;
cursor: pointer;
}
.bm-cc-list li:hover {
background: #f5f0ee;
}
.bm-cc-list li img {
width: 24px;
height: 17px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(30, 27, 25, 0.08);
}
.bm-cc-list li .bm-dial {
margin-inline-start: auto;
color: #6b6a68;
direction: ltr;
}
.bm-phone-row .bm-input {
flex: 1;
min-width: 0;
}
/* radios */
.bm-radios {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 4px;
}
.bm-radio {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: #1e1b19;
cursor: pointer;
width: fit-content;
}
.bm-radio input {
appearance: none;
width: 20px;
height: 20px;
border: 1.5px solid #b3aeaa;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0;
cursor: pointer;
transition: border-color 0.25s ease;
}
.bm-radio input::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #1e1b19;
transform: scale(0);
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-radio input:checked {
border-color: #1e1b19;
}
.bm-radio input:checked::after {
transform: scale(1);
}
.bm-terms {
margin: 26px 0 22px;
font-size: 14px;
color: #1e1b19;
line-height: 1.9;
}
.bm-terms a {
font-weight: 700;
color: #1e1b19;
}
.bm-terms a:hover {
color: #a47865;
}
.bm-submit {
display: block;
width: 100%;
padding: 15px 20px;
border: 0;
border-radius: 8px;
font-family: "Readex Pro", sans-serif;
font-size: 16px;
cursor: pointer;
background: #1e1b19;
color: #fff;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.bm-submit:hover {
background: #a47865;
}
.bm-submit:disabled {
background: #e7e4e2;
color: #b3aeaa;
cursor: not-allowed;
}
.bm-login {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #1e1b19;
}
.bm-login a {
font-weight: 700;
color: #1e1b19;
}
.bm-login a:hover {
color: #a47865;
}
.bm-msg {
display: none;
margin-top: 16px;
text-align: center;
font-size: 14px;
color: #a47865;
}
.bm-msg.is-visible {
display: block;
}
body.bm-locked {
overflow: hidden;
}
@media (max-width: 560px) {
.bm-modal {
padding: 44px 22px 28px;
border-radius: 12px;
}
.bm-title {
font-size: 24px;
margin-bottom: 26px;
}
.bm-row {
grid-template-columns: 1fr;
gap: 0;
}
}
/*
FAQ — accordion, sits between the partners strip and
the footer. Namespaced .faq-* so it can never touch
.svc-*, .st-*, .stack-* or the global .tri motif.
Accent is the same clay-brown used by .bm-title and
the service triangles (#A47865).
*/
#faq {
padding-top: 90px;
padding-bottom: 110px;
}
.faq-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
margin-bottom: 46px;
}
.faq-list {
border-top: 1px solid rgba(30, 27, 25, 0.16);
}
.faq-item {
border-bottom: 1px solid rgba(30, 27, 25, 0.16);
}
.faq-q {
display: flex;
width: 100%;
align-items: center;
gap: 18px;
padding: 26px 0;
background: none;
border: 0;
cursor: pointer;
text-align: right;
font-family: "Readex Pro", sans-serif;
font-size: clamp(16px, 1.35vw, 21px);
font-weight: 500;
line-height: 1.85;
color: #1e1b19;
transition: color 0.35s ease;
}
.faq-q:hover,
.faq-item.is-open .faq-q {
color: #a47865;
}
.faq-q:focus-visible {
outline: 2px solid #a47865;
outline-offset: 4px;
}
.faq-num {
flex: none;
min-width: 2.1em;
font-size: clamp(16px, 1.35vw, 21px);
color: #a47865;
opacity: 0.85;
}
.faq-qt {
flex: 1;
}
.faq-tri {
flex: none;
width: 22px;
height: 20px;
background: #a47865;
clip-path: polygon(50% 100%, 100% 0, 0 0);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-tri {
transform: rotate(180deg);
}
.faq-a {
height: 0;
overflow: hidden;
transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-a-inner {
padding-inline-start: calc(2.1em + 18px);
padding-bottom: 30px;
max-width: 940px;
font-size: clamp(15px, 1.1vw, 18px);
line-height: 2.15;
color: rgba(30, 27, 25, 0.72);
}
.faq-a-inner p + p {
margin-top: 14px;
}
.faq-a-inner ul {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-a-inner li {
display: flex;
align-items: center;
gap: 12px;
}
.faq-a-inner li::before {
content: "";
flex: none;
width: 9px;
height: 8px;
background: #a47865;
opacity: 0.65;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.faq-a-inner a {
color: #1e1b19;
font-weight: 600;
border-bottom: 1px solid rgba(164, 120, 101, 0.6);
}
.faq-a-inner a:hover {
color: #a47865;
}
.faq-foot {
margin-top: 42px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 26px;
font-size: 15px;
color: rgba(30, 27, 25, 0.72);
}
.faq-foot a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1e1b19;
font-weight: 500;
}
.faq-foot a:hover {
color: #a47865;
}
@media (max-width: 760px) {
#faq {
padding-top: 56px;
padding-bottom: 64px;
}
.faq-head {
margin-bottom: 30px;
}
.faq-q {
padding: 20px 0;
gap: 12px;
font-size: 16px;
align-items: flex-start;
}
.faq-num {
min-width: auto;
padding-top: 0.35em;
}
.faq-tri {
width: 17px;
height: 15px;
margin-top: 0.5em;
}
.faq-a-inner {
padding-inline-start: 0;
padding-bottom: 22px;
font-size: 15px;
line-height: 2.05;
}
.faq-foot {
margin-top: 30px;
font-size: 14px;
}
}