/* ==========================================================================
   Cheema Immigration
   Palette derives from the logo: red #ED2524 on white, cool grey neutrals.
   Deliberately cool rather than warm — reads official, not boutique.
   ========================================================================== */

:root {
  --ink:        #16171A;
  --ink-soft:   #5B6068;
  --ink-faint:  #8A9099;
  --red:        #ED2524;   /* brand red, from the logo. Accents and icons. */
  --red-btn:    #E01312;   /* button fills only: white on this clears WCAG AA
                              at 4.9:1, where the brand red sits at 4.29:1
                              and narrowly fails. Visually indistinguishable
                              beside the logo. */
  --red-deep:   #C41B1A;
  --red-wash:   #FEF2F2;
  --paper:      #FFFFFF;
  --mist:       #F4F5F7;
  --rule:       #E2E4E8;

  --wrap: 1120px;
  --gut: 24px;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  --step-4:  2.75rem;
  --step-5:  3.5rem;

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }

img { max-width: 100%; height: auto; display: block; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* --- Eyebrow: small red label. Used to name a section, never decoratively. -- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.eyebrow::after {
  content: ""; height: 2px; width: 40px; background: var(--red); opacity: .35;
}

/* --------------------------------- Header -------------------------------- */
/* Top bar: the two things a hesitant visitor looks for first.
   Centred, full-strength white, and large enough to read at a glance. */
.topbar {
  background: var(--ink);
  color: #fff;
}
.topbar .wrap {
  display: flex; gap: 10px 28px; flex-wrap: wrap;
  align-items: center; justify-content: center;
  min-height: 52px; padding-block: 8px;
}
.topbar a {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  transition: color .15s ease;
}
.topbar a .ico { color: var(--red); }
.topbar a:hover { color: #fff; }
.topbar a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.topbar__sep { width: 1px; height: 20px; background: rgba(255,255,255,.22); }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: #fff;                     /* fallback if blur is unsupported */
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
          backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px;
}
.brand { display: block; flex: none; }
.brand picture { display: block; }
.brand img { width: 176px; }

.nav { display: flex; align-items: center; gap: 30px; }
/* :not(.btn) matters here. `.nav a` outranks `.btn` on specificity, so
   without it the CTA in the header rendered near-black on red, and red on
   red when hovered. */
.nav a:not(.btn) {
  color: var(--ink); text-decoration: none;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.01em;
}
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] { color: var(--red); }
.nav .btn, .nav .btn:hover { color: #fff; }

.navtoggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 4px; padding: 9px 12px; cursor: pointer;
  font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink);
}

/* --------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-block;
  padding: 15px 28px;
  border: 2px solid var(--red-btn);
  border-radius: 3px;
  background: var(--red-btn);
  color: #fff;
  font: inherit; font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; color: var(--red); border-color: var(--red); }

/* --------------------------------- Sections ------------------------------- */
.band { padding: 88px 0; }
.band--mist { background: var(--mist); }
.band--tight { padding: 60px 0; }

.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 62ch; }

/* ---------------------------------- Hero ---------------------------------- */
.hero { padding: 76px 0 124px; }
.hero h1 { max-width: 16ch; }
.hero p { font-size: var(--step-1); color: var(--ink-soft); max-width: 52ch; }

/* Signature element: the starter. The first question a consultant would ask,
   asked in the hero, carrying the answer into the form. */
.starter {
  margin-top: 36px;
  padding: 22px;
  background: var(--mist);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--red);
  border-radius: 4px;
  max-width: 620px;
}
.starter label {
  display: block; font-weight: 700; font-size: var(--step--1);
  margin-bottom: 10px;
}
.starter-row { display: flex; gap: 12px; flex-wrap: wrap; }
.starter select { flex: 1 1 260px; }
.starter .btn { flex: none; }

/* Credential strip. Facts only, each independently checkable. */
.creds {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.creds .wrap {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  padding-block: 20px; align-items: center;
}
.creds span {
  font-size: var(--step--1); font-weight: 600; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.creds span::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--red); border-radius: 50%;
}

