/* =========================================================
BODY — DEPT. — CUSTOM CSS
---------------------------------------------------------
01 TOKENS
02 BASE
03 PAGE + FORM FIXES
04 HERO SECTION + VIDEO
05 BD ICONS
06 REFERRAL DRUM
07 WIDGET — FRAME
08 WIDGET — LOAD + UNLOCK SEQUENCE
09 WIDGET — TITLE + BIO
10 WIDGET — STAGE + GALLERY
11 WIDGET — DRUM
12 WIDGET — ABOUT + BOOK NEW + SYMBOL
13 WIDGET — INFO HEAD + TODAY METER
14 WIDGET — BLOCKS
15 WIDGET — RAIL
16 WIDGET — CODE TICKET + PRICE
17 WIDGET — SUMMARY
18 WIDGET — CALENDAR
19 WIDGET — CLOCK
20 WIDGET — FORM
21 WIDGET — DONE
22 WIDGET — GO BUTTON
23 FOOTER
24 NOTE PAGES — CANCEL + 404
25 ANIMATIONS
26 REDUCED MOTION
27 MOBILE
---------------------------------------------------------
MOTION RULE: NO TRANSITION OR ONE-SHOT ANIMATION LONGER THAN 0.5s
========================================================= */

/* 01 TOKENS */
/* --tk = CODE TICKET SIZE ABOVE THE DRUM, --tk-about = CODE TICKET SIZE IN THE ABOUT HEAD. THE WHOLE TICKET SCALES FROM THESE TWO */
:root {
--white: #ffffff;
--blue: #0000ff;
--red: #ff2d2d;
--live: #7cff4f;
--off: #ffd600;
--line: rgba(255,255,255,0.3);
--ink: #ffffff;
--set: var(--ink);
--relax-a: lime;
--relax-b: yellow;
--relax-i: 1;
--deep-a: orange;
--deep-b: red;
--deep-i: 1;
--sports-a: purple;
--sports-b: blue;
--sports-i: 1;
--ga: #ffffff;
--gb: #ffffff;
--gf: 0%;
--op: 0.5;
--ls: 0.05em;
--sm: 10px;
--md: 20px;
--lg: 40px;
--xl: 100px;
--fsm: 15px;
--fmd: 20px;
--famd: 45px;
--flg: 50px;
--pad: 0px;
--slot: 65px;
--psym-w: 1.5px;
--tk: var(--fmd);
--tk-about: 24px;
--t: 0.2s;
--tb: 0.4s;
--tx: 0.15s;
--tmax: 0.5s;
--ease: cubic-bezier(0.16,1,0.3,1);
}

/* 02 BASE */
html,
body {
margin: 0px;
padding: 0px;
}

body {
background-color: black;
color: var(--white);
font-family: "Space Mono", ui-monospace, monospace;
font-size: var(--fsm);
line-height: 1;
overflow-x: hidden;
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
}

/* 03 PAGE + FORM FIXES */
a {
color: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
-webkit-text-fill-color: var(--white) !important;
transition: background-color 5000s ease-in-out 0s;
}

/* 04 HERO SECTION + VIDEO — THE SECTION THAT HOLDS THE WIDGET. THE VIDEO FILLS IT AND BLURS ONCE THE WIDGET OPENS */
#bd-hero {
position: relative;
min-height: 100vh;
z-index: 2;
}

.bd-hero-bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
z-index: 0;
transition: filter var(--tmax) var(--ease), transform var(--tmax) var(--ease);
}

.bd-hero-bg video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

html.ph-idle .bd-hero-bg {
filter: blur(0px);
}

html:not(.ph-idle) .bd-hero-bg {
filter: blur(20px) brightness(50%);
}

.bd-hero-in {
position: relative;
min-height: 100vh;
z-index: 1;
}

html.ph-idle .bd-hero-in {
mix-blend-mode: difference;
}

html:not(.ph-idle) .bd-hero-in {
mix-blend-mode: normal;
}

/* 05 BD ICONS — SITE DEFAULT. INSIDE THE WIDGET ICONS TAKE THE TEXT SIZE. LINE WEIGHT: SET --bd-icon-stroke ON ANY PARENT */
bd-icon {
font-size: 32px;
}

.bd-icon-lg bd-icon {
font-size: 64px;
}

#bd bd-icon {
font-size: inherit;
}

/* 06 REFERRAL DRUM */
#bd-ref {
--bd-ref-gap: 1;
--bd-ref-speed: 40;
--bd-ref-radius: 1;
position: relative;
display: block;
width: 80%;
margin: 0 auto;
padding: 15px 0px;
color: var(--white);
font-family: "Courier New", monospace;
font-size: 20px;
line-height: 1;
letter-spacing: 0px;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
outline: none;
border-top: 0px solid var(--line);
border-bottom: 0px solid var(--line);
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
-webkit-tap-highlight-color: rgba(0,0,0,0);
transition: border-color 0.4s ease;
}

#bd-ref:focus-visible,
#bd-ref.is-hovered {
border-color: var(--white);
}

.bd-ref-stage {
position: relative;
height: 1.2em;
}

.bd-ref-char {
position: absolute;
top: 0px;
left: 0px;
display: block;
line-height: 1.2em;
letter-spacing: 0px;
text-align: center;
white-space: pre;
transform-origin: 50% 50%;
will-change: transform, opacity;
visibility: hidden;
}

.bd-ref-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0px 0px 0px 0px);
white-space: nowrap;
}

/* 07 WIDGET — FRAME */
#bd {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100vw !important;
max-width: 100%;
min-height: 0vh !important;
height: auto !important;
padding: 50px 30px 60px 30px !important;
letter-spacing: var(--ls);
background: none;
z-index: 2;
transition: background-color var(--tb) var(--ease);
}

#bd * {
box-sizing: border-box;
}

.ph-idle #bd {
height: 100vh !important;
}

.is-resizing #bd * {
transition: none !important;
}

#bd-top {
display: flex;
flex: 0 0 auto;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
}

.bd-sp {
display: block;
flex: 0 0 auto;
height: 0vh;
transition: height var(--tmax) var(--ease);
}

#bd-sp2 {
flex-grow: 1;
height: auto;
}

/* 08 WIDGET — LOAD + UNLOCK SEQUENCE */
/* IDLE = LOCKED HOME SCREEN. IS-LOADING = FIRST PAINT, KILLS ALL FLASHES */
.ph-idle #bd-sp1 {
height: 35vh;
}

html.is-loading #bd-sp1 {
height: 35vh !important;
transition: none !important;
}

html:not(.ph-idle) #bd-sp1 {
transition: height var(--tmax) var(--ease);
}

html.is-loading #bd-stage {
opacity: 0 !important;
visibility: hidden !important;
transition: none !important;
}

