.official-services-page,
.official-services-entry,
.official-services-quick-button {
  --official-ink: #10213f;
  --official-blue: #173f73;
  --official-blue-strong: #0b3266;
  --official-gold: #d7a43b;
  --official-cream: #f7f2e8;
  --official-paper: #fffdf8;
  --official-line: #d8d0c3;
  --official-muted: #586478;
  --official-green: #08664f;
  --official-red: #922b35;
  --official-focus: #ffbf47;
}

.official-services-page {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0 7rem;
  color: var(--official-ink);
}

.official-services-page *,
.official-services-entry *,
.official-services-quick-button * {
  box-sizing: border-box;
}

.official-services-page button,
.official-services-page input,
.official-services-page a,
.official-services-entry,
.official-services-quick-button {
  font: inherit;
}

.official-services-page [lang="ar"],
.official-services-entry [lang="ar"] {
  direction: rtl;
}

.official-services-page button,
.official-services-page a,
.official-services-entry,
.official-services-quick-button {
  -webkit-tap-highlight-color: transparent;
}

.official-services-page button:focus-visible,
.official-services-page a:focus-visible,
.official-services-page input:focus-visible,
.official-services-entry:focus-visible,
.official-services-quick-button:focus-visible {
  outline: 3px solid var(--official-focus);
  outline-offset: 3px;
}

.official-services-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-block-end: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--official-line);
  border-radius: .5rem;
  background: var(--official-paper);
  color: var(--official-ink);
  font-weight: 800;
  text-decoration: none;
}

.official-services-back > span[lang="ar"] {
  margin-inline-start: .35rem;
}

.official-services-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
  gap: 2rem;
  min-height: 29rem;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid #274e7c;
  border-radius: 1.25rem;
  background: var(--official-blue-strong);
  color: #fff;
  isolation: isolate;
}

.official-services-hero::before,
.official-services-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid #ffffff28;
  border-radius: 50%;
}

.official-services-hero::before {
  inline-size: 25rem;
  block-size: 25rem;
  inset-block-start: -14rem;
  inset-inline-end: -9rem;
}

.official-services-hero::after {
  inline-size: 13rem;
  block-size: 13rem;
  inset-block-end: -8rem;
  inset-inline-start: 35%;
}

.official-services-hero-copy {
  align-self: center;
  max-width: 48rem;
}

.official-services-kicker {
  display: block;
  color: var(--official-gold);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.official-services-hero h1 {
  max-width: 13ch;
  margin: .75rem 0 .25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .92;
}

.official-services-hero h2 {
  margin: .75rem 0 1.5rem;
  color: #f4d28a;
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  line-height: 1.2;
}

.official-services-hero-copy > p {
  max-width: 43rem;
  margin: .65rem 0 0;
  color: #e4ebf3;
  font-size: 1.05rem;
  line-height: 1.65;
}

.official-services-hero-copy > p[lang="ar"] {
  color: #f8e9c7;
}

.official-services-journey {
  align-self: center;
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.official-services-journey li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .125rem .75rem;
  align-items: center;
  min-height: 5rem;
  padding: .9rem 1rem;
  border-block-start: 1px solid #ffffff2e;
}

.official-services-journey li:last-child {
  border-block-end: 1px solid #ffffff2e;
}

.official-services-journey span {
  grid-row: 1 / 3;
  color: var(--official-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
}

.official-services-journey b,
.official-services-journey small {
  display: block;
}

.official-services-journey b {
  font-size: 1.05rem;
}

.official-services-journey small {
  color: #d9e4f0;
}

.official-services-hero > aside {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline: clamp(1.5rem, 5vw, 4rem);
  display: flex;
  gap: .75rem;
  align-items: center;
  padding-block-start: 1rem;
  border-block-start: 1px solid #ffffff2e;
}

.official-services-hero > aside > span {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--official-gold);
  color: var(--official-ink);
  font-weight: 900;
}

.official-services-hero > aside p,
.official-services-hero > aside b,
.official-services-hero > aside small {
  display: block;
  margin: 0;
}

.official-services-hero > aside small {
  margin-block-start: .15rem;
  color: #cbd9e7;
}

.official-services-intro {
  margin-block: 1rem 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--official-line);
  border-inline-start: .45rem solid var(--official-gold);
  border-radius: .75rem;
  background: var(--official-paper);
  box-shadow: 0 1rem 2.25rem #10213f12;
}

