/* =========================================================================
   Ana's Laundromat — styles.css
   Mobile-first, designed at 375px. Single committed light theme.

   Palette logic: deep indigo is laundry bluing, the additive that makes
   whites read white. Ivory is the linen. Brass is the hardware. Clay is
   the only action colour, and it appears nowhere else, so a button is
   always the warmest thing on screen.

   Type: Bodoni Moda for display and figures, Archivo for everything read
   at length or filled in.
   ========================================================================= */

:root {
  /* Linen */
  --ivory:       #F7F4EE;
  --ivory-sunk:  #EFEAE1;
  --paper:       #FFFFFF;
  --rule:        #DED6C9;
  --rule-strong: #C4B8A6;

  /* Bluing */
  --ink:         #14202E;   /* 15.0:1 on ivory */
  --muted:       #4E5C6E;   /*  6.2:1 on ivory */
  --indigo:      #16304D;
  --indigo-deep: #0D1F33;
  --on-indigo:        #F7F4EE;  /* 12.3:1 on indigo */
  --on-indigo-muted:  #AFC0D4;  /*  7.2:1 on indigo */

  /* Hardware. Brass never carries text on ivory (2.2:1) — it is for
     rules only. Figures on indigo use the brighter tone at 7.1:1. */
  --brass:        #C0A176;
  --brass-rule:   #B8956A;
  --brass-bright: #D4B98F;

  /* Action. Navy and gold is the old luxury pairing, and gold is
     analogous to the brass already in the page, so the CTA belongs to
     the palette instead of fighting it. Ink on gold = 6.9:1. */
  --gold:        #C9A24A;
  --gold-deep:   #B08C33;
  --on-gold:     #14202E;

  --error:       #A3231B;
  --error-bg:    #FBEAE8;
  --focus:       #16527A;
  --focus-light: #C0A176;

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --tap:      44px;
  --measure:  60ch;
  --gutter:   22px;
  --dock:     76px;   /* height of the mobile action dock */
  --header-h: 116px;  /* two rows on phones; one row from 880px up */
}

/* Anchor targets clear the sticky header instead of hiding under it. */
html { scroll-padding-top: var(--header-h); }

::selection { background: var(--indigo); color: var(--ivory); }

*, *::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 { transition-duration: .01ms !important; }
}

body {
  margin: 0;
  padding-bottom: var(--dock);
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

/* Gold is too pale to carry link text on ivory, so links stay indigo. */
a { color: var(--indigo); }
a:hover { color: var(--indigo-deep); }

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

/* A dark-blue ring is invisible on the dark sections. */
.hero :focus-visible,
.band :focus-visible,
.board :focus-visible,
.site-footer :focus-visible,
.success:focus-visible { outline-color: var(--focus-light); }

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

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-mid    { max-width: 660px; }
.wrap-narrow { max-width: 540px; }

.section { padding-block: 56px; }
.section-sunk {
  background: var(--ivory-sunk);
  border-block: 1px solid var(--rule);
}

.section-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 22px;
  text-wrap: balance;
}

.section-lede {
  color: var(--muted);
  max-width: var(--measure);
  margin-bottom: 28px;
}

.fine {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 80;
  background: var(--indigo);
  color: var(--ivory);
  padding: 12px 16px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

.noscript-box {
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 8px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}

/* Phones: brand and controls on row one, section tabs wrap to row two.
   From 880px everything sits on a single row. */
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  min-height: 62px;
  padding-block: 8px;
}

.nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-top: 1px solid var(--rule);
  /* Bleed to the viewport edge so the scroll doesn't look clipped. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: calc(var(--gutter) - 10px);
}
.nav::-webkit-scrollbar { display: none; }

.nav-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--indigo);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  min-height: var(--tap);
}

.mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: block;
}
.mark-seal  { fill: var(--indigo); }
.mark-drop  { fill: var(--ivory); }
.mark-shine {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.9;
  stroke-linecap: round;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -.005em;
}
.brand-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 2px;
}

.header-right { display: flex; align-items: center; gap: 14px; }

.header-phone {
  display: none;
  color: var(--ink);
  text-decoration: none;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--brass-rule);
  padding-bottom: 1px;
}
.header-phone:hover { color: var(--indigo); }

.lang-switch {
  display: flex;
  border: 1px solid var(--rule-strong);
}

.lang-btn {
  min-width: 46px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--rule-strong); }
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active { background: var(--indigo); color: var(--on-indigo); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  /* Kept short enough on phones that the hero's own CTA lands clear of
     the fixed action dock rather than behind it. */
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  padding-block: 48px 40px;
  background: var(--indigo-deep);
}

.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

/* Two stacked scrims: a vertical one so the type always sits on darkness,
   and a bluing wash that ties the photograph to the palette. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(9,20,33,.90) 0%, rgba(9,20,33,.62) 42%, rgba(9,20,33,.20) 78%),
    linear-gradient(to bottom, rgba(22,48,77,.42), rgba(22,48,77,.42));
}

.hero-inner { position: relative; }

.hero-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--on-indigo);
  /* Wide enough that "Nosotros hacemos el resto." stays on one line;
     text-wrap:balance then evens the two sentences. */
  max-width: 20ch;
  margin-bottom: 18px;
  text-wrap: balance;
}

.hero-body {
  color: var(--on-indigo-muted);
  font-size: 1.0625rem;
  max-width: 44ch;
  margin-bottom: 26px;
}

.hero-actions { display: flex; flex-direction: column; gap: 11px; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--on-gold);
  /* A hairline of the deeper tone keeps the edge crisp on ivory. */
  border-color: var(--gold-deep);
}
.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--on-gold);
}
.btn-primary:disabled {
  background: var(--rule-strong);
  border-color: var(--rule-strong);
  color: #4B4B45;
  cursor: default;
}

/* Quiet button adapts to whatever ground it sits on. */
.btn-quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }

.hero .btn-quiet {
  border-color: rgba(247,244,238,.45);
  color: var(--on-indigo);
}
.hero .btn-quiet:hover {
  border-color: var(--on-indigo);
  background: rgba(247,244,238,.08);
  color: var(--on-indigo);
}

.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: .9375rem; }

/* -------------------------------------------------------- three promises */

/* Deliberately light. The hero is already a dark block; a second one
   directly beneath it merges into a single mass and kills the rhythm. */
.promises {
  background: var(--ivory-sunk);
  border-bottom: 1px solid var(--rule);
}

.promise-row {
  display: grid;
  gap: 0;
  padding-block: 8px;
}

.promise { padding-block: 22px; }
.promise + .promise { border-top: 1px solid var(--rule); }

.promise-lead {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--indigo);
  margin-bottom: 5px;
}

.promise-body {
  font-size: .9375rem;
  color: var(--muted);
  max-width: 34ch;
}

/* ---------------------------------------------------------- how it works */

.steps-layout { display: grid; gap: 34px; }
.steps-copy { align-self: center; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding-block: 20px;
}
.step + .step { border-top: 1px solid var(--rule); }

.step-num {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  font-weight: 600;
  font-size: 2rem;
  line-height: .95;
  /* Brass on ivory is 2.2:1 — fine for a rule, not for a numeral. */
  color: var(--indigo);
}

.step-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.step-body {
  font-size: .9375rem;
  color: var(--muted);
  max-width: 42ch;
}

.steps-figure { margin: 0; }
.steps-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ------------------------------------------------------------- care band */

.band {
  position: relative;
  isolation: isolate;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: 64px;
  background: var(--indigo-deep);
}

.band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.band-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    rgba(13,31,51,.92) 0%, rgba(13,31,51,.78) 55%, rgba(13,31,51,.55) 100%);
}

.band-inner { position: relative; }

