/* ======================================================================
   CLICKMIND — MAIN STYLESHEET
   ----------------------------------------------------------------------
   Structure:
   1. CSS variables (edit colors/fonts here)
   2. Reset & base
   3. Utilities (layout, text, buttons)
   4. Animations
   5. Header + mobile drawer nav
   6. Hero
   7. Services grid (with hover lift effect)
   8. Blog promotion / signature banner
   9. About section
   10. Approach cards
   11. CTA banner
   12. Process steps
   13. Principles section
   14. Footer
   15. Contact page (form)
   16. Legal / doc pages
   17. Responsive (mobile)
   ====================================================================== */

/* -----------------------------------------------------------------------
   1. CSS VARIABLES — change brand colors/fonts here, they cascade
      everywhere automatically.
----------------------------------------------------------------------- */
:root {
  --color-bg: #0D0A16;
  --color-text: #F3F0FB;
  --color-text-soft: #D6CFE8;
  --color-text-muted: #A79FBE;
  --color-text-faint: #79708F;

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-soft: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  --color-accent: #B9A6FF;         /* light lavender — links */
  --color-accent-hover: #CDBCFF;
  --color-purple-light: #A78BFA;   /* icon/highlight lavender */
  --color-purple: #7C4DFF;         /* primary gradient purple */
  --color-purple-deep: #4A1D9E;
  --color-purple-glow: #B36BFF;    /* hot-pink-purple accent glow */
  --color-lilac: #C4B5FD;          /* pale icon lilac */

  --gradient-cta: linear-gradient(150deg, #A78BFA, #7C4DFF);
  --gradient-signature: linear-gradient(135deg, #1B0F3A 0%, #2A1163 45%, #4A1D9E 100%);
  --gradient-process-bg: linear-gradient(165deg, #FFFFFF 0%, #F0EAFF 60%, #E4DAFF 100%);

  --color-error: #D6336C;

  /* Contact form sits on a white card (unlike the rest of the dark-mode
     site), so it gets its own darker text tones for label/placeholder
     contrast against that white background. */
  --color-form-label: #332C4D;
  --color-form-placeholder: #5C5478;

  /* Light-section text colors (Process / Principles use a white background) */
  --color-text-on-light: #1A1230;
  --color-text-on-light-muted: #655C82;

  --font-heading: 'Sora', sans-serif;
  --font-body: 'Outfit', sans-serif;

  --container-max: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -----------------------------------------------------------------------
   2. RESET & BASE
----------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

img { max-width: 100%; }

input, select, textarea { font-family: var(--font-body); }
input::placeholder, textarea::placeholder { color: var(--color-form-placeholder); }

/* -----------------------------------------------------------------------
   3. UTILITIES
----------------------------------------------------------------------- */
.cm-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

.cm-sec {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 112px 40px;
  position: relative;
}

.cm-eyebrow {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-purple-light);
  font-weight: 600;
  margin-bottom: 16px;
}

.cm-eyebrow--on-light { color: var(--color-purple); }

.cm-h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #FBFAFF;
}

.cm-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.cm-h2--sm { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; }
.cm-h2--on-light { color: var(--color-text-on-light); }

.cm-accent-text { color: var(--color-accent); }

/* Buttons / pills */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}

.cm-btn--primary {
  background: var(--gradient-cta);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(124, 77, 255, 0.45);
}

.cm-btn--white {
  background: #fff;
  color: #2A1758;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.cm-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(12px);
  color: var(--color-text);
}

.cm-btn--outline-light {
  background: #F4EFFF;
  border: 1px solid rgba(124, 77, 255, 0.3);
  color: #5B2FCC;
  font-size: 15px;
  padding: 12px 24px;
}

/* -----------------------------------------------------------------------
   4. ANIMATIONS
----------------------------------------------------------------------- */
@keyframes cmRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cmGlowA {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.8; }
  50%      { transform: translate(4%,-3%) scale(1.12); opacity: 1; }
}

@keyframes cmGlowB {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.65; }
  50%      { transform: translate(-5%,4%) scale(1.15); opacity: 0.95; }
}

.cm-rise { animation: cmRise 0.7s ease 0.08s both; }
.cm-rise--1 { animation: cmRise 0.7s ease 0.16s both; }
.cm-rise--2 { animation: cmRise 0.7s ease 0.24s both; }

