/* Britlex Global · inner pages (team, contact, technology). Shares tokens with site.css. */

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(.9rem, 2.2vw, 1.5rem) var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-hairline);
}
.topbar__mark { font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.9rem)/1 var(--sc-font-display); letter-spacing: -.01em; text-decoration: none; color: var(--sc-ink); }
.topbar__mark i { color: var(--sc-accent); }
.topbar__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: center; }
.topbar__nav a { font: 500 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; color: var(--sc-ink-soft); padding: .4em 0; border-bottom: 1px solid transparent; }
.topbar__nav a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.topbar__nav a.topbar__cta { color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent); padding: .75em 1.1em; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .topbar__nav a:hover { color: var(--sc-ink); }
  .topbar__nav a.topbar__cta:hover { background: var(--sc-ink); color: var(--sc-canvas); }
}
@media (max-width: 700px) {
  .topbar__nav a:not(.topbar__cta) { display: none; }
}

.page { padding: clamp(4rem, 10vh, 8rem) var(--sc-gutter) clamp(5rem, 12vh, 9rem); }
.page__in { max-width: 92rem; margin-inline: auto; }
.page__head { font: 400 clamp(3rem, 1rem + 7vw, 9.5rem)/.9 var(--sc-font-display); letter-spacing: -.04em; max-width: 12ch; text-wrap: balance; }
.page__lede { margin-top: clamp(1.6rem, 4vh, 2.8rem); max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }
.page__kicker { font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 1.4rem; }

/* ------------------------------------------------------------------ team -- */
.people { margin-top: clamp(3.5rem, 9vh, 7rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); }
.person { display: grid; gap: 1rem; align-content: start; border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.4rem; }
.person__photo {
  aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background: var(--sc-surface);
  display: grid; place-items: center; position: relative;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__mono { font: 400 clamp(4rem, 8vw, 8rem)/1 var(--sc-font-display); color: color-mix(in oklab, var(--sc-ink) 28%, transparent); letter-spacing: -.04em; }
.person__photo::after { content: ""; position: absolute; inset: 0; box-shadow: var(--sc-edge); pointer-events: none; }
.person h2 { font: 400 clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem)/1.05 var(--sc-font-display); letter-spacing: -.02em; margin-top: .4rem; }
.person__role { font: 500 var(--sc-t-xs)/1.4 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-accent); }
.person p { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.55; max-width: 34ch; }
.person__where { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 900px) { .people { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .person { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); column-gap: 1.4rem; } .person__photo { grid-row: 1 / 6; } }

.team-note { margin-top: clamp(4rem, 10vh, 7rem); max-width: 60ch; display: grid; gap: 1rem; }
.team-note h2 { font: 400 clamp(1.8rem, 1.2rem + 1.6vw, 3rem)/1.05 var(--sc-font-display); letter-spacing: -.02em; }
.team-note p { color: var(--sc-ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------- contact -- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.globe { position: relative; aspect-ratio: 1; width: 100%; max-width: 44rem; margin-inline: auto; }
.globe canvas { width: 100%; height: 100%; display: block; }
.globe__pin {
  position: absolute; left: var(--px, 50%); top: var(--py, 50%); transform: translate(-50%, -50%);
  opacity: var(--pin, 0); pointer-events: none;
  display: grid; justify-items: start; gap: .35rem;
}
.globe__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 30%, transparent); position: relative; }
.globe__dot::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--sc-accent); animation: ping 2.2s var(--sc-ease-out) infinite; }
@keyframes ping { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.globe__label { font: 500 var(--sc-t-xs)/1.2 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink); background: var(--sc-canvas); padding: .35em .6em; margin-left: 12px; white-space: nowrap; }
.globe__cities { position: absolute; inset: 0; pointer-events: none; }
.globe__city { position: absolute; transform: translate(-50%, -50%); font: 500 .68rem/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); opacity: var(--o, 0); }
.globe__city[data-city="dubai"] { transform: translate(-100%, -50%); }
.globe__city::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: .45em; vertical-align: .1em; }
@media (prefers-reduced-motion: reduce) { .globe__dot::after { animation: none; } }

.contact__copy { display: grid; gap: clamp(1.6rem, 4vh, 2.6rem); align-content: start; }
.address { display: grid; gap: .3rem; font: 400 clamp(1.5rem, 1rem + 1.6vw, 2.6rem)/1.15 var(--sc-font-display); letter-spacing: -.02em; }
.address small { display: block; font: 500 var(--sc-t-xs)/1.4 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: .6rem; }
.contact__mail { font: 500 var(--sc-t-lg)/1.2 var(--sc-font-text); color: var(--sc-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.contact__facts { display: grid; gap: .9rem; }
.contact__facts div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--sc-hairline-strong); }
.contact__facts dt { font: 500 var(--sc-t-xs)/1.5 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.contact__facts dd { font-size: var(--sc-t-base); line-height: 1.5; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } .globe { max-width: 30rem; } .contact__facts div { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }

/* ------------------------------------------------------------ technology -- */
.stack { margin-top: clamp(3.5rem, 9vh, 7rem); display: grid; gap: 0; }
.stack__row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(1.4rem, 3vh, 2.2rem) 0; border-top: 1px solid var(--sc-hairline-strong); align-items: start; }
.stack__row:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.stack__what { font: 400 clamp(1.5rem, 1.1rem + 1vw, 2.2rem)/1.1 var(--sc-font-display); letter-spacing: -.02em; }
.stack__how { color: var(--sc-ink); font-size: var(--sc-t-base); line-height: 1.55; max-width: 52ch; }
.stack__why { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.stack__why b { display: block; font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: .3rem; }
@media (max-width: 900px) { .stack__row { grid-template-columns: minmax(0, 1fr); gap: .7rem; } }

.ms-line { margin-top: clamp(3rem, 8vh, 5rem); display: inline-flex; align-items: center; gap: .7em; font: 600 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; padding: .75em 1em; border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.ms-line::before { content: ""; width: .5em; height: .5em; background: var(--sc-accent); }
.tech-note { margin-top: clamp(3rem, 8vh, 5rem); max-width: 62ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }

/* --------------------------------------------------------------- footer -- */
.pagefoot { padding: clamp(3rem, 8vh, 5rem) var(--sc-gutter); border-top: 1px solid var(--sc-hairline); display: grid; gap: .9rem; font-size: var(--sc-t-xs); line-height: 1.6; }
.pagefoot p:first-child { letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.pagefoot__legal { color: var(--sc-ink-soft); max-width: 62ch; }
.pagefoot__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pagefoot__nav a { color: var(--sc-ink-soft); }