.band-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1.14;
  color: var(--on-indigo);
  max-width: 20ch;
  margin-bottom: 14px;
  text-wrap: balance;
}

.band-body {
  color: var(--on-indigo-muted);
  max-width: 42ch;
}

/* ------------------------------------------------- pricing: the bluing board */

.board {
  margin: 0;
  background: var(--indigo);
  color: var(--on-indigo);
}

.board-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 22px;
}
.board-row + .board-row { border-top: 1px solid var(--brass-rule); }

.board-row dt { color: var(--on-indigo-muted); font-size: .9375rem; }

.board-row dd {
  margin: 0;
  font-family: var(--display);
  /* Bodoni's hairlines thin out as optical size climbs, and light-on-dark
     erodes them further. Pinning opsz low borrows the sturdier small-text
     cut of the same face, so the figures keep their character and stay
     legible. Weight and a brighter tone do the rest. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  font-weight: 600;
  font-size: 1.3125rem;
  color: var(--brass-bright);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.board-row-lead { padding-block: 24px; }
.board-row-lead dt {
  color: var(--on-indigo);
  font-size: 1.0625rem;
  font-weight: 600;
}
.board-row-lead dd {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
  font-variation-settings: 'opsz' 12;
}

/* ---------------------------------------------------------- testimonials */

.quotes { display: grid; gap: 26px; }

.quote {
  padding-top: 20px;
  border-top: 1px solid var(--brass-rule);
}
.quote-text {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 10px;
  max-width: 38ch;
}
.quote-name { font-size: .875rem; color: var(--muted); }

/* ------------------------------------------------------------------ form */

.form { display: grid; gap: 22px; }
.field { display: grid; gap: 6px; }

.field > label,
.fieldset > legend {
  font-weight: 600;
  font-size: .9375rem;
}

.optional { font-weight: 400; color: var(--muted); margin-left: 5px; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;    /* 16px+ so iOS does not zoom on focus */
  line-height: 1.4;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }

.numeric { font-variant-numeric: tabular-nums; }
.field-short { max-width: 8.5rem; }

textarea { min-height: 94px; resize: vertical; line-height: 1.5; }

select {
  appearance: none;
  padding-right: 42px;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234E5C6E' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

input::placeholder, textarea::placeholder { color: #8A93A0; }

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.hint { font-size: .8125rem; color: var(--muted); max-width: 50ch; }

.error {
  display: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--error);
}
.error.is-visible { display: block; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  padding: 12px 15px;
  border-left: 3px solid var(--error);
  background: var(--error-bg);
  color: var(--error);
  font-size: .9375rem;
  font-weight: 600;
}
.form-status.is-visible { display: block; }

.success {
  display: grid;
  gap: 10px;
  padding: 30px 26px;
  background: var(--indigo);
  color: var(--on-indigo);
}
.success .fine { color: var(--on-indigo-muted); }
.success:focus { outline: none; }
.success:focus-visible { outline: 2px solid var(--focus-light); outline-offset: 3px; }
.success-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.625rem;
  color: var(--brass-bright);
}

/* ----------------------------------------------------------------- store */

.store-layout { display: grid; gap: 32px; }

.store-figure { margin: 0; }
.store-figure img {
  width: 100%;
  /* Uncropped this is 900x1348 and towers over the copy column. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 62%;
}

.store-copy { display: grid; gap: 22px; align-content: start; }

.store-block { display: grid; gap: 5px; justify-items: start; }

.store-label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
}

.store-value {
  font-style: normal;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
}
.store-phone a { font-variant-numeric: tabular-nums; text-underline-offset: 3px; }

.store-block .btn { margin-top: 8px; }

.hours { margin: 0; display: grid; gap: 5px; width: 100%; max-width: 320px; }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .9375rem;
}
.hours-row dt { color: var(--muted); }
.hours-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Courier instructions. A genuine sequence, so it is numbered. */
.courier {
  padding: 20px;
  background: var(--ivory-sunk);
  border-left: 2px solid var(--brass-rule);
}

.courier-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 14px;
}

.courier-steps {
  margin: 0 0 16px;
  padding-left: 1.15em;
  display: grid;
  gap: 9px;
  font-size: .9375rem;
  color: var(--muted);
  max-width: 46ch;
}
.courier-steps li { padding-left: .2em; }
.courier-steps li::marker {
  color: var(--indigo);
  font-weight: 700;
}

.courier-copy { background: var(--paper); }
.courier-copy.is-copied {
  border-color: var(--indigo);
  color: var(--indigo);
}

.store-self { padding-top: 18px; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--indigo-deep);
  color: var(--on-indigo);
  padding-block: 36px 44px;
}
.footer-inner { display: grid; gap: 6px; }
.footer-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.footer-line { font-size: .875rem; color: var(--on-indigo-muted); }
.footer-fine { font-size: .8125rem; }

