/* Frequency Spa — landing styles.
   >=1100px : the 1920px Figma frame is scaled uniformly with --u (1 Figma px = 1u). Every positioned element carries
              its Figma coordinates inline as --x / --y / --w / --h (frame px); see tools/gen-pages.py.
   <1100px  : stacked mobile/tablet layout. This is NOT in Figma (only 1920px frames exist) — built from the same tokens. */

@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/host-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/host-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#161616;        /* Figma variable "Fuente" */
  --sky:#e0f7ff;
  --mute:#919191;
  --red:#f55;
  --cream:#f4ffc5;
  --cyan:#7fdcf0;
  --u:calc(100vw / 1920);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font-family:"Host Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
img{display:block;max-width:none}
:focus-visible{outline:2px solid #1afea3;outline-offset:3px}
.canvas{position:relative;background:var(--sky)}
.f300{font-weight:300}.f400{font-weight:400}.f700{font-weight:700}.f800{font-weight:800}
.white{color:#fff}.mute{color:var(--mute)}.red{color:var(--red)}.cream{color:var(--cream)}.cyan{color:var(--cyan)}.up{text-transform:uppercase}
.tc{text-align:center}
.eyebrow{font-weight:700;color:var(--mute)}
.dots li::before{content:"· "}
.fill{width:100%;height:100%;object-fit:cover}
.hero-img{object-fit:cover}
.flip{transform:scaleX(-1)}
.stat{display:contents}

/* =====================  DESKTOP  (>= 1100px)  ===================== */
@media (min-width:1100px){
  .canvas{width:100%;height:calc(6835*var(--u));overflow:clip}
  .canvas.canvas--locked{height:calc(2454*var(--u))}   /* locked page = hero only (what the Figma pop-up frame shows behind the dialog) */
  .abs{position:absolute;left:calc(var(--x,0)*var(--u));top:calc(var(--y,0)*var(--u))}
  .abs[style*="--w"]{width:calc(var(--w)*var(--u))}
  .abs[style*="--h"]{height:calc(var(--h)*var(--u))}
  .c{transform:translateX(-50%)}
  .flip{transform:scaleX(-1)}
  .nw{white-space:nowrap}
  .pre{white-space:pre}
  .lh9{line-height:.9}.lh1{line-height:1}.lh15{line-height:1.5}
  .s15{font-size:calc(15.236*var(--u))}
  .s20{font-size:calc(20*var(--u))}
  .s30{font-size:calc(30*var(--u))}
  .s36{font-size:calc(35.789*var(--u))}
  .s43{font-size:calc(42.878*var(--u))}
  .s50{font-size:calc(50*var(--u))}
  .s84{font-size:calc(84.43*var(--u))}
  .eyebrow{font-size:calc(30*var(--u));line-height:.9;letter-spacing:calc(9*var(--u));white-space:nowrap}
  .round28{border-radius:calc(28*var(--u))}.round10{border-radius:calc(10*var(--u))}.round9{border-radius:calc(9*var(--u))}
  .dark-bg{position:absolute;left:0;width:100%;top:calc(4353*var(--u));height:calc(2482*var(--u));background:var(--ink)}
  .grad{position:absolute;left:0;width:100%;pointer-events:none}
  .grad-sky{top:calc(1857*var(--u));height:calc(597*var(--u));background:linear-gradient(to bottom,rgba(224,247,255,0) 11.977%,var(--sky) 85.846%)}
  .grad-lobby-a{top:calc(4557*var(--u));height:calc(1280*var(--u));background:linear-gradient(to top,rgba(22,22,22,.5) 0%,var(--ink) 97.734%)}
  .grad-lobby-b{top:calc(4597*var(--u));height:calc(1280*var(--u));background:linear-gradient(to bottom,rgba(22,22,22,0) 70.898%,var(--ink) 97.734%)}
  .caption-title{font-weight:700;font-size:calc(42.878*var(--u));line-height:.9;color:var(--ink);white-space:nowrap}
  .caption-text{font-size:calc(15.236*var(--u));line-height:.9;color:var(--ink)}
  .dots{font-size:calc(20*var(--u));line-height:1.5}
  .dots li{white-space:nowrap}
  .pillar-body{margin-top:calc(15*var(--u))}
}

/* =====================  MOBILE / TABLET  (< 1100px)  ===================== */
@media (max-width:1099.98px){
  :root{--pad:max(20px,calc((100% - 720px) / 2));--gx:max(20px,calc((100vw - 720px) / 2))}
  .canvas{overflow:clip}
  .canvas>section{position:relative;padding-inline:var(--pad)}
  .tsp,.abs br,.dark-bg,.hero-line,.grad-sky,.thumbs{display:none}
  h1,h2,h3,p{overflow-wrap:break-word}
  .eyebrow{font-size:15px;line-height:1.2;letter-spacing:5px;text-align:center}
  .round28{border-radius:20px}.round10{border-radius:12px}
  .s84,.s50,.s30{line-height:1.08}

  /* hero: logo → headline → photo → caption */
  .hero{padding-top:28px;padding-bottom:40px;background:var(--sky);isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero .sky{position:absolute;left:0;top:0;width:100%;height:calc(100% - 190px);object-fit:cover;object-position:50% 100%;z-index:-2;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
  .hero .hero-logo{order:1;width:min(60vw,240px);height:auto;aspect-ratio:1;object-fit:cover}
  .hero h1{order:2;margin-top:-10px;max-width:19ch;color:#fff;font-size:clamp(34px,9.4vw,64px);line-height:1.02}
  .hero h1 .l1,.hero h1 .l2{display:inline}
  .hero .hero-img{order:3;width:calc(100% + 2 * var(--gx));margin:30px calc(-1 * var(--gx)) 0;height:auto;aspect-ratio:4/3;object-position:50% 45%;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent);mask-image:linear-gradient(to bottom,#000 76%,transparent)}
  .hero .grad{display:none}
  .caption-title{order:4;margin-top:6px;font-size:30px;line-height:1.1;font-weight:700;color:var(--ink)}
  .caption-text{order:5;margin-top:10px;font-size:16px;line-height:1.35;max-width:46ch;color:var(--ink)}

  /* problem */
  .problem{padding-top:44px;padding-bottom:12px;text-align:center}
  .problem .eyebrow{margin-bottom:14px}
  .problem h2{margin-bottom:16px;font-size:clamp(28px,7vw,40px);font-weight:400}
  .problem>p.s20{margin:0 auto;max-width:62ch;font-size:17px;line-height:1.4}
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px;margin:36px 0}
  .stat{display:block}
  .stat h3{font-size:22px;margin-bottom:2px}
  .stat p.red{font-size:34px;line-height:1.1;margin-bottom:6px}
  .stat p.s20{font-size:15px;line-height:1.3}
  .problem>p.s30{font-size:20px;line-height:1.3;margin-top:8px}

  /* solution */
  .solution{padding-top:36px;display:flex;flex-direction:column;gap:14px}
  .solution>img{width:100%;height:auto;aspect-ratio:1}
  .solution .eyebrow{text-align:left;margin-top:8px}
  .solution h2{white-space:pre-line;font-size:clamp(28px,7vw,40px);font-weight:400}
  .dots{font-size:17px;line-height:1.55}

  /* numbers */
  .numbers{display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:4px;padding-top:36px;padding-bottom:52px}
  .numbers>img{grid-row:span 2;width:48px;height:auto;align-self:start;margin-top:4px}
  .numbers>h3{grid-column:2;font-size:26px;line-height:1.2;font-weight:400}
  .numbers>p{grid-column:2;margin:0 0 24px;font-size:16px;line-height:1.35}

  /* dark: why + suites */
  .why,.suites{background:var(--ink);color:#fff}
  .why{padding-top:72px;padding-bottom:12px;overflow:hidden;text-align:center}
  .why>img:first-child{position:absolute;left:0;top:0;width:100%;height:440px;object-fit:cover;z-index:0}
  .why .grad{display:block;position:absolute;left:0;width:100%;z-index:0;top:0;height:440px;pointer-events:none}
  .why .grad-lobby-a{background:linear-gradient(to top,rgba(22,22,22,.5) 0%,var(--ink) 100%)}
  .why .grad-lobby-b{background:linear-gradient(to bottom,rgba(22,22,22,0) 55%,var(--ink) 100%)}
  .why>*:not(img:first-child):not(.grad){position:relative;z-index:1}
  .why .eyebrow{margin-bottom:16px}
  .why h2{margin:0 auto 28px;max-width:26ch;font-size:clamp(28px,7vw,40px);font-weight:400}
  .why>img[src*="divider"]{width:min(100%,420px);height:1px;margin:28px auto;object-fit:fill}
  .why>img[src*="divider"]~img[src*="divider"]{display:none}
  .why>h3.up{margin-top:30px;font-size:21px;line-height:1.15}
  .why>h3.up+p{margin:8px auto 0;max-width:46ch;font-size:16px;line-height:1.35}
  .amenities{margin-top:44px;text-align:left}
  .amen{display:grid;grid-template-columns:72px 1fr;column-gap:16px;row-gap:4px;margin-bottom:30px}
  .amen-dot{grid-row:span 2;width:64px;height:64px}
  .amen h3{font-size:20px;line-height:1.15}
  .amen p{font-size:16px;line-height:1.35;margin-top:2px}
  .suites{padding-top:56px;padding-bottom:64px}
  .suites .eyebrow{text-align:left}
  .suites h2{margin:14px 0;text-align:left;font-size:clamp(28px,7vw,40px);font-weight:400}
  .suites>p.s20{font-size:17px;line-height:1.4}
  .suites>img{width:100%;height:auto;aspect-ratio:3/2;margin:28px 0 36px}
  .pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .pillars>div{text-align:center}
  .pillars h3{font-size:22px}
  .pillar-body{margin-top:8px;font-size:15px;line-height:1.35}
}
@media (max-width:560px){.pillars{grid-template-columns:1fr}.stats{gap:26px 12px}}