/* ==========================================================================
   Copier1 — book.copier1.com
   --------------------------------------------------------------------------
   Palette and type lifted from copier1.com so the hand-off from the Shopify
   menu does not feel like leaving the company.

   The design idea: this is a service DESK, not a form. A copier dealer makes
   one decision twenty times a day — can we fix it from here, or does somebody
   have to drive? The page is built around that fork. Two routes, given real
   weight and made to feel like different things, because they are.

   The masthead carries a live open/closed light. It is the detail that makes
   the page read as somewhere staffed, and it is honest: read from the same
   business-hours table the calendar uses, so it can never contradict it.

   Mobile first. The media queries at the end are the only place a wide screen
   differs.
   ========================================================================== */

:root {
  /* Straight from the Shopify theme's tokens — not approximations. */
  --navy-900: #0C2B44;
  --navy-800: #103A5C;
  --navy-700: #14496F;
  --navy-600: #1B6FB8;
  --navy-100: #E7EFF7;
  --navy-050: #F4F8FC;

  --steel-900: #2C3440;
  --steel-600: #5A6472;
  --steel-400: #8B93A0;
  --steel-200: #D8DEE6;
  --steel-100: #EDF1F5;
  --steel-050: #F4F6F9;
  --white:     #FFFFFF;

  /* The single warm note in the whole palette. Used for the closed light and
     nothing else — the moment it appears twice it stops meaning anything. */
  --red:      #C7350B;
  --red-soft: #FDEDE7;

  --green:      #1C7A4A;
  --green-soft: #EAF6EF;

  --focus: #2C88D4;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --tap:  48px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--steel-050);
  color: var(--steel-900);
  font-family: var(--sans);
  font-size: 16px;          /* never below 16: iOS zooms the page on focus */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.c1-wrap { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: 18px; }
.c1-wrap--wide { max-width: 1060px; }
.c1-form-wrap { max-width: 640px; }
.c1-nums { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Masthead — navy, with presence. A white strip with a small logo read as an
   unfinished page; the company should be visibly behind this.
   ========================================================================== */

.c1-mast {
  background: var(--navy-900);
  color: var(--white);
  border-bottom: 3px solid var(--navy-600);
}
.c1-mast__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 68px; padding-block: 11px;
}

.c1-mark { text-decoration: none; display: flex; align-items: center; }
.c1-mark__logo { display: block; height: 44px; width: auto; }

.c1-mast__right { display: flex; align-items: center; gap: 16px; }

/* The open/closed light. */
.c1-status {
  display: none;                     /* hidden on the narrowest phones */
  align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.c1-status__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.c1-status--open { background: rgb(28 122 74 / .22); color: #9BE3BD; }
.c1-status--open .c1-status__dot { background: #35D68A; box-shadow: 0 0 0 3px rgb(53 214 138 / .22); }
.c1-status--shut { background: rgb(199 53 11 / .2); color: #F6B3A0; }
.c1-status--shut .c1-status__dot { background: #E8613A; }

.c1-tel { text-align: right; text-decoration: none; color: var(--white); line-height: 1.15; }
.c1-tel__l {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #8FB6D6;
}
.c1-tel__n { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; }

/* ==========================================================================
   Type
   ========================================================================== */

.c1-main { padding-block: 30px 48px; }

.c1-h1 {
  margin: 0 0 10px;
  font-size: 30px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800;
  color: var(--navy-900);
  text-wrap: balance;               /* stops "if / you are not sure" widows */
}
.c1-h2 { margin: 30px 0 10px; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 800; }
.c1-intro { margin: 0 0 26px; font-size: 17.5px; line-height: 1.5; color: var(--steel-600); max-width: 56ch; text-wrap: pretty; }
.c1-note  { margin: 12px 0 0; font-size: 14px; color: var(--steel-600); max-width: 64ch; }
.c1-mono  { font-family: var(--mono); font-weight: 700; letter-spacing: .02em; }

/* ==========================================================================
   The two routes — the whole point of the landing page
   ========================================================================== */

.c1-routes { display: grid; gap: 16px; }

.c1-route {
  position: relative;
  display: flex; flex-direction: column;
  padding: 20px 20px 0;
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
/* A top rule in the accent, so the two routes are distinguishable at a glance
   from across the desk and not only by reading them. */
.c1-route::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px;
}
.c1-route--remote::before { background: var(--navy-600); }
.c1-route--onsite::before { background: var(--red); }

.c1-route:hover {
  border-color: var(--navy-700);
  box-shadow: 0 10px 28px rgb(12 43 68 / .12);
  transform: translateY(-2px);
}
.c1-route:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.c1-route__top { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.c1-route__icon {
  flex: 0 0 auto; width: 50px; height: 50px;
  display: grid; place-items: center; border-radius: var(--r);
}
.c1-route__icon svg { width: 27px; height: 27px; }
.c1-route--remote .c1-route__icon { background: var(--navy-100); color: var(--navy-800); }
.c1-route--onsite .c1-route__icon { background: var(--red-soft); color: var(--red); }

.c1-route__kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-600);
}

.c1-route__title {
  display: block; font-size: 23px; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.15; color: var(--navy-900);
}
.c1-route__text {
  display: block; margin-block-start: 8px; font-size: 15.5px; color: var(--steel-600);
  text-wrap: pretty;
}

/* Concrete examples do the real work: people match their symptom to a line
   here far faster than they parse an abstract description. */
.c1-route__eg {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; gap: 5px;
}
.c1-route__eg li {
  position: relative; padding-inline-start: 19px;
  font-size: 14px; color: var(--steel-900);
}
.c1-route__eg li::before {
  content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--steel-400);
}

.c1-route__foot {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 12px; margin: 18px -20px 0; padding: 14px 20px;
  border-block-start: 1px solid var(--steel-100); background: var(--steel-050);
}
.c1-route__cta  { font-size: 15.5px; font-weight: 800; color: var(--navy-800); }
.c1-route__when { grid-column: 1; font-size: 13px; color: var(--steel-600); }
.c1-route__go {
  grid-row: 1 / span 2; grid-column: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy-800); color: var(--white);
  transition: transform .16s ease, background .16s ease;
}
.c1-route__go svg { width: 15px; height: 15px; }
.c1-route:hover .c1-route__go { background: var(--navy-900); transform: translateX(3px); }

/* ==========================================================================
   Trust strip
   ========================================================================== */

.c1-trust {
  display: grid; gap: 2px 20px; margin: 26px 0 0; padding: 0; list-style: none;
}
.c1-trust li {
  padding: 11px 0; border-block-start: 1px solid var(--steel-200);
  font-size: 14px; color: var(--steel-600);
}
.c1-trust strong { display: block; color: var(--navy-900); font-size: 14.5px; }

/* ==========================================================================
   Steps
   ========================================================================== */

.c1-steps {
  display: flex; gap: 0; list-style: none; margin: 0 0 32px; padding: 0;
  background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--r-lg);
  overflow: hidden;
}
.c1-steps__i {
  flex: 1 1 0; min-width: 0; position: relative;
  padding: 14px 12px;
  font-size: 13px; font-weight: 600; color: var(--steel-600);
  border-inline-end: 1px solid var(--steel-200);
}
.c1-steps__i:last-child { border-inline-end: 0; }
.c1-steps__i--now  { background: var(--navy-050); color: var(--navy-900); font-weight: 700; }
.c1-steps__i--done { background: var(--white); color: var(--steel-600); }
.c1-steps__inner {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
a.c1-steps__inner:hover .c1-steps__l { text-decoration: underline; }
.c1-steps__n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--steel-200); color: var(--steel-600); font-size: 12px; font-weight: 800;
}
.c1-steps__i--now  .c1-steps__n { background: var(--navy-800); color: #fff; }
.c1-steps__i--done .c1-steps__n { background: var(--green); color: #fff; font-size: 14px; }
.c1-steps__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Service cards, day rail, time grid
   ========================================================================== */

.c1-svc { display: grid; gap: 10px; }
.c1-svc__card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 20px; background: var(--white);
  border: 1.5px solid var(--steel-200); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 3px rgb(0 0 0 / .05);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.c1-svc__card:hover {
  border-color: var(--navy-700); background: var(--navy-050);
  box-shadow: 0 4px 16px rgb(12 43 68 / .12); transform: translateY(-1px);
}
.c1-svc__card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c1-svc__body { flex: 1; min-width: 0; }
.c1-svc__arrow {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-800);
  transition: background .14s ease, transform .14s ease;
}
.c1-svc__card:hover .c1-svc__arrow { background: var(--navy-800); color: #fff; transform: translateX(2px); }
.c1-svc__name  { display: block; font-size: 16.5px; font-weight: 700; color: var(--navy-900); }
.c1-svc__blurb { display: block; margin-block-start: 3px; font-size: 14px; color: var(--steel-600); }
.c1-svc__len {
  display: inline-block; margin-block-start: 8px; padding: 3px 9px;
  border-radius: 999px; background: var(--steel-100);
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--steel-600);
}

.c1-chosen {
  margin: 0 0 20px; padding: 12px 15px; background: var(--white);
  border: 1px solid var(--steel-200); border-inline-start: 4px solid var(--navy-600);
  border-radius: var(--r-sm); font-size: 15px;
}
.c1-chosen span { color: var(--steel-600); }
.c1-chosen a {
  display: inline-flex; align-items: center;
  margin-inline-start: 10px; padding: 3px 11px;
  border-radius: 999px; border: 1px solid var(--navy-100);
  background: var(--navy-050); color: var(--navy-700);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.c1-chosen a:hover { background: var(--navy-100); border-color: var(--navy-600); }

/* Days run horizontally: a week is naturally sequential, and swiping it beats
   a month grid where most cells are unavailable. */
.c1-days {
  display: flex; gap: 8px; overflow-x: auto; padding-block-end: 8px; margin-block-end: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.c1-day {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 88px;
  padding: 11px 13px; text-align: center;
  background: var(--white); border: 1px solid var(--steel-200);
  border-radius: var(--r-sm); text-decoration: none; color: var(--steel-900);
}
.c1-day--on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.c1-day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c1-day__l { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; }
.c1-day__n { display: block; margin-block-start: 2px; font-size: 11px; color: var(--steel-600); }
.c1-day--on .c1-day__n { color: rgb(255 255 255 / .8); }

.c1-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.c1-time {
  display: grid; place-items: center; min-height: var(--tap);
  background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--r-sm);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-decoration: none; color: var(--steel-900);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.c1-time:hover { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }
.c1-time:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.c1-form { margin-block-start: 4px; }
.c1-grid2, .c1-grid3 { display: grid; gap: 15px; }

.c1-field { display: block; margin-block-end: 15px; }
.c1-label { display: block; margin-block-end: 6px; font-size: 14px; font-weight: 700; color: var(--navy-900); }
.c1-label em { font-style: normal; font-weight: 600; color: var(--steel-400); font-size: 12px; }
.c1-help  { display: block; margin-block-start: 5px; font-size: 13px; color: var(--steel-600); }

.c1-field input, .c1-field textarea, .c1-field select {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  border: 1px solid var(--steel-200); border-radius: var(--r-sm);
  background: var(--white); color: var(--steel-900); font: inherit; font-size: 16px;
  transition: border-color .12s ease;
}
.c1-field textarea { min-height: 102px; resize: vertical; line-height: 1.5; }
.c1-field input:hover, .c1-field textarea:hover, .c1-field select:hover { border-color: var(--steel-400); }
.c1-field input:focus, .c1-field textarea:focus, .c1-field select:focus {
  outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--navy-800);
}

.c1-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 38px;
  cursor: pointer;
}

.c1-fs { margin: 0 0 22px; padding: 0; border: 0; }
.c1-fs legend { padding: 0; margin-block-end: 9px; font-size: 14px; font-weight: 700; color: var(--navy-900); }

.c1-radios { display: grid; gap: 9px; }
.c1-radios label {
  display: flex; align-items: flex-start; gap: 11px; min-height: var(--tap);
  padding: 12px 14px; background: var(--white);
  border: 1px solid var(--steel-200); border-radius: var(--r-sm);
  font-size: 15px; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.c1-radios input { margin-block-start: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--navy-800); }
.c1-radios label:has(input:checked) { border-color: var(--navy-800); background: var(--navy-050); }
.c1-radios label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Pill-style radio/checkbox selectors (OS, customer type, etc.) */
.c1-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.c1-pill { display: flex; cursor: pointer; }
.c1-pill input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.c1-pill span {
  display: inline-flex; align-items: center;
  padding: 10px 22px; border-radius: 999px;
  border: 1.5px solid var(--steel-200); background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--steel-600);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
  white-space: nowrap; user-select: none; cursor: pointer;
}
.c1-pill:has(input:checked) span {
  border-color: var(--navy-800); background: var(--navy-800); color: #fff;
}
.c1-pill span:hover { border-color: var(--navy-600); color: var(--navy-800); }
.c1-pill:has(input:checked) span:hover { background: var(--navy-900); }
.c1-pill:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 999px; }

