/* ==========================================================================
   Limitless Technology Group - corporate site
   Tokens and layout per design_handoff_ltg_corporate_site/README.md
   Mobile-first. Desktop rules live in the min-width blocks at the bottom.
   ========================================================================== */

:root {
  /* Text */
  --ink: #17121C;
  --body: #453E48;
  --muted: #6E675F;
  --faint: #9A9289;

  /* Purples */
  --purple: #2A1240;
  --purple-deep: #241038;
  --purple-hover: #4A127A;

  /* On purple */
  --on-purple: #F3ECF7;
  --on-purple-dim: #D6C9E0;
  --eyebrow: #B49BC8;
  --lav: #9A7FB0;
  --lav-light: #CDBEDA;
  --link-dark: #D8C2E6;
  --market: #9A86AB;
  --tagline-dark: #E4DAEC;

  /* Surfaces */
  --paper: #FBFAF7;
  --panel: #F3EFEA;
  --rule: #E6E2DC;
  --underline: #C9B7D6;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing - 8px base */
  --gutter: 24px;
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure { margin: 0; }

:focus-visible {
  outline: 2px solid var(--lav);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--on-purple);
  color: var(--purple);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Full-bleed background, content capped and centred ----------------------- */
.inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: 720px; }
.measure-sm { max-width: 660px; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { background: var(--purple); color: var(--on-purple); }

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(243, 236, 247, 0.14);
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img {
  height: 26px;
  width: auto;
  /* Group logo is dark; knock it to white for the purple bar. */
  filter: brightness(0) invert(1);
}

.nav-toggle {
  appearance: none;
  background: none;
  border: 1px solid rgba(243, 236, 247, 0.4);
  color: var(--on-purple);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: #fff; }

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: var(--lav-light);
}

.site-nav a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

/* Mobile drawer: only collapse when JS is available to reopen it. */
.js .site-nav {
  display: none;
  width: 100%;
  padding-bottom: 14px;
}
.js .site-header__bar { flex-wrap: wrap; }
.js .site-nav[data-open="true"] { display: flex; }

/* ==========================================================================
   Masthead (every page)
   ========================================================================== */

.masthead {
  background: var(--purple);
  color: var(--on-purple);
}
.masthead .inner { padding-block: 56px 48px; }
.masthead--hero .inner { padding-block: 64px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eyebrow);
  font-weight: 500;
  margin-bottom: 22px;
}

.h-hero {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 8.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 1000px;
}

.h-page {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 6.6vw, 64px);
  line-height: 1.04;
  text-wrap: balance;
  max-width: 900px;
}

.standfirst {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.6;
  color: var(--on-purple-dim);
  max-width: 680px;
  text-wrap: pretty;
}

