/* Social KRU one-pager: mobile-first, fluid layout.
   Colours are taken from the brand swatches in the source PPTX. */

:root {
  --cream: #EFEAE7;
  --plum: #46266A;
  --plum-2: #623391;
  --violet: #904FE3;
  --pink: #FF4FE3;
  --lime: #DCF444;
  --ink: #280A0E;
  --text: #1d1420;
  --white: #fff;

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'DM Mono', Consolas, ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1080px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: italic; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ------------------------------------------------------------------
   Layered photo "stage"
   Background photo, lime frame and cut-out people are stacked in one
   box that keeps the photo's own aspect ratio, so the layers always
   line up and the photo is scaled, never stretched. The parent (a size
   container) crops the stage like object-fit: cover, around a focus
   point. All positions below are % of the full source photo.
   ------------------------------------------------------------------ */
.stage {
  position: absolute;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: var(--ar);
  width: var(--W);
  left: clamp(100cqw - var(--W), 50cqw - var(--fx) * var(--W), 0px);
  top: min(0px, max(100cqh - var(--W) / (var(--ar)), 50cqh - var(--fy) * var(--W) / (var(--ar))));
}
.stage > * { position: absolute; will-change: transform; }
.stage__bg { inset: 0; width: 100%; height: 100%; }
.stage__frame { border: solid var(--lime); }
.stage__cut { height: auto; }

/* ============ Cover ============ */
.cover {
  position: relative;
  height: max(100svh, 600px);
  container-type: size;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  isolation: isolate;
}

.cover__stage {
  --ar: 3 / 2;
  /* Wide enough to show the whole group (the slide's crop, 46% of the photo)
     on narrow phones; otherwise cover the viewport. */
  --W: max(100cqw, min(216.7cqw, 150cqh));
  --fx: 0.4515;
  --fy: 0.5;
}
.cover__frame {
  left: 26.297%; top: 21.637%; width: 37.694%; height: 66.282%;
  border-width: 2.051cqw;
}
.cover__cut { left: 19.205%; top: 14.684%; width: 56.686%; }

/* Readability scrims: the slide's bottom-up shade, plus a fade into the
   solid background under the photo on tall phones. */
.cover::before,
.cover__stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.cover__stage::after {
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to top, var(--ink), rgba(40, 10, 14, 0));
}
.cover::before {
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 5, 8, .78) 0%, rgba(20, 5, 8, .45) 38%, rgba(0, 0, 0, 0) 68%);
}

.cover__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 2.4vh, 24px);
  padding: 24px var(--gutter) calc(64px + env(safe-area-inset-bottom));
  text-align: center;
}
.cover__logo { display: block; width: min(74vw, 420px); }
.cover__logo img { width: 100%; height: auto; }
.cover__title {
  max-width: 17ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  text-wrap: balance;
}
.cover__lede {
  max-width: 26ch;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  text-wrap: balance;
}
.cover__brand { display: block; width: clamp(110px, 30vw, 150px); margin-top: 6px; }
.cover__brand img { width: 100%; height: auto; }

.cover__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  color: var(--lime);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* Short landscape phones: tighten the overlay so everything fits. */
@media (max-height: 520px) and (orientation: landscape) {
  .cover__content { gap: 8px; padding-bottom: 52px; }
  .cover__logo { width: min(40vw, 300px); }
  .cover__title { font-size: 1.75rem; max-width: 24ch; }
  .cover__lede { font-size: 1rem; }
}

/* ============ Connects ============ */
.connects { padding-bottom: clamp(40px, 7vw, 72px); }

.connects__title {
  padding: clamp(36px, 8vw, 56px) var(--gutter) 20px;
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}

.connects__media { position: relative; }
.hero__box {
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: size;
  overflow: hidden;
  background: #3a1f33;
}
.hero__stage {
  --ar: 1672 / 941;
  --W: max(100cqw, 177.7cqh);
  --fx: 0.64;
  --fy: 0.45;
}
.hero__frame {
  left: 49.421%; top: 27.513%; width: 38.847%; height: 37.722%;
  border-width: 1.99cqw;
}
.hero__cut { left: 28.05%; top: 14.878%; width: 70.873%; }

.intro {
  display: grid;
  gap: .9em;
  max-width: 62ch;
  padding-top: clamp(28px, 6vw, 48px);
}