.c1-hours { background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--r); overflow: hidden; }
.c1-hours__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-block-end: 1px solid var(--steel-100);
}
.c1-hours__row:last-child { border-block-end: 0; }
.c1-hours__day { display: flex; align-items: center; gap: 10px; min-width: 132px; font-size: 15px; font-weight: 600; cursor: pointer; }
.c1-hours__day input { width: 19px; height: 19px; accent-color: var(--navy-800); }
.c1-hours__times { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.c1-hours__times input {
  flex: 1 1 auto; min-width: 0; min-height: 43px; padding: 8px 10px;
  border: 1px solid var(--steel-200); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; background: var(--white);
}
.c1-hours__dash { font-size: 13px; color: var(--steel-600); }
/* Unticked days recede rather than collapse, so the row still reads as a day
   of the week and nothing below it jumps. */
.c1-hours__row:has(input[type="checkbox"]:not(:checked)) .c1-hours__times { opacity: .38; }

/* ==========================================================================
   Section cards — groups related fields inside a card so a long form reads
   as a small number of decisions rather than a wall of inputs.
   ========================================================================== */

.c1-section {
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-radius: var(--r-lg);
  padding: 24px 24px 10px;
  margin-block-end: 14px;
  box-shadow: 0 1px 4px rgb(0 0 0 / .05), 0 4px 12px rgb(0 0 0 / .03);
}
.c1-section__head { margin-block-end: 20px; }
.c1-section__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: var(--navy-900); margin: 0;
}
.c1-section__num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-900); color: #fff;
  font-size: 13px; font-weight: 800;
}
.c1-section__desc { margin: 6px 0 0; font-size: 13.5px; color: var(--steel-600); padding-inline-start: 38px; }
.c1-section__sub { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--navy-900); }

