/* =========================================================
   ABOUT US — CREATIVE  ·  .cg-about-v2
   Elementor widget. A scoped port of the About section from the
   reference build (D:/Raghesh/Color Graphics/new — index.html
   `<section data-about="1" class="cg-about">` plus the
   "ABOUT — cg-about" block of assets/css/style.css).

   ONLY the About-specific rules are ported. The design tokens the
   section relies on (--n-*, --accent-*, --text-*, --border-subtle,
   --font-mono, --font-display) and the .cg-dark / .cg-container
   helpers already ship globally with this theme in
   assets/css/tokens.css + assets/css/style.css, byte-for-byte the
   same values as the reference, so they are reused rather than
   redefined here (no duplicate design system).

   Every selector is namespaced under .cg-about-v2 so nothing can
   reach the header, footer, hero or partner carousel. The reference's
   own class names (.cg-about, .cg-capabilities) are deliberately NOT
   reused — they are different class tokens, leaving them free.

   Breakpoints are the reference's own 1239px / 999px (which are also
   this theme's header/footer breakpoints), not Elementor's generic
   1024/767, so the widget stays consistent with the rest of the site.
   ========================================================= */

.cg-about-v2 {
  position: relative;
  background: var(--n-25);
  color: var(--n-950);
  /* The reference sets overflow:hidden here to clip the media parallax.
     Only the horizontal axis is clipped in this port: the section must
     always be free to grow taller than expected once the copy, the
     capability cards and the overview column are all editable. */
  overflow-x: clip;
  overflow-y: visible;
}

.cg-about-v2 *,
.cg-about-v2 *::before,
.cg-about-v2 *::after { box-sizing: border-box; }

/* Editor-only placeholder. */
.cg-about-v2__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
}

/* ---------------------------------------------------------
   SPLIT: copy column + media
   --------------------------------------------------------- */

.cg-about-v2__split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: stretch;
}
@media (max-width: 999px) {
  .cg-about-v2__split { grid-template-columns: 1fr; }
}

/* Media-only layout (no copy) must not leave a dead 44fr column. */
.cg-about-v2__split--media-only { grid-template-columns: 1fr; }

.cg-about-v2__copy-col {
  position: relative;
  z-index: 2;
  padding: 96px 108px 96px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1239px) {
  .cg-about-v2__copy-col { padding-left: 40px; }
}
@media (max-width: 999px) {
  .cg-about-v2__copy-col { padding: 64px 20px; }
}

/* The dot field is sized in the reference to sit under the copy column's
   lower-left corner. On a short desktop viewport the column is shorter and
   the description can reach into that band, so decoration and type share
   space. They are explicitly layered rather than left to DOM order: the
   decoration is pinned to its own layer below the copy, which is raised,
   so the dots can only ever read as texture behind the text. */
.cg-about-v2__dots {
  position: absolute;
  z-index: 0;
  left: 0; bottom: 64px;
  width: 150px; height: 110px;
  background-image: radial-gradient(rgba(11, 12, 15, .22) 1px, transparent 1px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
  pointer-events: none;
}

.cg-about-v2__vert-label {
  position: absolute;
  z-index: 0;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media (max-width: 1239px) {
  .cg-about-v2__vert-label { right: 28px; }
}
.cg-about-v2__vert-label-rule { display: block; width: 1px; height: 70px; background: var(--border-subtle); }
.cg-about-v2__vert-label-text {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The reference renders these two only on desktop (an `isDesktop`
   guard in the source markup). Reproduced here in CSS so the markup
   stays server-rendered and identical at every breakpoint. */
@media (max-width: 999px) {
  .cg-about-v2__dots,
  .cg-about-v2__vert-label,
  .cg-about-v2__side-label { display: none; }
}

/* --- eyebrow --- */
.cg-about-v2__eyebrow-row,
.cg-about-v2__title,
.cg-about-v2__copy-row,
.cg-about-v2__cta-row { position: relative; z-index: 1; }

.cg-about-v2__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 460px;
}
@media (max-width: 999px) {
  .cg-about-v2__eyebrow-row { max-width: 100%; }
}
.cg-about-v2__eyebrow-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--n-950);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-500);
}
.cg-about-v2__eyebrow-rule { flex: 1; height: 1px; background: var(--border-subtle); }

