/* ==========================================================================
   Manhattan Computer - mobile stylesheet
   ==========================================================================

   Hand-built, mobile-first styles for the pages in mobile/.
   These pages are authored for phones: single column, readable type, real tap
   targets, fluid images. They are deliberately separate from the captured
   desktop pages, whose fixed 980px Wix canvas cannot be reflowed by CSS.

   No framework, no external requests: fonts fall back to the system stack.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --muted: #5c5c5c;
  --line: #e2e2e2;
  --brand: #2aa8cc;
  --dark: #101418;
  --dark-2: #1b2027;
  --radius: 12px;
  --pad: 16px;
  --maxw: 640px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--brand); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
  color: #fff;
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.brand small {
  display: block;
  font-weight: 400;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: #b9c2cc;
}

/* nav toggle: a real button, no JS needed (uses :target) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #3a424c;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  background: transparent;
}

.site-nav {
  border-top: 1px solid #2a3138;
  background: var(--dark-2);
  display: none;
}

.site-nav:target,
.site-nav.open {
  display: block;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--maxw);
  margin: 0 auto;
}

.site-nav li + li { border-top: 1px solid #2a3138; }

.site-nav a {
  display: block;
  padding: 14px var(--pad);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}

.site-nav a:active { background: #232a32; }

/* always show the nav on wider phones/tablets */
@media (min-width: 620px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .site-nav ul {
    display: flex;
    justify-content: center;
    gap: 4px;
  }
  .site-nav li + li { border-top: 0; }
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  /* the poster is always present, so there is imagery behind the wording even
     when the video is hidden (e.g. reduced-motion) or still loading */
  background: var(--dark) url("../hero-video-poster.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 46px var(--pad) 38px;
  isolation: isolate;
}

/* background video, poster fallback */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* dark scrim so the wording stays legible over the video */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 8, 11, 0.35), rgba(6, 8, 11, 0.55));
  z-index: -1;
}

.hero-inner { position: relative; }

/* Wording arrangement copied from the desktop site: CLOUD. above-left,
   MANHATTAN centred, .COMPUTER below-right.

   The two small words are positioned relative to the HEADING, not the screen.
   .hero-wordmark is an inline-block that shrink-wraps the heading and is
   centred; the small words then sit at its edges. The negative side margins
   pull their box outward by a share of the heading's own width, so the offset
   is measured from the centre outward - exactly the behaviour asked for. */
.hero-wordmark {
  display: inline-block;
  /* offsets are a share of the heading's own width, so they scale
     with the heading rather than the screen */
  --edge: clamp(8px, 4vw, 34px);
}

.hero-cloud,
.hero-computer {
  margin: 0;
  font-size: clamp(13px, 3.6vw, 17px);
  letter-spacing: 0.2em;
  color: #dbe3ea;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* starts just inside the heading's left edge */
.hero-cloud {
  text-align: left;
  margin-left: calc(-1 * var(--edge));
}

/* ends just outside the heading's right edge */
.hero-computer {
  text-align: right;
  margin-right: calc(-1 * var(--edge));
}

.hero h1 {
  margin: 4px 0 0;
  /* Sized so the wordmark sits inside the column with room for the small
     words to offset from its ends. At 11vw the heading filled 84% of the
     column and the offsets were pushed into the screen margins. */
  font-size: clamp(26px, 8.5vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.hero .tagline {
  margin: 16px auto 0;
  max-width: 30ch;
  font-size: 15px;
  color: #eef2f6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

/* A reduced-motion preference stops the movement. The hero keeps its poster
   background (set above), so the area is never left blank. */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}


/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--brand);
  color: #04222c;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

.btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
}

/* ------------------------------------------------------------------- tools */
/* Compact tiles: as many per row as the screen fits. At a 390px viewport this
   gives 3 columns, so each tile is roughly a third of the old full-width box. */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
}

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
}

.tool:active { background: #f4f7f9; }

.tool .ico {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef7fb;
  color: #1d7f9c;
  font-size: 15px;
  line-height: 1;
}

.tool .name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

/* --------------------------------------------------------------- content */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
}