.c1-opt {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--steel-100);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--steel-600);
}

.c1-rule { border: 0; border-top: 1px solid var(--steel-100); margin: 4px -20px 20px; }

/* Remove extra bottom margin from the last element inside a section card */
.c1-section .c1-fs { margin-block-end: 0; }
.c1-section > .c1-hours { margin-block-end: 14px; }
.c1-section .c1-fs { margin-block-start: 6px; }

/* ==========================================================================
   Buttons, alerts, panels
   ========================================================================== */

.c1-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 13px 24px;
  border: 1px solid var(--navy-800); border-radius: var(--r-sm);
  background: var(--white); color: var(--navy-800);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.c1-btn--go {
  width: 100%; min-height: 56px; font-size: 17px;
  background: var(--navy-800); color: #fff;
  border-radius: var(--r); margin-block-start: 14px;
  box-shadow: 0 2px 8px rgb(12 43 68 / .25);
  letter-spacing: -0.01em;
}
.c1-btn--go:hover { background: var(--navy-900); box-shadow: 0 4px 16px rgb(12 43 68 / .3); }
.c1-btn--quiet { border-color: var(--steel-200); color: var(--steel-600); }
.c1-btn--quiet:hover { border-color: var(--steel-400); }
.c1-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.c1-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 24px; }

