/*
 * Glilot site — about template styles.
 * Figma toMRddnZWZyDa6LLFhHAoF, page 16587:322.
 * Desktop frame 16587:645 (1920): px / 1920 * 100vw.
 * Mobile frame 16665:711 (390): px / 390 * 100vw, inside @media (max-width: 767px).
 * Line heights are Figma's rendered line boxes (font-size x line-height %, rounded
 * to whole px by Figma; confirmed by each text node's measured height).
 */

/* Inline colored-bold treatment (shared class; see validation/about.md request). */
.glilot-about .lp-text-highlight {
  color: var(--glilot-text-accent); /* #537b88, measured 16587:706 */
  font-weight: 700;
}

/* ---------- Hero: desktop 16587:646 ---------- */
.glilot-about-hero {
  position: relative;
  width: 100vw;
  height: 47.916667vw; /* 920 */
  overflow: hidden;
  background: #fff;
  color: var(--glilot-dark);
}
.glilot-about-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;          /* 1920, 16587:647 */
  height: 47.916667vw;   /* 920 */
  overflow: hidden;
}
/* 16587:648 CROP t[[1,0,0],[0,0.851399,0.000146]]: 1920 x 1080.57 at y -0.16 */
.glilot-about-hero__background {
  position: absolute;
  top: -0.008212vw;
  left: 0;
  width: 100vw;
  height: 56.279919vw;
  max-width: none;
}
.glilot-about-hero__copy {
  position: absolute;
  top: 13.854167vw;      /* 266 */
  left: 58.854167vw;     /* 1130 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* ca:MAX, physical right */
  width: 36.253542vw;    /* 696.07 */
  gap: 1.40625vw;        /* 27 */
  direction: ltr;
  color: var(--glilot-dark);
}
.glilot-about-hero__copy h1, .glilot-about-hero__copy [data-h="h1"] {
  width: 36.253542vw;
  margin: 0;
  font-size: 5.729167vw; /* 110 */
  font-weight: 700;
  line-height: 5.677083vw; /* 109 (110 x 99%) */
  text-align: right;
}
.glilot-about-hero__copy p {
  width: 26.25vw;        /* 504 */
  margin: 0;
  font-size: 0.9375vw;   /* 18 */
  font-weight: 400;
  line-height: 1.197917vw; /* 23 (18 x 130%) */
  text-align: right;
}
.glilot-about-hero__mobile {
  display: none;
}

/* ---------- Photo + panel sections: desktop 16587:701 / 709 / 717 ---------- */
.glilot-about-feature {
  position: relative;
  width: 100vw;
  height: 47.916667vw;   /* 920 */
  overflow: hidden;
  background: #fff;
  color: var(--glilot-dark);
}
.glilot-about-feature__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 47.916667vw;
  overflow: hidden;
}
.glilot-about-feature__photo {
  position: absolute;
  max-width: none;
}
/* 16587:702: node mirrored (rt [-1,0,1920]), FILL 1248x702 = cover */
.glilot-about-people .glilot-about-feature__photo {
  top: 0;
  left: 0;
  width: 100vw;
  height: 47.916667vw;
  object-fit: cover;
  transform: scaleX(-1);
}
/* 16587:710: node mirrored x CROP mirrored = upright; 2376.37 x 1338.12 at -108.09, -45.12 */
.glilot-about-standard .glilot-about-feature__photo {
  top: -2.349913vw;
  left: -5.629486vw;
  width: 123.769128vw;
  height: 69.693665vw;
}
/* 16587:718: node mirrored x CROP mirrored = upright; 1951.39 x 1098.82 at -22.70, -20 */
.glilot-about-experience .glilot-about-feature__photo {
  top: -1.041667vw;
  left: -1.182094vw;
  width: 101.63502vw;
  height: 57.230078vw;
}
/* Frame 41 (16587:703/711/719): 1097, 217, 823 x 485; AL vertical gap 30,
   pad 44/96, pa:CENTER ca:MAX; radius TL/BL 100; #fff @ 0.9 */
