/* =========================================================================
   Praxis Mamonova — Layout-Basis
   Struktureller Nachbau des Seitenaufbaus von aman.com/resorts/aman-kyoto
   (Raster, Typo-Skala, Abstände, Slider-Geometrie 1:1 vermessen).
   Texte + Bilder sind Platzhalter. Schriften sind freie Substitute.
   ========================================================================= */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,figure,ul,ol,li,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--charcoal);outline-offset:3px}

/* ---------- 2. Tokens ---------- */
:root{
  --sand:#f3eee7;
  --sand-light:#fdfaf6;
  --white:#fff;
  --charcoal:#313131;
  --charcoal-btn:#404040;
  --grey:#585858;
  --rule:rgba(49,49,49,.18);
  --rule-strong:rgba(49,49,49,.45);

  --serif:"Spectral","Lyon Display Web","Times New Roman",Times,serif;
  --sans:"Archivo","WhitneySSm","Helvetica Neue",Arial,sans-serif;

  --gutter:24.5px;
  --container:1440px;
  --container-lg:1600px;
  --spacer:65px;          /* .container--spacer margin */
  --grid-gap:33px;        /* Kartenraster */
  --hgroup-max:680px;
}

/* ---------- 3. Basis-Typografie ---------- */
html{font-size:14px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  font-size:1rem;              /* 14px */
  line-height:1.45;            /* 20.3px */
  letter-spacing:.8px;
  font-weight:300;
  color:var(--charcoal);
  background:var(--sand);
  overflow-x:hidden;
}
p+p{margin-top:1rem}

.subtitle{
  font-family:var(--sans);
  font-size:.722rem;           /* 10.108px */
  line-height:1.45;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:400;
  margin:0 0 1rem;             /* 14–16px, s.u. */
}
.heading-h{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:.5px;
  line-height:1.45;
}
.heading-h--xl{font-size:2.22rem}     /* 31.08px */
.heading-h--l{font-size:1.722rem}     /* 24.108px */
.heading-h--m{font-size:1.4rem;letter-spacing:.98px}  /* 19.6px */
.heading-h--s{font-size:1.2rem;letter-spacing:4px;text-transform:uppercase}  /* 16.8px */

.hgroup__intro{font-family:var(--serif);font-size:1rem}
.hgroup__intro p+p{margin-top:1rem}

/* ---------- 4. Layout-Helfer ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.container{max-width:var(--container);margin-inline:auto;width:100%}
.container--large{max-width:var(--container-lg)}
.gutter{padding-inline:var(--gutter)}
.container--spacer{margin-block:var(--spacer)}

.hgroup--limited{max-width:var(--hgroup-max);margin-inline:auto}
.hgroup--center{text-align:center}

/* CTA-Link (Textlink mit feiner Unterlinie) */
.cta__link{
  position:relative;
  display:inline-block;
  font-family:var(--sans);
  font-size:.929rem;           /* 13px */
  letter-spacing:.8px;
  padding:14px;
  margin-left:-14px;
}
.cta__link::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:8.4px;
  border-bottom:1px solid var(--charcoal);
  transition:opacity .3s ease;
}
.cta__link:hover::after{opacity:.35}

.button{
  display:inline-block;
  font-family:var(--sans);
  font-size:1rem;
  letter-spacing:.7px;
  text-align:center;
  transition:opacity .3s ease;
}
.button:hover{opacity:.8}
.button--dark{background:var(--charcoal);color:var(--sand);padding:10px 15px}
.button--charcoal{background:var(--charcoal-btn);color:var(--sand);font-size:.88rem;padding:7.4px 33.3px}
.button--outline{border:1px solid var(--charcoal);color:var(--charcoal);font-size:.88rem;padding:7.4px 33.3px}

