/* ==========================================================================
   KREATED, IN THE COLD OPEN LOOK
   Loaded last on every route. Layout, copy and structure belong to Kreated
   and are not touched here. This file only carries the look: a black ground,
   monochrome ink with Kreated's blue kept for the things that glow (the
   highlighted words, the light behind sections, the mark and the diagrams), Geist set light with a medium emphasis, soft grey light
   leaks, hairline rules that fade at both ends, panel cards, and one white
   pill per section carrying the action.
   ========================================================================== */

:root{
  color-scheme:dark;
  --mono-bg:#050505; --mono-panel:#0C0C0D; --mono-panel-2:#121214;
  --mono-line:rgba(255,255,255,.07); --mono-line-2:rgba(255,255,255,.12);
  --mono-fg:#F4F4F5; --mono-soft:#A1A1AA; --mono-dim:#85858E;
  --mono-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono-monof:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* the theme's composed tokens, pinned. The homepage script still writes its
     scroll progress, but nothing reads it any more: the ground stays black. */
  --ground:var(--mono-bg);
  --ink-1:var(--mono-fg);
  --ink-2:var(--mono-soft);
  --ink-3:#93939C;
  --ink-4:var(--mono-dim);
  --accent:#FFFFFF;
  --stroke:var(--mono-line-2);
  --stroke-hi:rgba(255,255,255,.26);
  --stroke-focus:#FFFFFF;
  --surface:var(--mono-panel);
  --surface-hi:var(--mono-panel-2);
  --cta-fill:#FFFFFF;
  --cta-ink:#0A0A0A;
  --cta-fill-hover:#E4E4E7;

  --navy:var(--mono-bg); --navy-2:var(--mono-panel-2); --ink:var(--mono-bg);
  --cobalt:#FFFFFF; --cobalt-lift:#FFFFFF; --cobalt-hover:#E4E4E7;
  --cobalt-soft:rgba(255,255,255,.10);
  --line:var(--mono-line-2);
  --panel:rgba(255,255,255,.03); --panel-line:var(--mono-line);
  --hl:linear-gradient(90deg,#1E44D8 0%,#5B86FF 62%,#A9C0FF 100%);
  --r:20px;
}

html,body{background:var(--mono-bg)!important;color:var(--mono-fg)}
body{font-family:var(--mono-sans);-webkit-font-smoothing:antialiased}
body,button,input,select,textarea{font-family:var(--mono-sans)}
::selection{background:#fff;color:#0A0A0A}

/* ---- type: light, tight, with a medium emphasis in place of a second colour */
h1,h2,h3,.bx-h,.hero__h1,.final__h,.wm__h,.page__h,.shero__h,.hx-h{
  font-family:var(--mono-sans)!important;font-weight:300!important;letter-spacing:-.025em}
h3,.svc__t,.fit__h{font-weight:500!important;letter-spacing:-.01em}
h1 em,h2 em,h3 em,.bx-h em,.hx-h em,.final__h em,.wm__h em,.page__h em,.sec__h em,
.hero__typed,.shero__h em,.shero__h > span:last-child,.cs__h > span:last-child{
  font-family:var(--mono-sans)!important;font-style:normal!important;font-weight:500!important;
  /* the highlight: Kreated's navy running into its cobalt, left to right,
     with the same soft halo the original put behind a glowing word */
  background:var(--hl)!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  filter:drop-shadow(0 0 18px rgba(91,134,255,.38))}
.hero__key,.hero__static b{font-weight:500!important;color:var(--mono-fg)!important}

/* ---- the small label above a heading: a mono tag */
.kx-chip{font-family:var(--mono-monof)!important;font-weight:500!important;font-size:.66rem!important;
  letter-spacing:.06em!important;text-transform:uppercase;color:var(--mono-fg)!important;
  border:1px solid var(--mono-line-2)!important;border-radius:999px!important;
  background:rgba(255,255,255,.03)!important;padding:4px 9px!important}

/* ---- pills */
.btn,.hx-btn,.head__cta,.drawer__cta,.offer__cta:not(.offer__cta--text){
  border-radius:999px!important;font-family:var(--mono-sans)!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease!important}
.btn--cobalt,.btn--solid,.hx-btn--go,.head__cta,.drawer__cta,
.offer__cta:not(.offer__cta--text){
  background:#FFFFFF!important;color:#0A0A0A!important;border:0!important;box-shadow:none!important}
.btn--cobalt::before{display:none!important}
.btn--cobalt:hover,.btn--solid:hover,.hx-btn--go:hover,.head__cta:hover,
.drawer__cta:hover,.offer__cta:not(.offer__cta--text):hover{
  transform:translateY(-1px);box-shadow:0 8px 30px -10px rgba(255,255,255,.35)!important}
.btn--ghost,.btn--line,.hx-btn:not(.hx-btn--go){
  background:linear-gradient(180deg,#17171A,#0D0D0F)!important;color:var(--mono-fg)!important;
  border:1px solid var(--mono-line-2)!important;box-shadow:none!important}
.btn--ghost:hover,.btn--line:hover,.hx-btn:not(.hx-btn--go):hover{
  border-color:rgba(255,255,255,.3)!important;transform:translateY(-1px)}
:focus-visible{outline:2px solid #fff!important;outline-offset:3px}

/* ---- header: flat, on the ground, a hairline that fades at both ends */
.head{background:rgba(5,5,5,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:0!important;box-shadow:none!important}
.head::after{content:"";position:absolute;left:50%;bottom:0;width:min(1120px,90%);height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--mono-line-2),transparent);
  pointer-events:none}
.head__mark{color:var(--mono-fg)!important}
.head__nav a{color:var(--mono-soft)!important;font-weight:400!important}
.head__nav a:hover,.head__nav a[aria-current]{color:var(--mono-fg)!important}

/* ---- sections: a fading hairline between them, grey light leaks behind */
main > section{position:relative}
main > section + section::after{content:"";position:absolute;left:50%;top:0;width:min(1120px,90%);height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--mono-line-2),transparent);
  pointer-events:none;z-index:1}
.bx-glow-r::before,.bx-glow-l::before{
  background:radial-gradient(closest-side,rgba(91,134,255,.30),rgba(30,68,216,.12) 55%,transparent)!important;
  filter:blur(40px)!important;opacity:1!important}
.atmos{display:none!important}

/* ---- panels: every card is the same quiet surface */
.svc__card,.fit__card,.rev,.kx-card,.hm-combo__in,.offer,.tier,.wm__stage,.case,.wk__card{
  background:linear-gradient(180deg,var(--mono-panel-2),var(--mono-panel))!important;
  border:1px solid var(--mono-line)!important;border-radius:20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
.svc__card:hover,.fit__card:hover,.kx-card:hover{border-color:var(--mono-line-2)!important}
.svc__d,.fit__body p,.rev__text,.bx-sub,.hero__support,.final__sub{color:var(--mono-soft)!important}
.svc__go,.fit__link,.ilink,.wm__all,.wk__all,.revs__all,.svc__more{color:var(--mono-fg)!important}

/* ---- questions */
.qa,.bx-sec .faqs details,details.qa{border:1px solid var(--mono-line)!important;border-radius:16px!important;
  background:var(--mono-panel)!important}

/* ---- form */
.field input,.field select,.field textarea,.kform input,.kform select,.kform textarea{
  background:rgba(255,255,255,.03)!important;border:1px solid var(--mono-line-2)!important;
  border-radius:12px!important;color:var(--mono-fg)!important;font-family:var(--mono-sans)!important}
.field input::placeholder,.field textarea::placeholder{color:var(--mono-dim)!important}
.field label,.field > span{color:var(--mono-soft)!important}

/* ---- footer: same ground, hairline above */
.foot{background:var(--mono-bg)!important;color:var(--mono-dim)!important;position:relative;border:0!important}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mono-line-2),transparent)}
.foot a{color:var(--mono-soft)!important}.foot a:hover{color:var(--mono-fg)!important}
.foot__colh{font-family:var(--mono-monof)!important;color:var(--mono-dim)!important;letter-spacing:.08em!important}
.foot__mark{color:var(--mono-fg)!important}


