/* The Ohm Hotel — site styles
   Brand book: Deep Tide / Sage / Linen / Ivory / Brass / Walnut, Bodoni Moda + Tenor Sans + Instrument Sans,
   0px corners, 1px hairlines at 16% Tide, slow ease cubic-bezier(.33,1,.68,1). */

:root {
  --tide: #1F3441;
  --sage: #8C9D9A;
  --linen: #D3CABD;
  --ivory: #F4F1EA;
  --brass: #A8834F;
  --walnut: #5B3A27;
  --ink: #131D24;
  --mist: #566168;
  --night: #0D161C;
  --night-2: #15222B;
  --hair: rgba(31, 52, 65, .16);
  --hair-light: rgba(244, 241, 234, .2);

  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --caps: 'Tenor Sans', 'Optima', sans-serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;

  --ease: cubic-bezier(.33, 1, .68, 1);
  --pad: clamp(24px, 10vw, 148px);
  --bar-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
em { font-style: italic; }
::selection { background: var(--tide); color: var(--ivory); }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }

.container { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- type atoms ---------- */
.eyebrow {
  font: 400 10px/1.2 var(--caps);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mist);
}
.eyebrow--light { color: var(--sage); }
.eyebrow--sage { color: var(--sage); }

.sec-title {
  position: relative;
  font: 400 clamp(36px, 3.1vw, 46px)/1.12 var(--serif);
  color: var(--tide);
  letter-spacing: -.005em;
  display: inline-grid;
}
.sec-title .eyebrow { position: absolute; left: 1.6em; top: .9em; transform: translateX(calc(-100% - 18px)); white-space: nowrap; }
.sec-title .t1 { padding-left: 1.6em; }
.sec-title em { font-style: italic; }

/* circle-arrow link (the Islas signature, redrawn in Walnut) */
.arrow-link {
  display: inline-flex; align-items: center; gap: 22px;
  font: 400 15px/1 var(--serif);
  color: var(--tide);
  letter-spacing: .01em;
}
.arrow-link .circ {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--walnut);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--walnut);
  position: relative; overflow: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.arrow-link .circ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.1; transition: transform .6s var(--ease); }
.arrow-link:hover .circ { background: var(--walnut); color: var(--ivory); }
.arrow-link:hover .circ svg { transform: translateX(3px); }
.arrow-link--light { color: var(--ivory); }
.arrow-link--light .circ { border-color: rgba(244, 241, 234, .7); color: var(--ivory); }
.arrow-link--light:hover .circ { background: var(--ivory); color: var(--tide); border-color: var(--ivory); }

.u-link {
  font: 400 15px/1 var(--serif);
  color: var(--tide);
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--ease);
}
.u-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.u-link--walnut { color: var(--walnut); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 34px;
  font: 400 11px/1 var(--caps);
  letter-spacing: .24em; text-transform: uppercase;
  border-radius: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn--brass { background: var(--brass); color: var(--ink); }
.btn--brass:hover { background: #B8925A; }
.btn--sm { height: 40px; padding: 0 22px; font-size: 10px; }

/* split-line masks */
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ivory);
  display: grid; place-items: center;
}
.loader__mark { display: grid; justify-items: center; gap: 22px; }
.loader__mono { width: 92px; height: 92px; }
.loader__mono .m-waves path { transform-box: fill-box; }
.loader__name { font: 400 30px/1 var(--serif); color: var(--tide); letter-spacing: .14em; display: flex; overflow: hidden; }
.loader__name span { display: inline-block; }
.loader__place { font: 400 9px/1 var(--caps); letter-spacing: .34em; text-transform: uppercase; color: var(--mist); }
.no-intro .loader { display: none; }

