/* ==========================================================================
   Creative Logo Design — shared components
   Everything is `.cld-` prefixed so it cannot collide with the legacy
   creative.css / basit.css / responsive.css rules the 45 service pages use.
   ========================================================================== */

/* ---------- layout primitives ------------------------------------------ */

.cld-section {
  position: relative;
  padding-block: var(--cld-section-y);
  isolation: isolate;
}
.cld-section--tight { padding-block: calc(var(--cld-section-y) * 0.62); }
.cld-section--flush-top { padding-top: 0; }

.cld-container {
  width: 100%;
  max-width: var(--cld-maxw);
  margin-inline: auto;
  padding-inline: var(--cld-gutter);
}
.cld-container--wide { max-width: 1560px; }

/* Dark canvas with the brand mesh + grain behind it. */
.cld-section--dark {
  background-color: var(--cld-ink-900);
  color: var(--cld-text);
}
.cld-section--dark::before,
.cld-section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--cld-z-deco);
  pointer-events: none;
}
.cld-section--dark::before { background-image: var(--cld-mesh); }
.cld-section--dark::after {
  background-image: var(--cld-noise);
  opacity: 0.42;
  mix-blend-mode: overlay;
}
.cld-section--dark > * { position: relative; z-index: var(--cld-z-content); }

.cld-section--light { background: var(--cld-bg-light); color: var(--cld-text-on-light); }
.cld-section--light-alt { background: var(--cld-bg-light-alt); color: var(--cld-text-on-light); }

/* Hairline rule that fades at both ends. */
.cld-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--cld-grad-hairline);
  opacity: 0.85;
}

/* ---------- eyebrow ----------------------------------------------------- */

.cld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cld-space-3);
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-xs);
  font-weight: 700;
  letter-spacing: var(--cld-tracking-wide);
  text-transform: uppercase;
  color: var(--cld-magenta-300);
  margin-bottom: var(--cld-space-4);
}
.cld-eyebrow::before {
  content: "";
  width: clamp(28px, 6vw, 60px);
  height: 2px;
  border-radius: 2px;
  background: var(--cld-grad-brand-r);
}
.cld-section--light .cld-eyebrow,
.cld-section--light-alt .cld-eyebrow { color: var(--cld-magenta-500); }

/* ---------- gradient display type --------------------------------------- */

.cld-gradient-text {
  background: var(--cld-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keeps descenders from being clipped by the text-fill */
  padding-bottom: 0.08em;
}
.cld-section--light .cld-gradient-text,
.cld-section--light-alt .cld-gradient-text { background: var(--cld-grad-brand); -webkit-background-clip: text; background-clip: text; }

.cld-display {
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-display);
  font-weight: 800;
  line-height: var(--cld-lh-tight);
  letter-spacing: var(--cld-tracking-tight);
  text-wrap: balance;
  margin-bottom: var(--cld-space-5);
}

.cld-lead {
  font-size: var(--cld-fs-lead);
  line-height: var(--cld-lh-body);
  color: var(--cld-text-muted);
  max-width: var(--cld-maxw-text);
}
.cld-section--light .cld-lead,
.cld-section--light-alt .cld-lead { color: var(--cld-text-on-light-muted); }

/* Section header: title left, action right, stacks on small screens. */
.cld-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cld-space-5);
  margin-bottom: var(--cld-space-7);
}
.cld-section-head__text { max-width: 58ch; }
.cld-section-head__text > :last-child { margin-bottom: 0; }

/* ---------- buttons ----------------------------------------------------- */

.cld-btn {
  --_bg: transparent;
  --_fg: currentColor;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cld-space-3);
  padding: 0.9rem 1.75rem;
  border: 0;
  border-radius: var(--cld-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--cld-dur-fast) var(--cld-ease-out),
              box-shadow var(--cld-dur-base) var(--cld-ease-out),
              background-color var(--cld-dur-base) var(--cld-ease-out),
              color var(--cld-dur-base) var(--cld-ease-out);
}
.cld-btn:hover { transform: translateY(-2px); }
.cld-btn:active { transform: translateY(0); }
.cld-btn__icon { flex: 0 0 auto; transition: transform var(--cld-dur-base) var(--cld-ease-out); }
.cld-btn:hover .cld-btn__icon { transform: translateX(3px); }

