/* Tidewater sample leasing deck, in the BGRE system (BGRE_Condensed_Guidelines + 16x9 template).
   1920x1080 stage, scaled to fit. Exposure = headlines, Arbeit Pro = everything else. */
@font-face { font-family: 'Exposure'; src: url(fonts/Exposure.otf); font-style: normal; }
@font-face { font-family: 'Exposure'; src: url(fonts/Exposure-Italic.otf); font-style: italic; }
@font-face { font-family: 'Arbeit Pro'; src: url(fonts/Arbeit-Pro-Regular.otf); font-weight: 400; }
@font-face { font-family: 'Arbeit Pro'; src: url(fonts/Arbeit-Pro-Bold.otf); font-weight: 700; }
@font-face { font-family: 'Arbeit Pro'; src: url(fonts/Arbeit-Pro-Regular-Italic.otf); font-style: italic; }

:root{
  --cream:#FAF7F0; --paper:#FFFCFA; --burgundy:#4A081E; --deep:#2E000F; --wine:#5E1630;
  --charcoal:#2F2D27; --slate:#6D6B64; --mute:#9A968C; --ember:#FE472E;
  --salmon-d:#983D15; --salmon:#FCA27A; --salmon-p:#FEC7AF;
  --corn-d:#3F4277; --corn:#B2C8FF; --corn-p:#DCE7FA;
  --mint-d:#3D7C6F; --mint:#B2DEBF; --mint-p:#E2F8DC;
  --stone-d:#9D865F; --stone:#D8C8AC; --stone-p:#F0E8DC; --line:#E3DACB;
  --serif:'Exposure', Georgia, serif; --sans:'Arbeit Pro', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#1a0710;overflow:hidden;color:var(--charcoal);font-family:var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;overflow:hidden;background:var(--paper)}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;overflow:hidden;background:var(--paper)}
.slide.on{visibility:visible}
.slide.wine{background:var(--burgundy);color:var(--cream)}
.slide.cream{background:var(--cream)}
.pad{position:absolute;inset:104px 120px 120px}

/* type */
.eyebrow{font:700 19px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.wine .eyebrow{color:var(--salmon-p);opacity:.85}
.h1{font:400 150px/.98 var(--serif);letter-spacing:-.03em;color:var(--burgundy)}
.h2{font:400 96px/1.02 var(--serif);letter-spacing:-.025em;color:var(--burgundy)}
.h3{font:400 64px/1.08 var(--serif);letter-spacing:-.02em;color:var(--burgundy)}
.h4{font:400 40px/1.15 var(--serif);letter-spacing:-.015em;color:var(--burgundy)}
.wine .h1,.wine .h2,.wine .h3,.wine .h4{color:var(--cream)}
.h1 em,.h2 em,.h3 em,.h4 em{font-style:italic;color:var(--ember)}
.wine em{color:var(--salmon)}
.lede{font:400 30px/1.45 var(--sans);color:var(--slate);max-width:760px}
.wine .lede{color:rgba(250,247,240,.78)}
.body{font:400 24px/1.5 var(--sans);color:var(--slate)}
.small{font:400 18px/1.45 var(--sans);color:var(--mute)}
.wine .small{color:rgba(250,247,240,.55)}
.num{white-space:nowrap;font:400 104px/1 var(--serif);letter-spacing:-.03em;color:var(--burgundy);font-feature-settings:"lnum" 1}
.num small{font:400 34px/1 var(--sans);letter-spacing:0;color:var(--slate);margin-left:8px}
.wine .num{color:var(--cream)} .wine .num small{color:rgba(250,247,240,.6)}
.rule{height:3px;background:var(--burgundy);transform-origin:left center}
.wine .rule{background:var(--salmon)}
.hair{height:1px;background:var(--line);transform-origin:left center}

/* split-text masks */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block;will-change:transform}

/* images */
.bleed{position:absolute;inset:0;overflow:hidden}
.bleed img,.bleed .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.ph{background:linear-gradient(160deg,#d9cdb8 0%,#b9a68a 45%,#6b4a3c 100%)}
.frame{position:relative;overflow:hidden;background:var(--stone-p)}
.frame img,.frame .ph{width:100%;height:100%;object-fit:cover;display:block}

/* chrome (BGRE template: logo bottom left, page number bottom right) */
.chrome{position:absolute;left:120px;right:120px;bottom:48px;display:flex;align-items:center;justify-content:space-between;font:400 16px/1 var(--sans);color:var(--mute);pointer-events:none}
.chrome img{height:22px;display:block}
.wine .chrome{color:rgba(250,247,240,.5)}
.chrome .tag{letter-spacing:.06em}
#ui{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;pointer-events:none;z-index:50}
#prog{position:absolute;left:0;bottom:0;height:4px;background:var(--ember);width:0;transition:width .6s ease}
body.rec #ui,body.still #ui{display:none}
#turn{display:none;position:fixed;left:16px;right:16px;bottom:24px;text-align:center;font:400 14px/1.4 var(--sans);color:#d9c7c0}
@media (orientation:portrait) and (max-width:900px){#turn{display:block}}
body.rec #turn,body.still #turn{display:none!important}

/* layout helpers */
.row{display:flex;gap:64px}
.col{flex:1;min-width:0}
canvas.gl{position:absolute;inset:0;width:1920px;height:1080px;display:block}
.map{position:absolute;inset:0}
.map svg{position:absolute;inset:0;width:1920px;height:1080px}
.panel{position:absolute;left:0;top:0;bottom:0;width:760px;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 78%,rgba(255,252,250,0) 100%);padding:104px 0 120px 120px}

/* interactive bits (presenter can click; never advances the slide) */
[data-int]{pointer-events:auto;cursor:pointer}
.chip{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border:1.5px solid var(--line);border-radius:60px;font:400 21px/1 var(--sans);color:var(--charcoal);background:var(--paper);transition:border-color .3s,background .3s,color .3s}
.chip b{font-weight:700}
.chip.on{border-color:var(--burgundy);background:var(--burgundy);color:var(--cream)}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.legend{display:flex;gap:36px;font:400 19px/1 var(--sans);color:var(--slate)}
.legend span{display:inline-flex;align-items:center;gap:10px}

/* labels that follow 3D anchors */
.lbl{position:absolute;left:0;top:0;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;font:700 15px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy)}
.lbl i{display:block;width:1px;height:46px;background:var(--burgundy);margin:10px auto 0;opacity:.5}
.lbl span{display:inline-block;background:var(--paper);padding:9px 13px;border-radius:2px;box-shadow:0 1px 0 var(--line)}

/* table rows (replace BGRE's dense spec tables) */
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font:400 23px/1.3 var(--sans);color:var(--slate)}
.trow b{font-weight:700;color:var(--burgundy);white-space:nowrap}
.trow span b{color:var(--charcoal)}
.trow .dot{margin-right:12px;vertical-align:1px}

/* stack plan floor card */
.floorcard{margin-top:44px;padding:28px 32px;background:var(--cream);border-left:4px solid var(--burgundy)}
.floorcard .h4{font-size:38px;margin:10px 0 8px}
.floorcard .body{font-size:21px}

/* planner */
.planner{margin-top:44px;display:flex;flex-direction:column;gap:22px}
.prow{display:flex;align-items:center;justify-content:space-between;gap:20px}
.prow .small{font-size:19px;color:var(--slate);min-width:190px}
.stepper{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:60px;padding:6px}
.stepper button{all:unset;width:46px;height:46px;border-radius:50%;text-align:center;font:400 30px/46px var(--sans);color:var(--burgundy);cursor:pointer;pointer-events:auto}
.stepper button:hover{background:var(--cream)}
.stepper b{font:400 40px/1 var(--serif);color:var(--burgundy);min-width:110px;text-align:center}
.chips{display:flex;gap:10px}
.chips .chip{padding:12px 18px;font-size:18px}
.result{margin-top:46px;padding-top:36px;border-top:3px solid var(--burgundy)}

/* test fit plan */
.plan{position:absolute;left:740px;top:90px;width:1100px;height:820px}
.plan svg{width:100%;height:100%;overflow:visible}

/* specs grid */
.specs{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 64px}
.specs>div{border-top:3px solid var(--burgundy);padding-top:28px}
.specs .num{font-size:88px}
.specs b{display:block;margin-top:18px;font:700 19px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal)}
.specs p{margin-top:12px;font:400 22px/1.45 var(--sans);color:var(--slate);max-width:440px}

