/* StayNexperiences — corporate travel-trade site. Light, formal, print-like. */

:root{
  --ink:#15202e;
  --ink-2:#33404f;
  --navy:#14284a;
  --navy-2:#1d3a67;
  --gold:#a9781f;
  --gold-2:#c9a14a;
  --paper:#ffffff;
  --cream:#f7f5f1;
  --cream-2:#efebe3;
  --line:#ddd8cf;
  --line-2:#eae6de;
  --muted:#5c6674;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pad:clamp(56px, 6vw, 92px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0 0 .55em; font-family:var(--serif); font-weight:600; line-height:1.22; letter-spacing:-.008em}
h1{font-size:clamp(30px, 3.4vw, 44px)}
h2{font-size:clamp(24px, 2.3vw, 31px)}
h3{font-size:17px; font-family:var(--sans); font-weight:600; letter-spacing:-.005em; line-height:1.4}
p{margin:0 0 1em}
small{font-size:13px}
.wrap{width:min(1160px, 100% - 44px); margin-inline:auto}
.wrap.narrow{width:min(860px, 100% - 44px)}
.center{text-align:center}
.nb{white-space:nowrap}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:99; background:var(--navy); color:#fff; padding:10px 16px}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.eyebrow::before{content:''; display:block; width:42px; height:2px; background:var(--gold); margin-bottom:14px}
.lede{font-size:17px; color:var(--ink-2); max-width:64ch}
.figcap{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); margin:12px 0 0}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:.005em;
  padding:12px 24px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-lg{padding:14px 30px; font-size:15px}
.btn-solid{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-solid:hover{background:var(--navy-2); border-color:var(--navy-2)}
.btn-line{border-color:var(--line); background:var(--paper); color:var(--ink)}
.btn-line:hover{border-color:var(--navy); color:var(--navy)}

/* ------------------------------------------------------------ utility bar */
.utility{background:var(--navy); color:rgba(255,255,255,.82); font-size:12.5px}
.utility-inner{display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:38px; flex-wrap:wrap}
.utility a{color:#fff}
.utility a:hover{color:var(--gold-2)}
.utility-right{display:flex; gap:22px; align-items:center}
.utility .hours{color:rgba(255,255,255,.6)}

/* ----------------------------------------------------------------- header */
.site-head{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; gap:28px; min-height:74px}
.brand img{width:186px; height:auto}
.nav{display:flex; gap:28px; margin-inline:auto; font-size:14.5px; font-weight:500}
.nav a{color:var(--ink-2); padding:26px 0; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s ease, border-color .2s ease}
.nav a:hover{color:var(--navy)}
.nav a.is-active{color:var(--navy); font-weight:600; border-bottom-color:var(--gold)}
.head-cta{display:flex; align-items:center}
.burger{display:none; width:42px; height:42px; border:1px solid var(--line); background:var(--paper);
  border-radius:2px; padding:0; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink)}

/* ------------------------------------------------------------------- hero */
.hero{background:var(--cream); border-bottom:1px solid var(--line); padding:clamp(44px,5vw,72px) 0}
.hero-inner{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4vw,58px); align-items:center}
.hero-copy h1{margin-bottom:18px; max-width:19ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0}
.hero-stats{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; margin:30px 0 0;
  padding:22px 0 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
.hero-stats strong{color:var(--navy); font-weight:700; font-size:15px}
.hero-media img{width:100%; aspect-ratio:4/3.05; object-fit:cover; object-position:center;
  border:1px solid var(--line); background:var(--cream-2)}

/* ------------------------------------------------------------- logo grid */
.rail-sec{padding:clamp(38px,4vw,58px) 0; border-bottom:1px solid var(--line-2); background:var(--paper)}
.rail-label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:center; margin:0 0 26px}
.rail-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--line-2); border-left:1px solid var(--line-2)}
.rail-grid li{display:flex; align-items:center; justify-content:center; padding:18px 12px;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); min-height:82px}
.rail-grid img{height:42px; width:auto; opacity:.92; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease}
.rail-grid li:hover img{opacity:1; filter:none}