/* ------------------------------------------------------ mobile action dock */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(247,244,238,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
}
.dock-cta { flex: 1; }

/* ============================================================== ≥ 700px */

@media (min-width: 700px) {
  body { font-size: 18px; padding-bottom: 0; }

  .header-phone { display: inline-block; }
  .dock { display: none; }

  .hero { min-height: 82vh; padding-block: 80px 64px; }
  .hero-title { font-size: 3.75rem; max-width: 22ch; }
  .hero-body { font-size: 1.125rem; }
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-actions .btn { flex: 0 0 auto; }

  .section { padding-block: 88px; }
  .section-title { font-size: 2.75rem; margin-bottom: 32px; }

  .promise-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    padding-block: 44px;
  }
  .promise { padding-block: 0; }
  .promise + .promise {
    border-top: 0;
    /* Brass reads as hardware here: decorative, never carrying text. */
    border-left: 1px solid var(--brass-rule);
    padding-left: 34px;
  }
  .promise-lead { font-size: 1.5rem; }

  .steps-layout {
    grid-template-columns: 1fr 0.85fr;
    gap: 56px;
    align-items: center;
  }

  .band { min-height: 66vh; }
  .band-title { font-size: 2.75rem; }

  .board-row-lead dd { font-size: 3.25rem; }
  .board-row dd { font-size: 1.375rem; }

  .quotes { grid-template-columns: repeat(3, 1fr); gap: 30px; }

  .store-layout {
    grid-template-columns: 0.8fr 1fr;
    gap: 56px;
    align-items: start;
  }
}

/* ============================================================== ≥ 880px */

@media (min-width: 880px) {
  :root { --header-h: 68px; }

  .header-row { flex-wrap: nowrap; gap: 24px; }
  .brand { order: 1; }
  .nav {
    order: 2;
    flex-basis: auto;
    gap: 4px;
    overflow: visible;
    border-top: 0;
    margin-inline: 0;
    padding-inline: 0;
  }
  .nav-link { min-height: 40px; padding: 0 12px; }
  .header-right { order: 3; }

  /* The basket sits low-right in the frame; a wide crop needs to follow it. */
  .hero-img { object-position: 64% 46%; }
}

/* ============================================================== ≥ 1040px */

@media (min-width: 1040px) {
  .hero-title { font-size: 4.25rem; max-width: 24ch; }
  .steps-layout { gap: 80px; }
  .store-layout { gap: 80px; }
}

/* ------------------------------------------------------- high contrast */

@media (prefers-contrast: more) {
  :root {
    --muted:            #2F3B49;
    --rule:             #AFA595;
    --rule-strong:      #7D7365;
    --on-indigo-muted:  #DCE6F0;
    --brass:            #D8BC93;
  }
  .hero-scrim {
    background: linear-gradient(to top, rgba(9,20,33,.96) 0%, rgba(9,20,33,.80) 55%, rgba(9,20,33,.55) 100%);
  }
}