.official-services-intro > header,
.official-services-intro > footer {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.official-services-intro h2 {
  margin: .35rem 0 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.2;
}

.official-services-intro > header > p {
  flex: 0 0 auto;
  margin: 0;
  color: var(--official-muted);
  font-size: .85rem;
  font-weight: 800;
}

.official-services-intro-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.official-services-intro-progress li {
  position: relative;
  block-size: .25rem;
  background: #d8dde4;
}

.official-services-intro-progress li span {
  position: absolute;
  overflow: hidden;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
}

.official-services-intro-progress li.complete,
.official-services-intro-progress li.current {
  background: var(--official-blue);
}

.official-services-intro-progress li.current::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  inline-size: .75rem;
  block-size: .75rem;
  content: "";
  border: .2rem solid var(--official-paper);
  border-radius: 50%;
  background: var(--official-gold);
  box-shadow: 0 0 0 1px var(--official-blue);
  transform: translateY(-50%);
}

.official-services-intro-copy {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  min-height: 11rem;
}

.official-services-intro-number {
  color: #c8b079;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.6rem;
  line-height: 1;
}

.official-services-intro-copy h3,
.official-services-intro-copy h4 {
  margin: 0;
  line-height: 1.2;
}

.official-services-intro-copy h3 {
  font-size: 1.45rem;
}

.official-services-intro-copy h4 {
  margin-block-start: .3rem;
  color: var(--official-blue);
  font-size: 1.25rem;
}

.official-services-intro-copy p {
  max-width: 52rem;
  margin: .85rem 0 0;
  color: var(--official-muted);
  line-height: 1.6;
}

.official-services-intro-copy p[lang="ar"] {
  color: #405676;
}

.official-services-intro > footer {
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--official-line);
}

.official-services-intro > footer > div {
  display: flex;
  gap: .5rem;
}

.official-services-intro-reopen {
  display: inline-flex;
  gap: .65rem;
  align-items: center;
  min-height: 2.75rem;
  margin-block: 1rem;
  padding: .55rem .85rem;
  border: 1px solid var(--official-line);
  border-radius: .5rem;
  background: var(--official-paper);
  color: var(--official-ink);
  cursor: pointer;
  font-weight: 800;
}

.official-services-intro-reopen > span:first-child {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--official-blue);
  color: #fff;
}

.official-services-intro-reopen small {
  display: block;
  margin-block-start: .1rem;
  color: var(--official-muted);
}

.official-services-primary,
.official-services-secondary,
.official-services-link-button {
  min-height: 2.75rem;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 850;
}

.official-services-primary {
  padding: .65rem 1rem;
  border: 2px solid var(--official-blue-strong);
  background: var(--official-blue-strong);
  color: #fff;
}

.official-services-secondary {
  padding: .6rem .9rem;
  border: 2px solid var(--official-blue);
  background: #fff;
  color: var(--official-blue);
}

.official-services-link-button {
  padding: .5rem;
  border: 0;
  background: transparent;
  color: var(--official-blue);
  text-decoration: underline;
  text-underline-offset: .2rem;
}

.official-services-primary small,
.official-services-secondary small,
.official-services-link-button small {
  display: block;
  margin-block-start: .1rem;
  color: inherit;
  font-size: .72rem;
}

.official-services-primary[disabled],
.official-services-secondary[disabled] {
  cursor: wait;
  opacity: .68;
}

.official-services-search-panel,
.official-services-results,
.official-services-local-results {
  scroll-margin-top: 6rem;
}

.official-services-search-panel {
  margin-block: 1rem 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--official-line);
  border-radius: 1rem;
  background: var(--official-cream);
}

.official-services-search-heading,
.official-services-results-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-block-end: 1.25rem;
}

.official-services-search-heading > span,
.official-services-results-heading > span,
.official-services-handoffs > header > div > span {
  display: grid;
  place-items: center;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--official-blue);
  border-radius: 50%;
  color: var(--official-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
}

.official-services-search-heading h2,
.official-services-results-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.15;
}

.official-services-search-heading p,
.official-services-results-heading p {
  margin: .25rem 0 0;
  color: var(--official-blue);
  font-size: 1.05rem;
  font-weight: 800;
}

#officialServicesSearchForm label {
  display: block;
  margin-block-end: .35rem;
  color: var(--official-ink);
  font-weight: 900;
}

#officialServicesSearchForm label span {
  color: var(--official-blue);
}

#officialServicesQueryHint {
  margin: 0 0 .65rem;
  color: var(--official-muted);
  font-size: .9rem;
  line-height: 1.45;
}

.official-services-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
}