.hero__sub {
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.6;
  color: var(--on-purple-dim);
  max-width: 640px;
  margin-top: 26px;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 30px;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--solid { background: var(--on-purple); color: var(--purple); }
.btn--solid:hover { background: #fff; }
.btn--ghost { border-color: rgba(243, 236, 247, 0.4); color: var(--on-purple); }
.btn--ghost:hover { border-color: #fff; }
.btn--purple { background: var(--purple); color: var(--on-purple); }
.btn--purple:hover { background: var(--purple-hover); }

/* Text links --------------------------------------------------------------- */

.link {
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  border-bottom: 1px solid var(--underline);
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.link:hover { border-bottom-color: var(--purple); }

.link-on-dark {
  color: var(--link-dark);
  border-bottom: 1px solid rgba(216, 194, 230, 0.4);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.link-on-dark:hover { color: #fff; border-bottom-color: #fff; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section .inner { padding-block: 56px; }
.section--tight .inner { padding-block: 44px; }
.rule-t { border-top: 1px solid var(--rule); }
.rule-b { border-bottom: 1px solid var(--rule); }

.h-section {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.06;
  text-wrap: balance;
}

.h-block {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.1;
}

.h-block--sm {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.1;
}

.prose p {
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.75;
  color: var(--body);
  text-wrap: pretty;
}
.prose p + p { margin-top: 22px; }

.prose--lg p {
  font-size: clamp(17px, 2.3vw, 19px);
  line-height: 1.75;
}
.prose--lg p + p { margin-top: 24px; }

/* At a glance -------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}
.stat__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 9vw, 58px);
  line-height: 1;
  color: var(--purple);
}
.stat__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.4;
}

/* Positioning block + APAC footprint map ----------------------------------- */

.positioning { display: grid; grid-template-columns: 1fr; gap: 48px; }
.positioning__text { max-width: 560px; }

/* Capped at the design width. Beyond 620px the viewBox would scale the map
   up and the 11px labels with it, so the cap keeps type at its intended size
   whether the map is stacked or in the two-column layout. */
.ltg-map { margin: 0; max-width: 620px; }

/* Reserve the box so the map never shifts layout as it paints. */
.ltg-map__frame {
  width: 100%;
  aspect-ratio: 5 / 4;
}
.ltg-map__svg { width: 100%; height: 100%; display: block; }

.ltg-map__land { fill: #E7E1D8; stroke: var(--paper); stroke-width: 0.6; }
.ltg-map__market { fill: #CBB6DE; stroke: var(--paper); stroke-width: 0.6; }
.ltg-map__halo { fill: var(--paper); }
.ltg-map__dot { fill: var(--purple); }
.ltg-map__hq-ring { fill: none; stroke: var(--purple); stroke-width: 1.4; }

.ltg-map__lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--purple);
}
.ltg-map__sub {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  fill: #7A5E90;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Em-based, so the gap below the city label scales with the type rather
     than with the viewBox. See the note in tools/make-map.mjs. */
  transform: translateY(1.35em);
}

/* Below 900px the viewBox scales the whole map down (~0.53), which would
   render 11px labels at ~6px. Scale the type back up in user units, and drop
   the six non-HQ city labels - at this width there is no room for eight
   without collisions. The dots all remain. */
@media (max-width: 560px) {
  .ltg-map__lbl { font-size: 17px; }
  .ltg-map__sub { font-size: 15px; }
  .ltg-map__lbl:not(.ltg-map__lbl--hq) { display: none; }
}

.ltg-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}
.ltg-map__key { display: inline-flex; align-items: center; gap: 9px; }
.ltg-map__swatch {
  width: 14px;
  height: 14px;
  background: #CBB6DE;
  flex: none;
}
.ltg-map__keydot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple);
  flex: none;
}

/* Pillars ------------------------------------------------------------------ */

.pillars { display: grid; grid-template-columns: 1fr; gap: 48px; }
.pillar__num {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--lav);
  margin-bottom: 16px;
}
.pillar h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(25px, 4vw, 31px);
  line-height: 1.15;
  margin-bottom: 16px;
}
.pillar p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--body);
  margin-bottom: 22px;
}

/* Brand strip (dark) ------------------------------------------------------- */

.strip { background: var(--purple-deep); color: var(--on-purple); }
.strip .inner { padding-block: 56px; }

.strip__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(243, 236, 247, 0.18);
}
.strip__head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.15;
}
.strip__head a { font-size: 13.5px; }

.strip__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-block: 28px;
  border-bottom: 1px solid rgba(243, 236, 247, 0.13);
}
.strip__row:last-child { border-bottom: 0; }

.strip__logo { display: flex; align-items: center; height: 40px; }
.strip__logo img {
  width: auto;
  max-width: 170px;
  max-height: 34px;
  object-fit: contain;
  opacity: 0.94;
}
/* Knock the colour marks to white so five identities read as one portfolio. */
.strip__logo img.knockout { filter: brightness(0) invert(1); }

.strip__tagline { font-size: 15.5px; color: var(--tagline-dark); margin-bottom: 8px; }
.strip__markets {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--market);
  line-height: 1.5;
}
.strip__links {
  display: flex;
  gap: 12px 20px;
  font-size: 13px;
  flex-wrap: wrap;
}

