.ab-page {
  background: var(--navy);
}

.ab-page .site-header {
  display: none;
}

/* the page has its own side bar on desktop */
@media (min-width: 768px) {
  .ab-page .site-footer {
    display: none;
  }
}

.ab {
  position: relative;
}

.ab-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.Pin-Wrapp,
.ab-track {
  display: flex;
  flex-direction: row;
  direction: rtl;
  height: 100vh;
  width: max-content;
  margin-inline-start: auto;
  will-change: transform;
}

/* ---------- panels ---------- */
.ab-panel {
  position: relative;
  flex: none;
  height: 100vh;
  overflow: hidden;
  color: var(--navy);
}

.ab-title {
  display: inline-block;
  font-weight: 500;
  font-size: 24px;
  line-height: 4rem;
  padding-bottom: 1.2rem;
  margin: 0;
  position: relative;
}
.ab-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 31px;
  height: 2px;
  background: #0a1d3d;
}
.ab-title--light {
  color: #fff;
}

.ab-arrows {
  display: inline-block;
  width: 4.2rem;
  height: 3.4rem;
  color: var(--navy);
}

.ab-arrows svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 1 hero: 149.5rem wide + the 10.5rem side bar = 160rem */
.ab-hero {
  width: 149.5rem;
  background: var(--navy-2, #0a1d3d);
}

.ab-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 55%;
}

.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 29, 61, 0.18);
  pointer-events: none;
}

.ab-play {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 2;
  width: 5.6rem;
  height: 6.2rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease);
}

.ab-play svg {
  width: 100%;
  height: 100%;
}

.ab-play:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.ab-hero__arrows {
  position: absolute;
  z-index: 2;
  left: 7.4rem;
  bottom: 3.2rem;
  color: #fff;
  direction: ltr;
}

/* 2 about us */
.ab-about {
  width: 100rem;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-about__dots {
  position: absolute;
  left: 15rem;
  top: 0;
  width: 29.8rem;
  height: 31rem;
  background: url(../images/dots.png);
}

.ab-about__en {
  position: absolute;
  left: 12.4rem;
  top: 18.4rem;
  margin: 0;
  font: 800 96px var(--en);
  letter-spacing: -0.01em;
  color: #cacaca;
  white-space: nowrap;
  z-index: 1;
}

.ab-about__body {
  position: relative;
  width: 68.4rem;
  margin-top: 6rem;
  direction: rtl;
}

.ab-about__body .ab-title {
  margin-bottom: 2.4rem;
}
.ab-page .frame { 
    left: 41%; 
}
.ab-about__body p {
  /* margin: 0 0 3rem; */
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  text-align: justify;
  color: #4b5563;
}

.ab-about__body b {
  color: var(--navy);
  font-weight: 800;
}

.ab-about__body img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 4rem;
}

.ab-about__arrows {
  color: var(--navy);
}

/* 3 history */
.ab-history {
  width: 150.7rem;
  background: #0b0d12;
  color: #fff;
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: center;
  padding: 0 4.5rem 0 3rem;
  gap: 4rem;
}

.ab-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.ab-history::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.ab-history > * {
  position: relative;
}

.ab-history__en {
  margin: 0;
  flex: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 800 9.6rem/1 var(--en);
  color: rgba(255, 255, 255, 0.26);
}

.ab-history .ab-title--light {
  flex: none;
  align-self: center; /* centred between the top and the bottom of the panel */
  margin-top: 0;
}

.ab-acc--history {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 103rem;
}

