/* ==========================================================================
   JDW Consulting — design system

   Direction: these are sovereign statutory programmes, not products, and JDW's
   strongest asset is being named in the Antigua & Barbuda CIU's licensed-agent
   register. So the page reads as a DOCUMENT OF RECORD rather than a luxury
   brochure: hairline rules instead of boxes, engraved national seals instead of
   flag icons, and statutory figures set in mono so fact is visually separable
   from claim.

   Palette is drawn from the real logo — the body text colour IS the wordmark's
   charcoal, and the action colour IS the mark's orange.
   ========================================================================== */

:root {
  /* --- colour ---------------------------------------------------------- */
  --navy:        #11263c;   /* authority: hero, founder, footer only */
  --navy-deep:   #0b1a2b;
  --navy-soft:   #1d3a5c;   /* hover state on navy surfaces */
  --cream:       #faf6ef;   /* the page ground */
  --cream-warm:  #f3ece1;   /* recessed panels */
  --gold:        #b08a46;   /* rules, borders, seals — decorative only */
  --gold-ink:    #7c5d29;   /* gold as TEXT: 5.6:1 cream, 5.2:1 cream-warm (WCAG AA) */
  --gold-soft:   #d8c49a;
  --orange:      #f87f16;   /* the logo's own orange — actions only */
  --orange-ink:  #a95205;   /* orange as TEXT: 5.0:1 cream, 4.6:1 cream-warm (WCAG AA) */
  --charcoal:    #49484d;   /* the logo's wordmark grey — body copy */
  --charcoal-mute: #605f65;   /* 5.4:1 on cream-warm */
  --hairline:    rgba(176, 138, 70, .32);
  --hairline-on-navy: rgba(216, 196, 154, .22);

  /* --- type ------------------------------------------------------------ */
  --display: "Spectral", "Iowan Old Style", Georgia, serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- rhythm ---------------------------------------------------------- */
  --measure: 1180px;
  --measure-narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);
  --radius: 2px;                 /* documents do not have rounded corners */
}
*, *::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 { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* --- type scale -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -.008em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* The eyebrow is the page's structural device: it names the KIND of thing
   that follows, the way a section heading does in a printed report. */
.eyebrow {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after, .eyebrow--center::before {
  content: ""; flex: 0 0 3rem; height: 1px; background: var(--hairline);
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--charcoal);
}

/* Statutory data. Mono because these are legal parameters set by a
   government, not marketing numbers we chose. */
.data { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* --- layout ------------------------------------------------------------ */

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--measure-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--navy { background: var(--navy); color: rgba(250, 246, 239, .8); }
.section--navy h2, .section--navy h3 { color: var(--cream); }
.section--navy .eyebrow { color: var(--gold-soft); }
.section--navy .eyebrow::after, .section--navy .eyebrow::before { background: var(--hairline-on-navy); }
.section--warm { background: var(--cream-warm); }

/* A rule, not a background change, is what separates most sections. Blocks of
   alternating colour are exactly what made the old site feel disjointed. */
.section + .section:not(.section--navy):not(.section--warm) > .wrap { position: relative; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--orange); color: var(--navy-deep); }
.btn--primary:hover { background: #ffa04d; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(250,246,239,.45); }
.btn--ghost:hover { background: var(--cream); color: var(--navy); }
.btn--sm { padding: .7rem 1.2rem; font-size: .7rem; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 246, 239, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: .7rem;
}
.site-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.site-header__logo img { width: clamp(140px, 20vw, 186px); }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--charcoal);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
.nav-toggle { display: none; background: none; border: 0; padding: .55rem; cursor: pointer; color: var(--navy); }
.nav-toggle svg { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 76px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--hairline);
    padding: .5rem var(--gutter) 1.5rem;
    transform: translateY(-130%);
    transition: transform .28s ease;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding-block: .95rem; border-bottom: 1px solid var(--hairline); }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
}

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

.hero { position: relative; background: var(--navy-deep); color: var(--cream); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(11,26,43,.95) 0%, rgba(11,26,43,.86) 42%, rgba(11,26,43,.5) 100%);
}
.hero__inner { position: relative; padding-block: clamp(3.25rem, 11vw, 10.5rem); }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero .lede { font-size: 1.02rem; }
  .hero__actions { margin-top: 1.9rem; gap: .7rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .seal { margin-bottom: 1.6rem; padding: .5rem .9rem .5rem .6rem; }
  .seal__text { font-size: .6rem; letter-spacing: .13em; }
  .seal img { width: 28px; }
}
.hero__body { max-width: 44rem; }
.hero h1 { color: var(--cream); margin-bottom: .55em; }
.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--gold-soft);
}
.hero .lede { color: rgba(250,246,239,.82); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.6rem; }