/* Scroll-reveal, toggled by js/main.js (adds .cm-in when a .cm-reveal
   element enters the viewport) */
.cm-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.cm-reveal.cm-in { opacity: 1; transform: none; }
.cm-reveal:nth-child(2) { transition-delay: .07s; }
.cm-reveal:nth-child(3) { transition-delay: .14s; }
.cm-reveal:nth-child(4) { transition-delay: .21s; }
.cm-reveal:nth-child(5) { transition-delay: .28s; }
.cm-reveal:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .cm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -----------------------------------------------------------------------
   5. HEADER + MOBILE DRAWER NAV
----------------------------------------------------------------------- */
.cm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 40px;
  background: rgba(18, 12, 31, 0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--color-border-strong);
}

.cm-logo { display: flex; align-items: center; text-decoration: none; }
.cm-logo img { height: 28px; display: block; }

.cm-nav { display: flex; align-items: center; gap: 30px; }
.cm-navlinks { display: flex; align-items: center; gap: 30px; }
.cm-navlinks a { text-decoration: none; color: #C6BEDD; font-size: 15px; font-weight: 500; }

.cm-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--gradient-cta);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(124, 77, 255, 0.4);
}

/* Hamburger button — hidden on desktop, shown under 760px */
.cm-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.cm-burger-icon { position: relative; display: block; width: 20px; height: 14px; pointer-events: none; }

.cm-burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}
.cm-burger-top { top: 0; }
.cm-burger-mid { top: 6px; }
.cm-burger-bot { top: 12px; }

/* Mobile drawer + overlay, toggled by js/main.js adding .cm-nav-open
   on the .cm-nav-root wrapper */
.cm-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(8, 5, 16, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.cm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: min(320px, 86vw);
  height: 100%;
  background: #140C25;
  border-left: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  transform: translateX(100%);
  transition: transform .34s var(--ease);
}

.cm-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.cm-drawer-head img { height: 26px; }

.cm-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cm-drawer a {
  padding: 16px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: #E7E1F5;
  font-size: 18px;
  font-weight: 600;
}

.cm-drawer-cta {
  margin-top: 26px;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--gradient-cta);
  color: #fff !important;
  text-align: center;
  border-bottom: none !important;
  box-shadow: 0 10px 30px rgba(124, 77, 255, 0.4);
}

.cm-nav-root.cm-nav-open .cm-drawer-overlay { opacity: 1; pointer-events: auto; }
.cm-nav-root.cm-nav-open .cm-drawer { transform: translateX(0); box-shadow: -30px 0 70px rgba(0, 0, 0, 0.5); }
.cm-nav-root.cm-nav-open .cm-burger-top { top: 6px; transform: rotate(45deg); }
.cm-nav-root.cm-nav-open .cm-burger-mid { opacity: 0; }
.cm-nav-root.cm-nav-open .cm-burger-bot { top: 6px; transform: rotate(-45deg); }

/* -----------------------------------------------------------------------
   6. HERO
----------------------------------------------------------------------- */
.cm-hero {
  position: relative;
  margin-top: -74px;
  padding-top: 74px;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cm-hero-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

.cm-hero-glow--a {
  width: 70%; height: 80%; left: -12%; top: -18%;
  filter: blur(90px);
  background: radial-gradient(circle at center, rgba(167,139,250,0.28) 0%, rgba(167,139,250,0) 68%);
  animation: cmGlowA 14s ease-in-out infinite;
}

.cm-hero-glow--b {
  width: 75%; height: 90%; right: -18%; bottom: -24%;
  filter: blur(100px);
  background: radial-gradient(circle at center, rgba(108,76,255,0.34) 0%, rgba(108,76,255,0) 66%);
  animation: cmGlowB 18s ease-in-out infinite;
}

.cm-hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--color-bg); }

.cm-hero-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cm-hero-fade--radial { background: radial-gradient(90% 90% at 50% 46%, rgba(13,10,22,0.28) 0%, rgba(13,10,22,0.66) 66%, rgba(13,10,22,0.9) 100%); }
.cm-hero-fade--v { background: linear-gradient(180deg, rgba(13,10,22,0.2) 0%, rgba(13,10,22,0) 24%, rgba(13,10,22,0) 74%, var(--color-bg) 100%); }

