/* ==================================================================
   Beach & Bliss Mirissa
   Design system: ivory sand, deep ocean ink, brass accent.
   Display serif + quiet geometric sans. Generous space, big imagery.
   ================================================================== */

:root {
  --ink:        #10201e;
  --ink-soft:   #2c3f3c;
  --muted:      #6d7f7b;
  --sand:       #f8f5ef;
  --sand-deep:  #efe9df;
  --line:       #e2dbd0;
  --brass:      #b0894f;
  --brass-lt:   #cfae72;
  --sea:        #1c4a46;
  --white:      #ffffff;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --sect: clamp(4.5rem, 11vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- small shared bits ---------- */

.eyebrow {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--brass);
  margin: 0 0 1.25rem;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--sand);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--sand); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }

.btn--brass { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--brass:hover { background: transparent; color: var(--brass); }

/* ---------- header ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--gut);
  transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.site-head.is-stuck {
  background: rgba(248,245,239,.94);
  backdrop-filter: blur(14px);
  padding-block: .9rem;
  box-shadow: 0 1px 0 var(--line);
}

/* Brand lockup: centred name over a brass hairline over wide-tracked place
   name. The hairline is what makes it read as a considered mark rather than
   two stacked bits of text — it's the detail hotel identities lean on. */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  padding-bottom: .1rem;
}
.brand b {
  font-family: var(--serif);
  font-size: 1.62rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--white);
  transition: color .45s var(--ease);
}
.brand span {
  position: relative;
  font-size: .55rem;
  letter-spacing: .42em;
  /* Tracking pushes the last letter right; nudge back so it stays centred. */
  text-indent: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: .62rem;
  padding-top: .55rem;
  transition: color .45s var(--ease);
}
.brand span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 1px;
  margin-left: -13px;
  background: var(--brass-lt);
  transition: width .55s var(--ease), background .45s var(--ease);
}
.brand:hover span::before { width: 44px; }
.is-stuck .brand b { color: var(--ink); }
.is-stuck .brand span { color: var(--brass); }
.is-stuck .brand span::before { background: var(--brass); }

.nav { display: flex; align-items: center; gap: 2.5rem; }
.nav a {
  position: relative;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.88);
  padding-block: .35rem;
  transition: color .45s var(--ease);
}
/* A brass rule that draws in from the left, rather than a crude opacity fade.
   Slow and eased — nothing on a luxury site should snap. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brass-lt);
  transition: width .45s var(--ease);
}
.nav a:hover::after { width: 100%; }
.is-stuck .nav a { color: var(--ink-soft); }
.is-stuck .nav a:hover { color: var(--ink); }
.is-stuck .nav a::after { background: var(--brass); }

.nav .btn { padding: .8rem 1.5rem; }
.is-stuck .nav .btn--ghost { color: var(--ink); border-color: var(--ink); }
.is-stuck .nav .btn--ghost:hover { background: var(--ink); color: var(--sand); }

.burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.burger span { display: block; width: 26px; height: 1px; background: var(--white); margin: 6px 0; transition: background .45s var(--ease); }
.is-stuck .burger span { background: var(--ink); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 65;
  background: var(--sea);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer a {
  font-family: var(--serif); font-size: 2rem; color: var(--sand); text-decoration: none;
}
.drawer__close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: 0; color: var(--sand); font-size: 2rem; cursor: pointer; line-height: 1; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  color: var(--white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,20,19,.55) 0%, rgba(8,20,19,.15) 38%, rgba(8,20,19,.78) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
/* The h1 now wraps two spans that set their own size, so it must not impose
   one of its own — a font-size here also changes what `ch` means and would
   squash the tagline's max-width. */
.hero h1 { color: var(--white); }
.hero__sub {
  font-size: .68rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

/* ---------- sections ---------- */

.section { padding-block: var(--sect); }
.section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--ink { background: var(--sea); color: var(--sand); }
.section--ink h2 { color: var(--white); }
.section--ink .eyebrow { color: var(--brass-lt); }
.section--deep { background: var(--sand-deep); }

.section__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1.25rem; }

