/* ===================================================================
   FINCA ES TORRENT DEN COSME
   Concept: "SEA LEVEL ZERO" — the flattest corner of Mallorca read as
   an elevation profile. A single horizon datum carries a metres-above-
   the-sea reading that steps DOWN, rung by rung, as you scroll — until
   the land reaches Es Trenc at 0 m. The motif is an altimeter of a flat
   place, not a coordinate. Sections are measured "levels", numbered down.
   Lane: Libre Caslon Display + Inter · sun-bleached south / salt-flat
   pale (salt-white, faded sky, a thread of Es Trenc turquoise) ·
   flat/horizontal edge — square corners, long horizon rules, wide tracking.
   Palette pulled from the property's own light: salt-white ground, the
   pale turquoise of the Es Trenc shallows as the live accent, warm marès
   stone kept to a quiet tertiary.
   =================================================================== */

:root{
  /* --- salt-flat palette --- */
  --salt:      #f7f5ef;   /* salt-white ground (dominant, cool-warm neutral) */
  --salt-2:    #eeece3;   /* faded-sky band, for horizontal banding */
  --salt-3:    #e6e3d8;   /* deeper paper edge */
  --sky:       #dfe6e4;   /* faded coastal sky, palest cool wash */
  --aqua:      #2bb3ab;   /* Es Trenc shallows — the live turquoise accent */
  --aqua-deep: #15756f;   /* deeper shallow, for text-on-light contrast (AA ≥4.5) */
  --aqua-pale: #bfe4e0;   /* the very edge of the shallows */
  --stone:     #a9805a;   /* marès wall — quiet tertiary */
  --stone-lt:  #c69a72;   /* warm terracotta deck */
  --ink:       #20221f;   /* salt-bleached near-black (cool, not brown) */
  --ink-soft:  #525850;   /* body text on salt */
  --ink-mut:   #7c8179;   /* muted captions / gauge ticks */
  --line:      #d8d4c6;   /* hairline on salt */
  --line-aqua: rgba(43,179,171,.55);
  --line-lt:   rgba(247,245,239,.30); /* hairline on dark/photo */

  --maxw: 1300px;
  --gutter: clamp(20px, 5vw, 76px);

  --f-display: "Libre Caslon Display", "Times New Roman", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

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

/* ------------------------------------------------- reset / base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--salt);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(16px,1.05vw + 12px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* display headings: never break mid-word, never one-letter-per-line */
.hero__title,.lede__head,.feature__head,.rooms__title,
.setting__head,.table__head,.cta__head,.level__h,.card h3{
  font-family:var(--f-display);
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
  letter-spacing:.004em;
}

::selection{ background:var(--aqua); color:var(--salt); }
:focus-visible{ outline:2px solid var(--aqua-deep); outline-offset:3px; }

/* ===================================================================
   THE ELEVATION GAUGE — the signature system.
   A surveyor's altitude line: a hairline + a tick, carrying a reading in
   METRES ABOVE THE SEA. The reading steps down section to section.
   =================================================================== */
.gauge{ display:flex; align-items:center; gap:0; pointer-events:none; }
.gauge__line{
  display:block; height:1px; flex:1 1 auto;
  background:var(--aqua);
  transform-origin:left center;
}
.gauge__tick{
  display:block; width:1px; height:14px; flex:0 0 auto;
  background:var(--aqua);
}
.gauge__read{
  flex:0 0 auto; display:inline-flex; align-items:baseline; gap:.5ch;
  padding-left:16px; white-space:nowrap;
}
.gauge__m{
  font-family:var(--f-display); font-size:18px; line-height:1;
  color:var(--aqua-deep); letter-spacing:.01em;
}
.gauge__lbl{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mut); font-weight:600;
}
/* short inline gauge used as a section opener */
.gauge--inline{ width:72px; margin-bottom:28px; }