.glilot-about-feature__panel {
  position: absolute;
  top: 11.302083vw;
  left: 57.135417vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 42.864583vw;
  height: 25.260417vw;
  gap: 1.5625vw;
  padding: 2.291667vw 5vw;
  border-radius: var(--glilot-radius-panel) 0 0 var(--glilot-radius-panel);
  background: rgba(255, 255, 255, 0.9);
  direction: ltr;
}
.glilot-about-feature__copy {
  display: contents; /* desktop: heading and paragraphs are direct panel children */
}
.glilot-about-feature h2, .glilot-about-feature [data-h="h2"] {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 31.5625vw;      /* 606 */
  margin: 0;
  color: var(--glilot-dark);
  font-size: 3.645833vw; /* 70 */
  font-weight: 500;
  line-height: 1;
  text-align: right;
  direction: rtl;
}
.glilot-about-feature__line {
  display: block;
  white-space: nowrap;
}
.glilot-about-people h2 .lp-text-highlight, .glilot-about-people [data-h="h2"] .lp-text-highlight {
  font-size: 5.833333vw; /* 112, 16587:706 */
}
.glilot-about-feature p {
  flex: none;
  width: 32.864583vw;    /* 631 */
  margin: 0;
  color: var(--glilot-dark);
  font-size: 0.9375vw;   /* 18 */
  font-weight: 400;
  line-height: 1.197917vw; /* 23 */
  text-align: right;
}
.glilot-about-experience .glilot-about-feature__closing {
  width: 29.583333vw;    /* 568, 16587:724 */
}