.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(28px, 5vw, 40px);
  border: 1.5px dashed rgba(29, 20, 32, .28);
}
.pillars li {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 14px 10px;
  color: var(--plum);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.15;
  text-align: center;
}
.pillars li:nth-child(odd) { border-right: 1.5px dashed rgba(29, 20, 32, .18); }
.pillars li:nth-child(-n+2) { border-bottom: 1.5px dashed rgba(29, 20, 32, .18); }

/* ============ People ============ */
.people { padding-bottom: clamp(48px, 8vw, 80px); }

.section-title {
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.12;
  text-wrap: balance;
}

.choice {
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 4vw, 32px);
}
.choice__card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink);
}
.choice__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform .8s var(--ease);
}
.choice__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .44) 22%, rgba(0, 0, 0, 0) 56%);
}
.choice__card figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 12px clamp(12px, 3vw, 18px);
  color: var(--lime);
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.4rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.choice__or {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-block: -10px;
  z-index: 1;
  border-radius: 50%;
  background: var(--cream);
  color: var(--text);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px var(--cream);
}

.kicker {
  margin-top: clamp(36px, 6vw, 48px);
  font-size: 1rem;
  font-weight: 700;
}

.services {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.service {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 22px;
  background: var(--white);
  border-top: 4px solid var(--lime);
}
.service h4 {
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.75rem);
  line-height: 1.1;
}
.service p {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.5;
}

/* ============ Platform ============ */
.platform {
  padding-block: clamp(36px, 7vw, 56px);
  background: var(--violet);
  color: var(--white);
  text-align: center;
}
.platform p {
  max-width: calc(46rem + 2 * var(--gutter));
  font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.45;
  text-wrap: balance;
}
.platform strong { color: var(--lime); font-weight: 700; }

/* ============ Contact ============ */
.contact {
  padding-block: clamp(40px, 7vw, 64px) calc(clamp(40px, 7vw, 64px) + env(safe-area-inset-bottom));
}
.contact__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px clamp(16px, 3vw, 28px);
}
.contact__logo { display: block; width: clamp(76px, 18vw, 112px); }
.contact__logo img { width: 100%; height: auto; }
.contact__title {
  color: var(--plum-2);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.1;
  text-wrap: balance;
}
.contact__links {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}
.contact__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  border: 1.5px solid rgba(70, 38, 106, .25);
  border-radius: 999px;
  color: var(--plum);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.contact__links a:hover,
.contact__links a:active { background: var(--plum); border-color: var(--plum); color: var(--white); }
.contact__links svg { flex: none; color: var(--violet); }
.contact__links a:hover svg,
.contact__links a:active svg { color: var(--lime); }