#officialServicesQuery {
  width: 100%;
  min-height: 3.2rem;
  padding: .7rem .9rem;
  border: 2px solid #7a879a;
  border-radius: .5rem;
  background: #fff;
  color: var(--official-ink);
  font-size: 1rem;
}

#officialServicesQuery:hover {
  border-color: var(--official-blue);
}

#officialServicesQuery[aria-invalid="true"] {
  border-color: var(--official-red);
}

.official-services-form-error {
  margin: .6rem 0 0;
  color: var(--official-red);
  line-height: 1.45;
}

.official-services-location-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--official-line);
}

.official-services-location-choice > p {
  margin: 0;
  color: var(--official-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.official-services-permission {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-block-start: .85rem;
  padding: .75rem;
  border: 1px solid #8794a6;
  border-inline-start: .35rem solid #8794a6;
  background: #f8fafc;
}

.official-services-permission.success {
  border-color: #5d9e89;
  border-inline-start-color: var(--official-green);
  background: #edf8f4;
}

.official-services-permission.unavailable {
  border-color: #b2787e;
  border-inline-start-color: var(--official-red);
  background: #fff5f5;
}

.official-services-permission > span {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--official-ink);
  color: #fff;
  font-weight: 900;
}

.official-services-permission b,
.official-services-permission p {
  display: block;
  margin: 0;
}

.official-services-permission p {
  margin-block-start: .15rem;
  color: var(--official-muted);
  font-size: .85rem;
}

.official-services-results {
  min-height: 16rem;
  margin-block: 1.5rem 2.25rem;
}

.official-services-state {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid #9aa4b1;
  border-inline-start: .4rem solid #68768a;
  border-radius: .5rem;
  background: #f8fafc;
}

.official-services-state + .official-services-local-results {
  margin-block-start: 1rem;
}

.official-services-state.offline {
  border-color: #ad8c5b;
  border-inline-start-color: #8b621d;
  background: #fff8e8;
}

.official-services-state.error {
  border-color: #bb7c84;
  border-inline-start-color: var(--official-red);
  background: #fff5f5;
}

.official-services-state.stale,
.official-services-state.partial {
  border-color: #c59640;
  border-inline-start-color: #956816;
  background: #fff8e8;
}

.official-services-state.success {
  margin-block-end: 1rem;
  border-color: #5d9e89;
  border-inline-start-color: var(--official-green);
  background: #edf8f4;
}

.official-services-state.first-use,
.official-services-state.empty {
  border-style: dashed;
  background: var(--official-paper);
}

.official-services-state-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--official-ink);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.official-services-state h3 {
  margin: .1rem 0 .35rem;
  font-size: 1.15rem;
}

.official-services-state p {
  max-width: 56rem;
  margin: .35rem 0 0;
  color: var(--official-muted);
  line-height: 1.55;
}

.official-services-state p[lang="ar"] {
  color: #405676;
}

.official-services-state .official-services-secondary {
  margin-block-start: .75rem;
}

.official-services-state > button[data-official-handoff-dismiss] {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid #6f857c;
  border-radius: .4rem;
  background: #fff;
  color: var(--official-green);
  cursor: pointer;
  font-size: 1.25rem;
}

.official-services-loading {
  padding: 1.5rem;
  border: 1px solid var(--official-line);
  background: var(--official-paper);
}

.official-services-loading > div {
  display: grid;
  gap: .65rem;
}

.official-services-loading > div span {
  display: block;
  height: 4.5rem;
  background: #e7e9ed;
  animation: official-services-pulse 1.15s ease-in-out infinite alternate;
}

.official-services-loading > div span:nth-child(2) {
  animation-delay: .15s;
}

.official-services-loading > div span:nth-child(3) {
  animation-delay: .3s;
}

.official-services-loading p {
  margin: 1rem 0 0;
  color: var(--official-muted);
  font-weight: 800;
}

@keyframes official-services-pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

.official-services-local-results {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid var(--official-line);
  border-radius: .75rem;
  background: var(--official-paper);
}

.official-services-local-results > header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: end;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--official-line);
}

.official-services-local-results h2 {
  margin: .3rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
}

.official-services-local-results time {
  color: var(--official-muted);
  font-size: .78rem;
  font-weight: 800;
}

.official-services-commune-options {
  margin-block: 1rem;
  padding: .85rem;
  border: 1px solid #b9c5d3;
  background: #f4f7fa;
}

.official-services-commune-options > span {
  display: block;
  margin-block-end: .5rem;
  color: var(--official-muted);
  font-size: .78rem;
  font-weight: 900;
}

