/* ==========================================================================
   Creative Logo Design — inner page patterns
   About Us, Contact, and the service-page template (Branding).
   Depends on tokens.css / components.css. All `.cld-` prefixed.
   ========================================================================== */

/* ==========================================================================
   PAGE HERO — shared banner for every inner page
   ========================================================================== */

.cld-phero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
  background-color: var(--cld-ink-950);
  background-size: cover;
  background-position: center;
  color: var(--cld-text);
  isolation: isolate;
  overflow: hidden;
}
.cld-phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(7, 2, 15, 0.95) 0%, rgba(13, 3, 28, 0.82) 48%, rgba(102, 46, 145, 0.4) 100%),
              var(--cld-mesh);
}
.cld-phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cld-noise);
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cld-phero > * { position: relative; z-index: 1; }

.cld-phero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 992px) {
  .cld-phero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cld-phero__grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cld-phero__title { font-size: var(--cld-fs-h1); margin-bottom: var(--cld-space-5); }
.cld-phero__media {
  width: 100%;
  border-radius: var(--cld-radius-lg);
  object-fit: cover;
  box-shadow: var(--cld-shadow-lg);
}

/* breadcrumb */
.cld-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cld-space-2);
  margin-bottom: var(--cld-space-4);
  font-size: var(--cld-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cld-text-faint);
}
.cld-crumbs a { color: inherit; text-decoration: none; }
.cld-crumbs a:hover { color: var(--cld-magenta-300); }
.cld-crumbs li { list-style: none; display: inline-flex; align-items: center; gap: var(--cld-space-2); }
.cld-crumbs ol { display: contents; margin: 0; padding: 0; }
.cld-crumbs [aria-current="page"] { color: var(--cld-magenta-300); }

/* ==========================================================================
   SPLIT — image beside copy, alternating
   ========================================================================== */

.cld-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 992px) {
  .cld-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cld-split--flip .cld-split__media { order: 2; }
}
.cld-split__media {
  width: 100%;
  border-radius: var(--cld-radius-lg);
  object-fit: cover;
  box-shadow: var(--cld-shadow-lg);
}
.cld-split__body > :last-child { margin-bottom: 0; }
.cld-split__body p + p { margin-top: var(--cld-space-4); }

/* ==========================================================================
   OFFICES
   ========================================================================== */

.cld-offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--cld-space-5);
}
.cld-office {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--cld-radius-lg);
  background: #fff;
  border: 1px solid rgba(13, 3, 28, 0.08);
  box-shadow: var(--cld-shadow-sm);
  transition: transform var(--cld-dur-base) var(--cld-ease-out),
              box-shadow var(--cld-dur-base) var(--cld-ease-out);
}
.cld-office:hover { transform: translateY(-4px); box-shadow: var(--cld-shadow-md); }
.cld-office__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.cld-office__body { padding: var(--cld-space-5); display: flex; flex-direction: column; flex: 1; }
.cld-office__city {
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-h5);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cld-text-on-light);
  margin-bottom: var(--cld-space-3);
}
.cld-office__list { list-style: none; margin: 0 0 var(--cld-space-5); padding: 0; display: grid; gap: var(--cld-space-3); }
.cld-office__row {
  display: flex;
  align-items: flex-start;
  gap: var(--cld-space-3);
  font-size: var(--cld-fs-sm);
  line-height: 1.5;
  color: var(--cld-text-on-light-muted);
}
.cld-office__row a { color: inherit; text-decoration: none; }
.cld-office__row a:hover { color: var(--cld-magenta-500); text-decoration: underline; }
.cld-office__icon { flex: 0 0 auto; margin-top: 2px; color: var(--cld-magenta-500); }
.cld-office__cta { margin-top: auto; }