.cm-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cm-hero-inner { max-width: 860px; margin: 0 auto; }

.cm-hero-inner p {
  margin: 26px auto 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: #CFC7E4;
  max-width: 600px;
}

.cm-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  pointer-events: auto;
}

/* -----------------------------------------------------------------------
   7. SERVICES GRID (with hover lift + icon rotate)
----------------------------------------------------------------------- */
.cm-mb { margin-bottom: 52px; }

.cm-section-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
}

.cm-section-head-simple { position: relative; z-index: 1; max-width: 620px; margin-bottom: 56px; }
.cm-section-head-simple--wide { margin-bottom: 64px; }
.cm-section-head-lede { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }

.cm-grid { position: relative; z-index: 1; display: grid; gap: 20px; }
.cm-grid--services { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cm-grid--approach { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cm-grid--principles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cm-tile {
  padding: 32px 30px 34px;
  border: 1px solid var(--color-border);
  border-top: 2px solid rgba(167, 139, 250, 0.55);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease, border-top-color .35s ease;
}

.cm-tile:hover {
  transform: translateY(-8px);
  border-top-color: var(--color-purple-glow);
  border-color: rgba(179, 107, 255, 0.45);
  box-shadow: 0 22px 48px rgba(124, 77, 255, 0.32);
}

.cm-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: transform .35s var(--ease), background .35s ease;
}

.cm-tile:hover .cm-tile-icon { transform: scale(1.1) rotate(-6deg); background: rgba(167, 139, 250, 0.28); }

.cm-tile h3 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; }
.cm-tile p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-text-muted); }

/* Service icons are inline Lucide SVGs (https://lucide.dev) — they
   inherit color via currentColor, so recoloring is just one variable. */
.cm-tile-icon svg { width: 22px; height: 22px; color: var(--color-lilac); }

/* Approach tile (with corner glow) */
.cm-tile--glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 34px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.cm-tile--glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -70px;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(55px);
  background: radial-gradient(circle at center, rgba(167,139,250,0.4) 0%, rgba(167,139,250,0) 70%);
}

.cm-tile--glow h3 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 700; font-size: 21px; }
.cm-tile--glow p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-text-muted); }

/* -----------------------------------------------------------------------
   8. BLOG PROMOTION / SIGNATURE BANNER
----------------------------------------------------------------------- */
.cm-signature-section { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 56px 40px; }

.cm-signature {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid var(--color-border-strong);
  background: var(--gradient-signature);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 30px 70px rgba(0,0,0,0.4);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.cm-signature-glow {
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  right: -160px;
  top: -160px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle at center, rgba(179,107,255,0.5) 0%, rgba(179,107,255,0) 70%);
  pointer-events: none;
}

.cm-signature-copy { position: relative; z-index: 1; }

.cm-signature-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--color-border-strong);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E7DDFF;
  font-weight: 600;
  margin-bottom: 22px;
}

.cm-signature-copy h2 { margin: 0 0 20px; color: #fff; }
.cm-signature-copy p { margin: 0 0 32px; font-size: 17px; line-height: 1.7; color: #D9CFF3; max-width: 520px; }

.cm-signature-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; }

.cm-signature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cm-signature-item:last-child { border-bottom: none; }

.cm-signature-num { flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-purple-glow); }
.cm-signature-item-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 4px; }
.cm-signature-item-sub { font-size: 15px; color: #C0B4E0; }

/* -----------------------------------------------------------------------
   9. ABOUT
----------------------------------------------------------------------- */
.cm-about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.cm-about-head { display: none; } /* shown/reordered on mobile only */

.cm-about-photo { position: relative; }

.cm-about-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-about-photo-glow {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(circle at center, rgba(167,139,250,0.55) 0%, rgba(124,77,255,0.25) 45%, rgba(124,77,255,0) 72%);
}

.cm-about-photo img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(124,77,255,0.45));
}

.cm-about-badge {
  position: absolute;
  right: -18px;
  bottom: -18px;
  padding: 18px 24px;
  border-radius: 18px;
  background: var(--gradient-cta);
  box-shadow: 0 18px 40px rgba(124, 77, 255, 0.5);
}