.card img { width: 100%; }

.card .body { padding: 16px; }

.card h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.card p {
  margin: 0;
  color: #333;
  font-size: 15px;
}

/* ---------------------------------------------------------------- offices */
.office {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.office h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.office p {
  margin: 0;
  color: #333;
  font-size: 15px;
}

/* ---------------------------------------------------------------- contact */
.contact-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.contact-list li { margin-bottom: 10px; }

.contact-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------- pricing */
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.plan h3 { margin: 0 0 8px; font-size: 17px; }

.plan ul {
  margin: 0;
  padding-left: 20px;
  color: #333;
  font-size: 15px;
}

.plan li { margin-bottom: 6px; }

/* --------------------------------------------------------------- features */
.feature {
  border-left: 3px solid var(--brand);
  padding: 2px 0 2px 14px;
  margin-bottom: 18px;
}

.feature h3 { margin: 0 0 4px; font-size: 16px; }

.feature p { margin: 0; color: #333; font-size: 15px; }

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--dark);
  color: #c6ced7;
  padding: 26px 0 34px;
  margin-top: 30px;
  font-size: 14px;
}

.site-footer a { color: #dbe6ef; }

.site-footer .offices { margin-bottom: 14px; }

.site-footer .legal {
  border-top: 1px solid #2a3138;
  padding-top: 14px;
  font-size: 12px;
  color: #9aa5b1;
}

/* --------------------------------------------------------- accessibility */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Image quality note
   --------------------------------------------------------------------------
   Several of the site's photographs are stored on the Wix CDN at only
   116-200px wide, so they cannot be made genuinely sharper. They are displayed
   at their natural size rather than stretched, and a high-quality scaling hint
   avoids the harsh blocky look of a nearest-neighbour upscale.
   -------------------------------------------------------------------------- */
.card img,
.hero {
  image-rendering: auto;
}

/* Never stretch a small photo beyond a sensible multiple of its real size. */
.card img {
  width: 100%;
  height: auto;
  background: #f2f4f6;
}

/* --------------------------------------------------------------------------
   Feature icon grid
   --------------------------------------------------------------------------
   The site's feature artwork is stored at only 116-200px and is authored to be
   shown at 128x128 as a small icon (the desktop markup uses targetWidth:128
   with object-fit:fill). Showing it full-bleed is what made it look low
   resolution, so it is shown near its intended size here.

   The card is a two-column grid: icon, then a single .fi-text block holding the
   heading and copy. The text MUST be one child - with heading and paragraph as
   separate children the paragraph auto-placed into the next row's first column
   and collapsed to the icon's width.
   -------------------------------------------------------------------------- */
.feature-icons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.feature-icon {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
}

.feature-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #f6f8fa;
  border-radius: 10px;
}

.fi-text { min-width: 0; }

.fi-text h3 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.3;
}

.fi-text p {
  margin: 0;
  font-size: 15px;
  color: #444;
  line-height: 1.5;
}

/* Two cards per row once there is room for two text columns. */
@media (min-width: 620px) {
  .feature-icons { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Desktop header stripe fix  (v5)
   ==========================================================================
   Measured at 1440px:
       stripe comp-jkn5bu41   x=-238..1665  w=1903   (240px past the edge)
       #comp-jkn6q7yr         left:1739px            (hardcoded offset)
       "HOW ARE WE DOING?"    x=1501..1665           (cut off)

   The bar is authored 1903px wide and every child carries a pixel offset for
   that width, so it cannot be reflowed. Shifting it either clips the left item
   or pushes the right one off screen: 1903px of content cannot fit a 1425px
   viewport by translation alone.

   Scaling the bar keeps the designed spacing between the menu and the
   right-hand items, and the scale is derived from the viewport width so it
   adapts to any window size. The bar is centred after scaling.
   ========================================================================== */
#comp-jkn5bu41 {
  --hdr-scale: min(1, calc((100vw - 16px) / 1903));
  width: 1903px !important;
  max-width: none !important;
  left: 0 !important;
  margin-left: calc(100% - 1903px) !important;
  transform: scale(var(--hdr-scale));
  transform-origin: left center;
}

/* the menu keeps a small inset from the left edge */
#i0y0742q {
  margin-left: 32px;
}