/* The licensed-agent seal. This is the single credibility fact that separates
   JDW from an unlicensed intermediary, so it sits IN the hero composition
   rather than in a badge strip at the bottom of the page. */
.seal {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  margin-bottom: 2.2rem;
  padding: .6rem 1.15rem .6rem .75rem;
  border: 1px solid var(--hairline-on-navy);
  border-radius: var(--radius);
  background: rgba(176,138,70,.09);
}
.seal:hover { background: rgba(176,138,70,.16); }
.seal img { width: 34px; opacity: .95; }
.seal__text {
  font-family: var(--body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--gold-soft);
}
.seal__text span { display: block; color: rgba(250,246,239,.62); font-weight: 400; letter-spacing: .12em; }

/* --- trust bar --------------------------------------------------------- */

.trustbar { background: var(--navy); border-top: 1px solid var(--hairline-on-navy); }
.trustbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trustbar li {
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250,246,239,.78);
  border-left: 1px solid var(--hairline-on-navy);
}
.trustbar li:first-child { border-left: 0; }
@media (max-width: 780px) {
  .trustbar ul { grid-template-columns: repeat(2, 1fr); }
  .trustbar li:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-on-navy); }
  .trustbar li:nth-child(odd) { border-left: 0; }
}

/* --- the programme register (signature element) ------------------------ */

.register { border-top: 1px solid var(--hairline); }
.entry {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 288px;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
  padding-block: clamp(2.25rem, 4vw, 3.1rem);
  border-bottom: 1px solid var(--hairline);
}
.entry__seal { display: flex; justify-content: center; padding-top: .2rem; }
.entry__seal img { width: 100%; max-width: 108px; }
.entry h3 { margin-bottom: .5rem; }
.entry__name {
  font-family: var(--display);
  letter-spacing: .02em;
}
.entry p { color: var(--charcoal-mute); margin-bottom: 0; }
.entry__facts { list-style: none; margin: 0; padding: 0; }
.entry__facts li {
  padding-block: .62rem;
  border-bottom: 1px dotted var(--hairline);
  font-size: .84rem;
}
.entry__facts li:last-child { border-bottom: 0; }
.entry__facts dt, .entry__label {
  display: block;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--charcoal-mute);
  margin-bottom: .3rem;
}
.entry__value { display: block; font-family: var(--data); font-size: .92rem; color: var(--navy); }
.entry__value--pending {
  font-family: var(--body);
  font-size: .82rem;
  font-style: italic;
  color: var(--charcoal-mute);
}
.entry__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  padding-block: .7rem;      /* 44px touch height, not a 20px text link */
  min-height: 44px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-ink);
  text-decoration: none;
}
.entry__more:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .entry { grid-template-columns: 78px minmax(0, 1fr); }
  .entry__facts-wrap { grid-column: 1 / -1; }
  .entry__seal img { max-width: 68px; }
}

/* --- generic column grids ---------------------------------------------- */

.grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* --- reasons (Why JDW) -------------------------------------------------- */

.reason { padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.reason h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.reason p { font-size: .95rem; color: var(--charcoal-mute); margin: 0; }
.reason__mark {
  font-family: var(--data);
  font-size: .7rem;
  color: var(--gold-ink);
  letter-spacing: .1em;
  display: block;
  margin-bottom: .8rem;
}

/* --- process (a real sequence, so it is numbered) ----------------------- */

.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding-block: 1.6rem; border-top: 1px solid var(--hairline-on-navy); }
.step:last-child { border-bottom: 1px solid var(--hairline-on-navy); }
.step__n { font-family: var(--data); font-size: .95rem; color: var(--gold-soft); padding-top: .28rem; }
.step h3 { font-size: 1.22rem; margin-bottom: .3rem; }
.step p { margin: 0; color: rgba(250,246,239,.72); font-size: .96rem; }

/* --- founder ------------------------------------------------------------ */

.founder__portrait { position: relative; isolation: isolate; }
.founder__portrait img { width: 100%; border-radius: var(--radius); }
.founder__portrait::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold);
  opacity: .5;
  pointer-events: none;
}
.founder blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--cream);
}

