/* Limitless Marketing Group — nolimitwebs.com
   Hand-written stylesheet. Dark, quiet, and built so the fixed header behaves
   on iOS: opaque, same colour as the page, no backdrop blur, and padded by the
   safe-area inset so it paints all the way up under the status bar. */

:root {
  --void: #05070c;
  --void-2: #090c14;
  --panel: #0e1220;
  --panel-2: #131829;
  --hairline: rgba(255, 255, 255, .08);
  --hairline-2: rgba(255, 255, 255, .14);
  --text: #f3f5fa;
  --muted: #a6adbf;
  --muted-2: #6f778a;
  --accent: #5b7cff;
  --accent-soft: #8fa4ff;
  --accent-glow: rgba(91, 124, 255, .22);
  --star: #f0b429;
  --radius: 22px;
  --radius-sm: 14px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }
body {
  margin: 0; background: var(--void); color: var(--text); font-family: var(--sans);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main, footer { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(46px, 7.2vw, 100px); font-weight: 800; letter-spacing: -.05em; line-height: 1.0; }
h1 em { font-style: normal; color: var(--accent-soft); }
@supports (-webkit-text-stroke: 1px currentColor) { h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--accent-soft); } }
h2 { font-size: clamp(34px, 4.6vw, 62px); }
h3 { font-size: 22px; letter-spacing: -.02em; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 6px; }

.shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 16px; }
.lede { color: var(--muted); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; max-width: 58ch; }
.section { padding: clamp(80px, 10vw, 140px) 0; }
.sectionHead { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sectionHead > p { color: var(--muted); font-size: 17px; line-height: 1.65; }
@media (max-width: 800px) { .sectionHead { grid-template-columns: 1fr; gap: 16px; } }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skipLink { position: fixed; z-index: 300; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; padding: 12px 20px; background: var(--text); color: var(--void); border-radius: 999px; font-size: 13px; font-weight: 700; transform: translateY(-200%); transition: transform .2s var(--ease); }
.skipLink:focus-visible { transform: none; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s;
}
.button b { font-weight: 600; }
.button:hover { transform: translateY(-1px); }
.buttonPrimary { background: var(--text); color: var(--void); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.buttonPrimary:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
.buttonGhost { background: rgba(255, 255, 255, .04); color: var(--text); border-color: var(--hairline-2); }
.buttonGhost:hover { background: rgba(255, 255, 255, .08); }

/* Header ------------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--void);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.nav[data-scrolled="true"] { border-bottom-color: var(--hairline); }
.navInner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
main { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

.brand { display: flex; align-items: center; }
.logoVisual { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.logoWord { font-size: 19px; font-weight: 800; letter-spacing: .08em; color: var(--text); display: inline-flex; align-items: center; }
.logoWord b { color: var(--accent-soft); font-weight: 800; display: inline-flex; align-items: center; }
.logoE { display: inline-block; width: .62em; height: .72em; margin: 0 .04em; background: linear-gradient(var(--accent-soft) 0 22%, transparent 22% 39%, var(--accent-soft) 39% 61%, transparent 61% 78%, var(--accent-soft) 78% 100%); }
.logoSub { font-size: 7.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

.navLinks { display: flex; align-items: center; gap: 34px; font-size: 14.5px; font-weight: 500; }
.navLinks > a:not(.navCta) { color: var(--muted); transition: color .2s; }
.navLinks > a:not(.navCta):hover { color: var(--text); }
.navCta { border-radius: 999px; padding: 11px 20px; background: var(--text); color: var(--void); font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .2s var(--ease); }
.navCta:hover { transform: translateY(-1px); }
.navToggle { display: none; }
.navMenu { display: none; }
@media (max-width: 720px) {
  .shell { width: calc(100% - 32px); }
  .navInner { height: 66px; }
  .navLinks { display: none; }
  .navToggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; padding: 0; cursor: pointer; }
  .navToggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
  .nav[data-open="true"] .navToggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav[data-open="true"] .navToggle span:nth-child(2) { opacity: 0; }
  .nav[data-open="true"] .navToggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navMenu { position: absolute; top: 100%; left: 0; right: 0; background: var(--void); border-bottom: 1px solid var(--hairline); padding: 6px 16px 18px; flex-direction: column; }
  .nav[data-open="true"] .navMenu { display: flex; }
  .navMenu > a { color: var(--text); font-size: 15px; font-weight: 500; padding: 15px 4px; border-bottom: 1px solid var(--hairline); }
  .navMenu > .navMenuCta { margin-top: 16px; background: var(--text); color: var(--void); border-radius: 999px; text-align: center; padding: 13px 18px; font-weight: 600; border-bottom: 0; }
  main { padding-top: calc(66px + env(safe-area-inset-top, 0px)); }
}

/* Hero -------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(96px, 12vw, 170px) 0 clamp(72px, 9vw, 120px); isolation: isolate; overflow: hidden; }
.heroAura { position: absolute; z-index: -1; width: 900px; height: 900px; top: -420px; right: -320px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-glow), transparent 70%); pointer-events: none; }
.heroKicker { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 28px; }
.heroKicker::before { content: ""; width: 44px; height: 1px; background: var(--accent-soft); }
.hero p.lede { margin-top: 28px; font-size: clamp(18px, 1.6vw, 22px); max-width: 52ch; }
.heroActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.heroTrust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 44px; font-size: 14px; color: var(--muted); }
.heroTrust li { display: flex; align-items: center; gap: 10px; }
.heroTrust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 12px var(--accent-soft); }
@media (max-width: 720px) {
  .hero { padding: 80px 0 72px; }
  .heroActions { flex-direction: column; }
  .heroActions .button { width: 100%; justify-content: space-between; }
  .heroTrust { gap: 10px 22px; font-size: 13px; }
}

/* Reviews ----------------------------------------------------------------- */
.testimonials { padding: clamp(72px, 9vw, 120px) 0 0; border-top: 1px solid var(--hairline); background: var(--void-2); }
.quoteRail { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82vw); gap: 18px; overflow-x: auto; padding: 8px 0 clamp(72px, 9vw, 120px); scroll-snap-type: x mandatory; scrollbar-width: none; }
.quoteRail::-webkit-scrollbar { display: none; }
.quoteRail figure { margin: 0; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 22px; }
.stars { color: var(--star); letter-spacing: 3px; font-size: 14px; }
.quoteRail blockquote { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text); }
.quoteRail figcaption { margin-top: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.quoteRail figcaption b { display: block; color: var(--text); font-weight: 700; margin-bottom: 4px; letter-spacing: .14em; }

/* Selected work ----------------------------------------------------------- */
.libGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.libCard { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.libCard:hover { transform: translateY(-3px); border-color: var(--hairline-2); }
.libLink { display: block; }
.libMedia { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-2); }
.libMedia img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.libCard:hover .libMedia img { transform: scale(1.03); }
.libOpen { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(5, 7, 12, .78); color: var(--text); font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--ease); }
.libCard:hover .libOpen, .libCard:focus-within .libOpen { opacity: 1; transform: none; }
.libBody { display: block; padding: 26px 28px 30px; }
.libChip { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); border: 1px solid rgba(143, 164, 255, .35); border-radius: 999px; padding: 5px 10px; margin-bottom: 16px; }
.libBody h3 { font-size: 24px; margin-bottom: 4px; }
.libSector { display: block; color: var(--muted-2); font-size: 14px; margin-bottom: 14px; }
.libSummary { display: block; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.libTags { display: block; margin-top: 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted-2); }
@media (max-width: 860px) { .libGrid { grid-template-columns: 1fr; gap: 18px; } .libOpen { opacity: 1; transform: none; } .libBody { padding: 22px 22px 26px; } }

/* Why it matters ---------------------------------------------------------- */
.why { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--void-2); }
.whyGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.whyCard { padding: 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--hairline); }
.whyNum { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--accent-soft); margin-bottom: 22px; }
.whyCard h3 { margin-bottom: 10px; }
.whyCard p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 860px) { .whyGrid { grid-template-columns: 1fr; } }

/* Process ----------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { position: relative; padding: 30px 30px 32px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--hairline); }
.stepNum { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--accent-soft); margin-bottom: 22px; display: block; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15.5px; }
.priceNote { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 26px 30px; border-radius: var(--radius); border: 1px solid rgba(143, 164, 255, .3); background: linear-gradient(90deg, rgba(91, 124, 255, .12), transparent 60%); }
.priceNote > div { font-weight: 700; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.priceNote > p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .priceNote { grid-template-columns: 1fr; gap: 10px; padding: 24px; } }

/* Founders ---------------------------------------------------------------- */
.founder { padding-top: 0; }
.founderPanel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--panel); border: 1px solid var(--hairline); }
.founderNames { display: grid; gap: 14px; }
.founderName { display: flex; align-items: center; gap: 16px; }
.founderMark { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .04em; background: linear-gradient(135deg, var(--accent), #2a3d99); color: #fff; }
.founderName b { display: block; font-size: 18px; letter-spacing: -.01em; }
.founderName span { display: block; color: var(--muted-2); font-size: 13.5px; }
.founderPanel > p { color: var(--muted); font-size: 16.5px; line-height: 1.65; }
@media (max-width: 800px) { .founderPanel { grid-template-columns: 1fr; gap: 24px; } }

/* Contact ----------------------------------------------------------------- */
.contact { position: relative; isolation: isolate; border-top: 1px solid var(--hairline); background: var(--void-2); overflow: hidden; }
.contactAura { position: absolute; z-index: -1; width: 800px; height: 800px; left: -360px; bottom: -420px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-glow), transparent 70%); pointer-events: none; }
.contactGrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contactCopy .lede { margin-top: 20px; }
.contactWays { display: grid; gap: 12px; margin-top: 28px; }
.contactWays a { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; }
.contactWays a span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); min-width: 46px; }
.contactWays a:hover { color: var(--accent-soft); }
.formPanel { border-radius: var(--radius); background: var(--panel); border: 1px solid var(--hairline); padding: clamp(22px, 3vw, 34px); }
.formRow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field textarea { font: inherit; color: var(--text); background: var(--void); border: 1px solid var(--hairline-2); border-radius: var(--radius-sm); padding: 13px 14px; width: 100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.field [aria-invalid="true"] { border-color: #ff7a7a; }
.fieldError { font-size: 13px; color: #ff9a9a; }
.formError { margin-top: 14px; font-size: 14px; color: #ff9a9a; }
.formError a { text-decoration: underline; }
.honeypot { position: absolute; left: -9999px; }
.formNote { font-size: 13.5px; color: var(--muted-2); margin: 4px 0 16px; }
.formSubmit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; border: 0; background: var(--text); color: var(--void); font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s var(--ease); }
.formSubmit:hover { transform: translateY(-1px); }
.formSubmit:disabled { opacity: .7; cursor: default; transform: none; }
.formDone { text-align: center; padding: 40px 28px; }
.formDone b { display: block; font-size: 22px; margin-bottom: 8px; letter-spacing: -.02em; }
.formDone p { color: var(--muted); }
.formDone a { color: var(--accent-soft); }
@media (max-width: 860px) { .contactGrid { grid-template-columns: 1fr; } .formRow { grid-template-columns: 1fr; gap: 0; } }

/* Footer ------------------------------------------------------------------ */
.footer { border-top: 1px solid var(--hairline); padding: 44px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.footerGrid { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
.footerGrid > div > p { color: var(--muted-2); font-size: 14.5px; margin-top: 12px; }
.footerContact { display: grid; gap: 8px; text-align: right; font-size: 15px; }
.footerContact a:hover { color: var(--accent-soft); }
.footerLegal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 720px) { .footerGrid { grid-template-columns: 1fr; } .footerContact { text-align: left; } .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }

/* Mobile bar -------------------------------------------------------------- */
.mobileBar { display: none; }
@media (max-width: 720px) {
  .mobileBar { display: grid; grid-template-columns: auto 1fr; gap: 8px; position: fixed; z-index: 150; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transition: opacity .3s, transform .3s var(--ease); }
  .mobileBar[data-visible="false"] { opacity: 0; pointer-events: none; transform: translateY(140%); }
  .mobileBar a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
  .mobileBarCall { background: var(--panel-2); color: var(--text); border: 1px solid var(--hairline-2); }
  .mobileBarCta { background: var(--text); color: var(--void); }
}

/* Reveal ------------------------------------------------------------------ */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .button, .libCard { transition: none; } }