/* ==========================================================================
   "Own AI" splash  (v5)
   ========================================================================== */
.ownai-splash {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px auto 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: #00933C;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(0, 147, 60, 0.35);
  text-align: left;
}

.ownai-splash:hover { background: #007a31; }

.ownai-splash .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FCCC0A;
  flex: 0 0 auto;
}

.ownai-splash .txt { display: block; }

.ownai-splash .sub {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: 0.92;
  letter-spacing: 0.02em;
}

/* stacked variant used on the mobile pages */
.ownai-splash.mobile {
  display: flex;
  align-items: center;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   v6 additions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breathing room between the top menu and the contact details
   --------------------------------------------------------------------------
   The menu sits at a fixed grid offset on the captured canvas, so margins on
   the menu do not move it relative to its siblings (tried, no effect). The
   contact items are relatively positioned, so offsetting them does create the
   space.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. "own AI" badge - one large circle, brain + words together
   --------------------------------------------------------------------------
   Measured on the desktop homepage:
       black header stripe   y=0..57
       hero                  y=57..711
       MANHATTAN h1          x=378..1061   y=162..254
   Anchored to the hero so it clears the stripe, and placed just right of the
   heading and slightly above its vertical centre.
   -------------------------------------------------------------------------- */
#comp-jc2ei5zt { position: relative; }

.ownai-badge {
  position: absolute;
  top: 58px;
  right: 96px;
  z-index: 30;
  display: inline-flex;
  text-decoration: none !important;
  color: #fff !important;
}

.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(10, 14, 18, 0.58);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.74);
  transform: translateY(-2px);
}

.ownai-brain { width: 34px; height: 34px; display: block; }

.ownai-badge-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
}

/* mobile: inline in the header bar, as a pill */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 7px;
  width: auto;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
}
.site-header .ownai-brain { width: 22px; height: 22px; }
.site-header .ownai-badge-label { font-size: 11px; }




















[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 461px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 300px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 200px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 120px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 120px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 120px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 461px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 380px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 300px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 240px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 180px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 300px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 240px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 461px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 400px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 360px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 340px !important;
}


[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 320px !important;
}

/* ==========================================================================
   Top menu: position  (v6)
   ==========================================================================
   The captured 1903px stripe cannot hold both the menu (744px of text) and the
   contact block (canvas x~969 to 1903) - together they need ~1939px, so an
   overlap at the authored offset was unavoidable.

   Measured trade-off:
       left   first label   gap to support@
       461        20px          -127px   (authored: overlaps)
       360       -81px           -26px
       340      -101px            -6px   <- chosen
       320      -121px           +14px

   340 closes the overlap (was -127px) while keeping part of the first label on
   screen. Going further left opens a gap but pushes the labels off screen.
   ========================================================================== */
#i0y0742q {
  width: 760px !important;
  max-width: none !important;
}

[data-grid-id=comp-jkn5bu41inlineContent-gridContainer] > [id="i0y0742q"] {
  left: 340px !important;
}


.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  /* more transparent than before, with a lighter ring */
  background: rgba(10, 14, 18, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.45);
  transform: translateY(-2px);
}

/* the brain fills most of the circle */
.ownai-brain {
  width: 62px;
  height: 62px;
  display: block;
}

.ownai-badge-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 26px; height: 26px; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-brain {
  width: 112px;
  height: 112px;
  transform: scale(1.42);
  transform-origin: center;
  margin-bottom: -6px;
}

.ownai-badge-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 2px 0;
}

/* mobile pill keeps the mark in proportion */
.site-header .ownai-badge-ring {
  width: auto;
  height: 46px;
  padding: 0 14px;
  gap: 6px;
}
.site-header .ownai-brain {
  width: 30px;
  height: 30px;
  transform: none;
  margin-bottom: 0;
}

@media (max-width: 1180px) {
  .ownai-badge-ring { width: 94px; height: 94px; }
  .ownai-brain { width: 94px; height: 94px; transform: scale(1.42); }
}