/* ---------- TOP BAR ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(24px, 3.2vw, 48px);
  color: var(--ivory);
  transition: transform .9s var(--ease), color .6s var(--ease), background-color .6s var(--ease);
}
.bar::after { /* hairline that draws in once the bar turns solid */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.2s var(--ease);
}
.bar.is-solid { background: rgba(244, 241, 234, .94); color: var(--tide); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bar.is-solid::after { transform: scaleX(1); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__nav { display: flex; gap: clamp(20px, 2.4vw, 38px); }
.bar__link {
  font: 400 10.5px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase;
  position: relative; padding: 8px 0;
}
.bar__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease);
}
.bar__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.bar__logo { justify-self: center; opacity: 0; transform: translateY(-6px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.bar.show-logo .bar__logo { opacity: 1; transform: none; pointer-events: auto; }
.bar__right { justify-self: end; display: flex; align-items: center; gap: 28px; }
.bar__tide { font: 400 10px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; opacity: .85; }
.bar__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; animation: breathe 4s var(--ease) infinite; }
@keyframes breathe { 50% { opacity: .15; } }

/* wordmark: THE / O(wave)HM */
.wm { display: grid; justify-items: center; line-height: 1; }
.wm__the { font: 400 7.5px/1 var(--caps); letter-spacing: .5em; margin: 0 0 2px .5em; text-transform: uppercase; }
.wm__ohm { display: flex; align-items: flex-end; font: 500 30px/.8 var(--serif); letter-spacing: .01em; }
.wm__o { width: 20px; height: 26px; margin-right: 1px; margin-bottom: -1px; }

/* ---------- CURSOR ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; border: 1px solid var(--tide);
  display: grid; place-items: center;
  transition: width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease), opacity .4s;
  opacity: 0;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-color: rgba(31,52,65,.35); }
.cursor.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--ivory); border-color: transparent; }
.cursor.is-light { border-color: var(--ivory); }
.cursor__label { font: 400 9.5px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--tide); opacity: 0; transition: opacity .4s; }
.cursor.is-label .cursor__label { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; color: var(--ivory); background: var(--tide); }
.hero__media { position: absolute; inset: -4% 0 0; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform-origin: 40% 40%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(31,52,65,.55) 0%, rgba(31,52,65,.18) 22%, rgba(31,52,65,.22) 60%, rgba(31,52,65,.55) 100%),
    rgba(31,52,65,.18);
}
.hero__title { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding-top: 2vh; }
.hero__name {
  font: 400 clamp(110px, 13.4vw, 220px)/.9 var(--serif);
  font-variation-settings: 'opsz' 96;
  letter-spacing: .085em; margin-right: -.085em;
  display: flex; white-space: nowrap;
}
.hero__name .hl { display: inline-flex; overflow: hidden; padding: .06em 0 .1em; }
.hero__name .hl span { display: inline-block; }
.hero__name .hl--sp { width: .32em; }
.hero__place {
  margin-top: clamp(18px, 2.2vw, 34px);
  font: 400 clamp(15px, 1.6vw, 24px)/1 var(--caps);
  letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase;
}

/* ---------- INTRO ---------- */
.intro { position: relative; height: 100vh; min-height: 640px; padding: 0 var(--pad); display: grid; place-items: center; text-align: center; overflow: hidden; }
.intro__water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro__inner { position: relative; max-width: 980px; margin: 0 auto; display: grid; justify-items: center; gap: 34px; }
.intro__text { --em: #5B3A27; font: 400 clamp(32px, 3.4vw, 52px)/1.22 var(--serif); color: var(--tide); letter-spacing: -.005em; }
.intro__text em { color: var(--em, var(--walnut)); }

/* ---------- BANNER ---------- */
.banner { position: relative; height: min(80vh, 720px); min-height: 540px; overflow: hidden; color: var(--ivory); display: grid; place-items: center; }
.banner__media { position: absolute; inset: -7% 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.banner__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(13,22,28,.42), rgba(13,22,28,.22) 60%, rgba(13,22,28,.3)); }
.banner__content { position: relative; display: grid; justify-items: center; gap: 30px; text-align: center; padding: 0 var(--pad); }
.banner__title { font: 400 clamp(48px, 5vw, 78px)/1.08 var(--serif); letter-spacing: -.005em; }
.banner__content .arrow-link span { font-size: 16px; }

/* ---------- ROOMS ---------- */
.rooms { position: relative; padding-top: clamp(100px, 10vw, 150px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.rooms .sec-head { padding-right: calc(var(--pad) + 22vw); margin-bottom: 70px; }
.rooms__band { position: relative; background: var(--linen); padding: 70px 0 56px; }
.rooms__stage { position: relative; height: clamp(560px, 46vw, 700px); }
.room { position: absolute; inset: 0; pointer-events: none; }
.room.is-active { pointer-events: auto; }
.room figure { position: absolute; overflow: hidden; background: rgba(31,52,65,.08); }
.room figure img { width: 100%; height: 100%; object-fit: cover; }
.room__big { left: var(--pad); top: 0; width: 34vw; max-width: 500px; height: 100%; }
.room__info { position: absolute; left: calc(var(--pad) + min(34vw, 500px) + 56px); top: 34px; width: min(25vw, 340px); }
.room__name { font: 400 clamp(40px, 3.4vw, 54px)/1.08 var(--serif); color: var(--tide); display: grid; }
.room__name .n2 { padding-left: 1.1em; }
.room__meta { display: flex; align-items: center; gap: 12px; margin: 46px 0 22px; font: 400 10px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--walnut); }
.mini-wave { width: 30px; height: 8px; fill: none; stroke: var(--walnut); stroke-width: 1.2; }
.room__desc { font-size: 15px; line-height: 1.7; color: var(--ink); max-width: 34ch; margin-bottom: 34px; }
.room__top { right: clamp(24px, 3vw, 44px); top: -150px; width: 14vw; max-width: 220px; aspect-ratio: 4 / 5; z-index: 2; }
.room__bot { right: 0; bottom: 30px; width: 14vw; max-width: 210px; aspect-ratio: 4 / 3.4; }
/* slide transitions (JS drives clip/opacity, these are the resting states) */
.room:not(.is-active) figure, .room:not(.is-active) .room__info { visibility: hidden; }

.pager { display: flex; align-items: center; gap: 14px; font: 400 10px/1 var(--caps); letter-spacing: .2em; color: var(--tide); }
.rooms .pager { position: relative; justify-content: center; margin-top: 40px; }
.pager--center { justify-content: center; margin-top: 46px; }
.pager__line { position: relative; width: 70px; height: 1px; background: var(--hair); }
.pager__line i { position: absolute; inset: 0; background: var(--tide); transform-origin: 0 50%; transform: scaleX(.25); transition: transform .9s var(--ease); }
.pager__btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; color: var(--tide); transition: border-color .5s var(--ease), background-color .5s var(--ease); }
.pager__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.pager__btn:hover { border-color: var(--tide); }
.pager__btn[data-dir="-1"] { margin-right: 10px; }
.pager__btn[data-dir="1"] { margin-left: 10px; }

/* ---------- AROUND (carousel) ---------- */
.around { height: 100vh; min-height: 680px; padding: calc(var(--bar-h) + clamp(28px, 4vh, 56px)) 0 clamp(28px, 4vh, 48px); overflow: hidden; display: flex; flex-direction: column; }
.around .sec-head { padding-right: calc(var(--pad) + 18vw); margin-bottom: 0; flex: none; }
.carousel { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.carousel__track { display: flex; align-items: flex-start; gap: 4vw; padding: 0 34vw 0 44vw; width: max-content; will-change: transform; }
.card { position: relative; flex: none; width: min(23vw, 40vh, 360px); opacity: .78; transition: opacity 1.1s var(--ease); }
.card.is-active { opacity: 1; }
.card:nth-child(even) { margin-top: 5vh; }
.card:nth-child(3n) { margin-top: 1.5vh; }
.card__media { position: relative; aspect-ratio: 4 / 5.4; overflow: hidden; background: rgba(31,52,65,.1); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.around__progress { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6vh; font: 400 10px/1 var(--caps); letter-spacing: .2em; color: var(--tide); }
.around__bar { position: relative; width: 140px; height: 1px; background: var(--hair); }
.around__bar i { position: absolute; inset: 0; background: var(--tide); transform-origin: 0 50%; transform: scaleX(0); }
.card__box {
  position: absolute; left: -2.8vw; bottom: -40px; width: 78%;
  background: var(--ivory); border: 1px solid var(--hair);
  padding: 30px 28px 26px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.card.is-active .card__box { opacity: 1; transform: none; pointer-events: auto; transition-delay: .25s; }
.card__box h3 { font: 400 25px/1.2 var(--serif); color: var(--tide); margin-bottom: 26px; }
.card__box p { font-size: 13.5px; line-height: 1.65; color: var(--ink); margin-bottom: 22px; }
.card__box .u-link { font-size: 14px; }

/* ---------- MORE (link list over image) ---------- */
.more { position: relative; padding: clamp(80px, 8vw, 120px) 0 clamp(120px, 12vw, 180px); min-height: 820px; }
.more__img { position: absolute; left: 50%; top: clamp(80px, 8vw, 120px); width: 26vw; max-width: 400px; aspect-ratio: 4 / 4.6; transform: translateX(-4%); overflow: hidden; }
.more__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.more__img img.is-on { opacity: 1; transform: scale(1); }
.more__list { position: relative; padding-top: 170px; display: grid; }
.more__list .eyebrow { position: absolute; top: 196px; left: var(--pad); }
.more__row { font: 400 clamp(40px, 3.7vw, 56px)/1.32 var(--serif); color: var(--tide); white-space: nowrap; }
.more__row.r1 { padding-left: calc(9vw); }
.more__row.r3 { padding-left: 0; }
.more__row a { position: relative; transition: color .6s var(--ease), opacity .6s var(--ease); }
.more__row i { font-style: normal; display: inline-block; margin: 0 .55em; opacity: .7; font-weight: 300; }
.more__list:hover a { opacity: .45; }
.more__list a:hover { opacity: 1; font-style: italic; }

/* ---------- MAP ---------- */
.map { position: relative; height: min(66vw, 880px); min-height: 620px; background: var(--sage); overflow: hidden; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-poi text { font: 400 12px/1 var(--caps); letter-spacing: .22em; fill: var(--tide); }
.map-here-t { font: 400 46px/1 var(--serif); fill: var(--tide); }
.map-here-s { font: 400 12px/1 var(--caps); letter-spacing: .3em; fill: var(--tide); }
.map-sea { font: italic 400 15px/1 var(--serif); fill: var(--ivory); opacity: .85; letter-spacing: .12em; }
.map-n text { font: 400 11px/1 var(--caps); fill: var(--tide); }
.map-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.6s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(5); opacity: 0; } }
.map__head { position: absolute; left: var(--pad); bottom: clamp(60px, 6vw, 96px); display: grid; gap: 30px; max-width: 420px; }
.sec-title--map .eyebrow { color: var(--tide); }
.map__note { font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 34ch; }

/* ---------- DAILY ---------- */
.daily { position: relative; padding: clamp(120px, 11vw, 170px) 0 90px; overflow: hidden; }
.daily__deco { position: absolute; left: 3vw; top: 120px; width: 30vw; color: var(--sage); opacity: .6; }
.daily__stage { position: relative; height: clamp(470px, 36vw, 540px); }
.day { position: absolute; inset: 0 var(--pad); display: grid; grid-template-columns: 1fr minmax(260px, 26vw); gap: 6vw; align-items: start; }
.day:not(.is-active) { visibility: hidden; }
.day__text { padding-left: 7vw; padding-top: 10px; }
.day__title { position: relative; font: 400 clamp(46px, 4.2vw, 64px)/1.06 var(--serif); color: var(--tide); display: grid; margin-bottom: 40px; }
.day__title .eyebrow { position: absolute; left: 0; top: .62em; transform: translateX(calc(-100% - 22px)); white-space: nowrap; }
.day__title .d2 { padding-left: 1.2em; }
.day__lede { font: 400 19px/1.6 var(--sans); color: var(--ink); max-width: 36ch; margin-bottom: 46px; }
.tide { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; border-top: 1px solid var(--hair); max-width: 560px; }
.tide div { padding: 18px 34px 0 0; margin-right: 34px; border-right: 1px solid var(--hair); }
.tide div:last-child { border-right: 0; margin-right: 0; }
.tide dt { font: 400 9.5px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--mist); margin-bottom: 12px; }
.tide dd { font: 400 22px/1 var(--serif); color: var(--walnut); white-space: nowrap; }
.day__img { aspect-ratio: 4 / 5; overflow: hidden; max-height: 100%; }
.day__img img { width: 100%; height: 100%; object-fit: cover; }
.daily__note { text-align: center; margin-top: 22px; font-size: 12px; color: var(--mist); }

/* ---------- POSTCARDS ---------- */
.post { background: var(--sage); padding: clamp(110px, 10vw, 150px) 0 clamp(90px, 8vw, 120px); overflow: hidden; }
.post__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.post__head { display: grid; gap: 42px; justify-items: start; padding-left: 4vw; }
.post .sec-title { color: var(--ink); }
.post .sec-title .eyebrow { color: var(--ink); }
.post .arrow-link { color: var(--ink); }
.post .arrow-link .circ { border-color: var(--ink); color: var(--ink); }
.post .arrow-link:hover .circ { background: var(--ink); color: var(--sage); }
.deck { position: relative; width: min(25vw, 360px); aspect-ratio: 4 / 5.3; }
.pc {
  position: absolute; inset: 0;
  background: var(--ivory); padding: 14px 14px 0;
  display: grid; grid-template-rows: 1fr auto;
  box-shadow: 0 1px 0 rgba(19,29,36,.06);
  transform-origin: 50% 60%;
}
.pc img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.pc figcaption { display: grid; gap: 10px; padding: 18px 6px 22px; }
.pc__d { font: 400 9.5px/1 var(--caps); letter-spacing: .26em; color: var(--mist); }
.pc__t { font: 400 18px/1.35 var(--serif); color: var(--tide); }
.deck-wrap { position: relative; justify-self: center; padding-bottom: 70px; }
.pager--deck { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }

/* ---------- STAY (night band) ---------- */
.stay {
  position: relative; background: var(--night); color: var(--ivory);
  padding: clamp(120px, 11vw, 170px) var(--pad);
  display: grid; justify-items: center; text-align: center; gap: 30px;
  overflow: hidden;
}
.stay__badge { width: 54px; height: 54px; margin-bottom: 8px; }
.stay__title { font: 400 clamp(52px, 5.2vw, 82px)/1.05 var(--serif); letter-spacing: -.005em; }
.stay__title em { color: #B8925A; }
.stay__lede { font-size: 17px; color: rgba(244,241,234,.78); max-width: 46ch; margin-bottom: 14px; }

/* ---------- FOOTER ---------- */
.foot { position: relative; background: var(--tide); color: var(--ivory); padding-top: 90px; overflow: hidden; }
.foot__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 80px; border-bottom: 1px solid var(--hair-light); }
.foot__badge { width: 120px; height: 120px; margin-bottom: 26px; }
.foot__addr { font: 400 10px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--sage); margin-bottom: 26px; }
.foot__contact { display: flex; align-items: center; gap: 12px; font: 400 17px/1 var(--serif); margin-bottom: 16px; width: max-content; }
.foot__contact svg { width: 18px; height: 18px; fill: none; stroke: var(--sage); stroke-width: 1; stroke-linecap: square; }
.foot__col { display: grid; align-content: start; gap: 16px; padding-top: 12px; }
.foot__col .eyebrow { margin-bottom: 10px; }
.foot__col a { font: 400 17px/1.2 var(--serif); width: max-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease); }
.foot__col a:hover { background-size: 100% 1px; }
.foot__base { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 150px; font: 400 9.5px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--sage); }
.foot__line { font: italic 400 16px/1 var(--serif); letter-spacing: .01em; text-transform: none; color: var(--ivory); }
.foot__waves { position: absolute; left: -2%; bottom: 0; width: 104%; height: 110px; }
.fw { transform-box: fill-box; }
.totop {
  position: fixed; right: 30px; bottom: 30px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sage); color: var(--ink);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease), background-color .3s;
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.totop:hover { background: var(--linen); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}