/* ---------------------------------- Grids --------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  padding: 28px 28px 60px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .15s ease, transform .15s ease;
}
a.card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 12px 30px -18px rgba(22,23,26,.35); }
.card h3 { font-size: var(--step-1); margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

/* --- Rail: a real sequence. Only used where order carries meaning. -------- */
.rail { list-style: none; margin: 0; padding: 0; }
.rail li {
  position: relative;
  padding: 0 0 34px 34px;
  border-left: 2px solid var(--rule);
}
.rail li:last-child { padding-bottom: 0; border-left-color: transparent; }
.rail li::before {
  content: ""; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; background: var(--red);
  border: 3px solid var(--paper); border-radius: 50%;
}
.band--mist .rail li::before { border-color: var(--mist); }
.rail h3 { font-size: var(--step-1); margin-bottom: 6px; }
.rail p { color: var(--ink-soft); margin: 0; }

/* --------------------------------- Ratings -------------------------------- */
.ratings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 640px; }
.rating {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 26px; background: var(--paper); text-align: center;
}
.rating .score {
  font-size: var(--step-4); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}
.rating .where { font-weight: 700; margin: 10px 0 2px; }
.rating .count { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 14px; }
.rating a { font-size: var(--step--1); font-weight: 700; }

/* ---------------------------------- Forms --------------------------------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 700; font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; }

input, select, textarea {
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper);
  padding: 13px 14px;
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  width: 100%;
}
select { appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2316171A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--red); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Honeypot. Hidden from people, reachable by bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.formnote { font-size: var(--step--1); color: var(--ink-soft); }

.formstatus { padding: 15px 18px; border-radius: 3px; font-weight: 600; display: none; }
.formstatus.is-ok   { display: block; background: var(--red-wash); border-left: 4px solid var(--red); }
.formstatus.is-fail { display: block; background: var(--mist); border-left: 4px solid var(--ink); }

/* --------------------------------- Split ---------------------------------- */
.split { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.split img { border-radius: 4px; }

/* --------------------------------- Contact -------------------------------- */
.contactgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.office { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); }
.office:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.office h3 { font-size: var(--step-1); margin-bottom: 6px; }
.office address { font-style: normal; color: var(--ink-soft); margin-bottom: 8px; }