.c1-alert {
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--steel-200); border-inline-start: 4px solid var(--steel-400);
  border-radius: var(--r-sm); background: var(--white); font-size: 15px;
}
.c1-alert p { margin: 0 0 6px; }
.c1-alert p:last-child, .c1-alert ul:last-child { margin-block-end: 0; }
.c1-alert ul { margin: 0; padding-inline-start: 20px; }
.c1-alert--bad { border-inline-start-color: var(--red); background: var(--red-soft); color: #6E1D06; }
.c1-alert--ok  { border-inline-start-color: var(--green); background: var(--green-soft); color: #10502F; }

.c1-panel {
  margin-block-start: 24px; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--r);
}
.c1-panel .c1-h2 { margin-block-start: 0; }
.c1-list { margin: 0; padding-inline-start: 19px; font-size: 15px; }
.c1-list li { margin-block-end: 9px; }

/* ==========================================================================
   Confirmation
   ========================================================================== */

.c1-done {
  padding: 28px 22px; text-align: center; background: var(--white);
  border: 1px solid var(--steel-200); border-block-start: 4px solid var(--green);
  border-radius: var(--r);
}
.c1-done__tick {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-soft); color: var(--green);
}
.c1-done__tick svg { width: 29px; height: 29px; }
.c1-done__when { margin: 0 0 20px; font-size: 18px; line-height: 1.35; color: var(--steel-600); }
.c1-done__when strong { display: block; font-size: 30px; letter-spacing: -0.03em; color: var(--navy-900); }