/* Brands page -------------------------------------------------------------- */

.brand {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--rule);
}
.brand:last-of-type { border-bottom: 0; }

.brand__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 0 0;
}
.brand__logo img { width: auto; max-width: 190px; max-height: 52px; object-fit: contain; }

.brand__body { padding: 24px 0 44px; max-width: 720px; }
.brand__tagline {
  font-family: var(--serif);
  font-size: clamp(21px, 3.2vw, 24px);
  font-style: italic;
  line-height: 1.3;
  color: var(--purple);
  margin-bottom: 18px;
}
.brand__body p.desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 24px;
}
.brand__links { display: flex; gap: 16px 24px; flex-wrap: wrap; }
.brand__links a { font-size: 13.5px; }

/* Label / body sections ---------------------------------------------------- */

.labelled { display: grid; grid-template-columns: 1fr; gap: 24px; }

/* Two-column rule lists (Partner) ------------------------------------------ */

.cols-2 { display: grid; grid-template-columns: 1fr; gap: 48px; }
.h-col {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(25px, 4vw, 30px);
  line-height: 1.15;
  margin-bottom: 22px;
}
.rule-list { display: flex; flex-direction: column; }
.rule-list > * {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  padding-block: 16px;
  border-top: 1px solid var(--rule);
}
.rule-list > *:last-child { border-bottom: 1px solid var(--rule); }

/* Dark statement band ------------------------------------------------------ */

.band { background: var(--purple-deep); color: var(--on-purple); }
.band .inner { padding-block: 56px; }
.band .eyebrow { letter-spacing: 0.16em; margin-bottom: 18px; }

/* Multi-paragraph closing statement. Smaller than a single-line pull quote
   would be, so two paragraphs of serif still read as prose rather than shouting. */
.band__statement p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.35;
  max-width: 820px;
  text-wrap: pretty;
}
.band__statement p + p { margin-top: 22px; }

/* Careers ------------------------------------------------------------------ */

.cols-3 { display: grid; grid-template-columns: 1fr; gap: 40px; }
.cols-3 h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 26px);
  line-height: 1.2;
  margin-bottom: 14px;
}
.cols-3 p { font-size: 15.5px; line-height: 1.7; color: var(--body); }

.closing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.closing-row p { font-size: 16px; line-height: 1.7; color: var(--body); max-width: 640px; }

/* Contact ------------------------------------------------------------------ */

.contact-routes { display: grid; grid-template-columns: 1fr; gap: 32px; }
.route { border-top: 2px solid var(--purple); padding-top: 22px; }
/* Single combined route - hold it to a readable column instead of letting
   the rule stretch the full 1440px. */
.route--single { max-width: 460px; }
.route__label {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}
.route a { font-size: 15px; color: var(--purple); border-bottom: 1px solid var(--underline); padding-bottom: 2px; word-break: break-word; }
.route a:hover { border-bottom-color: var(--purple); }

.address-block {
  font-style: normal;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.9;
  color: var(--body);
}

/* Leadership --------------------------------------------------------------- */

.leader { border-top: 2px solid var(--purple); padding-top: 22px; max-width: 380px; }
.leader__name { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.15; margin-bottom: 4px; }
.leader__role { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.note { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin-top: 26px; max-width: 500px; }

/* Centred CTA -------------------------------------------------------------- */

.cta-centre { text-align: center; }
.cta-centre h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.12;
  margin-bottom: 28px;
  text-wrap: balance;
}
.cta-centre .btn { word-break: break-word; }
.cta-centre .note { margin: 26px auto 0; max-width: 520px; }

/* Legal pages -------------------------------------------------------------- */

.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 28px);
  line-height: 1.2;
  margin-top: 44px;
  margin-bottom: 14px;
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 16px; line-height: 1.75; color: var(--body); }
.legal p + p { margin-top: 16px; }
.legal ul { margin: 16px 0 0; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.75; color: var(--body); margin-bottom: 8px; }
.legal a { border-bottom: 1px solid var(--underline); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { border-top: 1px solid var(--rule); }
.site-footer .inner { padding-block: 48px 36px; }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }

.footer-brand__name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 14px;
}
.footer-brand address {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 280px;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--body); }
.footer-col a:hover { color: var(--purple); }
.footer-col__head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}

.footer-legal {
  border-top: 1px solid var(--rule);
  margin-top: 36px;
  padding-top: 24px;
  font-size: 12px;
  color: #8A8279;
}

/* ==========================================================================
   404
   ========================================================================== */

.notfound .inner { padding-block: 88px; }
.notfound p { font-size: 18px; line-height: 1.75; color: var(--body); max-width: 560px; margin-bottom: 28px; }

/* ==========================================================================
   Tablet - 600px
   ========================================================================== */

@media (min-width: 600px) {
  :root { --gutter: 40px; }

  .contact-routes { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .cols-3 { grid-template-columns: repeat(2, 1fr); gap: 44px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

  .brand { grid-template-columns: 200px minmax(0, 1fr); }
  .brand__logo { padding: 44px 28px 44px 0; justify-content: center; }
  .brand__body { padding: 44px 0; }

  .strip__row { grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 12px 32px; }
  .strip__links { grid-column: 2; justify-content: flex-start; }
}

/* ==========================================================================
   Desktop - 900px
   ========================================================================== */

@media (min-width: 900px) {
  :root { --gutter: 64px; }

  /* Full nav, no drawer */
  .nav-toggle { display: none; }
  .js .site-nav,
  .site-nav {
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: auto;
    padding-bottom: 0;
    font-size: 14px;
  }
  .site-nav a { padding: 4px 0; }
  .site-header .inner { padding-block: 26px; }
  .site-header__logo img { height: 30px; }

  .masthead .inner { padding-block: 88px 76px; }
  .masthead--hero .inner { padding-block: 108px 104px; }

  .section .inner { padding-block: 96px; }
  .section--tight .inner { padding-block: 56px 40px; }
  .section--glance .inner { padding-block: 80px; }
  .section--positioning .inner { padding-block: 104px; }
  .section--pillars .inner { padding-block: 100px; }

  .hero__sub { margin-top: 34px; }
  .hero__cta { gap: 16px; margin-top: 44px; }

  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
  .stat__label { margin-top: 12px; }

  .pillars { grid-template-columns: repeat(3, 1fr); gap: 60px; }
  .pillar h3 { margin-bottom: 18px; }
  .pillar p { margin-bottom: 24px; }

  .labelled { grid-template-columns: 320px minmax(0, 1fr); gap: 72px; }

  .cols-2 { grid-template-columns: 1fr 1fr; gap: 72px; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); gap: 56px; }

  .contact-routes { grid-template-columns: repeat(3, 1fr); gap: 48px; }

  .strip .inner { padding-block: 96px; }
  .strip__head { padding-bottom: 28px; }
  .strip__row {
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 300px);
    gap: 12px 44px;
    padding-block: 34px;
  }
  .strip__links { grid-column: auto; justify-content: flex-end; }

  .brand { grid-template-columns: 240px minmax(0, 1fr); }
  .brand__logo { padding: 48px 28px; }
  .brand__body { padding: 56px; }

  .band .inner { padding-block: 88px; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
  .site-footer .inner { padding-block: 88px 56px; }
  .footer-legal { margin-top: 48px; padding-top: 28px; }
}

/* ==========================================================================
   Wide desktop - positioning block goes two-column
   ==========================================================================
   Deliberately 1280px rather than the site's usual 900px breakpoint: at
   900px each column is only ~350px, which would shrink the map to 56% and
   its labels to ~6px. From 1280px the map column is 540px or wider, so the
   type stays close to its intended 11px. Below this the map stacks under
   the text at its full 620px design width. */

@media (min-width: 1280px) {
  .positioning {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .site-footer, .hero__cta, .nav-toggle { display: none; }
  body { background: #fff; }
  .masthead, .strip, .band { background: #fff !important; color: #000 !important; }
}