/* intro split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split__media img { width: 100%; height: clamp(340px, 52vw, 620px); object-fit: cover; }

.stats { display: flex; flex-wrap: wrap; gap: 2.75rem; margin-top: 2.75rem; }
.stats div b {
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--brass);
}
.stats div span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- rooms ---------- */

.rooms { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6rem); }

.room {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.room:nth-child(even) .room__media { order: 2; }

.room__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sand-deep);
  overflow: hidden;
}
.room__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.room:hover .room__media > img { transform: scale(1.045); }

/* ---------- room photo gallery ---------- */

.gal { position: absolute; inset: 0; }

/* Scroll-snap track: native swipe on touch, arrows drive it on desktop. */
.gal__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__track img,
.gal__track .gal__video {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* Video is letterboxed rather than cropped. Phone footage is often 9:16 and
   `cover` would slice the top and bottom off — which on a vertical clip is
   usually most of the subject. Bars are the lesser evil. */
.gal__track .gal__video { object-fit: contain; background: #0b1413; }

.gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.room__media:hover .gal__nav,
.gal__nav:focus-visible { opacity: 1; }
.gal__nav:hover { background: #fff; }
.gal__nav--prev { left: .85rem; }
.gal__nav--next { right: .85rem; }
.gal__nav:disabled { opacity: 0 !important; pointer-events: none; }

.gal__count {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(16,32,30,.78);
  color: var(--sand);
  font-size: .68rem;
  letter-spacing: .12em;
  padding: .4rem .75rem;
  pointer-events: none;
}

/* Touch devices have no hover, so keep the arrows visible there. */
@media (hover: none) {
  .gal__nav { opacity: 1; background: rgba(255,255,255,.82); }
}

/* placeholder shown until photos are uploaded via /admin */
.room__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; text-align: center; padding: 2rem;
  background: repeating-linear-gradient(45deg, var(--sand-deep) 0 12px, #e8e1d5 12px 24px);
  color: var(--muted);
}
.room__ph b { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--ink-soft); }
.room__ph span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }

.room__count {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(16,32,30,.82);
  color: var(--sand);
  font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .5rem .9rem;
}

.room__body h3 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: .5rem; }
.room__view { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 1.4rem; }
.room__headline { font-family: var(--serif); font-size: 1.4rem; font-style: italic; color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.4; }
.room__desc { color: var(--ink-soft); margin: 0 0 1.75rem; max-width: 52ch; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; padding: 0; list-style: none; }
.tags li {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); padding: .45rem .85rem; color: var(--ink-soft);
}
.tags li.is-key { border-color: var(--brass); color: var(--brass); }