/* generic accordion */
.ab-acc {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-acc__i {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.ab-acc__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  width: 100%;
  padding: 2rem 0.6rem;
  background: none;
  border: 0;
  color: inherit;
  font: 500 20px/3.2rem var(--fa);
  text-align: right;
  cursor: pointer;
}

.ab-acc__i.is-open > .ab-acc__h,
.ab-acc__i.is-open > .ab-acc__h span {
  color: var(--orange);
}

.ab-acc__b {
  overflow: hidden;
  height: 0;
}

.ab-acc__b p {
  margin: 0;
  padding: 0 0.6rem 2.2rem;
  font: 400 16px/2.9rem var(--fa);
  color: rgba(255, 255, 255, 0.8);
  line-height: 2;
}

.ab-plus {
  position: relative;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

.ab-plus::before,
.ab-plus::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
}

.ab-plus::after {
  transform: rotate(90deg);
  transition: transform 0.3s var(--ease);
}

.ab-acc__i.is-open .ab-plus::after {
  transform: rotate(0);
}

/* 4 team */
.ab-team {
  width: 113.6rem;
  background: var(--bg-2);
  border-inline: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ab-team__in {
  width: 102.2rem;
  margin-inline-start: 0;
  padding-right: 8.4rem;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-right: 1.6rem;
  max-height: 86vh;
}

.ab-team__in .ab-title {
  align-self: flex-start;
  margin-bottom: 1.4rem;
}

.ab-up,
.ab-down {
  display: block;
  margin: 1.2rem auto;
  width: 2.8rem;
  height: 1.4rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.ab-acc--team {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.ab-acc--team::-webkit-scrollbar {
  display: none;
}

.ab-acc--team .ab-acc__i {
  border-bottom: 1px solid var(--line);
}

.ab-person {
  padding: 0;
  color: #687280;
}

.ab-person__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 1rem;
  padding: 1.5rem 0.6rem;
  background: none;
  border: 0;
  color: inherit;
  font: 400 14px/12px var(--fa);
  text-align: right;
  cursor: pointer;
}

.ab-person__c {
  display: flex;
  gap: 1.6rem;
  order: -1;
  padding-left: 1.8rem;
  direction: ltr;
}

.ab-person__c a {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: #687280;
  transition: color 0.25s;
}

.ab-person__c svg {
  object-fit: contain;
}

.ab-acc--team .ab-acc__i.is-open .ab-person,
.ab-acc--team .ab-acc__i.is-open .ab-person__t {
  color: var(--navy);
}
.ab-acc--team .ab-acc__i.is-open .ab-person__c a svg path {
  fill: var(--navy);
}
.ab-acc--team .ab-acc__b img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.6rem;
}

.ab-acc--team .ab-acc__i .ab-person__t span {
  color: inherit;
}

/* 5 help */
.ab-help {
  width: 200rem;
  background: var(--navy);
  color: #fff;
}

.ab-help__en {
  position: absolute;
  left: 29rem;
  top: 12.6rem;
  margin: 0;
  font: 800 12.8rem/1.2 var(--en);
  color: #cfcfcf;
  white-space: nowrap;
  direction: ltr;
}

.ab-help__text {
  position: absolute;
  right: 4rem;
  top: 26.6rem;
  width: 71.4rem;
  direction: rtl;
}

.ab-help__text .ab-title {
  font-size: 24px;
  margin-bottom: 1.8rem;
}

.ab-help__text p {
  margin: 0;
  font: 400 14px var(--fa);
  text-align: justify;
  color: #fff;
  line-height: 1.5;
}

.ab-acc--help {
  position: absolute;
  left: 29.2rem;
  top: 32rem;
  width: 82.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.ab-acc--help .ab-acc__i {
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ab-acc--help .ab-acc__i:first-child {
  border-top: 0;
}

.ab-acc--help .ab-acc__h {
  gap: 2rem;
  padding: 2rem 0;
  font: 700 16px/3rem var(--fa);
  color: #fff;
}

.ab-acc--help .ab-acc__h strong {
  flex: 1;
  font-weight: 700;
  text-align: right;
}

.ab-acc--help .ab-acc__i.is-open > .ab-acc__h {
  color: #fff;
}

.ab-acc--help .ab-acc__b p {
  padding: 0 8rem 2.6rem 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
}

.ab-help__ic {
  flex: none;
  width: 37.057px;
  height: 37.089px;
}

.ab-help__ic svg {
  width: 100%;
  height: 100%;
}

.ab-switch {
  position: relative;
  flex: none;
  width: 5.6rem;
  height: 2rem;
  border: 1px solid #fff;
  border-radius: 1rem;
  order: -1;
  margin-left: 1rem;
}

.ab-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 4px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--orange);
  transition: transform 0.35s var(--ease);
}

.ab-acc__i.is-open .ab-switch {
  background: #fff;
}

.ab-acc__i.is-open .ab-switch::after {
  transform: translateX(-3.4rem);
}

.ab-help__stack {
  position: absolute;
  right: 50rem;
  bottom: 0;

  height: auto;
}

.ab-social {
  position: absolute;
  left: 1.2rem;
  top: 30rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: center;
}

.ab-social img,
.ab-social svg {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}

/* ---------- fixed UI (desktop) ---------- */
.ab-side {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(10.4rem, 104px);
  z-index: 40;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.4rem 0 2.9rem;
  padding-inline: 1.8rem !important;
}

.ab-side__logo img {
  display: block;
  width: min(7.5rem, 75px);
  height: auto;
}

.ab-side__menu {
  flex: 1;
  display: grid;
  place-items: center;
  width: 100%;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.ab-side__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.ab-side__lang {
  color: #fff;
  font: 600 16px/1 var(--en);
  text-decoration: none;
}

.ab-side__search {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0;
  width: 19px;
  height: 19px;
}

.ab-side__search svg {
  display: block;
}

@media (min-width: 768px) {
  .ab-help__stack {
    bottom: -12px !important;
    width: 194px;
    right: 52rem !important;
  }
  .Pin-Wrapp {
    padding-right: min(10.5rem, 105px);
  }

  .ab-hero {
    width: 149.5rem;
  }
}

@media (max-width: 767.98px) {
  .site-header[data-theme="dark"].is-scrolled {
  background: #0A1D3D;
}
 .site-header[data-theme="dark"].is-scrolled  svg path {
  fill: #fff;
}
 .site-header[data-theme="dark"].is-scrolled  svg line {
  stroke: #fff;
}
 .site-header[data-theme="dark"].is-scrolled  svg line {
  stroke: #fff;
}
 .site-header[data-theme="dark"].is-scrolled   .logo-light{
  opacity: 1;
 }
  .site-header[data-theme="dark"].is-scrolled   .logo-dark{
  opacity: 0;
 }
 .site-header[data-theme="dark"].is-scrolled .lang-switch{
   color: #fff;
 }
  .ab-help__text p {
    line-height: 2.2 !important;
  }
  .ab-page .site-header {
    display: flex;
  }

  .ab-side,
  .ab-cta {
    display: none;
  }

  .ab-pin {
    height: auto;
    overflow: visible;
  }

  .Pin-Wrapp,
  .ab-track {
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none !important;
  }

  .ab-panel {
    width: 100% !important;
    height: auto;
    min-height: 0;
  }

  .ab-hero {
    height: 62vh;
    margin-top: 0;
  }

  .ab-about {
    padding: 5rem 2rem;
    background: var(--bg-2);
  }

  .ab-about__en {
    left: 2rem;
    top: 2rem;
    font-size: 6.4rem;
  }

  .ab-about__dots {
    left: 0;
    width: 30rem;
    height: 18rem;
  }
  .ab-about__body p {
    font-size: 13px !important;
    line-height: 2.4rem !important;
  }
  .ab-about__body {
    width: 100%;
    margin-top: 8rem;
  }
.ab-acc__b p { 
    font: 400 13px / 2.9rem var(--fa);}
  .ab-history {
    flex-direction: column;
    align-items: stretch;
    padding: 5rem 2rem;
    gap: 2.4rem;
  }

  .ab-history__en {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 6.4rem;
            text-align: center;
  }

  .ab-history .ab-title--light {
    margin: 0;
  }

  .ab-team {
    padding: 5rem 2rem;
    justify-content: center;
  }

  .ab-team__in {
    width: 100%;
    padding: 0;
    margin: 0;
    max-height: none;
  }

  .ab-acc--team {
    overflow: visible;
  }

  .ab-up,
  .ab-down {
    display: none;
  }

  .ab-help {
    padding: 5rem 2rem 0;
  }

  .ab-help__en {
    position: static;
    font-size: 5.2rem;
    line-height: 1.2;
    white-space: normal;
  }

  .ab-help__text,
  .ab-acc--help,
  .ab-social {
    position: static;
    width: 100%;
  }

  .ab-help__text {
    margin: 3rem 0;
  }

  .ab-acc--help {
    margin-bottom: 3rem;
  }

  .ab-social {
    flex-direction: row;
    justify-content: center;
  }

  .ab-help__stack {
    position: relative;
    margin: auto;
    right: 0 !important;
    left: 0 !important;
  }

  .ab-acc__h {
    font-size: 14px;
  }
}


.ab-help__en {
  font-size: 10.4rem;
  line-height: 1.2;
}

.ab-about {
  flex-direction: column;
  justify-content: center;
}

.ab-about__en {
  position: static;
  width: 68.4rem;
  margin: 6rem 0 1.4rem;
  text-align: left;
  font-size: 9.6rem;
  direction: ltr;
}

.ab-about__body {
  margin-top: 0;
}

.ab-about__dots {
  left: 0;
  top: 0;
}

@media (max-width: 767.98px) {
  .ab-about {
    padding-top: 5rem !important;
  }
  .ab-about__en {
    width: 100%;
    font-size: 4.4rem;
    margin: 0 0 2rem;
  }

  .ab-help__en {
    font-size: 3.2rem;
  }
  .ab-help__text .ab-title {
    font-size: 15px;}
}

/* about panel: smaller image so the whole block fits short windows; dots sit behind the title only */
.ab-about__body img {
  max-height: 34vh;
  object-fit: cover;
  margin-bottom: 2rem;
}

.ab-about__en {
  margin-top: 0;
}

.ab-about {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ab-about__arrows {
  display: none;
}

/* hero video: plays by itself, no controls. While no video file is present the poster slowly drifts so the panel is never static */
.ab-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 55%;
  pointer-events: none;
  animation: abDrift 22s ease-in-out infinite alternate;
}

.ab-hero__video::-webkit-media-controls,
.ab-hero__video::-webkit-media-controls-enclosure,
.ab-hero__video::-webkit-media-controls-panel,
.ab-hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

@keyframes abDrift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.1) translate3d(-1.2%, -1%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero__video {
    animation: none;
  }
}

/* help accordion: icon on the right, title next to it, the switch at the far left (as in the design) */
.ab-switch {
  order: 0;
  margin-left: 0;
  margin-right: 0;
}

.ab-acc--help .ab-acc__h {
  justify-content: flex-start;
}

.ab-acc--help .ab-acc__h strong {
  flex: 1;
}

.ab-acc--help .ab-acc__b p {
  padding: 0 6rem 2.6rem 0;
}

/* history: the background image must stay out of the flex row (it was being treated as a column and squeezed the list out) */
.ab-history > .ab-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ab-history > .ab-acc--history {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ab-history .ab-acc__h {
  color: #fff;
}

.ab-history .ab-acc__i {
  border-bottom-color: #68728073;
}

/* the contact component is the one from the home page; it just needs the fixed layer above the track */
.ab-ui {
  z-index: 45;
}

.ab-up[hidden],
.ab-down[hidden] {
  display: none;
}

.ab-up.is-off,
.ab-down.is-off {
  opacity: 0.28;
  pointer-events: none;
}

.ab-up,
.ab-down {
  transition: opacity 0.25s;
}

/* opening an item must never change the size of the page: the track keeps exactly the window height */
.ab-pin,
.ab-panel {
  height: 100vh;
  max-height: 100vh;
}

.ab-history .ab-acc--history {
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.ab-history .ab-acc--history::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767.98px) {
  .ab-pin,
  .ab-panel {
    height: auto;
    max-height: none;
  }

  .ab-history .ab-acc--history {
    max-height: none;
    overflow: visible;
  }
}

/* team: no vertical scrolling by hand; the photo is sized so a few rows + one open photo always fit, and the arrows slide the list when there are more rows */
.ab-acc--team {
  overflow: hidden;
  overscroll-behavior: contain;
}

.ab-acc--team .ab-acc__b img {
  height: 400px;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* phones (Figma mobile): every team member is a card with the photo always visible */
@media (max-width: 767.98px) {
  .ab-acc--team .ab-acc__b {
    height: auto !important;
    overflow: visible;
  }

  .ab-acc--team .ab-acc__i {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    margin-bottom: 1.6rem;
  }

  .ab-acc--team .ab-acc__b {
    order: 1;
  }

  .ab-acc--team .ab-person {
    order: 2;
  }

  .ab-acc--team .ab-acc__b img {
    height: auto;
    aspect-ratio: 16 / 10;
    width: 100%;
    margin: 0;
  }

  .ab-acc--team .ab-plus {
    display: none;
  }

  .ab-acc--team .ab-person__t {
    pointer-events: none;
    padding: 1rem 0.4rem;
            line-height: 25px;
        font-size: 10px;
  }

  .ab-acc--team .ab-person,
  .ab-acc--team .ab-person__t,
  .ab-acc--team .ab-person__c a {
    color: var(--navy);
  }
}

.ab-hero__video {
  animation: none;
}

/* ---------- fixed track + spacer (desktop) ---------- */
@media (min-width: 768px) {
  .ab-acc--team {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .ab-pin {
    position: fixed;
    inset: 0;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
  }

  #abScroll {
    position: relative;
    z-index: 0;
  }

  .ab-spacer {
    width: 1px;
    height: 400vh;
  }

  .ab-page {
    overflow-x: hidden;
  }
}

@media (max-width: 767.98px) {
  .ab-spacer,
  #abScroll {
    display: none;
  }
}

/* hero arrows: three chevrons that run leftwards one after another */
.ab-hero__arrows {
  overflow: visible;
}

.ab-hero__arrows svg {
  overflow: visible;
}

.ab-hero__arrows path {
  animation: abChev 1.6s ease-in-out infinite;
}

.ab-hero__arrows path:nth-child(1) {
  animation-delay: 0s;
}

.ab-hero__arrows path:nth-child(2) {
  animation-delay: 0.18s;
}

.ab-hero__arrows path:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes abChev {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.35;
  }

  45% {
    transform: translateX(-0.9rem);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero__arrows path {
    animation: none;
  }
}

.ab-hint {
  position: fixed;
  right: 16.5rem;
  bottom: 2.2rem;
  z-index: 41;
  color: #fff;
  direction: ltr;
  transition:
    color 0.3s,
    opacity 0.4s;
  pointer-events: none;
}

.ab-hint.is-dark {
  color: var(--navy);
}

.ab-hint.is-gone {
  opacity: 0;
}

@media (max-width: 767.98px) {
  .ab-hint {
    display: none;
  }
}

/* the fixed scroll hint carries the chevron animation (it used to be tied to the hero's own arrows) */
.ab-hint,
.ab-hint svg {
  overflow: visible;
}

.ab-hint path {
  animation: abChev 1.6s ease-in-out infinite;
}

.ab-hint path:nth-child(1) {
  animation-delay: 0s;
}

.ab-hint path:nth-child(2) {
  animation-delay: 0.18s;
}

.ab-hint path:nth-child(3) {
  animation-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .ab-hint path {
    animation: none;
  }
}

/* phones: the team list is not a scroll container any more (it was swallowing vertical swipes that start on a photo) */
@media (max-width: 767.98px) {
  .ab-acc--team,
  .ab-history .ab-acc--history {
    overflow: visible !important;
    overscroll-behavior: auto !important;
    max-height: none !important;
    touch-action: pan-y;
  }

  .ab-panel,
  .ab-team__in,
  .ab-acc__b {
    touch-action: pan-y;
  }
}

/* phones: the hero video fills the whole screen (full width, full height) */
@media (max-width: 767.98px) {
  .ab-hero {
    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100svh;
    margin: 0;
  }

  .ab-hero__video {
    object-position: 38% 50%;
  }
}

.ct-info.ab-panel {
  width: 88.3rem;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: 7.2rem;
}

.ct-info__in {
  width: 77.2rem;
  direction: rtl;
}

.ct-title {
  margin: 0 0 2.6rem;
}

.ct-info__box {
  position: relative;
}

.ct-info__box::after {
  content: "";
  position: absolute;
  right: -4.9rem;
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--line);
}

.ct-lead {
  margin: 0 0 3.6rem;
  font: 400 15px/2.6rem var(--fa);
  color: #111;
  text-align: justify;
  line-height: 160%;
}

.ct-dl {
  margin: 0 0 2.2rem;
}

.ct-dl dt {
     margin: 0;
    font: 400 16px / 2.4rem var(--fa);
    color: #687280;
    line-height: 136%;
    margin-bottom: 7px;
    margin-top: 15px;
}

.ct-dl dd {
  margin: 0 0 0.8rem;
  font: 400 16px/3rem var(--fa);
  color: #000;
  line-height: 136%;
}

.ct-dl dd a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s;
}

.ct-dl dd a:hover {
  color: var(--orange);
}

.ct-tel a {
  display: block;
}

.ct-soc {
  display: flex;
  justify-content: flex-start;
  gap: 1.8rem;
  direction: rtl;
  margin: 0 0 2.6rem;
}

.ct-soc a {
  display: grid;
  place-items: center;

  transition: color 0.25s;
}

.ct-soc a:hover {
  color: var(--orange);
}

.ct-soc svg {
  width: 100%;
  height: 100%;
}

.ct-forms-t {
  margin: 0 0 3rem;
  font-size: 2rem;
  line-height: 3.2rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0 !important;
}

.ct-forms {
  display: flex;
  gap: 1.7rem;
  direction: rtl;
  margin-top: 2.6rem;
  width: 67.2rem;
}

.ct-fbtn,
.ct-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  height: 42px;
  padding: 0 1.4rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  color: var(--navy);
  font: 400 14px var(--fa);
  cursor: pointer;
  transition:
    border-color 0.25s,
    background 0.25s;
}

