/* OnsiteHub — Brand System v2.1 tokens
 * These are the in-code source of truth for the code components.
 * Names mirror what we'll register as Webflow Variables later, so the
 * components inherit the site's values when present and fall back to these.
 *
 * Fonts (Quicksand, Montserrat, JetBrains Mono) are loaded by the Webflow site
 * itself — we only reference the families here, never @import them. */

:host {
  /* Primary */
  --oh-cadmium: #ffec00; /* signature yellow — accent only, ~10% coverage */
  --oh-sun-soft: #fff7a8; /* tint: backgrounds, hover washes */

  /* Dark surface (replaces black) */
  --oh-adriatic: #0e5b7a;

  /* Neutrals — warm, replace pure black/white */
  --oh-paper: #faf6ec;
  --oh-cream: #f4eddf;
  --oh-stone: #dcd7cc;
  --oh-mist: #d7d4cc;
  --oh-slate: #6b6b72;
  --oh-charcoal: #2a2a2e;
  --oh-ink: #0e0e10; /* text only — never a surface */

  /* Supporting */
  --oh-olive: #6f8f3a;
  --oh-terracotta: #d96b3f;

  /* Type */
  --oh-font-display: "Quicksand", system-ui, sans-serif; /* headings */
  --oh-font-body: "Montserrat", system-ui, sans-serif; /* body */
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace; /* tags/labels */
}

/* ============================================================
   OnsiteHub Design Tokens — v2.1
   Refined with feedback: no black backgrounds, Adriatic for
   dark surfaces, light grey replaces mustard-deep, original
   logo asset, scratchy highlighter texture.
   ============================================================ */

/* ---- COLOR ---- */
:host, :host {
  /* Primary — signature highlighter */
  --oh-yellow:        #FFEC00;
  --oh-yellow-soft:   #FFFEEF;   /* Sunsoft — almost-white warm tint */
  --oh-stone:         #F4F4F4;   /* neutral light grey */

  /* Ink & paper (warm neutrals, for TEXT — not for surfaces) */
  --oh-ink:           #0E0E10;   /* text only */
  --oh-charcoal:      #2A2A2E;
  --oh-slate:         #6B6B72;
  --oh-mist:          #D7D4CC;
  --oh-paper:         #FAF6EC;   /* default page bg */
  --oh-cream:         #F4EDDF;   /* card bg */
  --oh-sand:          #E8D4A8;
  --oh-white:         #FFFFFF;

  /* Adriatic blue — the new DARK surface.
     Replaces black/ink for any tinted background. */
  --oh-adriatic:      #0E5B7A;
  --oh-adriatic-deep: #0A4359;
  --oh-adriatic-soft: #B9D4DE;

  /* Secondary support colours — no archetype mapping, just names */
  --oh-olive:         #6F8F3A;
  --oh-olive-soft:    #C9D6A8;
  --oh-terracotta:    #D96B3F;
  --oh-terracotta-soft:#F4C9B5;

  /* Semantic */
  --oh-success: var(--oh-olive);
  --oh-warning: #E8A33A;
  --oh-error:   #C9402E;
}

/* ---- TYPE ---- */

/* Self-hosted Montserrat — heavy weights uploaded by the brand owner.
   Lighter weights (300–600) still come from the Google Fonts CDN link. */







/* Self-hosted JetBrains Mono — uploaded by the brand owner.
   Regular (400) and Medium (500) still come from the Google Fonts CDN link. */










/* Self-hosted Quicksand — uploaded by the brand owner.
   Bold (700) still comes from the Google Fonts CDN link. */






:host, :host {
  --oh-font-display: 'Quicksand', system-ui, sans-serif;
  --oh-font-body:    'Montserrat', system-ui, sans-serif;
  --oh-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Scale */
  --oh-d1: clamp(56px, 6vw, 96px); /* @kind spacing */
  --oh-d2: clamp(40px, 4.4vw, 64px); /* @kind spacing */
  --oh-d3: clamp(28px, 3vw, 40px); /* @kind spacing */

  --oh-t-xl: 22px;
  --oh-t-l:  18px;
  --oh-t-m:  16px;
  --oh-t-s:  14px;
  --oh-t-xs: 12px;

  /* Tracking */
  --oh-track-tight:  -0.02em;
  --oh-track-wide:   0.08em;
}