.media{overflow:hidden;background:#e6e0d6}
.media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 5. Header ---------- */
.main-header{
  position:sticky;top:0;z-index:60;
  background:var(--sand);
}
.header__top{padding-inline:var(--gutter)}
.header__top .container{
  display:flex;
  align-items:center;
  justify-content:center;
  height:88px;
}

.logo{display:flex;align-items:center}
.logo a{display:block}
.logo__mark{
  display:block;
  width:390px;
  height:auto;
  fill:currentColor;
}
.lang{
  position:relative;
  display:flex;align-items:center;gap:8px;
  font-size:1rem;letter-spacing:.7px;
  height:44px;margin-right:28px;
  white-space:nowrap;
}
.lang svg{width:10px;height:6px;fill:currentColor}
.header__cta{min-width:140px;height:42px;line-height:22px}

/* Property-Navigation */
.property-navigation{
  position:relative;
  background:var(--sand);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.property-navigation__nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height:58px;
  max-width:var(--container-lg);margin-inline:auto;
  padding-inline:var(--gutter);
  font-size:.9rem;             /* 12.6px */
}
.property-navigation__actions{
  grid-column:3;
  justify-self:end;
  display:flex;align-items:center;
  margin-left:28px;
}
.property-navigation__list{
  grid-column:2;
  min-width:0;
  display:flex;align-items:stretch;flex-wrap:wrap;
  justify-content:center;justify-content:safe center;
}
.property-navigation__list-item{display:flex;margin:0 10.24px}
.property-navigation__list-item>a{
  display:flex;align-items:center;
  height:47px;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
  white-space:nowrap;
}
.property-navigation__list-item>a:hover,
.property-navigation__list-item.is-open>a,
.property-navigation__list-item.is-active>a{border-bottom-color:var(--charcoal)}

/* Zweite Ebene */
.property-navigation__children{
  position:absolute;top:100%;left:0;right:0;z-index:5;
}
.property-navigation__list--children{
  display:flex;flex-wrap:wrap;
  justify-content:center;justify-content:safe center;
  background:var(--sand);
  border-bottom:1px solid var(--rule);
  padding-inline:var(--gutter);
  font-size:.9rem;
}
.property-navigation__list--children[hidden]{display:none}
.property-navigation__link--child{height:44px;letter-spacing:.5px}

/* ---------- 6. Hero ---------- */
.hero .media--hero{
  aspect-ratio:1231/699;         /* Bildformat wie im Original */
  margin-bottom:3.2rem;          /* 44.8px */
  position:relative;
  background:var(--charcoal);
}
.media__video{
  width:100%;height:100%;
  object-fit:cover;
  /* Das Video ist 3:2, der Ausschnitt 1,76:1 — der Beschnitt liegt
     dadurch überwiegend unten. Für einen anderen Ausschnitt nur
     object-position ändern (z. B. "center center" oder "center 50%"). */
  object-position:center 30%;
  display:block;
}
/* Wortmarke über dem Film ------------------------------------------------
   Ablauf: 1. Schrift blendet auf und wächst dabei um 30 %
           2. erst wenn sie steht, zieht sich die Linie von links nach rechts */
.hero-logo-overlay{
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding-inline:8%;
  pointer-events:none;
}
.hero-logo{
  width:min(48%,608px);
  height:auto;
  fill:#fff;
  /* die Haarlinien der Schrift sind sehr fein — der weiche Schatten hält sie
     auch über hellen Stellen des Films lesbar */
  filter:drop-shadow(0 2px 20px rgba(0,0,0,.45));
  transform-origin:50% 50%;
  /* Aufblenden und Wachsen laufen gleich lang, aber mit eigener Kurve:
     die Transparenz gleichmäßig, die Größe weich auslaufend */
  animation:
    hero-logo-fade 2600ms cubic-bezier(.5,0,.5,1)        300ms both,
    hero-logo-grow 2600ms cubic-bezier(.22,.61,.36,1)    300ms both;
}
@keyframes hero-logo-fade{
  from{opacity:0}
  to  {opacity:1}
}
@keyframes hero-logo-grow{
  from{transform:scale(.77)}
  to  {transform:scale(1)}
}
.hero-logo__rule{
  transform-box:fill-box;
  transform-origin:0 50%;
  /* startet erst, wenn die Schrift steht: 300 ms + 2600 ms */
  animation:hero-rule-in 1800ms cubic-bezier(.4,0,.2,1) 2900ms both;
}
@keyframes hero-rule-in{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

/* Wer Bewegung reduziert haben möchte, sieht das Standbild */
@media (prefers-reduced-motion:reduce){
  .media__video{display:none}
  .hero-logo,.hero-logo__rule{animation:none;opacity:1;transform:none}
  .hero .media--hero{
    background:var(--charcoal) url("../img/hero-poster.jpg") center 30%/cover no-repeat;
  }
}
.hero .hgroup{margin-bottom:var(--spacer)}
.hero .subtitle{margin-bottom:1rem}
.hero .heading-h{margin-bottom:1.6rem}   /* 22.4px */

/* ---------- 7. Slider-Grundlagen (Pfeile + Fortschritts-Punkte) ---------- */
.slider__arrows{display:flex;justify-content:flex-end;gap:0;margin-top:8.4px}
.slider__arrows button{
  width:37px;height:30px;display:grid;place-items:center;
  transition:opacity .3s ease;
}
.slider__arrows button:hover{opacity:.5}
.slider__arrows svg{width:25px;height:28px;fill:currentColor}

.slider__dots{
  display:flex;
  width:590px;max-width:100%;
  margin:75px auto 10px;
  height:28px;
}
.slider__dots li{flex:1 1 0;display:flex}
.slider__dots button{
  flex:1;display:flex;align-items:center;
  border-top:1px solid var(--rule);
  transition:border-color .3s ease;
}
.slider__dots li.is-active button{border-top-color:var(--charcoal)}

/* ---------- 8. Karten ---------- */
.scards{display:grid;gap:var(--grid-gap)}
.scards--1{grid-template-columns:1fr}
.scards--1-3{grid-template-columns:1fr 2fr}
.scards--3{grid-template-columns:repeat(3,1fr)}

.card{display:flex;flex-direction:column}
.card .hgroup{margin-top:16px}
.card .subtitle{margin-bottom:16px}
.card__heading{margin-bottom:7px}
.card__links{margin:14px 0 20px;display:flex;flex-wrap:wrap;gap:10px}

.card--full .media{aspect-ratio:1231/761}
.card--row .media{height:481px}
.card--col .media{aspect-ratio:388/510}

.bg-sand-light{background:var(--sand-light)}
.section--pt{padding-top:83px}
.section--pb{padding-bottom:80px}

/* Karten-Slider (Bildwechsel innerhalb einer Karte) */
.cardslider{position:relative;overflow:hidden}
.cardslider__track{display:flex;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.cardslider__track>*{flex:0 0 100%;width:100%}

/* ---------- 8b. Unterseite: Titel, Unternavigation, Text-Bild-Blöcke ---------- */
.text--centered{text-align:center}
.page-title{margin:1.487rem 0 1.6rem}     /* 20.8px / 22.4px */

.subnav{margin:-30px 0 31px}
.subnav__list{
  display:flex;flex-wrap:wrap;
  justify-content:center;justify-content:safe center;
  max-width:var(--container);margin-inline:auto;
}
.subnav__list li{margin:0 23px}
.subnav__list a{
  display:block;
  font-family:var(--sans);
  font-size:.929rem;                       /* 13px */
  letter-spacing:normal;
  padding:0 5px;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.subnav__list a:hover,
.subnav__list li.is-active a{border-bottom-color:#82847f}

/* margin-block, nicht die Kurzform: sonst überschreibt margin:… 0 …
   das margin-inline:auto von .container und der Block rutscht nach links */
.intro-block{margin-block:var(--spacer) 90px}

/* Bild und Text nebeneinander — Verhältnis 909 : 477 wie im Original */
.mtsbs__card{
  display:grid;
  grid-template-columns:909fr 477fr;
  align-items:start;
}
.mtsbs__media{display:grid;gap:49px}
.mtsbs__media-pair{display:grid;grid-template-columns:1fr 1fr;gap:49px}
.media--portrait{aspect-ratio:430/566}
.media--landscape{aspect-ratio:909/561}
.media--wide{aspect-ratio:909/518}

.mtsbs__copy{padding-left:40px}
.mtsbs--media-right .mtsbs__card{grid-template-columns:477fr 909fr}
.mtsbs--media-right .mtsbs__media{grid-column:2;grid-row:1}
.mtsbs--media-right .mtsbs__copy{grid-column:1;grid-row:1;padding-left:0;padding-right:50px}

.mtsbs__copy .heading-h{margin-bottom:11px}
.mtsbs__copy p{margin-bottom:1rem}
.mtsbs__copy p+.heading-h{margin-top:1.6rem}
.mtsbs__copy p:last-child{margin-bottom:0}
.mtsbs__bottom{margin-top:40px;padding-top:25px}
.cta-links{display:flex;flex-wrap:wrap;gap:0 10px}

/* Kontaktkasten */
.cta-box-outer{max-width:1122px;margin-inline:auto}
.cta-box{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0 49px;
  padding:30px 50px;
  border-top:1px solid #dad9d7;
  border-bottom:1px solid #dad9d7;
}
.cta-box .button{white-space:nowrap}

/* Teaserzeile in den Karussell-Karten */
.nearby__teaser{font-size:1rem;line-height:1.45}

/* ---------- 8c. Design-System-Seite ---------- */
.ds-section{
  max-width:var(--container);margin-inline:auto;
  padding-block:56px;
  border-top:1px solid var(--rule);
}
.ds-section__title{margin-bottom:1.6rem}
.ds-subtitle{
  font-family:var(--sans);
  font-size:.722rem;letter-spacing:2px;text-transform:uppercase;font-weight:400;
  margin:2.8rem 0 1.2rem;
}
.ds-note{max-width:var(--hgroup-max);margin-bottom:2rem;color:var(--grey)}
.ds-note code,.ds-swatch__meta code,.ds-table code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em;letter-spacing:0;
}

.ds-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--grid-gap)}
.ds-swatch__chip{
  height:104px;margin-bottom:12px;
  /* feine Kontur, damit auch Sand und Weiß auf dem Seitenhintergrund
     als Fläche erkennbar bleiben */
  border:1px solid var(--rule);
}
.ds-swatch__name{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;letter-spacing:0;margin-bottom:2px;
}
.ds-swatch__meta{font-size:.929rem;line-height:1.5;color:var(--grey)}

.ds-fonts{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.ds-font__specimen{font-size:4.4rem;line-height:1.1;margin:.6rem 0 1.4rem}
.ds-font__alphabet{font-size:1.2rem;line-height:1.7;margin-bottom:1.2rem}
.ds-font__note{color:var(--grey);max-width:38em}

.ds-table-wrap{overflow-x:auto}
.ds-table{width:100%;border-collapse:collapse;text-align:left}
.ds-table th{
  font-family:var(--sans);font-weight:400;
  font-size:.722rem;letter-spacing:2px;text-transform:uppercase;
  padding:0 20px 12px 0;border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.ds-table td{
  padding:16px 20px 16px 0;border-bottom:1px solid var(--rule);
  vertical-align:baseline;color:var(--grey);
}
.ds-table td:first-child{color:var(--charcoal)}
.ds-table__specimen{min-width:220px;white-space:nowrap}

.ds-logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.ds-logo-card{padding:48px 40px;border:1px solid var(--rule)}
.ds-logo-card--dark{background:var(--charcoal);border-color:var(--charcoal)}
.ds-logo-card--dark .ds-swatch__meta{color:rgba(255,255,255,.6)}
.ds-logo-card .ds-swatch__meta{margin-top:28px}

.ds-logo-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);align-items:end}
.ds-logo-sizes .ds-swatch__meta{margin-top:14px}

.ds-anim__stage{
  background:var(--charcoal);
  padding:64px 40px;
  display:grid;place-items:center;
  margin-bottom:20px;
}
.ds-anim__logo{width:min(70%,520px);height:auto;fill:#fff}
.ds-anim.is-playing .ds-anim__logo{
  animation:
    hero-logo-fade 2600ms cubic-bezier(.5,0,.5,1)     0ms both,
    hero-logo-grow 2600ms cubic-bezier(.22,.61,.36,1) 0ms both;
}
.ds-anim.is-playing .ds-anim__rule{
  transform-box:fill-box;transform-origin:0 50%;
  animation:hero-rule-in 1800ms cubic-bezier(.4,0,.2,1) 2600ms both;
}
.ds-steps{margin-top:1.6rem;counter-reset:ds}
.ds-steps li{
  position:relative;padding-left:28px;margin-bottom:.6rem;color:var(--grey);
  counter-increment:ds;
}
.ds-steps li::before{
  content:counter(ds) ".";
  position:absolute;left:0;color:var(--charcoal);
}
.ds-steps strong{font-weight:400;color:var(--charcoal)}

.ds-controls{display:flex;flex-wrap:wrap;gap:var(--grid-gap)}
.ds-control{flex:0 0 220px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ds-control--wide{flex-basis:340px}
.ds-control .slider__dots{width:100%}

@media (max-width:1023px){
  .ds-swatches{grid-template-columns:repeat(3,1fr)}
  .ds-fonts,.ds-logo-grid{grid-template-columns:1fr}
  .ds-font__specimen{font-size:3.4rem}
}
@media (max-width:719px){
  .ds-swatches{grid-template-columns:repeat(2,1fr)}
  .ds-logo-sizes{grid-template-columns:1fr}
  .ds-section{padding-block:40px}
}

/* ---------- 9. Anfahrt ---------- */
.getting-here{margin:var(--spacer) 0 112px}
.getting-here .hgroup{margin-bottom:var(--spacer)}
.map{height:577px;background:#e9e5dd;position:relative}
.map img{width:100%;height:100%;object-fit:cover}
.map__hint{
  position:absolute;right:0;bottom:0;
  font-size:.86rem;letter-spacing:.4px;color:var(--grey);
  background:rgba(255,255,255,.7);padding:2px 6px;
}
.property-contact{
  display:grid;grid-template-columns:repeat(3,298px);
  justify-content:center;gap:28px;
  padding:30px 24.5px 0;
}
.property-contact address{font-style:normal}
.property-contact .label{font-size:.929rem;line-height:1.72;letter-spacing:.42px}

/* ---------- 10. Weitere Standorte ---------- */
.nearby{margin-block:var(--spacer)}
.nearby .heading-h{margin-bottom:1.843rem}   /* 25.8px */
.nearby__viewport{overflow:hidden;padding-left:var(--gutter)}
.nearby__track{display:flex;gap:24px;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.nearby__slide{flex:0 0 475px;max-width:80vw}
.nearby__slide .media{aspect-ratio:1/1}
.nearby__slide .hgroup{margin-top:18px;text-align:center}
.nearby__slide .subtitle{margin-bottom:11px}
.nearby__slide .heading-h{margin-bottom:7px}
.block--link{margin-top:var(--spacer);text-align:center}

/* ---------- 11. Footer ---------- */
.site-footer{background:var(--white);color:var(--grey);padding:0 var(--gutter) 28px}
.site-footer .container{max-width:var(--container)}
.site-footer a:hover{color:var(--charcoal)}
.site-footer h2,.site-footer h3{color:var(--charcoal)}

.fgrid{display:grid;gap:0 49px}
.footer-contact{padding:45px 0 21px;border-bottom:1px solid var(--rule)}
.footer-contact .fgrid{grid-template-columns:22% minmax(0,415px) 1fr}
.footer-contact address{font-style:normal}
.footer-contact .subheader{margin-bottom:1.2rem}

.footer-cta{padding:30px 0 10px}
.footer-cta .fgrid{grid-template-columns:1fr 2fr 1fr;align-items:center}
.footer-cta .button{justify-self:start;width:100%;max-width:271px}

.footer-links{padding:30px 0 11px}
.footer-links .fgrid{grid-template-columns:1fr 3fr}
/* Drei Stufen im Fuß-Menü:
   1. Rubrik   1,722rem Serif, Anthrazit   (.nav-heading)
   2. Gruppe   1,2rem   Serif, Anthrazit   (.dest-head)
   3. Eintrag  1rem     Serif, Grau        (Listenlinks)            */
.footer-links .nav-heading{margin-bottom:1.6rem}
.quick-contact li{margin-bottom:6px}
.quick-contact li.is-child{padding-left:0}
.destinations{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:.9rem 28px;                /* Zeilenabstand = Überschrift → Liste */
  font-size:1rem;letter-spacing:.8px;line-height:1.45;
}
/* Überschrift und Liste liegen im Raster der Elternebene: dadurch beginnen
   alle vier Listen auf einer Linie, auch wenn eine Überschrift umbricht */
.destinations>li{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 2;
  margin-bottom:1.3rem;
}
.destinations .dest-head{
  display:block;
  font-family:var(--serif);
  font-size:1.2rem;              /* 16.8px */
  color:var(--charcoal);
  letter-spacing:.8px;
}
.destinations ul li{margin-bottom:6px}
.destinations ul li:last-child{margin-bottom:0}
.footer-links .button{margin-top:28px}

.footer-copyright{padding-top:20px;color:var(--charcoal)}
.footer-copyright .fgrid{grid-template-columns:1fr 2fr 1fr;align-items:center}
.footer-logo svg{display:block;width:220px;height:auto;fill:currentColor}
.social{display:flex;align-items:center;flex-wrap:wrap;gap:8px 40px}
.social__list{display:flex;flex-wrap:wrap;gap:0 22px}
.social__list a{display:grid;place-items:center;width:24px;height:24px}
.social__list svg{width:17px;height:17px;fill:currentColor}
.copyright{text-align:right}

/* ---------- 12. Responsive ---------- */
@media (max-width:1439px){
  /* Platz für den Termin-Button in der Menüzeile — die Sprachwahl
     passt erst ab 1440 px daneben, ohne die Navigation aus der Mitte zu drücken */
  .lang{display:none}
  .property-navigation__nav{font-size:.82rem}
  .property-navigation__list-item{margin:0 4px}
  .header__cta{min-width:0;padding:10px 18px}
  .property-navigation__list{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .property-navigation__list::-webkit-scrollbar{display:none}
  .property-navigation__list--children{flex-wrap:nowrap;overflow-x:auto}
  .property-navigation__list--children::-webkit-scrollbar{display:none}
}
@media (max-width:1023px){
  :root{--spacer:48px;--grid-gap:24px}
  .logo__mark{width:312px}
  .header__top .container{height:72px}
  .lang{display:none}
  .scards--1-3,.scards--3{grid-template-columns:1fr}
  .mtsbs__card{grid-template-columns:1fr;gap:32px}
  .mtsbs__copy,
  .mtsbs--media-right .mtsbs__copy{padding:0}
  .mtsbs--media-right .mtsbs__media{grid-column:1;grid-row:1}
  .mtsbs--media-right .mtsbs__copy{grid-column:1;grid-row:2}
  .mtsbs__media{gap:24px}
  .mtsbs__media-pair{gap:24px}
  .cta-box{grid-template-columns:1fr;gap:20px;padding:30px 0}
  .card--row .media{height:auto;aspect-ratio:4/3}
  .property-contact{grid-template-columns:1fr;justify-content:stretch;gap:24px;text-align:center}
  .footer-contact .fgrid,.footer-cta .fgrid,.footer-links .fgrid,.footer-copyright .fgrid{grid-template-columns:1fr;gap:24px}
  .destinations{grid-template-columns:repeat(2,1fr)}
  .copyright{text-align:left}
  .nearby__slide{flex-basis:min(475px,78vw)}
  .footer-cta .button{max-width:none}
}
@media (max-width:719px){
  html{font-size:13px}
  .property-navigation__nav{min-height:50px;grid-template-columns:minmax(0,1fr) auto}
  .property-navigation__list{
    grid-column:1;justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .property-navigation__list-item>a{height:42px}
  .property-navigation__actions{grid-column:2;margin-left:14px}
  .logo__mark{width:200px}
  .header__search{margin-left:20px}
  .header__cta{min-width:0;height:36px;line-height:16px;padding:10px 14px;font-size:.92rem}
  .heading-h--xl{font-size:1.9rem}
  .map{height:380px}
  .destinations{grid-template-columns:1fr}
  .slider__dots{margin-top:40px}
  .subnav__list li{margin:0 12px}
  .mtsbs__media-pair{grid-template-columns:1fr}
  .intro-block{margin-bottom:56px}
}
@media (max-width:479px){
  .logo__mark{width:150px}
  .header__search{margin-left:14px}
  .header__cta{padding:9px 11px;font-size:.86rem}
  .footer-logo svg{width:180px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}