.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(10, 14, 18, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.45);
  transform: translateY(-2px);
}

/* the brain fills most of the circle without touching the label */
.ownai-brain {
  width: 104px;
  height: 104px;
  transform: scale(0.99);
  transform-origin: center;
  flex: 0 0 auto;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain {
  width: 30px;
  height: 30px;
  transform: none;
}
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(10, 14, 18, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.45);
  transform: translateY(-2px);
}

.ownai-brain {
  width: 66px;
  height: 66px;
  transform: none;
  flex: 0 0 auto;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 30px; height: 30px; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 82px;
  height: 82px;
  border-radius: 6px;
  background: rgba(10, 14, 18, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.48);
  transform: translateY(-2px);
}

/* the mark fills most of the tile */
.ownai-brain {
  width: 78px;
  height: 78px;
  transform: none;
  flex: 0 0 auto;
  margin-bottom: -22px;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
}
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 84px;
  height: 84px;
  border-radius: 6px;
  background: rgba(10, 14, 18, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.48);
  transform: translateY(-2px);
}

.ownai-brain {
  width: 56px;
  height: 56px;
  transform: none;
  flex: 0 0 auto;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 30px; height: 30px; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 84px;
  height: 84px;
  border-radius: 6px;
  background: rgba(10, 14, 18, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.48);
  transform: translateY(-2px);
}

.ownai-brain {
  width: 40px;
  height: 40px;
  transform: none;
  flex: 0 0 auto;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 30px; height: 30px; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 86px;
  height: 86px;
  border-radius: 0;
  border: 0;
  background: rgba(10, 14, 18, 0.30);
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.48);
}

/* the mark sits above the tile centre, leaving the bottom for the label */
.ownai-brain {
  width: 40px;
  height: 40px;
  transform: none;
  flex: 0 0 auto;
  margin-bottom: -14px;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 30px; height: 30px; margin-bottom: 0; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 7px 0 9px;
  box-sizing: border-box;
  width: 86px;
  height: 86px;
  border-radius: 0;
  border: 0;
  background: rgba(10, 14, 18, 0.30);
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.48);
}

.ownai-brain {
  width: 46px;
  height: 46px;
  transform: none;
  flex: 0 0 auto;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 30px; height: 30px; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 12px 4px 9px;
  box-sizing: border-box;
  width: 86px;
  height: 86px;
  border-radius: 0;
  border: 0;
  background: rgba(10, 14, 18, 0.30);
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}

.ownai-badge:hover .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.48);
}

.ownai-brain {
  width: 55px;
  height: 55px;
  transform: none;
  flex: 0 0 auto;
}

