/* Mobile adaptation. Targets the inline styles already in the pages so the
   desktop layout stays untouched. Breakpoint: 820px. */
.m-burger { display: none; }

@media (max-width: 820px) {

  /* --- header --- */
  header[style] { padding: 10px 16px !important; gap: 8px 12px !important; flex-wrap: nowrap !important; }
  header img[alt="Shine On"] { width: 78px !important; height: 48px !important; }
  header a[style*="font-size:26px"] { font-size: 19px !important; }
  header a[style*="font-size: 26px"] { font-size: 19px !important; }
  header span[style*="font-size:13px"] { font-size: 10px !important; margin-top: 2px !important; }
  header span[style*="font-size: 13px"] { font-size: 10px !important; margin-top: 2px !important; }
  header nav[style] {
    order: 0 !important; flex: none !important;
    position: absolute; top: 100%; inset-inline: 0;
    flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important; padding: 6px 16px 14px;
    background: #F7F4EE; border-bottom: 1px solid rgba(51,47,42,0.1);
    box-shadow: 0 14px 30px rgba(51,47,42,0.12);
    display: none !important;
  }
  header[data-menu-open] nav[style] { display: flex !important; }
  header nav a { font-size: 17px !important; padding: 13px 4px !important; border-bottom: 1px solid rgba(51,47,42,0.07) !important; }
  header nav button { align-self: flex-start; margin-top: 12px; font-size: 14px !important; padding: 9px 16px !important; }
  .m-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box;
    background: transparent; border: 0; cursor: pointer;
  }
  .m-burger span { display: block; height: 2px; background: #332F2A; border-radius: 2px; transition: transform 200ms, opacity 200ms; }
  header[data-menu-open] .m-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header[data-menu-open] .m-burger span:nth-child(2) { opacity: 0; }
  header[data-menu-open] .m-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- sections: side padding + tightened vertical rhythm --- */
  section[style], footer[style] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding:140px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding: 140px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding:120px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 120px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding:100px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding: 100px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding:90px"]  { padding-top: 48px !important; padding-bottom: 56px !important; }
  section[style*="padding: 90px"]  { padding-top: 48px !important; padding-bottom: 56px !important; }
  section[style*="padding:60px"]  { padding-top: 36px !important; padding-bottom: 56px !important; }
  section[style*="padding: 60px"]  { padding-top: 36px !important; padding-bottom: 56px !important; }
  section[style*="120px"][style*="0 56px"] { padding-bottom: 56px !important; }
  section[style*="140px"][style*="0 56px"] { padding-bottom: 60px !important; }
  section[style*="160px"][style*="0 56px"] { padding-bottom: 60px !important; }
  section[style*="margin-top:140px"] { margin-top: 64px !important; }
  section[style*="margin-top: 140px"] { margin-top: 64px !important; }

  /* --- every multi-column grid collapses --- */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  /* the four audience cards stay two-up: they are small and read better paired */
  [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 20px !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 20px !important; }

  /* --- typography --- */
  h1[style*="font-size:60px"], h1[style*="font-size: 60px"] { font-size: 34px !important; }
  h1[style*="font-size: 60px"], h1[style*="font-size: 60px"] { font-size: 34px !important; }
  h1[style*="font-size:56px"], h1[style*="font-size: 56px"] { font-size: 31px !important; line-height: 1.28 !important; }
  h1[style*="font-size: 56px"], h1[style*="font-size: 56px"] { font-size: 31px !important; line-height: 1.28 !important; }
  h1[style*="font-size:52px"], h1[style*="font-size: 52px"] { font-size: 30px !important; }
  h1[style*="font-size: 52px"], h1[style*="font-size: 52px"] { font-size: 30px !important; }
  h2[style*="font-size:44px"] { font-size: 27px !important; margin-bottom: 28px !important; }
  h2[style*="font-size: 44px"] { font-size: 27px !important; margin-bottom: 28px !important; }
  h2[style*="font-size:30px"] { font-size: 23px !important; }
  h2[style*="font-size: 30px"] { font-size: 23px !important; }
  h3[style*="font-size:22px"] { font-size: 19px !important; }
  h3[style*="font-size: 22px"] { font-size: 19px !important; }
  p[style*="font-size:20px"] { font-size: 17px !important; }
  p[style*="font-size: 20px"] { font-size: 17px !important; }
  p[style*="font-size:19px"] { font-size: 16.5px !important; }
  p[style*="font-size: 19px"] { font-size: 16.5px !important; }
  p[style*="font-size:18px"] { font-size: 16.5px !important; }
  p[style*="font-size: 18px"] { font-size: 16.5px !important; }
  p[style*="font-size:17px"] { font-size: 16px !important; }
  p[style*="font-size: 17px"] { font-size: 16px !important; }

  /* --- hero --- */
  section[style*="88vh"] { height: auto !important; min-height: 74vh !important; }
  section[style*="88vh"] > div[style*="padding:0 56px 72px"] { padding: 0 20px 44px !important; max-width: none !important; }
  section[style*="88vh"] > div[style*="padding: 0 56px 72px"] { padding: 0 20px 44px !important; max-width: none !important; }

  /* --- image boxes: keep proportion, never squash --- */
  [style*="height:601px"] { height: auto !important; aspect-ratio: 400 / 601; max-width: 330px !important; margin-inline: auto !important; }
  [style*="height: 601px"] { height: auto !important; aspect-ratio: 400 / 601; max-width: 330px !important; margin-inline: auto !important; }
  [style*="height:530px"] { height: auto !important; aspect-ratio: 350 / 530; max-width: 330px !important; margin-inline: auto !important; }
  [style*="height: 530px"] { height: auto !important; aspect-ratio: 350 / 530; max-width: 330px !important; margin-inline: auto !important; }
  [style*="height:520px"] { height: auto !important; aspect-ratio: 3 / 4; max-width: 360px !important; margin-inline: auto !important; }
  [style*="height: 520px"] { height: auto !important; aspect-ratio: 3 / 4; max-width: 360px !important; margin-inline: auto !important; }
  [style*="height:480px"] { height: auto !important; aspect-ratio: 3 / 4; max-width: 360px !important; margin-inline: auto !important; }
  [style*="height: 480px"] { height: auto !important; aspect-ratio: 3 / 4; max-width: 360px !important; margin-inline: auto !important; }
  [style*="height:420px"] { height: auto !important; aspect-ratio: 370 / 420; max-width: 340px !important; margin-inline: auto !important; }
  [style*="height: 420px"] { height: auto !important; aspect-ratio: 370 / 420; max-width: 340px !important; margin-inline: auto !important; }
  [style*="height:400px"] { height: auto !important; aspect-ratio: 4 / 3.6; }
  [style*="height: 400px"] { height: auto !important; aspect-ratio: 4 / 3.6; }
  [style*="height:360px"] { height: auto !important; aspect-ratio: 4 / 3.2; }
  [style*="height: 360px"] { height: auto !important; aspect-ratio: 4 / 3.2; }
  [style*="height:340px"] { height: auto !important; aspect-ratio: 4 / 3.3; }
  [style*="height: 340px"] { height: auto !important; aspect-ratio: 4 / 3.3; }
  [style*="height:300px"] { height: auto !important; aspect-ratio: 4 / 3 ; }
  [style*="height: 300px"] { height: auto !important; aspect-ratio: 4 / 3 ; }
  [style*="height:260px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height: 260px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height:250px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height: 250px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height:230px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height: 230px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height:220px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="height: 220px"] { height: auto !important; aspect-ratio: 4 / 3; }
  [style*="max-width:400px"], [style*="max-width:370px"], [style*="max-width:350px"] { width: 100% !important; }
  [style*="max-width: 400px"], [style*="max-width: 370px"], [style*="max-width: 350px"] { width: 100% !important; }

  /* image-slot / framed images fill their box as before */
  image-slot { width: 100% !important; }

  /* --- "how we work together": the 5 steps wrap instead of overflowing --- */
  [style*="150px 56px 170px"] { padding-top: 60px !important; padding-bottom: 70px !important; }
  [style*="150px 56px 170px"] h2 { margin-bottom: 40px !important; }
  [style*="align-items: flex-end"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important;
    gap: 30px 10px !important;
  }
  [style*="150px 56px 170px"] svg { display: none !important; }
  [style*="min-width: 120px"] { flex: 0 0 30% !important; min-width: 0 !important; transform: none !important; }
  [style*="width: 64px"][style*="border-radius: 50%"] { width: 56px !important; height: 56px !important; margin-bottom: 10px !important; }
  [style*="150px 56px 170px"] p { font-size: 13.5px !important; max-width: none !important; }

  /* --- misc --- */
  [style*="letter-spacing:0.18em"] { letter-spacing: 0.12em !important; }
  [style*="letter-spacing: 0.18em"] { letter-spacing: 0.12em !important; }
  a[style*="padding:14px 28px"] { padding: 13px 22px !important; display: inline-block; }
  a[style*="padding: 14px 28px"] { padding: 13px 22px !important; display: inline-block; }
  img[style*="width:114px"] { width: 78px !important; height: 48px !important; }
  img[style*="width: 114px"] { width: 78px !important; height: 48px !important; }
}

@media (max-width: 480px) {
  [style*="repeat(4,1fr)"] { grid-template-columns: minmax(0,1fr) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: minmax(0,1fr) !important; }
  h1[style*="font-size:56px"], h1[style*="font-size: 56px"] { font-size: 28px !important; }
  h1[style*="font-size: 56px"], h1[style*="font-size: 56px"] { font-size: 28px !important; }
  section[style], footer[style] { padding-left: 16px !important; padding-right: 16px !important; }
}