/* Calendar diary layout */
.calendar-grid { display: grid; gap: 8px; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-weight: 800; opacity: .8; }
.cal-title { font-weight: 800; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
[data-theme="light"] .cal-title { border-color: rgba(0,0,0,0.14); background: rgba(0,0,0,0.03); }
.cal-head > div { text-align: center; }
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; min-height: 120px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
[data-theme="light"] .cal-cell { border-color: rgba(0,0,0,0.12); }
.cal-cell.empty { background: transparent; border: 1px dashed rgba(255,255,255,0.08); }
[data-theme="light"] .cal-cell.empty { border-color: rgba(0,0,0,0.08); }
.cal-date { font-weight: 800; }
.cal-list { display: grid; gap: 6px; }
.cal-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.cal-dot { width: 8px; height: 8px; border-radius: 999px; background: #fbcb0c; }
.cal-text strong { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-actions .btn { padding: 4px 8px; font-size: 12px; }
.pv-card { border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 12px; background: rgba(255,255,255,0.05); max-width: 520px; margin-inline: auto; }
[data-theme="light"] .pv-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); }
.pv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pv-head .avatar { width: 36px; height: 36px; border-radius: 999px; background: #fbcb0c; color: #0a0a0a; display: grid; place-items: center; font-weight: 800; }
.pv-title { font-weight: 800; margin-bottom: 6px; }
.pv-text { white-space: pre-wrap; }
.pv-media img { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); }
/* Brand styled datetime input */
.brand-datetime {
  width: 100%; padding: 12px 14px; color: inherit;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; outline: none; transition: border-color .2s, background .2s;
}
.brand-datetime:focus { border-color: #fbcb0c; background: rgba(251,203,12,0.12); }
[data-theme="light"] .brand-datetime { color: #0b1020; background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); }
.founder-card .founder-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: center; }
@media (max-width: 660px) { .founder-card .founder-grid { grid-template-columns: 1fr; } }
.founder-card .founder-photo img { width: 100%; height: auto; object-fit: contain; border-radius: 14px; }
.cap-block h3 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.cap-grid { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px) { .cap-grid { grid-template-columns: 1fr; } }
[data-theme="dark"] .cap-card, .cap-card { display: grid; grid-template-columns: 92px 1fr; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.14); background: #fbcb0c; position: relative; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
/* Hover detail overlay */
.cap-card .cap-detail { position: absolute; inset: 0; background: rgba(0,0,0,0.86); color: #ffffff; padding: 16px; display: none; overflow: hidden; border-radius: 16px; }
.cap-card .cap-detail p { margin: 0; white-space: pre-wrap; }
.cap-grid { position: relative; }
.cap-grid.modal-open .cap-card { filter: blur(2px); }
.cap-grid.modal-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 998; pointer-events: auto; }
.cap-card.is-open { filter: none !important; z-index: 2000; box-shadow: var(--shadow-lg); position: fixed; inset: 0; margin: auto; transform: none; width: min(680px, 86vw); max-width: 86vw; min-height: 18vh; max-height: 40vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 18px; }
.cap-card.is-open .cap-rail { display: grid; grid-column: 1 / -1; grid-row: 1; width: 100%; height: 64px; background: #fbcb0c; color: #0a0a0a; place-items: center; border-top-left-radius: 18px; border-top-right-radius: 18px; }
.cap-card.is-open .cap-detail { display: flex; flex-direction: column; position: static; background: #ffffff; color: #0a0a0a; padding: 16px; border-radius: 0 0 18px 18px; grid-row: 2; height: 100%; }
.cap-actions { display: flex; justify-content: center; margin-top: auto; padding-top: 12px; }
.cap-actions .btn,
.cap-actions .btn.primary { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; box-shadow: none; }
.cap-card.is-open .cap-body { display: none; }
[data-theme="dark"] .cap-card.is-open .cap-detail { background: #000000; color: #ffffff; }

/* Prevent background scroll when modal open */
body.modal-open { overflow: hidden; }
.cap-card.is-open .typing { border-right-color: #0a0a0a; color: #0a0a0a; }
[data-theme="dark"] .cap-card.is-open .typing { border-right-color: #ffffff; color: #ffffff; }
.typing { border-right: 2px solid #fff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { border-color: transparent; } }

/* Hover hint on service cards */
.cap-card:not(.is-open):hover { cursor: pointer; }
.cap-card:not(.is-open):hover::after {
  content: "👉 Click me";
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.35); color: #ffffff; font-weight: 800;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border-radius: 16px; pointer-events: none; z-index: 5;
}
[data-theme="light"] .cap-card { border-color: rgba(0,0,0,0.1); background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); }
.cap-rail { background: #fbcb0c; color: #0a0a0a; display: grid; place-items: center; }
.cap-ico { font-size: 34px; display:inline-grid; place-items:center; width:54px; height:54px; border-radius:14px; background:#fbcb0c; color:#ffffff; }
.cap-body { padding: 24px 22px 28px; background: transparent; }
.cap-body h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color:#0a0a0a; }
.cap-body ul { margin: 0; padding-left: 18px; color: #0a0a0a; }
[data-theme="light"] .cap-body ul { color: #0a0a0a; }
.cap-flow { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px; margin-top: 36px; }
.flow-node { padding: 10px 14px; border-radius: 12px; background: #14e6a5; color: #0a0a0a; font-weight: 800; }
.flow-node.brand { background: #ffffff; color: #0a0a0a; border: 1px solid #0a0a0a; }
[data-theme="dark"] .flow-node.brand { background: #000000; color: #ffffff; border: 1px solid #ffffff; }
.flow-node.results { background: #ffffff; color: #0a0a0a; border: 1px solid #0a0a0a; }
[data-theme="dark"] .flow-node.results { background: #000000; color: #ffffff; border: 1px solid #ffffff; }
.flow-arrow { font-size: 28px; color: #fbcb0c; font-weight: 800; }
.flow-stage { border-radius: 16px; border: 1px dashed rgba(255,255,255,0.2); padding: 12px; text-align: center; }
[data-theme="light"] .flow-stage { border-color: rgba(0,0,0,0.2); }
.stage-inner { display: grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.pill { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.pill.gold { background: #fbcb0c; color: #0a0a0a; border-color: transparent; font-weight: 800; }
.arrow { font-weight: 900; }
.small { font-size: 12px; }
/*
  Counsel & Co. Marketing Site Styles
  Theme: Elegant, premium, contemporary. Built for U.S. law firms.
*/

:root {
  --brand-navy: #0a0a0a;
  --brand-blue: #6b6bff;
  --brand-sky: #aeb0ff;
  --brand-gold: #d1b15a;
  --brand-cream: #ffffff;
  --text-900: #d0d0d0;
  --text-700: #d9d9d9;
  --text-500: #b3b3b3;
  --ink-200: #e8e8e8;
  --success: #22c55e;
  --danger: #ef4444;
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.25);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* Light theme variables */
[data-theme="light"] {
  --brand-navy: #ffffff;
  --brand-blue: #4c4cff;
  --brand-sky: #8b8dff;
  --brand-gold: #b89e45;
  --brand-cream: #0a0a0a;
  --text-900: #2f2f2f;
  --text-700: #333333;
  --text-500: #5c5c5c;
  --ink-200: #4a4a4a;
  --success: #178d43;
  --danger: #c0392b;
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text-900);
  background: radial-gradient(1200px 800px at 10% -10%, #151515 0%, #0a0a0a 55%, #000000 100%) fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="light"] body, body[data-theme="light"] { background: #f7f7f7; }

/* Typography */
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; letter-spacing: -0.02em; color: #fff; margin: 0 0 16px; }
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 { color: #0b1020; }
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }

/* Typing animation for mobile hero title */
@media (max-width: 660px) {
  .hero h1 {
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    border-right: 2px solid #fbcb0c;
    animation: blink-caret 0.75s step-end infinite;
    animation-delay: 4.5s;
    animation-fill-mode: both;
    min-height: 2.5em;
    line-height: 1.2;
  }
  
  @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #fbcb0c; }
  }
}

h3 { font-size: clamp(20px, 2vw, 24px); color: var(--brand-cream); }
p { color: #c8c8c8; margin: 0 0 14px; }
[data-theme="light"] p { color: #353535; }

/* Content font override: apply Gotham site-wide for content only (exclude header/footer) */
main { font-family: Gotham, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
main h1, main h2, main h3 {
  font-family: Gotham, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Layout */
.container { width: min(1200px, 92vw); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 120px) 0; position: relative; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
  border: 1px solid rgba(0,0,0,0.08);
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(11,16,32,0.6);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .site-header { background: rgba(255,255,255,0.7); border-bottom-color: rgba(0,0,0,0.06); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; gap: 12px; align-items: center; color: #fff; text-decoration: none; }
.brand-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#2e2e2e, #111); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.45); font-weight: 700; }
.brand-img { height: 36px; width: auto; display: block; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
[data-theme="dark"] .brand-img { background: #ffffff; padding: 4px; border-radius: 8px; }
.brand-name { font-weight: 800; letter-spacing: 0.3px; }

.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a { color: #f2f2f2; text-decoration: none; font-weight: 550; font-size: 14px; padding: 10px 12px; border-radius: 10px; }
[data-theme="light"] .nav-links a { color: #2b355c; }
.nav-links a:hover { background: rgba(255,255,255,0.08); }

.cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 700; box-shadow: var(--shadow-md); }
.cta.primary { background: linear-gradient(135deg, #111111, #000000); color: white; }
.cta.ghost { color: #d9e1ff; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); }
[data-theme="light"] .cta.ghost { color: #2b355c; border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); }

/* Nav "Get a Quote" CTA: white by default, gold on hover */
.nav-links .cta.primary { background: #ffffff; color: #0a0a0a; border: 1px solid rgba(0,0,0,0.14); box-shadow: none; }
.nav-links .cta.primary:hover { background: #fbcb0c; color: #0a0a0a; border-color: transparent; }

/* Hero CTAs match nav "Get a Quote" */
.hero .actions .cta { background: #ffffff; color: #0a0a0a; border: 1px solid rgba(0,0,0,0.14); box-shadow: none; }
.hero .actions .cta:hover { background: #fbcb0c; color: #0a0a0a; border-color: transparent; }

.menu-toggle { display: none; color: #fff; background: transparent; border: none; font-size: 20px; }
[data-theme="light"] .menu-toggle { color: #0a0a0a; }

@media (max-width: 980px) {
  .nav-links { display: none; position: fixed; inset: 72px 0 auto 0; background: rgba(11,16,32,1); padding: 16px; flex-direction: column; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); z-index: 1001; }
  .nav-links.open { display: flex; }
  [data-theme="light"] .nav-links { background: rgba(255,255,255,1); border-bottom: 1px solid rgba(0,0,0,0.06); }
  .menu-toggle { display: inline-flex; }
  
  /* Prevent body scroll when menu is open */
  body.menu-open { overflow: hidden; }
  
}

/* Desktop: nudge nav-links further right */
@media (min-width: 981px) {
  .nav-links { margin-left: auto; padding-right: 8px; }
  
  /* Desktop: Reduce gap between Client Testimonials and line above */
  section.testimonials-section { 
    margin-top: 20px !important; 
    padding-top: 20px !important;
    transform: none !important;
  }
  
  /* Desktop: Reduce gap between Join the Community and Client Testimonials */
  section.community-section { 
    margin-top: 20px !important; 
    padding-top: 20px !important;
    padding-bottom: 60px !important;
    transform: none !important;
  }
  
  /* Desktop: Reduce gap between Footer and line above */
  footer.footer-section { 
    margin-top: 40px !important; 
    padding-top: 30px !important;
    transform: none !important;
  }
}

/* Desktop: hide Careers and Contact (kept in footer) */
@media (min-width: 981px) {
  .nav-links a[href="careers.html"],
  .nav-links a[href="contact.html"] {
    display: none;
  }
}

/* Hero */
.hero { position: relative; overflow: clip; }
.hero .bg {
  position: absolute; inset: -10% -10% auto -10%; height: 120%;
  background:
    radial-gradient(800px 300px at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(600px 280px at 80% 0%, rgba(255,255,255,0.04), transparent 60%),
    url('../../public/pattern-randomized.svg');
  background-size: auto, auto, 800px;
  background-repeat: no-repeat, no-repeat, repeat;
  opacity: .25;
  pointer-events: none;
}

@media (max-width: 660px) {
  .hero .bg {
    inset: 50% -10% -10% -10%; height: 50%;
    background-position: center bottom;
  }
}
[data-theme="light"] .hero .bg { display: none; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.hero .lede { color: #cfd6ff; font-size: 18px; }
[data-theme="light"] .hero .lede { color: #4a5070; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-visual { position: absolute; top: 40px; right: -20px; border-radius: 0; overflow: visible; z-index: -1; pointer-events: none; width: clamp(380px, 52vw, 900px); }

@media (max-width: 660px) {
  .hero-visual { 
    top: 80%; 
    right: 0; 
    width: clamp(320px, 70vw, 400px); 
    max-width: 100vw;
  }
  
  /* Move hero content down as a group on mobile */
  .hero-grid {
    padding-top: 40px;
  }
  
  /* Reduce button sizes for mobile */
  .hero .actions .cta {
    padding: 10px 14px;
    font-size: 13px;
  }
}
.hero-visual::before { content: none; }
.hero-visual img { position: static; width: 100%; height: auto; max-width: 100%; display: block; object-fit: unset; }
[data-theme="light"] .hero-visual { opacity: 1; }
.hero-visual .frame {
  position: absolute; inset: 18px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
}

/* Section variants */
.surface { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-theme="light"] .surface { background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0)); border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }

@media (max-width: 660px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .container {
    max-width: 100vw !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-visual {
    max-width: 100vw !important;
    right: 0 !important;
  }
  .hero {
    overflow: hidden !important;
  }
  .surface { 
    padding-bottom: -200px !important; 
    margin-bottom: -200px !important;
    border-bottom: none !important;
  }
  .surface + .section { 
    padding-top: 40px !important; 
    margin-top: -100px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }
  [data-theme="light"] .surface + .section { 
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }
}
.section h2 + p { color: #cfd6ff; max-width: 780px; }
[data-theme="light"] .section h2 + p { color: #595959; }

/* Grids */
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 660px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-4 { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.5rem;
    margin: 0 -10px;
  }
  
  /* Fix KPI container on mobile - make all boxes equal */
  .grid.cols-4 > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
    padding: 1rem;
    border: none;
    background: transparent;
  }
  
  .grid.cols-4 .kpi-number {
    font-size: 2rem;
    margin-bottom: 0.25rem;
  }
  
  .grid.cols-4 .kpi-label {
    font-size: 0.8rem;
    line-height: 1.2;
  }
  
  /* Move Client Testimonials section down on mobile to avoid Founder's picture overlap */
  .testimonials-section { 
    margin-top: 100px !important; 
    padding-top: 80px !important;
    transform: translateY(50px) !important;
  }
  
  /* Make Services flow section mobile-friendly */
  .cap-flow {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
  }
  
  .cap-flow .flow-node {
    display: inline-block !important;
    margin: 0 8px !important;
  }
  
  .cap-flow .flow-arrow {
    display: block !important;
    margin: 8px auto !important;
    transform: rotate(90deg) !important;
  }
  
  .cap-flow .flow-stage {
    margin: 16px 0 !important;
  }
  
  .cap-flow .stage-inner {
    grid-auto-flow: row !important;
    gap: 12px !important;
  }
  
  /* Make modal content scrollable on mobile */
  .cap-card.is-open .cap-detail {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 60vh !important;
  }
  
  .cap-card.is-open .cap-detail::-webkit-scrollbar {
    width: 6px !important;
  }
  
  .cap-card.is-open .cap-detail::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1) !important;
    border-radius: 3px !important;
  }
  
  .cap-card.is-open .cap-detail::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3) !important;
    border-radius: 3px !important;
  }
  
  .cap-card.is-open .cap-detail::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5) !important;
  }
  
  /* Move Meet Our Founder section down on mobile */
  .founder-section { 
    margin-top: 400px !important; 
    padding-top: 200px !important;
    transform: translateY(200px) !important;
  }
  
  /* Move footer down on About page mobile to avoid overlap */
  .site-footer { 
    margin-top: 150px !important; 
    padding-top: 80px !important;
    transform: translateY(50px) !important;
  }
  
  /* Move Ready to grow section down on Services page mobile */
  .ready-grow-section { 
    margin-top: 400px !important; 
    padding-top: 250px !important;
    transform: translateY(200px) !important;
  }
  
  /* Alternative approach - target the section directly */
  section.testimonials-section {
    margin-top: 100px !important;
    padding-top: 80px !important;
  }
}

/* Force testimonials section down - test without media query */
.testimonials-section { 
  margin-top: 400px !important; 
  padding-top: 300px !important;
  transform: translateY(200px) !important;
}

/* Move Join the Community section down */
.community-section { 
  margin-top: 250px !important; 
  padding-top: 200px !important;
  transform: translateY(150px) !important;
}

/* Move Footer down */
.footer-section { 
  margin-top: 200px !important; 
  padding-top: 150px !important;
  transform: translateY(100px) !important;
}

/* Desktop: Override mobile spacing for Join the Community section */
@media (min-width: 981px) {
  .community-section { 
    margin-top: 20px !important; 
    padding-top: 20px !important;
    margin-bottom: 60px !important;
    transform: none !important;
  }
  
  /* More specific targeting */
  section.surface.community-section {
    margin-bottom: 60px !important;
  }
}

/* Service cards */
.service-card { padding: 22px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; position: relative; }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,0.25); }
[data-why-stack] { position: relative; transition: min-height .6s ease; perspective: 1400px; }
[data-why-stack] > .service-card { will-change: transform, opacity, clip-path, box-shadow; transition: transform .5s ease, opacity .5s ease, clip-path .5s ease, box-shadow .5s ease; transform-origin: center; transform-style: preserve-3d; cursor: pointer; }
[data-why-stack].stacked { grid-template-columns: 1fr; }
[data-why-stack].stacked > .service-card { position: absolute; top: 0; left: 50%; right: auto; width: clamp(300px, 50%, 460px); min-height: 380px; margin: 0; }

@media (max-width: 660px) {
  [data-why-stack] {
    grid-template-columns: 1fr !important;
    perspective: 1000px !important;
  }
  [data-why-stack].stacked > .service-card { 
    position: absolute !important;
    width: clamp(180px, 65%, 220px) !important; 
    min-height: 200px !important; 
    transition: transform .5s ease, opacity .5s ease, clip-path .5s ease, box-shadow .5s ease !important;
  }
  [data-why-stack] .service-card.is-current { 
    min-height: 280px !important; 
    transition: transform .5s ease, opacity .5s ease, box-shadow .5s ease !important;
  }
  [data-why-stack] .service-card h3 { 
    font-size: 30px !important; 
  }
  [data-why-stack] .service-card p { 
    font-size: 12px !important; 
  }
}
[data-why-stack] .service-card { opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.96); pointer-events: none; clip-path: inset(0 0 0 0); }
[data-why-stack] .service-card.is-current { opacity: 1; visibility: visible; transform: translate(-50%, 0) rotate(0deg) translateZ(60px); pointer-events: auto; z-index: 3; clip-path: inset(0 0 0 0); min-height: 460px; box-shadow: var(--shadow-lg); }

@media (max-width: 660px) {
  [data-why-stack] .service-card.is-current { 
    min-height: 280px !important; 
  }
  [data-why-stack] .service-card.is-prev {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-100%, 40px) rotate(-6deg) translateZ(-140px) !important;
    transition: transform .5s ease, opacity .5s ease, clip-path .5s ease, box-shadow .5s ease !important;
    z-index: 2 !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    clip-path: inset(0 50% 0 0) !important;
    box-shadow: var(--shadow-md) !important;
    pointer-events: auto !important;
  }
  [data-why-stack] .service-card.is-next {
    position: absolute !important;
    left: 50% !important;
    transform: translate(0, 40px) rotate(6deg) translateZ(-140px) !important;
    transition: transform .5s ease, opacity .5s ease, clip-path .5s ease, box-shadow .5s ease !important;
    z-index: 1 !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    clip-path: inset(0 0 0 50%) !important;
    box-shadow: var(--shadow-md) !important;
    pointer-events: auto !important;
  }
}
[data-why-stack] .service-card.is-current { transition: transform .5s ease, opacity .5s ease, box-shadow .5s ease; }
[data-why-stack] .service-card.is-prev { opacity: .7; visibility: visible; transform: translate(-100%, 40px) rotate(-6deg) translateZ(-140px); z-index: 2; clip-path: inset(0 50% 0 0); box-shadow: var(--shadow-md); pointer-events: auto; }
[data-why-stack] .service-card.is-next { opacity: .7; visibility: visible; transform: translate(0, 40px) rotate(6deg) translateZ(-140px); z-index: 1; clip-path: inset(0 0 0 50%); box-shadow: var(--shadow-md); pointer-events: auto; }
[data-why-stack] .service-card.is-prev:hover,
[data-why-stack] .service-card.is-next:hover { opacity: .9; transform: translate(-100%, 20px) rotate(-3deg) translateZ(-100px); }
[data-why-stack] .service-card.is-next:hover { transform: translate(0, 20px) rotate(3deg) translateZ(-100px); }

@media (min-width: 981px) {
  [data-why-stack] .service-card.is-prev { left: 50%; }
  [data-why-stack] .service-card.is-next { left: 50%; }
}

/* Why stack content polish */
[data-why-stack] .service-card { padding: 26px 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; }
[data-why-stack] .service-card .icon { display: none; }
[data-why-stack] .service-card h3 { margin: 0; font-size: 64px; font-weight: 800; letter-spacing: 0; line-height: 1.1; color: #000000; }
[data-why-stack] .service-card h3::after { content: none; }
[data-why-stack] .service-card p { color: #000000; line-height: 1.5; margin: 6px 0 0 0; }
[data-theme="light"] [data-why-stack] .service-card p { color: #000000; }

/* Why stack typography: prefer Gotham if available */
[data-why-stack] .service-card h3,
[data-why-stack] .service-card p {
  font-family: Gotham, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Why stack card border and background color */
[data-why-stack] .service-card { border: 1px solid #000000; background: #fbcb0c; }

/* Dark mode: make text and borders white */
[data-theme="dark"] [data-why-stack] .service-card { border-color: #ffffff; }
[data-theme="dark"] [data-why-stack] .service-card h3,
[data-theme="dark"] [data-why-stack] .service-card p { color: #ffffff; }

/* (Removed card-specific centering; applied globally within [data-why-stack]) */
.service-card .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #1b1b1b, #0e0e0e); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.4); margin-bottom: 10px; font-weight: 800; }
.service-card .icon.svg { background: transparent; box-shadow: none; border-radius: 12px; width: 44px; height: 44px; margin-bottom: 10px; overflow: hidden; }
.service-card .icon.svg svg { display: block; }
.service-card .icon.svg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card .icon.three-d { width: 100%; height: 120px; display: grid; place-items: center; background: transparent; box-shadow: none; margin-bottom: 10px; }
.service-card .icon.three-d model-viewer { width: 140px; height: 120px; }

/* Services icon animations */
@keyframes orbit { to { transform: rotate(360deg); } }
.svc-orbit .svc-satellite { transform-origin: 32px 32px; animation: orbit 8s linear infinite; }

@keyframes scanPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.svc-scan circle:first-child { filter: drop-shadow(0 0 6px rgba(46,92,255,.4)); }
.svc-scan line { animation: scanPulse 2s ease-in-out infinite; }

@keyframes chatFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.svc-bubbles rect { filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.svc-bubbles circle { animation: chatFloat 3s ease-in-out infinite; }

@keyframes mailFlap { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
.svc-mail path { animation: mailFlap 2.2s ease-in-out infinite; }

@keyframes rise { 0% { transform: translateY(4px); opacity: .8; } 100% { transform: translateY(0); opacity: 1; } }
.svc-bars rect { animation: rise 1.8s ease-in-out infinite alternate; }
.svc-bars rect:nth-child(1) { animation-delay: 0s; }
.svc-bars rect:nth-child(2) { animation-delay: .2s; }
.svc-bars rect:nth-child(3) { animation-delay: .4s; }

.svc-chart polyline { filter: drop-shadow(0 0 6px rgba(34,197,94,.35)); }

.svc-star polygon { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

.svc-palette circle { filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }

.svc-video polygon { filter: drop-shadow(0 0 6px rgba(251,203,12,.5)); }
.service-card h3 { margin: 6px 0 8px; font-size: 20px; }
.service-card p { color: #d8ddff; font-size: 14px; }
[data-theme="light"] .service-card p { color: #46507a; }

/* Why Us list */
.why-list { display: grid; gap: 14px; }
.why-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.why-item .dot { width: 12px; height: 12px; border-radius: 999px; margin-top: 8px; background: linear-gradient(135deg, var(--brand-gold), #ffd76a); box-shadow: 0 0 0 4px rgba(245,183,0,0.18); }
.why-item h4 { margin: 0; color: #fff; }
[data-theme="light"] .why-item h4 { color: #0b1020; }
.why-item p { color: #cfd6ff; margin-top: 4px; }
[data-theme="light"] .why-item p { color: #46507a; }

/* Testimonials */
.carousel { display: grid; grid-template-columns: 1fr; overflow: hidden; position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(33.333% - 14px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.carousel-track.auto-scroll { scrollbar-width: none; -ms-overflow-style: none; overflow: hidden; }
.carousel-track.auto-scroll::-webkit-scrollbar { display: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(var(--marquee-span, 600px) * -1)); } }
.carousel-track.auto-scroll { display: flex; gap: 14px; width: max-content; will-change: transform; }
.carousel-track.auto-scroll > * { flex: 0 0 auto; width: 240px; }
@media (max-width: 980px) { .carousel-track.auto-scroll > * { width: 260px; } }
@media (max-width: 660px) { .carousel-track.auto-scroll > * { width: 280px; } }
.carousel-track.auto-scroll { animation: marquee 30s linear infinite; }
.carousel-track.auto-scroll:hover { animation-play-state: paused; }
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }
.testimonial { scroll-snap-align: start; padding: 12px; background: transparent; border: none; box-shadow: none; }
.testimonial .stars { color: #ffd76a; }
.testimonial p { color: #dfe5ff; }
[data-theme="light"] .testimonial p { color: #2b355c; }

@media (max-width: 980px) { .carousel-track { grid-auto-columns: 80%; } }
@media (max-width: 660px) { 
  /* Hide desktop testimonials on mobile */
  .desktop-testimonials {
    display: none;
  }
  
  /* Show mobile testimonials */
  .mobile-testimonials {
    display: block;
  }
  
  /* Mobile testimonials styling */
  .sr-only { 
    position: absolute; 
    left: -10000px; 
    top: auto; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
  }

  .testi-wrap { 
    position: absolute;
    left: 0;
    right: 0;
    width: 100vw;
    margin-left: 0;
  }

  .testi-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 6px 0;
  }

  .testi-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    will-change: transform;
    padding-left: 16px;
    padding-right: 0;
  }

  .testi-card {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 420px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 16px 18px;
    box-sizing: border-box;
    outline: none;
  }

  .testi-card:focus {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
  }

  .testi-stars {
    color: #ffd76a;
    margin-bottom: 8px;
  }

  .testi-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #0b1020;
  }

  .testi-quote { 
    margin: 0 0 8px; 
    line-height: 1.45; 
    color: #0b1020;
  }
  
  .testi-name { 
    margin: 0; 
    font-weight: 600; 
    color: #0b1020;
  }

  @media (prefers-reduced-motion: reduce) {
    .testi-track { transform: none !important; }
  }
}

@media (min-width: 661px) {
  /* Hide mobile testimonials on desktop */
  .mobile-testimonials {
    display: none;
  }
  
  /* Show desktop testimonials */
  .desktop-testimonials {
    display: block;
  }
}

/* Forms */
form { display: grid; gap: 14px; }
.input { display: grid; gap: 8px; }
.input label { color: #e9edff; font-size: 14px; }
[data-theme="light"] .input label { color: #2b355c; }
.input input, .input select, .input textarea {
  width: 100%; padding: 12px 14px; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; outline: none; transition: border-color .2s, background .2s;
}
[data-theme="light"] .input input, [data-theme="light"] .input select, [data-theme="light"] .input textarea {
  color: #0b1020; background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12);
}
.input textarea { min-height: 120px; resize: vertical; }
.input input:focus, .input select:focus, .input textarea:focus { border-color: var(--brand-sky); background: rgba(255,255,255,0.07); }
.help { color: #cfd6ff; font-size: 12px; }
[data-theme="light"] .help { color: #5b648e; }
.error { color: var(--danger); font-size: 12px; }

.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: #e9edff; text-decoration: none; font-weight: 700; cursor: pointer; font-size: 13px; }
[data-theme="light"] .btn { color: #2b355c; border-color: rgba(0,0,0,0.14); background: rgba(0,0,0,0.03); }
.btn.primary { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; }
.modal .btn.primary { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; }
.subscribe-btn { background: #fbcb0c !important; color: #0a0a0a !important; border: 1px solid #fbcb0c !important; }
[data-theme="dark"] .subscribe-btn { background: #fbcb0c !important; color: #ffffff !important; }
.btn.is-loading,
.btn:disabled,
.subscribe-btn.is-loading,
.subscribe-btn:disabled { background: #9e9e9e !important; color: #ffffff !important; border: 1px solid #9e9e9e !important; cursor: not-allowed; }
.btn.gold { background: linear-gradient(135deg,var(--brand-gold),#ffd76a); color: #1a1a1a; border-color: transparent; }
.btn.ghost { background: transparent; }

/* Badges, chips */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #e9edff; border: 1px solid rgba(255,255,255,0.12); font-size: 12px; }
.chip.blue { background: rgba(46,92,255,0.12); border-color: rgba(46,92,255,0.24); color: #c7d4ff; }
[data-theme="light"] .chip.blue { color: #3346ff; background: rgba(51,70,255,0.12); border-color: rgba(51,70,255,0.24); }
.chip.gold { background: rgba(245,183,0,0.12); border-color: rgba(245,183,0,0.24); color: #ffe7a9; }

/* Hero chips set to black/white like nav CTA */
.hero .chips .chip { background: #ffffff; color: #0a0a0a; border: 1px solid rgba(0,0,0,0.14); }

/* Footer */
.site-footer { padding: 56px 0 28px; border-top: none; background: #f7f7f7; color: #3f3f3f; }
[data-theme="light"] .site-footer { background: #f7f7f7; color: #3f3f3f; }
[data-theme="dark"] .site-footer { background: #f7f7f7; color: #3f3f3f; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 18px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: inherit; text-decoration: underline; }
.site-footer a.inline { color: inherit; border-bottom: 1px dashed currentColor; }
.site-footer a.inline:hover { color: inherit; border-bottom-color: currentColor; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px) { .footer-grid { grid-template-columns: 1fr; } }
.sub-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 28px; color: inherit; font-size: 12px; border-top: none; }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer p, .site-footer li, .site-footer .muted { color: inherit; }

/* Footer logo size */
.site-footer .brand-img { height: 44px; }

/* Footer headings font to match body (bold) */
.site-footer h3 {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 800;
  letter-spacing: 0;
}
.site-footer .footer-head { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-weight: 700; }
.site-footer h3.footer-head { color: #fbcb0c; }

/* Footer tweaks */
.footer-tagline { margin-top: 18px; margin-bottom: 16px; }

/* Social media icons styling */
.social img {
  filter: brightness(0) opacity(0.7);
  transition: opacity 0.3s ease;
}

.social img:hover {
  opacity: 1;
}

/* Utilities */
.center { text-align: center; }
.muted { color: #a8a8a8; }
.max-w-700 { max-width: 700px; }
.spacer-2 { height: 12px; }
.spacer-4 { height: 24px; }
.spacer-6 { height: 32px; }
.spacer-8 { height: 48px; }
.tilt { transform-style: preserve-3d; transform: perspective(800px); }
.tilt .tilt-inner { transform: translateZ(24px); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.5s ease, transform 1.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); color: #dfe5ff; cursor: pointer; }
.tab.active { background: linear-gradient(135deg, var(--brand-blue), #3763ff); color: white; border-color: transparent; }

/* Portal login: replace purple accents with brand yellow */
[data-portal] .tab { color: #0a0a0a; border-color: rgba(0,0,0,0.14); background: #fbcb0c; }
[data-portal] .tab.active { background: #fbcb0c; color: #0a0a0a; border-color: #fbcb0c; }
/* Primary button colors by theme */
[data-theme="light"] [data-portal] .btn.primary { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; }
[data-theme="dark"] [data-portal] .btn.primary { background: #fbcb0c; color: #ffffff; border: 1px solid #fbcb0c; }
/* Card border */
[data-portal] .card { border-color: rgba(0,0,0,0.14); }
/* Labels: light vs dark */
[data-theme="light"] [data-portal] .input label { color: #2b355c; }
[data-theme="dark"] [data-portal] .input label { color: #ffffff; }
/* Placeholder color in dark */
[data-theme="dark"] [data-portal] input::placeholder, [data-theme="dark"] [data-portal] textarea::placeholder { color: rgba(255,255,255,0.75); }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; background: rgba(27, 33, 62, 0.9); color: #fff; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow-md); transform: translateY(20px); opacity: 0; transition: all .3s ease; z-index: 9999; }
[data-theme="light"] .toast { background: rgba(255,255,255,0.95); color: #0b1020; border-color: rgba(0,0,0,0.1); }
.toast.show { transform: translateY(0); opacity: 1; }
.inline-thanks { display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color:#e9edff; font-weight:700; }
[data-theme="light"] .inline-thanks { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.14); color:#2b355c; }

/* Inline notices under inputs */
.notice { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #e9edff; font-weight: 600; display: none; }
[data-theme="light"] .notice { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.14); color: #2b355c; }
.notice.success { border-color: rgba(34,197,94,0.45); color: #b5f5c9; }
[data-theme="light"] .notice.success { color: #0b6b34; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); }
.notice.error { border-color: rgba(239,68,68,0.45); color: #ffc7c7; }
[data-theme="light"] .notice.error { color: #8d1b1b; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); }
.notice.info { border-color: rgba(59,130,246,0.45); color: #cfe1ff; }
[data-theme="light"] .notice.info { color: #1e3a8a; background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); }

/* Global loader overlay - COMPLETELY REMOVED */
.global-loader { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
[data-theme="light"] .global-loader { display: none !important; }
.global-loader.show { display: none !important; visibility: hidden !important; opacity: 0 !important; }
.spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.35); border-top-color: #fbcb0c; border-radius: 50%; animation: spin 1s linear infinite; }
[data-theme="light"] .spinner { border-color: rgba(0,0,0,0.25); border-top-color: #fbcb0c; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Links */
a.inline { color: #b8c7ff; text-decoration: none; border-bottom: 1px dashed rgba(184,199,255,0.5); }
a.inline:hover { color: #fff; border-bottom-color: #fff; }
[data-theme="light"] a.inline { color: #2f2f2f; border-bottom-color: rgba(0,0,0,0.3); }
[data-theme="light"] a.inline:hover { color: #1f1f1f; border-bottom-color: rgba(0,0,0,0.5); }

/* Lists */
ul.clean { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
li.clean { padding-left: 0; }

/* Social icons */
.social { display: flex; gap: 10px; }
.social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,0.06); color: #e9edff; border: 1px solid rgba(255,255,255,0.14); text-decoration: none; }
.social a:hover { background: rgba(255,255,255,0.12); }

/* Footer social icons on light footer */
.site-footer .social a { background: transparent; color: #3f3f3f; border: 1px solid rgba(0,0,0,0.35); }
.site-footer .social a:hover { background: rgba(0,0,0,0.06); color: #1f1f1f; }

/* Match founder card LinkedIn icon style to footer */
.founder-card .social { margin-top: 8px; }
.founder-card .social a { background: transparent; color: #3f3f3f; border: 1px solid rgba(0,0,0,0.35); }
.founder-card .social a:hover { background: rgba(0,0,0,0.06); color: #1f1f1f; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table td, .table th { border-bottom: 1px dashed rgba(255,255,255,0.12); padding: 10px 0; color: #dfe5ff; text-align: left; }
.table th { color: #fff; font-weight: 700; }
[data-theme="light"] .table td,
[data-theme="light"] .table th { color: #0b1020; border-bottom-color: rgba(0,0,0,0.12); }

/* Clients table: fixed layout, truncate long text */
.clients-card { min-height: 600px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.clients-form-card { min-height: 600px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.clients-card .table-wrap { overflow: auto; flex: 1 1 auto; }
.clients-table { table-layout: fixed; width: 100%; }
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { width: 18%; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { width: 18%; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 24%; }
.clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 16%; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { width: 12%; }
.clients-table th:nth-child(6), .clients-table td:nth-child(6) { width: 18%; }
.form-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.form-logo-block { display: grid; grid-template-columns: auto; justify-items: center; gap: 6px; }
.form-logo-preview { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); }
[data-theme="light"] .form-logo-preview { border-color: rgba(0,0,0,0.14); }
.form-logo-actions { display: flex; gap: 6px; }
.clients-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.clients-table td:last-child { white-space: nowrap; overflow: visible; text-overflow: clip; }
.clients-table td.actions { display: flex; gap: 8px; align-items: center; }
.btn.icon { padding: 6px 8px; font-size: 14px; line-height: 1; }

/* Clients page: make primary buttons yellow */
.clients-form-card .btn.primary,
.clients-card .btn.primary,
.modal .btn.primary { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; }

/* Scheduling page: force primary buttons to yellow */
[data-page="scheduling"] .btn.primary { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; }
[data-page="scheduling"] .btn.gold { background: #fbcb0c; color: #0a0a0a; border: 1px solid #fbcb0c; }
[data-page="scheduling"] .cal-dot { background: #fbcb0c; }
[data-page="scheduling"] .pv-head .avatar { background: #fbcb0c; color: #0a0a0a; }
[data-page="scheduling"] .brand-datetime:focus { border-color: #fbcb0c; background: rgba(251,203,12,0.12); }
/* Scheduling page: yellow focus for all inputs */
[data-page="scheduling"] .input input:focus,
[data-page="scheduling"] .input select:focus,
[data-page="scheduling"] .input textarea:focus {
  border-color: #fbcb0c;
  background: rgba(251,203,12,0.12);
}

/* Clients page: yellow focus styles on inputs */
.clients-form-card .input input:focus,
.clients-form-card .input select:focus,
.clients-form-card .input textarea:focus,
.clients-card .input input:focus,
.clients-card .input select:focus,
.clients-card .input textarea:focus {
  border-color: #fbcb0c;
  background: rgba(251,203,12,0.12);
}

/* Styled select to match design */
.clients-form-card .input select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 12px;
  background-clip: padding-box;
  background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
  padding-right: 36px;
  /* Hide scrollbars (still scrollable) */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}
[data-theme="light"] .clients-form-card .input select { background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%), linear-gradient(to right, transparent, transparent); }
.clients-form-card .input select::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */

/* Custom select (for fully styled dropdown list) */
.custom-select { position: relative; }
.custom-select .cs-trigger {
  width: 100%; text-align: left;
  padding: 12px 36px 12px 14px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: inherit;
}
[data-theme="light"] .custom-select .cs-trigger { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); }
.custom-select .cs-trigger:focus { outline: none; border-color: #fbcb0c; background: rgba(251,203,12,0.12); }
.custom-select .cs-trigger::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .7;
}
.custom-select .cs-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  max-height: 220px; overflow-y: auto; overflow-x: hidden; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
[data-theme="light"] .custom-select .cs-panel { background: #ffffff; border-color: rgba(0,0,0,0.12); }
.custom-select.drop-up .cs-panel { top: auto; bottom: calc(100% + 6px); }
[data-theme="light"] .custom-select .cs-panel { background: #ffffff; border-color: rgba(0,0,0,0.12); }
.custom-select .cs-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.custom-select.open .cs-panel { display: block; }
.cs-option { padding: 0 12px; cursor: pointer; height: 44px; line-height: 44px; display: block; }
.cs-option:hover, .cs-option[aria-selected="true"] { background: rgba(251,203,12,0.18); }

/* Disabled state for forms/lists */
.clients-form-card.is-disabled,
.clients-card.is-disabled { opacity: .7; pointer-events: none; filter: grayscale(.1); }

/* Simple modal */
.modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); z-index: 2000; }
.modal-overlay.show { display: flex; }
.modal { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 18px; width: min(520px, 96vw); box-shadow: var(--shadow-md); }
.modal.wide { width: min(720px, 96vw); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-header h3 { margin: 0; font-family: Gotham, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-weight: 800; }
.modal h3 { font-family: Gotham, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-weight: 800; }
.logo-preview { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); }
[data-theme="light"] .logo-preview { border-color: rgba(0,0,0,0.14); }
.modal-logo { display: flex; justify-content: center; margin-bottom: 12px; }
.modal-logo img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); }
[data-theme="light"] .modal-logo img { border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .modal { background: #ffffff; border-color: rgba(0,0,0,0.12); }

/* View modal tweaks */
.modal .input label { font-size: 12px; opacity: .85; }
.modal .help { margin-top: 2px; }

/* Chips cloud */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Badges */
.badge { padding: 6px 10px; background: rgba(46,92,255,0.15); color: #cbd6ff; border: 1px solid rgba(46,92,255,0.3); border-radius: 999px; font-size: 12px; font-weight: 700; }

/* Helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Composite email input (single box with right-side domain dropdown) */
.email-box { display: grid; grid-template-columns: 1fr auto; align-items: stretch; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
[data-theme="light"] .email-box { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); }
.email-box input, .email-box select { border: none; background: transparent; color: inherit; padding: 12px 14px; outline: none; }
.email-box select, .email-box .domain-input { border-left: 1px dashed rgba(255,255,255,0.24); }
[data-theme="light"] .email-box select { border-left-color: rgba(0,0,0,0.24); }
.email-box .domain-input { display: none; }
[data-theme="light"] .email-box .domain-input { border-left-color: rgba(0,0,0,0.24); }

/* Password input with show/hide toggle */
.pwd-box { display: grid; grid-template-columns: 1fr auto; align-items: stretch; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
[data-theme="light"] .pwd-box { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); }
.pwd-box input { border: none; background: transparent; color: inherit; padding: 12px 14px; outline: none; }
.pwd-box .peek { border: 0; border-left: 1px dashed rgba(255,255,255,0.24); background: transparent; color: inherit; padding: 0 12px; cursor: pointer; }
[data-theme="light"] .pwd-box .peek { border-left-color: rgba(0,0,0,0.24); }
.pwd-box:focus-within { border-color: var(--brand-sky); background: rgba(255,255,255,0.07); }
[data-theme="light"] .pwd-box:focus-within { background: rgba(0,0,0,0.06); }

/* System dashboard layout */
.sys-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 980px) { .sys-shell { grid-template-columns: 1fr; } }
.sys-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 16px 12px; border-right: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
[data-theme="light"] .sys-sidebar { border-right-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); }
.sys-sidebar .brand { display: grid; place-items: center; margin-bottom: 36px; }
.sys-sidebar .brand-img { height: 36px; width: auto; }
.sys-nav { display: grid; gap: 10px; margin-top: 20px; }
.sys-nav a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.sys-nav a:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .sys-nav a:hover { background: rgba(0,0,0,0.04); }
.sys-nav a.active { background: #fbcb0c; color: #0a0a0a; border-color: transparent; font-weight: 800; }
.sys-main { min-height: 100vh; }
.sys-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.12); }
[data-theme="light"] .sys-topbar { border-bottom-color: rgba(0,0,0,0.1); }
.email-box:focus-within { border-color: var(--brand-sky); background: rgba(255,255,255,0.07); }
[data-theme="light"] .email-box:focus-within { background: rgba(0,0,0,0.06); }

/* System: title inside top bar */
.sys-topbar .title { font-weight: 800; font-size: 18px; color: #ffffff; margin-right: 12px; }
[data-theme="light"] .sys-topbar .title { color: #0b1020; }

/* System: content layout flush with sidebar and minimal top gap */
.sys-main .container { width: 100%; max-width: none; margin: 0; padding: 0 16px; }
.sys-main .section { padding-top: 24px; padding-bottom: 56px; }

/* Portal fixed theme bar at bottom */
.portal-theme-bar { position: fixed; inset: auto 0 0 0; display: flex; justify-content: flex-end; align-items: center; padding: 12px; background: transparent; z-index: 1001; }
[data-theme="light"] .portal-theme-bar { background: transparent; }
.portal-theme-bar .btn { box-shadow: var(--shadow-md); }

/* KPI Styles */
.kpi-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.kpi-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Remove borders from KPI boxes on desktop */
.grid.cols-4 > div {
  border: none;
  background: transparent;
}

/* Client logo positioning in testimonials */
.testimonial {
  position: relative;
}

.testimonial .client-logo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 40px;
  width: auto;
  z-index: 1;
}

.testi-card {
  position: relative;
}

.testi-card .client-logo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 40px;
  width: auto;
  z-index: 1;
}

/* Smaller logos for landscape client logos */
.testimonial img[alt*="AVID Esq. Group"],
.testimonial img[alt*="Vet Law 100"],
.testimonial img[alt*="Posternock Apell"],
.testimonial img[alt*="Coultis Law"],
.testimonial img[alt*="Happy Estate Planning"],
.testi-card img[alt*="AVID Esq. Group"],
.testi-card img[alt*="Vet Law 100"],
.testi-card img[alt*="Posternock Apell"],
.testi-card img[alt*="Coultis Law"],
.testi-card img[alt*="Happy Estate Planning"] {
  height: 28px !important;
  width: auto;
}

/* Careers page: yellow focus for all form inputs */
#careersForm .input input:focus,
#careersForm .input select:focus,
#careersForm .input textarea:focus {
  border-color: #fbcb0c !important;
  background: rgba(251,203,12,0.12) !important;
}

/* Portal login page: yellow focus for all form inputs */
[data-portal] .input input:focus,
[data-portal] .input select:focus,
[data-portal] .input textarea:focus,
[data-portal] .pwd-box:focus-within {
  border-color: #fbcb0c !important;
  background: rgba(251,203,12,0.12) !important;
}

/* Home page newsletter form: yellow focus for all form inputs */
[data-newsletter] .input input:focus,
[data-newsletter] .input select:focus,
[data-newsletter] .input textarea:focus {
  border-color: #fbcb0c !important;
  background: rgba(251,203,12,0.12) !important;
}

/* Quote page form: yellow focus for all form inputs */
#quoteForm .input input:focus,
#quoteForm .input select:focus,
#quoteForm .input textarea:focus {
  border-color: #fbcb0c !important;
  background: rgba(251,203,12,0.12) !important;
}

/* Dark mode styles for mobile testimonials */
@media (max-width: 768px) {
  .kpi-number {
    font-size: 2.5rem;
  }
  
  /* Dark mode testimonial cards */
  [data-theme="dark"] .testi-card {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
  }
  
  [data-theme="dark"] .testi-card .testi-title {
    color: #ffffff !important;
  }
  
  [data-theme="dark"] .testi-card .testi-quote {
    color: #e0e0e0 !important;
  }
  
  [data-theme="dark"] .testi-card .testi-name {
    color: #b0b0b0 !important;
  }
  
  [data-theme="dark"] .testi-card .testi-stars {
    color: #ffd700 !important;
  }
}

/* Responsive visibility classes */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  
  .mobile-only {
    display: block;
  }
}

/* Custom spacing for Review Us button on Impact page - Mobile only */
@media (max-width: 768px) {
  .testimonials-section .text-center {
    margin-top: 200px;
  }
}

/* Blog post: tighten gap before 'More from' */
section.surface.post-more { padding-top: 24px; }
@media (min-width: 900px) {
  section.surface.post-more { padding-top: 32px; }
}