/* --- team --------------------------------------------------------------- */

.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: var(--radius); filter: grayscale(1); }
.person h3 { font-size: 1.08rem; margin: 1.1rem 0 .15rem; }
.person p { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 0; }

/* --- faq ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.35rem;
  padding-right: 2.5rem;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.24rem);
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .35rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 1.5rem; margin: 0; max-width: 60ch; color: var(--charcoal-mute); }

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

.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.15rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal-mute);
  margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .95rem 1rem;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.form__note { font-size: .82rem; color: var(--charcoal-mute); }

/* Phone / WhatsApp / email links sit next to the form as an alternative to
   it. On a phone they are the likelier action, so they get a real hit area. */
.contact-list a {
  display: inline-block;
  padding-block: .45rem;
  min-height: 44px;
}
.form-message { margin-bottom: 1.25rem; }
.form-message p {
  margin: 0;
  padding: .95rem 1.15rem;
  border-left: 3px solid var(--gold);
  background: var(--cream-warm);
  font-size: .95rem;
}
.form-message p.is-error { border-left-color: #b4442e; color: #8d3220; }

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

.site-footer { background: var(--navy-deep); color: rgba(250,246,239,.62); font-size: .9rem; }
.site-footer h4, .site-footer .footer-head {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 1.1rem;
}
.site-footer a { color: rgba(250,246,239,.82); text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(2rem,4vw,3rem); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__logo img { width: 176px; margin-bottom: 1.4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .1rem; }
/* Footer links are a real navigation surface on a phone, so they get a
   44px hit area rather than the 19px a bare text link would give. */
.site-footer li a { display: inline-block; padding-block: .62rem; min-height: 44px; }
.site-footer li { color: inherit; }
.social { display: flex; gap: .8rem; margin-top: 1.2rem; }
.social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-on-navy);
  border-radius: var(--radius);
}
.social a:hover { background: rgba(176,138,70,.18); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.disclaimer {
  border-top: 1px solid var(--hairline-on-navy);
  margin-top: clamp(2.5rem,5vw,4rem);
  padding-top: 2rem;
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(250,246,239,.5);
}
.disclaimer strong { color: rgba(250,246,239,.72); font-weight: 600; }
.colophon {
  border-top: 1px solid var(--hairline-on-navy);
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .78rem;
  color: rgba(250,246,239,.62);   /* .42 was 3.8:1 on navy-deep */
}

/* --- whatsapp ------------------------------------------------------------ */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.9rem);
  bottom: clamp(1rem, 3vw, 1.9rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.25rem;
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--hairline-on-navy);
  border-radius: 999px;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(11,26,43,.28);
}
.wa:hover { background: var(--navy-soft); }
.wa svg { width: 19px; height: 19px; fill: #4ac15a; flex: none; }
@media (max-width: 560px) { .wa span { display: none; } .wa { padding: .95rem; } }

/* --- page hero (interior pages) ------------------------------------------ */

.pagehead { background: var(--navy); color: var(--cream); position: relative; overflow: hidden; }
.pagehead__media { position: absolute; inset: 0; opacity: .3; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__inner { position: relative; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.pagehead h1 { color: var(--cream); font-size: clamp(2.1rem, 5vw, 3.5rem); }
.pagehead .lede { color: rgba(250,246,239,.8); max-width: 46rem; }

/* --- prose (interior content) -------------------------------------------- */

.prose h2 { margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; font-size: 1.24rem; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--gold); }
.prose__table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .93rem; }
.prose__table th, .prose__table td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.prose__table th {
  font-family: var(--body);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal-mute);
}
.prose__table td.data { font-family: var(--data); color: var(--navy); white-space: nowrap; }

/* A dated provenance line under any table of statutory figures. Publishing
   government numbers without saying when they were checked is how the old
   site ended up with five different visa counts. */
.sourced {
  font-size: .76rem;
  color: var(--charcoal-mute);
  border-left: 2px solid var(--gold);
  padding-left: .9rem;
  margin-bottom: 2.4em;
}
.sourced a { color: var(--charcoal-mute); }

/* --- utilities ------------------------------------------------------------ */

.center { text-align: center; }
.stack-sm > * + * { margin-top: 1rem; }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 4rem); }
.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--cream);
  padding: .8rem 1.2rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }