/* ============================================================
   Cosmo Suites — one stylesheet, no build step.
   Palette taken from the logo: near-black ground, gold accents.
   ============================================================ */

:root {
  /* house */
  --ink:       #1A1714;
  --ink-deep:  #131110;
  --paper:     #F7F3EA;
  --paper-2:   #EFE9DC;
  --white:     #FFFFFF;
  --rule:      #E3DAC7;
  --rule-2:    #D9CEB6;
  --muted:     #70695B;   /* small text on light - 4.5:1 on every paper */
  --body:      #4A4437;

  /* gold — three weights so contrast holds on both grounds */
  --gold:      #C9A961;  /* on dark only */
  --gold-hi:   #F0E2C0;  /* headings on dark */
  --gold-mid:  #A8863C;  /* rules on light */
  --gold-ink:  #7E6327;  /* small text on light — 5.2:1 on --paper */

  /* tenant accents */
  --nicole:       #B8933F;
  --nicole-ink:   #866726;
  --nicole-star:  #A68439;   /* stars need 3:1 as a graphic */
  --nicole-deep:  #2A1D11;
  --nicole-paper: #FDF8F0;
  --nicole-warm:  #F6EDDD;
  --kristi:       #29C2C2;
  --kristi-ink:   #136A69;
  --kristi-star:  #229F9F;
  --kristi-deep:  #10403F;   /* dark ink for text on her cyan and pink */
  --kristi-pink:  #F090A8;
  --kristi-paper: #F3FAFA;

  --serif:  'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --script: 'Parisienne', 'Snell Roundhand', cursive;
  --sans:   'Jost', 'Century Gothic', system-ui, -apple-system, sans-serif;

  --pad: clamp(22px, 5.5vw, 80px);   /* page gutter, fluid */
  --maxw: 1440px;
}

*, *::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-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 3px; }

.serif  { font-family: var(--serif); }

.wrap { max-width: var(--maxw); margin: 0 auto; }
.pad  { padding-left: var(--pad); padding-right: var(--pad); }

.eyebrow {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 500;
}

/* skip link — keyboard users land past the nav */
.skip { position: absolute; left: -9999px; background: var(--ink);
        color: var(--gold-hi); padding: 14px 22px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- buttons ---------- */
.btn, .btn-o, .btn-dark {
  display: inline-block; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 17px 34px; text-align: center;
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.btn       { background: var(--gold); color: var(--ink-deep); font-weight: 500; }
.btn:hover { background: var(--gold-hi); color: var(--ink-deep); }
.btn-o     { border-color: var(--ink); color: var(--ink); }
.btn-o:hover { background: var(--ink); color: var(--paper); }
.btn-dark  { background: var(--ink); color: var(--gold-hi); }
.btn-dark:hover { background: var(--ink-deep); color: var(--gold-hi); }

.on-dark .btn-o { border-color: #8A6F35; color: #D9BE86; }
.on-dark .btn-o:hover { background: #8A6F35; color: var(--ink-deep); }

/* ---------- header ---------- */
.site-head { background: var(--ink-deep); position: sticky; top: 0; z-index: 50; }
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 18px; padding-bottom: 18px; position: relative;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand__c { font-family: var(--serif); font-size: 20px; letter-spacing: 0.2em;
            text-transform: uppercase; color: var(--gold-hi); font-weight: 500; }
.brand__s { font-family: var(--script); font-size: 21px; color: var(--gold); }
.brand__t { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
            color: #D9BE86; padding-left: 14px; margin-left: 14px;
            border-left: 1px solid #3A3128; }

.nav { display: flex; align-items: center; gap: 40px; }
.nav__links { display: flex; gap: 32px; }
.nav__links a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #EFEAE0; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--gold); }
.nav .btn { padding: 13px 30px; }

.nav-toggle { display: none; width: 44px; height: 44px; background: none;
              border: 0; cursor: pointer; flex-direction: column;
              align-items: flex-end; justify-content: center; gap: 6px; }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--gold); }
.nav-toggle span:last-child { width: 14px; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink-deep); padding-top: 44px; padding-bottom: 28px; }
.site-foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
                   gap: 36px; padding-bottom: 34px; }
.site-foot h2 { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
                color: #A08850; font-weight: 500; margin-bottom: 4px; }
.site-foot a, .site-foot p { color: #C6BEAF; font-size: 14px; line-height: 1.8; }
.site-foot a:hover { color: var(--gold-hi); }
.site-foot__col { display: flex; flex-direction: column; gap: 10px; }
.site-foot__base { border-top: 1px solid #2A241D; padding-top: 22px;
                   display: flex; justify-content: space-between; gap: 18px;
                   font-size: 12px; color: #6E675C; }

/* ---------- hero (dark, holds the wordmark) ---------- */
.hero { background: var(--ink-deep); padding-top: clamp(28px, 4vw, 56px);
        padding-bottom: clamp(32px, 4.4vw, 60px); }
.hero__frame { border: 1px solid #6E5A2E;
               padding: clamp(32px, 4.2vw, 52px) clamp(22px, 5vw, 56px);
               display: flex; flex-direction: column; align-items: center;
               gap: clamp(20px, 2.4vw, 28px); text-align: center; }
.lockup { display: flex; flex-direction: column; align-items: center; }
.lockup__cs { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 44px);
              color: #D9BE86; font-weight: 500; line-height: 1; }
.lockup__c  { font-family: var(--serif); font-size: clamp(44px, 6.4vw, 88px);
              letter-spacing: 0.13em; color: var(--gold-hi); line-height: 1.08;
              padding-left: 0.13em; }
.lockup__row { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px);
               margin-top: -0.14em; }
.lockup__rule { height: 1px; background: #8A6F35; width: clamp(40px, 10vw, 145px); }
.lockup__s { font-family: var(--script); font-size: clamp(32px, 4.2vw, 58px);
             color: var(--gold); line-height: 1.2; }
.hero__lede { font-size: clamp(16px, 0.5vw + 12px, 19px); line-height: 1.55;
              color: #C6BEAF; max-width: 58ch; text-wrap: pretty; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- sections ---------- */
.band      { padding-top: clamp(38px, 4.4vw, 64px); padding-bottom: clamp(38px, 4.4vw, 64px); }
.band--alt { background: var(--paper-2); }
.band--rule{ border-bottom: 1px solid var(--rule); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between;
            gap: 20px; border-bottom: 1px solid var(--ink); padding-bottom: 15px; }
.sec-head h2 { font-family: var(--serif); font-size: clamp(28px, 3.1vw, 42px); }

/* two-up hero: copy one side, photograph the other. Shared by both studio
   pages and the leasing page, which each had their own copy of this. */
.hero-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) { .hero-split { grid-template-columns: 1fr; } }

/* copy-led split: wider text column, narrower action card beside it */
.split--copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1.5fr;
         gap: clamp(28px, 6vw, 88px); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.prose p { font-size: 16px; line-height: 1.65; color: var(--body);
           max-width: 68ch; }   /* 83ch was too wide to track comfortably */

.facts { display: flex; flex-wrap: wrap; gap: 20px 56px; padding-top: 16px; }
.facts div { display: flex; flex-direction: column; gap: 5px; }
.facts p { font-size: 16px; }

.media { width: 100%; height: clamp(180px, 20vw, 300px); object-fit: cover; }

/* ---------- suite tabs ----------
   Tabs share the width and shrink to fit, so there is nothing to scroll on a
   normal screen. Below 720px they scroll horizontally with the bar hidden. */
.tabs { display: flex; border-bottom: 1px solid var(--rule-2); }
.tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 22px 12px;
       display: flex; flex-direction: column; align-items: center; gap: 5px;
       text-align: center; background: var(--paper-2); border: 0;
       border-right: 1px solid var(--rule); border-bottom: 2px solid transparent;
       margin-bottom: -1px; cursor: pointer; font-family: inherit; }
.tab:last-child { border-right: 0; }
.tab__name { font-family: var(--serif); font-size: clamp(14px, 1.4vw, 20px);
             color: #6E675A; line-height: 1.15; }
.tab__sub  { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
             color: #6B6456; line-height: 1.3; }
.tab[aria-selected="true"] { background: var(--white); border-bottom-color: var(--gold-mid); }
.tab[aria-selected="true"] .tab__name { color: var(--ink); }
.tab[aria-selected="true"] .tab__sub  { color: var(--gold-ink); }

.panel[hidden] { display: none; }
.panel__top { display: grid; grid-template-columns: 1.1fr 1fr;
              background: var(--white); border: 1px solid var(--rule); border-top: 0; }
.panel__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.panel__body { padding: clamp(24px, 3vw, 42px); display: flex; flex-direction: column;
               gap: 14px; justify-content: center; }
.panel__body h3 { font-family: var(--serif); font-size: clamp(26px, 2.7vw, 36px); line-height: 1.05; }
.panel__body p  { font-size: 16px; line-height: 1.62; color: var(--body);
                  max-width: 62ch; }

.kicker { display: flex; align-items: center; gap: 12px; }
.kicker__dash { width: 26px; height: 2px; flex-shrink: 0; }
.kicker__txt { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }

.rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars { letter-spacing: 0.16em; font-size: 15px; }
.rating span { font-size: 14px; color: #5A5145; }

.pricehint { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px;
             letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pricehint i { color: #BDB3A0; font-style: normal; }

.panel__cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.link-u { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
          border-bottom: 1px solid var(--rule-2); padding-bottom: 3px; }

/* review cards */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 28px; }
/* carousel beside the rating panel. minmax(0,..) matters: a bare 1fr will not
   shrink past its content and pushes the grid wider than the viewport. */
.revs--score { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rev { border: 1px solid var(--rule); background: var(--white); padding: 22px;
       display: flex; flex-direction: column; gap: 11px; }
.rev blockquote { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55;
                  max-width: 46ch; }
.rev cite { font-style: normal; font-size: 11px; letter-spacing: 0.16em;
            text-transform: uppercase; color: var(--muted); }
.rev--score { justify-content: center; gap: 8px; text-align: center;
               align-items: center; }
.rev--score .num { font-family: var(--serif); font-size: clamp(64px, 8vw, 104px);
                   font-weight: 600; font-variation-settings: 'opsz' 16;
                   line-height: .85; letter-spacing: -0.02em; }
.rev--score .stars { font-size: 19px; letter-spacing: .22em; }
.rev--score .btn-o { margin-top: 6px; }

/* the rating panel on the home page: a proper stat block, not a leftover card */
.scorecard { display: flex; flex-direction: column; align-items: center;
             justify-content: center; text-align: center; gap: 10px;
             padding: clamp(28px, 3vw, 40px) 26px;
             border: 1px solid var(--nicole); background: #FBF6EC; }
.scorecard__num { font-family: var(--serif); font-size: clamp(68px, 8.5vw, 108px);
                  font-weight: 600; font-variation-settings: 'opsz' 16;
                  line-height: .82; letter-spacing: -0.02em; color: var(--nicole-deep);
                  display: flex; align-items: baseline; justify-content: center; }
.rating-of { font-size: .34em; font-weight: 400; letter-spacing: 0; margin-left: 5px;
             color: var(--studio-muted, var(--muted)); }
.scorecard__stars { color: var(--nicole-star); font-size: 20px; letter-spacing: .22em; }
.scorecard__meta { font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
                   color: var(--nicole-ink); }
.scorecard__note { font-size: 14px; line-height: 1.6; color: var(--body); max-width: 26ch; }


/* The site header is sticky and 80px tall, so jumping to #book or #services
   parked the section's top underneath it - you landed mid-section with the
   heading hidden. Every element with an id is a potential anchor target. */
[id] { scroll-margin-top: 96px; }

/* ---------- studio service menu ----------
   Both studio pages render the same two-column price list and gallery. Only
   the palette differs, so the colours arrive as variables the page body sets.
   Duration sits inline with the service name: on its own line it doubled the
   height of every row, and a 40-row menu is the longest band on the site. */
.menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 44px); }
.cat  { font-family: var(--menu-serif, var(--serif)); font-size: 26px;
        font-weight: var(--menu-cat-weight, 400); margin: 0 0 4px; }
.cat + .hr { height: 1px; background: var(--menu-rule); margin-bottom: 8px; }
.row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
       border-bottom: 1px solid var(--menu-rule-2); }
.row .n   { font-size: 16px; }
.row .sub { font-size: 12px; color: var(--menu-sub); margin-left: 9px; }
.row .d   { flex-grow: 1; border-bottom: 1px dotted var(--menu-dot); transform: translateY(-4px); }
.row .p   { font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--menu-price, inherit); }
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gal img { width: 100%; height: 230px; object-fit: cover; }
@media (max-width: 880px) { .menu { grid-template-columns: 1fr; } }

/* ---------- proof + action ----------
   Reviews, the booking ask and the practical details were three stacked
   full-width bands. One section, two columns: social proof beside the CTA. */
.proof__grid { display: grid; grid-template-columns: 1.15fr 1fr;
               gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.proof__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
               margin-bottom: 18px; }
.proof__score { font-family: var(--serif); font-size: clamp(38px, 4vw, 56px); line-height: .85;
                font-weight: 600; font-variation-settings: 'opsz' 16; }
.proof__book { border: 1px solid var(--rule); background: #fff; padding: clamp(22px, 2.4vw, 32px);
               display: flex; flex-direction: column; gap: 14px; }
.proof__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
               border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 4px; }
.proof__meta p { font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .proof__meta { grid-template-columns: 1fr 1fr; }
}

/* ---------- visit ---------- */
.visit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visit__body { padding: clamp(34px, 4vw, 60px) var(--pad); display: flex;
               flex-direction: column; gap: 22px; }
.visit__map { min-height: 260px; background: var(--paper-2);
              border-left: 1px solid var(--rule); }
.visit__map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

/* ---------- gold CTA strip ---------- */
.cta-strip { background: var(--gold); color: var(--ink-deep);
             padding-top: clamp(30px, 3.2vw, 46px); padding-bottom: clamp(30px, 3.2vw, 46px);
             display: flex; align-items: center; justify-content: space-between;
             gap: 28px; flex-wrap: wrap; }
.cta-strip h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); line-height: 1.12; }
.cta-strip .eyebrow { color: #4A3A16; }   /* gold-on-gold: 3.8:1 before */

/* ============================================================
   Responsive — the artboards were fixed-width; this is what
   makes them behave on a real phone.
   ============================================================ */

/* ============================================================
   Motion — restrained on purpose. Everything here is disabled
   wholesale by the prefers-reduced-motion block further down.
   ============================================================ */

/* ---------- review carousel ---------- */
.carousel { position: relative; }
.carousel__track { display: grid; }          /* slides share one cell: no height jump */
.carousel__slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
.carousel__slide.is-active { opacity: 1; visibility: visible; transform: none; }
/* With JS off nothing ever gets .is-active, so show the first slide by default.
   JS adds .js-carousel to the root, which hands control back to .is-active. */
.carousel:not(.js-carousel) .carousel__slide:first-child {
  opacity: 1; visibility: visible; transform: none;
}

.carousel__dots {
  display: flex; gap: 10px; justify-content: center;
  padding-top: 24px; flex-wrap: wrap;
}
.carousel__dot {
  width: 34px; height: 34px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.carousel__dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule-2); transition: background .2s ease, transform .2s ease;
}
.carousel__dot:hover::before { background: var(--gold-mid); }
.carousel__dot[aria-selected="true"]::before { background: var(--gold-mid); transform: scale(1.5); }

/* progress hairline: shows the slide is about to turn over */
.carousel__bar { height: 1px; background: var(--rule); margin-top: 20px; overflow: hidden; }
.carousel__bar i { display: block; height: 100%; width: 0; background: var(--gold-mid); }
.carousel.is-running .carousel__bar i { animation: cs-bar var(--cs-interval, 7s) linear forwards; }
@keyframes cs-bar { from { width: 0; } to { width: 100%; } }

/* gallery carousel: each slide is a row of three, rotating as a set */
/* Square nail photos at full content width rendered 400px tall, twice the
   height of the studio galleries. Capping the slide keeps the square crop
   and lines the two studio pages up. */
.gal-carousel { max-width: 940px; margin-inline: auto; }
.gal-carousel .carousel__slide { display: grid; align-items: start; }
.gal-slide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* align-items:start matters: as grid items the images would otherwise stretch
   to the row height and ignore aspect-ratio, rendering tall instead of square. */
.gal-slide img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 700px) { .gal-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                            .gal-slide img:last-child { display: none; } }

/* ---------- scroll reveal ----------
   Scoped to .reveal-on, which JS adds to <html> only once it has confirmed it
   can reveal again. Without JS, without IntersectionObserver, or if the script
   dies, nothing is ever hidden and the page reads normally. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(14px);
                           transition: opacity .5s ease, transform .5s ease; }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- gentle lifts ---------- */
.rev, .gal img, .panel__img { transition: transform .35s ease, box-shadow .35s ease; }
.gal img:hover { transform: translateY(-3px); }
.tab { transition: background .2s ease; }

/* motion off entirely for anyone who asks for it */
@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; transform: none; }
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .carousel.is-running .carousel__bar i { animation: none; width: 100%; }
  .gal img:hover { transform: none; }
}

@media (max-width: 1080px) {
  .split, .split--copy { grid-template-columns: 1fr; gap: 28px; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .revs { grid-template-columns: 1fr 1fr; }
  .revs--score { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-width: 128px; }
}

@media (max-width: 880px) {
  .nav__links, .nav .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav.is-open { position: absolute; left: 0; right: 0; top: 100%;
                 background: var(--ink-deep); flex-direction: column;
                 align-items: stretch; gap: 0; padding: 8px var(--pad) 24px; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 0; }
  .nav.is-open .nav__links a { padding: 16px 0; border-bottom: 1px solid #2A241D; }
  .nav.is-open .btn { display: block; margin-top: 18px; }

  .panel__top { grid-template-columns: 1fr; }
  .panel__img { min-height: 240px; }
  .visit { grid-template-columns: 1fr; }
  .visit__map { border-left: 0; border-top: 1px solid var(--rule); min-height: 260px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* booking embeds: shorter on phones so the page is still scrollable past them */
@media (max-width: 880px) { #book iframe { height: 700px; } }

@media (max-width: 620px) {
  .revs, .revs--score { grid-template-columns: 1fr; }
  .site-foot__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-foot__base { flex-direction: column; gap: 8px; }
  .brand__t { display: none; }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-strip { flex-direction: column; align-items: flex-start; }
  .btn, .btn-o, .btn-dark { padding: 16px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-head, .nav-toggle, .cta-strip { display: none; }
  body { background: #fff; }
}