/* a day at */
.day{position:absolute;left:0;right:0;top:330px;height:620px}
.track{position:absolute;left:120px;right:120px;top:0;height:2px;background:var(--line)}
.track i{position:absolute;left:0;top:-1px;height:4px;width:100%;background:var(--ember);transform-origin:left center;transform:scaleX(0)}
.cards{position:absolute;left:120px;right:120px;top:0;display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
.cards figure{padding-top:34px;position:relative}
.cards figure:before{content:"";position:absolute;left:0;top:-7px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ember)}
.cards .frame{height:360px;border-radius:2px}
.cards time{display:block;margin-top:22px;font:400 34px/1 var(--serif);color:var(--ember)}
.cards b{display:block;margin-top:12px;font:400 26px/1.15 var(--serif);color:var(--burgundy)}
.cards p{margin-top:8px;font:400 18px/1.4 var(--sans);color:var(--slate)}

/* sustainability */
.badges{display:flex;gap:14px}
.badges span{font:700 16px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy);border:1.5px solid var(--burgundy);padding:14px 18px;border-radius:60px}
.esg{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:56px}
.esg b{display:block;margin-top:22px;font:700 19px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal)}
.esg .num{font-size:96px;margin-top:26px}
.esg .num.s{font-size:54px;margin-top:30px}
.esg .num.s small{font-size:24px}
.esg p{margin-top:8px;font:400 21px/1.4 var(--sans);color:var(--slate);max-width:360px}
.callout{position:absolute;left:0;right:0;bottom:20px;background:var(--burgundy);color:var(--cream);padding:30px 40px;font:400 24px/1.45 var(--sans);display:flex;gap:28px;align-items:baseline}
.callout b{font:400 30px/1.1 var(--serif);color:var(--salmon-p);white-space:nowrap}

