/* ============================================================
   Offline — the one type system.
   Loaded LAST on every page, so these rules are the site-wide
   word on typography: one scale, one measure, one rhythm,
   justified body copy. Page styles set layout; this file sets
   the voice. Change type here, never per page.
   ============================================================ */

/* ---- the scale ----------------------------------------------
   display  clamp(34→56)  h1 — one hero size everywhere
   section  clamp(25→40)  .sec — marketing section headings
   lead     clamp(16→19)  .lead/.sub — standfirst paragraphs
   body     16/1.75       .model-p — running copy
   detail   14.5/1.65     .sd/.rd — list body copy
   fine     13.5          .fine — footnotes
   eyebrow  11/ls4        .eyebrow/.sec-eyebrow — kickers      */

h1{font-weight:200 !important;font-size:clamp(34px,5.6vw,56px) !important;
  letter-spacing:-1.4px !important;line-height:1.06 !important}

h2.sec,.sec{font-weight:200 !important;font-size:clamp(25px,4vw,40px) !important;
  letter-spacing:-.8px !important;line-height:1.15 !important}

.lead,.sub{font-size:clamp(16px,1.9vw,19px) !important;line-height:1.7 !important;
  font-weight:300 !important;color:#dad9d7 !important}

.model-p{font-size:16px !important;line-height:1.75 !important}

.sd,.rd,.pv small,.tier li{font-size:14.5px !important;line-height:1.65 !important}

.fine{font-size:13.5px !important;line-height:1.65 !important}

.eyebrow,.sec-eyebrow{font-size:11px !important;letter-spacing:4px !important}

/* ---- one column ---------------------------------------------
   Every text block runs the SAME width as the grids and cards
   around it, so the left and right edges align down the whole
   page — a set document, not ragged islands. (!important here
   also overrides per-page inline max-width caps.)             */
.lead,.sub,.model-p,.fine,.sd,.rd,.prov{max-width:none !important}

/* ---- justified body copy ------------------------------------
   Set like a document, with hyphenation so justification stays
   even. Phones stay ragged-left: justification opens ugly gaps
   in narrow columns. Headings and links are never justified.  */
@media (min-width:640px){
  .lead,.sub,.model-p,.fine,.sd,.rd,.prov,.tier li,.pv small,
  main .doc p,.ac-body p{
    text-align:justify;
    text-justify:inter-word;
    -webkit-hyphens:auto;hyphens:auto}
}

/* ---- rhythm -------------------------------------------------
   Sections breathe the same everywhere.                        */
h2.sec{margin-top:clamp(64px,9vw,96px) !important}
h2.sec+ .lead,h2.sec+ p{margin-top:20px !important}

/* ---- the closing band ---------------------------------------
   The final square on every page is a display moment: headline,
   one supporting line, buttons — all centered, never justified.
   (Higher specificity than the justify rule above, so it wins.) */
.end-band, .end-band .lead, .end-band p{text-align:center !important}
.end-band .lead{max-width:46ch !important;margin-left:auto !important;margin-right:auto !important;
  -webkit-hyphens:manual !important;hyphens:manual !important}

/* the band itself lives in the system, so every page can close the same way */
.end-band{border:1px solid rgba(242,242,240,.12);border-radius:22px;text-align:center;
  padding:clamp(48px,8vw,84px) 28px;margin:clamp(64px,9vw,110px) 0 clamp(40px,6vw,64px);
  background:linear-gradient(180deg,rgba(212,242,60,.045),rgba(212,242,60,0) 55%)}
.end-band h2{margin:0 auto 14px !important;font-weight:200;font-size:clamp(25px,4vw,40px);
  letter-spacing:-.8px;color:var(--ink,#F2F2F0)}
.end-band .cta-row{justify-content:center;margin-top:28px}

/* ============================================================
   MOBILE GRAMMAR — under 640px the bordered grids stop being
   boxes. Stacked boxes on a phone read as a wall of frames;
   the mobile voice is the same as the desktop lists: open rows
   on hairlines, one left edge. Applies to every cell-grid.
   ============================================================ */
@media (max-width:640px){

  /* the grids lose their frame… */
  .stat-strip,.pool,.aud,.eco,.tiers{
    display:block !important;background:none !important;border:0 !important;
    border-top:1px solid rgba(242,242,240,.12) !important;gap:0 !important}

  /* …and the cells become ruled rows */
  .stat-strip .st,.pool .p,.aud .a,.eco .e{
    background:none !important;backdrop-filter:none !important;border:0 !important;
    border-bottom:1px solid rgba(242,242,240,.08) !important;
    padding:16px 0 !important}

  /* the hero strip reads as label — value on one line */
  .stat-strip .st{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .stat-strip .st b{font-size:15px !important}

  /* the tier comparison keeps its two cards but breathes as rows */
  .tiers .tier{border:0 !important;border-bottom:1px solid rgba(242,242,240,.12) !important;
    padding:26px 0 !important;background:none !important}

  /* ---- the hero photo actually shows the skyline ------------
     Desktop crops low and scrims hard for the text column; on a
     phone that killed the picture. Lift the crop to the skyline
     and lighten the veil — the wordmark still reads on the dark
     lower half. */
  .hero-photo img{object-position:center 30% !important;
    filter:grayscale(1) contrast(1.06) brightness(.78) !important}
  .hero-photo::after{background:
    linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.22) 30%,
                    rgba(10,10,10,.55) 55%,rgba(10,10,10,.9) 80%,#0A0A0A 100%) !important}
}

/* ============================================================
   DESKTOP DE-BOXING — the same grammar as mobile, at every
   size: no framed cell-grids. Columns stay, boxes go. Rules
   (hairlines) carry the structure. The one framed element per
   page is the closing band — the exception that reads as a
   centerpiece precisely because nothing else is boxed.
   ============================================================ */
.stat-strip,.pool,.aud,.eco,.tiers{
  background:none !important;border:0 !important;gap:0 !important;
  border-top:1px solid rgba(242,242,240,.14) !important}
.stat-strip .st,.pool .p,.aud .a,.eco .e{
  background:none !important;backdrop-filter:none !important;border:0 !important;
  border-bottom:1px solid rgba(242,242,240,.08) !important;
  padding:24px 28px 24px 0 !important}

@media (min-width:641px){
  /* the hero strip: three specs divided by hairlines, no frames */
  .stat-strip .st{border-bottom:0 !important}
  .stat-strip{border-bottom:1px solid rgba(242,242,240,.14) !important}
  .stat-strip .st + .st{border-left:1px solid rgba(242,242,240,.1) !important;
    padding-left:28px !important}

  /* the tier comparison: a printed rate card — one vertical rule */
  .tiers .tier{background:none !important;border:0 !important;padding:36px 0 !important}
  .tiers .tier + .tier{border-left:1px solid rgba(242,242,240,.14) !important;
    padding-left:40px !important}
  .tiers .tier:first-child{padding-right:40px !important}
  .tiers{border-bottom:1px solid rgba(242,242,240,.14) !important}

  /* the hero shows the city on desktop too: higher crop, lighter
     veil — the text column keeps its dark left side, softened */
  .hero-photo img{object-position:center 45% !important;
    filter:grayscale(1) contrast(1.05) brightness(.68) !important}
  .hero-photo::after{background:
    linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.64) 32%,
                    rgba(10,10,10,.28) 62%,rgba(10,10,10,.05) 88%),
    linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.1) 45%,
                    rgba(10,10,10,.9) 86%,#0A0A0A 100%) !important}
}

/* mobile: the coming-soon pill can't float over the longer Premium label —
   it becomes part of the flow, under the price line */
@media (max-width:640px){
  .tier-soon{position:static !important;display:inline-block !important;margin:12px 0 0 !important}
}

/* the hero strip is TWO facts, not three: the community, and Premium — which
   contains Online. One divider, so the belonging is visible in the structure. */
@media (min-width:641px){
  .stat-strip{grid-template-columns:1fr 2fr !important}
}
@media (max-width:640px){
  .stat-strip .st.st-prem{flex-direction:column !important;align-items:flex-start !important;gap:6px !important}
}

/* the strip cells now carry their own links (formats under Community,
   Open Online under Premium) — let mobile rows wrap them below */
@media (max-width:640px){
  .stat-strip .st{flex-wrap:wrap !important}
  .st-links{width:100% !important;margin-top:10px !important}
}

/* the nav grew (icon + "Become a member") past its old 980px box — give the
   bar room on wide screens and forbid mid-link wrapping; tablets wrap whole
   links to a tidy second row instead of breaking words */
nav{max-width:1180px !important}
.nav-links a{white-space:nowrap}
@media (min-width:601px) and (max-width:1080px){
  .nav-links{flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
}

/* One primary. "Become a member" was a white pill on index/events/abudhabi and a
   lime pill on online/padel/tiers/partners — the same action in two colours.
   Lime is the brand's call-to-action everywhere else; the ink pill stays for
   secondary/ghost roles. */
.btn-solid{background:#D4F23C!important;color:#0A0A0A!important;border-color:#D4F23C!important;font-weight:500}
.btn-solid:hover{box-shadow:0 10px 30px rgba(212,242,60,.18)!important}