/* Inter, self-hosted (SIL Open Font License, fonts/Inter-OFL.txt), so no font
   request leaves the site. One variable file covers both weights we use. */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/InterVariable-latin.woff2") format("woff2-variations"), url("/fonts/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/InterVariable-latin-ext.woff2") format("woff2-variations"), url("/fonts/InterVariable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0a0a0a;
  --ink-2: #4a4a48;
  --ink-3: #85857f;
  --rule: #dcddd6;
  --paper: #f4f5f2;
  --white: #ffffff;
  --green: #00bf63;
  --gutter: clamp(16px, 4vw, 48px);
  --nav: 72px;
  --line: clamp(17px, 1.5vw, 22px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400; font-size: 16px;
  color: var(--ink); background: var(--paper);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One text size for everything that says something. One line each on
   desktop; on narrow screens a long line wraps evenly instead of overflowing. */
.line {
  font-size: var(--line); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  text-align: center; text-wrap: balance; max-width: 1120px; margin-inline: auto;
}

/* Buttons: liquid glass, rebuilt in CSS from the Framer LiquidGlassButtonPlus
   component Faris picked. A thin tinted glass body with a light blur, inset
   "shoulder" shading for the rounded edge, a conic rim catching light, a
   pointer-following highlight and a reflection that sweeps across on hover,
   a slight 3D tilt toward the pointer and a squash when pressed (glass.js
   drives the pointer values). The Framer version's Chromium-only refraction
   filter is left out. Variants only change the tint, text and highlight strength:
   .pill = green (Apply Now), .pill-ink and .btn = dark, .pill-white = clear. */
@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --ly { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --refl { syntax: "<percentage>"; inherits: false; initial-value: -30%; }
@property --eng { syntax: "<number>"; inherits: false; initial-value: 0; }

.pill, .pill-ink, .pill-white, .btn {
  --tint: rgba(255, 255, 255, .05); --text: #26282d; --hi: 1; --drop: rgba(10, 10, 10, .2);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 700 15px/1 "Inter", sans-serif; letter-spacing: -0.01em; color: var(--text);
  background:
    radial-gradient(ellipse 76px 44px at var(--lx) var(--ly), rgba(255, 255, 255, calc(.2 * var(--eng))), rgba(255, 255, 255, 0) 78%),
    linear-gradient(105deg, rgba(255, 255, 255, 0) calc(var(--refl) - 16%), rgba(255, 255, 255, calc(.12 + .16 * var(--eng))) var(--refl), rgba(255, 255, 255, 0) calc(var(--refl) + 16%)),
    linear-gradient(150deg, rgba(255, 255, 255, calc(.2 * var(--hi))), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, calc(.14 * var(--hi)))),
    var(--tint);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.08); backdrop-filter: blur(2.5px) saturate(1.08);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, calc(.8 * var(--hi))),
    inset 0 -1px 1px rgba(255, 255, 255, calc(.67 * var(--hi))),
    inset 1px 0 .5px rgba(255, 255, 255, calc(.67 * var(--hi))),
    inset -1px 0 .5px rgba(0, 0, 0, .13),
    inset 0 calc(9px - 2.5px * var(--eng)) calc(12px - 2px * var(--eng)) -8px rgba(0, 0, 0, .44),
    inset 0 calc(-9px + 2px * var(--eng)) 9px -7px rgba(255, 255, 255, calc(.93 * var(--hi))),
    inset 5px 0 8px -7px rgba(0, 0, 0, .42),
    inset -5px 0 8px -7px rgba(0, 0, 0, .3),
    0 12px 26px -14px var(--drop);
  transform: perspective(520px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc(var(--eng) * -1px));
  transition: --rx .35s cubic-bezier(.2, .8, .2, 1), --ry .35s cubic-bezier(.2, .8, .2, 1), --lx .2s ease-out, --ly .2s ease-out,
    --refl .7s cubic-bezier(.2, .8, .2, 1), --eng .45s cubic-bezier(.2, .8, .2, 1), transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
/* The rim: a conic band of light around the edge */
.pill::before, .pill-ink::before, .pill-white::before, .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from 210deg at 50% 50%, rgba(255, 255, 255, .87) 0deg, rgba(255, 255, 255, .38) 36deg, rgba(255, 255, 255, .02) 68deg,
    rgba(0, 0, 0, .13) 112deg, rgba(255, 255, 255, .09) 155deg, #fff 190deg, rgba(255, 255, 255, .7) 217deg, rgba(255, 255, 255, .02) 256deg,
    rgba(0, 0, 0, .06) 300deg, rgba(255, 255, 255, .08) 335deg, rgba(255, 255, 255, .87) 360deg);
  opacity: var(--hi);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Caustic: light gathering at the bottom of the glass */