.ownai-badge-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* mobile: inline pill in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 46px;
  padding: 0 14px;
  background: rgba(10, 14, 18, 0.35);
}
.site-header .ownai-brain { width: 30px; height: 30px; }
.site-header .ownai-badge-label { font-size: 11px; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 3px 0 0;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ownai-brain {
  width: 66px;
  height: 66px;
  transform: none;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.ownai-badge-label {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* mobile: inline in the header bar, no background either */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0;
}
.site-header .ownai-brain { width: 30px; height: 30px; }
.site-header .ownai-badge-label { font-size: 11px; margin-top: 0; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ownai-brain {
  width: 66px;
  height: 66px;
  transform: none;
  flex: 0 0 auto;
  margin-top: -2px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.ownai-badge-label {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* mobile: inline in the header bar, no background */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0;
}
.site-header .ownai-brain { width: 30px; height: 30px; margin-top: 0; }
.site-header .ownai-badge-label { font-size: 11px; margin-top: 0; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ownai-brain {
  width: 66px;
  height: 66px;
  transform: none;
  flex: 0 0 auto;
  margin-top: 28px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.ownai-badge-label {
  flex: 0 0 auto;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* mobile: inline in the header bar, no background */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0;
}
.site-header .ownai-brain { width: 30px; height: 30px; margin-top: 0; }
.site-header .ownai-badge-label { font-size: 11px; margin-top: 0; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 6px 8px 7px;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 3px;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.18s ease;
}

/* the square that appears on hover wraps the icon and the words */
.ownai-badge:hover .ownai-badge-ring,
.ownai-badge:focus-visible .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.42);
}

.ownai-brain {
  width: 76px;
  height: 50px;
  transform: none;
  flex: 0 0 auto;
  margin-top: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.ownai-badge-label {
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* mobile: inline in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 2px 4px;
}
.site-header .ownai-brain { width: 32px; height: 22px; margin-top: 0; }
.site-header .ownai-badge-label { font-size: 11px; margin-top: 0; }



.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 6px 8px 7px;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 3px;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.18s ease;
}

/* the square that appears on hover wraps the icon and the words */
.ownai-badge:hover .ownai-badge-ring,
.ownai-badge:focus-visible .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.42);
}

.ownai-brain {
  width: 76px;
  height: 82px;
  transform: none;
  flex: 0 0 auto;
  margin-top: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.ownai-badge-label {
  flex: 0 0 auto;
  margin-top: 15px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* mobile: inline in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 2px 4px;
}
.site-header .ownai-brain { width: 32px; height: 34px; margin-top: 0; }
.site-header .ownai-badge-label { font-size: 11px; margin-top: 0; }


/* ==========================================================================
   Hero video fills the hero  (v7)
   ==========================================================================
   The captured video element is a fixed 1728px wide. At a 1425px viewport it
   overflowed by 303px; at 1905px it stopped 177px short of the right edge,
   leaving a gap. Stretching the media layers to the hero width removes both.
   ========================================================================== */
#comp-jc2ei5zt [id^="bgMedia_"],
#comp-jc2ei5zt [id^="bgLayers_"],
#comp-jc2ei5zt [id^="videoContainer_"],
#comp-jc2ei5zt video,
#comp-jc2ei5zt w-bg-media,
#comp-jc2ei5zt w-video {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
}

#comp-jc2ei5zt video {
  object-fit: cover !important;
  height: 100% !important;
}

/* ==========================================================================
   "own AI" badge  (v7)
   ==========================================================================
   The white-line mark above the words "own AI", no square behind them - both
   float over the hero video.

   Anchored to the wordmark container (i0qiq28j) rather than the hero, so it
   keeps a constant relationship to MANHATTAN however wide the window is. A
   fixed offset from the hero drifted badly: 190px right of the heading centre
   at a 1440px window, 430px at 1920px.

   The mark's viewBox is tightened to the artwork (2.30 1.50 19.40 21.00), so the
   drawing fills its box and the hover square hugs the icon instead of running
   from the top of the picture down past the label.
   ========================================================================== */
#i0qiq28j { position: relative; }

.ownai-badge {
  position: absolute;
  top: -86px;
  right: 0;
  z-index: 30;
  display: inline-flex;
  text-decoration: none !important;
  color: #fff !important;
}

.ownai-badge-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 6px 8px 7px;
  box-sizing: border-box;
  width: auto;
  height: auto;
  border-radius: 3px;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.18s ease;
}

/* the square that appears on hover wraps the icon and the words */
.ownai-badge:hover .ownai-badge-ring,
.ownai-badge:focus-visible .ownai-badge-ring {
  background: rgba(10, 14, 18, 0.42);
}

.ownai-brain {
  width: 76px;
  height: 82px;
  transform: none;
  flex: 0 0 auto;
  margin-top: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.ownai-badge-label {
  flex: 0 0 auto;
  margin-top: 15px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* mobile: inline in the header bar */
.site-header .ownai-badge {
  position: static;
  margin-left: auto;
  margin-right: 8px;
}
.site-header .ownai-badge-ring {
  flex-direction: row;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 2px 4px;
}
.site-header .ownai-brain { width: 32px; height: 34px; margin-top: 0; }
.site-header .ownai-badge-label { font-size: 11px; margin-top: 0; }

@media (max-width: 1180px) {
  .ownai-badge { top: -74px; right: 0; }
  .ownai-brain { width: 64px; height: 69px; }
  .ownai-badge-label { font-size: 10px; }
}