.cm-about-badge-num { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: #fff; line-height: 1; }
.cm-about-badge-label { font-size: 13px; color: #EDE7FF; margin-top: 3px; }

.cm-about-copy { display: flex; flex-direction: column; gap: 22px; }
.cm-about-copy h2 { margin: 0 0 4px; }
.cm-about-copy p:nth-of-type(1) { margin: 0; font-size: 18px; line-height: 1.65; color: var(--color-text-soft); }
.cm-about-copy p:nth-of-type(2) { margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-text-muted); }

.cm-about-points { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
.cm-about-point { display: flex; align-items: center; gap: 11px; }
.cm-about-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-purple-light); box-shadow: 0 0 12px rgba(167,139,250,0.7); }
.cm-about-point span:last-child { font-family: var(--font-heading); font-weight: 600; font-size: 16px; }

/* -----------------------------------------------------------------------
   10. CTA BANNER
----------------------------------------------------------------------- */
.cm-cta-section { max-width: var(--container-max); margin: 0 auto; padding: 56px 40px; }

.cm-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(120deg, rgba(124,77,255,0.28), rgba(167,139,250,0.12));
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 20px 50px rgba(0,0,0,0.35);
  padding: 72px 56px;
}

.cm-cta-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 140% at 90% 10%, rgba(196,181,253,0.25) 0%, rgba(196,181,253,0) 55%);
}

.cm-cta-card-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cm-cta-copy { max-width: 620px; }
.cm-cta-copy h2 { margin: 0 0 14px; }
.cm-cta-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-text-soft); }

/* -----------------------------------------------------------------------
   11. PROCESS STEPS (light background section)
----------------------------------------------------------------------- */
.cm-process-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border-soft);
  background: var(--gradient-process-bg);
}

.cm-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.cm-steps-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 1px;
  background: rgba(26, 18, 48, 0.14);
}

.cm-step { position: relative; }

.cm-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--gradient-cta);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.cm-step h3 {
  margin: 44px 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  color: var(--color-text-on-light);
}

.cm-step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-on-light-muted); max-width: 260px; }

/* -----------------------------------------------------------------------
   12. PRINCIPLES SECTION (light background)
----------------------------------------------------------------------- */
.cm-principle {
  padding: 32px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 18px;
  background: #fff;
}

.cm-principle-num { font-family: var(--font-heading); font-weight: 800; font-size: 34px; color: var(--color-purple); line-height: 1; margin-bottom: 14px; }
.cm-principle h3 { margin: 0 0 9px; color: var(--color-text-on-light); font-family: var(--font-heading); font-weight: 700; font-size: 20px; }
.cm-principle p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-on-light-muted); }

/* -----------------------------------------------------------------------
   13. FOOTER
----------------------------------------------------------------------- */
.cm-foot {
  background: rgba(13, 10, 22, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border-strong);
  padding: 44px 40px 32px;
  color: #C6BEDD;
}

.cm-foot-top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}

.cm-foot-top img { height: 36px; display: block; }

.cm-foot-nav { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.cm-foot-nav a { text-decoration: none; color: #C6BEDD; font-size: 15px; }

.cm-foot-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.16); }

.cm-foot-bottom {
  max-width: 1200px;
  margin: 28px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #9A90B4;
}

.cm-foot-bottom-left { line-height: 1.6; }
.cm-foot-bottom-left strong { color: var(--color-text); font-weight: 600; }
.cm-foot-bottom-left a { color: var(--color-accent); text-decoration: none; }
.cm-foot-copyright { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }

/* -----------------------------------------------------------------------
   14. CONTACT PAGE
----------------------------------------------------------------------- */
.cm-contact {
  position: relative;
  overflow: hidden;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 96px 40px 112px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
}

.cm-contact-glow {
  position: absolute;
  z-index: 0;
  width: 55%;
  height: 70%;
  right: -16%;
  top: -8%;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(circle at center, rgba(124,77,255,0.24) 0%, rgba(124,77,255,0) 66%);
}

