/* V4.6 READABILITY MERGED INTO AUTHORITATIVE VISUAL SYSTEM */
/* iCHARLES V4.6 — READABILITY / TYPOGRAPHY PASS
   Goal: keep the cyberpunk identity while making client-facing content
   as comfortable to read as a strong commercial portfolio.
   Desktop-first. Mobile remains intentionally compact. */

/* Shared font rhythm */
:root{
  --v46-body:17px;
  --v46-body-lg:18px;
  --v46-card:15.5px;
  --v46-small:12px;
  --v46-label:12px;
  --v46-button:13px;
  --v46-nav:14px;
}

@media (min-width: 900px){

  /* ---------- GLOBAL READABILITY ---------- */
  body{
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }

  .v4-unified-nav a{
    font-size:var(--v46-nav)!important;
    letter-spacing:.045em!important;
    min-height:44px!important;
  }

  header .brand strong,
  .site-header .brand strong,
  .studio-header .brand strong,
  .try-header .brand strong{
    font-size:14px!important;
  }

  header .brand small,
  .site-header .brand small,
  .studio-header .brand small,
  .try-header .brand small{
    font-size:11.5px!important;
    line-height:1.4!important;
    letter-spacing:.055em!important;
  }

  .v423-menu-button strong{
    font-size:12px!important;
    letter-spacing:.04em!important;
  }

  .v423-panel-intro span,
  .v423-panel-foot span{
    font-size:11px!important;
  }

  .v423-panel-intro p{
    font-size:14px!important;
    line-height:1.55!important;
  }

  .v423-panel-nav strong{
    font-size:15px!important;
    line-height:1.25!important;
  }

  .v423-panel-nav small{
    font-size:12.5px!important;
    line-height:1.45!important;
  }

  .v423-panel-contact > span,
  .v423-panel-contact small{
    font-size:10.5px!important;
  }

  .v423-panel-contact strong{
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  .v4-unified-footer{
    font-size:11.5px!important;
    line-height:1.65!important;
  }

  .v4-unified-footer .v4-footer-note{
    font-size:10.5px!important;
    line-height:1.65!important;
  }

  /* ---------- SHARED BUTTONS ---------- */
  .primary-btn,
  .secondary-btn,
  .studio-primary,
  .studio-secondary,
  .try-primary,
  .try-secondary,
  .try-hire,
  .showroom-all,
  .studio-entry-strip>a,
  .demo-actions a,
  .demo-actions button,
  .wizard-next,
  .wizard-submit,
  .wizard-back,
  .full-preview,
  .recommend-button,
  .btn,
  .live-case,
  .v45-button{
    font-size:var(--v46-button)!important;
    line-height:1.25!important;
    letter-spacing:.035em!important;
  }

  /* ---------- HOME ---------- */
  .clarity-status{
    font-size:12px!important;
    letter-spacing:.07em!important;
  }

  .hero-lead{
    font-size:19px!important;
    line-height:1.72!important;
    max-width:760px!important;
  }

  .clarity-proof strong{
    font-size:13px!important;
  }

  .clarity-proof span{
    font-size:14px!important;
    line-height:1.55!important;
  }

  .clarity-section-head > p,
  .web-cta-copy > p{
    font-size:17px!important;
    line-height:1.72!important;
  }

  .clarity-section-head > div > span,
  .clarity-pill{
    font-size:12px!important;
  }

  .clarity-service-card small{
    font-size:11.5px!important;
    line-height:1.45!important;
  }

  .clarity-service-card h3{
    font-size:clamp(26px,2.6vw,38px)!important;
  }

  .clarity-service-card p{
    font-size:16px!important;
    line-height:1.7!important;
  }

  .clarity-service-card a{
    font-size:12.5px!important;
  }

  .web-cta-steps span{
    font-size:14px!important;
    line-height:1.45!important;
  }

  .v4-proof-intro>div>span{
    font-size:12px!important;
  }

  .v4-proof-intro p{
    font-size:18px!important;
    line-height:1.7!important;
  }

  .v4-window-top{
    font-size:10px!important;
  }

  .v4-window-kicker{
    font-size:10.5px!important;
  }

  .v4-window-stats span{
    font-size:9.5px!important;
  }

  .v4-window-stats b{
    font-size:13px!important;
  }

  .v4-window-tasks span{
    font-size:13px!important;
  }

  .v4-proof-bottom small,
  .v4-proof-bottom b{
    font-size:10.5px!important;
  }

  .v4-proof-bottom strong{
    font-size:17px!important;
  }

  .v4-proof-bottom p{
    font-size:14.5px!important;
    line-height:1.62!important;
  }

  /* V4.5 commercial home content */
  .v45-kicker{
    font-size:12px!important;
  }

  .v45-value-head p{
    font-size:17px!important;
    line-height:1.72!important;
  }

  .v45-value-card b{
    font-size:11px!important;
  }

  .v45-value-card strong{
    font-size:19px!important;
  }

  .v45-value-card p{
    font-size:15.5px!important;
    line-height:1.68!important;
  }

  .v45-value-cta small{
    font-size:11px!important;
  }

  .v45-value-cta strong{
    font-size:17px!important;
    line-height:1.45!important;
  }

  .v45-value-cta a{
    font-size:13px!important;
  }

  /* ---------- SERVICES ---------- */
  .v45-services-hero p{
    font-size:19px!important;
    line-height:1.74!important;
  }

  .v45-hero-proof::before{
    font-size:10.5px!important;
  }

  .v45-proof-line span{
    font-size:10.5px!important;
  }

  .v45-proof-line strong{
    font-size:14.5px!important;
    line-height:1.45!important;
  }

  .v45-section-head p{
    font-size:17px!important;
    line-height:1.72!important;
  }

  .v45-service-num{
    font-size:11px!important;
  }

  .v45-service-copy p{
    font-size:16.5px!important;
    line-height:1.72!important;
  }

  .v45-get>strong{
    font-size:12px!important;
  }

  .v45-get li{
    font-size:15.5px!important;
    line-height:1.55!important;
  }

  .v45-process b{
    font-size:11px!important;
  }

  .v45-process strong{
    font-size:16px!important;
  }

  .v45-process p{
    font-size:14.5px!important;
    line-height:1.65!important;
  }

  .v45-evidence small{
    font-size:10.5px!important;
  }

  .v45-evidence p{
    font-size:15px!important;
    line-height:1.68!important;
  }

  .v45-evidence em{
    font-size:11px!important;
  }

  .v45-faq summary{
    font-size:17px!important;
    line-height:1.45!important;
  }

  .v45-faq details p{
    font-size:16px!important;
    line-height:1.75!important;
  }

  .v45-start-card span{
    font-size:10.5px!important;
  }

  .v45-start-card p{
    font-size:15.5px!important;
    line-height:1.7!important;
  }

  .v45-project-strip small{
    font-size:10.5px!important;
  }

  .v45-project-strip strong{
    font-size:19px!important;
  }

  .v45-project-strip p{
    font-size:14.5px!important;
    line-height:1.65!important;
  }

  .v45-project-strip a{
    font-size:11.5px!important;
  }

  /* ---------- TRY APPS ---------- */
  .try-kicker{
    font-size:12px!important;
  }

  .try-hero p{
    font-size:19px!important;
    line-height:1.72!important;
  }

  .live-app-note b{
    font-size:11px!important;
  }

  .live-app-note span{
    font-size:15px!important;
    line-height:1.6!important;
  }

  .live-library-head>div>span{
    font-size:12px!important;
  }

  .live-library-head p{
    font-size:17px!important;
    line-height:1.72!important;
  }

  .live-app-identity small{
    font-size:11px!important;
  }

  .live-app-identity p{
    font-size:17px!important;
    line-height:1.72!important;
  }

  .live-app-facts small{
    font-size:10px!important;
  }

  .live-app-facts b{
    font-size:12px!important;
  }

  .live-open span{
    font-size:13px!important;
  }

  .live-open small{
    font-size:10.5px!important;
  }

  .live-case{
    font-size:12px!important;
  }

  /* ---------- PORTFOLIO ---------- */
  .site-nav,
  .site-nav a{
    font-size:14px!important;
  }

  .brand-wordmark{
    font-size:14px!important;
  }

  .header-status{
    font-size:11.5px!important;
  }

  .eyebrow{
    font-size:12px!important;
    line-height:1.5!important;
  }

  .hero-intro{
    font-size:18px!important;
    line-height:1.72!important;
  }

  .hero-meta small,
  .hero-meta span{
    font-size:11px!important;
    line-height:1.45!important;
  }

  /* Common portfolio content blocks across overview and case studies */
  .project-card p,
  .case-card p,
  .case-study p,
  .project-summary,
  .project-intro,
  .case-copy p,
  .project-copy p,
  .portfolio-copy p,
  .project-section p,
  .case-section p{
    font-size:16.5px!important;
    line-height:1.72!important;
  }

  .project-card small,
  .case-card small,
  .case-study small,
  .project-label,
  .case-label,
  .project-kicker{
    font-size:11px!important;
    line-height:1.45!important;
  }

  /* Keep decorative HUD text intentionally small; it is visual garnish, not content. */
  .hud{
    font-size:9px!important;
  }

  /* ---------- WEBSITE STUDIO ---------- */
  .studio-live{
    font-size:12px!important;
  }

  .studio-intro-copy p,
  .studio-mode-head p{
    font-size:18px!important;
    line-height:1.72!important;
  }

  .studio-intro-map strong{
    font-size:15px!important;
  }

  .studio-intro-map span{
    font-size:14px!important;
    line-height:1.55!important;
  }

  .studio-intro-map small{
    font-size:11px!important;
  }

  .mode-badge,
  .studio-mode-head>span,
  .step-heading>span{
    font-size:11.5px!important;
  }

  .studio-mode-option strong{
    font-size:22px!important;
  }

  .studio-mode-option p{
    font-size:15.5px!important;
    line-height:1.68!important;
  }

  .studio-mode-option>span:last-child,
  .free-design{
    font-size:11px!important;
    line-height:1.45!important;
  }

  .studio-sales-flow strong{
    font-size:14px!important;
  }

  .studio-sales-flow span{
    font-size:12.5px!important;
    line-height:1.55!important;
  }

  .studio-sales-flow-note{
    font-size:13px!important;
    line-height:1.6!important;
  }

  .wizard-topbar span,
  .wizard-topbar button,
  .studio-mode-status{
    font-size:11px!important;
  }

  .wizard-topbar strong{
    font-size:13px!important;
  }

  .step-heading p{
    font-size:16px!important;
    line-height:1.7!important;
  }

  .type-choice-grid strong,
  .design-mode-card strong,
  .theme-choice-grid strong{
    font-size:14px!important;
  }

  .type-choice-grid small,
  .design-mode-card small,
  .theme-choice-grid small{
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  .choice-action,
  .type-choice-grid em,
  .design-mode-card em{
    font-size:10.5px!important;
  }

  .simple-fields label>span,
  .big-field>span{
    font-size:11.5px!important;
  }

  .simple-fields input,
  .simple-fields select,
  .simple-fields textarea,
  .website-wizard input,
  .website-wizard select,
  .website-wizard textarea{
    font-size:15px!important;
    line-height:1.5!important;
  }

  .simple-fields small,
  .custom-design-note,
  .custom-design-note span{
    font-size:12.5px!important;
    line-height:1.6!important;
  }

  /* ---------- ABOUT / CONTACT / GENERAL SUBPAGES ---------- */
  .kicker{
    font-size:12px!important;
  }

  .lead{
    font-size:18px!important;
    line-height:1.72!important;
  }

  .story p,
  .contact-copy p{
    font-size:17px!important;
    line-height:1.74!important;
  }

  .principle p{
    font-size:15.5px!important;
    line-height:1.68!important;
  }

  .principle b,
  .identity-bottom small{
    font-size:11.5px!important;
  }

  .contact-note{
    font-size:12.5px!important;
    line-height:1.72!important;
  }

  .contact-services span{
    font-size:11.5px!important;
  }

  .studio-entry-strip span{
    font-size:10.5px!important;
  }

  .studio-entry-strip strong{
    font-size:14px!important;
    line-height:1.55!important;
  }

  .v4-contact-actions a{
    font-size:12.5px!important;
  }

  .terminal-top,
  .terminal-foot{
    font-size:10.5px!important;
  }

  .line small{
    font-size:10.5px!important;
  }

  .line strong{
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  .contact-status{
    font-size:11px!important;
  }

  .v45-contact-path small{
    font-size:10.5px!important;
  }

  .v45-contact-path strong{
    font-size:17px!important;
  }

  .v45-contact-path p{
    font-size:14.5px!important;
    line-height:1.65!important;
  }

  .v45-contact-path a{
    font-size:11.5px!important;
  }

  /* ---------- 404 ---------- */
  .error-code{
    font-size:10.5px!important;
  }

  .error-shell p{
    font-size:17px!important;
    line-height:1.72!important;
  }

  .actions a{
    font-size:11.5px!important;
  }
}

/* Tablet gets a smaller readability lift without changing the mobile design language. */
@media (min-width: 721px) and (max-width: 899px){
  .v4-unified-nav a{font-size:12px!important}
  .hero-lead,.try-hero p,.studio-intro-copy p,.v45-services-hero p,.lead{font-size:17px!important;line-height:1.68!important}
  .clarity-service-card p,.live-app-identity p,.v45-service-copy p,.story p,.contact-copy p{font-size:15.5px!important;line-height:1.68!important}
  .v45-get li,.v45-faq details p{font-size:15px!important}
}

/* Mobile stays deliberately compact, but never let functional controls become microscopic. */
@media (max-width: 720px){
  .primary-btn,
  .secondary-btn,
  .studio-primary,
  .studio-secondary,
  .try-primary,
  .try-secondary,
  .v45-button,
  .wizard-next,
  .wizard-submit{
    font-size:11px!important;
  }

  .v423-panel-nav strong{font-size:13px!important}
  .v423-panel-nav small{font-size:11px!important;line-height:1.4!important}
}


/* iCHARLES V4.7 — COMPLETE VISUAL QA / FINAL POLISH LAYER
   One authoritative visual layer replacing the temporary V4.6.1–V4.6.4 fixes.

   Design rules:
   1) Cyan is an accent, not a large background.
   2) Important text must remain readable before decoration.
   3) Only one current-page navigation state exists.
   4) Header content may never overlap; horizontal nav yields to the slide panel.
   5) Decorative HUD text can stay small, functional text cannot.
*/

:root{
  --v47-bg:#05070b;
  --v47-surface:#07101a;
  --v47-surface-2:#0a1420;
  --v47-surface-3:#0c1826;
  --v47-text:#f5f9ff;
  --v47-copy:#c3cfde;
  --v47-muted:#a5b5c8;
  --v47-faint:#8295ac;
  --v47-cyan:#00d6e8;
  --v47-cyan-soft:#91edf5;
  --v47-violet:#8b5cff;
  --v47-pink:#ff2bd6;
  --v47-green:#68f7ae;
  --v47-line:rgba(142,177,220,.28);
  --v47-line-strong:rgba(0,214,232,.42);
  --v47-shadow:0 18px 52px rgba(0,0,0,.28);
}

/* ---------- BASE READABILITY ---------- */
html{background:var(--v47-bg)}
body{
  color:var(--v47-text)!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body p{color:var(--v47-copy)}
body p strong{color:#f7fbff}
::selection{background:rgba(0,214,232,.28)!important;color:#fff!important}

.hero-lead,
.clarity-section-head>p,
.clarity-service-card p,
.clarity-work-card p,
.showroom-copy p,
.web-cta-copy>p,
.v4-proof-intro p,
.v4-proof-bottom p,
.v45-value-head p,
.v45-value-card p,
.v45-section-head p,
.v45-service-copy p,
.v45-process p,
.v45-evidence p,
.v45-faq details p,
.v45-start-card p,
.v45-project-strip p,
.try-hero p,
.live-app-note span,
.live-library-head p,
.live-app-identity p,
.portfolio-clarity-note,
.portfolio-launch-head>p,
.section-head>p,
.disciplines-head>p,
.discipline-copy p,
.story p,
.principle p,
.contact-copy p,
.contact-note,
.v45-contact-path p,
.studio-intro-copy>p,
.studio-mode-head p,
.studio-intro-map span,
.step-heading p,
.simple-fields small,
.choice-title>span,
.recommended-note span,
.request-summary p,
.no-payment span{
  color:var(--v47-copy)!important;
  opacity:1!important;
}

.clarity-status,
.clarity-section-head>div>span,
.clarity-pill,
.v4-proof-intro>div>span,
.v45-kicker,
.try-kicker,
.live-library-head>div>span,
.live-app-identity small,
.portfolio-launch-head>div>span,
.section-index,
.kicker,
.studio-live,
.step-heading>span{
  color:var(--v47-cyan-soft)!important;
  opacity:1!important;
}

/* Raise low-priority functional labels without flattening decorative HUD text. */
.clarity-proof span,
.v4-proof-bottom small,
.v4-proof-bottom b,
.live-app-facts small,
.live-app-facts b,
.live-app-note b,
.v45-proof-line span,
.v45-proof-line strong,
.v45-get>strong,
.v45-get li,
.v45-process b,
.v45-process strong,
.v45-evidence small,
.v45-evidence em,
.v45-start-card span,
.v45-project-strip small,
.v45-project-strip strong,
.simple-fields label>span,
.advanced-style summary,
.optional-features summary,
.check-grid span,
.request-summary span,
.contact-services span,
.terminal-top,
.terminal-foot,
.terminal-line small,
.terminal-line strong{
  opacity:1!important;
}

/* ---------- PANELS: DARKER BACKPLATES FOR TEXT ---------- */
.clarity-proof a,
.clarity-service-card,
.clarity-work-card,
.v4-product-window,
.v4-proof-bottom article,
.v45-value-card,
.v45-service,
.v45-evidence a,
.v45-start-card,
.v45-faq details,
.live-app-card,
.launch-card,
.discipline-panel,
.project-tab,
.principle,
.contact-terminal,
.v45-contact-path,
.studio-intro-map,
.wizard-shell,
.type-choice-grid label,
.theme-choice-grid label,
.advanced-style,
.optional-features,
.request-summary{
  background-color:rgba(6,12,20,.88)!important;
  border-color:var(--v47-line)!important;
}

/* ---------- PRIMARY CTA SYSTEM ----------
   No large bright cyan/sky-blue fills anywhere.
*/
.primary-btn,
.clarity-primary,
.btn-primary,
.portfolio-try-btn,
.try-primary,
.try-hire,
.live-open,
.studio-primary,
button.wizard-next,
button.wizard-submit,
.full-preview,
.v45-button.primary,
input[type="submit"]{
  background:
    linear-gradient(135deg,
      rgba(6,16,25,.98) 0%,
      rgba(8,31,44,.98) 48%,
      rgba(31,17,62,.98) 100%)!important;
  border:1px solid var(--v47-line-strong)!important;
  color:var(--v47-text)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(255,255,255,.018),
    var(--v47-shadow)!important;
  filter:none!important;
}

.primary-btn span,
.clarity-primary span,
.btn-primary span,
.portfolio-try-btn span,
.try-primary span,
.live-open span,
.studio-primary span,
button.wizard-next span,
button.wizard-submit span,
.full-preview span,
.v45-button.primary span{
  color:#f8fcff!important;
  opacity:1!important;
  -webkit-text-stroke:.16px rgba(0,0,0,.72);
  text-shadow:0 1px 1px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.42)!important;
}

.primary-btn small,
.clarity-primary small,
.btn-primary small,
.portfolio-try-btn small,
.live-open small,
.studio-primary small,
.v45-button.primary small{
  color:#b6dce7!important;
  opacity:1!important;
  -webkit-text-stroke:.12px rgba(0,0,0,.62);
  text-shadow:0 1px 1px rgba(0,0,0,.9)!important;
}

.primary-btn b,
.clarity-primary b,
.btn-primary strong,
.portfolio-try-btn strong,
.try-primary b,
.try-hire b,
.live-open b,
.studio-primary b,
button.wizard-next b,
button.wizard-submit b,
.v45-button.primary b{
  color:var(--v47-cyan-soft)!important;
  opacity:1!important;
  text-shadow:0 0 12px rgba(0,214,232,.22)!important;
}

.primary-btn:hover,
.clarity-primary:hover,
.btn-primary:hover,
.portfolio-try-btn:hover,
.try-primary:hover,
.try-hire:hover,
.live-open:hover,
.studio-primary:hover,
button.wizard-next:hover,
button.wizard-submit:hover,
.full-preview:hover,
.v45-button.primary:hover,
input[type="submit"]:hover{
  background:
    linear-gradient(135deg,
      rgba(8,20,31,.99) 0%,
      rgba(10,40,55,.99) 48%,
      rgba(39,21,77,.99) 100%)!important;
  border-color:rgba(0,214,232,.62)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 20px 52px rgba(0,0,0,.34),
    0 0 28px rgba(0,214,232,.08)!important;
  filter:none!important;
}

/* Secondary actions remain dark, with clear white text. */
.secondary-btn,
.clarity-secondary-strong,
.btn-ghost,
.try-secondary,
.studio-secondary,
.live-case,
.v45-button:not(.primary),
.v4-contact-actions a,
.v45-project-strip a{
  background:rgba(6,11,19,.88)!important;
  border-color:rgba(142,177,220,.28)!important;
  color:#edf6ff!important;
}

.secondary-btn span,
.clarity-secondary-strong span,
.btn-ghost span,
.try-secondary,
.studio-secondary,
.live-case,
.v45-button:not(.primary) span,
.v4-contact-actions a,
.v45-project-strip a{
  color:#edf6ff!important;
  opacity:1!important;
}

/* Portfolio launch tiles: make the bottom action look like a real button,
   but keep it dark and high contrast. */
.launch-card b{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:48px!important;
  margin-top:auto!important;
  padding:0 14px!important;
  border:1px solid rgba(0,214,232,.32)!important;
  background:linear-gradient(90deg,rgba(5,17,26,.96),rgba(17,18,42,.96))!important;
  color:#f1fbff!important;
  font-size:11.5px!important;
  line-height:1.3!important;
  letter-spacing:.035em!important;
  -webkit-text-stroke:.14px rgba(0,0,0,.7);
  text-shadow:0 1px 1px rgba(0,0,0,.95)!important;
}

/* Decorative mock buttons should not introduce giant sky-blue islands either. */
.mini-button,
.checkout-button{
  background:rgba(6,20,29,.94)!important;
  color:#f3fbff!important;
  border:1px solid rgba(0,214,232,.34)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.9)!important;
}

/* ---------- HEADER: COLLISION-PROOF ---------- */
.site-header,
.try-header,
.studio-header,
.shell>header{
  display:grid!important;
  grid-template-columns:minmax(230px,280px) minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:24px!important;
  min-width:0!important;
}

/* Retire older per-page toggles; the V4.2.3 MENU panel is canonical. */
.site-header>.menu-toggle,
.site-header>.nav-toggle,
.try-header>.menu-toggle,
.try-header>.nav-toggle,
.studio-header>.menu-toggle,
.studio-header>.nav-toggle,
.shell>header>.menu-toggle,
.shell>header>.nav-toggle,
.v4-mobile-menu{
  display:none!important;
}

.site-header>.v423-header-left,
.try-header>.v423-header-left,
.studio-header>.v423-header-left,
.shell>header>.v423-header-left{
  grid-column:1!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  overflow:visible!important;
}

.v423-header-left .brand{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  overflow:visible!important;
  justify-self:start!important;
}

.v423-header-left .brand img,
.v423-header-left .brand-logo{
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
}

.v423-header-left .brand>div{
  min-width:0!important;
  width:auto!important;
}

.v423-header-left .brand strong,
.v423-header-left .brand-wordmark{
  display:block!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:13.5px!important;
  line-height:1.05!important;
  letter-spacing:.045em!important;
}

.v423-header-left .brand small{
  display:none!important;
}

/* Low-value status chips are removed from the crowded top bar. */
.site-header>.header-node,
.site-header>.header-status,
.try-header>.header-node,
.try-header>.header-status,
.try-header>.try-hire,
.studio-header>.header-node,
.studio-header>.header-status,
.studio-header>.studio-header-help,
.shell>header>.header-node,
.shell>header>.header-status{
  display:none!important;
}

.site-header>.v4-unified-nav,
.try-header>.v4-unified-nav,
.studio-header>.v4-unified-nav,
.shell>header>.v4-unified-nav{
  grid-column:2!important;
  min-width:0!important;
  justify-self:end!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
  gap:clamp(8px,1.15vw,20px)!important;
}

/* ---------- ONE CURRENT-PAGE NAV STATE ---------- */
.v4-unified-nav a,
.v4-unified-nav .v4-nav-studio,
.v4-unified-nav .v45-nav-services{
  min-height:44px!important;
  padding:0 10px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#aebccd!important;
  border-radius:0!important;
  white-space:nowrap!important;
}

.v4-unified-nav a::after,
.v4-unified-nav .v4-nav-studio::after,
.v4-unified-nav .v45-nav-services::after{
  display:none!important;
}

.v4-unified-nav a:hover,
.v4-unified-nav a:focus-visible{
  color:#f5faff!important;
  background:rgba(142,177,220,.045)!important;
  border-color:rgba(142,177,220,.18)!important;
  transform:none!important;
}

.v4-unified-nav a[aria-current="page"]{
  color:#f8fdff!important;
  background:linear-gradient(90deg,rgba(0,214,232,.08),rgba(139,92,255,.055))!important;
  border-color:rgba(0,214,232,.42)!important;
  box-shadow:inset 3px 0 0 rgba(0,214,232,.72)!important;
  transform:none!important;
}

.v4-unified-nav .v4-nav-studio:not([aria-current="page"]){
  color:#b8c5d5!important;
}

/* Slide panel uses the same logic, with one left rail only on current page. */
.v423-panel{
  background:rgba(5,9,15,.985)!important;
  border-right-color:rgba(0,214,232,.20)!important;
}

.v423-panel-nav a,
.v423-panel-nav .v423-panel-primary,
.v423-panel-nav .v45-panel-services{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.v423-panel-nav a strong{color:#e5edf7!important}
.v423-panel-nav a small{color:#9fb0c3!important;opacity:1!important}

.v423-panel-nav a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(0,214,232,.085),rgba(139,92,255,.035),transparent)!important;
  border-color:rgba(0,214,232,.23)!important;
  box-shadow:inset 3px 0 0 rgba(0,214,232,.72)!important;
}

.v423-panel-nav a[aria-current="page"] strong{color:#f7fdff!important}
.v423-panel-nav a[aria-current="page"]>b{color:var(--v47-cyan-soft)!important}

/* Footer current page is intentionally quiet. */
.v4-unified-footer{
  color:#a9b7c8!important;
}
.v4-unified-footer a{color:#aebccd!important}
.v4-unified-footer a:hover{color:#f5fbff!important}
.v4-unified-footer nav a[aria-current="page"]{
  color:#eafcff!important;
  text-decoration:none!important;
}

/* ---------- SERVICES: REMOVE DEFENSIVE VISUAL LANGUAGE ---------- */
.v45-hero-proof::before{
  content:"PROOF // VERIFIABLE WORK"!important;
  color:#91a5bb!important;
}

/* ---------- FOCUS / CLICK CLARITY ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--v47-cyan)!important;
  outline-offset:3px!important;
}

/* ---------- RESPONSIVE ---------- */

/* Seven top-nav items need real room. Below this width, the slide panel wins. */
@media(max-width:1279px){
  .site-header,
  .try-header,
  .studio-header,
  .shell>header{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .site-header>.v4-unified-nav,
  .try-header>.v4-unified-nav,
  .studio-header>.v4-unified-nav,
  .shell>header>.v4-unified-nav{
    display:none!important;
  }

  .v423-header-left .brand strong,
  .v423-header-left .brand-wordmark{
    font-size:13px!important;
  }
}

/* On genuinely wide screens, one short brand descriptor can return. */
@media(min-width:1500px){
  .v423-header-left .brand small{
    display:block!important;
    margin-top:3px!important;
    color:#91a2b7!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    letter-spacing:.04em!important;
    white-space:nowrap!important;
  }
}

@media(max-width:720px){
  .site-header,
  .try-header,
  .studio-header,
  .shell>header{
    min-height:72px!important;
    height:auto!important;
  }

  .site-header>.v423-header-left,
  .try-header>.v423-header-left,
  .studio-header>.v423-header-left,
  .shell>header>.v423-header-left{
    gap:9px!important;
  }

  .v423-header-left .brand img,
  .v423-header-left .brand-logo{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
  }

  .v423-header-left .brand strong,
  .v423-header-left .brand-wordmark{
    font-size:12px!important;
  }

  .primary-btn,
  .secondary-btn,
  .btn,
  .try-primary,
  .try-secondary,
  .live-open,
  .live-case,
  .studio-primary,
  .studio-secondary,
  .v45-button{
    min-height:54px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .primary-btn,
  .secondary-btn,
  .btn,
  .try-primary,
  .try-secondary,
  .live-open,
  .live-case,
  .v45-button,
  .v4-unified-nav a{
    transition:none!important;
  }
}

/* ===== iCHARLES V4.8 FINAL CLEANUP + WORK UPDATES =====
   This section lives inside visual-system-v47.css so the stable visual
   corrections remain in ONE authoritative visual layer. */

/* Header: MENU + logo + one-line name. Descriptors never compete with navigation. */
.v423-header-left{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  width:auto!important;
  overflow:visible!important;
}
.v423-header-left .brand{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
}
.v423-header-left .brand>div{
  display:block!important;
  width:auto!important;
  min-width:108px!important;
  max-width:none!important;
  overflow:visible!important;
}
.v423-header-left .brand strong,
.v423-header-left .brand-wordmark{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:13.5px!important;
  line-height:1!important;
  letter-spacing:.055em!important;
}
.v423-header-left .brand small{
  display:none!important;
}

/* Privacy, request-success and legacy first-actions: no bright cyan slabs. */
.privacy-actions a:first-child,
.sent-actions a:first-child,
.v48-sent-actions a:first-child,
.actions a:first-child{
  background:linear-gradient(135deg,rgba(6,16,25,.98),rgba(8,31,44,.98),rgba(31,17,62,.98))!important;
  border:1px solid rgba(0,214,232,.42)!important;
  color:#f7fbff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.92)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
.privacy-actions a,
.sent-actions a,
.v48-sent-actions a,
.actions a{
  font-size:11.5px!important;
  line-height:1.3!important;
  letter-spacing:.03em!important;
}

/* Case-study live app CTA gets the same dark/high-contrast treatment. */
.case-try-demo{
  background:linear-gradient(100deg,rgba(5,18,28,.98),rgba(22,17,51,.98))!important;
  border-color:rgba(0,214,232,.38)!important;
  color:#f7fbff!important;
}
.case-try-demo span{
  color:#f7fbff!important;
  -webkit-text-stroke:.14px rgba(0,0,0,.68);
  text-shadow:0 1px 1px rgba(0,0,0,.95)!important;
}
.case-try-demo small{
  color:#a9cad7!important;
  opacity:1!important;
}
.case-try-demo b{color:#91edf5!important}

/* Project-directory active work cards. */
.v48-current-work{
  border-color:rgba(104,247,174,.30)!important;
  background:
    linear-gradient(135deg,rgba(6,20,22,.94),rgba(7,12,22,.92),rgba(30,16,50,.90))!important;
}
.v48-current-work small{color:#8cf7ba!important}
.v48-current-work h2{color:#f7fbff!important}
.v48-current-work p{color:#c3cfde!important}

/* General project inquiry form. */
.v48-project-form{
  margin-top:28px;
  border:1px solid rgba(142,177,220,.24);
  background:linear-gradient(135deg,rgba(6,12,20,.92),rgba(10,18,30,.88));
  padding:clamp(20px,3vw,30px);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.v48-project-form>span{
  display:block;
  color:#91edf5;
  font:700 11px/1.4 "Space Mono",monospace;
  letter-spacing:.07em;
}
.v48-project-form h3{
  margin:10px 0 8px;
  color:#f7fbff;
  font-size:clamp(22px,3vw,34px);
  letter-spacing:-.03em;
}
.v48-project-form>p{
  margin:0 0 20px;
  max-width:720px;
  color:#c3cfde!important;
  font-size:15px;
  line-height:1.65;
}
.v48-project-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.v48-project-form-grid label{
  display:grid;
  gap:7px;
  color:#a9b9cb!important;
  font:700 10.5px/1.35 "Space Mono",monospace;
  letter-spacing:.035em;
}
.v48-project-form-grid label.wide{grid-column:1/-1}
.v48-project-form input,
.v48-project-form select,
.v48-project-form textarea{
  width:100%;
  border:1px solid rgba(142,177,220,.25);
  background:#07101a;
  color:#f5f9ff!important;
  padding:13px 14px;
  border-radius:0;
  font:500 15px/1.5 Inter,Arial,sans-serif;
  outline:none;
}
.v48-project-form textarea{min-height:130px;resize:vertical}
.v48-project-form input:focus,
.v48-project-form select:focus,
.v48-project-form textarea:focus{
  border-color:rgba(0,214,232,.62);
  box-shadow:0 0 0 3px rgba(0,214,232,.08);
}
.v48-form-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.v48-form-actions button{
  min-height:52px;
  padding:0 18px;
  border:1px solid rgba(0,214,232,.48);
  background:linear-gradient(135deg,rgba(6,16,25,.98),rgba(8,31,44,.98),rgba(31,17,62,.98));
  color:#f7fbff;
  font:800 11.5px/1 "Space Mono",monospace;
  letter-spacing:.045em;
  cursor:pointer;
}
.v48-form-actions a{
  color:#b9c9da!important;
  font:700 10.5px/1.4 "Space Mono",monospace;
}

/* Accessible skip links on the standalone case studies. */
.skip-link{
  position:fixed!important;
  left:16px!important;
  top:-90px!important;
  z-index:9999!important;
  padding:11px 14px!important;
  background:#07101a!important;
  border:1px solid rgba(0,214,232,.58)!important;
  color:#f7fbff!important;
  font:800 11px/1 "Space Mono",monospace!important;
  transition:top .16s ease!important;
}
.skip-link:focus{top:16px!important}

/* The general inquiry confirmation page. */
.v48-sent{
  min-height:76vh;
  display:grid;
  place-items:center;
  padding:70px 0;
}
.v48-sent-box{
  width:min(880px,100%);
  border:1px solid rgba(142,177,220,.24);
  background:linear-gradient(135deg,rgba(6,14,22,.94),rgba(13,10,25,.92));
  padding:clamp(28px,5vw,58px);
}
.v48-sent-status{
  color:#68f7ae;
  font:800 11px/1.4 "Space Mono",monospace;
  letter-spacing:.08em;
}
.v48-sent-box h1{
  margin:18px 0;
  font-size:clamp(46px,7vw,94px);
  line-height:.9;
  letter-spacing:-.055em;
}
.v48-sent-box p{
  max-width:720px;
  color:#c3cfde!important;
  font-size:17px;
  line-height:1.7;
}
.v48-sent-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px;
}
.v48-sent-actions a{
  min-height:50px;
  padding:0 16px;
  display:flex;
  align-items:center;
  border:1px solid rgba(142,177,220,.26);
  color:#edf6ff!important;
  text-decoration:none;
}

/* Remove visual importance from unfinished concepts while keeping identity truthful. */
.discipline-facts strong,
.capability-name small{opacity:1!important}

@media(max-width:720px){
  .v423-header-left .brand>div{min-width:0!important}
  .v423-header-left .brand strong,
  .v423-header-left .brand-wordmark{font-size:11.5px!important}
  .v48-project-form-grid{grid-template-columns:1fr}
  .v48-project-form-grid label.wide{grid-column:auto}
}

/* ===== iCHARLES V4.8.1 — ETTE ECOSYSTEM ===== */
.ette-ecosystem{
  margin:0 0 88px;
  border-top:1px solid var(--line);
  padding-top:48px;
}
.ette-ecosystem-head{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:42px;
  align-items:end;
}
.ette-ecosystem-head span{
  color:#91edf5;
  font:700 10.5px/1.4 "Space Mono",monospace;
  letter-spacing:.08em;
}
.ette-ecosystem-head h2{
  margin:12px 0 0;
  font-size:clamp(34px,5vw,68px);
  line-height:.94;
  letter-spacing:-.045em;
}
.ette-ecosystem-head p{
  margin:0;
  color:#c3cfde!important;
  font-size:16px;
  line-height:1.7;
  max-width:760px;
}
.ette-connected-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:28px;
}
.ette-connected-card{
  min-height:280px;
  padding:24px;
  border:1px solid rgba(142,177,220,.24);
  background:
    linear-gradient(135deg,rgba(6,14,22,.94),rgba(10,19,30,.90),rgba(27,15,46,.88));
  display:flex;
  flex-direction:column;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.ette-connected-card>small{
  color:#91edf5!important;
  font:700 10px/1.4 "Space Mono",monospace;
  letter-spacing:.07em;
}
.ette-connected-card h3{
  margin:14px 0 10px;
  color:#f7fbff;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.035em;
}
.ette-connected-card p{
  margin:0;
  color:#c3cfde!important;
  font-size:15px;
  line-height:1.68;
}
.ette-connected-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0 22px;
}
.ette-connected-meta span{
  border:1px solid rgba(142,177,220,.22);
  padding:7px 9px;
  color:#aebfd1;
  font:700 9.5px/1 "Space Mono",monospace;
}
.ette-connected-actions{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.ette-connected-actions a{
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  border:1px solid rgba(0,214,232,.38);
  background:linear-gradient(135deg,rgba(6,16,25,.98),rgba(8,31,44,.98),rgba(31,17,62,.98));
  color:#f7fbff!important;
  font:800 10.5px/1.25 "Space Mono",monospace;
  letter-spacing:.035em;
  text-decoration:none;
}
.ette-connected-note{
  margin-top:14px;
  padding:14px 16px;
  border-left:2px solid rgba(139,92,255,.68);
  background:rgba(139,92,255,.045);
  color:#aebfd1;
  font-size:14px;
  line-height:1.65;
}
@media(max-width:760px){
  .ette-ecosystem-head{grid-template-columns:1fr;gap:14px}
  .ette-connected-grid{grid-template-columns:1fr}
}