.room__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.btn--book { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--book:hover { background: transparent; color: var(--brass); }
.btn--quiet { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn--quiet:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }

/* ---------- facilities ---------- */

.facilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.fac { background: var(--sea); padding: 2.25rem 1.75rem; transition: background .4s var(--ease); }
.fac:hover { background: #17403c; }
.fac svg { width: 26px; height: 26px; stroke: var(--brass-lt); fill: none; stroke-width: 1.2; margin-bottom: 1.1rem; }
.fac b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin-bottom: .3rem; }
.fac span { font-size: .8rem; color: rgba(248,245,239,.6); }

/* ---------- facility photo tiles ---------- */

.fac--photo { position: relative; padding: 0; min-height: 230px; overflow: hidden; }
.fac--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.fac--photo:hover img { transform: scale(1.05); }
.fac__cap {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.75rem;
  background: linear-gradient(180deg, rgba(8,20,19,0) 40%, rgba(8,20,19,.8) 100%);
}
.fac__cap b { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: #fff; }
.fac__cap span { font-size: .8rem; color: rgba(255,255,255,.75); }

/* ---------- hotel gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.gshot { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-deep); }
/* Every fifth image runs double width, so the grid reads as a composition
   rather than a uniform contact sheet. */
.gshot--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
.gshot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gshot:hover img { transform: scale(1.04); }

@media (max-width: 640px) {
  .gshot--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.contact__row { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.contact__row b { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; font-weight: 400; }
.contact__row a, .contact__row p { font-family: var(--serif); font-size: 1.45rem; margin: 0; text-decoration: none; }
.contact__row a:hover { color: var(--brass); }

.form { display: grid; gap: 1.1rem; }
.form label { display: block; }
.form span.lbl { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.form input, .form select, .form textarea {
  width: 100%; padding: .95rem 1.1rem;
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--ink);
  transition: border-color .3s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brass); }
.form textarea { min-height: 130px; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ---------- footer ---------- */

.site-foot { background: var(--ink); color: rgba(248,245,239,.62); padding-block: clamp(3rem, 7vw, 5rem) 2rem; font-size: .85rem; }
.site-foot h4 { color: var(--white); font-size: 1.7rem; margin-bottom: .75rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-grid b { display: block; color: var(--white); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 400; }
.foot-grid a { display: block; text-decoration: none; padding: .3rem 0; }
.foot-grid a:hover { color: var(--brass-lt); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: .75rem; }

/* ---------- floating whatsapp ---------- */

.wa {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 70;
  display: flex; align-items: center; gap: .7rem;
  background: #25D366; color: #fff; text-decoration: none;
  padding: .95rem 1.4rem; border-radius: 100px;
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .35s var(--ease);
}
.wa:hover { transform: translateY(-3px); }
.wa svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: block; }
  .split, .room, .contact, .foot-grid { grid-template-columns: 1fr; }
  .room:nth-child(even) .room__media { order: 0; }
  .hero__meta { gap: 1.5rem; }
  .form .two { grid-template-columns: 1fr; }
  .wa span { display: none; }
  .wa { padding: 1rem; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .room__media img { transition: none; }
}

/* Gallery video: letterboxed, never cropped — see the note on .gal__video. */
.gshot--video { background: #0b1413; }
.gshot--video video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- gallery video row ---------- */
/* Each clip keeps its own aspect ratio at a shared height, so a vertical
   phone video is simply narrow and tall rather than a thin strip stranded
   inside a wide letterboxed box. Nothing is cropped and there are no bars. */
.vrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.vrow__clip {
  height: 400px;
  width: auto;
  max-width: 100%;
  background: #0b1413;
  display: block;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .vrow__clip { height: 300px; }
}
@media (max-width: 560px) {
  /* On a phone, one clip per row at full width reads better than a squeeze. */
  .vrow__clip { height: auto; width: 100%; }
}

/* ---------- services ---------- */
/* Lighter than the facilities grid on purpose: services are arranged rather
   than walked into, so they read as a list of offers, not a tour of rooms. */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.svc {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--sand);
}
.svc svg { width: 24px; height: 24px; stroke: var(--brass); fill: none; stroke-width: 1.2; flex: 0 0 auto; margin-top: .2rem; }
.svc b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.svc span { font-size: .85rem; color: var(--muted); }

/* ---------- hero title ---------- */
/* The h1 holds both the hotel name and the tagline. The name is set smaller
   so the design keeps its emphasis on the tagline, while the heading still
   tells search engines (and a first-time visitor) who this actually is. */
.hero__title { display: block; }
.hero__name {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.72rem, 1.5vw, .85rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-bottom: .9rem;
}
.hero__tag {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, 9.5vw, 8rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 14ch;
}

/* ==================================================================
   LUXURY POLISH PASS
   Restraint, finer tracking, hairline detailing, slower motion.
   ================================================================== */

/* Optical refinements. Kerning and ligatures are off by default in many
   browsers for performance; on a display serif they are very visible. */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .brand b, .room__headline, .fac__cap b, .svc b {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Display headings: slightly tighter, so large type reads as set rather
   than typed. */
.section__head h2 { letter-spacing: -0.022em; }
.hero__tag { letter-spacing: -0.028em; }

/* Eyebrow labels get a short brass rule — a small editorial signal that
   costs nothing and reads as considered. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  letter-spacing: .32em;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: 0 0 auto;
}

/* Buttons: lighter, wider, calmer. Heavy tracking on small caps is the
   single biggest tell between a premium and a default-looking button. */
.btn {
  font-size: .7rem;
  letter-spacing: .24em;
  padding: 1.05rem 2.3rem;
  transition: background .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease);
}
.nav .btn { padding: .78rem 1.5rem; letter-spacing: .2em; }

/* Lede paragraphs: a touch more air between lines. */
.lede { line-height: 1.8; }

/* Room cards: quieter tags, more considered rate row. */
.tags li { letter-spacing: .14em; font-size: .66rem; padding: .5rem .9rem; }
.room__view { letter-spacing: .26em; font-size: .68rem; }
.room__headline { font-size: 1.5rem; line-height: 1.35; }

/* Stats: hairline separators instead of bare spacing. */
.stats { gap: 0; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.stats div { padding-right: 2.5rem; margin-right: 2.5rem; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stats div b { font-size: 2.9rem; letter-spacing: -.02em; }
.stats div span { letter-spacing: .24em; font-size: .66rem; }

/* Facility tiles: gentler hover, finer caption type. */
.fac--photo:hover img { transform: scale(1.035); }
.fac__cap b { letter-spacing: .01em; }
.fac b { letter-spacing: .01em; }

/* Motion: slower and softer throughout. Nothing should snap. */
.reveal { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.gshot img, .room__media img { transition: transform 1.4s var(--ease); }

@media (max-width: 640px) {
  /* Hairline dividers become clutter on a narrow column. */
  .stats { flex-direction: column; gap: 1.5rem; }
  .stats div { border-right: 0; margin-right: 0; padding-right: 0; }
}

/* ---------- "The Resort" copy ---------- */
/* Two voices: an opening statement in the display serif, then supporting
   detail in the quieter sans. The size and family shift does the work of
   hierarchy, so neither paragraph needs to shout. */
.stay__lede {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.72rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 1.5rem;
}
.stay__lede strong {
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
}
.stay__body {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2.5rem;
}
/* Emphasis is carried by weight and colour, not by heavy bold — a black
   run of text inside a light paragraph reads as shouting. */
.stay__body strong { font-weight: 400; color: var(--ink); }

@media (max-width: 940px) {
  .stay__lede { max-width: none; }
  .stay__body { max-width: none; }
}

/* ---------- "The Resort" — corrected hierarchy ---------- */
/* This h2 sits outside .section__head, so it never picked up a display size
   and rendered SMALLER than the paragraph below it — the heading read as the
   first line of the sentence. It needs its own scale and real separation. */
#stay h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 1.9rem;
}

/* Lede steps down so the heading clearly leads. Tighter leading too — the
   lines were drifting apart and losing their connection to each other. */
.stay__lede {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.58;
  max-width: 34ch;
  margin: 0 0 1.6rem;
}
/* Emphasis stays serif but drops the italic. Four consecutive lines of
   italic is tiring to read and was swamping the rest of the block. */
.stay__lede strong { font-style: normal; font-weight: 400; color: var(--ink); }

.stay__body { font-size: .98rem; line-height: 1.9; max-width: 52ch; margin: 0 0 3rem; }

/* Stats as a real 4-column grid. As a wrapping flex row they broke to 2+2
   with the dividers landing in the wrong places. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  margin-top: 0;
}
.stats div {
  padding: 0 1.25rem;
  margin: 0;
  border-right: 1px solid var(--line);
  border-left: 0;
}
.stats div:first-child { padding-left: 0; }
.stats div:last-child { border-right: 0; padding-right: 0; }
.stats div b { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; margin-bottom: .5rem; }
.stats div span { letter-spacing: .2em; font-size: .6rem; line-height: 1.4; }

@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .stats div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .stats div:nth-child(2n+1) { padding-left: 0; }
}

/* ---------- room cards: calmer, more ordered ---------- */
/* The amenity chips were flowing as a ragged cloud — rows of 1, 1, 3, 2, 3…
   which reads as clutter however nice the type is. A fixed two-column list
   with hairline rules gives it structure and halves the column height, so
   the text block balances the photograph instead of towering over it. */
.tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  gap: 0;
  margin: 0 0 2rem;
  border-top: 1px solid var(--line);
}
.tags li {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: .72rem 0;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.4;
}
/* The signature feature gets the full width and the brass, so it leads
   instead of competing with fourteen equals. */
.tags li.is-key {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--brass);
  color: var(--brass);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .9rem 0;
}

/* The view line was wrapping mid-phrase and orphaning "SLEEPS 8". Less
   tracking, a little more size, and room to breathe. */
.room__view {
  font-size: .66rem;
  letter-spacing: .18em;
  line-height: 1.7;
  margin: 0 0 1.5rem;
  max-width: 42ch;
}

.room__headline {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.4;
  margin: 0 0 1.1rem;
  max-width: 34ch;
}
.room__desc { font-size: .95rem; line-height: 1.9; max-width: 50ch; margin: 0 0 2rem; }
.room__body h3 { letter-spacing: -0.025em; margin-bottom: .7rem; }

/* Counter moved off the bottom edge — it was sitting on top of the video's
   own playback controls. */
.gal__count { bottom: auto; top: 1rem; right: 1rem; }

@media (max-width: 620px) {
  .tags { grid-template-columns: 1fr; column-gap: 0; }
}

/* Let the photo fill the row rather than sit centred against a much taller
   text column — measured 571px of image against 846px of text, which left
   the picture looking undersized next to its own description. */
.room { align-items: stretch; }
.room__media {
  aspect-ratio: auto;
  min-height: clamp(420px, 46vw, 620px);
  height: 100%;
}
@media (max-width: 940px) {
  /* Stacked, there is no column to match, so give it a sensible shape back. */
  .room__media { aspect-ratio: 4 / 3; min-height: 0; height: auto; }
}

/* ---------- room media: back to a sane shape ---------- */
/* Stretching the media to match the text column made a landscape video
   letterbox into a very tall frame — about 40% of the panel became black
   bars. Equal columns were not worth that. A fixed 3:2 frame top-aligned
   with the room name reads better and keeps video close to its own ratio. */
.room { align-items: start; }
.room__media {
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: auto;
  position: sticky;
  top: 6rem;
}
@media (max-width: 940px) {
  .room__media { aspect-ratio: 4 / 3; position: static; }
}

/* ---------- justified body copy ---------- */
/* Flush on both edges, with hyphenation on so justification does not open
   rivers of white space. This is what makes long-form copy read as set
   rather than typed. */
.room__desc,
.stay__body,
.section__head .lede {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* ---------- view line ---------- */
/* "Sleeps 8" was breaking across lines and orphaning the numeral. */
.room__view { max-width: 46ch; letter-spacing: .14em; }
.room__sleeps { white-space: nowrap; }

/* A room whose gallery leads with video gets a 16:9 frame, matching the
   clip's own ratio — no black bars at all. Its photos crop to cinematic
   rather than the video sitting in a letterbox. */
.room__media--video { aspect-ratio: 16 / 9; }
@media (max-width: 940px) {
  .room__media--video { aspect-ratio: 16 / 9; }
}

/* ---------- matched paragraph measures ---------- */
/* The lede and the paragraph beneath it were set in `ch` — but a ch is the
   width of a "0" in the CURRENT font, so 34ch of Cormorant and 52ch of Jost
   are wildly different pixel widths. That is why the two paragraphs did not
   line up. Fixed rem values make both columns end on exactly the same edge. */
.stay__lede,
.stay__body { max-width: 30rem; }

.room__headline,
.room__desc { max-width: 28rem; }

/* The view line sits above both and should share the same edge. */
.room__view { max-width: 28rem; }

@media (max-width: 940px) {
  .stay__lede, .stay__body,
  .room__headline, .room__desc, .room__view { max-width: none; }
}

/* ---------- footer credit ---------- */
.foot-credit { color: rgba(248,245,239,.5); }
.foot-credit b {
  font-weight: 400;
  color: rgba(248,245,239,.8);
  letter-spacing: .04em;
}

/* ---------- services: no phantom empty cells ---------- */
/* The grid drew its dividers by showing a background through 1px gaps, so
   with 5 items in a 4-column row the 3 unused cells rendered as a large
   beige block. Each tile now carries its own border, so empty grid areas
   are simply not there. */
.services {
  background: transparent;
  border: 0;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.svc {
  border: 1px solid var(--line);
  background: transparent;
  padding: 1.6rem 1.5rem;
}

/* ==================================================================
   SECTION HEADINGS — consistent, centred, brass-ruled
   Every full-width section gets the same formal treatment. Sections
   with an image beside the text stay left-aligned, since centring
   there would fight the layout.
   ================================================================== */

.section__head {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section__head .eyebrow { justify-content: center; }
.section__head .lede {
  margin-inline: auto;
  text-align: center;
  hyphens: none;
}

/* A brass rule beneath every section heading — the repeated detail that
   makes the page feel like one designed system rather than a stack of
   separate blocks. */
.section__head h2::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  background: var(--brass);
  margin: 1.6rem auto 0;
}
.section--ink .section__head h2::after { background: var(--brass-lt); }

/* Split sections (The Resort, Location) keep their left alignment. */
.split .eyebrow { justify-content: flex-start; }

/* ==================================================================
   CLEARER TYPE
   Cormorant Garamond has very fine strokes and a low x-height — elegant,
   but it reads as faint, and running it at weight 300 made that worse.
   EB Garamond has a taller x-height, sturdier stems and more open
   apertures: same classical character, considerably easier to read.
   ================================================================== */

:root {
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

/* Headings were set at 300 — thin enough to look washed out against a pale
   background. 500 keeps them refined without going heavy. */
h1, h2, h3, h4 { font-weight: 500; }
.section__head h2,
#stay h2 { font-weight: 500; }

/* EB Garamond sets larger than Cormorant at the same px, so the display
   sizes come down slightly to compensate. */
.hero__tag { font-size: clamp(2.7rem, 8.4vw, 6.8rem); font-weight: 500; }
.section__head h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
#stay h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }

/* Body-size serif needs the extra weight most — this is where thin strokes
   really disappear. */
.stay__lede { font-weight: 400; color: var(--ink); }
.stay__lede strong { font-weight: 600; }
.room__headline { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.room__body h3 { font-weight: 500; }

.brand b { font-weight: 500; }
.drawer a { font-weight: 500; }
.stats div b { font-weight: 500; }
.fac__cap b, .fac b, .svc b { font-weight: 500; }
.site-foot h4 { font-weight: 500; }

/* ==================================================================
   DISPLAY SERIF — Playfair Display
   A modern serif rather than an old-style one: crisper, more vertical
   stress, a noticeably taller x-height. It holds its shape on a phone
   screen where Garamond's fine strokes thin out.
   ================================================================== */

:root {
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Playfair runs large and tall, so display sizes step back again. */
.hero__tag { font-size: clamp(2.4rem, 7.2vw, 5.8rem); line-height: 1.06; }
.section__head h2 { font-size: clamp(1.9rem, 3.9vw, 3rem); line-height: 1.1; }
#stay h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; }
.room__body h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.brand b { font-size: 1.45rem; }

/* High-contrast serifs get spindly when set light, so nothing below 400. */
.stay__lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; }
.room__headline { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.45; }

/* ==================================================================
   MOBILE COMFORT
   Most of your visitors arrive on a phone, often on mobile data and
   often one-handed. Bigger text, bigger targets, less cramping.
   ================================================================== */

@media (max-width: 640px) {
  /* 16px minimum stops iOS zooming the page when a field is focused, and
     is simply easier to read at arm's length. */
  body { font-size: 1rem; line-height: 1.8; }
  .stay__body, .room__desc { font-size: 1rem; line-height: 1.85; }

  /* Justified on phones too, as requested. Hyphenation is what stops it
     opening rivers of white space in a narrow column — without that, justify
     on a 375px screen looks broken. */
  .room__desc, .stay__body { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .section__head .lede { text-align: left; }

  /* Comfortable tap targets — 44px is the accepted minimum. */
  .btn { padding: 1.15rem 2rem; font-size: .74rem; }
  .room__foot { gap: .75rem; }
  .room__foot .btn { flex: 1 1 100%; justify-content: center; }

  /* Gallery arrows large enough to hit with a thumb. */
  .gal__nav { width: 48px; height: 48px; }

  /* The floating WhatsApp button was sitting close to the bottom edge,
     where phone browsers put their own toolbar. */
  .wa { right: 1rem; bottom: 1.15rem; padding: 1.05rem; }

  /* Drawer links spaced for thumbs rather than cursors. */
  .drawer { gap: 1.4rem; }
  .drawer a { font-size: 1.75rem; padding: .35rem 1rem; }

  .section__head { text-align: left; }
  .section__head .eyebrow { justify-content: flex-start; }
  .section__head .lede { text-align: left; margin-inline: 0; }
  .section__head h2::after { margin-left: 0; }
}

/* The menu button measured 43px — one pixel under the 44px minimum for a
   comfortable thumb target. Trivial, but it is the control every phone
   visitor has to hit first. */
@media (max-width: 940px) {
  .burger { padding: .6rem .5rem; }
}

/* ---------- room photo: stop it following the scroll ---------- */
/* It was sticky so it stayed level with a long description, but in practice
   the photo drifting down the screen while everything else scrolls is
   distracting rather than elegant. */
/* relative, NOT static — the gallery inside is position:absolute and needs a
   positioned ancestor to anchor to. Setting this to static let the gallery
   escape the box and size against the page: photos rendered far too large
   and spilled out of their card. */
.room__media { position: relative; top: auto; }

/* ---------- hero fade ---------- */
/* The hero is a single <img> whose src is swapped on a timer. Only the fade
   is declared here — sizing stays with the existing `.hero__media img` rule
   that has always worked, so nothing new can outrank it. */
.hero__media img { transition: opacity .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero__media img { transition: none; }
}

/* ---------- map: tap to load ---------- */
/* Stands in for the Google embed until someone actually wants it. */
.maploader {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 2rem;
  border: 0; cursor: pointer;
  background: var(--sand-deep);
  color: var(--ink-soft);
  font-family: var(--sans);
  transition: background .35s var(--ease);
}
.maploader:hover { background: #e8e1d5; }
.maploader__pin svg { width: 30px; height: 30px; stroke: var(--brass); }
.maploader b { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.maploader span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ==================================================================
   JUSTIFY ALL BODY COPY
   Every paragraph of running text is flush on both edges, everywhere.
   Hyphenation is not optional here — justified text without it opens
   rivers of white space, badly so in a narrow column.
   ================================================================== */
.lede,
.stay__lede,
.stay__body,
.room__headline,
.room__desc,
.section__head .lede,
#location .contact__row p,
#stay p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Centred section intros stay centred as a BLOCK — the box is centred on the
   page while the text inside is flush both sides. Justify would otherwise be
   cancelled out by the inherited text-align: center. */
.section__head .lede { margin-inline: auto; }

@media (max-width: 640px) {
  .lede,
  .stay__lede,
  .stay__body,
  .room__headline,
  .room__desc,
  .section__head .lede {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ==================================================================
   HERO — quieter
   Was: location line, hotel name, tagline, two buttons, four facts.
   Six stacked blocks fighting the photograph, and the four facts
   duplicated the stats row further down the page.
   Now: one small line, one large line, one button, one text link.
   ================================================================== */

/* Name and place share a single line, separated by a hairline dot. */
.hero__name {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.hero__name i {
  font-style: normal;
  position: relative;
  padding-left: 1.05rem;
  color: rgba(255,255,255,.62);
}
.hero__name i::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--brass-lt);
}

/* The secondary action is a text link now, not a second button. Two equally
   weighted buttons make the eye choose; one clear action does not. */
.hero__link {
  align-self: center;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  padding-block: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.32);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.hero__link:hover { color: #fff; border-color: var(--brass-lt); }

.hero__actions { gap: 1.75rem; align-items: center; margin-top: 2.2rem; }

@media (max-width: 640px) {
  /* Stacked, the link needs its own line and a bit of air. */
  .hero__actions { gap: 1.25rem; }
  .hero__link { align-self: flex-start; }
  .hero__name { gap: .5rem; font-size: .68rem; }
}

/* ==================================================================
   GOLD: A DARKER TONE FOR TEXT
   The brand brass (#b0894f) measures 2.95:1 against the sand background.
   Readable text needs 4.5:1, so every gold label was failing — legible
   on a bright desktop monitor, washed out on a phone in daylight.
   #806030 measures 5.31:1 and still reads as the same gold.
   The original brass stays for rules, borders and icons, where thin
   decorative lines are not being read as words.
   ================================================================== */
:root {
  --brass-text: #806030;
}

.eyebrow,
.room__view,
.tags li.is-key,
.stats div b,
.maploader b,
.svc b,
.room__rate b { color: var(--brass-text); }

/* Small caps at heavy tracking are the hardest to read — give them a touch
   more weight as well as the darker tone. */
.eyebrow,
.room__view,
.tags li.is-key { font-weight: 500; }

.tags li.is-key { border-bottom-color: var(--brass-text); }

/* Dark sections already pass: the lighter brass measures 4.7:1 against the
   deep sea green, so it stays exactly as it is. */
.section--ink .eyebrow { color: var(--brass-lt); }

/* ==================================================================
   MOBILE LENGTH
   The page measured 34,584px on a 375px phone — 42.6 screen-heights.
   Rooms and the gallery were 66% of that between them. Nothing is
   removed; the long tails are folded behind a control instead.
   ================================================================== */

/* Amenity lists: show the first few, reveal the rest on request. */
.tags li.tags__hidden { display: none; }
.tags.tags--open li.tags__hidden { display: block; }
.tags__more {
  display: inline-block;
  margin: -1rem 0 2rem;
  padding: .55rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-text);
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.tags__more:hover { border-bottom-color: var(--brass-text); }

/* Gallery "view all" button */
.gallery-more { margin-top: 1.25rem; text-align: center; }

@media (max-width: 640px) {
  /* Two columns for the photo grid and the facility tiles. A single column
     of 34 photos and 15 facilities was most of the page's height. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gshot { aspect-ratio: 1 / 1; }
  .gshot--wide { grid-column: span 2; aspect-ratio: 3 / 2; }

  .facilities { grid-template-columns: repeat(2, 1fr); }
  .fac { padding: 1.4rem 1.1rem; }
  .fac--photo { min-height: 170px; }
  .fac__cap { padding: 1rem; }
  .fac__cap b { font-size: 1.05rem; }
  .fac__cap span, .fac span { font-size: .72rem; }
  .fac b { font-size: 1.05rem; }
  .fac svg { width: 22px; height: 22px; margin-bottom: .7rem; }

  /* Services read fine as one column but can tighten up. */
  .svc { padding: 1.25rem 1.1rem; }

  /* Trim the vertical rhythm a little — with this many sections, generous
     section padding adds several screens on its own. */
  .section { padding-block: clamp(3.25rem, 9vw, 5rem); }
}

/* ---------- room cards on mobile: tighter ---------- */
/* One card measured 1169px, nine of them 13 screen-heights. The two stacked
   full-width buttons alone were 156px — more than the photograph. */
@media (max-width: 640px) {

  /* Side by side, not stacked. Still comfortably over the 44px tap minimum. */
  .room__foot { gap: .6rem; flex-wrap: nowrap; }
  .room__foot .btn {
    flex: 1 1 0;
    padding: .95rem .6rem;
    font-size: .64rem;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  /* Description clamped to four lines until "more details" is tapped. */
  .room__desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }
  .room--open .room__desc {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }

  /* Tighten the card's internal rhythm. */
  .room__headline { margin-bottom: .75rem; }
  .room__view { margin-bottom: 1rem; }
  .room__body h3 { margin-bottom: .45rem; }
  .tags { margin-bottom: 1.5rem; }
  .tags li { padding: .58rem 0; }
  .rooms { gap: 3rem; }
}

/* ---- Official-site trust marker (added with the domain switch) ----
   Guests arriving from Google need to know at a glance that this is the
   hotel's own site and not a reseller — that reassurance is what converts
   a direct booking. Deliberately quiet: it sits under the hero buttons and
   must never compete with them. */
.hero__official {
  margin: 1.15rem 0 0;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
@media (max-width: 700px) {
  .hero__official { font-size: .64rem; letter-spacing: .1em; }
}