/* the metre-rail running down the deep sections (real light-DOM, no <use>) */
.rail{
  position:absolute; left:var(--gutter); top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,
    transparent 0, var(--line-lt) 8%, var(--line-lt) 92%, transparent 100%);
  z-index:2; pointer-events:none;
}
.rail__mark{
  position:absolute; left:0; display:flex; align-items:center; gap:9px;
  transform:translateY(-50%);
}
.rail__mark::before{
  content:""; width:10px; height:1px; background:var(--line-lt);
}
.rail__mark span{
  font-family:var(--f-display); font-size:13px; color:rgba(247,245,239,.62);
  letter-spacing:.02em;
}
.rail__mark--live::before{ background:var(--aqua); width:16px; }
.rail__mark--live span{ color:var(--aqua); }

/* ------------------------------------------------- buttons */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 28px;
  font-family:var(--f-body); font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:0;          /* flat edge */
  cursor:pointer; transition:background var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--solid{ --bg:var(--ink); --fg:var(--salt); --bd:var(--ink); }
.btn--solid:hover{ --bg:var(--aqua-deep); --bd:var(--aqua-deep); }
.btn--line{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--line:hover{ --bg:var(--ink); --fg:var(--salt); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:transparent;
  min-height:44px; padding:0 10px; letter-spacing:.2em; }
.btn--ghost:hover{ --fg:var(--aqua-deep); }
.btn--lg{ min-height:58px; padding:0 42px; font-size:13.5px; }

/* ------------------------------------------------- HEADER / NAV */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px var(--gutter);
  background:rgba(247,245,239,0);
  transition:background .5s var(--ease), box-shadow .5s var(--ease),
    padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(247,245,239,.93);
  box-shadow:0 1px 0 var(--line);
  padding-top:11px; padding-bottom:11px;
  backdrop-filter:saturate(1.25) blur(9px);
  -webkit-backdrop-filter:saturate(1.25) blur(9px);
}
/* hero is dark behind nav at top → light nav text until stuck */
.nav__mark,.nav__links a,.lang__btn,.nav .btn{ color:var(--salt); }
.nav.is-stuck .nav__mark,
.nav.is-stuck .nav__links a,
.nav.is-stuck .lang__btn,
.nav.is-stuck .nav .btn{ color:var(--ink); }
.nav.is-stuck .nav .btn{ border-color:var(--ink); }

.nav__mark{ display:flex; align-items:center; gap:12px; flex:0 0 auto; min-height:44px; }
.mark{ width:36px; height:30px; overflow:visible; flex:0 0 auto; }
.mark__hair{ stroke:currentColor; stroke-width:1; }
.mark__tick{ stroke:var(--aqua); stroke-width:1.6; }
.nav__name{
  font-family:var(--f-display); font-size:20px; line-height:1;
  letter-spacing:.01em; display:flex; flex-direction:column;
}
.nav__name-sub{ font-size:10px; letter-spacing:.36em; text-transform:uppercase;
  opacity:.72; margin-top:4px; font-family:var(--f-body); }

.nav__links{ display:flex; gap:32px; margin-left:auto; }
.nav__links a{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  position:relative; opacity:.94;
  display:inline-flex; align-items:center; min-height:44px;   /* full 44px tap target */
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:calc(50% - 12px); height:1px; width:0;
  background:var(--aqua); transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }

.nav__right{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.lang{ display:flex; align-items:center; gap:6px; }
.lang__btn{
  background:none; border:0; cursor:pointer;
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
  font-family:var(--f-body); font-size:12.5px; letter-spacing:.1em;
  font-weight:500; opacity:.6; transition:opacity .3s;
}
.lang__btn.is-active{ opacity:1; }
.lang__btn.is-active::after{
  content:""; position:absolute; }
.lang__btn{ position:relative; }
.lang__btn.is-active{ text-decoration:none; }
.lang__btn.is-active::before{
  content:""; position:absolute; left:6px; right:6px; bottom:9px; height:1.5px;
  background:var(--aqua);
}
.lang__btn:hover{ opacity:1; }
.lang__sep{ opacity:.4; }

/* ============================================================ HERO */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px,14vh,140px) var(--gutter) clamp(96px,13vh,140px);
  overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,22,22,.46) 0%, rgba(16,22,22,0) 24%,
                    rgba(16,22,22,0) 42%, rgba(16,22,22,.58) 84%, rgba(16,22,22,.74) 100%),
    linear-gradient(94deg, rgba(16,22,22,.34) 0%, rgba(16,22,22,0) 56%);
}