/* ---------- Values: desktop 16587:725 ---------- */
.glilot-about-values {
  position: relative;
  width: 100vw;
  height: 43.958333vw;   /* 844 */
  overflow: hidden;
  background: #fff;
  color: var(--glilot-dark);
}
/* Group 44 (16587:735): 1131 at -371, -126, opacity 0.4 baked into the SVG */
.glilot-about-values__symbol,
.glilot-about-values__symbol img {
  position: absolute;
  top: -6.5625vw;
  left: -19.322917vw;
  display: block;
  width: 58.90625vw;
  height: 58.90625vw;
}
.glilot-about-values__symbol img {
  top: 0;
  left: 0;
}
/* Frame 565 (16587:726): 843, 171, 981 x 541; AL vertical gap 38, ca:MAX */
.glilot-about-values__content {
  position: absolute;
  z-index: 1;
  top: 8.90625vw;
  left: 43.90625vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 51.09375vw;
  height: 28.177083vw;
  gap: 1.979167vw;
  direction: ltr;
}
.glilot-about-values__content h2, .glilot-about-values__content [data-h="h2"] {
  flex: none;
  width: 51.09375vw;     /* 981 */
  margin: 0;
  color: var(--glilot-dark);
  font-size: 3.645833vw; /* 70 */
  font-weight: 500;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
/* Frame 564 (16587:728): 981 x 467, wrap, gap 54/54, pa:MAX, ca:CENTER.
   Children stay in Figma's physical LTR order (first item = left card). */
.glilot-about-values__grid {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  width: 51.09375vw;
  height: 24.322917vw;
  gap: 2.8125vw;
}
/* Desktop and mobile carry different value copy (desktop revised 2026-09-29). */
.glilot-about-values__item--mobile { display: none !important; }
@media (max-width: 767px) {
  .glilot-about-values__item--desktop { display: none !important; }
  .glilot-about-values__item--mobile { display: flex !important; }
}
/* VALUE instance (16587:729-733): 290 x 162, pad 20, gap 10, r28, #fafafa, clip */
.glilot-about-values__item {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end; /* Frame 563 ca:MAX: title hugs to the right edge */
  width: 15.104167vw;
  height: 8.4375vw;
  gap: 0.520833vw;
  padding: 1.041667vw;
  overflow: hidden;
  border-radius: var(--glilot-radius-card);
  background: var(--glilot-surface);
  direction: ltr;
}
.glilot-about-values__item h3, .glilot-about-values__item [data-h="h3"] {
  flex: none;
  margin: 0;
  color: var(--glilot-accent); /* #044c5f */
  font-size: 1.458333vw; /* 28 */
  font-weight: 700;
  line-height: 1.875vw;  /* 36 */
  text-align: right;
  white-space: nowrap;
  direction: rtl;
}
.glilot-about-values__item p {
  flex: none;
  /* Figma box 250 (I16587:731;16328:3184). +1px: Chrome sums Polin 18px advances
     wider than Figma (line 1 of card 3 measures 250.89), which would add a line. */
  width: 13.072917vw;    /* 251 */
  margin: 0;
  color: var(--glilot-dark);
  font-size: 0.9375vw;   /* 18 */
  font-weight: 400;
  line-height: 1.197917vw; /* 23 */
  text-align: right;
  direction: rtl;
}

/* =================== Mobile (frame 16665:711, 390) =================== */
@media (max-width: 767px) {
  /* ---------- Hero 16665:712: 390 x 920 ---------- */
  .glilot-about-hero {
    height: 235.897436vw;
  }
  /* 16665:713: 390 x 761, clip; image + white linear gradient */
  .glilot-about-hero__media {
    width: 100vw;
    height: 195.128205vw;
  }
  /* CROP t[[0.238578,0,0.380711],[0,0.827174,0]]: 1634.69 x 920 at -622.34, 0 */
  .glilot-about-hero__background {
    top: 0;
    left: -159.575194vw;
    width: 419.150381vw;
    height: 235.897443vw;
  }
  /* Gradient stop 0 (white, alpha 0) at y 300.68, stop 1 (white) at y 691.50 */
  .glilot-about-hero__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 77.096853vw, #fff 177.307695vw);
    content: "";
  }
  .glilot-about-hero__copy {
    display: none;
  }
  /* 16712:346: 23, 515, 344.46 wide; vertical, ca:CENTER */
  .glilot-about-hero__mobile {
    position: absolute;
    top: 132.051282vw;
    left: 5.897436vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88.323846vw;
    color: var(--glilot-dark);
    direction: ltr;
  }
  .glilot-about-hero__mobile > * {
    flex: none;
    margin: 0;
    text-align: center;
  }
  /* 16665:734: 342.41 x 26; Medium 26.18 / 99% (26px box), ls 5.5% */
  .glilot-about-hero__eyebrow {
    width: 87.797179vw;
    font-size: 6.713077vw;
    font-weight: 500;
    line-height: 6.666667vw;
    letter-spacing: 0.055em;
  }
  /* 16665:735: 344.46 x 92 at +2.05; Bold 46.2 / 99% (46px lines), ls 4% */
  .glilot-about-hero__mobile-title {
    width: 88.323846vw;
    margin-top: 0.526521vw;
    font-size: 11.846667vw;
    font-weight: 700;
    line-height: 11.794872vw;
    letter-spacing: 0.04em;
  }
  /* 16665:737: 338 wide at +27; Regular 14 / 130% (18px lines), ls 3% */
  /* width 338 + one trailing tracking (0.42): Chrome counts the last letter-spacing
     in the line fit, Figma does not; without it line 2 (338.05px) wraps early. */
  .glilot-about-hero__mobile-body {
    width: 86.774359vw;
    margin-top: 6.923077vw;
    font-size: 3.589744vw;
    font-weight: 400;
    line-height: 4.615385vw;
    letter-spacing: 0.03em;
  }
  /* 16665:728: 244 x 34 at +24; pill, 0.64 #022d38 stroke, pad 2.56/12.79, gap 24.3, centered */
  .glilot-about-hero__cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 62.564103vw;
    margin-top: 6.153846vw;
    gap: 6.230463vw;
    padding: 0.655838vw 3.279191vw;
    border: 0.16396vw solid var(--glilot-dark);
    color: var(--glilot-dark);
    direction: ltr;
    text-decoration: none;
  }
  /* 16665:729: 12.4 box; SVG 13.455 x 13.3045 at inset -3.21% 0 -4.08% -8.51% */
  .glilot-about-hero__cta-icon {
    position: relative;
    flex: none;
    width: 3.179487vw;
    height: 3.179487vw;
  }
  .glilot-about-hero__cta-icon img {
    position: absolute;
    top: -0.102062vw;
    left: -0.270574vw;
    display: block;
    width: 3.45vw;
    height: 3.41141vw;
    max-width: none;
  }
  /* 16665:731: 176 x 26; Medium 18 / 118%, ls 5%, right aligned */
  .glilot-about-hero__cta-label {
    flex: none;
    width: 45.128205vw;
    height: 6.666667vw;
    font-size: 4.615385vw;
    font-weight: 500;
    line-height: 6.666667vw;
    letter-spacing: 0.05em;
    text-align: right;
    white-space: nowrap;
  }

  /* ---------- Photo + panel sections: 16665:747 / 807 / 798 (390 x 812) ---------- */
  .glilot-about-feature {
    height: 208.205128vw;
  }
  .glilot-about-feature__media {
    top: 0;
    height: 124.358974vw; /* 485 (rect height); section clips the rest */
  }
  /* 16665:748: rect -281, -27, 1093 x 524, mirrored, FILL = cover */
  .glilot-about-people .glilot-about-feature__media {
    top: -6.923077vw;
    left: -72.051282vw;
    width: 280.25641vw;
    height: 134.358974vw;
  }
  .glilot-about-people .glilot-about-feature__photo {
    width: 280.25641vw;
    height: 134.358974vw;
  }
  /* 16665:808: rect -77, 0, 1012 x 485, mirrored; image 1252.54 x 705.42 at -56.97, -23.79 in rect */
  .glilot-about-standard .glilot-about-feature__media {
    left: -19.74359vw;
    width: 259.487179vw;
  }
  .glilot-about-standard .glilot-about-feature__photo {
    top: -6.09877vw;
    left: -14.607795vw;
    width: 321.16502vw;
    height: 180.877203vw;
  }
  /* 16665:799: rect -533, 0, 1012 x 485, NOT mirrored, so CROP mirror shows:
     image 1028.55 x 579.27, its u=1 edge at -4.58 in rect, flipped */
  .glilot-about-experience .glilot-about-feature__media {
    left: -136.666667vw;
    width: 259.487179vw;
  }
  .glilot-about-experience .glilot-about-feature__photo {
    top: -2.703456vw;
    left: -1.175286vw;
    width: 263.729848vw;
    height: 148.530235vw;
    transform: scaleX(-1);
  }
  /* 16665:750/810/801: 0, 356, 390 x 456; pad 20/19/41/19; r TL 100; #fff; pa:MIN ca:MAX */
  .glilot-about-feature__panel {
    top: 91.282051vw;
    left: 0;
    justify-content: flex-start;
    width: 100vw;
    height: 116.923077vw;
    gap: 7.692308vw;
    padding: 5.128205vw 4.871795vw 10.512821vw;
    border-radius: var(--glilot-radius-panel) 0 0 0;
    background: #fff;
  }
  /* 16665:752/812/803: 346 wide at x 25; vertical gap 17, ca:MAX */
  .glilot-about-feature__copy {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    width: 88.717949vw;
    gap: 4.358974vw;
  }
  /* 16665:753/813/804: 346 x 72; 36 / 100%, two forced lines */
  .glilot-about-feature h2,
  .glilot-about-people h2 .lp-text-highlight,
