/* ==========================================================================
   AI SPECIALIST SOLUTIONS — aispecialistsolutions.com
   ----------------------------------------------------------------------------
   FOUNDATION and STRUCTURE are lifted from alexpeykoff.com: 1160px container,
   84px sticky header, split hero (copy panel one side, full-bleed media the
   other), a proof ledger under the fold, offers separated by hairlines rather
   than boxed as cards, alternating light and dark bands at a 130px rhythm,
   reveal-on-scroll, and a single accent that only ever arrives on hover.

   DESIGN LANGUAGE is the AI Specialist Solutions proposal deck: Jost over
   JetBrains Mono, the blue ramp sampled from their logo, soft 8-10px radii,
   tinted note panels, mono eyebrows at .2em tracking.

   Two deliberate departures from Peykoff:
     - Corners are ROUNDED here. Peykoff's border-radius:0 is his design
       decision; the deck's is 8px, and the deck is the brief.
     - Peykoff's film grain is replaced by a faint dot lattice on dark bands.
       Grain reads as photographic and this brand has no photography.

   TWO HARD RULES, carried over from the Peykoff build because they cost real
   money there:
     1. Any display heading MUST set its own line-height. body has a fixed
        leading and a large heading that inherits it will overlap when it wraps.
     2. .reveal ends at `transform: none`. Never position or centre a revealed
        element with a transform. Use margin or grid.
   ========================================================================== */

:root {
  /* ONE blue, the way morascale.com works with a single #1F4BFF. The cyan
     end of the logo ramp is gone: it read as a second brand colour and pulled
     the whole page pale. --cyan and --glow are kept as aliases so every rule
     that referenced them resolves to the brand blue instead of being rewritten
     one at a time. Do not reintroduce a light blue. */
  --accent:      #0288FD;
  --accent-deep: #0B4FC4;   /* small text on light. #0288FD is 3.5:1, too low */
  --accent-lift: #3D9BFE;   /* large display type on dark, where the flat blue
                               needs a touch more presence. Never for body. */
  --accent-soft: #8FC6FE;
  --accent-tint: #EAF3FE;
  --cyan:        var(--accent);
  --glow:        var(--accent-lift);

  --ink:    #0A1A2F;        /* navy from the wordmark */
  --body:   #4A5768;
  --faint:  #8592A3;

  --black:     #0A1526;     /* dark band ground */
  --row-dark:  #060D18;     /* deepest, for the footer and letter band */
  --card-dark: #101F38;
  --paper:     #F6F8FB;
  --paper-2:   #EBF0F7;
  --white:     #FFFFFF;

  --line:      #DCE4EE;
  --line-soft: #EAEFF6;
  --line-dark: rgba(255,255,255,.13);

  --font-display: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1160px;      /* the content column. Scaled up on large screens at
                          the bottom of this file, so anything expressing the
                          container width MUST read this and never 1160px. */
  --header-h: 76px;
  --radius: 20px;      /* morascale sits at 24px on cards; 20 suits this denser page */
  --radius-sm: 14px;
  --pill: 9999px;      /* every button and chip. Their most recognisable device */

  --ease-out: cubic-bezier(.2,.7,.2,1);      /* morascale's primary easing */
  --ease-rise: cubic-bezier(.16,.84,.18,1);  /* their entrance curve */
  --shadow-light: 0 22px 44px -22px rgba(16,31,56,.26);
  --shadow-dark:  0 28px 60px -28px rgba(2,10,24,.75);
  --shadow-lift:  0 18px 38px -18px rgba(2,54,120,.34);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--body);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--accent); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: min(860px, var(--maxw)); margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------------------------------
   Shared type devices, straight off the deck
   -------------------------------------------------------------------------- */
.kicker {
  line-height: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  flex: none;
}
.on-dark .kicker, .hero .kicker { color: var(--glow); }
.on-dark .kicker::before, .hero .kicker::before { background: var(--glow); }