.ct-fbtn {
  flex: 1 1 0;
  justify-content: flex-start;
}

.ct-fbtn:hover,
.ct-submit:hover {
  border-color: var(--orange);
  background: #fff;
}

/* map */
.ct-map.ab-panel {
  width: 90rem;
  background: var(--navy);
}

.ct-map__t {
  position: absolute;
  left: 50%;
  top: 12.4rem;
  margin: 0;
  transform: translateX(-50%);
  font: 800 64px var(--en);
  color: #fff;
  white-space: nowrap;
  direction: ltr;
}

.ct-map__img {
  position: absolute;
  left: 50%;
  top: 24rem;
  width: 100rem;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

.ct-team.ab-team {
  width: 118rem;
  background: var(--bg-2);
  border: 0;
  justify-content: flex-start;
  padding-inline-start: 5.5rem;
}

.ct-team .ab-team__in {
  width: 113.5rem;
  max-width: none;
  margin: 0;
  padding: 0 2.1rem;
  max-height: none;
  height: 100%;
  justify-content: center;
  border-inline: 1px solid var(--line);
}

/* forms */
.ct-fp.ab-panel {
    background: var(--bg-2);
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
}

.ct-fp--1 {
  width: 103rem;
  padding-inline-start: 12.7rem;
}

.ct-fp--2 {
  width: 100rem;
  padding-inline-start: 9.4rem;
}

.ct-fp--3 {
  width: 110rem;
  padding-inline-start: 11.3rem;
}

.ct-fp__in {
    position: relative;
    width: 91%;
    direction: rtl;
    height: 75vh;
    overflow: auto;
    padding-left: 17px;
    padding-bottom: 20px;
}

.ct-fp__in::after {
  content: "";
  position: absolute;
  right: -8.3rem;
  top: 8.5rem;
  bottom: 8rem;
  border-right: 1px solid var(--line);
}

.ct-fp__ic {
  display: block;
  width: 3rem;
  height: 2.4rem;
  margin: 0 0 4.4rem;
}

.ct-fp__t {
  margin: 0 0 2.8rem;
  font-size: 24px;
  line-height: 4rem;
  padding-bottom: 1.2rem;
}

.ct-fp__s {
  margin: 0 0 3rem;
  font: 400 13px/2.6rem var(--fa);
  color: #687280;
}

.ct-grid {
  display: grid;
  gap: 1.8rem 2.4rem;
  margin-bottom: 1.8rem;
}

.ct-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.ct-grid--6 {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem 2.4rem;
}

.ct-grid--6 .sp3 {
  grid-column: span 2;
}

.ct-grid--6 .sp1 {
  grid-column: span 1;
}

.ct-grid--6 .sp6 {
  grid-column: 1 / -1;
}

.ct-f {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ct-f--wide {
  grid-column: 1 / -1;
}

.ct-f label,
.ct-rate legend {
  font: 700 13px/1.8rem var(--fa);
  color: var(--navy);
  padding: 0;
  line-height: 2;
}

.ct-req {
  color: var(--orange);
  font-style: normal;
  margin-inline-start: 0.4rem;
}

.ct-f input[type="text"],
.ct-f input[type="tel"],
.ct-f input[type="email"],
.ct-f select,
.ct-f textarea {
  width: 100%;
  height: 4.5rem;
  padding: 0 1.5rem;
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  color: var(--navy);
  font: 400 14px/2rem var(--fa);
  text-align: right;
  outline: none;
  transition: border-color 0.25s;
  user-select: text;
  -webkit-user-select: text;
  appearance: none;
}

.ct-f textarea {
  height: 10rem;
  padding: 1.4rem 1.5rem;
  resize: none;
  text-align: right;
}

.ct-fp--1 .ct-f textarea {
  height: 19rem;
}

.ct-fp--2 .ct-f textarea {
  height: 18.5rem;
}

.ct-f input::placeholder,
.ct-f textarea::placeholder {
  color: #687280;
  opacity: 1;
}

.ct-f input:focus,
.ct-f select:focus,
.ct-f textarea:focus {
  border-color: var(--orange);
}

.ct-f .is-bad {
  border-color: #e5484d;
}

.ct-sel {
  position: relative;
  display: block;
}

.ct-sel select {
  padding-inline-start: 4rem;
  cursor: pointer;
}

.ct-sel::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.6rem;
  border: solid #687280;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.ct-sup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.8rem;
  font: 400 13px/2rem var(--fa);
  color: var(--navy);
}

.ct-sup b {
  font-weight: 400;
}

.ct-submit {
  width: 100%;
  color: #687280;
}

.ct-note {
  min-height: 2rem;
  margin: 1rem 0 0;
  font: 400 1.3rem/2rem var(--fa);
  color: var(--navy);
}

.ct-rate {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 0.6rem;
  align-content: flex-start;
}

.ct-rate legend {
  width: 100%;
  margin-bottom: 0.4rem;
  float: none;
}

.ct-rate label {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-width: 67px;
  height: 4.2rem;
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  color: #687280;
  font: 400 13px/1 var(--fa);
  cursor: pointer;
}

.ct-rate input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ct-rate span::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-inline-end: 0.8rem;
  border: 1.5px solid #687280;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2.4px #f9fafb;
}