/* next step */
.steps{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;max-width:1500px}
.steps span{font:400 30px/1 var(--serif);color:var(--salmon)}
.steps b{display:block;margin-top:18px;font:400 40px/1.1 var(--serif);color:var(--cream)}
.steps p{margin-top:12px;font:400 22px/1.45 var(--sans);color:rgba(250,247,240,.72)}
.links{position:absolute;left:0;bottom:30px;display:flex;gap:56px}
.qr{display:flex;align-items:center;gap:24px}
.qr canvas{width:120px;height:120px;background:var(--cream);padding:10px;border-radius:4px}
.qr b{font:400 30px/1.1 var(--serif);color:var(--cream)}
.qr p{margin-top:8px;font:400 19px/1.4 var(--sans);color:rgba(250,247,240,.65)}

/* behind this sample */
.why{margin-top:70px;display:grid;grid-template-columns:repeat(2,1fr);gap:48px 96px;max-width:1560px}
.why>div{border-top:3px solid var(--burgundy);padding-top:26px}
.why b{font:400 40px/1.1 var(--serif);color:var(--burgundy)}
.why p{margin-top:14px;font:400 23px/1.5 var(--sans);color:var(--slate)}
[data-int="name"]{cursor:text;border-bottom:2px dashed transparent;transition:border-color .3s}
[data-int="name"]:hover,[data-int="name"]:focus{border-bottom-color:var(--salmon);outline:none}

/* region map is shown at 0.9 and shifted right so Mumbai clears the text panel; sea fills the margin */
.map[data-scene="mapRegion"]{background:#DCE7FA}
.map[data-scene="mapRegion"] svg{-webkit-mask-image:linear-gradient(180deg,transparent 54px,#000 130px,#000 950px,transparent 1026px);mask-image:linear-gradient(180deg,transparent 54px,#000 130px,#000 950px,transparent 1026px)}
/* until the amenity photos exist, the day reads as a text timeline */
.cards figure.noimg .frame{display:none}
.cards figure.noimg time{font-size:54px;margin-top:40px}
.cards figure.noimg b{font-size:32px}
.cards figure.noimg p{font-size:21px}