/* filled brand gradient */
.cld-btn--primary {
  --_fg: #fff;
  background-image: var(--cld-grad-brand);
  background-size: 160% 100%;
  background-position: 0% 50%;
  box-shadow: var(--cld-shadow-glow);
  transition: transform var(--cld-dur-fast) var(--cld-ease-out),
              box-shadow var(--cld-dur-base) var(--cld-ease-out),
              background-position var(--cld-dur-slow) var(--cld-ease-out);
}
.cld-btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 18px 54px -12px rgba(204, 6, 127, 0.7);
  color: #fff;
}

/* gradient hairline border over the dark canvas */
.cld-btn--ghost {
  --_fg: #fff;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px var(--cld-glass-border-strong);
  backdrop-filter: blur(var(--cld-glass-blur));
  -webkit-backdrop-filter: blur(var(--cld-glass-blur));
}
.cld-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  color: #fff;
}

/* outlined, for light sections */
.cld-btn--outline {
  --_fg: var(--cld-text-on-light);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(13, 3, 28, 0.22);
}
.cld-btn--outline:hover {
  --_fg: #fff;
  background: var(--cld-ink-900);
  box-shadow: inset 0 0 0 1.5px var(--cld-ink-900);
}

.cld-btn--light {
  --_fg: var(--cld-text-on-light);
  background: #fff;
  box-shadow: var(--cld-shadow-md);
}
.cld-btn--light:hover { background: var(--cld-magenta-50); color: var(--cld-magenta-700); }

.cld-btn--lg { padding: 1.05rem 2.25rem; font-size: 0.9375rem; }
.cld-btn--block { width: 100%; }

.cld-btn[disabled],
.cld-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* play button with a pulsing ring */
.cld-btn-play {
  display: inline-flex;
  align-items: center;
  gap: var(--cld-space-4);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-family: var(--cld-font-display);
  font-weight: 700;
  font-size: var(--cld-fs-body);
  cursor: pointer;
}
.cld-btn-play__ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cld-grad-brand-r);
  color: #fff;
  box-shadow: var(--cld-shadow-glow);
}
.cld-btn-play__ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--cld-magenta-400);
  opacity: 0;
  animation: cld-pulse 2.6s var(--cld-ease-out) infinite;
}
@keyframes cld-pulse {
  0%   { opacity: 0.7; transform: scale(0.9); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}
.cld-btn-play:hover .cld-btn-play__ring { transform: scale(1.06); }
.cld-btn-play__ring { transition: transform var(--cld-dur-base) var(--cld-ease-spring); }

/* ---------- cards -------------------------------------------------------- */

.cld-card {
  position: relative;
  display: flex;
  flex-direction: column;
  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: transform var(--cld-dur-base) var(--cld-ease-out),
              border-color var(--cld-dur-base) var(--cld-ease-out),
              background-color var(--cld-dur-base) var(--cld-ease-out);
}
.cld-card:hover {
  transform: translateY(-4px);
  background: var(--cld-glass-bg-hover);
  border-color: var(--cld-glass-border-strong);
}
.cld-card > :last-child { margin-bottom: 0; }

.cld-card--light {
  background: #fff;
  border-color: rgba(13, 3, 28, 0.08);
  box-shadow: var(--cld-shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cld-card--light:hover { box-shadow: var(--cld-shadow-md); border-color: rgba(204, 6, 127, 0.28); }

/* glow that follows the pointer, set by home.js */
.cld-card--spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    18rem circle at var(--cld-mx, 50%) var(--cld-my, 50%),
    rgba(204, 6, 127, 0.16),
    transparent 62%
  );
  transition: opacity var(--cld-dur-base) var(--cld-ease-out);
}
.cld-card--spot:hover::before { opacity: 1; }

/* ---------- marquee ------------------------------------------------------ */

.cld-marquee {
  --_gap: clamp(2rem, 5vw, 4.5rem);
  --_speed: 38s;
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--_gap);
  /* fade both edges instead of a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cld-marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--_gap);
  min-width: 100%;
  animation: cld-marquee var(--_speed) linear infinite;
}
.cld-marquee:hover .cld-marquee__track,
.cld-marquee:focus-within .cld-marquee__track { animation-play-state: paused; }
@keyframes cld-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--_gap))); }
}
@media (prefers-reduced-motion: reduce) {
  .cld-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .cld-marquee__track { animation: none; }
}

/* ---------- scroll-snap carousel ----------------------------------------- */

.cld-carousel {
  display: flex;
  gap: var(--cld-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Vertical padding only — a negative inline margin pushed the rail wider than
     its grid column and spilled past the container on the right. */
  padding-block: var(--cld-space-3);
}
.cld-carousel::-webkit-scrollbar { display: none; }
.cld-carousel > * { scroll-snap-align: start; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .cld-carousel { scroll-behavior: auto; }
}

.cld-carousel-nav {
  display: inline-flex;
  gap: var(--cld-space-3);
}
.cld-carousel-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--cld-glass-border-strong);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: background-color var(--cld-dur-base) var(--cld-ease-out),
              border-color var(--cld-dur-base) var(--cld-ease-out),
              transform var(--cld-dur-fast) var(--cld-ease-out);
}
.cld-carousel-btn:hover:not(:disabled) {
  background: var(--cld-grad-brand-r);
  border-color: transparent;
  color: #fff;
  transform: scale(1.06);
}
.cld-carousel-btn:disabled { opacity: 0.3; cursor: default; }
.cld-section--light .cld-carousel-btn,
.cld-section--light-alt .cld-carousel-btn { border-color: rgba(13, 3, 28, 0.18); }

