/* DAK CSS: quran-reflection.css */

/* ================================================================
   DAK Qur'an Reflection — inside School Office
   Compact, no external link. The approved Office Window is untouched.
   ================================================================ */

.home-office-status .office-status-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.home-office-status .office-window-card:has(.office-quran-strip) {
  grid-template-rows: auto auto;
}

.office-quran-strip {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 9px 13px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(26,35,50,.08);
  border-radius: 0 0 16px 16px;
  background: linear-gradient(90deg, rgba(0,188,212,.035), rgba(107,63,160,.035));
}

.office-quran-label {
  color: rgba(26,35,50,.52);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.office-quran-verse {
  min-width: 0;
  color: var(--navy);
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}

.office-quran-reference {
  color: rgba(26,35,50,.58);
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

html[dir="rtl"] .office-quran-label {
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  font-size: 9.5px;
}

/* Dark mode */
html[data-theme="dark"] .office-quran-strip {
  border-top-color: rgba(255,255,255,.075);
  background: linear-gradient(90deg, rgba(0,188,212,.045), rgba(107,63,160,.05));
}

html[data-theme="dark"] .office-quran-verse {
  color: #f4f8fb;
}

html[data-theme="dark"] .office-quran-label,
html[data-theme="dark"] .office-quran-reference {
  color: rgba(236,243,248,.62);
}

/* Phone: stack cleanly if the Arabic verse needs more breathing room. */
@media (max-width: 760px) {
  .office-quran-strip {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label ref"
      "verse verse";
    gap: 4px 8px;
    padding: 8px 10px 7px;
    margin-top: 8px;
  }

  .office-quran-label {
    grid-area: label;
    justify-self: start;
  }

  .office-quran-reference {
    grid-area: ref;
    justify-self: end;
  }

  .office-quran-verse {
    grid-area: verse;
    font-size: 14px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .office-quran-strip * {
    transition: none !important;
  }
}


/* ================================================================
   Phone-only compact School Office card
   Shrinks the ENTIRE box while preserving iPad/laptop unchanged.
   ================================================================ */
@media (max-width: 760px) {
  .home-office-status .container.office-status-stack {
    align-items: center !important;
  }

  .home-office-status .office-window-card {
    width: min(calc(100% - 24px), 430px) !important;
    max-width: 430px !important;
    margin-inline: auto !important;

    grid-template-columns: minmax(0, 1fr) 96px !important;
    grid-template-areas:
      "main window"
      "note window"
      "actions actions"
      "quran quran" !important;

    gap: 7px 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .home-office-status .office-status-main {
    min-width: 0 !important;
    align-self: start !important;
  }

  .home-office-status .office-status-dot {
    width: 10px !important;
    height: 10px !important;
  }

  .home-office-status .office-status-kicker {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .home-office-status .office-status-title {
    font-size: 15px !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
  }

  .home-office-status .office-status-note {
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .home-office-status .office-window-wrap {
    width: 96px !important;
    justify-self: end !important;
    align-self: start !important;
    grid-template-rows: 70px auto !important;
    gap: 4px !important;
  }

  .home-office-status .office-window {
    border-width: 4px !important;
    border-radius: 13px !important;
  }

  .home-office-status .window-copy strong {
    font-size: 8.8px !important;
  }

  .home-office-status .window-copy span {
    font-size: 7px !important;
  }

  .home-office-status .window-copy small {
    font-size: 6.8px !important;
  }

  .home-office-status .office-status-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
    margin-top: 2px !important;
  }

  .home-office-status .office-status-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    border-radius: 13px !important;
  }

  .home-office-status .office-quran-strip {
    grid-area: quran !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 5px !important;
    padding: 7px 9px 8px !important;
    border-radius: 13px !important;
    gap: 4px 7px !important;
  }

  .home-office-status .office-quran-label {
    font-size: 7.5px !important;
  }

  .home-office-status .office-quran-reference {
    font-size: 8px !important;
  }

  .home-office-status .office-quran-verse {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 390px) {
  .home-office-status .office-window-card {
    width: min(calc(100% - 16px), 400px) !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    padding: 11px !important;
    gap: 6px 8px !important;
  }

  .home-office-status .office-status-title {
    font-size: 14px !important;
  }

  .home-office-status .office-status-note {
    font-size: 10px !important;
  }

  .home-office-status .office-window-wrap {
    width: 88px !important;
    grid-template-rows: 65px auto !important;
  }

  .home-office-status .office-status-action {
    min-height: 34px !important;
    font-size: 9.5px !important;
  }

  .home-office-status .office-quran-verse {
    font-size: 12.5px !important;
  }
}


/* ================================================================
   Phone — cohesive School Office composition
   Keep iPad/laptop unchanged.
   Groups the Office Window + greeting + Muscat time into one compact
   visual tile and tightens the whole card so nothing feels scattered.
   ================================================================ */
@media (max-width: 760px) {
  .home-office-status .office-window-card {
    gap: 6px 9px !important;
    padding: 12px !important;
  }

  .home-office-status .office-status-main {
    align-self: center !important;
  }

  .home-office-status .office-status-note {
    margin-top: 1px !important;
  }

  /* Right-side visual becomes one unified mini card. */
  .home-office-status .office-window-wrap {
    width: 104px !important;
    padding: 6px 6px 7px !important;
    gap: 3px !important;
    align-self: start !important;
    justify-self: end !important;
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(26,35,50,.07);
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,251,.72));
    box-shadow:
      0 5px 14px rgba(26,35,50,.065),
      inset 0 1px 0 rgba(255,255,255,.75);
  }
.home-office-status .office-window {
    min-height: 66px !important;
    border-width: 3px !important;
    border-radius: 11px !important;
    box-shadow:
      0 5px 11px rgba(22,43,65,.07),
      inset 0 0 0 1px rgba(27,55,80,.06) !important;
  }

  /* Keep the actual window illustration modest in size. */
  .home-office-status .window-lamp {
    transform: scale(.68) !important;
    transform-origin: left bottom !important;
  }

  .home-office-status .window-plant {
    transform: scale(.70) !important;
    transform-origin: right bottom !important;
  }

  .home-office-status .window-sun {
    width: 18px !important;
    height: 18px !important;
    right: 8px !important;
    top: 5px !important;
  }

  .home-office-status .window-copy {
    padding-top: 1px;
  }

  .home-office-status .window-copy strong {
    font-size: 8.8px !important;
    line-height: 1.1 !important;
  }

  .home-office-status .window-copy span {
    margin-top: 1px !important;
    font-size: 6.9px !important;
    line-height: 1.15 !important;
  }

  .home-office-status .window-copy small {
    margin-top: 2px !important;
    font-size: 6.6px !important;
    line-height: 1.1 !important;
  }

  /* Pull actions and Qur'an area closer to the main content. */
  .home-office-status .office-status-actions {
    margin-top: 1px !important;
    gap: 6px !important;
  }

  .home-office-status .office-status-action {
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
  }

  .home-office-status .office-quran-strip {
    margin-top: 3px !important;
    padding: 7px 9px 8px !important;
    border-radius: 12px !important;
  }

  .home-office-status .office-quran-verse {
    font-size: 12.8px !important;
    line-height: 1.45 !important;
  }
}

/* Slightly tighter again on very narrow phones. */
@media (max-width: 390px) {
  .home-office-status .office-window-card {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 6px 8px !important;
    padding: 11px !important;
  }

  .home-office-status .office-window-wrap {
    width: 96px !important;
    padding: 5px 5px 6px !important;
  }
.home-office-status .office-window {
    min-height: 61px !important;
  }

  .home-office-status .office-quran-verse {
    font-size: 12.3px !important;
  }
}

/* Dark mode treatment for the unified visual tile. */
html[data-theme="dark"] .home-office-status .office-window-wrap {
  border-color: rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow:
    0 5px 14px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.03);
}


/* ================================================================
   Phone — office hours line centered neatly under School Office title
   Phone only. iPad / tablet / laptop remain unchanged.
   ================================================================ */
@media (max-width: 760px) {
  .home-office-status .office-window-card {
    grid-template-areas:
      "main window"
      "note window"
      "actions actions"
      "quran quran" !important;
  }

  .home-office-status .office-status-note {
    grid-area: note !important;
    width: 100% !important;
    margin: -1px 0 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    justify-self: stretch !important;
    align-self: start !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 430px) {
  .home-office-status .office-status-note {
    margin-top: -2px !important;
    font-size: 9.8px !important;
    line-height: 1.25 !important;
  }
}


/* ================================================================
   Phone — Call / Email / Contact directly under office hours
   Keeps the Office Window on the right and removes the loose gap.
   ================================================================ */
@media (max-width: 760px) {
  .home-office-status .office-window-card {
    grid-template-areas:
      "main window"
      "note window"
      "actions window"
      "quran quran" !important;
    row-gap: 5px !important;
  }

  .home-office-status .office-status-actions {
    grid-area: actions !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .home-office-status .office-status-action {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 5px !important;
    font-size: 9px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  .home-office-status .office-window-wrap {
    grid-area: window !important;
    align-self: stretch !important;
  }

  .home-office-status .office-quran-strip {
    margin-top: 4px !important;
  }
}

@media (max-width: 390px) {
  .home-office-status .office-status-actions {
    gap: 4px !important;
  }

  .home-office-status .office-status-action {
    font-size: 8.6px !important;
    padding-inline: 4px !important;
  }
}


/* ================================================================
   iPad / Laptop — keep office hours on one complete line
   Phone remains unchanged.
   ================================================================ */
@media (min-width: 761px) {
  .home-office-status .office-window-card .office-status-note {
    white-space: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
}


/* ================================================================
   QUR'AN STRIP — VISUAL REFINEMENT V3.1
   IMPORTANT: keeps the existing footprint, spacing and responsive
   dimensions unchanged. This pass only improves the visual treatment.
   ================================================================ */

.office-quran-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  border-top-color: rgba(164, 118, 37, .16) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(184, 132, 42, .060), transparent 28%),
    radial-gradient(circle at 92% 50%, rgba(13, 130, 148, .045), transparent 30%),
    linear-gradient(90deg, rgba(250,247,240,.66), rgba(255,255,255,.84) 48%, rgba(247,251,252,.76)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 8px 22px rgba(184,132,42,.018);
}

/* Very subtle Islamic geometric watermark — decorative only, no layout impact. */
.office-quran-strip::after {
  content: "✦";
  position: absolute;
  inset-inline-end: 9%;
  top: 50%;
  z-index: -1;
  transform: translateY(-50%);
  color: rgba(176, 124, 31, .075);
  font-size: 42px;
  line-height: 1;
  pointer-events: none;
}

/* Fine gold accent at the start of the strip; does not change its dimensions. */
.office-quran-strip::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(174,119,28,.62), transparent);
  pointer-events: none;
}

.office-quran-label {
  color: #9a6a20 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.60);
}

.office-quran-label::before {
  content: "✦";
  display: inline-block;
  margin-inline-end: 4px;
  color: rgba(166, 113, 25, .72);
  font-size: .82em;
  transform: translateY(-.5px);
}

.office-quran-verse {
  color: #1e3047 !important;
  font-weight: 650 !important;
  letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.office-quran-reference {
  color: #8b672d !important;
  font-weight: 800 !important;
}

/* Dark mode — same geometry and size, richer navy/gold treatment. */
html[data-theme="dark"] .office-quran-strip {
  border-top-color: rgba(216,173,98,.16) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(216,173,98,.070), transparent 28%),
    radial-gradient(circle at 92% 50%, rgba(96,201,215,.040), transparent 30%),
    linear-gradient(90deg, rgba(20,31,47,.82), rgba(17,29,45,.90) 48%, rgba(16,32,46,.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 8px 22px rgba(216,173,98,.018);
}

html[data-theme="dark"] .office-quran-strip::after {
  color: rgba(216,173,98,.080);
}

html[data-theme="dark"] .office-quran-strip::before {
  background: linear-gradient(180deg, transparent, rgba(216,173,98,.70), transparent);
}

html[data-theme="dark"] .office-quran-label,
html[data-theme="dark"] .office-quran-reference {
  color: #d7ad65 !important;
  text-shadow: none;
}

html[data-theme="dark"] .office-quran-verse {
  color: #f5f7fb !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* On very small screens, keep decoration restrained and the exact compact layout. */
@media (max-width: 760px) {
  .office-quran-strip::after {
    inset-inline-end: 7%;
    font-size: 34px;
    opacity: .8;
  }
}

@media (max-width: 390px) {
  .office-quran-strip::after {
    font-size: 30px;
    opacity: .65;
  }
}


/* ================================================================
   QUR'AN STRIP — CLEAR MUSHAF IDENTITY V3.2
   Same dimensions as before. Only the visual language is refined:
   open-Mushaf emblem, Qur'anic brackets, subtle page watermark.
   ================================================================ */

.office-quran-strip {
  box-shadow:
    inset 0 0 0 1px rgba(157, 108, 29, .055),
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 8px 22px rgba(184,132,42,.018) !important;
}

/* Replace the previous decorative star with a faint open-Mushaf watermark. */
.office-quran-strip::after {
  content: "" !important;
  width: 74px !important;
  height: 48px !important;
  inset-inline-end: 7% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: .07 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cpath d='M48 51C36 42 23 39 8 40V10C24 9 37 13 48 22V51Z' fill='none' stroke='%239b6a20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 51C60 42 73 39 88 40V10C72 9 59 13 48 22V51Z' fill='none' stroke='%239b6a20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 22V51' stroke='%239b6a20' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M15 18C25 18 34 21 41 27M81 18C71 18 62 21 55 27' fill='none' stroke='%239b6a20' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
}

.office-quran-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Remove the tiny star from V3.1; the Mushaf icon now carries the identity. */
.office-quran-label::before {
  content: none !important;
  display: none !important;
}

.office-quran-label-icon {
  width: 18px;
  height: 14px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: #a16f21;
  filter: drop-shadow(0 2px 4px rgba(154,106,32,.08));
}

.office-quran-label-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Qur'anic verse brackets make the line read clearly as a Mushaf verse. */
.office-quran-verse::before {
  content: "﴿";
  color: #aa7627;
  font-weight: 700;
  margin-inline-end: 5px;
}

.office-quran-verse::after {
  content: "﴾";
  color: #aa7627;
  font-weight: 700;
  margin-inline-start: 5px;
}

.office-quran-reference {
  position: relative;
}

.office-quran-reference::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(159,109,30,.34), transparent);
}

/* Dark mode Mushaf treatment. */
html[data-theme="dark"] .office-quran-strip {
  box-shadow:
    inset 0 0 0 1px rgba(216,173,98,.055),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 8px 22px rgba(216,173,98,.018) !important;
}

html[data-theme="dark"] .office-quran-strip::after {
  opacity: .075 !important;
  filter: brightness(1.55) saturate(.85);
}

html[data-theme="dark"] .office-quran-label-icon,
html[data-theme="dark"] .office-quran-verse::before,
html[data-theme="dark"] .office-quran-verse::after {
  color: #d7ad65;
}

html[data-theme="dark"] .office-quran-reference::before {
  background: linear-gradient(90deg, transparent, rgba(216,173,98,.34), transparent);
}

/* Preserve the existing compact phone footprint exactly. */
@media (max-width: 760px) {
  .office-quran-label-icon {
    width: 16px;
    height: 12px;
  }

  .office-quran-strip::after {
    width: 58px !important;
    height: 38px !important;
    inset-inline-end: 6% !important;
    opacity: .055 !important;
  }

  .office-quran-verse::before {
    margin-inline-end: 4px;
  }

  .office-quran-verse::after {
    margin-inline-start: 4px;
  }
}

@media (max-width: 390px) {
  .office-quran-strip::after {
    width: 50px !important;
    height: 34px !important;
    opacity: .045 !important;
  }
}


/* ================================================================
   QUR'AN STRIP — PURE MUSHAF TEXT V3.3
   No book illustration, no watermark, no decorative image behind text.
   Same strip dimensions as before.
   ================================================================ */

.office-quran-strip {
  background: rgba(255,255,255,.46) !important;
  border-top: 1px solid rgba(26,35,50,.085) !important;
  box-shadow: none !important;
}

/* Remove every decorative graphic from previous Qur'an treatments. */
.office-quran-strip::before,
.office-quran-strip::after,
.office-quran-label::before,
.office-quran-label::after,
.office-quran-reference::before,
.office-quran-reference::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.office-quran-label-icon {
  display: none !important;
}

.office-quran-label {
  color: rgba(126,84,22,.82) !important;
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Mushaf-like Naskh/Qur'anic typography. */
.office-quran-verse {
  color: #17283d !important;
  font-family: 'Amiri Quran', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', 'Noto Sans Arabic', serif !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  word-spacing: .03em;
  text-shadow: none !important;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Remove the quotation-style brackets from V3.2.
   The verse itself now ends with the Qur'anic ۝ ayah marker + number. */
.office-quran-verse::before,
.office-quran-verse::after {
  content: none !important;
  display: none !important;
}

.office-quran-reference {
  color: rgba(126,84,22,.78) !important;
  font-family: 'Amiri Quran', 'Noto Naskh Arabic', 'Geeza Pro', 'Noto Sans Arabic', serif !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

html[data-theme="dark"] .office-quran-strip {
  background: rgba(17,29,45,.42) !important;
  border-top-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .office-quran-verse {
  color: #f5f2e9 !important;
}

html[data-theme="dark"] .office-quran-label,
html[data-theme="dark"] .office-quran-reference {
  color: #d8b36c !important;
}

/* Preserve the compact phone box while keeping the Mushaf text readable. */
@media (max-width: 760px) {
  .office-quran-verse {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 390px) {
  .office-quran-verse {
    font-size: 15px !important;
  }
}


/* ================================================================
   QUR'AN STRIP — READABLE TYPE + SOFT VERSE GLOW V3.4
   Same dimensions. No image/picture behind the verse.
   Adds only a soft light aura behind the Qur'anic text.
   ================================================================ */

.office-quran-strip {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Soft light behind the verse only — not an image. */
.office-quran-strip::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 16% !important;
  right: 16% !important;
  top: 18% !important;
  bottom: 18% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at center,
      rgba(236, 202, 123, .20) 0%,
      rgba(236, 202, 123, .10) 34%,
      rgba(236, 202, 123, .035) 58%,
      transparent 76%) !important;
  filter: blur(10px) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

/* Easier-on-the-eyes Qur'anic reading style:
   calmer weight, slightly wider breathing room, no harsh contrast. */
.office-quran-verse {
  position: relative !important;
  z-index: 1 !important;
  font-family:
    'Amiri Quran',
    'Amiri',
    'Noto Naskh Arabic',
    'Geeza Pro',
    'Traditional Arabic',
    serif !important;
  font-size: 17.5px !important;
  line-height: 1.82 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  word-spacing: .055em !important;
  color: #25364a !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 0 9px rgba(236,202,123,.10) !important;
}

/* Keep label/reference quieter so the verse itself remains the focus. */
.office-quran-label {
  color: rgba(128,88,30,.72) !important;
}

.office-quran-reference {
  color: rgba(128,88,30,.72) !important;
}

/* Dark mode: gentle warm light behind the verse, no neon effect. */
html[data-theme="dark"] .office-quran-strip::after {
  background:
    radial-gradient(ellipse at center,
      rgba(216, 173, 98, .18) 0%,
      rgba(216, 173, 98, .085) 36%,
      rgba(216, 173, 98, .025) 60%,
      transparent 78%) !important;
  filter: blur(11px) !important;
  opacity: .92 !important;
}

html[data-theme="dark"] .office-quran-verse {
  color: #f4efe5 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 0 10px rgba(216,173,98,.10) !important;
}

html[data-theme="dark"] .office-quran-label,
html[data-theme="dark"] .office-quran-reference {
  color: #d2ad68 !important;
}

/* Tablet and phone: preserve the exact compact strip footprint. */
@media (max-width: 760px) {
  .office-quran-strip::after {
    left: 10% !important;
    right: 10% !important;
    top: 16% !important;
    bottom: 16% !important;
    filter: blur(9px) !important;
  }

  .office-quran-verse {
    font-size: 16px !important;
    line-height: 1.76 !important;
    word-spacing: .045em !important;
  }
}

@media (max-width: 390px) {
  .office-quran-verse {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }
}


/* ================================================================
   QUR'AN REFERENCE — LARGER & CLEARER V3.5
   Increase only the Surah reference text while preserving the
   current Qur'an strip footprint and verse styling.
   ================================================================ */

.office-quran-reference {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .015em !important;
}

@media (max-width: 760px) {
  .office-quran-reference {
    font-size: 11px !important;
  }
}

@media (max-width: 390px) {
  .office-quran-reference {
    font-size: 10.8px !important;
  }
}


/* ================================================================
   QUR'AN STRIP — ARABIC + ENGLISH STACK V3.6
   Arabic verse on top, English meaning directly below.
   Keeps the strip compact and visually close to its previous size.
   ================================================================ */

.office-quran-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}

.office-quran-verse {
  width: 100%;
  font-size: 17px !important;
  line-height: 1.48 !important;
  word-spacing: .04em !important;
}

.office-quran-translation {
  display: block;
  width: 100%;
  min-width: 0;
  color: rgba(52, 67, 86, .68);
  font-family: "DM Sans", Inter, Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: .005em;
  text-align: center;
  text-wrap: balance;
}

/* Keep the warm glow focused behind both lines as one reading unit. */
.office-quran-strip::after {
  top: 12% !important;
  bottom: 12% !important;
}

html[data-theme="dark"] .office-quran-translation {
  color: rgba(226, 233, 241, .68);
}

/* Phone: label/reference remain on the first row, Arabic + English below. */
@media (max-width: 760px) {
  .office-quran-text {
    grid-area: verse;
    gap: 1px;
  }

  .office-quran-verse {
    grid-area: unset !important;
    font-size: 15.5px !important;
    line-height: 1.46 !important;
  }

  .office-quran-translation {
    font-size: 10px;
    line-height: 1.24;
    padding-inline: 3px;
  }
}

@media (max-width: 390px) {
  .office-quran-verse {
    font-size: 15px !important;
  }

  .office-quran-translation {
    font-size: 9.7px;
  }
}


/* ================================================================
   QUR'AN STRIP — LANGUAGE SWITCH V3.7
   Arabic site = Arabic ayah only.
   English site = English meaning only.
   Same compact strip dimensions and glow.
   ================================================================ */

/* V3.6 stacked bilingual helpers are no longer used. */
.office-quran-text,
.office-quran-translation {
  display: none !important;
}

/* English mode */
html:not([dir="rtl"]) .office-quran-verse,
html[lang="en"] .office-quran-verse {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: .003em !important;
  word-spacing: .02em !important;
  text-align: center !important;
  direction: ltr !important;
}

/* Arabic mode */
html[dir="rtl"] .office-quran-verse,
html[lang="ar"] .office-quran-verse {
  font-family:
    'Amiri Quran',
    'Amiri',
    'Noto Naskh Arabic',
    'Geeza Pro',
    'Traditional Arabic',
    serif !important;
  font-size: 17.5px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  word-spacing: .055em !important;
  text-align: center !important;
  direction: rtl !important;
}

@media (max-width:760px) {
  html:not([dir="rtl"]) .office-quran-verse,
  html[lang="en"] .office-quran-verse {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  html[dir="rtl"] .office-quran-verse,
  html[lang="ar"] .office-quran-verse {
    font-size: 16px !important;
    line-height: 1.68 !important;
  }
}

@media (max-width:390px) {
  html:not([dir="rtl"]) .office-quran-verse,
  html[lang="en"] .office-quran-verse {
    font-size: 13.5px !important;
  }

  html[dir="rtl"] .office-quran-verse,
  html[lang="ar"] .office-quran-verse {
    font-size: 15.5px !important;
  }
}


/* ================================================================
   SCHOOL OFFICE WINDOW — REMOVE TRANSPARENT TILE V3.8
   Removes the translucent panel behind the window illustration
   and its text. Keeps the illustration, words, sizing and placement.
   ================================================================ */

.home-office-status .office-window-wrap,
html[data-theme="light"] .home-office-status .office-window-wrap,
html[data-theme="dark"] .home-office-status .office-window-wrap {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep the actual window itself crisp; only its outer translucent tile is removed. */
.home-office-status .office-window {
  background-clip: padding-box;
}

/* ================================================================
   V6.0 — IPAD / TABLET OFFICE HOURS OVERLAP FIX
   Fixes the School Office time line going behind the image on iPad
   and tablet widths only. Desktop remains unchanged.
   ================================================================ */

/* Tablet portrait / narrower iPads: stack safely so nothing overlaps. */
@media (min-width: 761px) and (max-width: 900px) {
  .home-office-status .office-window-card {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
      "main"
      "note"
      "actions"
      "window"
      "quran" !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .home-office-status .office-status-main,
  .home-office-status .office-status-note,
  .home-office-status .office-status-actions,
  .home-office-status .office-window-wrap {
    min-width: 0 !important;
  }

  .home-office-status .office-window-card .office-status-note {
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  .home-office-status .office-status-actions {
    margin-top: 0 !important;
  }

  .home-office-status .office-window-wrap {
    width: 100% !important;
    max-width: 420px !important;
    justify-self: center !important;
    grid-template-rows: auto auto !important;
  }

  .home-office-status .office-window {
    width: 100% !important;
    height: auto !important;
  }

  .home-office-status .window-copy {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Wider tablets / iPad landscape: keep side-by-side but allow the
   office-hours line to wrap naturally inside the text column. */
@media (min-width: 901px) and (max-width: 1100px) {
  .home-office-status .office-window-card {
    grid-template-columns: minmax(0,1fr) minmax(220px, 250px) !important;
    gap: 10px 16px !important;
    align-items: start !important;
  }

  .home-office-status .office-status-main,
  .home-office-status .office-status-note,
  .home-office-status .office-status-actions {
    min-width: 0 !important;
  }

  .home-office-status .office-window-card .office-status-note {
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 2px 0 0 26px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  .home-office-status .office-window-wrap {
    width: 100% !important;
    max-width: 250px !important;
    justify-self: end !important;
  }

  .home-office-status .office-window {
    width: 100% !important;
    height: auto !important;
  }
}


/* DAK CSS: dak-live.css */

/* ================================================================
   DAK LIVE EXPERIENCE V1
   Homepage: Muscat time + published calendar + academic-year pulse
   Responsive across Phone / Tablet / Laptop / Desktop.
   ================================================================ */

.dak-live-section{
  position:relative;
  isolation:isolate;
  padding:72px 0 74px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 10%,rgba(0,188,212,.09),transparent 26%),
    radial-gradient(circle at 92% 18%,rgba(107,63,160,.08),transparent 27%),
    linear-gradient(180deg,#fbfdfe 0%,#f5f9fb 100%);
}
.dak-live-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.26;
  background-image:
    linear-gradient(rgba(20,52,73,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,52,73,.045) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
}
.dak-live-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:24px;
}
.dak-live-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
  color:#08788a;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}
.dak-live-dot{
  position:relative;
  width:9px;height:9px;border-radius:50%;
  background:#17a878;
  box-shadow:0 0 0 5px rgba(23,168,120,.10);
}
.dak-live-dot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(23,168,120,.30);
  border-radius:50%;
  animation:dakLivePulse 2.4s ease-out infinite;
}
.dak-live-head h2{
  margin:0;
  color:#17263b;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(34px,4vw,54px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.dak-live-head p{
  max-width:720px;
  margin:12px 0 0;
  color:#647486;
  font-size:15px;
  line-height:1.7;
}
.dak-live-calendar-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 17px;
  border:1px solid rgba(8,120,138,.18);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#08788a;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  box-shadow:0 8px 28px rgba(31,68,91,.06);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.dak-live-calendar-link:hover{
  transform:translateY(-2px);
  border-color:rgba(8,120,138,.34);
  box-shadow:0 12px 32px rgba(31,68,91,.10);
}
.dak-live-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.dak-live-card{
  position:relative;
  min-width:0;
  min-height:254px;
  display:flex;
  flex-direction:column;
  padding:22px;
  border:1px solid rgba(28,65,87,.10);
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  box-shadow:0 15px 46px rgba(28,65,87,.07);
  backdrop-filter:blur(10px);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.dak-live-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,#00b8cb,#6b3fa0,#f5b52b);
  opacity:.92;
}
.dak-live-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,168,184,.20);
  box-shadow:0 20px 50px rgba(28,65,87,.10);
}
.dak-live-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:23px;
}
.dak-live-icon{
  width:39px;height:39px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#edf9fa;
  color:#08788a;
}
.dak-live-icon svg{
  width:20px;height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dak-live-next .dak-live-icon{background:#f3eef9;color:#6b3fa0}
.dak-live-pulse .dak-live-icon{background:#fff7e5;color:#9b6b05}
.dak-live-card-label{
  color:#788796;
  font-size:9.5px;
  line-height:1;
  font-weight:900;
  letter-spacing:.10em;
  text-align:right;
}
.dak-live-primary{
  display:block;
  color:#17263b;
  font-size:23px;
  line-height:1.22;
  font-weight:850;
  letter-spacing:-.02em;
}
.dak-live-today .dak-live-primary{font-size:27px}
.dak-live-status-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
  margin-top:13px;
  color:#40566a;
  font-size:12px;
  font-weight:820;
}
.dak-live-status-dot{
  width:8px;height:8px;border-radius:50%;
  flex:0 0 auto;
  background:#17a878;
  box-shadow:0 0 0 4px rgba(23,168,120,.10);
}
.dak-live-status-dot.is-weekend{background:#6b3fa0;box-shadow:0 0 0 4px rgba(107,63,160,.10)}
.dak-live-status-dot.is-event{background:#00a8b8;box-shadow:0 0 0 4px rgba(0,168,184,.11)}
.dak-live-detail{
  margin:10px 0 0;
  color:#697a8c;
  font-size:11.5px;
  line-height:1.55;
}
.dak-live-source{
  margin-top:auto;
  padding-top:16px;
  color:#95a1ac;
  font-size:9.5px;
  line-height:1.35;
}
.dak-live-next-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:13px;
}
.dak-live-event-type,
.dak-live-countdown{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:850;
}
.dak-live-event-type{background:#f1edf7;color:#6b3fa0}
.dak-live-countdown{background:#edf8fa;color:#08788a}
.dak-live-event-name{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dak-live-card-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  margin-top:auto;
  padding-top:16px;
  color:#08788a;
  text-decoration:none;
  font-size:10.5px;
  font-weight:850;
}
.dak-live-pulse-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.dak-live-percent{
  flex:0 0 auto;
  color:#8c6208;
  font-size:18px;
  font-weight:900;
}
.dak-live-progress{
  position:relative;
  height:10px;
  margin-top:22px;
  border-radius:99px;
  overflow:visible;
  background:#edf1f4;
}
.dak-live-progress > span{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#00b8cb,#6b3fa0,#f5b52b);
  transition:width .8s cubic-bezier(.2,.7,.2,1);
}
.dak-live-progress > i{
  position:absolute;
  top:50%;left:0;
  width:15px;height:15px;
  border:3px solid #fff;
  border-radius:50%;
  background:#6b3fa0;
  box-shadow:0 3px 10px rgba(39,64,84,.18);
  transform:translate(-50%,-50%);
  transition:left .8s cubic-bezier(.2,.7,.2,1);
}
.dak-live-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  color:#99a4ae;
  font-size:8.5px;
  font-weight:750;
}
html[dir="rtl"] .dak-live-card-label{text-align:left}
html[dir="rtl"] .dak-live-calendar-link span:last-child,
html[dir="rtl"] .dak-live-card-link span:last-child{transform:scaleX(-1)}
html[dir="rtl"] .dak-live-progress > span{left:auto;right:0}
html[dir="rtl"] .dak-live-progress > i{left:auto;right:0;transform:translate(50%,-50%)}

html[data-theme="dark"] .dak-live-section{
  background:
    radial-gradient(circle at 8% 10%,rgba(0,188,212,.08),transparent 26%),
    radial-gradient(circle at 92% 18%,rgba(139,92,190,.08),transparent 27%),
    linear-gradient(180deg,#0c1722 0%,#101c28 100%);
}
html[data-theme="dark"] .dak-live-section::before{opacity:.14}
html[data-theme="dark"] .dak-live-head h2,
html[data-theme="dark"] .dak-live-primary{color:#eef5f8}
html[data-theme="dark"] .dak-live-head p,
html[data-theme="dark"] .dak-live-detail{color:#aebcc8}
html[data-theme="dark"] .dak-live-calendar-link{
  background:rgba(18,34,47,.86);
  border-color:#274250;
  color:#8de6ee;
}
html[data-theme="dark"] .dak-live-card{
  background:rgba(17,31,43,.88);
  border-color:rgba(126,162,180,.12);
  box-shadow:0 15px 46px rgba(0,0,0,.16);
}
html[data-theme="dark"] .dak-live-icon{background:#13303a;color:#8de6ee}
html[data-theme="dark"] .dak-live-next .dak-live-icon{background:#29203a;color:#d8c0f0}
html[data-theme="dark"] .dak-live-pulse .dak-live-icon{background:#332b17;color:#ffd56b}
html[data-theme="dark"] .dak-live-card-label,
html[data-theme="dark"] .dak-live-source{color:#8293a1}
html[data-theme="dark"] .dak-live-status-line{color:#c4d0d8}
html[data-theme="dark"] .dak-live-event-type{background:#2a2139;color:#d8c0f0}
html[data-theme="dark"] .dak-live-countdown{background:#123039;color:#8de6ee}
html[data-theme="dark"] .dak-live-percent{color:#ffd06a}
html[data-theme="dark"] .dak-live-progress{background:#263747}
html[data-theme="dark"] .dak-live-progress > i{border-color:#13212e}
html[data-theme="dark"] .dak-live-card-link{color:#8de6ee}

@media (max-width:1050px){
  .dak-live-section{padding:58px 0 62px}
  .dak-live-grid{gap:14px}
  .dak-live-card{padding:19px;min-height:245px}
  .dak-live-primary{font-size:20px}
  .dak-live-today .dak-live-primary{font-size:23px}
}
@media (max-width:820px){
  .dak-live-head{align-items:flex-start}
  .dak-live-grid{grid-template-columns:1fr 1fr}
  .dak-live-pulse{grid-column:1/-1;min-height:220px}
}
@media (max-width:620px){
  /* Phone only — compact live experience */
  .dak-live-section{padding:34px 0 38px}
  .dak-live-head{
    display:block;
    margin-bottom:14px;
  }
  .dak-live-kicker{
    gap:7px;
    margin-bottom:8px;
    font-size:9.5px;
  }
  .dak-live-dot{
    width:8px;
    height:8px;
  }
  .dak-live-head h2{
    font-size:29px;
    line-height:1.04;
  }
  .dak-live-head p{
    margin-top:8px;
    font-size:11.5px;
    line-height:1.5;
  }
  .dak-live-calendar-link{
    margin-top:12px;
    min-height:38px;
    padding:0 12px;
    gap:8px;
    font-size:10px;
  }
  .dak-live-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .dak-live-pulse{grid-column:auto}
  .dak-live-card{
    min-height:0;
    padding:14px;
    border-radius:16px;
  }
  .dak-live-card-top{
    margin-bottom:13px;
  }
  .dak-live-icon{
    width:32px;
    height:32px;
    border-radius:10px;
  }
  .dak-live-icon svg{
    width:17px;
    height:17px;
  }
  .dak-live-card-label{
    font-size:8.5px;
  }
  .dak-live-primary{
    font-size:17px;
    line-height:1.2;
  }
  .dak-live-today .dak-live-primary{
    font-size:20px;
  }
  .dak-live-status-line{
    margin-top:9px;
    min-height:20px;
    gap:7px;
    font-size:10.5px;
  }
  .dak-live-status-dot{
    width:7px;
    height:7px;
  }
  .dak-live-detail{
    margin-top:7px;
    font-size:10px;
    line-height:1.45;
  }
  .dak-live-source{
    padding-top:10px;
    font-size:8.5px;
  }
  .dak-live-next-meta{
    margin-bottom:10px;
    gap:7px;
  }
  .dak-live-event-type,
  .dak-live-countdown{
    min-height:22px;
    padding:0 8px;
    font-size:8.5px;
  }
  .dak-live-card-link{
    padding-top:11px;
    font-size:9.5px;
  }
  .dak-live-percent{
    font-size:16px;
  }
  .dak-live-progress{
    height:8px;
    margin-top:14px;
  }
  .dak-live-progress > i{
    width:13px;
    height:13px;
    border-width:2px;
  }
  .dak-live-progress-meta{
    margin-top:6px;
    font-size:7.8px;
  }
}
@media (prefers-reduced-motion:reduce){
  .dak-live-dot::after{animation:none}
  .dak-live-card,
  .dak-live-calendar-link,
  .dak-live-progress > span,
  .dak-live-progress > i{transition:none!important}
}
@keyframes dakLivePulse{
  0%{transform:scale(.65);opacity:.8}
  70%,100%{transform:scale(1.35);opacity:0}
}


/* ================================================================
   DAK LIVE EXPERIENCE V2.6 — THIS WEEK + JOURNEY + CAMPUS STATUS
   Additive, responsive enhancements. Existing cards remain intact.
   ================================================================ */

/* Campus live status — lives inside the coloured homepage campus cards. */
.campus-live-pill{
  position:relative;z-index:1;
  width:fit-content;max-width:100%;
  display:flex;align-items:center;gap:7px;
  margin:-3px 0 17px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.19);
  border-radius:999px;
  background:rgba(5,25,37,.18);
  color:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:10.5px;line-height:1.25;font-weight:750;
}
.campus-live-pill strong{color:#fff;font-size:10.7px;font-weight:900;white-space:nowrap}
.campus-live-pill [data-campus-live-meta]{color:rgba(255,255,255,.72);white-space:nowrap}
.campus-live-status-sep{opacity:.42}
.campus-live-status-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#90a4ae;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.campus-live-pill.is-open .campus-live-status-dot{background:#54e6a9;box-shadow:0 0 0 4px rgba(84,230,169,.14)}
.campus-live-pill.is-open{border-color:rgba(84,230,169,.24)}
.campus-live-pill.is-weekend .campus-live-status-dot{background:#ffd166;box-shadow:0 0 0 4px rgba(255,209,102,.12)}
.campus-live-pill.is-closed .campus-live-status-dot{background:#f0b86a}
html[dir="rtl"] .campus-live-pill{margin-left:auto;margin-right:0}

/* Shared premium sub-panels inside DAK Live. */
.dak-live-week-shell,
.dak-live-journey-shell{
  position:relative;
  margin-top:18px;
  padding:22px;
  border:1px solid rgba(28,65,87,.10);
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.80);
  box-shadow:0 15px 46px rgba(28,65,87,.055);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.dak-live-week-shell::before,
.dak-live-journey-shell::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,#00b8cb,#6b3fa0,#f5b52b);
  opacity:.82;
}
html[dir="rtl"] .dak-live-week-shell::before,
html[dir="rtl"] .dak-live-journey-shell::before{left:auto;right:0}
.dak-live-subhead{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:17px}
.dak-live-subhead-label{display:block;margin-bottom:6px;color:#08788a;font-size:9px;line-height:1;font-weight:900;letter-spacing:.13em}
.dak-live-subhead h3{margin:0;color:#17263b;font-family:'Playfair Display',Georgia,serif;font-size:23px;line-height:1.1;letter-spacing:-.02em}
.dak-live-subhead p{max-width:710px;margin:6px 0 0;color:#748391;font-size:10.5px;line-height:1.5}
.dak-live-mini-link{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:34px;padding:0 11px;border:1px solid rgba(8,120,138,.15);border-radius:999px;background:#f8fcfd;color:#08788a;text-decoration:none;font-size:9.5px;font-weight:850;transition:transform .18s ease,border-color .18s ease}
.dak-live-mini-link:hover{transform:translateY(-1px);border-color:rgba(8,120,138,.30)}
html[dir="rtl"] .dak-live-mini-link span:last-child{transform:scaleX(-1)}

/* This Week */
.dak-live-week-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.dak-live-week-event{min-width:0;display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid rgba(28,65,87,.075);border-radius:16px;background:rgba(249,252,253,.94);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.dak-live-week-event:hover{transform:translateY(-2px);border-color:rgba(0,168,184,.18);box-shadow:0 9px 24px rgba(28,65,87,.06)}
.dak-live-week-date{min-height:62px;display:grid;place-items:center;align-content:center;border-radius:13px;background:linear-gradient(145deg,#eef9fa,#f6fbfc);color:#08788a;text-align:center}
.dak-live-week-date span,.dak-live-week-date small{font-size:7.8px;line-height:1.05;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.dak-live-week-date strong{margin:3px 0 2px;color:#17263b;font-size:20px;line-height:1;font-weight:900}
.dak-live-week-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.dak-live-week-type{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;background:#f0edf7;color:#6b3fa0;font-size:7.8px;font-weight:850}
.dak-live-week-copy strong{width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#24384b;font-size:11px;line-height:1.34;font-weight:850}
.dak-live-week-copy>span:last-child{color:#8794a0;font-size:8.5px;line-height:1.3}
.dak-live-week-more{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;color:#08788a;text-decoration:none;font-size:9px;font-weight:850}
.dak-live-week-loading{grid-column:1/-1;padding:16px;color:#7c8995;font-size:11px;text-align:center}
.dak-live-week-empty{grid-column:1/-1;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px;padding:13px 15px;border:1px solid rgba(28,65,87,.07);border-radius:16px;background:rgba(249,252,253,.86);text-decoration:none}
.dak-live-week-empty-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#edf8f2;color:#15966c;font-size:14px;font-weight:900}
.dak-live-week-empty strong{display:block;color:#334a5f;font-size:11px;line-height:1.4}
.dak-live-week-empty-next{display:block;margin-top:4px;color:#778795;font-size:9px;line-height:1.45}
.dak-live-week-empty-next b{color:#6b3fa0}
.dak-live-week-empty-arrow{color:#08788a;font-size:16px;font-weight:900}
html[dir="rtl"] .dak-live-week-empty-arrow{transform:scaleX(-1)}

/* Academic Year Journey */
.dak-live-journey-head{align-items:center}
.dak-live-journey-now{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:0 10px;border-radius:999px;background:linear-gradient(90deg,rgba(0,184,203,.10),rgba(107,63,160,.10));color:#5a4383;font-size:8.5px;font-weight:900;letter-spacing:.04em;text-align:center}
.dak-live-journey-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:5px;padding:4px 4px 1px}
.dak-live-journey-track::before{content:"";position:absolute;top:17px;left:12.5%;right:12.5%;height:2px;background:#e2e8ec;z-index:0}
.dak-live-journey-step{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 7px;text-align:center}
.dak-live-journey-node{width:27px;height:27px;display:block;margin-bottom:9px;border:6px solid #fff;border-radius:50%;background:#d8e0e5;box-shadow:0 0 0 1px #d8e0e5,0 4px 12px rgba(31,68,91,.08);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.dak-live-journey-step strong{color:#516474;font-size:10.5px;line-height:1.3;font-weight:850}
.dak-live-journey-step>span[data-journey-date]{margin-top:4px;color:#8a98a4;font-size:8.5px;font-weight:750}
.dak-live-journey-step em{min-height:17px;margin-top:6px;color:#9ba7b0;font-style:normal;font-size:7px;font-weight:900;letter-spacing:.08em}
.dak-live-journey-step.is-past .dak-live-journey-node{background:#17a878;box-shadow:0 0 0 1px #17a878,0 4px 12px rgba(23,168,120,.15)}
.dak-live-journey-step.is-past strong{color:#3f7062}
.dak-live-journey-step.is-current .dak-live-journey-node{background:#6b3fa0;transform:scale(1.12);box-shadow:0 0 0 1px #6b3fa0,0 0 0 6px rgba(107,63,160,.10),0 5px 16px rgba(107,63,160,.18)}
.dak-live-journey-step.is-current strong{color:#55347e}
.dak-live-journey-step.is-current em{color:#6b3fa0}
.dak-live-journey-source{display:block;margin-top:16px;padding-top:0;text-align:center}

/* Dark mode */
html[data-theme="dark"] .dak-live-week-shell,
html[data-theme="dark"] .dak-live-journey-shell{background:rgba(17,31,43,.86);border-color:rgba(126,162,180,.12);box-shadow:0 15px 46px rgba(0,0,0,.13)}
html[data-theme="dark"] .dak-live-subhead h3{color:#eef5f8}
html[data-theme="dark"] .dak-live-subhead p{color:#98aab8}
html[data-theme="dark"] .dak-live-mini-link{background:#132532;border-color:#284353;color:#8de6ee}
html[data-theme="dark"] .dak-live-week-event,
html[data-theme="dark"] .dak-live-week-empty{background:rgba(18,34,47,.76);border-color:rgba(126,162,180,.10)}
html[data-theme="dark"] .dak-live-week-date{background:linear-gradient(145deg,#12313a,#172c39);color:#8de6ee}
html[data-theme="dark"] .dak-live-week-date strong{color:#f2f7fa}
html[data-theme="dark"] .dak-live-week-copy strong,
html[data-theme="dark"] .dak-live-week-empty strong{color:#dce7ed}
html[data-theme="dark"] .dak-live-week-copy>span:last-child,
html[data-theme="dark"] .dak-live-week-empty-next{color:#8fa0ad}
html[data-theme="dark"] .dak-live-week-type{background:#2a2139;color:#d8c0f0}
html[data-theme="dark"] .dak-live-week-empty-icon{background:#17362d;color:#78dcb5}
html[data-theme="dark"] .dak-live-journey-now{background:linear-gradient(90deg,rgba(0,184,203,.15),rgba(107,63,160,.18));color:#d5c1ea}
html[data-theme="dark"] .dak-live-journey-track::before{background:#304353}
html[data-theme="dark"] .dak-live-journey-node{border-color:#152634;background:#40515f;box-shadow:0 0 0 1px #40515f}
html[data-theme="dark"] .dak-live-journey-step strong{color:#aebdca}
html[data-theme="dark"] .dak-live-journey-step.is-past strong{color:#8bc9b4}
html[data-theme="dark"] .dak-live-journey-step.is-current strong{color:#d7c0ed}

/* Tablet / small laptop */
@media (max-width:1050px){
  .dak-live-week-list{grid-template-columns:1fr 1fr}
  .dak-live-week-event:nth-child(3){grid-column:1/-1}
  .campus-live-pill{font-size:10px}
}

/* Phone */
@media (max-width:620px){
  .campus-live-pill{margin:-2px 0 14px;padding:7px 9px;gap:6px;font-size:9.2px;line-height:1.2;flex-wrap:wrap;border-radius:12px}
  .campus-live-pill strong{font-size:9.5px}
  .campus-live-pill [data-campus-live-meta]{font-size:8.8px;white-space:normal}
  .campus-live-status-sep{display:none}

  .dak-live-week-shell,.dak-live-journey-shell{margin-top:10px;padding:14px;border-radius:16px}
  .dak-live-subhead{display:block;margin-bottom:12px}
  .dak-live-subhead-label{font-size:8px;margin-bottom:5px}
  .dak-live-subhead h3{font-size:18px}
  .dak-live-subhead p{margin-top:5px;font-size:9px;line-height:1.45}
  .dak-live-mini-link{margin-top:9px;min-height:31px;padding:0 9px;font-size:8.5px}
  .dak-live-week-list{grid-template-columns:1fr;gap:7px}
  .dak-live-week-event,.dak-live-week-event:nth-child(3){grid-column:auto;grid-template-columns:48px minmax(0,1fr);gap:10px;padding:9px;border-radius:13px}
  .dak-live-week-date{min-height:55px;border-radius:10px}
  .dak-live-week-date strong{font-size:17px}
  .dak-live-week-copy strong{font-size:10px}
  .dak-live-week-copy>span:last-child{font-size:7.8px}
  .dak-live-week-empty{grid-template-columns:30px minmax(0,1fr) auto;gap:9px;min-height:65px;padding:10px;border-radius:13px}
  .dak-live-week-empty-icon{width:29px;height:29px;border-radius:9px}
  .dak-live-week-empty strong{font-size:9.5px}
  .dak-live-week-empty-next{font-size:7.8px}

  .dak-live-journey-head{display:block}
  .dak-live-journey-now{margin-top:9px;min-height:27px;padding:0 8px;font-size:7.5px}
  .dak-live-journey-track{grid-template-columns:1fr 1fr;gap:7px;padding:0}
  .dak-live-journey-track::before{display:none}
  .dak-live-journey-step{align-items:flex-start;min-height:86px;padding:10px;border:1px solid rgba(28,65,87,.07);border-radius:13px;background:rgba(249,252,253,.72);text-align:start}
  .dak-live-journey-node{width:18px;height:18px;margin-bottom:7px;border-width:4px}
  .dak-live-journey-step strong{font-size:9.5px}
  .dak-live-journey-step>span[data-journey-date]{font-size:7.8px}
  .dak-live-journey-step em{min-height:0;margin-top:5px;font-size:6.5px}
  .dak-live-journey-step.is-current .dak-live-journey-node{transform:scale(1.08);box-shadow:0 0 0 1px #6b3fa0,0 0 0 4px rgba(107,63,160,.09)}
  .dak-live-journey-source{margin-top:10px;text-align:start}
  html[data-theme="dark"] .dak-live-journey-step{background:rgba(18,34,47,.66);border-color:rgba(126,162,180,.08)}
}

@media (max-width:360px){
  .campus-live-pill{width:100%;justify-content:flex-start}
  .dak-live-journey-track{grid-template-columns:1fr}
  .dak-live-journey-step{min-height:72px}
}


/* DAK CSS: home-phone-card-compact.css */

/* ================================================================
   DAK Home — Phone Card Comfort Pass V1.2
   Phone only. Tablet / iPad / Laptop / Desktop are intentionally
   unchanged. Keeps touch targets comfortable while reducing visual bulk.
   ================================================================ */
@media (max-width:620px){

  /* Hero mini cards */
  .hero-stats{
    gap:8px !important;
    margin-top:24px !important;
  }
  .hero-stat{
    padding:9px 8px !important;
    border-radius:14px !important;
  }
  .hero-stat .stat-num,
  .hero-stat .stat-num-fixed{
    font-size:19px !important;
  }
  .hero-stat .stat-label{
    font-size:9px !important;
    line-height:1.3 !important;
  }
  .hero-portal-badges{
    gap:8px !important;
  }
  .portal-badge{
    min-height:46px !important;
    padding:9px 11px !important;
    border-radius:14px !important;
  }
  .portal-badge strong{font-size:11px !important}
  .portal-badge span{font-size:8.5px !important}

  /* Branch cards */
  .branches-grid{gap:11px !important}
  .branch-card{
    min-height:0 !important;
    padding:20px 17px !important;
    border-radius:18px !important;
  }
  .branch-card::after{
    left:17px !important;
    right:17px !important;
    height:3px !important;
  }
  .branch-eyebrow{
    margin-bottom:8px !important;
    font-size:9px !important;
  }
  .branch-name,
  .branch-card h3{
    margin-bottom:10px !important;
    font-size:25px !important;
    line-height:1.08 !important;
  }
  .branch-quote,
  .branch-card p{
    max-width:100% !important;
    margin-bottom:14px !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
  }
  .branch-tags{
    gap:6px !important;
    margin-bottom:14px !important;
  }
  .branch-tags .tag,
  .branch-card .tag{
    padding:5px 8px !important;
    font-size:9.5px !important;
  }
  .branch-footer{
    gap:8px !important;
  }
  .branch-link{
    min-height:40px !important;
    font-size:10.5px !important;
  }

  /* Why DAK */
  .why-head{margin-bottom:22px !important}
  .why-cards{gap:10px !important}
  .why-card{
    padding:16px 15px !important;
    border-radius:16px !important;
  }
  .why-icon{
    width:35px !important;
    height:35px !important;
    margin-bottom:10px !important;
    border-radius:11px !important;
    font-size:17px !important;
  }
  .why-card h3{
    margin-bottom:6px !important;
    font-size:17px !important;
  }
  .why-card p{
    font-size:12px !important;
    line-height:1.55 !important;
  }
  .why-panel{
    min-height:0 !important;
    padding:19px 17px !important;
    border-radius:18px !important;
  }
  .why-panel-title{font-size:22px !important}
  .why-panel-text{font-size:12.5px !important;line-height:1.6 !important}
  .why-metrics{gap:8px !important}
  .why-metric{padding:11px 9px !important;border-radius:14px !important}

  /* Student pathway / Future Vision cards */
  .path-tools-section{padding-top:40px !important;padding-bottom:40px !important}
  .path-tools-panel{
    padding:13px !important;
    border-radius:19px !important;
  }
  .path-tools-grid{gap:9px !important}
  .path-tool-card,
  body[dir="rtl"] .path-tool-card{
    gap:10px !important;
    min-height:0 !important;
    padding:17px 15px !important;
    border-radius:16px !important;
  }
  .path-tool-card::after{
    left:15px !important;
    right:15px !important;
    height:3px !important;
  }
  .path-tool-index{
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
    font-size:17px !important;
  }
  .path-tool-icon{
    top:15px !important;
    right:15px !important;
    width:36px !important;
    height:36px !important;
    border-radius:11px !important;
    font-size:16px !important;
  }
  body[dir="rtl"] .path-tool-icon{
    right:auto !important;
    left:15px !important;
  }
  .path-tool-card h3{
    padding-right:42px !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.15 !important;
  }
  body[dir="rtl"] .path-tool-card h3{
    padding-right:0 !important;
    padding-left:42px !important;
  }
  .path-tool-card p{
    margin:0 !important;
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  .path-tool-action{
    margin-top:2px !important;
    padding-top:10px !important;
    font-size:10px !important;
  }

  /* Quick Access */
  .quick-access-head{margin-bottom:20px !important}
  .quick-directory{
    padding:9px !important;
    border-radius:20px !important;
  }
  .quick-directory::before{
    left:10px !important;
    right:10px !important;
  }
  .ql-grid{gap:8px !important}
  .ql-card{
    grid-template-columns:42px minmax(0,1fr) 28px !important;
    gap:10px !important;
    min-height:94px !important;
    padding:13px 12px !important;
    border-radius:15px !important;
  }
  .ql-card::before{width:4px !important}
  .ql-icon{
    width:42px !important;
    height:42px !important;
    border-radius:13px !important;
    font-size:19px !important;
  }
  .ql-title{
    font-size:14.5px !important;
    line-height:1.2 !important;
  }
  .ql-desc{
    margin-top:3px !important;
    font-size:10.5px !important;
    line-height:1.4 !important;
  }
  .ql-arrow{
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }
  .quick-directory-note{
    margin-top:10px !important;
    font-size:9.5px !important;
  }

  /* School apps */
  .apps-showcase{gap:10px !important}
  .premium-app-card,
  .app-card{
    min-height:0 !important;
    padding:17px 15px !important;
    border-radius:17px !important;
  }
  .app-card-top{
    gap:10px !important;
    margin-bottom:20px !important;
  }
  .premium-app-card .app-icon-wrap,
  .app-icon-wrap{
    width:52px !important;
    height:52px !important;
    border-radius:15px !important;
    font-size:24px !important;
  }
  .app-badge{
    padding:6px 9px !important;
    font-size:8.5px !important;
  }
  .app-name{
    margin-bottom:5px !important;
    font-size:24px !important;
  }
  .app-desc{
    font-size:12px !important;
    line-height:1.5 !important;
  }
  .app-feature-row{
    gap:6px !important;
    margin-top:14px !important;
    margin-bottom:14px !important;
  }
  .app-feature-row span{
    padding:5px 7px !important;
    font-size:8.5px !important;
  }
  .app-btns{gap:8px !important}
  .store-btn{
    min-height:44px !important;
    padding:7px 9px !important;
    border-radius:12px !important;
  }
  .store-icon{font-size:18px !important}
  .store-text span{font-size:7.5px !important}
  .store-text strong{font-size:10.5px !important}

  /* News cards */
  .news-grid{gap:9px !important}
  .news-card{
    gap:7px !important;
    padding:16px 15px !important;
    border-radius:15px !important;
  }
  .news-date{font-size:9px !important}
  .news-title-text{
    font-size:15.5px !important;
    line-height:1.35 !important;
  }
  .news-excerpt{
    font-size:11.5px !important;
    line-height:1.52 !important;
    -webkit-line-clamp:3 !important;
  }
  .news-tag{
    padding:5px 8px !important;
    font-size:9px !important;
  }

  /* Child journey card — reduce shell, preserve form comfort */
  .journey-premium-card{
    border-radius:18px !important;
  }
  .journey-story-panel,
  .journey-form-panel{
    padding:18px 15px !important;
  }
  .journey-story-top{margin-bottom:12px !important}
  .journey-story-badge{
    padding:6px 9px !important;
    font-size:8.5px !important;
  }
  .journey-story-icon{font-size:24px !important}
  .journey-story-panel h3{
    font-size:23px !important;
    line-height:1.1 !important;
  }
  .journey-story-panel > p{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  .glowing-journey-path{
    min-height:190px !important;
    margin-top:12px !important;
    border-radius:18px !important;
  }
  .journey-pill-row{
    gap:6px !important;
    margin-top:11px !important;
  }
  .journey-pill-row span{
    padding:5px 8px !important;
    font-size:8.5px !important;
  }

  /* Newsletter card — smaller shell, form controls remain usable */
  .newsletter-card{
    gap:10px !important;
    padding:10px !important;
    border-radius:20px !important;
  }
  .newsletter-copy,
  .newsletter-form-panel{
    padding:19px 15px !important;
    border-radius:16px !important;
  }
  .newsletter-badge{
    margin-bottom:10px !important;
    padding:6px 9px !important;
    font-size:8.5px !important;
  }
  .newsletter h2{
    font-size:25px !important;
    line-height:1.08 !important;
  }
  .newsletter-copy p{
    font-size:11.5px !important;
    line-height:1.55 !important;
  }
}

/* Extremely narrow phones: preserve breathing room rather than squeezing text. */
@media (max-width:360px){
  .branch-card,
  .why-card,
  .path-tool-card,
  .premium-app-card,
  .app-card,
  .news-card{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .ql-card{
    grid-template-columns:38px minmax(0,1fr) 26px !important;
    gap:8px !important;
    padding:12px 10px !important;
  }
  .ql-icon{
    width:38px !important;
    height:38px !important;
  }
}


/* DAK CSS: site-life.css */
/* ================================================================
   DAK SITE LIFE V2.6
   Quiet page/scroll motion. No content is hidden if JavaScript fails.
   ================================================================ */
body.dak-life-ready{animation:dakLifePageSettle .32s ease-out}
.dak-life-watch.dak-life-inview{animation:dakLifeSectionIn .58s cubic-bezier(.2,.72,.2,1)}
@keyframes dakLifePageSettle{from{opacity:.985}to{opacity:1}}
@keyframes dakLifeSectionIn{from{opacity:.94;transform:translateY(8px)}to{opacity:1;transform:none}}

/* A very quiet ambient drift on large screens only; keeps mobile GPU work low. */
@media (min-width:701px) and (prefers-reduced-motion:no-preference){
  .dak-live-section::before{animation:dakLifeGridDrift 24s ease-in-out infinite alternate}
  .branches-section::before{animation:dakLifeGlowA 18s ease-in-out infinite alternate}
  .branches-section::after{animation:dakLifeGlowB 22s ease-in-out infinite alternate}
}
@keyframes dakLifeGridDrift{from{transform:translate3d(-5px,-3px,0)}to{transform:translate3d(7px,5px,0)}}
@keyframes dakLifeGlowA{from{transform:translate3d(-5px,0,0) scale(.98)}to{transform:translate3d(10px,8px,0) scale(1.04)}}
@keyframes dakLifeGlowB{from{transform:translate3d(5px,3px,0) scale(1)}to{transform:translate3d(-9px,-5px,0) scale(1.035)}}

/* Touch acknowledgement without changing layouts. */
@media (hover:none){
  :where(.branch-link,.ql-card,.dak-live-calendar-link,.dak-live-card-link,.dak-live-mini-link,.office-status-action):active{transform:scale(.985)}
}

@media (prefers-reduced-motion:reduce){
  body.dak-life-ready,.dak-life-watch.dak-life-inview{animation:none!important}
  .dak-live-section::before,.branches-section::before,.branches-section::after{animation:none!important}
}


/* DAK CSS: journey-phone-rebuild.css */
/* DAK Child Journey — phone-only rebuild
   Scope: max-width 767px only. Tablet/laptop/desktop remain untouched. */
@media (max-width: 767px) {
  .journey-premium-section {
    overflow: hidden !important;
  }

  .journey-premium-section > .container {
    min-width: 0 !important;
  }

  .journey-premium-card {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 20px 0 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid var(--pf-border, rgba(26,35,50,.10)) !important;
    background: var(--pf-surface, #fff) !important;
    box-shadow: 0 18px 44px rgba(15,38,61,.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ---------- Story / route ---------- */
  .journey-story-panel {
    display: block !important;
    min-height: 0 !important;
    padding: 20px 16px 18px !important;
    background:
      radial-gradient(circle at 92% 92%, rgba(0,188,212,.22), transparent 34%),
      linear-gradient(145deg,#132131 0%,#1a2e44 58%,#241e45 100%) !important;
    overflow: hidden !important;
  }

  .journey-story-glow {
    display: block !important;
    width: 190px !important;
    height: 190px !important;
    right: -92px !important;
    bottom: -102px !important;
    opacity: .66 !important;
    animation: none !important;
  }

  .journey-story-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
  }

  .journey-story-badge {
    max-width: calc(100% - 54px) !important;
    min-height: 32px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    letter-spacing: .07em !important;
    white-space: normal !important;
    text-align: start !important;
  }

  .journey-story-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 20px !important;
    box-shadow: none !important;
  }

  .journey-story-panel h3 {
    max-width: none !important;
    margin: 0 0 10px !important;
    font-size: clamp(24px, 7.1vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  .journey-story-panel p {
    max-width: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.74) !important;
    -webkit-text-fill-color: rgba(255,255,255,.74) !important;
  }

  /* Rebuild the hidden desktop curve into a clean mobile vertical route. */
  .glowing-journey-path {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 18px 0 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 8% 88%, rgba(0,188,212,.14), transparent 26%),
      radial-gradient(circle at 92% 12%, rgba(245,166,35,.12), transparent 24%),
      rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  .glowing-journey-path::before {
    opacity: .16 !important;
    animation: none !important;
  }

  .journey-road,
  .journey-moving-light {
    display: none !important;
  }

  .journey-road-step,
  .journey-road-step:hover,
  .journey-road-step.step-grow,
  .journey-road-step.step-grow:hover {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 11px !important;
    row-gap: 2px !important;
    align-items: center !important;
    border-radius: 16px !important;
    transform: none !important;
    background: rgba(255,255,255,.085) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-align: start !important;
    z-index: 1 !important;
  }

  .journey-road-step:not(.step-grad)::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 32px !important;
    bottom: -11px !important;
    width: 2px !important;
    height: 11px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,rgba(0,188,212,.72),rgba(139,94,215,.55)) !important;
  }

  .journey-road-step .road-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    font-size: 18px !important;
    box-shadow: 0 0 18px rgba(0,188,212,.10) !important;
  }

  .journey-road-step strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .journey-road-step small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
    overflow-wrap: anywhere !important;
  }

  .journey-path-pills {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
  }

  .journey-path-pills span {
    min-width: 0 !important;
    padding: 7px 4px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* ---------- Form ---------- */
  .journey-form-panel {
    min-height: 0 !important;
    padding: 18px 16px 20px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .journey-form-panel::before {
    display: none !important;
  }

  .journey-form-panel .journey-form-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 0 0 15px !important;
    margin: 0 0 16px !important;
  }

  .journey-form-panel .journey-form-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
    box-shadow: 0 10px 24px rgba(107,63,160,.17) !important;
  }

  .journey-form-panel .journey-form-head strong {
    margin: 0 0 3px !important;
    font-size: 18px !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere !important;
  }

  .journey-form-panel .journey-form-head small {
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }

  .journey-premium-inputs,
  .journey-inputs {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .journey-premium-inputs .wide,
  .journey-premium-inputs .compact,
  .journey-premium-inputs .journey-input-group,
  .journey-premium-btn,
  .journey-input-group:first-child {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .journey-input-group {
    gap: 6px !important;
  }

  .journey-input-group label,
  .journey-premium-inputs label {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: .025em !important;
  }

  .journey-premium-inputs input,
  .journey-premium-inputs select,
  .journey-premium-inputs input[type="date"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
  }

  .journey-premium-inputs select {
    padding-inline-end: 38px !important;
    text-overflow: ellipsis !important;
  }

  .journey-premium-inputs select:disabled {
    opacity: .72 !important;
  }

  .journey-premium-btn {
    min-height: 54px !important;
    height: auto !important;
    margin: 1px 0 0 !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: 0 12px 24px rgba(107,63,160,.18) !important;
  }

  /* ---------- Generated result ---------- */
  .journey-premium-result,
  .journey-result {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .journey-premium-result .journey-header {
    margin: 0 !important;
    padding: 22px 16px !important;
    border-radius: 0 !important;
  }

  .journey-child-name {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  .journey-child-sub {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }

  .journey-accuracy-summary {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin: 14px !important;
  }

  .journey-accuracy-item {
    min-width: 0 !important;
    padding: 11px !important;
    border-radius: 14px !important;
  }

  .journey-accuracy-item small {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .journey-accuracy-item strong {
    font-size: 14px !important;
    line-height: 1.28 !important;
  }

  .journey-timeline {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 14px !important;
  }

  .journey-step {
    gap: 11px !important;
    min-width: 0 !important;
  }

  .journey-step-left {
    width: 42px !important;
  }

  .journey-step-dot {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
  }

  .journey-step-right {
    min-width: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 22px !important;
  }

  .journey-step-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .journey-step-year,
  .journey-step-age {
    font-size: 10.5px !important;
  }

  .journey-step-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .journey-footer {
    padding: 18px 16px !important;
  }

  .journey-footer-text {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

/* Extra-narrow phones: keep every control and summary card readable. */
@media (max-width: 359px) {
  .journey-story-panel,
  .journey-form-panel {
    padding-inline: 14px !important;
  }

  .journey-story-panel h3 {
    font-size: 23px !important;
  }

  .journey-story-badge {
    font-size: 8.4px !important;
  }

  .journey-path-pills {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .journey-accuracy-summary {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

/* Phone dark mode: preserve contrast while keeping the rebuild isolated. */
@media (max-width: 767px) {
  html[data-theme="dark"] .journey-premium-card {
    background: #141f30 !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
  }

  html[data-theme="dark"] .journey-form-panel {
    background: linear-gradient(180deg,#141f30 0%,#101a29 100%) !important;
  }

  html[data-theme="dark"] .journey-premium-inputs input,
  html[data-theme="dark"] .journey-premium-inputs select,
  html[data-theme="dark"] .journey-premium-inputs input[type="date"] {
    background: #101a29 !important;
    color: #eef4fb !important;
    border-color: rgba(255,255,255,.14) !important;
  }
}


/* DAK CSS: journey-touch-controls-fix.css */
/* DAK Journey touch-control stability fix — 2026-09-27
   Scope: phone + detected tablets only. Desktop/laptop remain untouched.
   Purpose: keep iOS/iPadOS native date/select controls inside the card, align the
   DOB value correctly, preserve tap targets, and prevent long grade text from
   stretching or clipping the layout. */

@media (max-width: 767px) {
  .journey-dob-field,
  .journey-grade-field {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .journey-dob-field input[type="date"],
  .journey-grade-field select {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    padding-inline-start: 14px !important;
    padding-inline-end: 44px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .journey-dob-field input[type="date"]::-webkit-date-and-time-value {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .journey-dob-field input[type="date"]::-webkit-datetime-edit,
  .journey-dob-field input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .journey-dob-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
  }

  .journey-grade-field select {
    text-align: left !important;
    text-align-last: left !important;
  }

  .journey-dob-field::after,
  .journey-grade-field::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-end: 15px !important;
    bottom: 18px !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: #6b7785 !important;
    opacity: .82 !important;
  }

  .journey-dob-field::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .journey-grade-field::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .journey-grade-field select:disabled {
    opacity: 1 !important;
    color: #65717f !important;
    -webkit-text-fill-color: #65717f !important;
  }
}

/* Same containment fix for real iPads / detected tablets, including 12.9-inch
   iPad Pro landscape. This deliberately keys off .dak-tablet instead of width. */
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.dak-tablet .journey-dob-field input[type="date"],
html.dak-tablet .journey-grade-field select {
  display: block !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  padding-inline-start: 15px !important;
  padding-inline-end: 46px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html.dak-tablet .journey-dob-field input[type="date"]::-webkit-date-and-time-value {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html.dak-tablet .journey-dob-field input[type="date"]::-webkit-datetime-edit,
html.dak-tablet .journey-dob-field input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.dak-tablet .journey-dob-field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

html.dak-tablet .journey-grade-field select {
  text-align: left !important;
  text-align-last: left !important;
}

html.dak-tablet .journey-dob-field::after,
html.dak-tablet .journey-grade-field::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: 16px !important;
  bottom: 19px !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: #6b7785 !important;
  opacity: .82 !important;
}

html.dak-tablet .journey-dob-field::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

html.dak-tablet .journey-grade-field::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

html.dak-tablet .journey-grade-field select:disabled {
  opacity: 1 !important;
  color: #65717f !important;
  -webkit-text-fill-color: #65717f !important;
}

/* RTL keeps the touch icons on the logical end and the text aligned naturally. */
@media (max-width: 767px) {
  html[dir="rtl"] .journey-dob-field input[type="date"]::-webkit-date-and-time-value,
  html[dir="rtl"] .journey-grade-field select,
  html[lang="ar"] .journey-dob-field input[type="date"]::-webkit-date-and-time-value,
  html[lang="ar"] .journey-grade-field select {
    text-align: right !important;
    text-align-last: right !important;
  }

  html[data-theme="dark"] .journey-dob-field::after,
  html[data-theme="dark"] .journey-grade-field::after {
    background: #aeb9c6 !important;
  }

  html[data-theme="dark"] .journey-grade-field select:disabled {
    color: #9ca9b8 !important;
    -webkit-text-fill-color: #9ca9b8 !important;
  }
}

html.dak-tablet[dir="rtl"] .journey-dob-field input[type="date"]::-webkit-date-and-time-value,
html.dak-tablet[dir="rtl"] .journey-grade-field select,
html.dak-tablet[lang="ar"] .journey-dob-field input[type="date"]::-webkit-date-and-time-value,
html.dak-tablet[lang="ar"] .journey-grade-field select {
  text-align: right !important;
  text-align-last: right !important;
}

html.dak-tablet[data-theme="dark"] .journey-dob-field::after,
html.dak-tablet[data-theme="dark"] .journey-grade-field::after {
  background: #aeb9c6 !important;
}

html.dak-tablet[data-theme="dark"] .journey-grade-field select:disabled {
  color: #9ca9b8 !important;
  -webkit-text-fill-color: #9ca9b8 !important;
}


/* DAK CSS: quality-production.css */
/* ================================================================
   DAK PRODUCTION QUALITY LAYER — V7.8
   Non-layout polish only. Keeps approved responsive geometry intact.
   ================================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  scroll-padding-top: 96px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}

img {
  image-rendering: auto;
}

a,
button,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

::selection {
  background: rgba(0, 188, 212, .22);
  color: #142436;
}

html[data-theme="dark"] ::selection {
  background: rgba(0, 188, 212, .34);
  color: #ffffff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(0, 188, 212, .48);
  outline-offset: 3px;
}

@supports (text-wrap: balance) {
  .hero-title,
  .page-title,
  .section-title,
  .branch-name,
  .journey-form-head strong,
  .pa-hero h1,
  .pa-intro-head h2,
  .fv-title,
  h1,
  h2 {
    text-wrap: balance;
  }
}

@media (min-width: 900px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 151, 167, .55) rgba(20, 36, 54, .06);
  }

  html::-webkit-scrollbar {
    width: 10px;
  }

  html::-webkit-scrollbar-track {
    background: rgba(20, 36, 54, .045);
  }

  html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 188, 212, .72), rgba(107, 63, 160, .64));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }
}

@media (max-width: 899px) {
  html {
    scroll-padding-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}