html:not(.ph-idle) #bd-stage,
html:not(.ph-idle) #bd-gal {
transition: opacity var(--tb) var(--ease) 0.1s, transform var(--tb) var(--ease) 0.1s;
}

html.is-loading #bd-dash {
margin: 0 25px;
transform: scaleX(4);
}

html.is-loading #bd-bio {
opacity: 0 !important;
transform: translateY(10px);
}

/* 09 WIDGET — TITLE + BIO */
#bd-title {
flex: 0 0 25%;
width: 25%;
min-width: 0px;
margin: 0px;
padding: 0px;
font-size: 30px;
line-height: 30px;
white-space: nowrap;
cursor: pointer;
transition: font-size var(--tb) var(--ease);
}

#bd-title.is-rise {
animation: bdrise var(--tmax);
transition-delay: 5s !important;
}

#bd-title p {
margin: 0px;
padding: 0px;
font-size: inherit;
line-height: inherit;
transition: margin-left var(--tmax) var(--ease), transform var(--tmax) var(--ease);
}

#bd-dash {
display: inline-block;
transform-origin: center;
transition: transform var(--tmax) var(--ease), margin var(--tmax) var(--ease);
}

#bd-cycle {
display: inline-block;
min-width: 1ch;
}

html:not(.ph-idle) #bd-word {
display: block;
}

/* THE BIO KEEPS ITS FULL HEIGHT AT ALL TIMES. A HIDDEN GHOST OF THE WHOLE TEXT SETS THE HEIGHT, THE VISIBLE TEXT TYPES ON TOP OF IT, SO NOTHING BELOW EVER MOVES */
#bd-bio {
position: relative;
flex: 0 0 30vw;
width: 30vw;
min-width: 0px;
margin-top: 0px;
margin-left: 25%;
padding: 0px;
line-height: 1.6;
transition: opacity var(--tb) var(--ease), transform var(--tb) var(--ease);
}

#bd-bio-g {
display: block;
visibility: hidden;
pointer-events: none;
}

#bd-bio-v {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
}

#bd-bio-g:after,
#bd-bio-v:after {
content: "_";
display: inline-block;
margin-left: 0.15em;
}

#bd-bio-v:after {
animation: bdblink 1.1s step-end infinite;
}

/* 10 WIDGET — STAGE + GALLERY */
/* MAIN TAKES THE LEFT HALF, THE GALLERY STARTS AT THE WINDOW CENTRE */
#bd-stage {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: stretch;
width: 100%;
margin-top: var(--xl);
opacity: 1;
transform: translateY(0px);
transition: opacity var(--tb) var(--ease), transform var(--tb) var(--ease);
}

.ph-idle #bd-stage {
opacity: 0;
transform: translateY(40px);
pointer-events: none;
}

#bd-main {
order: 1;
display: flex;
flex: 0 0 50%;
flex-direction: column;
align-items: flex-start;
align-self: flex-start;
width: 50%;
min-width: 0px;
margin-left: 0px;
margin-right: 0px;
padding-right: var(--lg);
}

/* PICK — THE TICKET + DRUM START AT THE GALLERY TOP */
.ph-pick #bd-main {
align-self: flex-start;
}

/* ABOUT — THE COLUMN STRETCHES TO THE GALLERY HEIGHT SO THE HEAD MEETS ITS TOP AND THE METER MEETS ITS BOTTOM */
.ph-about #bd-main {
align-self: stretch;
}

.ph-about #bd-about {
flex: 1 1 auto;
}

/* THE 46px ROOM FOR THE INFO HEAD ONLY EXISTS ON ABOUT. PADDING CANNOT COLLAPSE INSIDE A 0fr ROW, SO IT HAS TO GO TO 0 OR IT LEAVES A GAP ABOVE THE DRUM */
#bd-about .bd-in {
display: flex;
flex-direction: column;
padding-top: 0px;
transition: opacity var(--tx) linear, padding-top var(--tb) var(--ease);
}

#bd-about.is-on .bd-in {
transition: opacity var(--t) linear 0.05s, padding-top var(--tb) var(--ease);
}

.ph-about #bd-about .bd-in {
padding-top: 46px;
}

#bd-gal {
order: 2;
position: relative;
flex: 0 0 40%;
width: 40%;
min-width: 0px;
margin-left: 0px;
opacity: 1;
transform: translateY(0px);
transition: opacity var(--tb) var(--ease), transform var(--tb) var(--ease);
}

.ph-idle #bd-gal {
opacity: 0 !important;
visibility: hidden;
transform: translateY(80px) !important;
pointer-events: none;
}

#bd-shots {
position: relative;
width: 100%;
aspect-ratio: 0.857143;
overflow: hidden;
background: linear-gradient(180deg, #111111 0%, #000000 50%, #111111 100%);
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ph-pick #bd-shots,
#bd-shots.is-drag {
cursor: none;
}

.ph-pick #bd-shots {
touch-action: none;
}

#bd-reel {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: difference;
will-change: transform;
}

.bd-shot {
position: relative;
display: block;
width: 100%;
height: 100%;
margin: 0px;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
}

#bd-ab-shot {
position: absolute;
top: 0px;
left: 0px;
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
margin: 0px;
padding: var(--md);
background: linear-gradient(180deg, #333333 0%, #000000 50%, #111111 100%);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
color: var(--white);
font-size: var(--fsm);
mix-blend-mode: normal;
z-index: 2;
pointer-events: none;
transform: translate3d(0,-100%,0);
transition: transform 0.3s var(--ease);
}

html.ph-idle #bd-ab-shot,
html.ph-about #bd-ab-shot {
transform: translate3d(0,0,0);
}

#bd-ab-shot span {
opacity: var(--op);
}

#bd-ab-shot.has-img span {
display: none;
}

/* 11 WIDGET — DRUM */
#bd-drum {
position: relative;
width: 100%;
height: 3em;
margin-bottom: 30px;
font-size: var(--flg);
overflow: hidden;
touch-action: pan-y;
cursor: pointer;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0) 100%);
transition: height var(--tb) var(--ease), opacity var(--t) linear, margin-bottom var(--tb) var(--ease);
}

.is-locked #bd-drum {
height: 1em;
margin-bottom: 0px;
-webkit-mask-image: none;
mask-image: none;
transition: height var(--tb) var(--ease);
}

.ph-about #bd-drum {
height: 0px;
margin-bottom: 0px;
opacity: 0;
pointer-events: none;
}

/* A CODE FOR ONE TREATMENT FREEZES THE DRUM ON THAT TREATMENT */
html.has-lock-t.ph-pick #bd-drum {
cursor: default;
}

html.has-lock-t.ph-pick .bd-item:not(.is-on) {
opacity: 0.15;
}

#bd-grip {
position: absolute;
top: 1em;
left: 0px;
right: 0px;
height: 1em;
z-index: 2;
touch-action: none;
cursor: ns-resize;
}