/* ============ Quick-contact bar (phones) ============ */
.quickbar {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(40, 10, 14, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  /* --qb (0 hidden .. 1 shown) is set from the scroll position, so the bar
     slides in and out with the page. Hidden = fully below the screen edge,
     including the iPhone home-bar area. */
  --qb: 0;
  transform: translate(-50%, calc((1 - var(--qb)) * (100% + 24px + env(safe-area-inset-bottom))));
  will-change: transform;
}
.quickbar:not(.is-shown) { visibility: hidden; }
.quickbar a {
  display: grid;
  place-items: center;
  min-width: 118px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.quickbar__primary { background: var(--lime); color: var(--ink) !important; }
@media (min-width: 900px) { .quickbar { display: none; } }

/* ============ Larger screens ============ */
@media (min-width: 560px) {
  .services { grid-template-columns: 1fr 1fr; }
  .service { min-height: 220px; justify-content: space-between; }
  .contact__links { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  /* Banner layout like the print version: headline over the photo. */
  .hero__box { aspect-ratio: auto; height: clamp(340px, 36vw, 560px); }
  .hero__stage { --fx: 0.5; --fy: 0.42; }
  .hero__box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .3) 23%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
  }
  .connects__title {
    position: absolute;
    z-index: 2;
    top: 0;
    left: max(var(--gutter), (100% - var(--maxw)) / 2);
    max-width: 14ch;
    padding: clamp(28px, 4vw, 56px) 0 0;
    color: var(--white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
  }

  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillars li { border: 0 !important; min-height: 96px; }

  .choice { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
  .choice__card img { aspect-ratio: 2.12 / 1; }
  .choice__or { margin: 0; width: auto; height: auto; background: none; box-shadow: none; }

  .contact__inner { grid-template-columns: auto 1fr auto; }
  .contact__links { grid-column: auto; grid-template-columns: 1fr; }
  .contact__links a { border: 0; padding: 6px 0; min-height: 0; justify-content: flex-end; }
  .contact__links a:hover { background: none; color: var(--violet); }
  .contact__small { text-align: left; }
}

@media (min-width: 1000px) {
  .services { grid-template-columns: repeat(4, 1fr); }
  .service { min-height: 260px; }
}

@media (hover: hover) {
  .choice__card:hover img { transform: scale(1.04); }
}

/* ============ Motion ============
   Only when JS is running (content is never hidden without it) and the
   reader hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--delay, 0s);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  .js .cover__content > * { animation: rise 1s var(--ease) both; }
  .js .cover__content > :nth-child(2) { animation-delay: .12s; }
  .js .cover__content > :nth-child(3) { animation-delay: .24s; }
  .js .cover__content > :nth-child(4) { animation-delay: .36s; }
  .js .cover__frame { animation: frame-in 1.2s var(--ease) .1s both; }
  .js .hero__frame { transform-origin: center; transition: opacity 1s var(--ease), scale 1.2s var(--ease); }
  .js .hero__box:not(.is-visible) .hero__frame { opacity: 0; scale: 1.12; }

  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes frame-in { from { opacity: 0; scale: 1.1; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover__cue { animation: none; }
  .stage > * { will-change: auto; }
}

/* ============ Footnote ============ */
.contact__small {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(70, 38, 106, .15);
  color: rgba(29, 20, 32, .6);
  font-size: .875rem;
}
.contact__small a { color: var(--plum); font-weight: 500; }

/* ============ Print ============ */
@media print {
  .quickbar, .cover__cue { display: none !important; }
  .cover { height: 100vh; }
  .reveal { opacity: 1 !important; transform: none !important; }
  section, figure, .service { break-inside: avoid; }
}

/* Older in-app browsers without container query units (pre-2023 WebViews):
   the same crop maths expressed in viewport units. */
@supports not (width: 1cqw) {
  .cover__stage {
    --W: max(100vw, min(216.7vw, 150svh));
    left: clamp(100vw - var(--W), 50vw - var(--fx) * var(--W), 0px);
    top: 0;
  }
  .cover__frame { border-width: calc(var(--W) * .02051); }
  .hero__stage {
    --W: 133.3vw;
    left: clamp(100vw - var(--W), 50vw - var(--fx) * var(--W), 0px);
    top: 0;
  }
  .hero__frame { border-width: calc(var(--W) * .0199); }
  @media (min-width: 768px) {
    .hero__stage {
      --H: clamp(340px, 36vw, 560px);
      --W: max(100vw, 1.777 * var(--H));
      top: calc((var(--H) - var(--W) / 1.7768) * .42);
    }
  }
}

/* ==================================================================
   Desktop (laptop and wider, landscape). Follows the 16:9 desktop
   design: the cover composition is the slide, centred on the lime frame,
   with the logo, headline and lede placed where the slide places them.
   Other sections use the slide's proportions. Phones are unaffected.
   ================================================================== */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .cover {
    /* One design unit = 1% of the photo width. The photo is sized so the
       slide's crop fills the width and its centre sits mid-screen. */
    --cw: 1vw;
    --ch: 1svh;
    --dW: max(111.5 * var(--cw), 150 * var(--ch));
    --dH: calc(var(--dW) / 1.5);
    --dL: calc(50 * var(--cw) - .4485 * var(--dW));
    --dT: min(0px, max(100 * var(--ch) - var(--dH), 50 * var(--ch) - .45 * var(--dH)));
  }
  @supports (width: 1cqw) {
    .cover { --cw: 1cqw; --ch: 1cqh; }
  }
  .cover__stage {
    --W: var(--dW);
    left: var(--dL);
    top: var(--dT);
  }
  .cover__stage::after { content: none; }
  .cover__frame {
    left: 28.068%; top: 19.994%; width: 33.566%; height: 50.348%;
    border-width: calc(var(--dW) * .02039);
  }
  .cover::before {
    background: linear-gradient(to top, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, 0) 68%);
  }

  .cover__content { display: contents; }
  .cover__content > * {
    position: absolute;
    z-index: 2;
    translate: -50% 0;
    margin: 0;
    max-width: none;
    text-align: center;
  }
  .cover__logo {
    left: calc(var(--dL) + .45145 * var(--dW));
    top: calc(var(--dT) + .39107 * var(--dH));
    width: calc(.29235 * var(--dW));
  }
  .cover__title {
    left: calc(var(--dL) + .44817 * var(--dW));
    top: calc(var(--dT) + .5109 * var(--dH));
    width: calc(.28419 * var(--dW));
    font-size: calc(.018537 * var(--dW));
    line-height: 1.02;
    text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, .65);
  }
  .cover__lede {
    left: calc(var(--dL) + .44817 * var(--dW));
    top: calc(var(--dT) + .60843 * var(--dH));
    width: calc(.27603 * var(--dW));
    font-size: calc(.01483 * var(--dW));
    line-height: 1.3;
    text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, .65);
  }
  .cover__brand {
    left: calc(var(--dL) + .44823 * var(--dW));
    /* Slide position, kept on screen when the window is very wide. */
    top: min(var(--dT) + .76188 * var(--dH), 100 * var(--ch) - .0345 * var(--dW) - 20px);
    width: calc(.10828 * var(--dW));
  }
  .cover__cue { display: none; }

  /* ---- Sections 2 & 3: slide proportions. 1 slide point = --pt. ---- */
  :root {
    --u: min(1vw, 19.2px);
    --pt: calc(var(--u) * .10417);
    --gutter: calc(7 * var(--u));
    --maxw: calc(86 * var(--u));
  }
  .wrap { max-width: calc(100 * var(--u)); }

  .hero__box { height: calc(100vw / 3.587); }
  .hero__stage { --fx: .5; --fy: .4604; }
  .hero__box::after {
    background: linear-gradient(to right, rgba(0, 0, 0, .3) 23%, rgba(0, 0, 0, 0) 50%);
  }
  .connects__title {
    top: calc(5.18 * var(--u));
    left: calc((100% - 100 * var(--u)) / 2 + 7 * var(--u));
    width: calc(26 * var(--u));
    max-width: none;
    padding: 0;
    font-size: calc(40 * var(--pt));
    line-height: .95;
    text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, .6);
  }

  .intro {
    gap: calc(6 * var(--pt));
    max-width: none;
    padding-top: calc(3 * var(--u));
    font-size: calc(20 * var(--pt));
    line-height: 1.4;
  }
  .pillars { margin-top: calc(3 * var(--u)); }
  .pillars li {
    min-height: calc(10.46 * var(--u));
    font-size: calc(28 * var(--pt));
    line-height: 1.05;
  }
  .connects { padding-bottom: calc(6 * var(--u)); }

  .people { padding-bottom: calc(5 * var(--u)); }
  .section-title {
    padding-top: calc(2 * var(--u));
    font-size: calc(32 * var(--pt));
    text-align: center;
  }
  .choice {
    grid-template-columns: 1fr calc(11 * var(--u)) 1fr;
    gap: 0;
    margin-top: calc(2.5 * var(--u));
  }
  .choice__card img { aspect-ratio: 2.535 / 1; }
  .choice__card figcaption { font-size: calc(24 * var(--pt)); bottom: calc(1.2 * var(--u)); }
  .choice__or {
    font-size: calc(20 * var(--pt));
    font-weight: 300;
    letter-spacing: .08em;
  }

  .kicker { margin-top: calc(3 * var(--u)); font-size: calc(14 * var(--pt)); }
  .services { gap: calc(1.07 * var(--u)); margin-top: calc(1 * var(--u)); }
  .service {
    justify-content: flex-start;
    gap: calc(1.5 * var(--u));
    min-height: 0;
    padding: calc(1.4 * var(--u)) calc(1.3 * var(--u)) calc(1.6 * var(--u));
  }
  .service h4 { font-size: calc(24 * var(--pt)); }
  /* Monospace: 20 characters per line puts every description on 4 lines. */
  .service p { max-width: 20.5ch; font-size: calc(13 * var(--pt)); }

  .platform { padding-block: calc(2.2 * var(--u)); }
  .platform p {
    max-width: calc(84 * var(--u));
    font-size: calc(18 * var(--pt));
  }

  .contact { padding-block: calc(3.2 * var(--u)); }
  .contact__logo { width: calc(6.4 * var(--u)); }
  .contact__title { font-size: calc(20 * var(--pt)); }
  .contact__links a { font-size: calc(15 * var(--pt)); }
}