.official-services-commune-options > div {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.official-services-commune-options button {
  min-height: 2.75rem;
  padding: .45rem .7rem;
  border: 1px solid var(--official-blue);
  border-radius: .35rem;
  background: #fff;
  color: var(--official-blue);
  cursor: pointer;
  font-weight: 800;
}

.official-services-commune-options button[aria-current="true"] {
  border-color: var(--official-blue-strong);
  background: var(--official-blue-strong);
  color: #fff;
  cursor: default;
}

.official-services-local-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-block-start: 1rem;
}

.official-services-local-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--official-line);
  border-block-start: .25rem solid var(--official-blue);
  background: #fff;
}

.official-services-local-type {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  color: var(--official-blue);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.official-services-local-card h3 {
  margin: .65rem 0;
  font-size: 1.08rem;
  line-height: 1.3;
}

.official-services-address {
  display: flex;
  gap: .45rem;
  margin: 0;
  color: var(--official-muted);
  font-size: .88rem;
  line-height: 1.5;
}

.official-services-address > span {
  flex: 0 0 auto;
  color: var(--official-blue);
}

.official-services-phone {
  align-self: start;
  min-height: 2.75rem;
  margin-block-start: .6rem;
  padding-block: .7rem;
  color: var(--official-blue);
  font-weight: 800;
}

.official-services-local-card > small {
  display: block;
  margin-block: auto .65rem;
  padding-block-start: .8rem;
  color: var(--official-muted);
  font-size: .72rem;
}

.official-services-local-link {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .35rem;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .6rem .75rem;
  border: 2px solid var(--official-blue);
  border-radius: .4rem;
  color: var(--official-blue);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.official-services-local-link small {
  flex-basis: 100%;
  font-size: .66rem;
}

.official-services-local-link > span[lang="ar"] {
  flex-basis: 100%;
}

.official-services-empty-inline {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  margin-block-start: 1rem;
  padding: 1rem;
  border: 1px dashed #8d99a9;
  background: #fafafa;
}

.official-services-empty-inline > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--official-blue);
  color: #fff;
  font-size: 1.25rem;
}

.official-services-empty-inline h3,
.official-services-empty-inline p {
  margin: 0;
}

.official-services-empty-inline p {
  margin-block-start: .4rem;
  color: var(--official-muted);
  line-height: 1.5;
}

.official-services-handoffs {
  margin-block: 2.5rem;
}

.official-services-handoffs > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .45fr);
  gap: 1.5rem;
  align-items: end;
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--official-line);
}