.is-locked #bd-grip,
html.has-lock-t #bd-grip {
display: none;
}

/* THE TRACK LEAVES THE SYMBOL SLOT ON THE LEFT SO THE WORDS LINE UP WITH BOOK NEW. KEEP --slot IN STEP WITH CTA_ICON_PX */
.bd-track {
display: flex;
flex-direction: column;
width: 100%;
padding-left: var(--slot);
}

.bd-item {
display: flex;
flex-shrink: 0;
align-items: center;
height: 1em;
line-height: 1 !important;
white-space: nowrap;
transition: opacity var(--t);
}

.bd-item.is-on {
opacity: 1;
color: var(--set);
transition: padding var(--t) linear;
}

.is-locked .bd-item {
height: 0px;
padding-left: 0px;
opacity: 0;
}

.is-locked .bd-item.is-on {
height: 1em;
opacity: 1;
}

/* ICON SLOT — USED BY THE CTA ROW */
.bd-sym {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
min-width: 50px;
margin-right: 15px;
font-size: 0.3em !important;
line-height: 1;
transition: 0s;
}

.bd-item.is-on .bd-sym {
justify-content: flex-start;
font-size: 0.5em !important;
}

/* SHARED TREATMENT ICON — ONE ICON BESIDE THE SELECTED WORD, IT MORPHS WHEN THE DRUM LANDS ON ANOTHER TREATMENT */
/* KEEP .bd-ani height IN STEP WITH ICON_H IN THE WIDGET CONFIG. left IS SET BY THE SCRIPT */
.bd-lbl {
flex-shrink: 0;
}

#bd-tico {
position: absolute;
top: 0em;
left: 0px;
display: none;
align-items: center;
height: 0em;
color: var(--set);
z-index: 1;
pointer-events: none;
transition: left 0s var(--ease), color var(--t) linear;
}

.is-locked #bd-tico {
top: 0px;
}

.bd-ani {
display: block;
flex-shrink: 0;
height: 0.60em;
overflow: visible;
}

/* 12 WIDGET — ABOUT + BOOK NEW + SYMBOL */
/* BOOK NEW IS THE ONLY BIG ROW ON ABOUT. THE CODE TICKET SITS IN THE HEAD (SECTIONS 13 + 16). --fcta MATCHES THE DRUM AND ONLY SHRINKS WHEN BOOK NEW WOULD NOT FIT */
#bd-ctas {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2em;
margin: auto 0;
font-size: var(--fcta, var(--flg));
}

.bd-cta-row {
display: flex;
flex-shrink: 0;
align-items: center;
height: 1em;
color: var(--set);
font-size: 0.9em;
line-height: 1 !important;
white-space: nowrap;
cursor: pointer;
outline: none;
opacity: 1;
transform: translate3d(0,0,0);
transition: opacity var(--t) linear, transform var(--tb) var(--ease);
}

.bd-cta-row .bd-sym {
justify-content: flex-start;
height: 1.5em;
font-size: 0.5em !important;
border-right: 0px dotted var(--set);
}

.bd-cta-row .bd-sym.is-gone {
opacity: 0;
transition: opacity var(--tx) linear;
}

.bd-cta-row:hover,
.bd-cta-row:focus-visible {
opacity: var(--op);
}

.bd-cta-row.is-off {
opacity: 0;
}

/* LEAVING — BOOK NEW FADES AND LIFTS IN 0.15s WHILE THE DRUM IS ALREADY OPENING */
html.is-leaving .bd-cta-row {
opacity: 0;
transform: translate3d(0,-24px,0);
pointer-events: none;
transition: opacity var(--tx) linear, transform var(--t) var(--ease);
}

/* TREATMENT SYMBOL — ONE SVG OF TWO HAIRLINES. + ON BOOK NEW, THEN DRIFT / TWIST / SPEED BESIDE THE DRUM. POSITION + SIZE SET BY THE SCRIPT */
#bd-psym {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 20px;
height: 20px;
color: var(--set);
opacity: 0;
overflow: visible;
z-index: 3;
pointer-events: none;
transition: opacity var(--t) linear, color var(--t) linear;
}

#bd-psym.is-in {
opacity: 1;
}

#bd-psym.is-in.is-dim {
opacity: var(--op);
}

#bd-psym path {
fill: none;
stroke: currentColor;
stroke-width: var(--psym-w);
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}

/* 13 WIDGET — INFO HEAD + TODAY METER */
/* TO HIDE THE METER, SET display: none ON #bd-info. THE SCRIPT THEN SKIPS THE FETCH */
.bd-info {
display: block;
width: 95%;
max-width: 650px;
margin: 0px;
padding: 0px;
font-size: 15px;
line-height: 1.45;
letter-spacing: var(--ls);
opacity: 0;
transform: translate3d(0,-20px,0);
transition: opacity var(--tb) var(--ease), transform var(--tb) var(--ease);
}

.bd-info.is-in {
opacity: 1;
transform: translate3d(0,0,0);
}

html.is-leaving .bd-info {
opacity: 0;
transform: translate3d(0,-8px,0);
pointer-events: none;
transition: opacity var(--tx) linear, transform var(--t) var(--ease);
}

/* INFO HEAD — PINNED TO THE GALLERY TOP ON DESKTOP. LEFT = CODE TICKET (MOVED IN BY THE SCRIPT ON ABOUT), RIGHT = DAY STATUS + SLOTS. ABOUT STEP ONLY */
#bd-info-top {
position: absolute;
top: 0px;
left: 0px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sm);
width: 50%;
padding-right: var(--lg);
font-size: 15px;
line-height: 1.45;
letter-spacing: var(--ls);
white-space: nowrap;
z-index: 3;
pointer-events: none;
}

/* THE HEAD IGNORES TAPS SO IT NEVER BLOCKS THE GALLERY. THE TICKET INSIDE IT TAKES THEM */
#bd-info-top #bd-promo {
pointer-events: auto;
}

.bd-head-col {
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
transform: translate3d(0,-8px,0);
transition: opacity var(--tb) var(--ease), transform var(--tb) var(--ease);
}

.bd-head-col.is-right {
align-items: flex-end;
margin-left: auto;
text-align: right;
}

.bd-head-col b {
font-weight: 400;
}

.bd-head-k {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.5);
}

#bd-info-top bd-icon {
font-size: 15px;
}

/* THE STATUS COLUMN SHOWS ON ABOUT AND LEAVES TOGETHER WITH BOOK NEW AND THE METER */
html.ph-about .bd-head-col {
opacity: 1;
transform: translate3d(0,0,0);
}

html.ph-about.is-leaving .bd-head-col {
opacity: 0;
transform: translate3d(0,-8px,0);
transition: opacity var(--tx) linear, transform var(--t) var(--ease);
}

