/* ==========================================================================
   Sensedebelle — Our Story page
   Built from Sensedebelle-Website.xd ("Web 1920 – 5", 1920px artboard).
   Loads after style.css and reuses its tokens, bands, buttons, CTA and footer.
   ========================================================================== */

:root {
  --offwhite: #FFFCF9;
  --dot-soft: #DDBBAF;
  --fs-os-text: 16px;                   /* same as the home page's lead paragraphs */
  /* Distance from the container's edge to the window's edge — lets a block bleed off-screen */
  --bleed: calc((100vw - min(var(--container), 100vw - 2 * var(--gutter))) / 2);
}

/* ---------- Shared bits ---------- */
.os-text { color: var(--muted); font-size: var(--fs-os-text); line-height: 1.5; margin-top: clamp(14px, 1.3vw, 26px); }
.os-text p { margin-bottom: 1.2em; }
.os-text p:last-child { margin-bottom: 0; }
.center .os-text { margin-inline: auto; }
.os-narrow { max-width: 950px; }
.os-split__copy { max-width: 812px; }
.os-split__copy .btn { margin-top: clamp(24px, 2.2vw, 42px); }
.os-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; }


/* ==========================================================================
   Hero
   ========================================================================== */
.os-hero {
  padding-top: max(12.2vw, 128px);
  padding-bottom: calc(var(--section-y) + var(--curve-pad));
}
.os-hero__title {
  max-width: 1088px; margin-inline: auto;   /* size: --fs-display, same as every home-page heading */
}
.os-hero__text { max-width: 1088px; }
.os-hero .btn { margin-top: clamp(24px, 2.2vw, 42px); }

/* ==========================================================================
   The beginning — copy left, founder + logo wall right (video)
   ========================================================================== */
.os-begin { position: relative; padding-top: var(--section-y); }
.os-begin__visual { position: relative; aspect-ratio: 974 / 919; }
.os-begin__visual img { position: absolute; }
/* Positions are % of the visual box, measured from the XD */
.os-begin__logo    { left: 40.1%; top: 0;    width: 59.9%; }
.os-begin__founder { left: 0;     bottom: 0; width: 54.2%; z-index: 1; }
.os-play {
  position: absolute; z-index: 2; left: 80.6%; top: 90.5%;
  width: clamp(56px, 9.2%, 90px); aspect-ratio: 1; padding: 0;
  transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  transition: color .2s, transform .2s;
}
.os-play svg { width: 100%; height: 100%; }
.os-play:hover { color: var(--maroon); transform: translate(-50%, -50%) scale(1.06); }

@media (min-width: 1000px) {
  .os-split { display: grid; grid-template-columns: 48% 1fr; align-items: end; }
  .os-begin .os-split__copy { align-self: center; padding-bottom: var(--section-y); }
  .os-begin__visual { width: calc(100% + 6.3vw); }   /* runs ~120px past the container, as in the XD */
}
@media (max-width: 999px) {
  .os-begin__visual { width: min(100%, 600px); margin: 36px auto 0; }
  .os-play { width: clamp(34px, 12%, 56px); }   /* scales with the photo so it stays inside it on phones */
}

/* ==========================================================================
   Experience + stats
   ========================================================================== */
.os-exp { padding-top: var(--section-y); padding-bottom: calc(var(--section-y) + var(--curve-pad)); }
.os-exp__text { max-width: 1640px; }
.os-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 4.5vw, 86px);
}
.os-stats li { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; }
.os-stats li + li { border-left: 1px solid var(--muted); }
.os-stats__num {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(3.5rem, 1rem + 3.6vw, 5.5rem); line-height: 1;   /* matches .stats__num */
  font-variant-numeric: tabular-nums;
}
.os-stats__num small { font-size: 1em; margin: 0; }
.os-stats__label {
  margin-top: clamp(8px, 1vw, 20px);
  font-family: var(--font-label); font-weight: 600; color: var(--maroon);
  font-size: clamp(0.875rem, 0.7rem + 0.35vw, 1.125rem);   /* matches .stats__label */
}
@media (max-width: 600px) {
  .os-stats { grid-template-columns: 1fr; }
  .os-stats li { padding: 24px 0; }
  .os-stats li + li { border-left: 0; border-top: 1px solid rgba(112, 112, 112, .4); }
}

/* ==========================================================================
   Our approach — copy left, therapist image right (sits on the band's bottom)
   ========================================================================== */
.os-approach { padding-top: calc(var(--section-y) + 5vw); padding-bottom: var(--section-y); }
.os-approach .container { position: relative; z-index: 2; }
.os-approach__visual { position: relative; pointer-events: none; }
.os-approach__visual img { position: relative; z-index: 1; width: 100%; }
.os-approach__circle {
  position: absolute; z-index: 0; left: 16.2%; top: 33.7%; width: 29.4%;
  aspect-ratio: 1; border-radius: 50%; background: var(--terracotta);
}
@media (min-width: 1000px) {
  .os-approach { min-height: 49vw; }
  .os-approach .os-split__copy { max-width: min(812px, 50%); }
  .os-approach__visual { position: absolute; left: 51.67vw; bottom: 0; width: 64.4vw; }
}
@media (max-width: 999px) {
  .os-approach { padding-bottom: 0; }
  .os-approach__visual { width: 115%; margin: 32px 0 0 -2%; }
}

/* ==========================================================================
   Customer experience — copy left, photo strip bleeding off the right edge
   ========================================================================== */