.official-services-handoffs > header > div {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.official-services-handoffs h2 {
  margin: .35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.official-services-handoffs header p {
  margin: 0;
  color: var(--official-muted);
  line-height: 1.5;
}

.official-services-handoff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.official-services-handoff-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-width: 0;
  border: 1px solid var(--official-line);
  border-radius: .65rem;
  background: var(--official-paper);
  box-shadow: 0 .6rem 1.4rem #10213f0b;
}

.official-services-card-index {
  grid-row: 1 / 3;
  padding: 1.1rem .75rem;
  border-inline-end: 1px solid var(--official-line);
  background: var(--official-cream);
  text-align: center;
}

.official-services-card-index > span {
  display: block;
  color: var(--official-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

.official-services-card-index small {
  display: block;
  margin-block-start: .35rem;
  color: var(--official-muted);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.official-services-card-copy {
  padding: 1.1rem 1.1rem .75rem;
}

.official-services-card-copy h3,
.official-services-card-copy h4 {
  margin: 0;
}

.official-services-card-copy h3 {
  font-size: 1.2rem;
  line-height: 1.25;
}

.official-services-card-copy h4 {
  margin-block-start: .2rem;
  color: var(--official-blue);
  font-size: 1rem;
}

.official-services-card-copy > p {
  margin: .65rem 0 0;
  color: var(--official-muted);
  line-height: 1.5;
}

.official-services-card-copy > p[lang="ar"] {
  color: #405676;
}

.official-services-card-copy > aside {
  display: flex;
  gap: .5rem;
  margin-block-start: .75rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--official-line);
}

.official-services-card-copy > aside > span {
  display: grid;
  place-items: center;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--official-blue);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
}

.official-services-card-copy aside p {
  margin: 0;
  color: var(--official-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.official-services-card-copy aside small {
  display: block;
  margin-block-start: .2rem;
  color: #405676;
}

.official-services-handoff-card > footer {
  display: grid;
  gap: .5rem;
  padding: 0 1.1rem 1.1rem;
}

.official-domain {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  color: var(--official-green);
  font-size: .7rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.official-domain > span {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--official-green);
  color: #fff;
  font-size: .65rem;
}

.official-services-card-action,
.official-services-card-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .4rem;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .55rem .7rem;
  border-radius: .4rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.official-services-card-action {
  border: 2px solid var(--official-blue-strong);
  background: var(--official-blue-strong);
  color: #fff;
}

.official-services-card-secondary {
  border: 2px solid var(--official-blue);
  background: #fff;
  color: var(--official-blue);
}

.official-services-card-action > span,
.official-services-card-secondary > span {
  font-size: .82rem;
}

.official-services-card-action > small,
.official-services-card-secondary > small {
  flex-basis: 100%;
  color: inherit;
  font-size: .65rem;
  opacity: .85;
}

.official-services-truth {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1.3rem, 4vw, 2.5rem);
  border: 1px solid #315681;
  border-radius: .75rem;
  background: var(--official-ink);
  color: #fff;
}

.official-services-truth-mark {
  display: grid;
  place-items: center;
  align-self: start;
  width: 5rem;
  height: 5rem;
  border: 1px solid #ffffff55;
  color: var(--official-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.8rem;
}

.official-services-truth h2 {
  margin: .35rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.official-services-truth ul {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.official-services-truth li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .6rem;
}

.official-services-truth li > span {
  color: var(--official-gold);
  font-weight: 900;
}

.official-services-truth li p,
.official-services-truth > div > p {
  margin: 0;
  color: #dce6f0;
  line-height: 1.55;
}

.official-services-truth > div > p[lang="ar"] {
  margin-block-start: 1rem;
  color: #f4dca6;
}

.official-services-truth > footer {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid #ffffff30;
}

.official-services-truth > footer a,
.official-services-truth > footer button {
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px solid #ffffff75;
  border-radius: .35rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.official-services-truth > footer small {
  display: block;
  margin-block-start: .1rem;
  color: #cddbea;
  font-size: .65rem;
}

.official-services-clear-confirm {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-block-start: .25rem;
  padding: 1rem;
  border: 1px solid #f4dca6;
  border-radius: .55rem;
  background: #ffffff0d;
}

.official-services-clear-confirm b,
.official-services-clear-confirm b > span {
  display: block;
}

.official-services-clear-confirm p {
  margin: .35rem 0 0;
  color: #dce6f0;
  line-height: 1.45;
}

.official-services-clear-confirm p[lang="ar"] {
  color: #f4dca6;
}

.official-services-clear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.official-services-clear-actions button {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid #ffffff75;
  border-radius: .35rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.official-services-clear-actions small {
  display: block;
  margin-block-start: .1rem;
}

.official-services-clear-confirm .danger {
  border-color: #ffb6ad;
  background: #7b2019;
}

.official-services-entry {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 7rem;
  padding: 1rem 1.25rem;
  border: 1px solid #315681;
  border-inline-start: .4rem solid var(--official-gold);
  border-radius: .75rem;
  background: var(--official-ink);
  color: #fff;
  cursor: pointer;
  text-align: start;
}

.official-services-entry-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid #ffffff60;
  color: var(--official-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 900;
}

.official-services-entry-copy small,
.official-services-entry-copy b,
.official-services-entry-copy em,
.official-services-entry-copy > span {
  display: block;
}

.official-services-entry-copy > small {
  color: var(--official-gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.official-services-entry-copy b {
  margin-block-start: .25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}

.official-services-entry-copy em {
  margin-block-start: .1rem;
  color: #f3d891;
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
}

.official-services-entry-copy > span {
  margin-block-start: .4rem;
  color: #d4dfeb;
  font-size: .82rem;
  line-height: 1.4;
}

.official-services-entry-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 12rem;
  padding: .75rem .9rem;
  border: 1px solid #ffffff75;
  color: #fff;
  font-weight: 900;
}

.official-services-entry-action small {
  margin-block-start: .15rem;
  color: #f3d891;
}

.official-services-entry-action i {
  align-self: flex-end;
  font-size: 1.25rem;
}

.official-services-entry.compact {
  margin-block: 1rem;
}

.official-services-quick-button {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .65rem;
  border: 1px solid #b99a5e;
  border-radius: .55rem;
  background: #fff9ec;
  color: var(--official-ink);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 900;
}

.official-services-quick-button > .official-france-monogram,
.official-services-entry > .official-france-monogram {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid #b99a5e;
  border-radius: .35rem;
  overflow: hidden;
  background: #102f4a;
  color: #fffdf7;
  font: 700 .95rem/1 Georgia, serif;
  letter-spacing: .025em;
  direction: ltr;
  box-shadow: 0 1px 3px #09223c20;
  padding: 0;
}
.official-services-quick-button b { display:flex; flex-direction:column; align-items:flex-start; line-height:1.35; }
.official-services-quick-button b small { display:block; font-size:.7rem; font-weight:500; line-height:1.55; }
.official-services-quick-button:hover { background:#f1ebdd; color:#102f4a; }
.official-services-quick-button:focus-visible { outline:3px solid #165f53; outline-offset:3px; }
.official-services-hero .official-services-independent { font-size:.85rem; line-height:1.65; padding-block-start:.75rem; border-block-start:1px solid #c5cfd0; }
.official-services-independent > span { display:block; }

body.rtl .official-services-page,
html[dir="rtl"] .official-services-page {
  text-align: start;
}

body.rtl .official-services-back,
html[dir="rtl"] .official-services-back {
  direction: ltr;
}

@media (max-width: 960px) {
  .official-services-hero {
    grid-template-columns: 1fr;
    min-height: 37rem;
    padding-block-end: 6.5rem;
  }

  .official-services-hero-copy {
    align-self: start;
  }

  .official-services-journey {
    grid-template-columns: repeat(3, 1fr);
  }

  .official-services-journey li {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 7rem;
    padding: .75rem;
    border: 1px solid #ffffff2e;
  }

  .official-services-journey li:last-child {
    border-block-end: 1px solid #ffffff2e;
  }

  .official-services-journey span {
    grid-row: auto;
  }

  .official-services-handoffs > header {
    grid-template-columns: 1fr;
  }

  .official-services-entry {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .official-services-entry-action {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .official-services-page {
    width: min(100% - 1rem, 1180px);
    padding-block-start: .5rem;
  }

  .official-services-hero {
    min-height: 39rem;
    border-radius: .75rem;
  }

  .official-services-hero h1 {
    font-size: clamp(2.65rem, 14vw, 4.1rem);
  }

  .official-services-local-grid,
  .official-services-handoff-grid {
    grid-template-columns: 1fr;
  }

  .official-services-search-row {
    grid-template-columns: 1fr;
  }

  .official-services-location-choice {
    grid-template-columns: 1fr;
  }

  .official-services-location-choice .official-services-secondary {
    width: 100%;
  }

  .official-services-truth {
    grid-template-columns: 1fr;
  }

  .official-services-truth > footer {
    grid-column: 1;
  }

  .official-services-clear-confirm {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .official-services-clear-actions {
    justify-content: flex-start;
  }

  .official-services-quick-button b {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }
}

@media (max-width: 560px) {
  .official-services-hero {
    min-height: auto;
    padding: 1.15rem 1rem 6.75rem;
  }

  .official-services-hero h1 {
    max-width: none;
  }

  .official-services-journey {
    grid-template-columns: 1fr;
  }

  .official-services-journey li {
    grid-template-columns: 2.25rem 1fr;
    min-height: 4.35rem;
  }

  .official-services-journey span {
    grid-row: 1 / 3;
  }

  .official-services-hero > aside {
    inset-inline: 1rem;
  }

  .official-services-hero > aside small {
    font-size: .7rem;
  }

  .official-services-intro > header,
  .official-services-intro > footer,
  .official-services-local-results > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .official-services-intro-copy {
    grid-template-columns: 1fr;
  }

  .official-services-intro-number {
    font-size: 2.5rem;
  }

  .official-services-intro > footer > div {
    width: 100%;
  }

  .official-services-intro > footer button {
    flex: 1;
  }

  .official-services-state {
    grid-template-columns: 2.5rem 1fr;
  }

  .official-services-state-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .official-services-state > button[data-official-handoff-dismiss] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .official-services-handoff-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .official-services-entry {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding: .9rem;
  }

  .official-services-entry-mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  .official-services-entry-copy > span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .official-services-loading > div span {
    animation: none;
  }

  .official-services-page *,
  .official-services-entry {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .official-services-hero,
  .official-services-truth,
  .official-services-entry,
  .official-services-card-action {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .official-services-primary,
  .official-services-secondary,
  .official-services-page a {
    border: 2px solid LinkText;
    color: LinkText;
  }

  .official-services-state,
  .official-services-permission {
    border: 2px solid CanvasText;
  }
}