/* ============================================================
   KORA — About page (about.html)
   Loaded AFTER style.css — reuses tokens, nav, buttons, footer.
   Metrics taken from the original desktop layout (1880 grid).
   ============================================================ */

.about-main { background: var(--paper); }
/* container matched to the homepage system (--container) */
.ab-wrap { width: min(100rem, 84vw); margin-inline: auto; }

/* ---------- HERO: full-viewport photo card ---------- */
.ab-hero { position: relative; padding: var(--stage-edge); }
.ab-hero__card {
  position: relative; border-radius: var(--stage-r); overflow: hidden;
  height: calc(100svh - 2 * var(--stage-edge));
  background: var(--dark); color: var(--cream);
}
/* darkened and slightly washed-out photo */
.ab-hero__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78) contrast(0.92) brightness(0.95); }
.ab-hero__dim { position: absolute; inset: 0; background: rgba(13,13,13,0.4); }
/* very fine animated film grain over the photo */
.ab-hero__grain {
  position: absolute; inset: -7.5rem; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 15rem;
  animation: ab-grain 0.8s steps(1) infinite;
}
@keyframes ab-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-2.375rem, 1.5rem); }
  25%  { transform: translate(1.25rem, -2.625rem); }
  37%  { transform: translate(-3.25rem, -1.125rem); }
  50%  { transform: translate(2.125rem, 2.5rem); }
  62%  { transform: translate(-1rem, 3.25rem); }
  75%  { transform: translate(2.875rem, -1.75rem); }
  87%  { transform: translate(-1.875rem, -3.125rem); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .ab-hero__grain { animation: none; } }