/* STATUS DOT — GREY WHILE LOADING, GREEN DAY OPEN, RED DAY COMPLETE, YELLOW DAY OFF */
#bd-info-dot {
color: rgba(255,255,255,0.5);
font-style: normal;
transition: color var(--t) linear;
}

#bd-info-top.is-open #bd-info-dot {
color: var(--live);
animation: bd-pulse 1200ms ease-in-out infinite;
}

#bd-info-top.is-done #bd-info-dot {
color: var(--red);
}

#bd-info-top.is-off #bd-info-dot {
color: var(--off);
}

html:not(.ph-about) #bd-info-top.is-open #bd-info-dot {
animation: none;
}

/* TODAY METER — SAME SIZES AS THE DURATION RAIL (SECTION 15): 4px BAR, 25px TICKS, THICK END BARS, ▲ AND LABELS AT --fmd */
/* FREE HOURS WHITE, NEXT FREE HOUR GREEN, TAKEN HOURS STAY ON THE DIM LINE */
#bd-info {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0px;
width: 100%;
max-width: none;
}

.bd-mt {
position: relative;
width: 100%;
}

.bd-mt-bed {
position: relative;
height: 40px;
}

.bd-mt-line {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 4px;
background: var(--line);
transition: opacity var(--tb) var(--ease);
}

#bd-info.is-off .bd-mt-line {
opacity: 0.4;
}

.bd-mt-seg {
position: absolute;
top: 0px;
height: 4px;
background: var(--white);
opacity: 0;
transition: opacity var(--tb) var(--ease);
}

.bd-mt-seg.is-next {
background: var(--live);
}

#bd-info.is-drawn .bd-mt-seg {
opacity: 1;
}

.bd-mt-tk {
position: absolute;
top: 0px;
width: 1px;
height: 25px;
background: var(--line);
z-index: -9;
transform: translateX(-50%);
}

.bd-mt-tk.is-first {
padding: 0px 5px;
transform: none;
}

.bd-mt-tk.is-last {
padding: 0px 5px;
transform: translateX(-100%);
}

#bd-info-mk {
position: absolute;
top: 9px;
width: 20px;
color: var(--white);
font-size: var(--fmd);
font-style: normal;
line-height: 1;
opacity: 0;
transform: translateX(-50%);
transition: opacity var(--t) linear 0.1s;
}

#bd-info-mk:before {
content: "\25B2";
}

#bd-info-mk.is-start {
transform: none;
}

#bd-info-mk.is-end {
transform: translateX(-100%);
}

#bd-info-mk.is-hidden {
display: none;
}

#bd-info.is-drawn #bd-info-mk {
opacity: 1;
}

.bd-mt-lbls {
position: relative;
height: var(--md);
margin-top: var(--sm);
font-size: var(--fmd);
line-height: 1;
white-space: nowrap;
}

.bd-mt-lbl {
position: absolute;
top: 0px;
color: var(--white);
}

#bd-mt-a {
left: 0px;
}

#bd-mt-b {
right: 0px;
}

.bd-mt-lbl.is-hidden {
display: none;
}

#bd-mt-n {
color: var(--white);
opacity: 0;
transform: translateX(-50%);
transition: opacity var(--t) linear 0.1s;
}

#bd-mt-n.is-start {
transform: none;
}

#bd-mt-n.is-end {
transform: translateX(-100%);
}

#bd-info.is-drawn #bd-mt-n {
opacity: 1;
}

/* 14 WIDGET — BLOCKS */
/* EACH STEP (ABOUT, PICK, WHEN, FORM, DONE) OPENS BY GROWING ITS GRID ROW */
.bd-blk {
display: grid;
grid-template-rows: 0fr;
width: 100%;
max-width: 650px;
margin-top: 0px;
transition: grid-template-rows var(--tb) var(--ease), margin var(--tb) var(--ease);
}

.bd-blk.is-on {
grid-template-rows: 1fr;
margin-top: var(--sm);
}

/* ABOUT AND PICK SIT FLUSH WITH THE GALLERY TOP */
#bd-about.is-on,
#bd-pick.is-on {
margin-top: 0px;
}

#bd-when.is-on,
#bd-form.is-on,
#bd-done.is-on {
margin-top: var(--lg);
}

.bd-in {
min-height: 0px;
overflow: hidden;
opacity: 0;
transition: opacity var(--tx) linear;
}

.bd-blk.is-on .bd-in {
opacity: 1;
transition: opacity var(--t) linear 0.05s;
}

/* 15 WIDGET — RAIL */
#bd-rail {
position: relative;
display: block;
margin: 10px 40px 10px 0;
touch-action: pan-y;
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
}

.is-locked #bd-rail,
html.has-lock-d.ph-pick #bd-rail {
cursor: pointer;
}

html.has-lock-d.ph-pick #bd-rail {
cursor: default;
}

#bd-rail.is-nudge {
color: var(--white) !important;
animation: bdnudge 0.45s var(--ease);
}

.bd-rl-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sm);
height: var(--lg);
font-size: 30px;
white-space: nowrap;
}

#bd-dur b,
#bd-price b {
font-weight: 400;
}

#bd-rl-mark {
position: absolute;
top: 49px;
width: 20px;
color: var(--ink);
font-size: var(--fmd);
line-height: 1;
transform: translateX(-50%);
transition: left var(--tb) var(--ease), color var(--t) linear;
}

#bd-rl-mark:before {
content: "\25B2";
}

.is-locked #bd-rl-mark {
top: 43px;
width: 15px;
font-size: var(--fsm);
}

.bd-rl-bed {
position: relative;
height: 40px;
}

.is-locked .bd-rl-bed {
height: 10px;
}

.bd-rl-line {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 4px;
background-color: var(--line);
background-image: linear-gradient(90deg, var(--ga) 20%, var(--gb) 100%);
background-size: var(--gf) 100%;
background-repeat: no-repeat;
transition: background-size var(--tb) var(--ease);
}

.bd-rl-tk {
position: absolute;
top: 0px;
width: 1px;
height: 25px;
background: var(--line);
z-index: -9;
transform: translateX(-50%);
}

.bd-rl-tk.is-first {
padding: 0px 5px;
transform: none;
}

.bd-rl-tk.is-last {
padding: 0px 5px;
transform: translateX(-100%);
}

.is-locked .bd-rl-tk {
height: 10px;
}

.bd-rl-lbls {
position: relative;
height: var(--md);
margin-top: var(--sm);
font-size: var(--fmd);
transition: height var(--tb) var(--ease), margin var(--tb) var(--ease), opacity var(--t) linear;
}

.is-locked .bd-rl-lbls {
height: 0px;
margin-top: 0px;
opacity: 0;
}

.bd-rl-lbl {
position: absolute;
top: 0px;
opacity: 1;
transform: translateX(-50%);
transition: opacity var(--t) linear;
}