.pill::after, .pill-ink::after, .pill-white::after, .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 118%, rgba(255, 255, 255, calc(.34 * var(--hi))), rgba(255, 255, 255, 0) 70%);
}
.pill:active, .pill-ink:active, .pill-white:active, .btn:active {
  --eng: 1;
  transform: perspective(520px) rotateX(calc(var(--rx) + 2.4deg)) rotateY(var(--ry)) translateY(1.8px) scale(.991, .974);
  transition-duration: .12s;
}
.pill:disabled, .pill-ink:disabled, .btn:disabled { opacity: .6; cursor: default; }
.pill { --tint: rgba(0, 191, 99, .92); --text: var(--ink); --drop: rgba(0, 150, 75, .6); }
.pill-ink, .btn { --tint: rgba(10, 10, 10, .88); --text: var(--white); --hi: .5; --drop: rgba(10, 10, 10, .45); }
.pill-white { --tint: rgba(255, 255, 255, .3); --text: var(--ink); --drop: rgba(0, 90, 45, .35); }
.pill:focus-visible, .pill-white:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pill-ink:focus-visible, .btn:focus-visible, .menu-btn:focus-visible, .menu-list a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Premium glow button, rebuilt from the Framer PremiumGlowButton: a dark body
   inside a 1.5px ring where a conic band of green light circles every 3s, a
   soft green glow beneath, a small lift on hover and a press on tap. Used for
   the few buttons that matter most (final Apply Now, Submit application). */
