/* Rank Jedi — design system
   ---------------------------------------------------------------------------
   Palette taken from the live Duda stylesheet so the rebuild reads as the same
   brand: #4892cf (the chevron blue in the logo), #1db6e8 cyan, #08485d deep
   teal, #f26554 coral. Type is Archivo for display — the closest widely
   available match to the heavy squared grotesque in the RANK JEDI wordmark —
   with Inter for reading.

   The chevron from the logo is the one repeated motif: it sets the eyebrow
   marks, the section rules and the shape of the dark bands. It is drawn in CSS
   rather than shipped as an image so it stays crisp and costs nothing.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ tokens */
:root {
  --ink:        #14171a;
  --ink-2:      #46505b;
  --ink-3:      #6b7683;

  --blue:       #4892cf;
  --blue-dk:    #2f76ae;
  --blue-soft:  #eaf3fb;
  --cyan:       #1db6e8;
  --teal:       #08485d;
  --teal-dk:    #05303e;
  --coral:      #f26554;

  --paper:      #ffffff;
  --mist:       #f5f7f9;
  --line:       #e2e8ef;

  --shell:      1180px;
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);
  --radius:     14px;
  --radius-sm:  9px;

  --shadow-sm:  0 1px 2px rgba(20, 23, 26, .06), 0 2px 8px rgba(20, 23, 26, .05);
  --shadow-md:  0 4px 12px rgba(20, 23, 26, .07), 0 14px 34px rgba(20, 23, 26, .08);
  --shadow-lg:  0 10px 24px rgba(8, 72, 93, .10), 0 30px 60px rgba(8, 72, 93, .14);

  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 6vw, 4.1rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); letter-spacing: -.024em; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.42rem); }
h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal); color: #fff; padding: .8rem 1.2rem;
  font-weight: 600; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--tight { max-width: 780px; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Eyebrow: the logo chevron, drawn as a rotated square corner. */
/* flex-start, not center: when the label wraps to two lines on a phone the chevron would
   otherwise float in the gutter between them instead of marking the first line. */
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  font-family: var(--display);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-dk);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 3px solid var(--cyan);
  border-bottom: 3px solid var(--cyan);
  transform: rotate(45deg);
  margin-top: .18em;
}
.eyebrow--light { color: var(--cyan); }

.lede { font-size: clamp(1.06rem, 1.7vw, 1.2rem); color: var(--ink-2); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display);
  font-weight: 700; font-size: .95rem; letter-spacing: -.005em;
  padding: .92rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-dk); color: #fff; box-shadow: var(--shadow-md); }