h2.h-sec {
  font-size: clamp(31px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.08;              /* rule 1 */
  letter-spacing: -.032em;
  margin: 20px 0 22px;
}
h2.h-sec em { font-style: italic; color: var(--accent-deep); }
.on-dark h2.h-sec, .hero h2.h-sec { color: #fff; }
.on-dark h2.h-sec em, .hero h2.h-sec em { color: var(--glow); }

.lead {
  font-size: clamp(17px, 1.6vw, 19.5px);
  line-height: 1.6;
  color: var(--body);
  max-width: 64ch;
}
.on-dark .lead { color: #A7B4C6; }

.sec-head { max-width: 66ch; margin-bottom: 52px; }

.note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  background: var(--accent-tint);
  border: 1px solid #CFE3FC;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  max-width: 84ch;
}
.note b { color: var(--accent-deep); }
.on-dark .note {
  background: rgba(2,136,253,.10);
  border-color: rgba(92,211,253,.28);
  border-left-color: var(--glow);
  color: #C6D2E1;
}
.on-dark .note b { color: var(--glow); }

/* --------------------------------------------------------------------------
   Buttons. Peykoff's rule: solid dark fill, uppercase mono, accent on hover.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 16px 16px 26px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
.btn .ar { transition: transform .25s var(--ease-out); }
.btn:hover .ar { transform: translateX(4px); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--accent) 62%);
  color: #04203E;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }
.on-dark .btn-ghost, .hero .btn-ghost { border-color: rgba(255,255,255,.22); color: #D7DFEA; }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: var(--glow); color: var(--glow); background: rgba(92,211,253,.08); }

/* --------------------------------------------------------------------------
   Dark bands. A faint lattice instead of Peykoff's film grain: this brand has
   no photography, and grain on flat colour reads as a rendering fault.
   -------------------------------------------------------------------------- */
.on-dark { background: var(--black); color: #C6D2E1; position: relative; overflow: hidden; }
.on-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.on-dark > * { position: relative; z-index: 1; }
.glow-tr::after, .glow-bl::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.glow-tr::after {
  top: -34%; right: -14%; width: 820px; height: 820px;
  background: radial-gradient(circle, rgba(2,136,253,.24) 0%, rgba(1,204,252,.08) 42%, rgba(10,21,38,0) 70%);
}
.glow-bl::after {
  bottom: -38%; left: -12%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(17,92,252,.18) 0%, rgba(10,21,38,0) 68%);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 900;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(10,21,38,.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.site-head .container { display: flex; align-items: center; gap: 30px; width: 100%; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
/* the supplied logo is a STACKED lockup: at 38px in a 76px bar its wordmark
   is unreadable. The nav carries the mark alone with the name set in Jost
   beside it, which is the lockup's own proportion, not a redesign of it. */
.brand img { height: 34px; width: auto; }
.brand .bn {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
  color: #fff; white-space: nowrap;
}
.brand .bn i { font-style: normal; color: var(--glow); }
.brand .bt {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #7B8AA0; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.16);
}
.main-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.main-nav ul { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; flex: none; }
.main-nav a {
  display: block; padding: 10px 15px; white-space: nowrap;
  font-size: 14.5px; font-weight: 400; color: #C6D2E1;
  border-radius: 6px;
  transition: color .22s var(--ease-out), background .22s var(--ease-out);
}
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.main-nav a.is-active { color: var(--glow); }
.head-cta { flex: none; }
.head-cta .btn { padding: 13px 20px; font-size: 11.5px; }
.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero. Peykoff's split, but the right panel is a working assistant rather
   than video: the product IS the proof, so it goes above the fold.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,1fr);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  background: var(--black);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  top: -30%; right: -6%; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(2,136,253,.26) 0%, rgba(1,204,252,.09) 40%, rgba(10,21,38,0) 70%);
}
.hero-copy {
  position: relative; z-index: 2; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 64px 96px max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
}
.hero-copy h1 {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 600;
  line-height: 1.02;              /* rule 1 */
  letter-spacing: -.042em;
  color: #fff;
  margin: 26px 0 0;
  max-width: 15ch;
}
.hero-copy h1 em { font-style: italic; color: var(--glow); }
.hero-copy .lead { margin-top: 26px; max-width: 50ch; color: #A7B4C6; font-size: clamp(17px,1.6vw,19px); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hero-sub {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  color: #7B8AA0; max-width: 52ch; line-height: 1.7;
}
.hero-sub b { color: #C6D2E1; font-weight: 500; }

.hero-stage {
  position: relative; z-index: 2; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 48px 72px 8px;
}

/* --------------------------------------------------------------------------
   Ledger. Peykoff's proof band: columns proportioned to their figures, never
   four equal ones, because an even split forces the long label onto two lines.
   -------------------------------------------------------------------------- */
.ledger-sec { background: var(--white); border-bottom: 1px solid var(--line); }
.ledger {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.15fr 1.25fr;
  padding: 52px 0;
}
.ledger div { padding: 4px 32px; border-left: 1px solid var(--line); }
.ledger div:first-child { border-left: none; padding-left: 0; }
.ledger div:last-child { padding-right: 0; }
.ledger .n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600; line-height: 1.05;   /* rule 1 */
  letter-spacing: -.028em;
  color: var(--accent);
}
.ledger .l {
  display: block; margin-top: 10px;
  font-size: 14px; line-height: 1.45; color: var(--body); max-width: 27ch;
}

/* --------------------------------------------------------------------------
   Generic band rhythm
   -------------------------------------------------------------------------- */
.band { padding: 130px 0; }
.band-light { background: var(--paper); }
.band-white { background: var(--white); }
.band-tint  { background: var(--paper-2); }
.band-dark  { padding: 140px 0; }

/* --------------------------------------------------------------------------
   Offers. Peykoff separates these with hairlines, not cards.
   -------------------------------------------------------------------------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.offer { position: relative; padding: 8px 30px; min-width: 0; }
.offer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(2,136,253,.34), rgba(2,136,253,.05));
}
.offer:first-child { padding-left: 0; }
.offer:first-child::before { display: none; }
.offer:last-child { padding-right: 0; }
.offer .oi {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 16px;
}
.offer h3 {
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 600; line-height: 1.1;   /* rule 1 */
  letter-spacing: -.018em;
  color: var(--ink); margin-bottom: 15px;
}
.offer p { font-size: 15.5px; line-height: 1.62; }
.offer ul { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.offer li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; line-height: 1.45; color: var(--body);
}
.offer li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; background: var(--accent);
  border-radius: 1px; transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Feature grid (capabilities)
   -------------------------------------------------------------------------- */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat .f {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out), transform .3s var(--ease-out);
}
.feat .f:hover { border-color: rgba(92,211,253,.4); background: rgba(2,136,253,.08); transform: translateY(-3px); }
.feat .f .fi {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--glow); display: block;
}
.feat .f h4 {
  font-size: 20.5px; font-weight: 600; line-height: 1.18;  /* rule 1 */
  color: #fff; margin: 14px 0 10px;
}
.feat .f p { font-size: 14.5px; line-height: 1.6; color: #9AA8BA; }

/* --------------------------------------------------------------------------
   Demo rack: sector assistants the visitor can actually run
   -------------------------------------------------------------------------- */
.rack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.demo-card {
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  cursor: pointer;
  font: inherit;
  transition: border-color .28s var(--ease-out), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.demo-card:hover, .demo-card.is-active {
  border-top-color: var(--accent);
  border-color: var(--accent-soft);
  transform: translateY(-4px);
  box-shadow: var(--shadow-light);
}
.demo-card.is-active { background: var(--accent-tint); }
.demo-card .dk {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 13px;
}
.demo-card h4 { font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--ink); margin-bottom: 9px; }
.demo-card p { font-size: 14px; line-height: 1.5; color: var(--body); }
.demo-card .run {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; color: var(--accent); display: flex; align-items: center; gap: 7px;
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.step { padding: 32px 24px; border-left: 1px solid var(--line); }
.step:first-child { border-left: none; }
.step .sn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--accent-deep); display: block; margin-bottom: 14px; }
.step h4 { font-size: 19px; font-weight: 600; line-height: 1.18; color: var(--ink); margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.52; }
.step.term { background: var(--accent-tint); }