/* dots */
.cld-dots { display: inline-flex; gap: var(--cld-space-2); align-items: center; }
.cld-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--cld-radius-pill);
  background: currentColor;
  opacity: 0.28;
  cursor: pointer;
  transition: width var(--cld-dur-base) var(--cld-ease-out), opacity var(--cld-dur-base) var(--cld-ease-out);
}
.cld-dot[aria-selected="true"] { width: 28px; opacity: 1; background: var(--cld-magenta-500); }

/* ---------- accordion (native details/summary) ---------------------------- */

.cld-acc { border-top: 1px solid var(--cld-glass-border); }
.cld-acc__item { border-bottom: 1px solid var(--cld-glass-border); }
.cld-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cld-space-5);
  padding: var(--cld-space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--cld-font-display);
  font-size: var(--cld-fs-h5);
  font-weight: 700;
  line-height: var(--cld-lh-snug);
  transition: color var(--cld-dur-base) var(--cld-ease-out);
}
.cld-acc__summary::-webkit-details-marker { display: none; }
.cld-acc__summary:hover { color: var(--cld-magenta-300); }
.cld-section--light .cld-acc__summary:hover,
.cld-section--light-alt .cld-acc__summary:hover { color: var(--cld-magenta-500); }

.cld-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cld-glass-border-strong);
  transition: background-color var(--cld-dur-base) var(--cld-ease-out),
              border-color var(--cld-dur-base) var(--cld-ease-out),
              transform var(--cld-dur-base) var(--cld-ease-out);
}
.cld-acc__icon::before,
.cld-acc__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: currentColor;
  border-radius: 2px;
  transition: opacity var(--cld-dur-base) var(--cld-ease-out),
              rotate var(--cld-dur-base) var(--cld-ease-out);
}
.cld-acc__icon::before { width: 14px; height: 2px; }
.cld-acc__icon::after  { width: 2px; height: 14px; }
[open] > .cld-acc__summary .cld-acc__icon {
  background: var(--cld-grad-brand-r);
  border-color: transparent;
  color: #fff;
  rotate: 180deg;
}
[open] > .cld-acc__summary .cld-acc__icon::after { opacity: 0; }

.cld-acc__body {
  padding-bottom: var(--cld-space-5);
  max-width: var(--cld-maxw-text);
  color: var(--cld-text-muted);
}
.cld-section--light .cld-acc__body,
.cld-section--light-alt .cld-acc__body { color: var(--cld-text-on-light-muted); }
.cld-acc__body > :last-child { margin-bottom: 0; }
.cld-acc__body ul { padding-left: 1.1rem; margin-bottom: var(--cld-space-4); }
.cld-acc__body li { margin-bottom: var(--cld-space-2); }