.cm-contact-intro { position: relative; z-index: 1; }
.cm-contact-intro h1 { margin: 0 0 20px; font-size: clamp(38px, 5vw, 64px); }
.cm-contact-intro p { margin: 0 0 40px; font-size: 18px; line-height: 1.65; color: #C0B8D6; max-width: 420px; }

.cm-contact-details { display: flex; flex-direction: column; gap: 24px; }
.cm-contact-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; margin-bottom: 6px; }
.cm-contact-value { font-size: 17px; color: var(--color-text); text-decoration: none; line-height: 1.5; }

.cm-form-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(124, 77, 255, 0.14);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 44px;
}

.cm-form { display: flex; flex-direction: column; gap: 26px; }

.cm-field { display: flex; flex-direction: column; gap: 7px; }
.cm-field label { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-form-label); }

.cm-field input,
.cm-field select,
.cm-field textarea {
  padding: 12px 2px;
  border: none;
  border-bottom: 2px solid #E4DEF2;
  background: transparent;
  color: #1A1230;
  font-size: 16px;
  outline: none;
}

.cm-field input:focus,
.cm-field select:focus,
.cm-field textarea:focus { border-bottom-color: var(--color-purple); }

.cm-field textarea { resize: vertical; }

/* Custom dropdown arrow so the select clearly reads as a dropdown
   (native arrows are inconsistent/invisible across browsers) */
.cm-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23332C4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 18px;
}

.cm-field-error { font-size: 13px; color: var(--color-error); }

.cm-form-submit {
  margin-top: 6px;
  padding: 16px 28px;
  border: none;
  border-radius: 14px;
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: 0 12px 30px rgba(124, 77, 255, 0.35);
}

.cm-form-success { text-align: center; padding: 32px 8px; }

.cm-form-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(124, 77, 255, 0.12);
  border: 1px solid rgba(124, 77, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-form-success-check {
  display: block;
  width: 20px;
  height: 11px;
  border-left: 3px solid var(--color-purple);
  border-bottom: 3px solid var(--color-purple);
  transform: rotate(-45deg);
  margin-top: -4px;
}

.cm-form-success h3 { margin: 0 0 10px; color: var(--color-text-on-light); font-family: var(--font-heading); font-weight: 700; font-size: 26px; }
.cm-form-success p { margin: 0 auto 26px; font-size: 16px; line-height: 1.6; color: var(--color-text-on-light-muted); max-width: 340px; }

/* -----------------------------------------------------------------------
   15. LEGAL / DOC PAGES
----------------------------------------------------------------------- */
.cm-doc { max-width: 820px; margin: 0 auto; padding: 80px 40px 104px; }

.cm-doc h1 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
.cm-doc-updated { margin: 0 0 44px; color: var(--color-text-muted); font-size: 15px; }

.cm-doc-body { display: flex; flex-direction: column; gap: 32px; font-size: 16px; line-height: 1.75; color: #C0B8D6; }
.cm-doc-body h2 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--color-text); }
.cm-doc-body p { margin: 0; }

.cm-cookie-types { display: flex; flex-direction: column; gap: 14px; }
.cm-cookie-type {
  padding: 18px 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}
.cm-cookie-type strong { color: var(--color-text); }