/* ---- SHAPE ---- */
:host, :host {
  --oh-r-sm: 4px;
  --oh-r-md: 10px;
  --oh-r-lg: 18px;
  --oh-r-pill: 999px;

  --oh-stroke: 2.25px;
  --oh-shadow-card: 0 1px 0 #00000010, 0 12px 32px -16px #0E0E1024;
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

:host, .oh-root {
  margin: 0;
  background: var(--oh-paper);
  color: var(--oh-ink);
  font-family: var(--oh-font-body);
  font-size: var(--oh-t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--oh-font-display);
  font-weight: 700;
  letter-spacing: var(--oh-track-tight);
  line-height: 1.05;
  margin: 0;
}

.oh-eyebrow {
  font-family: var(--oh-font-mono);
  font-size: var(--oh-t-xs);
  font-weight: 500;
  letter-spacing: var(--oh-track-wide);
  text-transform: uppercase;
  color: var(--oh-slate);
}

.oh-mono { font-family: var(--oh-font-mono); }

/* ---- SIGNATURE: SCRATCHY HIGHLIGHTER MOTIF ---- */
/* The brand's signature mark. Used behind words, behind icons,
   under text, around numbers. Real-marker texture — irregular
   edges, internal streaks, slight overflow. */

/* Behind type — horizontal swipe */
.oh-swipe {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.oh-swipe::before {
  content: "";
  position: absolute;
  inset: 6% -5% 4% -5%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAxOCAzIDYgOCAxMiAxNCAyIDIyIDkgMzAgMCAzOCA4IDQ2IDMgNTQgMTAgNjIgMSA3MCA5IDc4IDQgODYgMTEgOTIgMiA5NyA5IDEwMCA2IDEwMCA4NiA5NiA5NiA5MCA5MCA4NCA5OCA3NiA5MiA2OCAxMDAgNjAgOTMgNTIgOTkgNDQgOTIgMzYgMTAwIDI4IDkzIDIwIDk5IDEyIDkyIDYgOTggMiA5MCAwIDk2WiIgZmlsbD0iI0ZGRUMwMCIvPjwvc3ZnPg==) center/100% 100% no-repeat;
  z-index: -1;
  transform: rotate(-1.5deg);
}

/* Smaller compact swipe (for inline .oh-root type) */
.oh-swipe--sm::before {
  inset: 14% -3% 6% -3%;
  transform: rotate(-1deg);
}

/* Behind an icon — scratchy blob */
.oh-blob {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.oh-blob::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNNTAgM0M3MSAyIDkwIDE1IDkzIDM1IDk3IDU2IDg5IDc2IDcwIDg2IDUyIDk2IDI4IDk1IDE1IDgxIDMgNjkgMiA0NSAxMiAyOCAyMCAxMyAzNCA0IDUwIDNaIiBmaWxsPSIjRkZFQzAwIi8+PC9zdmc+) center/100% 100% no-repeat;
  z-index: -1;
  transform: rotate(-6deg);
}

/* Under a word */
.oh-under {
  position: relative;
  display: inline-block;
}
.oh-under::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; bottom: -8%; height: 18%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAzMCA0IDYwIDEwIDI1IDE4IDcwIDI2IDM1IDM0IDY1IDQyIDMwIDUwIDYwIDU4IDMwIDY2IDcwIDc0IDM1IDgyIDYwIDkwIDMwIDk2IDY1IDEwMCA0MCAxMDAgMTAwIDAgMTAwWiIgZmlsbD0iI0ZGRUMwMCIvPjwvc3ZnPg==) center/100% 100% no-repeat;
  transform: rotate(-1deg);
}

/* Circle annotation (around numbers, key words) */
.oh-circle {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.oh-circle::before {
  content: "";
  position: absolute;
  inset: -22% -14% -22% -14%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSI1MCIgcng9IjQ2IiByeT0iNDIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRUMwMCIgc3Ryb2tlLXdpZHRoPSI2IiB0cmFuc2Zvcm09InJvdGF0ZSgtMyA1MCA1MCkiLz48L3N2Zz4=) center/100% 100% no-repeat;
  z-index: -1;
}

/* ---- LOGO — USE THE ORIGINAL PNG ---- */
/* Never recreate the wordmark in CSS/SVG — always reference the
   master asset. The PNG has black wordmark + yellow scratch baked in. */
.oh-logo {
  height: 44px;
  width: auto;
  display: inline-block;
}
.oh-logo--sm { height: 28px; }
.oh-logo--lg { height: 96px; }
.oh-logo--xl { height: 140px; }

/* On dark surfaces, the logo needs a paper chip behind it */
.oh-logo-chip {
  display: inline-flex;
  background: var(--oh-paper);
  padding: 10px 14px;
  border-radius: 8px;
}
.oh-logo-chip .oh-logo { display: block; }