/* THE HORIZON DATUM — laid across the hero, reading the property's altitude.
   This is the wow moment: a measured sea-level line over the flat land. */
.hero__datum{ width:100%; margin-bottom:30px; }
.hero__datum .gauge__line,
.hero__datum .gauge__tick{ background:rgba(191,228,224,.95);
  box-shadow:0 0 10px rgba(0,0,0,.35); }   /* keep the hairline crisp over bright sky */
.hero__datum .gauge__m{ color:#dff3f0; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.hero__datum .gauge__lbl{ color:rgba(247,245,239,.82); text-shadow:0 1px 12px rgba(0,0,0,.4); }

.hero__body{ position:relative; z-index:2; max-width:min(94vw, 760px); }
.hero__eyebrow{
  margin:0 0 20px; color:var(--salt);
  font-size:12.5px; letter-spacing:.34em; text-transform:uppercase;
  font-weight:500; opacity:.95;
  display:flex; align-items:center; gap:14px;
}
.hero__eyebrow::before{
  content:""; width:34px; height:1px; background:var(--aqua); flex:0 0 auto;
}
.hero__title{
  color:var(--salt);
  font-size:clamp(2.9rem, 9.6vw, 6.8rem);
  line-height:.97; margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.36);
}
.hero__title-em{ font-style:italic; }
.hero__lede{
  color:var(--salt);
  max-width:48ch; margin:30px 0 38px;
  font-size:clamp(1rem,.5vw + .9rem,1.2rem); line-height:1.62;
  opacity:.96; text-shadow:0 1px 18px rgba(0,0,0,.4);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero .btn--solid{ --bg:var(--salt); --fg:var(--ink); --bd:var(--salt); }
.hero .btn--solid:hover{ --bg:var(--aqua); --bd:var(--aqua); --fg:#06302d; }
.hero .btn--line{ --fg:var(--salt); --bd:rgba(247,245,239,.6); }
.hero .btn--line:hover{ --bg:var(--salt); --fg:var(--ink); --bd:var(--salt); }

.hero__foot{
  position:absolute; right:var(--gutter); bottom:30px; z-index:2;
  display:flex; align-items:center; gap:12px;
  color:var(--salt); opacity:.82;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
}
.hero__foot span:last-child{ white-space:nowrap; }
.hero__scroll{
  width:1px; height:36px; background:rgba(247,245,239,.5);
  position:relative; overflow:hidden; flex:0 0 auto;
}
.hero__scroll::after{
  content:""; position:absolute; inset:0;
  background:var(--aqua);
  animation:scrolldrop 2.4s var(--ease) infinite;
}
@keyframes scrolldrop{
  0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); }
}

/* ============================================ generic section atoms */
.kicker{
  display:flex; align-items:center; gap:14px; margin:0 0 24px;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:600; color:var(--ink-mut);
}
.kicker__no{
  font-family:var(--f-display); font-size:15px; letter-spacing:.02em;
  color:var(--aqua-deep); padding-right:14px; position:relative; text-transform:none;
}
.kicker__no::after{
  content:""; position:absolute; right:0; top:50%; width:1px; height:15px;
  background:var(--line); transform:translateY(-50%);
}
.kicker--light{ color:rgba(247,245,239,.86); }
.kicker--light .kicker__no{ color:var(--aqua-pale); }
.kicker--light .kicker__no::after{ background:rgba(247,245,239,.4); }

/* ============================================ LEDE (story) — "above sea level" */
.lede{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(84px,13vh,156px) var(--gutter) clamp(40px,6vh,72px);
}
.lede__head{
  font-size:clamp(2.2rem,6vw,4.4rem); line-height:1.0;
  margin:0 0 28px; max-width:16ch;
}
.lede__head em{ font-style:italic; color:var(--aqua-deep); }
.lede__copy{ color:var(--ink-soft); max-width:60ch;
  font-size:clamp(1.02rem,.4vw + .92rem,1.18rem); }