/* --- headline --- */
.cg-about-v2__title {
  margin: 48px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.045em;
  font-size: clamp(58px, 5.6vw, 104px);
}
@media (max-width: 999px) {
  .cg-about-v2__title { margin-top: 36px; font-size: clamp(48px, 14vw, 70px); }
}
.cg-about-v2__title span { display: block; color: var(--n-950); }
.cg-about-v2__title .cg-about-v2__accent { color: var(--accent-500); }
.cg-about-v2__title em { font-style: normal; color: var(--accent-500); }

/* --- body copy --- */
.cg-about-v2__copy-row {
  display: flex;
  gap: 18px;
  margin-top: 48px;
  max-width: 430px;
}
@media (max-width: 999px) {
  .cg-about-v2__copy-row { margin-top: 32px; max-width: 100%; }
}
.cg-about-v2__copy-dash {
  flex: 0 0 auto;
  display: block;
  width: 26px; height: 2px;
  margin-top: 12px;
  background: var(--accent-500);
}
.cg-about-v2__copy-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--n-700);
  text-wrap: pretty;
}
@media (max-width: 999px) {
  .cg-about-v2__copy-text { font-size: 16px; }
}

/* --- CTA --- */
.cg-about-v2__cta-row { display: flex; align-items: center; gap: 22px; margin-top: 44px; }
@media (max-width: 999px) {
  .cg-about-v2__cta-row { margin-top: 32px; }
}
.cg-about-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-950);
  text-decoration: none;
  border-bottom: 1px solid var(--n-950);
  transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}
@media (max-width: 999px) {
  .cg-about-v2__cta { font-size: 12px; }
}
.cg-about-v2__cta:hover,
.cg-about-v2__cta:focus-visible { color: var(--accent-500); border-bottom-color: var(--accent-500); gap: 30px; }
.cg-about-v2__cta svg { flex: 0 0 auto; }

/* ---------------------------------------------------------
   MEDIA
   --------------------------------------------------------- */

.cg-about-v2__media {
  position: relative;
  min-height: min(920px, 104vh);
  overflow: hidden; /* the parallax image is deliberately cropped here */
  background-color: #101216;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 9px);
}
@media (max-width: 999px) {
  .cg-about-v2__media { min-height: 420px; }
}

.cg-about-v2__media-img {
  position: absolute;
  left: 0; right: 0;
  top: var(--cg-av2-parallax-top, -28px);
  height: calc(100% + 56px);
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--cg-av2-pos, 50% 50%);
  filter: saturate(.6) contrast(1.08) brightness(.72);
  transition: top 120ms linear, object-position 700ms cubic-bezier(.16, 1, .3, 1);
}

.cg-about-v2__media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11, 12, 15, .42) 0%, rgba(11, 12, 15, .06) 34%, rgba(11, 12, 15, .34) 100%);
}