/* dark variant, used on the about page band */
.cld-section--dark .cld-office,
.cld-phero .cld-office {
  background: var(--cld-glass-bg);
  border-color: var(--cld-glass-border);
  backdrop-filter: blur(var(--cld-glass-blur));
  -webkit-backdrop-filter: blur(var(--cld-glass-blur));
}
.cld-section--dark .cld-office__city { color: #fff; }
.cld-section--dark .cld-office__row { color: var(--cld-text-muted); }

/* ==========================================================================
   INDUSTRIES — chip cloud
   ========================================================================== */

.cld-chipcloud { display: flex; flex-wrap: wrap; gap: var(--cld-space-3); }
.cld-chipcloud__item {
  padding: 0.55rem 1.1rem;
  border-radius: var(--cld-radius-pill);
  border: 1px solid var(--cld-glass-border);
  background: var(--cld-glass-bg);
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cld-text-muted);
  transition: border-color var(--cld-dur-fast) var(--cld-ease-out),
              color var(--cld-dur-fast) var(--cld-ease-out),
              background-color var(--cld-dur-fast) var(--cld-ease-out),
              transform var(--cld-dur-fast) var(--cld-ease-out);
}
.cld-chipcloud__item:hover {
  border-color: transparent;
  background: var(--cld-grad-brand-r);
  color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   SKILLS & CREDENTIALS
   ========================================================================== */

.cld-skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--cld-space-5);
}
/* The credential logos in assets/images/lp/ are WHITE artwork on transparent —
   they are invisible on a white card, so these tiles are dark by design. */
.cld-skill {
  padding: var(--cld-space-5);
  border-radius: var(--cld-radius-lg);
  background: var(--cld-ink-900);
  border: 1px solid var(--cld-glass-border);
  transition: border-color var(--cld-dur-base) var(--cld-ease-out),
              transform var(--cld-dur-base) var(--cld-ease-out);
}
.cld-skill:hover { border-color: var(--cld-magenta-500); transform: translateY(-4px); }
.cld-skill__title {
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-body);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--cld-space-4);
  padding-bottom: var(--cld-space-3);
  border-bottom: 1px solid var(--cld-glass-border);
}
.cld-skill__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cld-space-4); }
.cld-skill__logo {
  height: 28px; width: auto;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity var(--cld-dur-base) var(--cld-ease-out);
}
.cld-skill:hover .cld-skill__logo { opacity: 1; }

/* ==========================================================================
   TIMELINE — "Our Process"
   ========================================================================== */

.cld-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cld-space-6);
}
/* the spine */
.cld-timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cld-magenta-500) 12%, var(--cld-violet-500) 88%, transparent);
  opacity: 0.55;
}
.cld-tl-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--cld-space-5); align-items: start; }
.cld-tl-item__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cld-ink-900);
  border: 1px solid var(--cld-glass-border-strong);
  font-family: var(--cld-font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cld-magenta-300);
  transition: background-color var(--cld-dur-base) var(--cld-ease-out),
              color var(--cld-dur-base) var(--cld-ease-out),
              transform var(--cld-dur-base) var(--cld-ease-spring);
}
.cld-tl-item:hover .cld-tl-item__marker,
.cld-tl-item.is-active .cld-tl-item__marker {
  background: var(--cld-grad-brand-r);
  border-color: transparent;
  color: #fff;
  transform: scale(1.07);
}
.cld-tl-item__title { margin-bottom: var(--cld-space-2); font-size: var(--cld-fs-h4); }
.cld-tl-item__body { color: var(--cld-text-muted); margin: 0; max-width: var(--cld-maxw-text); }

@media (min-width: 992px) {
  /* alternate sides on wide screens */
  .cld-timeline--alt::before { left: 50%; transform: translateX(-50%); }
  .cld-timeline--alt .cld-tl-item { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
  .cld-timeline--alt .cld-tl-item__marker { grid-column: 2; }
  .cld-timeline--alt .cld-tl-item__content { grid-column: 3; }
  .cld-timeline--alt .cld-tl-item:nth-child(even) .cld-tl-item__content { grid-column: 1; grid-row: 1; text-align: right; }
  .cld-timeline--alt .cld-tl-item:nth-child(even) .cld-tl-item__body { margin-left: auto; }
}

/* ==========================================================================
   STAT BOXES — "Advantages in numbers"
   ========================================================================== */

.cld-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--cld-space-4);
}
.cld-statbox {
  padding: var(--cld-space-5);
  border-radius: var(--cld-radius-lg);
  background: var(--cld-glass-bg);
  border: 1px solid var(--cld-glass-border);
  backdrop-filter: blur(var(--cld-glass-blur));
  -webkit-backdrop-filter: blur(var(--cld-glass-blur));
  transition: border-color var(--cld-dur-base) var(--cld-ease-out),
              transform var(--cld-dur-base) var(--cld-ease-out);
}
.cld-statbox:hover { border-color: var(--cld-glass-border-strong); transform: translateY(-4px); }
.cld-statbox__label {
  display: block;
  font-size: var(--cld-fs-sm);
  color: var(--cld-text-muted);
  margin-bottom: var(--cld-space-3);
}
.cld-statbox__value {
  display: block;
  font-family: var(--cld-font-display);
  font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--cld-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   FEATURE LIST — "Why choose us"
   ========================================================================== */

.cld-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--cld-space-5);
}
.cld-feature {
  position: relative;
  padding: var(--cld-space-5) var(--cld-space-5) var(--cld-space-5) 0;
  border-top: 1px solid var(--cld-glass-border);
}
.cld-feature__title {
  display: flex;
  align-items: center;
  gap: var(--cld-space-3);
  margin-bottom: var(--cld-space-3);
  font-size: var(--cld-fs-h5);
}
.cld-feature__tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cld-grad-brand-r);
  color: #fff;
}
.cld-feature__body { color: var(--cld-text-muted); margin: 0; }