/* --------------------------------------------------------------- sections */
.sec{padding:var(--pad) 0}
.sec-tight{padding:clamp(40px,4.2vw,64px) 0}
.sec-tint{background:var(--cream); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.sec-head{display:grid; grid-template-columns:1fr .82fr; gap:26px; align-items:end; margin-bottom:clamp(26px,3vw,40px)}
.sec-head h2{margin:0}
.sec-note{color:var(--muted); margin:0; font-size:15.5px}
.page-head{background:var(--cream); border-bottom:1px solid var(--line); padding:clamp(40px,4.6vw,68px) 0}
.page-head h1{max-width:22ch}
.page-head.center h1{max-width:none; margin-inline:auto}
.grid-note{margin:22px 0 0; font-size:13.5px; color:var(--muted)}

/* ---------------------------------------------------- destination cards */
.dest-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.dest{display:block; border:1px solid var(--line); background:var(--paper); transition:border-color .2s ease}
.dest:hover{border-color:var(--navy)}
.dest-media{display:block; aspect-ratio:4/3; overflow:hidden; background-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a14a' stroke-width='1' opacity='.45'%3E%3Ccircle cx='60' cy='60' r='38'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3Cpath d='M60 22v76M22 60h76'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px; background-position:center}
.dest-media img{width:100%; height:100%; object-fit:cover}
.dest-body{display:block; padding:16px 18px 18px; border-top:1px solid var(--line)}
.dest-city{display:block; font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.25; color:var(--ink)}
.dest-state{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.dest-meta{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line-2); font-size:13px; color:var(--ink-2)}
.dest-meta i{font-style:normal; font-size:12.5px; font-weight:600; color:var(--gold); letter-spacing:.04em}
.dest:hover .dest-meta i{color:var(--navy)}

/* ------------------------------------------------------ pillars / cards */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line);
  border-left:1px solid var(--line)}
.pillar{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 24px 28px}
.pillar .ic{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; margin-bottom:14px}
.pillar .ic svg{width:24px; height:24px; fill:var(--gold)}
.pillar h3{margin-bottom:7px}
.pillar p{margin:0; font-size:14.5px; color:var(--muted)}

.circuits{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line);
  border-left:1px solid var(--line)}
.circuit{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px}
.circuit h3{margin-bottom:6px}
.circuit p{margin:0; font-size:14.5px; color:var(--muted)}

.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:28px;
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.card{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px; background:var(--paper)}
.card h3{margin-bottom:8px}
.card p{margin:0; font-size:14.5px; color:var(--muted)}

/* ------------------------------------------------------------ split / steps */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,3.5vw,56px); align-items:center}
.split-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line)}
.split-copy h2{margin-bottom:14px}
.split-copy p{color:var(--ink-2)}

.steps{list-style:none; margin:30px 0 0; padding:0}
.step{display:grid; grid-template-columns:70px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--serif); font-size:22px; color:var(--gold); line-height:1.3; font-weight:600}
.step h3{margin-bottom:3px}
.step p{margin:0; color:var(--muted); font-size:15px}

.ops{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px}
.ops li{position:relative; padding:8px 0 8px 18px; font-size:14.5px; color:var(--ink-2);
  border-bottom:1px solid var(--line-2)}
.ops li::before{content:''; position:absolute; left:0; top:16px; width:6px; height:1px; background:var(--gold)}