.bd-rl-lbl.is-first {
transform: none;
}

.bd-rl-lbl.is-last {
transform: translateX(-100%);
}

.bd-rl-lbl.is-on {
opacity: 1;
color: var(--set);
}

html.has-lock-d.ph-pick .bd-rl-lbl:not(.is-on) {
opacity: 0.15;
}

/* 16 WIDGET — CODE TICKET + PRICE */
/* OLD PRICE SITS STRUCK THROUGH BEFORE THE NEW ONE */
#bd-price-old {
margin-right: 0.4em;
color: var(--white);
font-size: 0.6em;
text-decoration: line-through;
opacity: 0.4;
}

#bd-price-old:empty {
display: none;
}

/* CODE TICKET — ONE ELEMENT, ALWAYS THERE AFTER IDLE. ON ABOUT THE SCRIPT MOVES IT INTO THE HEAD, ON EVERY OTHER STEP IT SITS ABOVE THE DRUM. A CODE CAN BE TYPED INTO IT ON ANY STEP EXCEPT DONE */
/* SIZE: --tk (ABOVE THE DRUM) AND --tk-about (IN THE HEAD) IN 01 TOKENS + 27 MOBILE. EVERYTHING BELOW IS IN em, SO THE WHOLE TICKET SCALES FROM THOSE TWO */
#bd-promo {
display: none;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 0px 0px var(--md) 0px;
font-size: var(--tk);
line-height: 1;
letter-spacing: var(--ls);
white-space: nowrap;
transition: opacity var(--t) linear;
}

html:not(.ph-idle) #bd-promo {
display: flex;
}

html.ph-done:not(.has-code) #bd-promo {
display: none;
}

/* ABOUT — IN THE HEAD, LARGER. HIDDEN UNTIL BOOK NEW HAS TYPED, FADES OUT WITH THE HEAD WHEN LEAVING */
html.ph-about #bd-promo {
width: auto;
margin: 0px;
font-size: var(--tk-about);
}

#bd-promo.is-off {
opacity: 0;
pointer-events: none;
}

html.ph-about.is-leaving #bd-promo {
opacity: 0;
pointer-events: none;
transition: opacity var(--tx) linear;
}

#bd-promo.is-nudge {
animation: bdnudge 0.45s var(--ease);
}

/* TICKET — LOW-OPACITY WHITE GLASS WITH A FOIL SHEEN, SAME ON EVERY TREATMENT. NOTCHES ARE MASKED SO THE VIDEO SHOWS THROUGH. KEEP --tk-stub IN BOTH THE STUB WIDTH AND THE MASK */
.bd-tk {
--tk-stub: 4.5ch;
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: stretch;
height: 1.5em;
border-radius: 0.15em;
background: rgba(255,255,255,0.15);
color: var(--white);
overflow: hidden;
cursor: pointer;
-webkit-mask-image: radial-gradient(circle at var(--tk-stub) 0%, rgba(0,0,0,0) 0.25em, rgba(0,0,0,1) 0.28em), radial-gradient(circle at var(--tk-stub) 100%, rgba(0,0,0,0) 0.25em, rgba(0,0,0,1) 0.28em);
-webkit-mask-composite: source-in;
mask-image: radial-gradient(circle at var(--tk-stub) 0%, rgba(0,0,0,0) 0.25em, rgba(0,0,0,1) 0.28em), radial-gradient(circle at var(--tk-stub) 100%, rgba(0,0,0,0) 0.25em, rgba(0,0,0,1) 0.28em);
mask-composite: intersect;
transition: opacity var(--t) linear;
}

/* FOIL — FINE DIAGONAL LINES + A MAGENTA / CYAN / YELLOW BAND SWEEPING ACROSS. SCREEN BLEND SO IT LIGHTS UP ON THE GLASS */
.bd-tk:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 3px, rgba(255,255,255,0.06) 3px, rgba(255,255,255,0.06) 4px), linear-gradient(115deg, rgba(255,255,255,0) 25%, rgba(255,0,200,0.35) 38%, rgba(0,255,255,0.35) 48%, rgba(255,255,120,0.35) 58%, rgba(255,255,255,0) 72%);
background-size: 100% 100%, 300% 100%;
background-repeat: no-repeat;
mix-blend-mode: screen;
pointer-events: none;
animation: bdholo 3.2s linear infinite;
}

/* STUB — USES LEFT / TOTAL (1/1, 2/3, ∞). A SINGLE * WHEN NO CODE */
.bd-tk-stub {
display: flex;
flex: 0 0 var(--tk-stub);
align-items: center;
justify-content: center;
width: var(--tk-stub);
}

/* BODY — CODE + DISCOUNT, OR REDEEM. PERFORATION ON ITS LEFT EDGE */
.bd-tk-main {
display: flex;
align-items: center;
padding: 0px 0.5em 0px 0.55em;
border-left: 1px dashed rgba(255,255,255,0.4);
}

/* NO CODE — THE * SITS HIGH IN SPACE MONO, SO IT DROPS TO LINE UP WITH REDEEM */
#bd-promo-uses:empty:before {
content: "*";
display: block;
margin-top: -0.1em;
transform: translateY(0.25em);
}

#bd-promo-code:empty:before {
content: "REDEEM";
}

.bd-tk:hover {
opacity: var(--op);
}

html.ph-done .bd-tk {
cursor: default;
}

html.ph-done .bd-tk:hover {
opacity: 1;
}

/* CODE ENTRY — ANY STEP EXCEPT DONE. TAPPING THE TICKET SWAPS REDEEM FOR THE FIELD + AN APPLY ARROW, INSIDE THE SAME TICKET */
#bd-code {
position: relative;
display: none;
flex: 0 0 auto;
width: 8em;
min-width: 0px;
height: 1.5em;
margin: 0px;
padding: 0px 0.5em 0px 0.55em;
border: 0px;
border-left: 1px dashed rgba(255,255,255,0.4);
border-radius: 0px;
background: none;
color: var(--white);
font-family: inherit;
font-size: 1em;
letter-spacing: var(--ls);
text-transform: uppercase;
caret-color: var(--white);
outline: none;
z-index: 1;
}

#bd-code::placeholder {
color: var(--white);
opacity: 0.35;
}

#bd-code-go {
position: relative;
display: none;
align-items: center;
padding: 0px 0.5em;
border-left: 1px dashed rgba(255,255,255,0.25);
color: var(--white);
font-size: 0.8em;
cursor: pointer;
z-index: 1;
transition: opacity var(--t) linear;
}

#bd-code-go:hover {
opacity: var(--op);
}

#bd-promo.is-input #bd-promo-code {
display: none;
}

#bd-promo.is-input #bd-code {
display: block;
}

#bd-promo.is-input #bd-code-go {
display: flex;
}

#bd-promo.is-input .bd-tk {
cursor: default;
}