/* ==========================================================================
   CAPABILITY LIST — "We have extensive experience in"
   ========================================================================== */

.cld-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--cld-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cld-cap {
  display: flex;
  align-items: center;
  gap: var(--cld-space-3);
  padding: var(--cld-space-4);
  border-radius: var(--cld-radius-md);
  background: var(--cld-glass-bg);
  border: 1px solid var(--cld-glass-border);
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cld-text-muted);
  transition: border-color var(--cld-dur-fast) var(--cld-ease-out), color var(--cld-dur-fast) var(--cld-ease-out);
}
.cld-cap:hover { border-color: var(--cld-glass-border-strong); color: #fff; }
.cld-cap__chev { flex: 0 0 auto; color: var(--cld-magenta-400); }

/* ==========================================================================
   LOGO GRID — "Our clients"
   ========================================================================== */

.cld-logogrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cld-space-4);
}
@media (min-width: 576px) { .cld-logogrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The client logos in assets/images/home_assets/services/ are full-colour
   artwork baked onto an opaque cream background, so the cells are light —
   a dark cell plus a brightness filter washed them out to nothing. */
.cld-logogrid__cell {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--cld-space-4);
  border-radius: var(--cld-radius-md);
  background: #fff;
  border: 1px solid var(--cld-glass-border);
  transition: border-color var(--cld-dur-base) var(--cld-ease-out),
              transform var(--cld-dur-base) var(--cld-ease-out);
}
.cld-logogrid__cell:hover { border-color: var(--cld-magenta-500); transform: translateY(-3px); }
.cld-logogrid__img {
  max-height: 64px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--cld-dur-base) var(--cld-ease-out), opacity var(--cld-dur-base) var(--cld-ease-out);
}
.cld-logogrid__cell:hover .cld-logogrid__img { filter: none; opacity: 1; }

/* ==========================================================================
   SERVICE TILES — the four cross-sell cards
   ========================================================================== */

.cld-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--cld-space-4);
}
.cld-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--cld-radius-lg);
  text-decoration: none;
  box-shadow: var(--cld-shadow-md);
}
.cld-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: scale var(--cld-dur-slow) var(--cld-ease-out);
}
.cld-tile:hover .cld-tile__img { scale: 1.06; }
.cld-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--cld-space-6) var(--cld-space-4) var(--cld-space-4);
  background: linear-gradient(180deg, transparent, rgba(7, 2, 15, 0.9) 65%);
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-h5);
  font-weight: 800;
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.cld-newsletter { background: var(--cld-ink-950); padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.cld-newsletter__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cld-space-4);
  align-items: start;
}
@media (min-width: 768px) {
  .cld-newsletter__form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; }
}
.cld-newsletter__hint { display: block; margin-top: 0.35rem; font-size: var(--cld-fs-xs); color: var(--cld-text-faint); }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.cld-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 4vw, 4rem);
  align-items: start;
}
@media (min-width: 992px) {
  .cld-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cld-contact__aside { position: sticky; top: 8rem; }
}
.cld-contact__points { list-style: none; margin: var(--cld-space-6) 0 0; padding: 0; display: grid; gap: var(--cld-space-4); }
.cld-contact__points li { display: flex; align-items: flex-start; gap: var(--cld-space-3); color: var(--cld-text-muted); }
.cld-contact__tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(204, 6, 127, 0.18);
  color: var(--cld-magenta-300);
}

/* (The per-card map thumbnails were removed — the contact page now uses the
   same office card as About Us, with "Get directions" opening Google Maps.) */