/* --------------------------------------------------------------------------
   Quote band
   -------------------------------------------------------------------------- */
.quote-band { padding: 150px 0 140px; text-align: center; }
.quote-band blockquote p {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.9vw, 50px);
  font-weight: 500; font-style: italic;
  line-height: 1.16;               /* rule 1 */
  letter-spacing: -.022em;
  color: #fff;
  max-width: 20ch; margin: 0 auto 30px;
  text-wrap: balance;
}
.quote-band .qa {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--glow);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-list { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.contact-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: #A7B4C6; }
.contact-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); }
.contact-side {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 34px 32px;
}
.contact-side h4 { font-size: 21px; font-weight: 600; line-height: 1.2; color: #fff; margin-bottom: 12px; }
.contact-side p { font-size: 15px; line-height: 1.6; color: #9AA8BA; }
.contact-side .cta-row { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.contact-side .direct {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: 12.5px; color: #7B8AA0; line-height: 1.9;
}
.contact-side .direct a { color: #D7DFEA; }
.contact-side .direct a:hover { color: var(--glow); }

/* --------------------------------------------------------------------------
   Footer, carrying the Morascale mark
   -------------------------------------------------------------------------- */
.site-foot { background: var(--row-dark); padding: 72px 0 34px; color: #79829A; font-size: 14px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,.09); }
.foot-brand img { height: 74px; width: auto; margin-bottom: 22px; }
.foot-brand p { max-width: 36ch; line-height: 1.65; color: #79829A; }
.foot-col h5 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #C6D2E1; margin-bottom: 18px; font-weight: 500;
}
.foot-col ul { display: flex; flex-direction: column; gap: 11px; }
.foot-col a:hover { color: var(--glow); }
.foot-bot {
  padding-top: 26px; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em;
}
.powered { display: flex; align-items: center; gap: 11px; color: #78849A; }
.powered img { height: 27px; width: auto; opacity: .9; transition: opacity .25s var(--ease-out); }
.powered:hover img { opacity: 1; }

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-rise), transform .9s var(--ease-rise); }
.reveal.in-view { opacity: 1; transform: none; }   /* rule 2 */
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Between 900 and 1160 the header row (brand + strap + five links + CTA) is
   wider than the container and flex items will not shrink below min-content,
   so the CTA was pushing the whole document to 1144px. Shed the strap first,
   then tighten the link padding. */
@media (max-width: 1240px) {
  .main-nav a { padding: 9px 11px; font-size: 13.5px; }
  .site-head .container { gap: 18px; }
  .head-cta .btn { padding: 12px 17px; font-size: 11px; }
}
@media (max-width: 1024px) {
  .main-nav, .head-cta { display: none; }
  /* with the nav and the CTA gone, nothing in the row grows, so brand and
     button both sat hard left with 200px of empty pill to their right.
     morascale's pill uses space-between; the same result here without
     disturbing the three-item desktop row. */
  .nav-toggle { display: flex; margin-left: auto; }
}
@media (max-width: 1080px) {
  .feat, .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer { padding: 26px 0; border-top: 1px solid rgba(2,136,253,.22); }
  .offer::before { display: none; }
  .offer:first-child { border-top: 1px solid rgba(2,136,253,.22); }
  .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { border-top: 1px solid var(--line); }
  .ledger { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .ledger div:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding: 84px 20px 20px; }
  .hero-stage { padding: 20px 20px 80px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 640px) {
  .band, .band-dark { padding: 84px 0; }
  .quote-band { padding: 96px 0 90px; }
  .feat, .offers, .rack, .steps { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: 1fr; }
  .ledger div { border-left: none; padding-left: 0; }
  .head-cta .btn { padding: 11px 15px; font-size: 10.5px; }
  .brand .bt { display: none; }
}

/* --------------------------------------------------------------------------
   Deployments. Two real businesses, each with its own script loaded into the
   hero panel on click, and a link out to the site it runs on.

   The status pill is driven by data-status on .client-card so flipping one
   from "Rolling out" to "Live" is a single word in the markup, not a design
   change. Do not write "live" into a card before it is.
   -------------------------------------------------------------------------- */
.clients { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.client-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 34px 32px 30px;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.client-card:hover { border-color: rgba(92,211,253,.36); background: rgba(2,136,253,.07); }
.client-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.client-card .cs {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--glow);
  border: 1px solid rgba(92,211,253,.4); border-radius: 40px;
  padding: 7px 13px; white-space: nowrap; flex: none;
}
.client-card[data-status="live"] .cs { color: #6EE7A6; border-color: rgba(110,231,166,.44); }
.client-card .cn {
  font-family: var(--font-display); font-size: clamp(23px, 2.2vw, 29px);
  font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: #fff;   /* rule 1 */
}
.client-card .cm {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: #7B8AA0; margin-top: 9px; display: block;
}
.client-card > p { font-size: 15px; line-height: 1.6; color: #9AA8BA; }
.client-card ul { margin: 20px 0 6px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.client-card li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; line-height: 1.45; color: #A7B4C6;
}
.client-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--glow);
  border-radius: 1px; transform: rotate(45deg);
}
.client-acts { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }
.client-acts .btn { padding: 14px 20px; font-size: 11px; }

/* --------------------------------------------------------------------------
   Questions. Hairline rows rather than accordions: a prospect scanning for the
   one objection that matters should not have to open six panels to find it.
   -------------------------------------------------------------------------- */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.qa-item { padding: 28px 0; border-top: 1px solid var(--line); }
.qa-item h4 {
  font-size: 19.5px; font-weight: 600; line-height: 1.22;   /* rule 1 */
  color: var(--ink); margin-bottom: 11px;
}
.qa-item p { font-size: 15px; line-height: 1.62; }

/* --------------------------------------------------------------------------
   Mobile navigation. The desktop nav hands over at 1024, so without this the
   only route through the page is scrolling.

   NOTE: no `display` here. It is set to none up top and to flex inside the
   1024 media query, and this block sits AFTER that query in the file, so a
   `display:none` here silently wins at every width and the menu button never
   appears. That is exactly what happened.
   -------------------------------------------------------------------------- */
.nav-toggle {
  flex: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: #D7DFEA;
  position: relative; transition: background .2s var(--ease-out);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: #D7DFEA;
  transition: transform .26s var(--ease-out), top .26s var(--ease-out);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Taken from morascale.com's #morascale-sheet: a fixed inset:0 panel that
   covers the viewport, faded in with opacity + visibility rather than
   display, so it can transition and so it cannot be tabbed into when shut.
   It sits BELOW the pill (880 against the header's 900) on purpose, which is
   what keeps the close button reachable while it is open.

   dvh, not vh: on iOS Safari 100vh is the tallest the viewport ever gets, so
   with the address bar showing, the last item would be pushed under it. */
.mobile-nav {
  position: fixed; inset: 0;
  height: 100vh; height: 100dvh;
  z-index: 880;
  background: rgba(9, 19, 35, .975);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 20px) 26px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transition: opacity .32s var(--ease-out), visibility .32s var(--ease-out);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  display: block; text-align: center;
  padding: 13px 4px;
  font-family: var(--font-display);
  font-size: clamp(26px, 7.4vw, 34px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.1; color: #EAF0F8;
  border-bottom: none;
  transition: color .2s var(--ease-out);
}
.mobile-nav a:hover, .mobile-nav a:active { color: var(--glow); }
.mobile-nav .btn {
  align-self: center; width: auto; margin-top: 26px;
  font-size: 12px; padding: 15px 15px 15px 26px;
}
.mobile-nav .btn:hover, .mobile-nav .btn:active { color: #fff; }
/* short handsets: keep six links, a button and the pill inside 100dvh */
@media (max-height: 680px) {
  .mobile-nav a { font-size: 22px; padding: 9px 4px; }
  .mobile-nav .btn { margin-top: 18px; }
}
/* never lets it intercept a click once the desktop nav is back */
@media (min-width: 1025px) { .mobile-nav { display: none; } }

/* the scroll lock the sheet sets, see js/main.js. position:fixed rather than
   overflow:hidden because iOS Safari ignores overflow:hidden on the body and
   scrolls the page behind the panel anyway. */
body.nav-locked {
  position: fixed; width: 100%;
  overflow: hidden;
}

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 1200;
  background: var(--accent); color: #fff; padding: 14px 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

@media (max-width: 1080px) { .qa-grid { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 900px) {
  .clients { grid-template-columns: minmax(0, 1fr); }
}

/* client card screenshot, in a suggestion of browser chrome so the domain is
   visible and the thing reads as a real site rather than a graphic */
.client-shot {
  display: block;
  margin: -34px -32px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: #0B1524;
  border-bottom: 1px solid var(--line-dark);
}
.client-shot .chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 15px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.client-shot .chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }
.client-shot .chrome .url {
  margin-left: 10px; flex: 1;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  color: #8592A3;
  background: rgba(255,255,255,.05);
  border-radius: 40px; padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.client-shot img {
  width: 100%; height: auto; display: block;
  transition: transform .6s var(--ease-out), filter .4s var(--ease-out);
  filter: saturate(.92) brightness(.94);
}
.client-card:hover .client-shot img { transform: scale(1.028); filter: none; }
@media (prefers-reduced-motion: reduce) { .client-shot img { transition: none; } }

/* --------------------------------------------------------------------------
   Booking. Same shape as the Morascale contact page: title left, the promise
   and the three beats right, then the Calendly widget full width underneath.
   -------------------------------------------------------------------------- */
.book-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-bottom: 46px; }
.book-list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.book-list li {
  position: relative; padding-left: 44px;
  font-size: 15.5px; line-height: 1.5; color: #A7B4C6;
}
.book-list .num {
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--glow);
  border: 1px solid rgba(92,211,253,.34); border-radius: 6px;
  padding: 3px 7px;
}
.book-embed {
  background: var(--white);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
}
.book-embed .calendly-inline-widget { min-width: 320px; height: 700px; }
.book-fallback {
  margin-top: 22px; text-align: center;
  font-family: var(--font-mono); font-size: 12.5px; color: #7B8AA0; line-height: 1.9;
}
.book-fallback a { color: #D7DFEA; border-bottom: 1px solid rgba(255,255,255,.24); }
.book-fallback a:hover { color: var(--glow); border-bottom-color: var(--glow); }

/* who picks up, right where the booking happens. They do not need a section of
   their own: at the moment somebody chooses a slot, the useful thing is knowing
   whose face is going to be on the call. */
.book-people {
  margin-top: 34px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex; justify-content: center; gap: 56px; flex-wrap: wrap;
}
.bp { display: flex; align-items: center; gap: 15px; }
.bp img {
  width: 60px; height: 60px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 8px 20px -10px rgba(2,10,24,.9);
}
.bp .bpn { display: block; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.bp .bpr {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--glow);
}
.bp a {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 12px; color: #8592A3;
  border-bottom: 1px solid transparent;
}
.bp a:hover { color: #D7DFEA; border-bottom-color: rgba(255,255,255,.3); }
@media (max-width: 560px) { .book-people { gap: 26px; flex-direction: column; align-items: flex-start; } }

@media (max-width: 900px) {
  .book-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Calendly stacks its header above the calendar on a narrow viewport, so the
     month grid needs roughly 400px more than it does on desktop. 900px cut the
     last two rows of dates off. This is only the value the box opens at:
     js/main.js resizes it to whatever height the widget reports for the step
     it is actually showing. */
  .book-embed .calendly-inline-widget { height: 1180px; }
}
@media (max-width: 400px) {
  .book-embed .calendly-inline-widget { height: 1240px; }
}
/* the embed's degraded state, see the Calendly block in js/main.js */
.book-embed.is-fallback { min-height: 0; background: rgba(255,255,255,.045); border-color: var(--line-dark); }
.book-offline { padding: 64px 40px; text-align: center; }
.book-offline .bo-h { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: #fff; line-height: 1.25; }
.book-offline .bo-p { font-size: 15px; line-height: 1.6; color: #9AA8BA; margin: 12px auto 0; max-width: 52ch; }
.book-offline .bo-acts { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   The comparison. This section used to be six cards explaining that a widget
   matches words and an assistant reads intent. Explaining it is weak; the page
   already has the thing running, so this shows the same question answered
   twice and lets the reader draw the conclusion.

   The left pane is deliberately dull. That contrast IS the argument, so do not
   "improve" it into something well designed.
   -------------------------------------------------------------------------- */
.vs-ask { margin-bottom: 26px; }
.vs-label {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #7B8AA0;
}
.vs-qs { display: flex; flex-wrap: wrap; gap: 10px; }
.vs-q {
  font: inherit; font-size: 15px;
  padding: 12px 20px; cursor: pointer;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #A7B4C6;
  transition: background .22s var(--ease-out), color .22s var(--ease-out),
              border-color .22s var(--ease-out), transform .22s var(--ease-out);
}
.vs-q:hover { color: #fff; border-color: rgba(92,211,253,.4); }
.vs-q.is-on {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.vs-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.vs-pane { border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }

.vs-old { background: #F2F3F5; border: 1px solid #E2E5EA; }
.vs-old .vs-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px; border-bottom: 1px solid #E2E5EA;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #6C7683;
}
.vs-old .vs-body { padding: 22px 20px; flex: 1; }
.vs-old .vs-hit { font-size: 12px; color: #8A929C; font-family: var(--font-mono); margin-bottom: 14px; }
.vs-old .vs-hit b { color: #3C444E; }
.vs-old .vs-title { font-size: 17px; color: #1A4FD6; text-decoration: underline; line-height: 1.3; }
.vs-old .vs-url { font-family: var(--font-mono); font-size: 11.5px; color: #4A8A57; margin-top: 5px; }
.vs-old .vs-snip { font-size: 14px; line-height: 1.55; color: #5A626C; margin-top: 8px; }
.vs-old .vs-none { font-size: 16px; color: #6C7683; line-height: 1.5; }

.vs-new { background: #0E1C33; border: 1px solid rgba(92,211,253,.28); box-shadow: 0 0 60px -30px rgba(2,136,253,.6); }
.vs-new .vs-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--glow);
}
.vs-new .vs-head .tdot { width: 6px; height: 6px; border-radius: 50%; background: #3FD07E; }
.vs-new .vs-body { padding: 22px 20px; flex: 1; }
.vs-new .vs-say { font-size: 15.5px; line-height: 1.55; color: #DCE4EF; }
.vs-new .vs-act {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em;
  border: 1px solid rgba(92,211,253,.36); background: rgba(2,136,253,.12);
  color: #BFE4FE; border-radius: 40px; padding: 9px 16px;
}

.vs-verdict {
  padding: 14px 20px; font-size: 13.5px; line-height: 1.5;
  border-top: 1px solid rgba(0,0,0,.06);
}
.vs-old .vs-verdict { background: #EAECEF; color: #6C7683; border-top-color: #E2E5EA; }
.vs-new .vs-verdict { background: rgba(2,136,253,.10); color: #A7C8E8; border-top-color: rgba(255,255,255,.09); }
.vs-verdict b { font-weight: 600; }
.vs-old .vs-verdict b { color: #3C444E; }
.vs-new .vs-verdict b { color: var(--glow); }

.vs-fade { animation: vsIn .34s var(--ease-out) both; }
@keyframes vsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vs-fade { animation: none; } }

/* the capability points, as hairlines rather than another grid of boxes */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 46px; }
.cap { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cap .ci {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--glow); display: block; margin-bottom: 10px;
}
.cap h4 { font-size: 17px; font-weight: 600; line-height: 1.25; color: #fff; margin-bottom: 7px; }
.cap p { font-size: 13.5px; line-height: 1.55; color: #9AA8BA; }

@media (max-width: 900px) {
  .vs-panes { grid-template-columns: minmax(0, 1fr); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
}
@media (max-width: 560px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  .vs-q { font-size: 14px; padding: 11px 16px; }
}

/* --------------------------------------------------------------------------
   LARGE SCREENS
   --------------------------------------------------------------------------
   Everything above is tuned for a laptop. On a 1920 or 2560 display the page
   was a 1160px column stranded in the middle of the screen with type that had
   stopped growing, because every clamp() had already hit its ceiling around
   1100px wide.

   Two moves, both at the token level rather than rule by rule:
     1. the content column widens, which the hero copy follows automatically
        now that its padding reads --maxw instead of a hardcoded 1160
     2. the clamp ceilings lift, so the vw term in each one starts doing work
        again instead of being capped

   Paragraph measure is NOT widened. .lead keeps its 64ch cap and the headings
   keep their ch limits, so the column gets wider without any line getting
   harder to read. Only the grids, the type scale and the rhythm grow.
   -------------------------------------------------------------------------- */
@media (min-width: 1500px) {
  :root { --maxw: 1320px; }

  .band { padding: 150px 0; }
  .band-dark { padding: 160px 0; }
  .quote-band { padding: 175px 0 165px; }

  .hero-copy h1 { font-size: clamp(40px, 4.6vw, 78px); }
  .hero-copy .lead { font-size: clamp(17px, 1.5vw, 21px); }
  .hero-copy { padding-right: 80px; }
  /* the panel's right edge lines up with the container's right edge, the way
     the copy lines up with its left edge. Without this the panel centres in a
     1280px column and drifts miles away from the words it belongs to. */
  .hero-stage { justify-content: flex-end; padding-right: max(20px, calc((100vw - var(--maxw)) / 2 + 20px)); }

  h2.h-sec { font-size: clamp(31px, 3.5vw, 58px); }
  .lead { font-size: clamp(17px, 1.45vw, 21px); }
  .sec-head { margin-bottom: 58px; }

  .ledger .n { font-size: clamp(30px, 2.6vw, 46px); }
  .ledger .l { font-size: 15px; }
  .ledger { padding: 62px 0; }

  .offer h3 { font-size: clamp(23px, 2.1vw, 34px); }
  .offer p { font-size: 16.5px; }
  .offer li { font-size: 15.5px; }

  .client-card .cn { font-size: clamp(23px, 2vw, 33px); }
  .client-card > p, .client-card li { font-size: 15.5px; }

  .cap h4 { font-size: 18.5px; }
  .cap p { font-size: 14.5px; }

  .qa-item h4 { font-size: 21.5px; }
  .qa-item p { font-size: 16px; }
  .qa-grid { gap: 0 72px; }

  .quote-band blockquote p { font-size: clamp(28px, 3.4vw, 62px); }

  .vs-q { font-size: 16px; padding: 13px 22px; }
  .vs-new .vs-say { font-size: 16.5px; }
  .vs-old .vs-title { font-size: 18px; }
  .vs-old .vs-snip { font-size: 15px; }
  .vs-verdict { font-size: 14.5px; }

  .step h4 { font-size: 20px; }
  .step p { font-size: 14.5px; }

  .note { font-size: 16px; }
  .book-list li { font-size: 16.5px; }
  .book-embed .calendly-inline-widget { height: 720px; }
}

@media (min-width: 1900px) {
  :root { --maxw: 1440px; }

  .band { padding: 168px 0; }
  .band-dark { padding: 178px 0; }

  .hero-copy h1 { font-size: clamp(40px, 4.3vw, 86px); }
  .hero-copy { padding-right: 96px; }

  h2.h-sec { font-size: clamp(31px, 3.3vw, 64px); }
  .quote-band blockquote p { font-size: clamp(28px, 3.2vw, 70px); }
  .ledger .n { font-size: clamp(30px, 2.4vw, 52px); }
  .offer h3 { font-size: clamp(23px, 2vw, 38px); }
}

/* --------------------------------------------------------------------------
   Elements added with the client's final copy, 10 Sep.
   -------------------------------------------------------------------------- */

/* the sub headline that sits between the h1 and the paragraph */
.hero-sub-h {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.35;              /* rule 1 */
  color: #C6D2E1;
  max-width: 44ch;
}
.hero-copy .lead { margin-top: 18px; }

/* "Built to Talk. Designed to Convert." */
.hero-tagline {
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--glow);
  letter-spacing: .01em;
}

/* the closing line on an offer column */
.offer-tag {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; font-style: italic;
  color: var(--accent-deep);
  line-height: 1.35;
}

/* the payoff line under the four booking points */
.book-outcome {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500; line-height: 1.45;
  color: #fff;
  max-width: 46ch;
}

/* heading above the pair under the calendar */
.book-people-h {
  margin-top: 40px; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: #7B8AA0;
}
.book-people { margin-top: 22px; padding-top: 24px; align-items: flex-start; }
.bp { align-items: flex-start; max-width: 380px; }
.bp img { margin-top: 3px; }
.bp .bpb {
  display: block; margin-top: 8px;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5;
  color: #8592A3; text-transform: none; letter-spacing: 0;
}

/* footer brand line */
.ft-tag {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  color: #C6D2E1; margin-bottom: 10px !important; max-width: none;
}

@media (max-width: 900px) {
  .hero-sub-h { font-size: 19px; }
  .bp { max-width: none; }
}

/* --------------------------------------------------------------------------
   MESHED WITH MORASCALE
   --------------------------------------------------------------------------
   Devices taken from morascale.com, in AIS's dark navy rather than its white:

     - the floating pill navigation, 20px off the top, translucent with a 20px
       blur and a fully rounded edge. It is their most recognisable element.
     - fully rounded buttons carrying a circular arrow badge
     - one accent blue and nothing else (see the tokens at the top)
     - their easing and their rise entrance

   What is deliberately NOT taken: their white ground and their typefaces. This
   brand is dark and set in Jost, and copying those would just make a worse
   Morascale instead of a better AI Specialist Solutions.
   -------------------------------------------------------------------------- */

/* ---------- floating pill nav ---------- */
.site-head {
  position: fixed;
  top: 18px; left: 0; right: 0;
  height: auto;
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 16px;
  pointer-events: none;
}
.site-head .container {
  pointer-events: auto;
  max-width: 1152px;
  background: rgba(12, 24, 44, .72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--pill);
  box-shadow: 0 10px 34px rgba(2,10,24,.45);
  padding: 8px 8px 8px 22px;
  gap: 24px;
}
body { padding-top: 0; }
.hero { padding-top: var(--header-h); }
html { scroll-padding-top: calc(var(--header-h) + 28px); }

.brand img { height: 30px; }
.brand .bn { font-size: 16px; letter-spacing: -.02em; }
.main-nav a { padding: 9px 14px; font-size: 14px; border-radius: var(--pill); }
.head-cta .btn { padding: 12px 12px 12px 20px; font-size: 11px; }

/* ---------- pill buttons with the circular arrow badge ---------- */
.btn .ar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 13px; line-height: 1;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out);
}
.btn-primary .ar { background: rgba(255,255,255,.22); }
.btn:hover .ar { transform: translateX(3px); }
.btn-ghost .ar, .hero .btn-ghost .ar { background: rgba(255,255,255,.12); }
.head-cta .btn .ar { width: 26px; height: 26px; font-size: 12px; }

/* ---------- softer, larger radii on the card family ---------- */
.card, .qcard, .client-card, .demo-card, .steps, .book-embed,
.feat .f, .tri .t, .vs-pane, .contact-side { border-radius: var(--radius); }
.vs-old, .vs-new { border-radius: var(--radius); }
.client-shot { border-radius: var(--radius) var(--radius) 0 0; }

/* ---------- their rise, used on first paint for the hero ---------- */
@keyframes ais-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy > * { animation: ais-rise .9s var(--ease-rise) both; }
.hero-copy .kicker      { animation-delay: .05s; }
.hero-copy h1           { animation-delay: .13s; }
.hero-copy .hero-sub-h  { animation-delay: .21s; }
.hero-copy .lead        { animation-delay: .29s; }
.hero-copy .hero-actions{ animation-delay: .37s; }
.hero-copy .hero-tagline{ animation-delay: .45s; }
.hero-copy .hero-sub    { animation-delay: .53s; }
.hero-stage { animation: ais-rise 1s var(--ease-rise) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-stage { animation: none; }
}

@media (max-width: 1024px) {
  .site-head .container { padding: 8px 8px 8px 18px; }
}
@media (max-width: 640px) {
  .site-head { top: 10px; padding: 0 10px; }
  .site-head .container { padding: 7px 7px 7px 15px; }
}