/* animate the panel open when the browser supports it */
@supports (interpolate-size: allow-keywords) {
  .cld-acc__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--cld-dur-base) var(--cld-ease-out), content-visibility var(--cld-dur-base) allow-discrete;
  }
  .cld-acc__item[open]::details-content { block-size: auto; }
}

/* ---------- forms --------------------------------------------------------- */

.cld-field { position: relative; }

/* NOTE the doubled selector. creative.css / basit.css carry a bare
   `input[type=text]{background:#fff;color:#000;height:43.3px}` rule whose
   specificity (0,1,1) beats a single class, so these must be (0,2,0) to win. */
.cld-field .cld-field__input {
  width: 100%;
  height: auto;
  padding: 1.4rem 1.1rem 0.6rem;
  border: 1px solid var(--cld-glass-border);
  border-radius: var(--cld-radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--cld-font-body);
  font-size: var(--cld-fs-body);
  line-height: 1.4;
  transition: border-color var(--cld-dur-base) var(--cld-ease-out),
              background-color var(--cld-dur-base) var(--cld-ease-out),
              box-shadow var(--cld-dur-base) var(--cld-ease-out);
}
.cld-field .cld-field__input::placeholder { color: transparent; }
.cld-field .cld-field__input:hover { border-color: var(--cld-glass-border-strong); }
.cld-field .cld-field__input:focus {
  outline: none;
  border-color: var(--cld-magenta-400);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(204, 6, 127, 0.22);
}
.cld-field textarea.cld-field__input { min-height: 8rem; resize: vertical; padding-top: 1.7rem; }
/* Chrome's autofill repaints the field white; keep it on-theme. */
.cld-field .cld-field__input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px var(--cld-ink-800) inset;
  caret-color: #fff;
}

/* floating label — rides on :placeholder-shown so it needs no JS */
.cld-field__label {
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  color: var(--cld-text-faint);
  font-size: var(--cld-fs-body);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--cld-dur-fast) var(--cld-ease-out),
              color var(--cld-dur-fast) var(--cld-ease-out);
}
.cld-field__input:focus + .cld-field__label,
.cld-field__input:not(:placeholder-shown) + .cld-field__label {
  transform: translateY(-0.62rem) scale(0.74);
  color: var(--cld-magenta-300);
}
/* A <select> always has a value, so its label sits raised permanently. */
select.cld-field__input + .cld-field__label {
  transform: translateY(-0.62rem) scale(0.74);
}
.cld-field__input:not(:placeholder-shown):invalid + .cld-field__label { color: #ff8080; }
.cld-field .cld-field__input:not(:placeholder-shown):invalid { border-color: rgba(255, 128, 128, 0.6); }

.cld-field__hint { display: block; margin-top: 0.35rem; font-size: var(--cld-fs-xs); color: #ff9a9a; }

/* intl-tel-input drops a wrapper around the input; make it fill the field */
.cld-field .iti { width: 100%; display: block; }
.cld-field .iti--allow-dropdown .cld-field__input { padding-left: 3.4rem; }
.cld-field .iti__country-list { color: #14101c; }
/* keep the floating label clear of the country flag button */
.cld-field .iti ~ .cld-field__label { left: 3.4rem; }

/* ---------- scroll reveal -------------------------------------------------- */

/* The hidden state is gated on `.cld-js`, which home.js adds to <html> as soon
   as it executes. If the script 404s, is blocked, or throws while parsing, the
   selector never matches and every section stays visible. */
.cld-js .cld-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--cld-dur-slow) var(--cld-ease-out),
              transform var(--cld-dur-slow) var(--cld-ease-out);
  transition-delay: var(--cld-reveal-delay, 0ms);
}
.cld-js .cld-reveal.is-visible { opacity: 1; transform: none; }

/* Printing never scrolls, so nothing would ever be revealed. */
@media print {
  .cld-js .cld-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- utilities ------------------------------------------------------ */

.cld-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cld-stack > * + * { margin-top: var(--cld-space-4); }
.cld-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cld-space-5); }