.lede__copy + .lede__copy{ margin-top:1.1em; }

/* the elevation ladder — the concept made literal: levels stepping to 0 */
.levels{ margin-top:clamp(54px,8vh,96px); border-top:1px solid var(--line); }
.level{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px 0;
  padding:34px 0;
  position:relative;
  border-bottom:1px solid var(--line);
}
.level__alt{
  display:flex; align-items:baseline; gap:.5ch;
}
.level__alt b{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--aqua-deep); line-height:1;
}
.level__alt span{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mut); font-weight:600;
}
.level__h{ font-size:clamp(1.5rem,3vw,2rem); margin:0 0 6px; }
.level__p{ color:var(--ink-soft); max-width:56ch; margin:0; }
/* the descending hairline that draws in on scroll */
.level__draw{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--aqua);
  transition:width 1.2s var(--ease);
}
.level.is-in .level__draw{ width:100%; }

@media (min-width:780px){
  .level{
    grid-template-columns:118px minmax(0,1fr);
    gap:0 44px; align-items:baseline; padding:42px 0;
  }
  .level__alt{ grid-row:1; flex-direction:column; gap:6px; }
}

/* ============================================ FEATURE (stone/dusk) */
.feature{
  position:relative;
  display:grid; grid-template-columns:1fr;
  background:var(--salt-2);
  isolation:isolate;
}
.feature__media{ position:relative; min-height:62vw; overflow:hidden; }
.feature__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 40%;
}
.feature__panel{
  padding:clamp(52px,8vw,96px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
}
.feature__head{ font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.04;
  margin:0 0 24px; max-width:15ch; }
.feature__copy{ color:var(--ink-soft); max-width:50ch; margin:0 0 38px; }
.spec{ display:grid; gap:0; border-top:1px solid var(--line); max-width:50ch; }
.spec li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; padding:16px 0; border-bottom:1px solid var(--line);
}
.spec__k{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mut); font-weight:600; }
.spec__v{ font-family:var(--f-display); font-size:clamp(1.05rem,2vw,1.32rem);
  text-align:right; }

@media (min-width:920px){
  .feature{ grid-template-columns:1.04fr 1fr; }
  .feature__media{ min-height:auto; }
}

/* ============================================ ROOMS (gallery) */
.rooms{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(76px,11vh,148px) var(--gutter);
}
.rooms__head{ max-width:62ch; margin-bottom:clamp(42px,6vh,68px); }
.rooms__title{ font-size:clamp(2.1rem,5vw,3.8rem); line-height:1.02;
  margin:0 0 22px; max-width:18ch; }
.rooms__sub{ color:var(--ink-soft); max-width:54ch; }

.rooms__grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.card{
  margin:0; position:relative; overflow:hidden; background:var(--ink);
}
.card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.card:hover img{ transform:scale(1.045); }
.card figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:24px 24px 22px;
  color:var(--salt);
  background:linear-gradient(0deg, rgba(14,20,20,.86) 0%, rgba(14,20,20,.30) 62%, transparent 100%);
}
.card__alt{
  font-family:var(--f-display); font-size:14px; color:var(--aqua-pale);
  display:block; margin-bottom:6px; letter-spacing:.04em;
}
.card figcaption h3{ font-size:clamp(1.3rem,2.4vw,1.75rem); margin:0 0 7px; color:var(--salt); }
.card figcaption p{ margin:0; font-size:.92rem; line-height:1.5;
  color:rgba(247,245,239,.88); max-width:42ch; }

@media (min-width:800px){
  .rooms__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; }
  .card--tall{ grid-row:span 2; }
  .card--tall img{ aspect-ratio:auto; height:100%; }
}
@media (min-width:1080px){
  .rooms__grid{ grid-template-columns:1.3fr 1fr 1fr; }
  .card--tall{ grid-column:1; grid-row:1 / span 2; }
}