.c1-kv {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 20px;
  margin: 0; text-align: start; font-size: 15px;
  padding-block-start: 18px; border-block-start: 1px solid var(--steel-100);
}
.c1-kv dt { color: var(--steel-600); }
.c1-kv dd { margin: 0; font-weight: 700; color: var(--navy-900); }

/* ==========================================================================
   Footer
   ========================================================================== */

.c1-foot { border-block-start: 1px solid var(--steel-200); background: var(--white); padding-block: 26px; }
.c1-foot__in { display: grid; gap: 14px; }
.c1-foot__lead { margin: 0; font-size: 16px; color: var(--steel-900); }
.c1-foot__lead a { color: var(--navy-800); font-weight: 800; text-decoration: none; }
.c1-foot__lead a:hover { text-decoration: underline; }
.c1-foot__hours { margin: 4px 0 0; font-size: 14px; color: var(--steel-600); }
.c1-foot__small { margin: 0; font-size: 13px; color: var(--steel-400); }

/* Honeypot — off-screen, not display:none. Some bots skip hidden fields but
   fill anything still in the layout. Unreachable by keyboard or screen reader. */
.c1-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Back navigation
   ========================================================================== */

.c1-back { margin: 0 0 20px; }
.c1-back a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 600; color: var(--steel-600);
  text-decoration: none; padding: 4px 0;
}
.c1-back a:hover { color: var(--navy-800); }

/* ==========================================================================
   Wider screens
   ========================================================================== */

@media (min-width: 480px) {
  .c1-status { display: inline-flex; }
}

@media (min-width: 680px) {
  .c1-h1 { font-size: 38px; }
  .c1-main { padding-block: 40px 60px; }
  .c1-grid2 { grid-template-columns: 1fr 1fr; }
  .c1-grid3 { grid-template-columns: repeat(3, 1fr); }
  .c1-field--wide { grid-column: 1 / -1; }
  .c1-radios { grid-template-columns: 1fr 1fr; }
  .c1-radios--stack { grid-template-columns: 1fr; }
  .c1-btn--go { width: auto; min-width: 250px; }
  .c1-trust { grid-template-columns: repeat(3, 1fr); }
  .c1-trust li { border-block-start: 2px solid var(--steel-200); }
  .c1-foot__in { grid-template-columns: 1fr auto; align-items: end; }
  .c1-foot__small { text-align: end; }
}

@media (min-width: 900px) {
  .c1-routes { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* Equal-height cards so the two routes read as a genuine pair rather than
     one looking more substantial because its copy happens to be longer. */
  .c1-route { height: 100%; }
  .c1-route__foot { margin-block-start: auto; }
  .c1-h1 { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .c1-route:hover { transform: none; }
  .c1-route:hover .c1-route__go { transform: none; }
}