/* Immigration hub and the immigration service pages.
   Boards: "Immigration hub - desktop", "Citizenship service page",
   "Deportation defense service page" and their mobile parts. */

/* ---------------------------------------------------------------------------
   Immigration hero. The board puts the photo on the right at 55% opacity and
   washes it left-to-right into the ink background, with the rooster behind
   the bottom right corner.
   --------------------------------------------------------------------------- */
.ihero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(28px, 3.06vw, 44px) 0 clamp(36px, 3.06vw, 44px);
  color: #fff;
  --h1-max: 88px;  /* the immigration hub board's own headline size */
}
.ihero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 640px;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  opacity: .55;
}
.ihero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 18, 19, 1) 0%, rgba(26, 18, 19, 1) 52%, rgba(26, 18, 19, .55) 70%, rgba(26, 18, 19, .15) 100%);
}
.ihero__mark {
  position: absolute;
  right: 60px;
  bottom: 40px;
  width: 460px;
  height: 460px;
  max-width: none;
  opacity: .35;
  pointer-events: none;
}
.ihero__in { position: relative; display: flex; flex-direction: column; }
/* The hub board is one column and sets 52px between the breadcrumb and the
   eyebrow; the service boards are two columns and set 22px, which the shared
   `.crumb + .ihero__eyebrow` rule in page.css already covers. Written to
   out-rank that rule rather than to fight it with !important. */