/* ============================================ TABLE (food) */
.table{
  display:grid; grid-template-columns:1fr; background:var(--salt);
  color:var(--ink);
}
.table__panel{
  padding:clamp(52px,8vw,96px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
  background:var(--salt);
}
.table__panel .kicker{ color:var(--ink-mut); }
.table__head{ font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.04;
  margin:0 0 24px; max-width:15ch; }
.table__copy{ color:var(--ink-soft); max-width:50ch; margin:0 0 36px; }
.table__media{ position:relative; min-height:64vw; overflow:hidden; }
.table__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (min-width:920px){
  .table{ grid-template-columns:1fr 1.04fr; }
  .table__media{ min-height:auto; }
}

/* ============================================ SETTING (salt & sea) — 0 m */
.setting{
  position:relative; isolation:isolate;
  min-height:94svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(60px,9vh,104px); overflow:hidden;
}
.setting__media{ position:absolute; inset:0; z-index:-2; }
.setting__media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%;
  /* pull the postcard turquoise toward the site's own salt-pale grade */
  filter:saturate(.86) contrast(1.02) brightness(1.02); }
.setting__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,26,28,.34) 0%, rgba(14,26,28,0) 28%,
            rgba(14,26,28,.16) 52%, rgba(14,26,28,.62) 100%);
}
.setting__datum{ width:100%; margin-bottom:32px; }
.setting__datum .gauge__line,.setting__datum .gauge__tick{ background:rgba(191,228,224,.95); }
.setting__datum .gauge__m{ color:#eafffb; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.setting__datum .gauge__lbl{ color:rgba(247,245,239,.9); text-shadow:0 1px 12px rgba(0,0,0,.45); }

.setting__body{ position:relative; z-index:2; max-width:60ch; }
.setting__head{ color:var(--salt); font-size:clamp(2.1rem,5.2vw,4.2rem);
  line-height:1.0; margin:0 0 24px; max-width:16ch;
  text-shadow:0 2px 34px rgba(0,0,0,.38); }
.setting__copy{ color:var(--salt); max-width:50ch; margin:0 0 40px;
  opacity:.96; text-shadow:0 1px 16px rgba(0,0,0,.4); }
.dist{ display:flex; flex-wrap:wrap; gap:32px 48px;
  border-top:1px solid rgba(247,245,239,.34); padding-top:28px; }
.dist li{ display:flex; flex-direction:column; gap:5px; }
.dist__v{ font-family:var(--f-display); font-size:clamp(2.3rem,5vw,3.3rem);
  color:var(--aqua-pale); line-height:1; }
.dist__k{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,245,239,.88); max-width:15ch; }

/* ============================================ TRIPTYCH */
.triptych{
  display:grid; grid-template-columns:1fr; gap:2px;
  background:var(--salt);
}
.trip{ margin:0; position:relative; overflow:hidden; }
.trip img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  transition:transform 1.2s var(--ease); }
.trip:hover img{ transform:scale(1.05); }
.trip figcaption{
  position:absolute; left:18px; bottom:15px; color:var(--salt);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.65);
}
@media (min-width:680px){ .triptych{ grid-template-columns:repeat(3,1fr); } }