.directline { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.directline strong { display: block; font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; }
.directline a { font-size: var(--step-1); font-weight: 700; text-decoration: none; }

/* --------------------------------- Service -------------------------------- */
.service { padding: 42px 0; border-top: 1px solid var(--rule); }
.service:first-of-type { border-top: 0; padding-top: 0; }
.service h2 { font-size: var(--step-3); }
.service h3 { font-size: var(--step-1); margin-top: 26px; }
.service p, .service ul { max-width: 68ch; color: var(--ink-soft); }
.service h2 + p { color: var(--ink-soft); }

/* ---------------------------------- CTA ----------------------------------- */
.cta { background: var(--ink); color: #fff; padding: 76px 0; }
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: #C7CBD1; max-width: 54ch; font-size: var(--step-1); }
.cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.cta .btn--ghost:hover { color: #fff; border-color: #fff; }
.ctabtns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* --------------------------------- Footer --------------------------------- */
.foot { background: var(--mist); border-top: 1px solid var(--rule); padding: 60px 0 30px; font-size: var(--step--1); }
.footgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot .footbrand { width: 168px; margin-bottom: 16px; }
.foot h4 { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 600; }
.foot ul a:not(.btn):hover { color: var(--red); }
.foot p { color: var(--ink-soft); }
/* Footer credential: emblem beside the text, one aligned block.
   The full bilingual CICC lockup is unreadable at footer width, so the
   circular mark carries it and the name is set as text. */
.credmini {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--paper);
  border: 1px solid var(--rule); border-left: 3px solid var(--red);
  border-radius: 4px;
}
/* The flex child here is <picture>, not <img>. Without flex:none on the
   picture it shrinks, the img inside follows via max-width, and the emblem
   renders as an ellipse. */
.credmini picture { flex: none; display: block; width: 46px; height: 46px; }
.credmini img { width: 46px; height: 46px; display: block; }
.credmini__org {
  display: block; font-size: 0.72rem; font-weight: 600; line-height: 1.35;
  color: var(--ink-soft); margin-bottom: 4px;
}
.credmini__num {
  display: block; font-size: var(--step-0); font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.footbase {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--ink-soft);
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 960px) {
  :root { --step-4: 2.25rem; --step-5: 2.75rem; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .chips { grid-template-columns: repeat(2, 1fr); }
  .contactgrid { grid-template-columns: 1fr; gap: 44px; }
  .footgrid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split img { max-width: 260px; }
}

@media (max-width: 700px) {
  :root { --step-4: 1.875rem; --step-5: 2.25rem; --gut: 18px; }
  .band { padding: 60px 0; }
  .hero { padding: 48px 0 92px; }
  .cta { padding: 56px 0; }

  .navtoggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 8px 0;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px var(--gut); font-size: var(--step-0); }
  .masthead .wrap { position: relative; }
  .brand img { width: 148px; }

  .grid--3, .grid--2, .row2, .ratings { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr; }
  .starter .btn, .starter select { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------- CICC mark ------------------------------ */

/* Credential card: the mark, the number, and the way to check it, in one
   block rather than three loose pieces. */
.credcard {
  display: grid; grid-template-columns: auto 1fr; gap: 32px;
  align-items: center;
  margin-top: 30px; padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule); border-left: 4px solid var(--red);
  border-radius: 4px;
  max-width: 720px;
}
.credcard__mark {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding-right: 32px; border-right: 1px solid var(--rule);
}
.credcard__mark img { width: 84px; }
.credcard__mark span {
  font-size: 0.7rem; font-weight: 700; line-height: 1.35;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  max-width: 15ch;
}
.credcard__label {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.credcard__num {
  display: block; font-size: var(--step-3); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--red); margin: 4px 0 10px;
}
.credcard__who { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 20px; }
.credcard__hint { font-size: var(--step--1); color: var(--ink-soft); margin: 12px 0 0; }


/* ==========================================================================
   Icons
   Inline SVG on a 24x24 grid, inheriting colour from context.
   ========================================================================== */
.ico { width: 24px; height: 24px; flex: none; display: block; }
.ico--sm { width: 17px; height: 17px; }

.iconplate {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-wash); color: var(--red);
  border-radius: 4px;
  transition: background .18s ease, color .18s ease;
}

/* Card: plate above the title, arrow parked bottom-left, slides on hover */
.card .iconplate { margin-bottom: 18px; }
a.card:hover .iconplate { background: var(--red); color: #fff; }

.cardgo {
  position: absolute; left: 28px; bottom: 24px;
  color: var(--ink-faint);
  transition: color .18s ease, transform .18s ease;
}
a.card:hover .cardgo { color: var(--red); transform: translateX(6px); }

/* Rail and office headings: plate sits inline with the text */
.rail h3, .office h3, .service h2 {
  display: flex; align-items: center; gap: 14px;
}
.rail h3 .iconplate, .office h3 .iconplate { width: 40px; height: 40px; }
.rail h3 .ico, .office h3 .ico { width: 21px; height: 21px; }
.service h2 .iconplate { width: 52px; height: 52px; }
.service h2 .ico { width: 26px; height: 26px; }

/* Direct contact list */
.directline li { display: flex; align-items: center; gap: 16px; }
.directline .iconplate { width: 44px; height: 44px; }

/* Stars above each rating */
.stars { display: flex; justify-content: center; gap: 3px; color: var(--red); margin-bottom: 12px; }
.stars .ico { fill: var(--red); stroke-width: 1; }

/* Service jump chips */
/* Fixed 3x2 grid rather than a flowing pill row, so the six services read
   as a set instead of a ragged list. */
.chips {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 26px;
}
.chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper);
  color: var(--ink); text-decoration: none;
  font-size: var(--step--1); font-weight: 600;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.chip .ico { color: var(--red); }
.chip:hover { border-color: var(--red); color: var(--red); background: var(--red-wash); }

/* ==========================================================================
   Motion
   Two behaviours only: a load sequence in the hero, and a reveal on scroll.
   Both are additive — without JS or with reduced motion, everything is
   simply visible.
   ========================================================================== */
.js .rise, .js .rv {
  opacity: 0;
  transform: translateY(16px);
}
.js .rise {
  animation: rise .62s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--d, 0ms);
}
.js .rv {
  transition: opacity .6s cubic-bezier(.16,1,.3,1) var(--d, 0ms),
              transform .6s cubic-bezier(.16,1,.3,1) var(--d, 0ms);
}
.js .rv.is-in { opacity: 1; transform: none; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* Hero wash: a soft brand-red bloom, barely there. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0;
  top: -280px; right: 4%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(237,37,36,.10), rgba(237,37,36,0) 68%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 2; }

/* Toronto skyline: public-domain silhouette (CC0, OpenClipart via freesvg.org).
   Served as a cached SVG file rather than inlined, so it costs the HTML
   nothing and stays sharp at any size. */
.skyline {
  position: absolute; z-index: 1;
  /* The CN Tower sits 38% across the artwork. Pushing the right edge 10%
     past the container lands the tower at about 73% of the viewport, in the
     open space beside the copy, with only low buildings cropped off the edge. */
  right: -10%; bottom: -1px; left: auto;
  width: 60%; min-width: 640px; height: auto;
  opacity: .13;
  pointer-events: none;
  /* Fades in from the left so it never crowds the headline. A solid
     silhouette reads much stronger than line art, hence the low opacity. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 11%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 11%, #000 26%);
}

/* Masthead gains a shadow once the page has scrolled */
.masthead { transition: box-shadow .2s ease; }
.masthead.is-stuck { box-shadow: 0 8px 24px -18px rgba(22,23,26,.5); }

/* Buttons lift very slightly on press */
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }

@media (max-width: 700px) {
  .service h2 { gap: 12px; }
  .service h2 .iconplate { width: 42px; height: 42px; }
  .service h2 .ico { width: 22px; height: 22px; }
  .rail h3, .office h3 { gap: 11px; }
  .hero::before { width: 380px; height: 380px; top: -160px; right: -140px; }
  /* On a narrow screen the full skyline reads as clutter. Scale it up and
     anchor east so only the tower cluster shows. */
  /* On a phone the whole skyline is clutter. Anchor east and scale up so
     only the tower cluster reads, sitting under the hero copy. */
  /* Shifted so the CN Tower stays on screen when most of the artwork is
     cropped away at phone width. */
  .skyline { width: 130%; min-width: 0; right: -52%; opacity: .10; }
}

/* Anyone who has asked their device to reduce motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .rv { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ==========================================================================
   Services accordion
   Native <details>/<summary>: no JavaScript needed to open a section, works
   with the keyboard, and the text stays in the HTML so it is still indexed.
   ========================================================================== */
.acc {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  margin-bottom: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.acc[open] { border-color: var(--ink-faint); box-shadow: 0 14px 34px -26px rgba(22,23,26,.5); }
.acc:hover { border-color: var(--red); }

.acc summary {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; border-radius: 3px; }

.acc__title { flex: 1; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; }
.acc__chev { color: var(--ink-faint); transition: transform .2s ease, color .16s ease; }
.acc[open] .acc__chev { transform: rotate(180deg); color: var(--red); }
.acc summary:hover .acc__chev { color: var(--red); }
.acc summary .iconplate { width: 46px; height: 46px; }
.acc[open] summary .iconplate { background: var(--red); color: #fff; }

.acc__body { padding: 0 24px 26px 86px; }
.acc__body > p:first-child { margin-top: -4px; }
.acc__body p, .acc__body ul { max-width: 68ch; color: var(--ink-soft); }
.acc__body h3 { font-size: var(--step-1); margin-top: 24px; }
.acc__body h3:first-of-type { margin-top: 20px; }

.accall { margin: 18px 0 26px; }
.linkbtn {
  font: inherit; font-size: var(--step--1); font-weight: 700;
  color: var(--red); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--red-deep); }

@media (max-width: 700px) {
  .acc summary { padding: 16px; gap: 12px; }
  .acc summary .iconplate { width: 38px; height: 38px; }
  .acc summary .iconplate .ico { width: 20px; height: 20px; }
  .acc__title { font-size: var(--step-1); }
  .acc__body { padding: 0 16px 20px; }

  .credcard { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .credcard__mark {
    grid-auto-flow: column; justify-items: start; text-align: left;
    align-items: center; gap: 14px;
    padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .credcard__mark img { width: 56px; }
  .credcard__mark span { max-width: none; }
  .chips { grid-template-columns: 1fr; }

  .topbar .wrap { gap: 6px 18px; }
  .topbar a { font-size: 0.9375rem; }
  .topbar__sep { display: none; }
}