/* hero text block is vertically centered, like the original */
.ab-hero__in { position: absolute; left: clamp(1.5rem, 3.1vw, 3.75rem); top: 50%; transform: translateY(-50%); max-width: 58.75rem; }
.ab-hero__in h1 { font-size: var(--h-page-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.ab-hero__in .sub { margin-top: 2.5rem; max-width: 26.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; }
.ab-hero__trust { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.25rem; }
.ab-hero__trust .avs { display: flex; }
.ab-hero__trust img { width: 1.6875rem; height: 1.6875rem; border-radius: 50%; border: 2px solid rgba(255,255,250,0.7); object-fit: cover; }
.ab-hero__trust img + img { margin-left: -0.5625rem; }
.ab-hero__trust .cap { font-size: 0.8125rem; font-weight: 600; }
.ab-hero__trust .stars { display: block; margin-bottom: 2px; color: var(--green); font-size: 0.6875rem; letter-spacing: 2px; }
/* small kora™ watermark in the card's bottom-right corner */
.ab-hero__logo {
  position: absolute; right: clamp(1.5rem, 3vw, 3.5rem); bottom: clamp(1.25rem, 2.6vw, 3rem);
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.03em; color: var(--cream);
}
.ab-hero__logo .mark { color: var(--green); }
.ab-hero__logo sup { font-size: 0.45em; font-weight: 600; transform: translateY(-0.2em); }

/* ---------- STORY: beige quote card + 2×2 photo grid ---------- */
.ab-story { padding-top: var(--sec-pad); }
/* section aligns with the hero text's left line (hero inset 3.75rem + frame) */

.ab-story h2 { font-size: var(--h-page-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; max-width: 44rem; margin-inline: auto 0; }

.ab-story h2 .w, .ab-story .lead .w { opacity: 0.18; display: inline-block; }
.ab-story__grid { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.ab-story__grid > * { min-width: 0; } /* marquee inside the card must not blow the track */
.ab-qcard {
  position: relative; background: var(--beige-2); border-radius: 1.875rem;
  padding: clamp(2rem, 3.2vw, 3.75rem); display: flex; flex-direction: column;
}
.ab-qcard .qm { position: absolute; top: clamp(1.875rem, 3vw, 3.625rem); left: 58%; color: var(--green); font-size: 4rem; line-height: 0.6; }
.ab-qcard .lead { max-width: 25rem; font-size: var(--t-lead-2); font-weight: 400; letter-spacing: -0.03em; line-height: 1.3; }
.ab-qcard .para { margin-top: 2.875rem; max-width: 29.6875rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.55; color: var(--gray); }
.ab-qcard .para + .para { margin-top: 2.75rem; }
.ab-qcard .sig { margin-top: 3.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--gray); }
.ab-mq { margin-top: auto; padding-top: 3rem; width: 100%; align-self: auto; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 88%, transparent); }
.ab-mq .lg { color: rgba(30,30,28,0.8); font-size: 1.5rem; }
.ab-mq .lg--1 { font-size: 1.1875rem !important; }
/* the strip on this page inherits a larger .lg scale; the SVG logos have to
   stay on the same optical scale as the hero strip on the homepage */
.ab-mq .lgi { height: 1.5rem; }
.ab-mq .lgi[src*="nokia"] { height: 1.05rem; }
.ab-mq .lgi[src*="onepagecrm"], .ab-mq .lgi[src*="halo"] { height: 1.8rem; }
.ab-mq .lgi[src*="nyra"] { height: 1.6rem; }
.ab-mq .lgi[src*="adwa"] { height: 1.1rem; }
.ab-mq .lgi[src*="upwork"] { height: 1.55rem; }
.ab-story__ph { border-radius: 1.875rem; overflow: hidden; min-height: 26.25rem; }
.ab-story__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* stats row: label sits to the right of the number */
.ab-stats { margin: 9.375rem auto 0; display: flex; justify-content: space-between; gap: 2.5rem; }
.ab-stats .cell { display: flex; align-items: center; gap: 1.125rem; }
.ab-stats .v { font-size: clamp(3rem, 4.2vw, 5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ab-stats .l { font-size: 0.8125rem; font-weight: 600; color: var(--gray); line-height: 1.35; }

/* ---------- VALUES ---------- */
.ab-values { padding-top: clamp(5rem, 8vw, 9.375rem); }
.ab-values__in { width: 100%; }
.ab-values h2 { font-size: var(--h-page-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ab-values__grid { margin-top: 5.625rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.0625rem; }
.vcard {
  background: var(--dark); color: var(--cream); border-radius: 1.875rem;
  padding: 1.8125rem; min-height: 17.125rem; display: flex; flex-direction: column;
}
.vcard svg { color: var(--green); }
.vcard .t { margin-top: auto; font-size: 0.9375rem; font-weight: 700; }
.vcard .d { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: rgba(255,255,255,0.8); }
/* philosophy line — per-letter fill */
/* Philosophy — matched to the original: beige icon-pill left,
   1.875rem heading + 1.0625rem gray sub in the right column */
.ab-philo { margin-top: 8.125rem; display: grid; grid-template-columns: 23.75rem 1fr; align-items: start; }
.ab-philo .pchip {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--beige-2); border-radius: 0.9375rem; padding: 2px 0.6875rem 2px 2px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.025em; color: var(--dark);
}
.ab-philo .pchip .ico { width: 1.5625rem; height: 1.5625rem; border-radius: 50%; background: var(--cream); display: grid; place-items: center; flex: none; }
.ab-philo__tx #philo { max-width: 37.5rem; font-size: 1.875rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.3; color: var(--dark); }
.ab-philo__tx #philo .ch { opacity: 0.18; }
.ab-philo__tx .sub { margin-top: 1.875rem; max-width: 31.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.5; color: var(--gray); }

/* ---------- TEAM (big green card) ---------- */
.ab-team { padding-top: clamp(5rem, 8vw, 9.375rem); padding-bottom: var(--sec-pad); }
.ab-team__card {
  background: var(--green); color: var(--cream);
  border-radius: 2.5rem; padding: clamp(2.5rem, 6.4vw, 7.5rem) clamp(1.5rem, 11vw, 13.125rem);
}
.ab-team h2 { font-size: var(--h-page-2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; max-width: 47.5rem; }
.ab-team__grid { margin-top: 5.625rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5.5vw, 6.5rem); }
/* solo layout: the single member card on the left, plain text on the right */
.ab-team__txt { align-self: center; max-width: 34rem; }
.ab-team__txt p { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; color: var(--gray); }
.ab-team__txt p + p { margin-top: 1.125rem; }
.ab-member {
  display: flex; align-items: center; gap: 1.375rem;
  padding: 0.75rem 0; border-top: 1px solid rgba(255,255,250,0.3);
}
.ab-member img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.ab-member .n { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; }
.ab-member .r { font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,250,0.8); margin-top: 2px; }
.ab-member .num { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,250,0.8); }
/* hiring block */
/* The photo used to be capped at a fixed 61.25rem, which looked right only
   until the team card's own padding (up to 13.125rem a side) ate the row:
   at 1920 that left the text column 150px wide and set a 45px heading one
   word per line. A ratio with a floor on the text column keeps both parts
   usable at every width instead. */
.ab-hire { margin-top: 4.375rem; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(21.875rem, 1fr); gap: 3.125rem; align-items: center; }
.ab-hire__ph { border-radius: 1.875rem; overflow: hidden; aspect-ratio: 980 / 653; }
.ab-hire__ph img { width: 100%; height: 100%; object-fit: cover; }
.ab-hire h3 { font-size: clamp(1.875rem, 2.4vw, 2.8125rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ab-hire p { margin-top: 1.625rem; max-width: 26.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; color: rgba(255,255,250,0.9); }
.ab-hire .btn { margin-top: 2.125rem; }

/* insights section reused from homepage styles (.insights) */

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ab-story__grid { grid-template-columns: 1fr; }
  .ab-values__grid { grid-template-columns: repeat(2, 1fr); }
  .ab-philo { grid-template-columns: 1fr; gap: 1.25rem; }
  .ab-team__grid { grid-template-columns: 1fr; }
  .ab-hire { grid-template-columns: 1fr; }
  /* .ab-stats is display:flex — stack the cells on narrow screens
     (grid-template-columns was a no-op here and let them overflow) */
  .ab-stats { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
}
/* very narrow phones (≤23.75rem): 2-up value cards no longer fit — stack them */
@media (max-width: 380px) {
  .ab-values__grid { grid-template-columns: 1fr; }
}