.ihero:not(.ihero--service) .ihero__eyebrow { margin-top: clamp(26px, 3.6vw, 52px); }
.ihero h1 { max-width: 820px; }
.ihero .lede { max-width: 600px; margin-top: 20px; color: var(--on-dark-3); }
.ihero__cta {
  margin-top: clamp(22px, 2.2vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The four tiles across the bottom of the hero */
.quicklinks {
  margin-top: clamp(28px, 3.06vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.quicklinks a {
  min-height: 62px;
  padding: 10px 22px;
  border: 1.5px solid #6E3033;
  border-radius: 4px;
  background: rgba(58, 11, 13, .55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.quicklinks a:hover { background: var(--oxblood); border-color: var(--red); color: #fff; }

/* ---------------------------------------------------------------------------
   Licences and affiliations
   --------------------------------------------------------------------------- */
.affil { background: var(--cream); border-bottom: 1px solid var(--border); padding: clamp(26px, 2.8vw, 40px) 0; }
.affil__in { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); flex-wrap: wrap; }
.affil__h {
  width: 220px;
  flex-shrink: 0;
  margin: 0;
  font-family: var(--cond);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--red);
}
/* The board sizes these cells on a four column grid. Only the two confirmed
   memberships are built, so keeping two columns stretched each card to
   double the designed width and left it mostly empty. Four columns gives
   the board's cell width and lets the row simply end early. */
.affil__grid { flex-grow: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.affil__cell {
  min-height: 84px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
}
.affil__cell svg { flex-shrink: 0; }
.affil__cell span { display: flex; flex-direction: column; min-width: 0; }
.affil__cell strong { font-size: 15px; font-weight: 700; }
.affil__cell em { font-style: normal; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Section head with a note or a rating on the right
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Immigration services, six cards
   --------------------------------------------------------------------------- */
.isvc {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.isvc__i {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 2.08vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
/* The board sets each mark in a 56px disc, tinted on the cream card and
   solid red on the maroon one, and shows the first card in its hover state:
   the whole card goes #3A0B0D with white type and a pink Learn more. */
.isvc__ic {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: #F6E1DE; color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
a.isvc__i { transition: background .18s ease, border-color .18s ease, color .18s ease; }
a.isvc__i:hover { background: #3A0B0D; border-color: #3A0B0D; color: #FFF; }
a.isvc__i:hover .isvc__ic { background: var(--red); color: #FFF; }
a.isvc__i:hover h3 { color: #FFF; }
a.isvc__i:hover p { color: var(--on-dark-3); }
a.isvc__i:hover .isvc__more { color: var(--pink); }
a.isvc__i:hover .isvc__more svg { stroke: var(--pink); }
.isvc__i h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--oxblood);
}
.isvc__i p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.isvc__more, .isvc__ask {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  min-height: 24px;
}
.isvc__ask:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Families we have helped
   --------------------------------------------------------------------------- */
.outc { position: relative; overflow: hidden; }
.outc__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .85; }
.outc__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(28px, 4.17vw, 60px);
  align-items: start;
}
.outc__counts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.outc__counts div { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 2px solid var(--red-bright); }
.outc__counts strong { font-family: var(--cond); font-size: clamp(40px, 3.6vw, 52px); font-weight: 700; line-height: 1; color: #fff; }
.outc__counts span { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.outc__note { margin: 20px 0 0; font-size: 13px; color: var(--on-dark-2); }
.outc__lede { margin: 22px 0 0; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--on-dark-3); }
.outc__btn { margin-top: 26px; }
.rev--dark { background: var(--panel); border-color: var(--panel-border); }
.rev--dark .rev__q { color: #fff; }
.rev--dark .rev__by { color: #fff; }
.rev--dark .rev__src { color: var(--on-dark-2); }

/* ---------------------------------------------------------------------------
   Your case, step by step + what to bring
   --------------------------------------------------------------------------- */
/* The board runs the heading and the numbered steps down one column with
   What to bring and the fees card beside them, not the heading in a column
   of its own. Every step carries a rule above it, the first included. */
.howband { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(28px, 4.9vw, 70px); align-items: start; }
.howband__main .isteps { margin-top: 36px; }
.howband__side { display: flex; flex-direction: column; gap: clamp(18px, 1.7vw, 24px); }
.isteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.isteps li {
  display: flex;
  gap: clamp(16px, 1.53vw, 22px);
  padding: 22px 0;
  border-top: 1px solid var(--border-2);
}

.isteps__n {
  flex-shrink: 0;
  width: 64px;
  font-family: var(--cond);
  font-size: clamp(34px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.isteps li > span:last-child { display: flex; flex-direction: column; gap: 6px; }
.isteps strong { font-size: 19px; font-weight: 700; }
.isteps li span span { font-size: 16px; line-height: 1.55; color: var(--body); }

.bring {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 2.08vw, 28px);
}
.bring + .bring { margin-top: 16px; }
.bring h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.bring__script { font-size: clamp(30px, 2.4vw, 36px); margin-top: 2px; }
/* On phones the line sits in this card, so the fit (site.css, .script) also
   takes off the card's 22px padding and border on each side. */
@media (max-width: 560px) {
  .bring__script { font-size: min(30px, calc((100vw - 2 * var(--pad-x) - 46px - 26px) / var(--em, 8))); }
}
.bring ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bring li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.bring li > svg { position: absolute; left: 0; top: 3px; }
.bring--fees p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------------------
   Review row and the USCIS cards
   --------------------------------------------------------------------------- */
.revrow {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.stories__grid--imm { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.uscis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 1.67vw, 24px); }
.uscis__card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 2.5vw, 36px);
}
.uscis__card p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); }
/* The board sets these as a compact row of buttons, the first solid, the
   rest outlined, rather than a stack of full width rows. The links
   themselves are Vale’s: she added the Visa Bulletin, and the city list
   below is hers too, so the board's own shorter list is not restored.
   Wrapping keeps a third button from crowding the pair at tablet width. */
.uscis__links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.uscis__links a {
  min-height: 50px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.uscis__links a:first-child { background: var(--ink); color: #FFF; }
.uscis__links a:first-child svg { stroke: #FFF; }
.uscis__links a:hover { border-color: var(--red); color: var(--red); }
.uscis__links a:first-child:hover { background: var(--red); border-color: var(--red); color: #FFF; }
.uscis__card .area__pills { margin-top: 20px; }

/* The hub board draws this hero as a fixed 790px band with the four tiles
   pinned to its bottom edge, so there is deliberate air between the CTA row
   and the tiles. Reproduced as a min-height on the copy stack plus an auto
   top margin on the tiles, which keeps the band at the board's height and
   still leaves the tiles a floor of clear space if the copy ever runs longer
   than the board's. The service boards are a different, two-column hero. */
@media (min-width: 1181px) {
  .ihero:not(.ihero--service) .ihero__in { min-height: 702px; }
  .ihero:not(.ihero--service) .ihero__cta { margin-bottom: 44px; }
  .ihero:not(.ihero--service) .quicklinks { margin-top: auto; }
}

/* ---------------------------------------------------------------------------
   Tablet and mobile
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .isvc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outc__in, .howband, .uscis { grid-template-columns: minmax(0, 1fr); }
  .revrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihero__photo { width: 46%; }
  .ihero__wash { background: linear-gradient(90deg, rgba(26, 18, 19, 1) 0%, rgba(26, 18, 19, .96) 46%, rgba(26, 18, 19, .5) 72%, rgba(26, 18, 19, .2) 100%); }
  .affil__h { width: 100%; }
}

@media (max-width: 760px) {
  /* The board's mobile immigration pages put the photo as a band behind the
     top of the hero rather than beside the copy. */
  .ihero__photo { width: 100%; height: 300px; opacity: .4; }
  .ihero__wash { background: linear-gradient(180deg, rgba(26, 18, 19, .35) 0%, rgba(26, 18, 19, .9) 58%, rgba(26, 18, 19, 1) 100%); }
  .ihero__mark { width: 320px; height: 320px; right: -110px; bottom: 10px; }
  .ihero__cta { flex-direction: column; align-items: stretch; }
  .ihero__cta .btn { justify-content: center; }
  .isvc, .quicklinks, .revrow, .outc__counts, .stories__grid--imm { grid-template-columns: minmax(0, 1fr); }
  .isteps__n { width: 48px; }
}

/* ---------------------------------------------------------------------------
   Immigration service pages: the hero's consultation card, the path cards,
   the deep-dive block and the "check your case" links on the rules strip.
   --------------------------------------------------------------------------- */
.ihero--service {
  padding: clamp(24px, 2.8vw, 40px) 0 clamp(40px, 4.44vw, 64px);
  /* Each immigration service page carries its board's headline size; this is
     what the boards that do not differ say. */
  --h1-max: 86px;
}
.isvcgrid {
  margin-top: clamp(22px, 2.4vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: clamp(28px, 4.17vw, 60px);
  align-items: start;
}

.consult {
  background: var(--cream);
  border-radius: 8px;
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 110px;
}
.consult__h {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(26px, 2.08vw, 30px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.consult__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.consult .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.consult .field input, .consult .field select, .consult .field textarea {
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: #fff;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.consult .field input, .consult .field select { height: 44px; padding: 0 12px; }
.consult__lang { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.consult__lang legend { padding: 0; font-size: 13px; font-weight: 700; color: var(--text-2); }
.consult__lang label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
.consult__submit { width: 100%; justify-content: center; min-height: 52px; }
.consult__alt { margin: 0; font-size: 14px; color: var(--muted); }
.consult__alt a { font-weight: 700; }
.consult__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* A small pill that names the form or the rule a card refers to */
.badge {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-2);
}
.choicecard__badges { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.pathgrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.pathcard {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.08vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pathcard h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.73vw, 25px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--oxblood);
}
/* The exclusion has to name the badge's current class: renaming it to
   .pathcard__badge dropped it back into this broader rule, which outranks
   the lead card's own colour. */
.pathcard p:not(.pathcard__badge) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
/* The board leads this row with a dark card, sets each mark in a tinted
   disc and prints the form reference as a small caps label rather than a
   pill. */
.pathcard__ic {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: #F6E1DE; color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.pathcard__badge {
  margin: auto 0 0;
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* A card the board draws as a link: the whole card is the target, and its
   label turns red the way the board prints a link label. */
.pathcard--link { color: inherit; text-decoration: none; transition: border-color .15s; }
.pathcard--link:hover { border-color: var(--red); }
.pathcard--link .pathcard__badge { color: var(--red); }
.pathcard--lead.pathcard--link .pathcard__badge { color: var(--pink); }
/* The line under both key-choice cards ("Your notice tells you which court
   has your case"). */
.pathband__closing { margin: clamp(20px, 1.67vw, 24px) 0 0; max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--body); }

.choicegrid {
  margin-top: clamp(20px, 1.67vw, 24px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.choicecard {
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(22px, 2.2vw, 30px);
  color: #fff;
}
/* The board pairs these: a cream card then an ink one, with the labels set
   as small caps at either end of the row rather than as pills. */
.choicecard .badge { background: rgba(255, 255, 255, .12); color: var(--pink); }
.choicecard .choicecard__badges { justify-content: space-between; gap: 12px; }
.choicecard--soft { background: var(--cream-2); color: var(--ink); }
.choicecard--soft h3 { color: var(--ink); }
.choicecard--soft :where(p) { color: var(--body); }
.choicecard--soft .badge { background: rgba(26, 18, 19, .08); color: var(--muted); }
.choicecard h3 {
  margin: 0 0 10px;
  font-family: var(--cond);
  font-size: clamp(24px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
/* :where() drops this to (0,0,1). As a bare descendant selector it was
   (0,1,1) and out-ranked the component classes below, which sit on <p>
   elements too. */
:where(.choicecard) p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-dark-3); }

/* The page-specific deep dive. It keeps the id the menu links to, and any
   further ids sit on their own anchors inside it. */
/* Two shapes live in this section. A band whose heading has sub-items runs
   the prose down the left with those items as cards on the right. A block
   with no sub-items is one of the paired cards, so those are wrapped in
   their own two column row. */
.deep__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 40px); align-items: start; }
.deep__pair + .deepband, .deepband + .deep__pair, .deepband + .deepband { margin-top: clamp(28px, 3.1vw, 44px); }

.deepband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3.3vw, 48px);
  align-items: start;
}
.deepband__head .bodycopy { margin-top: 14px; max-width: 52ch; }
.deepband__cards { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 18px); }

.deepcard {
  background: var(--cream-2);
  border-radius: 8px;
  padding: clamp(22px, 2.2vw, 30px);
}
.deepcard__meta {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.deepcard__fee { font-size: 13px; font-weight: 700; color: var(--muted); }
.deepcard h3 {
  margin: 0 0 8px;
  font-family: var(--cond);
  font-size: clamp(22px, 1.94vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
.deepcard p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--body); }
.deepcard p:last-child { margin-bottom: 0; }

.deepcard--ink { background: #3A0B0D; }
.deepcard--ink h3 { color: #FFF; }
.deepcard--ink p { color: var(--on-dark-3); }
.deepcard--ink .deepcard__fee { color: var(--pink); }
.deepcard--ink .badge { background: rgba(255, 255, 255, .14); color: var(--pink); }
.deepcard--ink a:not(.btn) { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.deep__block { display: flex; flex-direction: column; gap: 12px; background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: clamp(26px, 2.8vw, 40px); }
.deep__block h3 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.deep__block p:not(.eyebrow) { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); }
.deep__act { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.deep__act span { font-size: 15px; line-height: 1.5; }
.deep__block .h-display { margin-bottom: 4px; }
.anchor { display: block; height: 0; scroll-margin-top: 110px; }
.deep { scroll-margin-top: 110px; }

.checkcase {
  margin-top: clamp(24px, 2.5vw, 36px);
  padding-top: clamp(20px, 2.1vw, 28px);
  border-top: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.checkcase__h {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
/* The board sets these as plain underlined links at the end of the row, with
   the fee note holding the left, rather than as a row of outlined buttons. */
.checkcase__note { margin: 0 auto 0 0; max-width: 520px; font-size: 14px; line-height: 1.55; color: var(--on-dark-2); }
.checkcase a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15px;
  font-weight: 700;
}
.checkcase a:hover { color: var(--pink); }

.howcol--fees { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(20px, 2.08vw, 26px); }
.howcol__cta { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.telblock--ink span { color: var(--muted); }
.telblock--ink strong { color: var(--ink); }

.proof__ft { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.proof__rating { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--body); }
.proof__rating strong { font-size: 18px; }
/* The board's "Read client reviews" link after the rating. */
.proof__rating a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 10px; font-weight: 700; color: var(--red); }

@media (max-width: 1180px) {
  .isvcgrid { grid-template-columns: minmax(0, 1fr); }
  .pathgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deep__pair, .deepband { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .choicegrid { grid-template-columns: minmax(0, 1fr); }
  /* Swipe row, as the mobile immigration boards show */
  .pathgrid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    padding-bottom: 6px;
  }
  .pathcard { flex: 0 0 78%; scroll-snap-align: start; }
  .checkcase { flex-direction: column; align-items: stretch; }
  .checkcase__note { margin-right: 0; }
}

/* ---------------------------------------------------------------------------
   Client story tiles. The home page has its own copy of these in home.css,
   which this page does not load - without them the tiles rendered as bare
   500px watermarks. Read off Immigration-Hub.dc.html.
   --------------------------------------------------------------------------- */
.stories__grid--imm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.stories__grid--imm .story {
  position: relative; height: 300px; padding: 22px;
  border-radius: 6px; background: #2A2021; border: 1px solid #3A2E2F;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
}
.stories__grid--imm .gallo {
  position: absolute; right: -50px; top: -40px; width: 240px; height: 240px; opacity: .35;
}
.stories__grid--imm .story__play {
  position: absolute; left: 50%; top: 40%; margin-left: -34px; margin-top: -34px;
  width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--red);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.stories__grid--imm .story__name {
  position: relative; margin: 0;
  font-family: var(--cond); font-size: 24px; font-weight: 700;
  text-transform: uppercase; color: #fff;
}
.stories__grid--imm .story__sub { position: relative; margin: 4px 0 0; font-size: 14px; color: #BFAEA7; }
.stories__grid--imm .story--empty { border-style: dashed; }
.stories__grid--imm .story--empty .story__play { background: transparent; border: 1.5px solid var(--line-dark-2); }
.stories__grid--imm .story--empty .story__name { color: var(--on-dark-2); }

@media (max-width: 900px) {
  .stories__grid--imm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stories__grid--imm .story--empty { display: none; }
  .stories__grid--imm .story { height: 260px; padding: 14px; }
  .stories__grid--imm .story__name { font-size: 18px; }
  .stories__grid--imm .story__sub { display: none; }
}

/* ---------------------------------------------------------------------------
   Dark variants, kept last.

   These carry the same specificity as the base rules they override, so they
   only win on source order. Declared next to their component they lost, and
   the text stayed dark on a dark card.
   --------------------------------------------------------------------------- */
.pathcard--lead { background: #3A0B0D; border-color: #3A0B0D; }
.pathcard--lead .pathcard__ic { background: var(--red); color: #FFF; }
.pathcard--lead h3 { color: #FFF; }
.pathcard--lead p:not(.pathcard__badge) { color: var(--on-dark-3); }
.pathcard--lead .pathcard__badge { color: var(--pink); }

.deep__block--ink { background: var(--ink); border-color: var(--ink); }
.deep__block--ink :where(h2, h3) { color: #FFF; }
.deep__block--ink p:not(.eyebrow) { color: var(--on-dark-3); }
.deep__block--ink .badge { background: rgba(255, 255, 255, .12); color: var(--pink); }
.deep__block--ink .eyebrow { color: var(--pink); }

/* A link inside a dark card has to leave the red: #C8161D on ink reads at
   3.15:1. The pink the boards use for links on dark passes. */
.choicecard:not(.choicecard--soft) :where(p, span, li) a:not(.btn),
.deep__block--ink :where(p, span, li) a:not(.btn),
.howcol--ink :where(p, span, li) a:not(.btn) {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}