/* ---- KEYCAP — for Ctrl·Alt·Retreat tagline ---- */
.oh-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18em 0.55em;
  border: 2px solid var(--oh-ink);
  border-radius: 8px;
  background: var(--oh-paper);
  font-family: var(--oh-font-mono);
  font-weight: 600;
  font-size: 0.85em;
  box-shadow: 0 3px 0 var(--oh-ink);
  position: relative;
  top: -2px;
}


  .lp-swipe { position: relative; display: inline-block; z-index: 0; }
  .lp-swipe::before { content:""; position:absolute; inset:2% -6% 0% -6%; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgNjQiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iciIgeD0iLTMlIiB5PSItMjUlIiB3aWR0aD0iMTA2JSIgaGVpZ2h0PSIxNTAlIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDIyIDAuNSIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iOSI+PC9mZVR1cmJ1bGVuY2U+CiAgICAgIDxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgc2NhbGU9IjgiPjwvZmVEaXNwbGFjZW1lbnRNYXA+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CgogIAogIDxnIGZpbHRlcj0idXJsKCNyKSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEuMiAxMjAgMzIpIj4KICAgIDxwYXRoIGQ9Ik0gNiAxNiYjeEE7ICAgICAgICAgICAgIFEgNjAgMTEsIDEyMCAxMyYjeEE7ICAgICAgICAgICAgIFQgMjM0IDE2JiN4QTsgICAgICAgICAgICAgTCAyMzYgNTAmI3hBOyAgICAgICAgICAgICBRIDE4MCA1MywgMTIwIDUxJiN4QTsgICAgICAgICAgICAgVCA0IDQ4JiN4QTsgICAgICAgICAgICAgWiIgZmlsbD0iI0ZGRUMwMCI+PC9wYXRoPgogIDwvZz4KPC9zdmc+) center/100% 100% no-repeat; z-index:-1; transform:rotate(-1.5deg); }
  .lp-under { position: relative; display: inline-block; }
  .lp-under::after { content:""; position:absolute; left:-4%; right:-4%; bottom:-14%; height:26%; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iciIgeD0iLTMlIiB5PSItMzAlIiB3aWR0aD0iMTA2JSIgaGVpZ2h0PSIxNjAlIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDM1IDAuODUiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjkiPjwvZmVUdXJidWxlbmNlPgogICAgICA8ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIzLjUiPjwvZmVEaXNwbGFjZW1lbnRNYXA+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3IpIj4KICAgIDxyZWN0IHg9IjMiIHk9IjUiIHdpZHRoPSIxOTQiIGhlaWdodD0iMTAiIHJ4PSI1IiBmaWxsPSIjRkZFQzAwIj48L3JlY3Q+CiAgPC9nPgo8L3N2Zz4=) center/100% 100% no-repeat; transform:rotate(-1deg); }
  .lp-circle { position: relative; display: inline-block; z-index: 0; }
  .lp-circle::before { content:""; position:absolute; inset:-26% -16%; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjAgMTQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InIiIHg9Ii01JSIgeT0iLTUlIiB3aWR0aD0iMTEwJSIgaGVpZ2h0PSIxMTAlIj4KICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDMgMC42IiBudW1PY3RhdmVzPSIyIiBzZWVkPSIxMSI+PC9mZVR1cmJ1bGVuY2U+CiAgICAgIDxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgc2NhbGU9IjYiPjwvZmVEaXNwbGFjZW1lbnRNYXA+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3IpIiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkVDMDAiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNIDMwIDcwIEMgMjAgMzAsIDkwIDE0LCAxNDAgMjAgQyAxOTAgMjYsIDIxMCA1MCwgMjAwIDgwIEMgMTkwIDExMCwgMTQwIDEzMCwgOTAgMTI0IEMgNDAgMTE4LCAyMCAxMDAsIDMwIDcwIFoiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0gMzIgNzAgQyAyMiAzNiwgOTIgMjIsIDE0MCAyOCBDIDE4NCAzNCwgMjAwIDU2LCAxOTIgNzggQyAxODQgMTAwLCAxMzggMTE4LCA5MiAxMTIgQyA0NiAxMDYsIDMwIDkyLCAzMiA3MCIgb3BhY2l0eT0iMC43Ij48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=) center/100% 100% no-repeat; z-index:-1; }
  @keyframes lpUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
  @keyframes lpBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
  .lp-link { color:inherit; text-decoration:none; }
  .lp-field:focus { outline:none; border-color:var(--oh-yellow) !important; box-shadow:0 0 0 4px var(--oh-yellow-soft) !important; }
  :host { scroll-behavior:smooth; }