/* ------------------------------------------------------------------ table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); margin-top:24px}
.index-table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px}
.index-table th, .index-table td{text-align:left; padding:12px 18px; border-bottom:1px solid var(--line-2)}
.index-table th{background:var(--cream); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--line)}
.index-table tr:last-child td{border-bottom:0}
.index-table td:first-child{font-weight:600}
.index-table tbody tr:hover{background:var(--cream)}

/* ------------------------------------------------------------------- form */
.contact-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(22px,2.6vw,40px); align-items:start}
.contact-form-wrap{border:1px solid var(--line); padding:clamp(22px,2.6vw,34px)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.field{display:flex; flex-direction:column; gap:6px; margin:0 0 16px}
.field label{font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)}
.field label span{color:var(--gold)}
.field input, .field select, .field textarea{
  font-family:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:2px; padding:11px 13px; width:100%;
  transition:border-color .2s ease;
}
.field textarea{resize:vertical; min-height:124px}
.field input::placeholder, .field textarea::placeholder{color:#9aa2ad}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--navy)}
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0}
.form-fine{margin:12px 0 0; font-size:12.5px; color:var(--muted)}
.note{border-radius:2px; padding:13px 16px; margin-bottom:18px; font-size:14.5px; font-weight:500}
.note.ok{background:#f1f6f1; border:1px solid #cfe0d2; color:#20502f}
.note.bad{background:#fbf2f1; border:1px solid #ecd3d0; color:#7d2f28}
.contact-side{display:grid; gap:20px}
.contact-side .card{padding:24px; border:1px solid var(--line)}
.contact-side .card h3{margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line-2)}
.contact-side .btn{margin-top:18px; width:100%}
.map-card{padding:0!important; overflow:hidden}
.map-card iframe{display:block; width:100%; height:280px; border:0}

.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.contact-list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-2)}
.contact-list svg{width:16px; height:16px; fill:var(--gold); flex:none; margin-top:4px}
.contact-list a:hover{color:var(--navy); text-decoration:underline}

/* --------------------------------------------------------------- cta/foot */
.cta-band{background:var(--navy); color:#fff; padding:clamp(40px,4.4vw,62px) 0}
.cta-inner{display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:center}
.cta-inner h2{margin:0 0 8px; max-width:22ch; color:#fff}
.cta-inner p{margin:0; color:rgba(255,255,255,.74); font-size:15.5px; max-width:58ch}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.cta-actions .btn-solid{background:var(--gold); border-color:var(--gold)}
.cta-actions .btn-solid:hover{background:#8f6417; border-color:#8f6417}
.cta-actions .btn-line{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.cta-actions .btn-line:hover{border-color:#fff; color:#fff}

.site-foot{background:var(--cream); border-top:1px solid var(--line); padding:clamp(42px,4.4vw,62px) 0 0}
.foot-grid{display:grid; grid-template-columns:1.5fr .8fr 1.1fr 1.15fr; gap:34px}
.foot-brand img{width:196px; margin-bottom:15px}
.foot-brand p{font-size:14px; color:var(--muted); max-width:40ch}
.foot-tag{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600}
.site-foot h3{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px}
.site-foot ul.two-col{grid-template-columns:1fr 1fr; gap:8px 16px}
.site-foot a:hover{color:var(--navy); text-decoration:underline}
.site-foot .more{margin:14px 0 0; font-size:13.5px; font-weight:600}
.site-foot .more a{color:var(--gold)}
.foot-base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:40px; padding:18px 0; font-size:12.5px; color:var(--muted)}
.foot-base p{margin:0}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .dest-grid{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .rail-grid{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:960px){
  .utility-inner{justify-content:center; text-align:center}
  .utility .hours{display:none}
  .nav{
    position:fixed; inset:112px 0 auto; flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:6px 22px 18px; margin:0;
    transform:translateY(-130%); transition:transform .25s ease;
  }
  .nav.open{transform:none}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line-2); font-size:16px; margin:0}
  .nav a.is-active{border-bottom-color:var(--line-2)}
  .burger{display:flex}
  .head-inner{gap:14px; justify-content:space-between}
  .hero-inner{grid-template-columns:1fr}
  .hero-media{order:-1}
  .sec-head{grid-template-columns:1fr; align-items:start}
  .split{grid-template-columns:1fr}
  .split-media{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
  .cta-actions{justify-content:flex-start}
  .circuits{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .dest-grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .dest-city{font-size:17px}
  .dest-body{padding:13px 14px 15px}
  .pillars, .circuits, .cards-3{grid-template-columns:1fr}
  .rail-grid{grid-template-columns:repeat(3,1fr)}
  .rail-grid li{min-height:70px; padding:14px 8px}
  .rail-grid img{height:30px}
  .hero-stats{gap:8px 22px}
  .f-row{grid-template-columns:1fr}
  .ops{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:4px}
  .step .n{font-size:18px}
  .hero-actions .btn, .cta-actions .btn{width:100%}
  .brand img{width:156px}
  .utility-right{gap:14px}
  .head-cta .btn{padding:10px 15px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}