.glilot-about-feature [data-h="h2"],
.glilot-about-people [data-h="h2"] .lp-text-highlight {
    font-size: 9.230769vw;
  }
  .glilot-about-feature h2, .glilot-about-feature [data-h="h2"] {
    width: 88.717949vw;
  }
  /* 328 wide; Regular 16 / 135% (22px lines) */
  .glilot-about-feature p,
  .glilot-about-experience .glilot-about-feature__closing {
    width: 84.102564vw;
    font-size: 4.102564vw;
    line-height: 5.641026vw;
  }

  /* ---------- Values 16665:815: 390 x 1103 ---------- */
  .glilot-about-values {
    height: 282.820513vw;
  }
  /* 16665:1084: 663 at -322, 610; opacity 0.1 baked into symbol-mobile.svg. Raised 24 to 586
     (feedback 2026-10-10 AM2: "a bit higher"; the Figma frame itself places it at 610). */
  .glilot-about-values__symbol {
    top: 150.25641vw;
    left: -82.564103vw;
    width: 170vw;
    height: 170vw;
  }
  .glilot-about-values__symbol img {
    width: 170vw;
    height: 170vw;
  }
  /* 16665:858: 0, 8, 390 wide; pad 20/19/41/19, gap 30, ca:MAX */
  .glilot-about-values__content {
    top: 2.051282vw;
    left: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 275.384615vw; /* 1074 */
    gap: 7.692308vw;
    padding: 5.128205vw 4.871795vw 10.512821vw;
  }
  /* 16665:861: 299 x 72; Bold 36 / 100%, both ranges bold */
  .glilot-about-values__content h2, .glilot-about-values__content [data-h="h2"] {
    width: 76.666667vw;
    font-size: 9.230769vw;
    font-weight: 700;
    white-space: normal;
  }
  /* 16665:1088: 352 wide; one column, row gap 29 */
  .glilot-about-values__grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    width: 90.25641vw;
    height: auto;
    gap: 7.435897vw;
  }
  /* 16704:5290 etc.: 352 wide, height hugs; pad 20, gap 10, r28 */
  .glilot-about-values__item {
    width: 90.25641vw;
    height: auto;
    gap: 2.564103vw;
    padding: 5.128205vw;
    border-radius: var(--glilot-radius-card);
  }
  /* Bold 24 / 130% (31px box) */
  .glilot-about-values__item h3, .glilot-about-values__item [data-h="h3"] {
    font-size: 6.153846vw;
    line-height: 7.948718vw;
  }
  /* 312 wide; Regular 16 / 135% (22px lines) */
  .glilot-about-values__item p {
    width: 80vw;
    font-size: 4.102564vw;
    line-height: 5.641026vw;
  }
}