/* --- top-left glass panel --- */
.cg-about-v2__panel {
  position: absolute;
  left: 48px; top: 48px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(11, 12, 15, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 1239px) {
  .cg-about-v2__panel { left: 28px; top: 28px; }
}
@media (max-width: 999px) {
  .cg-about-v2__panel { left: 20px; top: 20px; }
}
.cg-about-v2__panel-lead {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  color: #fff;
}
@media (max-width: 999px) {
  .cg-about-v2__panel-lead { font-size: 11px; }
}
.cg-about-v2__panel-rule { display: block; width: 64px; height: 1px; margin-top: 14px; background: var(--accent-500); }

/* --- top-right outlined number --- */
.cg-about-v2__ghost-panel {
  position: absolute;
  right: 48px; top: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
@media (max-width: 1239px) {
  .cg-about-v2__ghost-panel { right: 28px; top: 28px; }
}
@media (max-width: 999px) {
  .cg-about-v2__ghost-panel { right: 20px; top: 20px; }
}
.cg-about-v2__ghost-num {
  font-family: var(--font-display);
  font-size: clamp(72px, 7vw, 116px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 94, 150, .75);
}
@media (max-width: 999px) {
  .cg-about-v2__ghost-num { font-size: 60px; }
}
.cg-about-v2__ghost-label-row { display: flex; align-items: center; gap: 10px; }
.cg-about-v2__ghost-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cg-about-v2__ghost-rule { display: block; width: 22px; height: 1px; background: var(--accent-500); }

/* --- bottom-right glass panel --- */
.cg-about-v2__panel2 {
  position: absolute;
  right: 88px; bottom: 88px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 360px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(11, 12, 15, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 1239px) {
  .cg-about-v2__panel2 { right: 56px; }
}
@media (max-width: 999px) {
  .cg-about-v2__panel2 { right: 20px; bottom: 20px; max-width: min(320px, 80%); }
}
.cg-about-v2__panel2-dot-ring {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid var(--accent-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-about-v2__panel2-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-500); }
.cg-about-v2__panel2-title { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; line-height: 1.6; }
.cg-about-v2__panel2-copy { display: block; margin-top: 10px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* --- vertical label on the photo --- */
.cg-about-v2__side-label {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cg-about-v2__side-label-text { writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cg-about-v2__side-label-rule { display: block; width: 1px; height: 90px; background: rgba(255, 255, 255, .28); }

/* ---------------------------------------------------------
   CAPABILITIES BAND
   --------------------------------------------------------- */

.cg-about-v2__caps {
  background: var(--n-950);
  padding-top: 96px;
  padding-bottom: 96px;
}
@media (max-width: 999px) {
  .cg-about-v2__caps { padding-top: 64px; padding-bottom: 64px; }
}

.cg-about-v2__caps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  column-gap: 64px;
  row-gap: 64px;
}
@media (max-width: 1239px) {
  .cg-about-v2__caps-grid { grid-template-columns: 1fr; column-gap: 0; }
}
/* With only one of the two columns present, the remaining one takes
   the full width instead of sitting in a 1.85fr track. */
.cg-about-v2__caps-grid--single { grid-template-columns: 1fr; column-gap: 0; }

.cg-about-v2__caps-head { display: flex; align-items: center; gap: 14px; padding-bottom: 48px; }
@media (max-width: 999px) {
  .cg-about-v2__caps-head { padding-bottom: 32px; }
}
.cg-about-v2__caps-head-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.cg-about-v2__caps-head-rule { display: block; width: 26px; height: 1px; background: var(--accent-500); }

.cg-about-v2__caps-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 40px;
}
@media (max-width: 999px) {
  .cg-about-v2__caps-list { grid-template-columns: 1fr 1fr; }
}
/* The reference band is a fixed four-up. With a repeater the count is
   the author's, so fewer than four items fill the row they are given
   rather than leaving ghost columns. */
.cg-about-v2__caps-list--3 { grid-template-columns: repeat(3, 1fr); }
.cg-about-v2__caps-list--2 { grid-template-columns: repeat(2, 1fr); }
.cg-about-v2__caps-list--1 { grid-template-columns: 1fr; }
@media (max-width: 999px) {
  .cg-about-v2__caps-list--3,
  .cg-about-v2__caps-list--2 { grid-template-columns: 1fr 1fr; }
  .cg-about-v2__caps-list--1 { grid-template-columns: 1fr; }
}

.cg-about-v2__cap {
  position: relative;
  display: block;
  padding-left: 28px;
  padding-right: 28px;
  border-left: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
  transition: border-color 240ms ease;
}
@media (max-width: 999px) {
  .cg-about-v2__cap { padding-left: 16px; padding-right: 16px; }
}
/* Only the linked variant is a pointer; a plain item is not clickable
   and must not pretend to be. The reference's cursor:pointer came from
   its hover-to-select behaviour, which is preserved as a hover state. */
a.cg-about-v2__cap { cursor: pointer; }
.cg-about-v2__cap.is-active { border-left-color: rgba(255, 255, 255, .28); }
.cg-about-v2__cap:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 4px; }

.cg-about-v2__cap-ghost {
  position: absolute;
  left: 22px; top: -14px;
  font-family: var(--font-display);
  font-size: clamp(60px, 5.4vw, 86px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
  pointer-events: none;
  transition: -webkit-text-stroke-color 240ms ease;
}
@media (max-width: 999px) {
  .cg-about-v2__cap-ghost { left: 10px; font-size: 56px; }
}
.cg-about-v2__cap.is-active .cg-about-v2__cap-ghost { -webkit-text-stroke-color: rgba(255, 255, 255, .24); }

.cg-about-v2__cap-icon { position: relative; display: block; color: rgba(255, 255, 255, .6); transition: color 240ms ease; }
.cg-about-v2__cap.is-active .cg-about-v2__cap-icon { color: #FF5E96; }
.cg-about-v2__cap-icon svg { display: block; }

.cg-about-v2__cap-title {
  position: relative;
  display: block;
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: rgba(255, 255, 255, .78);
  transition: color 240ms ease;
}
@media (max-width: 999px) {
  .cg-about-v2__cap-title { margin-top: 22px; font-size: 13px; }
}
.cg-about-v2__cap.is-active .cg-about-v2__cap-title { color: #FFFFFF; }

.cg-about-v2__cap-line {
  display: block;
  width: 22px;
  height: 1px;
  margin: 16px 0;
  background: var(--accent-500);
  transition: width 400ms cubic-bezier(.16, 1, .3, 1);
}
.cg-about-v2__cap.is-active .cg-about-v2__cap-line { width: 48px; }

.cg-about-v2__cap-desc {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
  max-width: 24ch;
  transition: color 240ms ease;
}
.cg-about-v2__cap.is-active .cg-about-v2__cap-desc { color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------
   COMPANY OVERVIEW / DOWNLOAD / GLOBAL REACH
   --------------------------------------------------------- */

.cg-about-v2__overview {
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 56px;
}
@media (max-width: 1239px) {
  .cg-about-v2__overview { border-left-color: transparent; padding-left: 0; }
}
.cg-about-v2__caps-grid--single .cg-about-v2__overview { border-left-color: transparent; padding-left: 0; }

.cg-about-v2__overview-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-accent); }
.cg-about-v2__overview-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 18px; }
.cg-about-v2__overview-title { font-family: var(--font-display); font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: #fff; }
@media (max-width: 999px) {
  .cg-about-v2__overview-title { font-size: 26px; }
}
.cg-about-v2__download {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border: 1px solid var(--text-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-accent);
  font-size: 18px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.cg-about-v2__download:hover,
.cg-about-v2__download:focus-visible { background: var(--accent-500); color: #fff; }
.cg-about-v2__overview-hr { display: block; height: 1px; margin: 36px 0; background: var(--border-subtle); }

.cg-about-v2__reach { display: flex; align-items: flex-start; gap: 15px; }
.cg-about-v2__reach-dots {
  flex: 0 0 auto;
  width: 150px;
  height: 88px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85% auto;
  -webkit-mask-image: radial-gradient(120% 90% at 40% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 40% 50%, #000 30%, transparent 78%);
}
.cg-about-v2__reach-copy { min-width: 200px; }
.cg-about-v2__reach-title { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: #fff; }
.cg-about-v2__reach-text { display: block; margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-body); }

/* The reach row is a fixed two-up in the reference. On a narrow phone
   the 150px graphic plus a 200px minimum of copy no longer fits beside
   each other, so it stacks rather than forcing a horizontal scroll. */
@media (max-width: 419px) {
  .cg-about-v2__reach { flex-wrap: wrap; }
  .cg-about-v2__reach-copy { min-width: 0; }
}

/* ---------------------------------------------------------
   FOOT BAND
   --------------------------------------------------------- */

.cg-about-v2__foot-band { background: var(--n-950); padding-bottom: 96px; }
@media (max-width: 999px) {
  .cg-about-v2__foot-band { padding-bottom: 64px; }
}
/* When the capabilities band above is switched off, the foot band would
   otherwise sit flush against the media with no breathing room. */
.cg-about-v2__foot-band--solo { padding-top: 96px; }
@media (max-width: 999px) {
  .cg-about-v2__foot-band--solo { padding-top: 64px; }
}

.cg-about-v2__foot-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  transition: color 200ms ease;
}
@media (max-width: 999px) {
  .cg-about-v2__foot-link { font-size: 18px; }
}
.cg-about-v2__foot-link:hover,
.cg-about-v2__foot-link:focus-visible { color: var(--text-accent); }
.cg-about-v2__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cg-about-v2__foot-cta svg { flex: 0 0 auto; }

/* ---------------------------------------------------------
   MOTION PREFERENCES
   The reference disables its own parallax when the user asks for
   reduced motion (`this._reduced`); the JS honours that too, and
   these rules cover the purely declarative transitions.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cg-about-v2__media-img,
  .cg-about-v2__cta,
  .cg-about-v2__cap,
  .cg-about-v2__cap-ghost,
  .cg-about-v2__cap-icon,
  .cg-about-v2__cap-title,
  .cg-about-v2__cap-line,
  .cg-about-v2__cap-desc,
  .cg-about-v2__download,
  .cg-about-v2__foot-link {
    transition-duration: 1ms !important;
  }
}