.os-offwhite { background: var(--offwhite); }
.os-cx { padding-top: var(--section-y); padding-bottom: calc(var(--section-y) + var(--curve-pad)); }
.os-gallery {
  display: flex; gap: clamp(10px, .83vw, 16px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;   /* no visible bar, as in the XD — still scrolls by swipe, trackpad or keyboard */
}
.os-gallery::-webkit-scrollbar { display: none; }
.os-gallery li { flex: 0 0 clamp(220px, 27.9vw, 536px); }
.os-gallery img { width: 100%; aspect-ratio: 536 / 632; object-fit: cover; background: var(--white); }
.os-gallery:focus-visible { outline-offset: 6px; }
.os-gallery { cursor: grab; user-select: none; }
.os-gallery.is-dragging { cursor: grabbing; }
.os-gallery img { -webkit-user-drag: none; }
/* Endless drifting photo strip (see main.js) */
.os-carousel { position: relative; min-width: 0; }
@media (min-width: 1000px) {
  .os-cx__grid { display: grid; grid-template-columns: 51% minmax(0, 1fr); column-gap: clamp(20px, 2vw, 40px); align-items: center; }  /* XD: photos start ~53% in */
  .os-carousel { margin-right: calc(-1 * var(--bleed)); }   /* runs off the right edge */
}
@media (max-width: 999px) {
  .os-carousel { margin: 44px calc(-1 * var(--bleed)) 0 0; }
  .os-gallery li { flex-basis: min(68vw, 360px); }
}

/* ==========================================================================
   Awards timeline
   ========================================================================== */
.os-awards { padding-top: calc(var(--section-y) * .6); }
.os-awards .os-text { max-width: none; }
.timeline {
  --tl-photo: clamp(72px, 5.625vw, 108px);
  --tl-gap: clamp(26px, 1.95vw, 38px);     /* centre line → year / photo */
  --tl-dot: 20px;
  --tl-label: 32px;                        /* height of the year label */
  margin-top: clamp(48px, 5vw, 96px);
}
.timeline__year {
  position: relative;
  width: 50%; margin-left: 50%;
  padding: 0 0 clamp(56px, 5.8vw, 110px) var(--tl-gap);
}
.timeline__year:last-child { padding-bottom: 0; }
/* Line: from this year's dot down to the next one */
.timeline__year::after {
  content: ""; position: absolute; left: 0; top: calc(var(--tl-label) / 2); bottom: calc(var(--tl-label) / -2);
  width: 1px; background: var(--muted); transform: translateX(-50%);
}
.timeline__year:first-child::after { top: calc(var(--tl-label) / 2 - clamp(28px, 2.4vw, 46px)); }  /* line leads in above the first dot */
.timeline__year:last-child::after { display: none; }
.timeline__label {
  position: relative;
  font-family: var(--font-label); font-weight: 700; color: var(--maroon);
  font-size: clamp(1.125rem, 0.95rem + 0.35vw, 1.5rem); line-height: var(--tl-label);
  margin-bottom: clamp(10px, 1vw, 18px);
}
.timeline__label::before {
  content: ""; position: absolute; top: 50%;
  left: calc(-1 * var(--tl-gap) - var(--tl-dot) / 2);
  width: var(--tl-dot); aspect-ratio: 1; border-radius: 50%; background: var(--dot-soft);
  transform: translateY(-50%); z-index: 1;   /* dot sits on top of the line */
}
.timeline__items { display: grid; gap: clamp(14px, 1.4vw, 27px); }
.tl-item { display: flex; align-items: center; gap: clamp(14px, 1.15vw, 22px); }
.tl-item__photo {
  flex: none; width: var(--tl-photo); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 4px solid var(--rose); background: var(--blush);
}
.tl-item p { margin: 0; max-width: 652px; color: var(--muted); font-size: var(--fs-os-text); line-height: 1.45; }
.tl-item__note { display: block; font-style: italic; font-weight: 300; }
.tl-item--other p { max-width: 782px; padding-top: 6px; }
.tl-item--other strong { font-weight: 400; }

/* Left-hand years (desktop) */
@media (min-width: 900px) {
  .timeline__year--left { margin-left: 0; padding-left: 0; padding-right: var(--tl-gap); text-align: right; }
  .timeline__year--left::after { left: auto; right: 0; transform: translateX(50%); }
  .timeline__year--left .timeline__label::before { left: auto; right: calc(-1 * var(--tl-gap) - var(--tl-dot) / 2); }
  .timeline__year--left .tl-item { flex-direction: row-reverse; }
  .timeline__year--left .tl-item p { margin-left: auto; }
}
/* Mobile: single column, line on the left */
@media (max-width: 899px) {
  .timeline { --tl-gap: 30px; }
  .timeline__year, .timeline__year--left { width: auto; margin-left: 10px; }
  .tl-item { flex-direction: column; align-items: flex-start; gap: 12px; }   /* photo, then text */
}

/* ==========================================================================
   Today
   ========================================================================== */
.os-today .os-narrow { max-width: 860px; }

/* ==========================================================================
   Final CTA (layout comes from .cta in style.css)
   ========================================================================== */
.os-cta .cta__text { margin-bottom: clamp(22px, 1.9vw, 36px); }

/* ==========================================================================
   Video lightbox
   ========================================================================== */
.video-modal {
  width: min(1100px, 92vw); padding: 0; border: 0; border-radius: 16px;
  background: #000; overflow: visible;
}
.video-modal::backdrop { background: rgba(30, 20, 20, .78); }
.video-modal__frame { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.video-modal__frame iframe, .video-modal__frame video { display: block; width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute; right: 0; top: -48px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--white); color: var(--ink);
  font-size: 26px; line-height: 1; cursor: pointer;
}