:root{
  --ink:#151310;
  --soft:#746e67;
  --gold:#aa946e;
  --panel:#f7f4ef;
  --hotel-background:url('hero.svg');
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,Arial,sans-serif;
  background:#111;
  color:var(--ink)
}

button,input{font:inherit}
button{cursor:pointer}

.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(410px,.65fr)
}

.hero{
  position:relative;
  min-height:100vh;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.48)),
    var(--hotel-background) center/cover no-repeat;
  color:#fff
}

.shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 65%)
}

.brand{
  position:absolute;
  left:54px;
  top:46px;
  display:flex;
  gap:17px;
  align-items:center;
  z-index:2
}

.monogram{
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.62);
  display:grid;
  place-items:center;
  font-family:'Cormorant Garamond',serif;
  font-size:25px;
  letter-spacing:.08em
}

.hotel-logo-container{
  width:82px;
  height:64px;
  padding:6px;
  background:rgba(255,255,255,.94);
  border:0;
}

.hotel-logo-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.eyebrow,.section-label{
  font-size:10px;
  letter-spacing:.24em;
  font-weight:600
}

.brand h1{
  margin:2px 0 0;
  font:600 29px 'Cormorant Garamond',serif
}

.hero-copy{
  position:absolute;
  left:54px;
  bottom:78px;
  z-index:2;
  max-width:680px
}

.kicker{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600
}

.hero-copy h2{
  margin:12px 0 0;
  font:500 clamp(54px,6vw,92px)/.92 'Cormorant Garamond',serif
}

.hero-copy p:last-child{
  max-width:470px;
  line-height:1.7;
  color:rgba(255,255,255,.88)
}

.panel{
  background:var(--panel);
  min-height:100vh
}

.panel-inner{
  height:100%;
  padding:42px 52px 28px;
  display:flex;
  flex-direction:column
}

.lang-switch{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:9px
}

.lang-switch span{
  width:1px;
  height:14px;
  background:#cbc5bc
}

.lang{
  border:0;
  background:none;
  color:#9a938a;
  font-size:11px;
  letter-spacing:.18em
}

.lang.active{
  color:#171512;
  font-weight:600
}

.content{
  max-width:460px;
  width:100%;
  margin:auto
}

.section-label{
  color:var(--gold);
  margin:0 0 16px
}

.content h3,.modal-card h3{
  font:600 44px/1.03 'Cormorant Garamond',serif;
  margin:0 0 17px
}

.muted{
  color:var(--soft);
  font-size:14px;
  line-height:1.7;
  margin-bottom:32px
}

.consent{
  display:flex;
  align-items:flex-start;
  gap:13px;
  font-size:13px;
  line-height:1.55;
  color:#4b4640;
  margin-bottom:22px
}

.consent input{
  position:absolute;
  opacity:0
}

.checkmark{
  width:19px;
  height:19px;
  border:1px solid #aaa198;
  background:#fff;
  flex:0 0 19px;
  position:relative
}

.consent input:checked+.checkmark{
  background:#171512;
  border-color:#171512
}

.consent input:checked+.checkmark:after{
  content:'';
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg)
}

.link-button,.footer-link{
  border:0;
  background:none;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
  color:#28231e
}

.primary,.secondary{
  width:100%;
  min-height:57px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:12px;
  font-weight:600
}

.primary{
  background:#171512;
  color:#fff
}

.primary:disabled{
  opacity:.35;
  cursor:not-allowed
}

.arrow{font-size:18px}
.hidden{display:none!important}

.field-label{
  display:block;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:10px
}

.code-input{
  width:100%;
  height:56px;
  background:#fff;
  border:1px solid #cfc7bd;
  padding:0 16px;
  font-size:16px;
  outline:none
}

.compact{margin-top:20px}

.privacy{
  display:flex;
  gap:10px;
  margin-top:27px;
  color:#8b847b;
  font-size:11px;
  line-height:1.55
}

.shield{color:var(--gold)}

footer{
  margin-top:auto;
  padding-top:30px;
  display:flex;
  justify-content:center;
  gap:10px;
  color:#9a938a;
  font-size:10px
}