#bd-promo.is-input .bd-tk:hover {
opacity: 1;
}

#bd-promo.is-busy .bd-tk {
pointer-events: none;
animation: bd-pulse 1200ms ease-in-out infinite;
}

/* CODE MESSAGE — UNDER THE TICKET ON ANY STEP. TAKES NO SPACE WHEN EMPTY */
#bd-code-msg {
display: block;
margin-top: 0.5em;
color: rgba(255,255,255,0.5);
font-size: 12px;
line-height: 1.45;
letter-spacing: var(--ls);
white-space: normal;
}

#bd-code-msg:empty {
display: none;
}

#bd-code-msg.is-err {
color: var(--red);
}

/* DETAILS LINE — TRT / DUR / EXP LEFT, REMOVE RIGHT, ENDING WHERE THE RAIL ENDS. LOW-OPACITY WHITE, KEYS DIMMER THAN VALUES. ONLY WITH A CODE */
#bd-promo-meta {
display: none;
align-items: baseline;
justify-content: space-between;
gap: var(--md);
width: 100%;
margin-top: var(--sm);
padding-right: 40px;
font-size: 0.75em;
}

html.has-code #bd-promo-meta {
display: flex;
}

#bd-promo-scope {
min-width: 0px;
overflow: hidden;
color: rgba(255,255,255,0.75);
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--t) linear;
}

#bd-promo-scope i {
font-style: normal;
opacity: 0.4;
}

/* MISMATCH — ONLY THE DETAILS TURN RED, REMOVE STAYS AS IT IS */
#bd-promo.is-miss #bd-promo-scope {
color: var(--red);
}

/* REMOVE — UNDERLINED, CLEARS THE CODE. GONE ON DONE */
#bd-promo-x {
flex-shrink: 0;
color: rgba(255,255,255,0.45);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--t) linear;
}

#bd-promo-x:hover {
color: var(--white);
}

html.ph-done #bd-promo-x {
display: none;
}

/* 17 WIDGET — SUMMARY */
#bd-sum {
display: none;
align-items: baseline;
gap: 0.5em;
margin-top: var(--md);
font-size: var(--fmd);
white-space: nowrap;
}

.is-locked #bd-sum {
display: flex;
}

#bd-sum-date,
#bd-sum-time {
cursor: pointer;
}

#bd-sum-mon {
font-style: normal;
}

/* 18 WIDGET — CALENDAR */
#bd-when-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--lg);
}

#bd-cal {
flex: 1 1 300px;
min-width: 300px;
max-width: 500px;
margin: 0 auto;
}

#bd-nav {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--md);
height: var(--lg);
border-bottom: 0.5px solid var(--line);
}

#bd-m-tog {
font-size: var(--fmd);
cursor: pointer;
transition: opacity var(--t) linear;
}

#bd-m-tog:hover {
opacity: var(--op);
}

#bd-dow,
#bd-weeks {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}

#bd-dow {
height: var(--lg);
}

#bd-dow span {
display: flex;
align-items: center;
padding-left: 2px;
}

.bd-day {
display: flex;
align-items: center;
height: var(--lg);
padding-left: 2px;
border-bottom: 1px solid var(--white);
cursor: pointer;
transition: color var(--t) linear, opacity var(--t) linear, border-color var(--t) linear;
}

.bd-day.is-void {
visibility: hidden;
}

.bd-day.is-off {
text-decoration: line-through;
opacity: 0.3;
pointer-events: none;
}

.bd-day.is-wait {
opacity: 0.22;
pointer-events: none;
}

.bd-day.is-set {
color: var(--set);
border-color: var(--set);
}

/* 19 WIDGET — CLOCK */
#bd-clock {
flex: 0 0 auto;
width: 250px;
margin: 0 auto;
padding-top: var(--lg);
padding-bottom: 20px;
}

#bd-clock svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}

.bd-tick {
stroke: var(--white);
stroke-width: 1;
opacity: var(--op);
}

.bd-hour {
fill: var(--white);
font-size: var(--fsm);
text-anchor: middle;
dominant-baseline: central;
opacity: 0.3;
transition: opacity var(--t) linear, fill var(--t) linear;
}

.bd-hour.is-free {
opacity: 1;
}

.bd-hour.is-set {
fill: var(--set);
}

.bd-hour-ul {
stroke: var(--white);
stroke-width: 1;
opacity: 0;
transition: opacity var(--t) linear, stroke var(--t) linear;
}

.bd-hour-ul.is-free {
opacity: 1;
}

.bd-hour-ul.is-set {
stroke: var(--set);
opacity: 1;
}

/* THE HAND SPINS ONLY WHILE SEARCHING, THEN POINTS AT THE NEXT FREE OR CHOSEN HOUR */
#bd-hand {
stroke: var(--set);
stroke-width: 2;
opacity: 0.3;
transform-box: view-box;
transform-origin: 120px 120px;
transition: transform var(--tmax) var(--ease), stroke var(--t) linear, opacity var(--t) linear;
}

#bd-hand.is-searching {
animation: bdspin 5s linear infinite;
transition: none;
}

#bd-hand.is-set {
stroke: var(--set);
opacity: 1;
animation: none;
}

#bd-hub {
fill: var(--set);
}

.bd-hit {
fill: transparent;
cursor: pointer;
}

#bd-ampm {
fill: var(--set);
font-size: var(--fsm);
text-anchor: middle;
dominant-baseline: central;
animation: bdblink 1.1s step-end infinite;
}

/* LOOPING CLOCK ANIMATIONS ONLY RUN ON THE DATE + TIME STEP */
html:not(.ph-when) #bd-ampm,
html:not(.ph-when) #bd-hand.is-searching {
animation: none;
}

/* 20 WIDGET — FORM */
#bd-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 0;
}

.bd-field {
width: 100%;
height: var(--lg);
padding: 10px 0px;
border: 0px;
border-bottom: 1px solid var(--line);
border-radius: 0px;
background: none;
color: var(--white);
font-family: inherit;
font-size: var(--fsm);
letter-spacing: 0.02em;
caret-color: var(--set);
transition: border-color var(--t) linear;
}

.bd-field:focus {
outline: none;
border-color: var(--white);
}

.bd-field::placeholder {
color: var(--white);
opacity: 1;
}

.bd-wide {
grid-column: span 1;
}

select.bd-field {
appearance: none;
-webkit-appearance: none;
padding-right: 0px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%23ffffff'/%3E%3C/svg%3E");
background-position: right 10px center;
background-repeat: no-repeat;
text-overflow: ellipsis;
cursor: pointer;
}

select.bd-field option {
color: #000000;
background: #ffffff;
}

.bd-tel {
display: flex;
align-items: stretch;
gap: 0;
min-width: 0px;
}

.bd-cc {
flex: 0 0 auto;
width: 95px;
}