/* client marks: one pale ink on the black ground, at every scroll position */
.clients .client__logo,.client__logo{filter:brightness(0) invert(1)!important}
.clients .client{opacity:.62}
.clients .client:hover,.clients .client:focus-visible{opacity:1}


@media (prefers-reduced-motion:reduce){.btn,.hx-btn,.head__cta{transition:none!important}}

/* the audit's form card was a cobalt field; here it is one more panel */
.ah__card{background:linear-gradient(180deg,var(--mono-panel-2),var(--mono-panel))!important;
  border:1px solid var(--mono-line)!important;border-radius:22px!important;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)!important}
.ah__card::before,.ah__card::after{background:none!important}

/* phones: the hero used to run down into a cobalt field that the client strip
   finished. On a black ground that ramp turns to fog, so it is taken out and
   the strip sits on the ground like every other section. */
.hero,.clients{background-image:none!important}
.clients__label{color:var(--mono-dim)!important}
@media (max-width:760px){
  .hero__proof,.hero__note,.hero__note *{color:var(--mono-soft)!important;opacity:1!important;-webkit-text-fill-color:currentColor!important}
  .hero__ghost{opacity:.28!important}
}

/* ---- contrast repairs found by scanning every route */
.btn--pill,.byp__go{background:#FFFFFF!important;color:#0A0A0A!important;border:0!important}
.skip{background:#FFFFFF!important;color:#0A0A0A!important}
.row__no{color:var(--mono-dim)!important}
.cs__link{color:var(--mono-fg)!important}

/* ---- the KREATED wordmark is the brand, not part of the look: it keeps its
   own letterforms (the light, wide-set serif capitals) wherever it appears.
   Named apart from the page fonts so the Geist swap can never reach it. */
@font-face{font-family:'Kreated Wordmark';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2')}
.head__mark,.foot__mark,.drawer__mark{font-family:'Kreated Wordmark',Georgia,serif!important}

/* Skyler, 2026-10-11: on phones the hero footnote is not shown. Its space is
   kept so the mark has room behind it; the sentence stays in the HTML. */
@media (max-width:760px){.hero__note{visibility:hidden!important}}

/* Skyler, 2026-10-11: with the footnote gone on phones, the three hero
   actions get the room. One per line, evenly spaced, the two pills the same
   width so they read as a pair. */
@media (max-width:760px){
  .hero__ctas{flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;
    gap:18px!important;margin-top:36px!important}
  .hero__ctas > a:not(.hero__proof){width:min(264px,100%)!important;justify-content:center!important;margin:0!important}
  .hero__ctas .hero__proof{margin:6px 0 0!important}
}