.footer-link{
  text-decoration:none;
  color:#817a72
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:20
}

.modal.open{display:flex}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(5px)
}

.modal-card{
  position:relative;
  z-index:1;
  width:min(700px,100%);
  max-height:82vh;
  overflow:auto;
  background:#fbfaf8;
  padding:46px;
  box-shadow:0 30px 80px rgba(0,0,0,.25)
}

.modal-close{
  position:absolute;
  right:20px;
  top:14px;
  border:0;
  background:none;
  font-size:30px;
  color:#777
}

.modal-card h3{font-size:36px}

.terms-copy{
  font-size:13px;
  line-height:1.7;
  color:#554f48;
  margin:24px 0
}

.terms-copy h4{
  color:#1b1916;
  margin:22px 0 6px
}

.secondary{
  border:1px solid #bbb2a6;
  background:transparent;
  color:#171512
}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .hero{min-height:36vh}

  .brand{
    left:24px;
    top:24px
  }

  .hero-copy{
    left:24px;
    right:24px;
    bottom:28px
  }

  .hero-copy h2{font-size:clamp(34px,10vw,46px);line-height:1.02;text-wrap:balance}
  .hero-copy p:last-child{display:none}
  .panel{min-height:64vh}
  .panel-inner{padding:22px 24px}
  .lang-switch{margin-bottom:32px}
  .content{margin:0 auto}
  .content h3{font-size:38px}
  footer{margin-top:42px}
}


/* GUESTCONNECT-VALIDATE-BUTTON-FINAL */

#codeButton.primary,
#acceptButton.primary {
    width: 100% !important;
    min-height: 58px !important;

    background: #3F5A46 !important;

    color: inherit !important;

    border: 1px solid #334A3A !important;
    border-radius: 9px !important;

    box-shadow:
        0 4px 8px rgba(0,0,0,.18) !important;

    font-weight: 700 !important;
    cursor: pointer !important;

    transition:
        background .12s ease,
        transform .12s ease,
        box-shadow .12s ease !important;
}

#codeButton.primary span,
#codeButton.primary .arrow,
#acceptButton.primary span,
#acceptButton.primary .arrow {
    color: inherit !important;
    opacity: 1 !important;
}

#codeButton.primary:not(:disabled):hover,
#acceptButton.primary:not(:disabled):hover {
    background: #334A3A !important;
    transform: translateY(-1px);
}

#codeButton.primary:not(:disabled):active,
#acceptButton.primary:not(:disabled):active {
    transform: translateY(1px);
}

#codeButton.primary:disabled,
#acceptButton.primary:disabled {
    background: #AAB6AB !important;

    color: inherit !important;

    opacity: 1 !important;

    cursor: not-allowed !important;

    box-shadow:
        0 3px 7px rgba(0,0,0,.14) !important;
}

#codeButton.primary:disabled span,
#codeButton.primary:disabled .arrow,
#acceptButton.primary:disabled span,
#acceptButton.primary:disabled .arrow {
    color: inherit !important;
    opacity: 1 !important;
}

/* gc-logo-original-display-v3 */
.hero .brand .monogram[style*="background-image"]{background-color:transparent!important;background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hero .brand .monogram[style*="background-image"]::before,.hero .brand .monogram[style*="background-image"]::after{content:none!important;display:none!important}
.hero .brand .monogram img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background-color:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}