/* -----------------------------------------------------------------------
   16. RESPONSIVE
----------------------------------------------------------------------- */
@media (max-width: 760px) {
  .cm-header { padding: 14px 20px; }
  .cm-navlinks { display: none; }
  .cm-nav-cta { display: none; }
  .cm-burger { display: inline-flex; }

  .cm-foot { padding: 32px 20px 24px; }
  .cm-foot-top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cm-foot-bottom { flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 16px; }

  .cm-sec { padding-top: 68px; padding-bottom: 68px; padding-left: 20px; padding-right: 20px; }
  .cm-container { padding-left: 20px; padding-right: 20px; }
  .cm-mb { margin-bottom: 32px; }

  .cm-section-head,
  .cm-section-head-simple { margin-bottom: 28px; }

  /* Hero: full first-screen height on mobile. Uses dvh (falls back to
     vh where unsupported) so mobile browser toolbars don't cause the
     section to jump/clip. Content still sizes itself via flex
     centering — only the minimum height is fixed, so nothing overflows
     if the heading wraps to an extra line. */
  .cm-hero {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    align-items: stretch;
    padding-top: 142px; /* 74px header-offset cancel + 68px visual gap */
    padding-bottom: 0;
  }
  /* Left-aligned hero on mobile (reference layout), instead of the
     desktop's centered layout. The content column stretches the full
     height of the hero and the CTA row is pushed to the bottom via
     margin-top: auto, landing exactly 60px above the hero's bottom
     edge regardless of how much text is above it. */
  .cm-hero-content { text-align: left; align-items: flex-start; padding-bottom: 60px; }
  .cm-hero-inner { max-width: none; margin: 0; display: flex; flex-direction: column; flex: 1; }
  .cm-hero-inner p { margin: 14px 0 0; max-width: none; }

  /* Larger, viewport-adaptive hero heading instead of one fixed size */
  .cm-hero-inner .cm-h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.02; }

  .cm-cta-row { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; margin-top: 20px; }
  .cm-hero-inner .cm-cta-row { margin-top: auto; padding-top: 40px; }
  .cm-btn { width: 100%; justify-content: center; }

  .cm-step { padding: 16px 14px; }

  .cm-h1 { font-size: 38px; line-height: 1.04; }
  .cm-h2 { font-size: 32px; line-height: 1.08; }

  /* Content cards: tighter top/bottom padding, readability preserved */
  .cm-tile { padding: 24px 20px 26px; }
  .cm-tile-icon { margin-bottom: 16px; }
  .cm-tile--glow { padding: 24px; }
  .cm-principle { padding: 22px; }
  .cm-cta-card { padding: 40px 26px; }
  .cm-cta-card-inner { gap: 20px; }
  .cm-doc { padding: 40px 20px 56px; }
  .cm-doc-updated { margin-bottom: 28px; }

  /* Services: simple smooth horizontal scroll on mobile (no snapping —
     just native momentum scrolling) */
  .cm-grid--services {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    margin: 0 -20px;
    padding: 4px 20px 20px;
    scrollbar-width: none;
  }
  .cm-grid--services::-webkit-scrollbar { display: none; }
  .cm-grid--services > * { flex: 0 0 82%; }

  .cm-about-grid { grid-template-columns: 1fr; gap: 22px; }
  .cm-about-head { display: block; order: 1; }
  .cm-about-photo { order: 2; }
  .cm-about-copy { order: 3; gap: 16px; }
  .cm-about-copy .cm-about-eyebrow,
  .cm-about-copy .cm-about-title { display: none; }
  .cm-about-points { gap: 10px; margin-top: 4px; }

  .cm-steps { grid-template-columns: 1fr; gap: 28px; }
  .cm-steps-line { display: none; }
  .cm-step h3 { margin: 28px 0 10px; }

  .cm-signature { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
  .cm-signature-badge { margin-bottom: 16px; }
  .cm-signature-copy h2 { margin-bottom: 14px; }
  .cm-signature-copy p { margin-bottom: 22px; }
  .cm-signature-item { padding: 18px 0; }

  /* These two sections don't use .cm-sec, so they need their own
     mobile override to match the same 20px side inset as every other
     section (they previously kept their 40px desktop padding, which
     made the card inside sit at a different horizontal position than
     the cards above/below it). */
  .cm-signature-section { padding: 68px 20px; }
  .cm-cta-section { padding: 68px 20px; }

  .cm-contact { padding: 84px 20px 48px; gap: 44px; }
  .cm-contact-intro h1 { font-size: 42px; line-height: 1.04; margin-bottom: 14px; }
  .cm-contact-intro p { margin-bottom: 28px; }
  .cm-contact-details { gap: 18px; }

  /* The form card loses its white background on mobile (see
     .cm-form-card rule below) and sits directly on the dark page
     background instead, so labels, borders and input text all need
     their light-mode-on-dark-background counterparts here. */
  .cm-form-card { padding: 0; border: none; background: none; backdrop-filter: none; box-shadow: none; }
  .cm-form { gap: 20px; }

  .cm-field label { color: #FFFFFF; }

  .cm-field input,
  .cm-field select,
  .cm-field textarea {
    color: var(--color-text);
    border-bottom-color: rgba(255, 255, 255, 0.5);
  }

  .cm-field input:focus,
  .cm-field select:focus,
  .cm-field textarea:focus { border-bottom-color: rgba(255, 255, 255, 0.85); }

  .cm-field input::placeholder,
  .cm-field textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

  .cm-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  .cm-field select option { color: #1A1230; }
}