.bd-tel #bd-f-phone {
flex: 1 1 auto;
min-width: 0px;
}

/* FORM — OPTION ROWS (ADDRESS TYPE, PARKING) */
#bd-home,
#bd-park {
display: flex;
flex-wrap: wrap;
align-items: baseline;
grid-column: span 2;
gap: var(--md);
font-size: var(--fsm);
}

#bd-home {
padding-top: var(--md);
}

.bd-opt {
padding-bottom: 2px;
border-bottom: 1px solid transparent;
cursor: pointer;
opacity: var(--op);
transition: color var(--t) linear, opacity var(--t) linear, border-color var(--t) linear;
}

.bd-opt:hover {
opacity: 1;
}

.bd-opt.is-set {
color: var(--set);
border-color: var(--set);
opacity: 1;
}

/* FORM — STATES SET BY THE SCRIPT ON #bd-fields */
#bd-fields.is-villa #bd-f-bldg {
display: none;
}

#bd-fields.is-villa #bd-f-unit {
grid-column: span 2;
}

#bd-f-area-x {
display: none;
grid-column: span 2;
}

#bd-fields.has-other #bd-f-area-x {
display: block;
}

#bd-note {
display: none;
grid-column: span 2;
}

#bd-fields.has-note #bd-note {
display: block;
}

/* FORM — SERVICE AREA LINE */
#bd-city {
display: none !important;
}

#bd-area {
display: flex;
align-items: flex-start;
grid-column: span 2;
gap: 20px;
padding: 20px 0;
font-size: 12px;
line-height: 1.5;
}

#bd-area:before {
content: "DUBAI";
font-size: var(--fsm);
}

#bd-area bd-icon {
flex-shrink: 0;
color: var(--set);
font-size: var(--fsm);
line-height: 1.5;
}

/* 21 WIDGET — DONE */
#bd-said {
max-width: 480px;
font-size: var(--fsm);
line-height: 1.5;
}

#bd-pay {
display: flex;
align-items: center;
gap: var(--sm);
margin-top: var(--lg);
white-space: nowrap;
}

/* 22 WIDGET — GO BUTTON */
#bd-go {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
gap: var(--sm);
margin: var(--lg) 0 0 0;
padding: 0px;
border: 0px;
background: transparent;
color: var(--white);
font-family: inherit;
font-size: var(--fmd);
line-height: 1;
letter-spacing: var(--ls);
cursor: pointer;
transition: color var(--t) linear, opacity var(--t) linear;
}

#bd-go bd-icon {
font-size: var(--famd);
transition: transform var(--t) var(--ease);
}

.ph-about #bd-go {
display: none;
}

#bd-go.is-ready {
color: var(--set);
}

.ph-form #bd-go.is-ready bd-icon {
animation: bd-pulse 1200ms ease-in-out infinite;
}

.ph-done #bd-go.is-ready bd-icon {
font-size: 30px !important;
}

#bd-go.is-nudge {
animation: bdnudge 0.45s var(--ease);
}

#bd-go.is-err {
color: var(--white);
}

#bd-go.is-busy {
opacity: var(--op);
pointer-events: none;
}

/* 23 FOOTER */
/* PINNED TO THE BOTTOM, BEHIND THE HERO. THE HERO SCROLLS AWAY AND REVEALS IT AT THE END OF THE PAGE */
.bd-foot {
position: sticky;
bottom: 0px;
padding:50px;
padding-top:20vh;
background: black;
z-index: 1;
}

/* FOOTER GRID — DESKTOP: TIME SITS ON THE LLC LINE, DATE ON THE LICENCE LINE. THE YEAR HANGS LEFT OF THE LLC LABEL WITHOUT MOVING IT */
#bd-ft {
display: grid;
grid-template-columns: 50% 1fr 1fr;
grid-template-rows: repeat(2, auto);
grid-template-areas:
". llc time"
"ct lic date";
align-items: end;
column-gap: 0px;
row-gap: 10px;
width: 100%;
font-family: "Space Mono", ui-monospace, monospace;
font-size: 13px;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
color: #ffffff;
white-space: nowrap;
will-change: opacity;
}

#bd-ft * {
box-sizing: border-box;
}

/* AREAS */
.bd-ft-ct {
grid-area: ct;
}

.bd-ft-llc {
grid-area: llc;
}

.bd-ft-lic {
grid-area: lic;
}

#bd-ft-time {
grid-area: time;
}

#bd-ft-date {
grid-area: date;
}

/* ADMIN CELL — ITS OWN ROW, ONLY CREATED WHEN THE PIN MARKUP IS IN THE FOOTER */
#bd-ft-adm {
grid-row: 3;
grid-column: 3;
}

/* YEAR — SHARES THE LLC CELL AND IS PULLED LEFT BY ITS OWN WIDTH PLUS A 10px GAP, SO THE LABEL NEVER MOVES */
#bd-ft-yr {
grid-area: llc;
justify-self: start;
align-self: end;
transform: translateX(calc(-100% - 10px));
}

/* CELLS */
.bd-ft-l {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 10px;
min-width: 0px;
padding-right: 40px;
}

.bd-ft-r {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 10px;
min-width: 0px;
}

.bd-ft-l a {
color: #ffffff;
text-decoration: underline;
}

/* ADMIN */
#bd-ft-adm {
position: relative;
gap: 0px;
}

#bd-ft-trig {
display: flex;
align-items: center;
margin-right: 10px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}

.bd-ft-dot {
font-size: 20px;
animation: bd-ft-blink 1.1s step-end infinite;
}

.bd-ft-dash {
margin-left: -10px;
font-size: 30px;
}

#bd-ft-pin {
width: 150px;
padding: 0px;
border: 0px;
border-bottom: 1px solid #ffffff;
border-radius: 0px;
background: none;
font-family: inherit;
font-size: 13px;
letter-spacing: 1px;
color: #ffffff;
-webkit-text-security: square;
}

#bd-ft-pin::placeholder {
color: #ffffff;
opacity: 0.5;
}

#bd-ft-pin:focus {
outline: none;
}

#bd-ft-adm.is-busy #bd-ft-pin {
opacity: 0.5;
pointer-events: none;
}

#bd-ft-msg {
position: absolute;
left: 0px;
top: 100%;
padding-top: 5px;
font-size: 11px;
}

#bd-ft-msg.is-err {
color: #ff2d2d;
}

/* 24 NOTE PAGES — CANCEL + 404 */
/* ONE LAYOUT: MESSAGE LEFT, VIDEO CENTRE, LINK HOME RIGHT. BODY CARRIES data-note="cancel" OR "404" */
.bd-note {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 50px 30px 30px 30px;
letter-spacing: var(--ls);
text-transform: uppercase;
}

.bd-note-top a {
color: var(--white);
font-size: 30px;
line-height: 30px;
text-decoration: none;
white-space: nowrap;
}