.ct-rate label:has(input:checked) {
  border-color: var(--orange);
  color: var(--orange);
}

.ct-rate label:has(input:checked) span::before {
  background: var(--orange);
  border-color: var(--orange);
}

.ct-stars {
  margin: 3rem 0 2.2rem;
}

.ct-stars p {
  margin: 0 0 1.4rem;
  font: 700 13px/1.8rem var(--fa);
  color: var(--navy);
}

.ct-stars div {
  display: flex;
  gap: 1.3rem;
  direction: rtl;
}

.ct-stars button {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.ct-stars svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  transition: fill 0.2s;
}

.ct-stars button.is-on svg {
  fill: rgba(255, 122, 0, 0.25);
}

.ct-stars button:not(.is-on) svg path {
  stroke: #d1d5db;
}

.ct-priv {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 3rem;
  font: 400 13px/1.8rem var(--fa);
  color: #687280;
}

.ct-fp--3 .ct-fp__ic {
  margin-bottom: 4.2rem;
}

.ct-fp__soc {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

.ct-fp__soc img,
.ct-fp__soc svg {
  display: block;
}

.ct-fp__ar {
  width: 1.8rem;
  height: 1.4rem;
  margin-bottom: 1.2rem;
}

.ct-close {
  display: none;
}

/* phones: the map hero first, then the details; the team list is left out as in the phone design; the forms open as full-screen sheets from the "forms" buttons */
@media (max-width: 767.98px) {
  .ct-map.ab-panel {
    order: -1;
    width: 100% !important;
    height: 55rem !important;
    min-height: 0;
  }

  .ct-map__t {
    top: 15.8rem;
    font-size: 3.2rem;
    line-height: 4.8rem;
    color: var(--orange);
  }

  .ct-map__img {
    top: 24.3rem;
    width: 37rem;
  }

  .ct-info.ab-panel {
    display: block;
    padding: 5.4rem 2rem 4.4rem;
  }

  .ct-info__in {
    width: 100%;
  }

  .ct-info__box::after {
    display: none;
  }

  .ct-lead {
font-size: 14px;
        line-height: 3.4rem;
        text-align: right;
        margin-bottom: 4rem;
  }

  .ct-dl dt {
   
    line-height: 3.4rem;
  }

  .ct-dl dd {
 
    line-height: 3.4rem;
    margin-bottom: 0.4rem;
  }

  .ct-soc {
    margin: 5rem 0 2rem;
    gap: 2.2rem;
  }

  .ct-forms-t {
    margin-bottom: 2rem;
  }

  .ct-forms {
    flex-direction: column;
    width: 100%;
    gap: 1.8rem;
    margin-top: 2rem;
  }

  .ct-fbtn {
    flex: none;
    width: 100%;
    height: 4rem;
    font-size: 1.6rem;
    color: #687280;
  }

  .ct-team {
    display: none !important;
  }

  .ct-fp.ab-panel {
    display: none;
  }

  .ct-fp.ab-panel.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 400;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    overflow-y: auto;
    padding: 7rem 2rem 4rem;
  }

  .ct-fp__in {
    width: 100%;
    height: auto;
  }

  .ct-fp__in::after {
    display: none;
  }

  .ct-fp__soc {
    display: none;
  }

  .ct-grid--2,
  .ct-grid--6 {
    grid-template-columns: 1fr;
  }

  .ct-grid--6 .sp3,
  .ct-grid--6 .sp1,
  .ct-grid--6 .sp6 {
    grid-column: 1 / -1;
  }

  .ct-close {
    display: grid;
    place-items: center;
    position: fixed;
    top: 1.6rem;
    left: 1.6rem;
    z-index: 2;
    width: 4rem;
    height: 4rem;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--navy);
    cursor: pointer;
  }

  .ct-close svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .ct-fp__ic {
    margin-bottom: 2.4rem;
  }
}

