/* Ruby v62 — One carefully aligned typographic system for the two destinations.
   Does not change the photographs, daycycle, birds, leaves, sound or booking. */
:root{--ruby-hero-gutter:47px}

/* v63: Let the Istanbul main photograph show its genuine daylight/night
   tones without the former opaque black colour gradient. The gateway and
   Bodrum keep their own established treatments. */
.istanbul-hero>.hero-shade{display:none!important}

/* Keep the photographic cycle entirely distinct from the editorial RUBY TIME
   story farther down the Istanbul page. No labels are painted on the hero. */
.ruby-daycycle-stage::before,
.ruby-daycycle-stage::after{content:none!important;display:none!important}
.mare-main{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  min-height:100svh;
}
.mare-main>.ruby-daycycle-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  overflow:hidden!important;
}
.mare-main>.ruby-daycycle-stage>.ruby-daycycle-frame{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Respect the exact Ruby Mare artwork. Crop only the small secondary tagline
   printed underneath the main logo, without replacing or redrawing the mark. */
.mare-shared-header .mare-header-logo{display:block;overflow:hidden;height:62px;align-self:center}
.mare-shared-header .mare-header-logo img{
  display:block;
  width:100%;
  height:auto!important;
  max-height:none!important;
  object-fit:contain;
  object-position:left top;
  clip-path:inset(0 0 19% 0);
}

/* Both hero copy groups start at exactly the left edge of the header logo. */
.istanbul-hero .hero-inner.ruby-hero-copy,
.mare-main .mare-content.ruby-hero-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-height:100svh;
  margin:0;
  padding:135px var(--ruby-hero-gutter) 125px;
  text-align:left;
}
.ruby-hero-copy .ruby-hero-overline{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  margin:0 0 clamp(28px,4vh,43px);
  text-transform:uppercase;
}
.ruby-hero-copy .ruby-hero-location{
  display:block;
  font-family:'Manrope','DM Sans',sans-serif;
  font-size:clamp(11px,.78vw,13px);
  line-height:1.4;
  font-weight:700;
  letter-spacing:.21em;
  color:#f4eee4;
  text-shadow:0 1px 9px #0009;
}
.ruby-hero-copy .ruby-hero-collection{
  display:block;
  font-family:'Manrope','DM Sans',sans-serif;
  font-size:clamp(10px,.68vw,12px);
  line-height:1.4;
  font-weight:500;
  letter-spacing:.26em;
  color:rgba(242,236,225,.78);
  text-shadow:0 1px 9px #0009;
}
.istanbul-hero .ruby-hero-copy h1.ruby-hero-title,
.mare-main .ruby-hero-copy h1.ruby-hero-title{
  display:block;
  font-family:'Manrope','DM Sans',sans-serif;
  font-size:clamp(76px,7.05vw,147px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.062em;
  color:#f7efe6;
  text-align:left;
  white-space:nowrap;
  margin:0 0 clamp(23px,3.4vh,35px);
  text-shadow:0 4px 25px rgba(0,0,0,.22);
}
.istanbul-hero .ruby-hero-copy>p,
.mare-main .ruby-hero-copy>p{
  width:min(100%,620px);
  max-width:620px;
  font-size:clamp(15px,1.05vw,18px);
  font-weight:400;
  line-height:1.75;
  color:#f3e9df;
  text-align:left;
  margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.istanbul-hero .ruby-hero-actions,
.mare-main .ruby-hero-actions{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(18px,2.6vw,36px);
  margin-top:clamp(24px,3.7vh,39px);
}
.istanbul-hero .ruby-hero-actions>.btn,
.mare-main .ruby-hero-actions>.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:auto;
  min-width:206px;
  min-height:56px;
  padding:17px 23px;
  border:0;
  border-radius:0;
  background:#b8312b;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  backdrop-filter:none;
}
.istanbul-hero .ruby-hero-actions>.btn:hover,
.mare-main .ruby-hero-actions>.btn:hover{background:#d03a32;color:#fff}
.istanbul-hero .ruby-hero-actions>.btn-text,
.mare-main .ruby-hero-actions>.btn-text{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:23px;
  min-height:54px;
  width:auto;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-decoration:none;
  text-align:left;
  white-space:normal;
}

/* The same elegant, readable 3-part footer on BOTH full-screen photographs. */
.istanbul-hero .ruby-hero-bottom,
.mare-main .ruby-hero-bottom{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:24px;
  transform:none;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 var(--ruby-hero-gutter);
  font-family:'Manrope','DM Sans',sans-serif;
  font-size:9px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.18em;
  color:rgba(250,245,235,.91);
  text-transform:uppercase;
  text-shadow:0 2px 8px #0009;
}
.ruby-hero-bottom>a{
  display:inline-flex;
  align-items:center;
  gap:15px;
  justify-self:center;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.ruby-hero-bottom>span:last-child{text-align:right}
.istanbul-hero .ruby-hero-bottom>span:last-child::after{content:none!important}

@media(max-width:900px){
  :root{--ruby-hero-gutter:23px}
  .mare-shared-header .mare-header-logo{height:48px}
  .istanbul-hero .hero-inner.ruby-hero-copy,
  .mare-main .mare-content.ruby-hero-copy{
    min-height:100svh;
    padding:135px var(--ruby-hero-gutter) 125px;
  }
  .istanbul-hero .ruby-hero-copy h1.ruby-hero-title,
  .mare-main .ruby-hero-copy h1.ruby-hero-title{font-size:clamp(55px,9vw,90px)}
  .ruby-hero-copy .ruby-hero-overline{margin-bottom:29px}
  .istanbul-hero .ruby-hero-bottom,
  .mare-main .ruby-hero-bottom{bottom:19px;font-size:8px;gap:12px}
}
@media(max-width:640px){
  :root{--ruby-hero-gutter:21px}
  .mare-shared-header .mare-header-logo{height:39px}
  .istanbul-hero .hero-inner.ruby-hero-copy,
  .mare-main .mare-content.ruby-hero-copy{
    min-height:100svh;
    padding:130px var(--ruby-hero-gutter) 127px;
  }
  .ruby-hero-copy .ruby-hero-overline{gap:10px;margin-bottom:23px}
  .ruby-hero-copy .ruby-hero-location{font-size:10px;letter-spacing:.16em}
  .ruby-hero-copy .ruby-hero-collection{font-size:9px;letter-spacing:.2em}
  .istanbul-hero .ruby-hero-copy h1.ruby-hero-title,
  .mare-main .ruby-hero-copy h1.ruby-hero-title{
    font-size:clamp(43px,10.6vw,69px);
    line-height:1.05;
    margin-bottom:22px;
  }
  .istanbul-hero .ruby-hero-copy>p,
  .mare-main .ruby-hero-copy>p{font-size:14px;line-height:1.65;max-width:350px}
  .istanbul-hero .ruby-hero-actions,
  .mare-main .ruby-hero-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:23px;
  }
  .istanbul-hero .ruby-hero-actions>.btn,
  .mare-main .ruby-hero-actions>.btn{min-height:47px;min-width:220px;padding:12px 16px;font-size:10px}
  .istanbul-hero .ruby-hero-actions>.btn-text,
  .mare-main .ruby-hero-actions>.btn-text{min-height:38px;font-size:10px;gap:16px}
  .istanbul-hero .ruby-hero-bottom,
  .mare-main .ruby-hero-bottom{
    grid-template-columns:1fr auto;
    row-gap:8px;
    font-size:7.5px;
    letter-spacing:.1em;
    bottom:15px;
  }
  .ruby-hero-bottom>a{justify-self:end;gap:8px}
  .istanbul-hero .ruby-hero-bottom>span:last-child,
  .mare-main .ruby-hero-bottom>span:last-child{
    display:block;
    grid-column:1/-1;
    text-align:left;
  }
}
@media(prefers-reduced-motion:reduce){
  .ruby-daycycle-stage,.ruby-daycycle-frame{transition:none!important}
}