@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   OUR_STORY.CSS — this page only.
   Tokens, buttons, header, footer and the shared page-title
   and CTA components live in assets/css.
══════════════════════════════════════════════════════════ */
:root{--rule-w:440px}

/* ── CTA background — the only page-specific part of the
      shared "Come say hi" component. Swap bg-cta.webp in
      this folder to change the photo on this page. ── */
.cta-frame{background-image:url('bg-cta.webp')}

/* ════════════════════════════════════════
   SEC 01 — PAGE TITLE + BUILDING ILLUSTRATION
   Centred title between stacked rules, then a
   full-width line illustration bleeding to the
   section floor. Rule width tracks the title.
════════════════════════════════════════ */
.os01-art{margin-top:5.5rem;max-width:1250px;margin-left:auto;margin-right:auto;padding:0 1rem}
.os01-art img{width:100%;height:auto;object-fit:contain}

/* ════════════════════════════════════════
   SEC 02 — THE ART OF SL*THING IT UP
   col-5 / offset-1 / col-6, same grid as the
   homepage About block.
════════════════════════════════════════ */
section.os-sec-02{padding:8rem 0 9rem}
.os02-headline{font-size:clamp(2rem,3.4vw,4rem);margin-bottom:2.4rem}
.os02-body p{margin-bottom:1.4rem;max-width:52ch}
.os02-body p.tight{margin-bottom:.1rem}
.os02-body p.tight + p.tight{margin-bottom:.1rem}
.os02-body .btn-ss{margin-top:1.6rem}
.os02-photo{aspect-ratio:696/765}

/* ════════════════════════════════════════
   SEC 03 — PALM QUOTE BANNER
   Full-bleed photo, dark tint, single hairline
   card holding wordmark + statement. Nothing else.
════════════════════════════════════════ */
section.os-sec-03{position:relative;padding:10.2rem 0;background:url('bg-palms.webp') center/cover no-repeat;background-color:#2f4f49;background-attachment:fixed}
.os03-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,38,34,.42),rgba(14,38,34,.30));z-index:0}
.os03-card{position: relative;z-index: 1;background: linear-gradient(180deg, #00000078, transparent);border: 5px solid rgb(105 68 178 / 71%);border-radius: 30px;min-height: 60vh;padding: 4rem 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;backdrop-filter: blur(5px);}
.os03-logo{width:min(310px,46vw);margin-bottom:2.4rem}
.os03-logo img{width:100%;height:auto;object-fit:contain}
.os03-quote{color:var(--color-white);font-size:clamp(1.6rem,3.1vw,3.55rem);line-height:1.06;max-width:22ch}

/* ════════════════════════════════════════
   SEC 04 — THE SLOTH BEHIND THE SOCIETY
   Mirror of sec-02: same grid, same photo frame.
════════════════════════════════════════ */
section.os-sec-04{padding:5.5rem 0 4rem}
.os04-headline{font-size:clamp(2rem,3.4vw,4rem);margin-bottom:2.6rem}
.os04-body p{margin-bottom:1.4rem;max-width:52ch}
.os04-body p.tight{margin-bottom:.1rem}
.os04-body strong{font-weight:500;color:var(--color-dark)}
.os04-body .btn-ss{margin-top:1.9rem}
.os04-photo{aspect-ratio:696/763}

/* ════════════════════════════════════════
   SEC 05 — COME SAY HI
   Same component as home sec-08, with one change:
   the sub-line is Bebas caps and the PINK falls on
   the first word, not the last.
════════════════════════════════════════ */
/* ── RESPONSIVE ── */
@media(max-width:991px){
  section.os-sec-02,section.os-sec-04{padding:4.5rem 0}
  .os02-photo,.os04-photo{margin-top:2.5rem;aspect-ratio:4/3}
  .os03-card{min-height:auto;padding:3rem 1.5rem}
}