/* ============================================ CTA */
.cta{
  background:var(--ink); color:var(--salt);
  padding:clamp(84px,13vh,156px) var(--gutter);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.cta__datum{ width:72px; margin-bottom:36px; }
.cta__datum .gauge__line{ background:var(--aqua); }
.cta__datum .gauge__tick{ background:var(--aqua); }
.cta__eyebrow{ margin:0 0 22px; color:var(--aqua-pale);
  font-size:12.5px; letter-spacing:.32em; text-transform:uppercase; font-weight:500; }
.cta__head{ font-family:var(--f-display); font-size:clamp(2.2rem,5.6vw,4.4rem);
  line-height:1.04; margin:0 0 26px; max-width:20ch;
  word-break:keep-all; overflow-wrap:normal; hyphens:none; }
.cta__copy{ color:rgba(247,245,239,.84); max-width:54ch; margin:0 0 42px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:center; }
.cta .btn--solid{ --bg:var(--salt); --fg:var(--ink); --bd:var(--salt); }
.cta .btn--solid:hover{ --bg:var(--aqua); --bd:var(--aqua); --fg:#06302d; }
.cta__alt{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(247,245,239,.82); transition:color .3s;
  display:inline-flex; align-items:center; min-height:44px; position:relative; }
.cta__alt::after{ content:""; position:absolute; left:0; right:0; bottom:11px; height:1px;
  background:rgba(247,245,239,.4); transition:background .3s; }
.cta__alt:hover{ color:var(--salt); }
.cta__alt:hover::after{ background:var(--aqua); }
.cta__rating{ margin:44px 0 0; font-size:12.5px; letter-spacing:.1em;
  color:rgba(247,245,239,.74); display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.cta__stars{ color:var(--aqua-pale); letter-spacing:.14em; }

/* ============================================ FOOTER */
.foot{ background:var(--salt-2); color:var(--ink); padding:clamp(58px,8vh,94px) var(--gutter) 30px; }
.foot__top{ max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:46px; }
.foot__mark{ display:flex; align-items:flex-start; gap:14px; }
.mark--lg{ width:46px; height:38px; flex:0 0 auto; }
.foot__mark span{ font-family:var(--f-display); font-size:1.5rem; line-height:1.1; }
.foot__cols{ display:grid; grid-template-columns:1fr; gap:32px; }
.foot__col h4{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aqua-deep); margin:0 0 13px; font-weight:700; }
.foot__col p{ margin:0; color:var(--ink-soft); line-height:1.7; font-size:.96rem; }
.foot__col a{ display:inline-block; padding:9px 0; margin:-9px 0;
  border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.foot__col a:hover{ color:var(--ink); border-color:var(--aqua); }

.foot__base{ max-width:var(--maxw); margin:48px auto 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.foot__rule{ flex:1 1 120px; min-width:90px; height:1px; background:var(--line); }
.foot__legal{ margin:0; font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft); }
.foot__sig{ margin:0; font-size:11.5px; letter-spacing:.08em; color:var(--ink-mut);
  margin-left:auto; }
.foot__sig b{ color:var(--ink-soft); font-weight:500; }

@media (min-width:780px){
  .foot__top{ grid-template-columns:1fr 1.4fr; align-items:start; }
  .foot__cols{ grid-template-columns:repeat(3,1fr); }
}

/* ============================================ REVEAL (motion) */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .level__draw{ width:100%; }
  .hero__scroll::after{ display:none; }
}

/* ============================================ MOBILE refinements */
@media (max-width:680px){
  .nav__links{ display:none; }                 /* keep header clean & overflow-free */
  .nav{ padding-left:16px; padding-right:16px; gap:10px; }
  .nav__name{ font-size:18px; }
  .nav__name-sub{ display:none; }              /* drop sub-label so EN/ES + Enquire keep full 44px targets */
  .nav__right{ gap:8px; }
  .lang{ gap:0; }
  .lang__sep{ display:none; }
  .lang__btn{ min-width:42px; padding:0 2px; }
  .nav__cta{ padding-left:14px; padding-right:14px; letter-spacing:.12em; }
  .hero{ padding-bottom:104px; }
  .hero__datum .gauge__read{ padding-left:12px; }
  .hero__datum .gauge__m{ font-size:16px; }
  .hero__datum .gauge__lbl{ font-size:9.5px; letter-spacing:.18em; }
  .hero__body{ max-width:none; }
  .hero__foot{ right:16px; }
  .dist{ gap:24px 38px; }
  .gauge--inline{ width:64px; }
}
@media (max-width:380px){
  .hero__title{ font-size:clamp(2.5rem,12.5vw,3rem); }
  .btn{ padding:0 22px; letter-spacing:.14em; }
  .hero__eyebrow{ letter-spacing:.26em; }
}