/* contact: polish after the first comparison with the design */
.ct-lead {
  text-align: right;
}

.ct-tel a {
  text-align: right;
  direction: ltr;
  unicode-bidi: plaintext;
}

.ct-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ct-fp__soc img {
  filter: brightness(0) invert(1);
}

@media (max-width: 767.98px) {
  .ct-map__img {
          width: 100%;
        top: 0;
        transform: unset;
  }

  .ct-tel {
    align-items: flex-start;
  }
}

/* team rows: + / - at the right edge, then the name, the three contact icons at the left (as in the design) */
.ab-team .ab-person__t .ab-plus {
  order: -1;
}

.ab-team .ab-person__c {
  order: 2;
  padding-left: 0;
}

.ab-team .ab-person__t {
  justify-content: flex-start;
  gap: 1.6rem;
}

/* contact forms = popups, centred in the window (top / bottom / left / right) on desktop and phones */
.ct-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(10, 29, 61, 0.62);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear 0.35s;
}

.ct-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease);
}

.ct-card.ct-fp {
  position: relative;
  width: min(80rem, 100%);
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  padding: 4.4rem 5rem 4rem;
  background: var(--bg-2);
  border-radius: 1.2rem;
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.35);
  transform: translateY(2rem) scale(0.98);
  transition: transform 0.4s var(--ease);
  scrollbar-width: thin;
}

