/* Eyewaste.ai page. Everything is scoped under .ew so webflow.css and the rest of the site are untouched. */

.ew {
  --ew-accent: #F39C19;
  --ew-red: #B4321F;
  --ew-navy: #1B2140;
  --ew-navy-2: #262E52;
  --ew-navy-line: #343C63;
  --ew-ink: #141A2B;
  --ew-text: #39405A;
  --ew-muted: #4A5168;
  --ew-soft: #D9DDE8;
  --ew-soft-2: #AEB4C6;
  --ew-line: #DDE1EA;
  --ew-input-line: #B8BED0;
  --ew-bg: #F5F6F9;
  --ew-display: Archivo, 'Arial Narrow', sans-serif;
  --ew-body: Inter, 'Helvetica Neue', Arial, sans-serif;
  --ew-header-offset: 96px;

  background: var(--ew-bg);
  color: var(--ew-ink);
  font-family: var(--ew-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.ew *, .ew *::before, .ew *::after { box-sizing: border-box; }
/* Site-wide element rules (webflow.css) set their own fonts and colors on p, label, li, etc.
   :where() keeps this reset at single-class weight, so the component classes below still win. */
.ew :where(p, span, li, label, a, figcaption, legend, input, select, button, small, b, strong) { font-family: inherit; letter-spacing: inherit; }
.ew :where(p, li, figcaption, small) { color: inherit; }
.ew h1, .ew h2, .ew h3, .ew p, .ew figure, .ew ul, .ew ol, .ew fieldset { margin: 0; }
.ew h1, .ew h2, .ew h3 { color: inherit; letter-spacing: normal; text-transform: none; }
.ew a { color: var(--ew-navy); }
.ew a:hover { color: var(--ew-red); }
.ew img, .ew video { max-width: 100%; }
.ew [id] { scroll-margin-top: var(--ew-header-offset); }

.ew-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.ew-display { font-family: var(--ew-display); font-weight: 800; }
.ew-h2 { font-family: var(--ew-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; text-wrap: balance; }
.ew-h2--sm { font-size: clamp(28px, 3vw, 40px); }
.ew-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ew-red); }
.ew-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(var(--ew-col, 300px), 100%), 1fr)); }
.ew-stack { display: flex; flex-direction: column; }
.ew-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Buttons */
.ew a.ew-btn, .ew button.ew-btn {
  display: inline-block; text-decoration: none; text-align: center; font-family: inherit; font-weight: 700;
  border-radius: 12px; cursor: pointer; transition: filter .15s ease, background-color .15s ease;
}
.ew a.ew-btn--accent, .ew button.ew-btn--accent { background: var(--ew-accent); color: var(--ew-navy); border: 0; }
.ew a.ew-btn--accent:hover, .ew button.ew-btn--accent:hover { color: var(--ew-navy); filter: brightness(1.06); }
.ew a.ew-btn--ghost { border: 2px solid #5B6386; color: #FFFFFF; }
.ew a.ew-btn--ghost:hover { color: #FFFFFF; border-color: #FFFFFF; }
.ew a.ew-btn--outline { border: 2px solid var(--ew-navy); color: var(--ew-navy); }
.ew a.ew-btn--outline:hover { background: var(--ew-navy); color: #FFFFFF; }

/* Hero */
.ew-hero { background: var(--ew-navy); color: #FFFFFF; }
.ew-subnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.ew a.ew-brand { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; }
.ew-brand img { width: 30px; height: 38px; }
.ew-brand__name { font-family: var(--ew-display); font-weight: 800; font-size: 20px; letter-spacing: 0.01em; }
.ew-brand__name span { color: var(--ew-accent); }
.ew-brand__by { font-size: 12px; font-weight: 600; color: var(--ew-soft-2); letter-spacing: 0.08em; text-transform: uppercase; }
.ew-subnav__links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; }
.ew .ew-subnav__links a { color: var(--ew-soft); text-decoration: none; }
.ew .ew-subnav__links a:hover { color: #FFFFFF; }
.ew .ew-subnav__links a.ew-btn { color: var(--ew-navy); padding: 12px 18px; border-radius: 10px; }

.ew-hero__main { display: grid; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 72px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.ew-hero__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ew-hero__copy .ew-eyebrow { color: var(--ew-accent); }
.ew-hero h1 { font-family: var(--ew-display); font-weight: 800; font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; color: #FFFFFF; }
.ew-hero__lead { font-size: 20px; line-height: 1.55; color: var(--ew-soft); max-width: 34em; }
.ew-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ew-hero__ctas .ew-btn--accent { padding: 16px 24px; font-size: 17px; }
.ew-hero__ctas .ew-btn--ghost { padding: 14px 22px; font-size: 17px; }
.ew-pills { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.ew-pill { font-size: 14px; font-weight: 600; padding: 8px 13px; border-radius: 999px; background: var(--ew-navy-2); color: #E6E9F2; }

.ew-stopcard-fig { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ew-stopcard { background: #FFFFFF; color: var(--ew-ink); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 60px rgba(5, 8, 25, 0.45); }
.ew-stopcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ew-stopcard__title { font-family: var(--ew-display); font-weight: 700; font-size: 17px; }
.ew-stopcard__time { font-size: 13px; color: var(--ew-muted); }
.ew-stopcard video { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; background: #0E1230; }
.ew-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ew-tag { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 7px; }
.ew-tag--ok { background: #DDF3E4; color: #14532D; }
.ew-tag--warn { background: #FDE7D2; color: #7A2E0B; }
.ew-stopcard__note { font-size: 14px; line-height: 1.5; color: var(--ew-text); }
.ew-chip { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 8px; }
.ew-chip--dark { background: var(--ew-navy); color: #FFFFFF; }
.ew-chip--light { border: 1px solid #C9CEDB; color: var(--ew-navy); }
.ew-stopcard-fig figcaption { font-size: 13px; color: var(--ew-soft-2); }

/* Jobs */
.ew-jobs { padding-top: 80px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 36px; }
.ew-jobs .ew-h2 { max-width: 18em; }
.ew-card { background: #FFFFFF; border: 1px solid var(--ew-line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ew-card h3 { font-family: var(--ew-display); font-size: 23px; font-weight: 700; line-height: 1.25; }
.ew-card p { font-size: 16px; line-height: 1.6; color: var(--ew-text); }

/* Real catches */
.ew-real { padding-top: 56px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 28px; }
.ew-real__meta { font-size: 15px; color: var(--ew-muted); }
.ew-clip { display: flex; flex-direction: column; gap: 10px; }
.ew-clip video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; display: block; background: var(--ew-navy); }
.ew-clip figcaption { font-size: 15px; font-weight: 600; }

/* Results */
.ew-results { padding-top: 56px; padding-bottom: 56px; }
.ew-results__box { background: var(--ew-navy); color: #FFFFFF; border-radius: 22px; padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 30px; }
.ew-results__box .ew-h2 { color: #FFFFFF; }
.ew-results__meta { font-size: 15px; color: var(--ew-soft-2); }
.ew-stats { --ew-col: 220px; gap: 28px; }
.ew-stat { display: flex; flex-direction: column; gap: 6px; }
.ew-stat__num { font-family: var(--ew-display); font-weight: 800; font-size: 56px; line-height: 1; }
.ew-stat__num--accent { color: var(--ew-accent); }
.ew-stat__label { font-size: 16px; color: var(--ew-soft); }
.ew-results__foot { font-size: 15px; line-height: 1.6; color: #C3C8D8; border-top: 1px solid var(--ew-navy-line); padding-top: 22px; }
.ew-results__foot strong { color: #FFFFFF; }

/* How it works */
.ew-how { padding-top: 24px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 32px; }
.ew-steps { list-style: none; padding: 0; --ew-col: 240px; gap: 28px; }
.ew-steps li { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--ew-navy); padding-top: 18px; }
.ew-steps__n { font-family: var(--ew-display); font-weight: 800; font-size: 15px; color: var(--ew-red); }
.ew-steps__t { font-weight: 700; font-size: 19px; }
.ew-steps__d { font-size: 16px; line-height: 1.55; color: var(--ew-text); }

/* One screen */
.ew-screen { background: #FFFFFF; border-top: 1px solid var(--ew-line); border-bottom: 1px solid var(--ew-line); }
.ew-screen__in { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 30px; }
.ew-roles { --ew-col: 250px; gap: 18px; }
.ew-role { background: var(--ew-bg); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.ew-role__t { font-weight: 700; font-size: 18px; }
.ew-role__d { font-size: 15px; line-height: 1.55; color: var(--ew-text); }

/* Cities */
.ew-cities { padding-top: 64px; padding-bottom: 64px; --ew-col: 420px; gap: 40px; align-items: start; }
.ew-cities__copy { display: flex; flex-direction: column; gap: 14px; }
.ew-cities__copy p { font-size: 17px; line-height: 1.6; color: var(--ew-text); }
.ew-checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
.ew-checks li { display: flex; gap: 12px; align-items: flex-start; }
.ew-checks svg { flex: none; }

/* Calculator */
.ew-calc { padding-top: 24px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
.ew-calc__intro { display: flex; flex-direction: column; gap: 10px; }
.ew-calc__intro p { font-size: 16px; line-height: 1.6; color: var(--ew-text); max-width: 46em; }
.ew-calc__body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ew-calc__inputs { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ew-fieldset { background: #FFFFFF; border: 1px solid var(--ew-line); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ew-fieldset legend { font-family: var(--ew-display); font-weight: 700; font-size: 18px; padding: 0 6px; color: var(--ew-navy); border: 0; margin: 0; width: auto; line-height: 1.3; }
.ew-fields { --ew-col: 200px; gap: 14px; }
.ew label.ew-num { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ew-ink); margin: 0; }
.ew-num__box { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ew-input-line); border-radius: 10px; padding: 0 12px; background: #FFFFFF; }
.ew-num__box:focus-within { border-color: var(--ew-navy); box-shadow: 0 0 0 3px rgba(27, 33, 64, .12); }
.ew-num__affix { font-weight: 600; color: var(--ew-muted); white-space: nowrap; }
.ew .ew-num__box input { font: inherit; font-weight: 500; border: 0; outline: none; padding: 11px 0; width: 100%; min-width: 0; height: auto; margin: 0; background: transparent; color: var(--ew-ink); box-shadow: none; }
.ew-num__hint { font-size: 12px; font-weight: 500; color: var(--ew-muted); }

.ew-estimate { flex: 1 1 340px; min-width: 0; background: var(--ew-navy); color: #FFFFFF; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--ew-header-offset); }
.ew-estimate__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ew-accent); }
.ew-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--ew-navy-line); padding-bottom: 10px; }
.ew-line__label { display: flex; flex-direction: column; gap: 2px; }
.ew-line__label b { font-size: 15px; font-weight: 600; }
.ew-line__label small { font-size: 12px; color: var(--ew-soft-2); }
.ew-line__value { font-family: var(--ew-display); font-weight: 700; font-size: 19px; white-space: nowrap; }
.ew-total { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ew-total__label { font-size: 16px; font-weight: 700; }
.ew-total__value { font-family: var(--ew-display); font-weight: 800; font-size: 30px; color: var(--ew-accent); white-space: nowrap; }
.ew-cost { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; color: var(--ew-soft); }
.ew-cost span:last-child { white-space: nowrap; }
.ew-net { background: var(--ew-navy-2); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ew-net > span { display: flex; flex-direction: column; gap: 2px; }
.ew-net > span:last-child { text-align: right; }
.ew-net small { font-size: 13px; color: var(--ew-soft-2); }
.ew-net b { font-family: var(--ew-display); font-weight: 800; font-size: 28px; }
.ew-net b.ew-accent { color: var(--ew-accent); }
.ew-estimate .ew-btn--accent { padding: 15px; font-size: 16px; }
.ew-estimate__fine { font-size: 12px; line-height: 1.5; color: var(--ew-soft-2); }

/* Pricing */
.ew-pricing { padding-top: 24px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
.ew-pricing__intro { display: flex; flex-direction: column; gap: 10px; }
.ew-pricing__intro p { font-size: 16px; color: var(--ew-text); }
.ew-plans { gap: 18px; align-items: stretch; }
.ew-plan { background: #FFFFFF; border: 1px solid var(--ew-line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ew-plan--featured { border: 2px solid var(--ew-navy); }
.ew-plan--dark { background: var(--ew-navy); color: #FFFFFF; border: 0; }
.ew-plan__name { font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.ew-plan__badge { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: var(--ew-navy); color: #FFFFFF; }
.ew-plan__price { font-family: var(--ew-display); font-weight: 800; font-size: 40px; line-height: 1; }
.ew-plan__price small { font-size: 15px; font-weight: 600; color: var(--ew-muted); font-family: var(--ew-body); }
.ew-plan__pitch { font-size: 15px; line-height: 1.55; color: var(--ew-text); }
.ew-plan ul { padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ew-text); flex: 1; }
.ew-plan ul li { margin: 0; }
.ew-plan--dark .ew-plan__pitch, .ew-plan--dark ul { color: var(--ew-soft); }
.ew-plan .ew-btn { padding: 13px; }
.ew-plan .ew-btn--accent { padding: 15px; }
.ew-plan__contact { font-size: 14px; color: var(--ew-soft); text-align: center; }

/* Pilot */
.ew-pilot { background: var(--ew-navy); color: #FFFFFF; }
.ew-pilot__in { padding-top: 72px; padding-bottom: 72px; --ew-col: 420px; gap: 44px; align-items: start; }
.ew-pilot__copy { display: flex; flex-direction: column; gap: 16px; }
.ew-pilot__copy h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; color: #FFFFFF; }
.ew-pilot__copy p { font-size: 18px; line-height: 1.6; color: var(--ew-soft); }
.ew-pilot__copy p.ew-pilot__contact { font-size: 17px; line-height: 1.7; color: #FFFFFF; }
.ew .ew-pilot__contact a { color: var(--ew-accent); font-weight: 700; }

.ew-form { background: #FFFFFF; color: var(--ew-ink); border-radius: 18px; padding: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.ew label.ew-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; color: var(--ew-ink); }
.ew-field--full, .ew-form__full { grid-column: 1 / -1; }
.ew .ew-field input, .ew .ew-field select {
  font: inherit; font-size: 16px; font-weight: 400; padding: 12px; border: 1px solid var(--ew-input-line); border-radius: 10px;
  background: #FFFFFF; color: var(--ew-ink); height: auto; margin: 0; width: 100%; box-shadow: none;
}
.ew .ew-field input:focus, .ew .ew-field select:focus { outline: none; border-color: var(--ew-navy); box-shadow: 0 0 0 3px rgba(27, 33, 64, .12); }
.ew-field--error input, .ew-field--error select { border-color: var(--ew-red); }
.ew-field__error { font-size: 13px; font-weight: 500; color: var(--ew-red); }
.ew-form .ew-btn--accent { grid-column: 1 / -1; font-size: 17px; padding: 16px; }
.ew-form__note { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 10px; }
.ew-form__note--error { background: #FBE4E1; color: #7A1F12; }
.ew-form__note--ok { background: #DDF3E4; color: #14532D; }
.ew-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ew-foot { padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ew-muted); }

@media (max-width: 520px) {
  .ew-form { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .ew-stat__num { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ew a.ew-btn, .ew button.ew-btn { transition: none; }
}