/* gc-logo-original-display-v4 */
.hero .brand .monogram{background-color:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hero .brand .monogram::before,.hero .brand .monogram::after{content:none!important;display:none!important;background:transparent!important;border:0!important;box-shadow:none!important}
.hero .brand .monogram img,.hero .brand img.hotel-logo-image{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;filter:none!important}

/* GC_MOBILE_FULLSCREEN_BEGIN */
@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .shell {
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: hidden !important;
    }

    .shell.layout-mobile-bottom {
        grid-template-rows: 28dvh 72dvh !important;
    }

    .shell.layout-mobile-top {
        grid-template-rows: 72dvh 28dvh !important;
    }

    .shell.layout-mobile-bottom .hero {
        order: 1;
    }

    .shell.layout-mobile-bottom .panel {
        order: 2;
    }

    .shell.layout-mobile-top .panel {
        order: 1;
    }

    .shell.layout-mobile-top .hero {
        order: 2;
    }

    .hero,
    .panel {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .brand {
        left: 16px !important;
        top: 12px !important;
        gap: 9px !important;
        max-width: calc(100% - 32px) !important;
    }

    .monogram,
    .hotel-logo-container {
        width: 48px !important;
        height: 42px !important;
        flex: 0 0 48px !important;
    }

    .eyebrow {
        font-size: 8px !important;
        line-height: 1.1 !important;
        letter-spacing: .14em !important;
    }

    .brand h1 {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere !important;
    }

    .hero-copy {
        left: 16px !important;
        right: 16px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: calc(100% - 32px) !important;
        min-width: 0 !important;
    }

    .hero-copy h2 {
        margin: 0 !important;
        max-width: 100% !important;
        font-size: clamp(21px, 7.5vw, 29px) !important;
        line-height: 1.12 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-wrap: balance;
    }

    .hero-copy p {
        display: none !important;
    }

    .panel-inner {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: clamp(10px, 1.7dvh, 16px) 20px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .lang-switch {
        flex: 0 0 auto !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 0 clamp(6px, 1.2dvh, 11px) !important;
        white-space: nowrap !important;
    }

    .lang-switch span {
        height: 11px !important;
    }

    .lang {
        min-width: 0 !important;
        padding: 2px 5px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        letter-spacing: .12em !important;
    }

    .content {
        width: 100% !important;
        max-width: 460px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: auto !important;
        transform-origin: center center;
    }

    .section-label {
        margin: 0 0 5px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        letter-spacing: .16em !important;
    }

    .content h3 {
        margin: 0 0 7px !important;
        max-width: 100% !important;
        font-size: clamp(22px, 6.5vw, 28px) !important;
        line-height: 1.08 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .muted,
    #accessDescription {
        margin: 0 0 clamp(8px, 1.5dvh, 13px) !important;
        max-width: 100% !important;
        font-size: clamp(11px, 3.25vw, 13px) !important;
        line-height: 1.35 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .field-label {
        margin-bottom: 5px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .code-input {
        height: clamp(39px, 6.5dvh, 46px) !important;
        padding: 0 12px !important;
        font-size: 14px !important;
    }

    .consent {
        gap: 9px !important;
        margin: clamp(7px, 1.2dvh, 11px) 0 !important;
        max-width: 100% !important;
        font-size: clamp(10px, 3vw, 12px) !important;
        line-height: 1.28 !important;
        overflow-wrap: anywhere !important;
    }

    .consent.compact {
        margin-top: clamp(7px, 1.2dvh, 11px) !important;
    }

    .checkmark {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    .primary,
    .secondary,
    #codeButton.primary,
    #acceptButton.primary {
        min-height: clamp(40px, 6.5dvh, 48px) !important;
        padding: 6px 12px !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        line-height: 1.15 !important;
    }

    .privacy {
        gap: 7px !important;
        margin-top: clamp(7px, 1.2dvh, 11px) !important;
        max-width: 100% !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    footer {
        display: none !important;
    }

    .modal {
        padding: 12px !important;
    }

    .modal-card {
        max-height: calc(100dvh - 24px) !important;
        padding: 30px 20px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .modal-card h3 {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    .terms-copy {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 900px) and (max-height: 700px) {
    .shell.layout-mobile-bottom {
        grid-template-rows: 24dvh 76dvh !important;
    }

    .shell.layout-mobile-top {
        grid-template-rows: 76dvh 24dvh !important;
    }

    .brand {
        top: 8px !important;
    }

    .hero-copy {
        bottom: 8px !important;
    }

    .hero-copy h2 {
        font-size: 21px !important;
    }

    .panel-inner {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}
/* GC_MOBILE_FULLSCREEN_END */