.ct-modal.is-open .ct-card {
  transform: none;
}

.ct-card .ct-fp__in {
  width: 100%;
}

.ct-card .ct-fp__in::after {
  display: none;
}

.ct-card .ct-fp__ic {
  margin-bottom: 2.4rem;
}

.ct-card .ct-fp__t {
  margin-bottom: 2rem;
}

.ct-card .ct-fp__s {
  margin-bottom: 2.4rem;
}

.ct-card .ct-f textarea {
  height: 12rem;
}

.ct-card.ct-fp--3 .ct-f textarea {
  height: 8rem;
}

.ct-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  transition:
    border-color 0.25s,
    color 0.25s;
}

.ct-close:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.ct-close svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (max-width: 767.98px) {
  .ct-modal {
    padding: 1.2rem;
  }

  .ct-card.ct-fp {
    padding: 6rem 2rem 3rem;
    max-height: calc(100dvh - 2.4rem);
  }

  .ct-fp.ab-panel,
  .ct-fp.ab-panel.is-open {
    display: none;
  }
}

/* Persian (Jalali) date picker */
.jcal {
  position: fixed;
  z-index: 700;
  width: 29rem;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  box-shadow: 0 2rem 6rem rgba(10, 29, 61, 0.28);
  font-family: var(--fa);
  color: var(--navy);
  direction: rtl;
  user-select: none;
  -webkit-user-select: none;
}

.jcal[hidden] {
  display: none;
}

.jcal__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.jcal__s {
  display: flex;
  gap: 0.6rem;
  flex: 1;
  justify-content: center;
}

.jcal select {
  height: 3.2rem;
  padding: 0 0.8rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--navy);
  font: 700 1.3rem/1 var(--fa);
  cursor: pointer;
  outline: none;
}

.jcal select:focus {
  border-color: var(--orange);
}

.jcal__n {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--navy);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
}

.jcal__n:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.jcal__w,
.jcal__g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  text-align: center;
}

.jcal__w b {
  font: 700 1.2rem/2.8rem var(--fa);
  color: #687280;
}

.jcal__g i {
  display: block;
}

.jcal__g .d {
  height: 3.6rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  color: var(--navy);
  font: 400 1.4rem/1 var(--fa);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.jcal__g .d:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--line);
}

.jcal__g .d.is-today {
  border-color: var(--orange);
}