.btn--coral { background: var(--coral); color: #fff; box-shadow: var(--shadow-sm); }
.btn--coral:hover { background: #dd4b39; color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--onDark { background: #fff; color: var(--teal); }
.btn--onDark:hover { background: var(--cyan); color: #fff; }

.btn--outlineLight { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--outlineLight:hover { background: #fff; color: var(--teal); border-color: #fff; }

.btn--sm { padding: .62rem 1.15rem; font-size: .86rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Text link with a moving chevron. */
.link-more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-weight: 700; font-size: .93rem;
  color: var(--blue-dk); text-decoration: none;
}
.link-more::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.link-more:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------------------------------------------------------------- masthead */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead__bar {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 74px;
  flex-wrap: wrap;
}
.wordmark { flex: none; display: block; line-height: 0; }
.wordmark img { width: auto; height: 42px; }

.nav {
  display: flex; align-items: center; gap: .35rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav a {
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: var(--ink-2); text-decoration: none;
  padding: .5rem .78rem; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--mist); }
.nav a[aria-current="page"] { color: var(--blue-dk); }

.masthead__cta { flex: none; }
.masthead__tel {
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.masthead__tel:hover { color: var(--blue-dk); }

/* On narrow screens the nav wraps to its own full-width row rather than
   disappearing. The Duda site simply hid it, which on a phone left the whole
   site unreachable from the header. */
@media (max-width: 900px) {
  .masthead__bar { min-height: 64px; padding-block: .7rem; row-gap: .5rem; }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; gap: .15rem; }
  .nav a { padding: .42rem .6rem; font-size: .87rem; }
  .masthead__cta { margin-left: auto; }
}
@media (max-width: 520px) {
  .masthead__tel { display: none; }
}

/* -------------------------------------------------------------------- hero */
.hero { position: relative; background: var(--teal-dk); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* The generated hero deliberately leaves the right third open. The scrim is
   strongest there so the headline sits on quiet pixels, not on the subject. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(258deg, rgba(5,48,62,.94) 0%, rgba(5,48,62,.86) 34%, rgba(5,48,62,.44) 60%, rgba(5,48,62,.18) 100%);
}
.hero__inner {
  position: relative;
  display: flex; justify-content: flex-end;
  padding-block: clamp(4rem, 12vw, 8.5rem);
}
.hero__copy { max-width: 610px; color: #fff; }
.hero__copy h1 { color: #fff; }
.hero__copy h1 em {
  font-style: normal;
  color: var(--cyan);
  display: block;
}
.hero__copy p { color: rgba(255,255,255,.9); font-size: clamp(1.04rem, 1.7vw, 1.16rem); }
.hero .btn-row { margin-top: 1.9rem; }

.hero__proof {
  margin-top: 2.4rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem;
}
.hero__proof div { color: #fff; }
.hero__proof b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: 1.85rem; line-height: 1; color: var(--cyan);
}
.hero__proof span { font-size: .84rem; color: rgba(255,255,255,.72); letter-spacing: .01em; }

@media (max-width: 860px) {
  .hero__media img { object-position: 28% 50%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(5,48,62,.62) 0%, rgba(5,48,62,.92) 55%, rgba(5,48,62,.97) 100%); }
  .hero__inner { justify-content: flex-start; }
  .hero__copy { max-width: none; }
}

/* Compact hero for interior pages. */
.pagehead {
  background: var(--teal-dk);
  color: #fff;
  padding-block: clamp(2.8rem, 7vw, 4.6rem);
  position: relative; overflow: hidden;
}
.pagehead::after {           /* chevron watermark, echoing the logo */
  content: ""; position: absolute; right: -70px; top: 50%;
  width: 300px; height: 300px;
  border-right: 46px solid rgba(72,146,207,.16);
  border-bottom: 46px solid rgba(72,146,207,.16);
  transform: translateY(-50%) rotate(-45deg);
  pointer-events: none;
}
.pagehead h1 { color: #fff; margin-bottom: .35rem; }
.pagehead p { color: rgba(255,255,255,.86); max-width: 62ch; margin-top: .9rem; }
.pagehead .shell { position: relative; z-index: 1; }

/* ------------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #cfdcea; }
.card__media { aspect-ratio: 4 / 3; background: var(--blue-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.4rem 1.5rem 1.55rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .45rem; }
.card__body p { color: var(--ink-2); font-size: .97rem; }
.card__body .link-more { margin-top: auto; padding-top: 1rem; }

/* Numbered service list on /services */
.svc {
  scroll-margin-top: 96px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 0 1.5rem;
  padding-block: clamp(2rem, 4vw, 2.9rem);
  border-top: 1px solid var(--line);
}
.svc:first-of-type { border-top: 0; }
.svc__num {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--blue); letter-spacing: .02em;
  padding-top: .28rem;
}
.svc__body h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: .6rem; }
.svc__body p { color: var(--ink-2); }
.svc__body .btn { margin-top: 1.1rem; }
@media (max-width: 620px) {
  .svc { grid-template-columns: 1fr; gap: .5rem; }
  .svc__num { padding-top: 0; }
}

/* Sticky index of services */
.svc-index {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.svc-index a {
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .46rem .95rem; text-decoration: none;
}
.svc-index a:hover { border-color: var(--blue); color: var(--blue-dk); background: var(--blue-soft); }

/* --------------------------------------------------------------- split row */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.split--flip .split__media { order: 2; }
@media (max-width: 760px) { .split--flip .split__media { order: 0; } }

/* --------------------------------------------------------------- industries */
.industries { display: flex; flex-wrap: wrap; gap: .7rem; }
.industry {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .6rem 1.25rem .6rem 1rem;
}
.industry::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--cyan);
  border-bottom: 2.5px solid var(--cyan);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------- logo strips */
.logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.6rem, 5vw, 3.4rem);
  justify-content: center;
}
/* Fixed box + object-fit rather than a bare height. These are six different companies'
   marks with six different aspect ratios and amounts of built-in padding; sizing on height
   alone left Semrush and the Facebook badge visually tiny next to MOZ and BBB. */
.logos img {
  width: 132px; height: 46px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .2s ease, opacity .2s ease;
}
.logos img:hover { filter: none; opacity: 1; }
.logos--awards img { width: 118px; height: 118px; filter: none; opacity: 1; }

/* ------------------------------------------------------------------- bands */
.band {
  background: var(--teal);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  position: relative; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 250px; height: 250px;
  border-right: 40px solid rgba(29,182,232,.2);
  border-bottom: 40px solid rgba(29,182,232,.2);
  transform: rotate(-45deg);
  pointer-events: none;
}
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.88); }
.band__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; justify-content: space-between; }
.band__inner > div { max-width: 62ch; }

/* -------------------------------------------------------------------- prose */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.7rem; font-size: 1.12rem; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--blue); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--display); font-weight: 700; }

/* --------------------------------------------------------------- info list */
.infolist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.infolist dt {
  font-family: var(--display); font-weight: 700; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .2rem;
}
.infolist dd { margin: 0; font-size: 1.06rem; }
.infolist dd a { font-weight: 600; text-decoration: none; }
.infolist dd a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- form */
.formcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.05rem; }
.field label {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  letter-spacing: .01em; color: var(--ink);
  margin-bottom: .38rem;
}
.field .opt { color: var(--ink-3); font-weight: 500; letter-spacing: 0; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .78rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346505b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(72,146,207,.18);
}
.field input::placeholder, .field textarea::placeholder { color: #a9b3be; }

/* Honeypot: off-screen, never announced, never tabbable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .855rem; color: var(--ink-2); line-height: 1.55;
  margin-bottom: 1.15rem;
}
.consent input { flex: none; width: 17px; height: 17px; margin-top: .18rem; accent-color: var(--blue); }

.form__status { font-size: .93rem; margin: .8rem 0 0; }
.form__status[data-state="err"] { color: #b3261e; font-weight: 600; }
.form__status[data-state="ok"]  { color: #12692f; font-weight: 600; font-size: 1.02rem; }

/* ------------------------------------------------------------------ footer */
.footer { background: var(--ink); color: #aeb8c4; padding-block: clamp(2.8rem, 6vw, 4rem) 2rem; font-size: .94rem; }
.footer__grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 2.4rem;
}
.footer h4 {
  color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: .9rem;
}
.footer__brand img { height: 40px; width: auto; margin-bottom: 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__list a { color: #aeb8c4; text-decoration: none; }
.footer__list a:hover { color: #fff; text-decoration: underline; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.11);
  padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: .855rem; color: #7f8b99;
}
.footer__legal p { margin: 0; }

/* ------------------------------------------------------------------- misc */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1.1rem; }
.measure { max-width: 64ch; }
.center .measure, .measure.center { margin-inline: auto; }