.glow-btn {
  --glow: #00bf63; position: relative; isolation: isolate; display: inline-flex; overflow: hidden;
  padding: 1.5px; border: 0; border-radius: 999px; background: rgba(0, 191, 99, .14); cursor: pointer;
  text-decoration: none; box-shadow: 0 15px 35px 0 rgba(0, 191, 99, .25);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.25), box-shadow .3s ease;
}
.glow-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 220%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0%, var(--glow) 20%, transparent 50%);
  transform: translate(-50%, -50%) rotate(0deg); animation: glowspin 3s linear infinite;
}
.glow-btn > span {
  display: block; padding: 15px 30px; border-radius: inherit; background: #0d0d0d; color: #fff;
  font: 500 16px/1 "Inter", sans-serif; letter-spacing: -0.01em; white-space: nowrap;
}
.glow-btn:hover { transform: scale(1.02); box-shadow: 0 18px 40px 0 rgba(0, 191, 99, .35); }
.glow-btn:active { transform: scale(.98); transition-duration: .1s; }
.glow-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.glow-btn:disabled { opacity: .6; cursor: default; }
@keyframes glowspin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Nav: the wordmark, centered, opens the menu. No rule under it. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--nav);
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 245, 242, .82);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
}
.menu { position: relative; }
.menu-btn {
  position: relative; display: block; padding: 8px 10px;
  background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--ink-2);
}
.menu-btn img { width: 84px; }
/* The arrow hangs outside the button so the wordmark itself sits dead center. */
.menu-btn svg {
  position: absolute; left: calc(100% - 2px); top: 50%; width: 11px; height: 8px;
  transform: translateY(-50%); transition: transform .25s ease;
}
.menu-btn[aria-expanded="true"] svg { transform: translateY(-50%) rotate(180deg); }
.menu-list {
  position: absolute; top: calc(100% + 12px); left: 50%; min-width: 210px;
  list-style: none; padding: 8px; background: var(--white);
  border: 1px solid var(--rule); border-radius: 22px;
  box-shadow: 0 24px 48px -24px rgba(10, 10, 10, .35);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.menu.open .menu-list { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
/* An invisible bridge over the gap under the logo, so moving the mouse down to the list keeps it open */
.menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu-list a {
  display: block; padding: 11px 16px; border-radius: 999px; text-align: center;
  font-size: 15px; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s;
}
.menu-list a:hover { background: var(--paper); color: var(--ink); }
.menu-list a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.menu-list a { transform-origin: center; will-change: transform; }
/* Items cascade in when the menu opens */
.menu.open .menu-list li { animation: dockin .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes dockin { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
/* Manar Studios: the featured pill at the foot of the menu (the screenshot Faris sent, no arrow) */
.menu-feature { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ecece7; }
.menu-list .manar-pill {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px;
  background: #fafbfe; color: #01123A; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 10px 24px -14px rgba(1, 18, 58, .35), 0 0 0 1px rgba(1, 18, 58, .05);
}
.menu-list .manar-pill:hover { background: var(--white); color: #01123A; box-shadow: 0 14px 28px -14px rgba(1, 18, 58, .45), 0 0 0 1px rgba(1, 18, 58, .08); }
.menu-list .manar-pill[aria-current="page"] { font-weight: 700; }
.manar-pill svg { width: 18px; height: 18px; flex: none; }

/* Sticky scrolling (scrolly.js), on every page that has it. The wrapper gets
   one stretch of scroll per item; the inner part pins under the nav. Without
   .pin-ok (phones, short screens, reduced motion) both are ordinary blocks. */
.pin-ok .scrolly { height: calc(100vh - var(--nav) + var(--steps) * 62vh); margin-top: clamp(40px, 7vh, 88px); }
.pin-ok .sticky-inner {
  position: sticky; top: var(--nav); min-height: calc(100vh - var(--nav));
  display: grid; align-content: center; padding: 24px 0;
}
.pin-ok .sticky-inner > * { margin-top: 0 !important; }

/* Inner pages share the nav and fill at least one screen */
.page main { min-height: 100vh; min-height: 100svh; padding: calc(var(--nav) + clamp(48px, 10vh, 120px)) var(--gutter) clamp(72px, 10vh, 120px); }
.soft { color: var(--ink-2); font-weight: 400; }

/* About us: modelled on anam.ai/about. Two-tone headings, a grid of tiles with
   green line drawings taken from the logo, a story that darkens as you read,
   then two split sections. */
.ab .ab-main { max-width: 1240px; margin: 0 auto; }
.two { font-size: clamp(26px, 2.5vw, 36px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.12; }
.two span { display: block; text-wrap: balance; }
.two span + span { color: #9a9b94; }

.tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.tiles h1 { grid-column: 1 / span 4; grid-row: 2; align-self: center; padding-right: 24px; }
.tile { aspect-ratio: 5 / 6; border-radius: 18px; background: #e8e9e3; display: grid; place-items: center; overflow: hidden; }
.tile.dark { background: var(--ink); }
.tile svg { width: 74%; height: auto; overflow: visible; }
.tile .s { fill: none; stroke: var(--green); stroke-width: 1.4; }
.tile .d { stroke-dasharray: 2 3; }
.tile .f { fill: var(--green); }
.tile .faint { stroke: rgba(255, 255, 255, .3); }

.ab-story { max-width: 640px; margin: clamp(96px, 16vh, 180px) auto; display: grid; gap: 1.1em; }
.story-text { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.025em; line-height: 1.34; }
.wd { color: #b9bab3; transition: color .35s ease; }
.wd.on { color: var(--ink); }

.ab-split {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 8vw, 140px);
  align-items: start; margin-top: clamp(96px, 16vh, 180px);
}
.ab-side { display: grid; justify-items: start; gap: 22px; }

.acc-item { position: relative; border-bottom: 1px solid var(--rule); }
/* The open item's rule fills green as you scroll through it */
.acc-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.6px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
}
.acc-item.on::after { transform: scaleX(var(--sp, 1)); }
html:not(.pin-ok) .acc-item::after { display: none; }
.acc-item h3 {
  position: relative; padding: 18px 0 18px 34px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: #9a9b94; transition: color .3s;
}
.acc-item h3::before, .acc-item h3::after {
  content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 1.6px; margin-top: -0.8px;
  background: var(--green); transition: transform .3s ease;
}
.acc-item h3::after { transform: rotate(90deg); }
.acc-item.on h3 { color: var(--ink); }
.acc-item.on h3::after { transform: rotate(0deg); }
.acc-item p {
  color: var(--ink-2); font-size: 16px; line-height: 1.6; padding: 0 0 0 34px; max-width: 520px;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .5s ease, padding .5s ease;
}
.acc-item.on p { max-height: 8em; opacity: 1; padding-bottom: 22px; }

.beliefs { list-style: none; }
.beliefs li {
  display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule);
  font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.02em;
}
.beliefs svg { width: 20px; height: 20px; flex: none; fill: var(--green); }
.beliefs .tw { animation: twinkle 2.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkle { 50% { opacity: .2; } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* 404 */
.nf { display: grid; align-content: center; justify-items: start; gap: 28px; max-width: 1180px; margin: 0 auto; }
.nf .two { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.04em; line-height: 1.06; }

/* Honeypot field on forms: present for bots, invisible to people */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu-list, .menu-btn svg { transition: none; }
  .menu.open .menu-list li { animation: none; }
  .glow-btn::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .beliefs .tw { animation: none; }
  .wd { transition: none; }
}

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tiles h1 { grid-column: 1 / -1; grid-row: 1; padding: 0 0 20px; }
  .tile:nth-of-type(n+9) { display: none; }
  .ab-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  :root { --nav: 64px; }
  .menu-btn img { width: 72px; }
}