.jcal__g .d.is-sel {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.jcal__g .d:disabled {
  color: #c3c7ce;
  cursor: default;
}

.jcal__f {
  margin-top: 1rem;
  text-align: left;
}

.jcal__f button {
  padding: 0.4rem 0.8rem;
  background: none;
  border: 0;
  color: #687280;
  font: 400 1.2rem/1 var(--fa);
  cursor: pointer;
}

.jcal__f button:hover {
  color: var(--orange);
}

@media (max-width: 767.98px) {
  .jcal {
    width: min(32rem, calc(100vw - 1.6rem));
  }
}

.jcal__g .d.is-void {
  visibility: hidden;
  pointer-events: none;
}

/* inner pages, desktop: the whole story scales with the window HEIGHT (design 1600 x 900 = 90rem tall), so every panel keeps its design proportions at any desktop size;
   the first screen is always filled edge to edge (the About video is full width, on Contact the map takes the spare width) */
/* from 768px up (where the desktop layout of these pages starts), not only from 1000: below 1000 the site-wide rule gives a fixed 15px rem, which made every 100rem+ panel 1500px+ wide */
@media (min-width: 768px) {
  html:has(body.ab-page) {
    font-size: min(calc(100vh / 90), calc(100vw / 160));
  }
}

@media (min-width: 768px) {
  .ab-panel.ab-hero {
    width: max(149.5rem, calc(100vw - 10.5rem));
  }

  .ct-map.ab-panel {
    width: max(90rem, calc(100vw - 10.5rem - 68.3rem));
  }
}
.ct-priv svg {
  width: 22px;
}
/* the home page's scroll arrow on the hero: phones only (on desktop the fixed sideways hint is used) */
.ab-hero .scroll-hint {
  display: none;
  z-index: 3;
}
@media (max-width: 767.98px) {
  .ab-hero {
    position: relative;
  }
  .ab-hero .scroll-hint {
    display: grid;
  }
}

/* the home page's scroll arrow on the contact page's first screen: phones only */
.ct-map .scroll-hint {
  display: none;
  z-index: 3;
}
@media (max-width: 767.98px) {
  .ct-map {
    position: relative;
  }
  .ct-map .scroll-hint {
    display: grid;
  }
}

.ab-info {
  display: none;
}
@media (min-width: 768px) {
  .ab-info {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 46;
    width: 5.7rem;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    direction: rtl;
    transition: width 0.55s var(--ease);
  }
  .ab-info:hover,
  .ab-info:has(:focus-visible),
  .ab-info.is-open {
    width: 35.8rem;
  }
  .ab-info__in {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4.4rem;
    padding: 12rem 1.2rem 0 1.6rem;
  }
  .ab-info__t {
    align-self: flex-start;
    margin-right: 0.1rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2rem;
    color: rgba(255, 255, 255, 0.8);
    transition:
      transform 0.45s var(--ease),
      color 0.3s;
  }

  .ab-info:hover .ab-info__t,
  .ab-info.is-open .ab-info__t {
    transform: scaleX(-1);
  }
  .ab-info__r {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 2.4rem;
    color: #fff;
    font-size: 13px;
    line-height: 22px;
  }
  .ab-info__r i {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    background: #fff;
    -webkit-mask: var(--m) center / contain no-repeat;
    mask: var(--m) center / contain no-repeat;
  }
  .ab-info__r span {
    white-space: normal;
    opacity: 0;
    transform: translateX(1rem);
    transition:
      opacity 0.35s 0.1s,
      transform 0.45s 0.1s var(--ease);
  }
  .ab-info:hover .ab-info__r span,
  .ab-info:has(:focus-visible) .ab-info__r span,
  .ab-info.is-open .ab-info__r span {
    opacity: 1;
    transform: none;
  }
  a.ab-info__r:hover span {
    color: var(--orange);
  }
  .ab-info__r span[dir="ltr"] {
    text-align: right;
  }
}

/* outline / chevron buttons: on hover they turn navy with orange chevrons */
.ct-fbtn,
.ct-submit,
.bs-contact {
  transition:
    background 0.35s var(--ease),
    border-color 0.35s,
    color 0.35s;
}
.ct-fbtn:hover,
.ct-submit:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.ct-fbtn:hover .ct-chev rect {
  fill: transparent;
}
.ct-fbtn:hover .ct-chev path,
.ct-submit:hover svg path {
  fill: var(--orange);
  stroke: none;
}

.ab-ui > .hero__support,
.ab-ui > .hero__fab,
.ab-ui > .fab-menu {
  zoom: var(--ui-k, 1);
}

/* contact drawer icons: the design's own SVGs, drawn white on the navy bar */
@media (min-width: 768px) {
  .ab-info__r .ab-info__svg {
    flex: none;
    width: 24px;
    height: 24px;
  }
  .ab-info__svg path[fill]:not([fill="none"]) {
    fill: #fff;
  }
  .ab-info__svg path[stroke],
  .ab-info__svg circle[stroke] {
    stroke: #fff;
  }
  .ab-info__svg rect[fill]:not([fill="none"]) {
    fill: #fff;
  }
}
@media (min-width: 768px) {
  .ab-info__r:first-of-type .ab-info__svg path:nth-child(2) {
    fill: var(--navy);
    stroke: var(--navy);
  }
}

/* date picker: 12px text everywhere */
.jcal select,
.jcal__w b,
.jcal__g .d,
.jcal__f button,
.jcal__s {
  font-size: 12px;
}

/* contact drawer: the design's rhythm (icons 21px, rows 63px apart, arrow on the icon axis, 13px text) */
@media (min-width: 768px) {
  .ab-info__in {
    gap: 4.2rem;
    padding: 0 1.3rem 0 0;
    justify-content: center;
    align-items: stretch;
  }
  .ab-info__t {
    align-self: flex-start;
    width: 21px;
    height: 21px;
    margin: 0;
    padding: 0;
  }

  .ab-info__r {
    gap: 1.2rem;
    font-size: 13px;
    line-height: 28px;
    align-items: center;
  }

  .ab-info__r span {
    padding-left: 1.2rem;
  }
}

/* form fields: a real line box (the fixed 2rem line was clipping Persian text in selects / inputs on smaller windows), submit chip on the right of its text */
.ct-f input[type="text"],
.ct-f input[type="tel"],
.ct-f input[type="email"],
.ct-f select {
  line-height: normal;
  padding-block: 0;
}
.ct-f textarea {
  line-height: 2.2;
}
.ct-submit,
.ct-fbtn {
  direction: rtl;
}

@media (min-width: 1000px) {
  html.menu-rem:has(body.ab-page) {
    font-size: min(calc(100vw / 160), calc(100vh / 70), 10px) !important;
  }
}

/* selects look exactly like the text fields (same border, padding, weight and grey value text) */
.ct-f select,
.ct-sel select {
  box-sizing: border-box;
  height: 4.5rem;
  padding-inline: 1.5rem 4rem;
  background-color: #f9fafb;
  border: 1px solid var(--line);
  color: #687280;
  font-weight: 400;
}
.ct-f select:focus,
.ct-sel select:focus {
  border-color: var(--orange);
}

/* the call icon next to the support line stays 14px */
.ct-sup svg {
  flex: none;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px;
  max-height: 14px;
}

/* phone: help accordion sizes from the QC (title 15, text 15; the intro text stays 17) */
@media (max-width: 1400px) {
.dis-non-i{ display: none !important;}
}
@media (max-width: 900px) {
  .ab-acc--help .ab-acc__h,
  .ab-acc--help .ab-acc__h strong {
    font-size: 15px;
  }
  .ab-acc--help .ab-acc__b p {
    font-size: 13px;
  }
  .ab-help__text p {
    font-size: 13px;
  }
  .ab-about__body img { 
    margin-top: 30px;
}
}

/* the contact drawer is not a fixed bar any more: it is the LAST panel of the sideways track (end of the page). It stays collapsed (a thin bar) and opens on hover, as before.
   The track is laid out right-to-left, so on open the negative margin keeps its left edge where it is and the extra width grows over the previous panel
   (the width of the whole track does not change). The credit bar at its bottom shows with the opened drawer. */
@media (min-width: 768px) {
  .ab-info.ab-info--end {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: 46;
    flex: none;
    width: 5.7rem;
    height: 100vh;
    overflow: hidden;
    transition:
      width 0.55s var(--ease),
      margin 0.55s var(--ease);
  }
  .ab-info.ab-info--end:hover,
  .ab-info.ab-info--end:has(:focus-visible),
  .ab-info.ab-info--end.is-open {
    width: 35.8rem;
    margin-inline-start: -30.1rem;
  }
  .ab-info--end .site-footer__bar {
    position: absolute;
    right: 0;
    left: auto;
    bottom: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.35s 0.1s;
    padding: 0 10px;
    display: flex;
    flex-wrap: nowrap;
    width: 35.8rem;
  }
  .ab-info.ab-info--end:hover .site-footer__bar,
  .ab-info.ab-info--end:has(:focus-visible) .site-footer__bar,
  .ab-info.ab-info--end.is-open .site-footer__bar {
    opacity: 1;
  }
}

/* while the drawer is open it must be above the orange contact button: the track is its own stacking context, so the fixed button layer steps down for that moment
   (z-index 0 and earlier in the page than the track = painted under it) */
@media (min-width: 768px) {
  body:has(.ab-info--end:hover, .ab-info--end.is-open, .ab-info--end :focus-visible) .ab-ui {
    z-index: 0;
  }
}

/* equal icon spacing: every row is exactly as tall as its icon (the two-line address no longer stretches the first row);
   the text floats beside the icon, centred on it, so it can be any length */
@media (min-width: 768px) {
  .ab-info__r {
    position: relative;
    height: 24px;
    min-height: 24px;
  }
  .ab-info__r span {
    position: absolute;
    right: calc(24px + 1.2rem);
    top: 50%;
    width: calc(32.8rem - 1.2rem - 1.6rem - 24px - 1.2rem);
    transform: translate(1rem, -50%);
  }
  .ab-info:hover .ab-info__r span,
  .ab-info:has(:focus-visible) .ab-info__r span,
  .ab-info.is-open .ab-info__r span {
    transform: translateY(-50%);
  }
  .ab-info.ab-info--end:hover .ab-info__r span,
  .ab-info.ab-info--end.is-open .ab-info__r span {
    transform: translateY(-50%);
    line-height: 1.5;
  }
}

/* tablet (touch devices, or windows 768-1023px): no hover opening. The drawer opens ONLY with the .is-open class that a tap toggles,
   so a sticky touch-hover can not leave it half open. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ab-info.ab-info--end:hover:not(.is-open),
  .ab-info.ab-info--end:has(:focus-visible):not(.is-open) {
    width: 5.7rem;
    margin-inline-start: 0;
  }
  .ab-info.ab-info--end:hover:not(.is-open) .ab-info__t {
    transform: none;
  }
  .ab-info.ab-info--end:hover:not(.is-open) .ab-info__r span,
  .ab-info.ab-info--end:has(:focus-visible):not(.is-open) .ab-info__r span {
    opacity: 0;
    transform: translate(1rem, -50%);
  }
  .ab-info.ab-info--end:hover:not(.is-open) .site-footer__bar,
  .ab-info.ab-info--end:has(:focus-visible):not(.is-open) .site-footer__bar {
    opacity: 0;
  }
  .ab-info.ab-info--end {
    cursor: pointer;
  }
  body:has(.ab-info--end:hover:not(.is-open)) .ab-ui {
    z-index: 45;
  }
}