.bd-note-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--lg);
flex: 1 1 auto;
padding: var(--xl) 0px;
}

#bd-note-msg {
justify-self: start;
font-size: var(--fmd);
line-height: 1.3;
color: var(--live);
opacity: 0;
transition: opacity var(--tb) var(--ease);
}

#bd-note-msg.is-err {
color: var(--red);
}

.bd-note-vid {
position: relative;
display: flex;
box-sizing: border-box;
align-items: flex-end;
width: 26vw;
max-width: 380px;
aspect-ratio: 0.8;
margin: 0px;
padding: var(--md);
overflow: hidden;
background: linear-gradient(180deg, #222222 0%, #000000 60%, #111111 100%);
color: var(--white);
font-size: var(--fsm);
}

.bd-note-vid span {
opacity: var(--op);
}

.bd-note-vid video {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
}

#bd-note-act {
display: flex;
justify-self: end;
align-items: center;
gap: var(--sm);
font-size: var(--fmd);
white-space: nowrap;
opacity: 0;
transition: opacity var(--tb) var(--ease);
}

#bd-note-act a {
color: var(--white);
text-decoration: none;
cursor: pointer;
transition: opacity var(--t) linear;
}

#bd-note-act a:hover {
opacity: var(--op);
}

#bd-note-act.is-busy {
opacity: 0.4 !important;
pointer-events: none;
}

.bd-note.is-lit #bd-note-msg,
.bd-note.is-lit #bd-note-act {
opacity: 1;
}

#bd-note-msg.is-plain {
color: var(--white);
}

/* ON NOTE PAGES THE FOOTER SITS AT THE END INSTEAD OF COVERING THE LINK */
.bd-note .bd-foot {
position: static;
margin: 0px -30px -30px -30px;
}

/* 25 ANIMATIONS */
@keyframes bdblink {
0%, 45% {
opacity: 1;
}
50%, 95% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes bdrise {
0% {
opacity: 0.3;
transform: translate3d(0,0.7em,0);
}
100% {
opacity: 1;
transform: translate3d(0,0,0);
}
}

@keyframes bdnudge {
0% {
transform: translate3d(0,0,0);
}
18% {
transform: translate3d(-7px,0,0);
}
36% {
transform: translate3d(7px,0,0);
}
54% {
transform: translate3d(-1px,0,0);
}
72% {
transform: translate3d(4px,0,0);
}
86% {
transform: translate3d(-1px,0,0);
}
100% {
transform: translate3d(0,0,0);
}
}

@keyframes bdspin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes bd-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}

/* HOLO SWEEP — LOOPS, SO IT SITS OUTSIDE THE 0.5s ONE-SHOT RULE */
@keyframes bdholo {
from {
background-position: 0% 0%, 150% 0%;
}
to {
background-position: 0% 0%, -150% 0%;
}
}

@keyframes bd-ft-blink {
0%, 45% {
opacity: 1;
}
50%, 95% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* 26 REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}

.bd-tk:after {
animation: none !important;
}
}

/* 27 MOBILE */
@media (max-width: 600px) {
:root {
--xl: 60px;
--tk: var(--fsm);
--tk-about: 18px;
}

bd-icon {
font-size: 24px;
}

#bd {
padding: 50px var(--md) var(--lg) var(--md) !important;
}

#bd-top {
flex-direction: column;
padding-top: var(--lg);
}

#bd-title {
flex: 0 0 auto;
width: 100%;
margin: 0px 0px var(--md) 0px;
padding-right: 0px;
}

#bd-bio {
flex: 0 0 auto;
width: 100%;
margin: 0px;
padding-right: 0px;
}

#bd-stage {
flex-direction: column;
align-items: stretch;
}

#bd-main,
.ph-pick #bd-main,
.ph-about #bd-main {
align-self: stretch;
}

#bd-main {
flex: 0 0 auto;
width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
}

#bd-gal {
order: -1;
flex: 0 0 auto;
width: 100%;
margin-left: 0px;
margin-bottom: var(--lg);
}

.ph-when #bd-gal,
.ph-form #bd-gal {
display: none;
}

#bd-shots {
aspect-ratio: 1;
}

.bd-info {
max-width: none;
}

#bd-info-top {
position: static;
width: 100%;
padding-right: 0px;
margin-bottom: var(--lg);
}

#bd-about .bd-in {
gap: var(--lg);
}

.ph-about #bd-about .bd-in {
padding-top: 0px;
}

html:not(.ph-about) #bd-info-top {
display: none;
}

#bd-rail {
margin: 10px 10px 10px 0;
}

#bd-promo-meta {
padding-right: 10px;
}

#bd-rl-mark {
top: 40px;
width: 17px;
}

.bd-rl-tk {
height: 10px;
}

.bd-rl-tk.is-first,
.bd-rl-tk.is-last {
height: 15px;
}

.is-locked .bd-rl-tk.is-first,
.is-locked .bd-rl-tk.is-last {
height: 10px;
}

#bd-info-mk {
top: 0px;
width: 17px;
}

.bd-mt-tk {
height: 10px;
}

.bd-mt-tk.is-first,
.bd-mt-tk.is-last {
height: 15px;
}

#bd-when-row {
flex-direction: column;
}

#bd-cal {
width: 100%;
}

#bd-clock {
width: 100%;
max-width: 250px;
margin: 0 auto !important;
padding-top: var(--sm);
padding-bottom: 20px;
} 

#bd-fields {
grid-template-columns: 1fr;
}

#bd-area,
#bd-park,
#bd-home,
#bd-note,
#bd-f-area-x,
#bd-fields.is-villa #bd-f-unit {
grid-column: span 1;
}

#bd-ref {
width: 100%;
}

#bda-trigger {
margin-top: 10px;
}

#bda-login {
margin-top: 20px;
}

.bd-foot {
padding: 25px;
padding-top:15vh;
}

#bd-ft {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, auto);
grid-template-areas:
"yr ."
"llc time"
"lic date"
"ct adm";
column-gap: 16px;
row-gap: 12px;
font-size: 11px;
}

#bd-ft-yr {
grid-area: yr;
transform: none;
}

#bd-ft-adm {
grid-row: auto;
grid-column: auto;
grid-area: adm;
}

.bd-ft-l {
padding-right: 0px;
}

#bd-ft-pin {
width: 100px;
font-size: 11px;
}

.bd-note {
padding: 50px var(--md) var(--md) var(--md);
}

.bd-note-row {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--lg);
padding: var(--lg) 0px;
}

.bd-note-vid {
order: -1;
width: 100%;
max-width: none;
}

#bd-note-act {
justify-self: start;
}

.bd-note .bd-foot {
margin: 0px calc(var(--md) * -1) calc(var(--md) * -1) calc(var(--md) * -1);
}
}