/* Existing Alexandria typeface and Nuqta color tokens are retained. */
:root { --ux-anchor-offset: 110px; }
html { scroll-padding-top: var(--ux-anchor-offset); }
:where(main [id]) { scroll-margin-top: 0; }
.article-layout section[id] { scroll-margin-top:16px; }
:where(a,button,summary,input,select,textarea):focus-visible { outline:3px solid var(--royal); outline-offset:4px; }
.contact-band :where(a,button):focus-visible,.site-footer :where(a,button):focus-visible { outline-color:var(--sky); }
.desktop-nav a[aria-current] { color:var(--royal); font-weight:700; }
.desktop-nav a[aria-current]::after { width:100%; }
.button { min-height:48px; line-height:1.65; text-align:center; }
.contact-option > a { min-height:44px; font-size:12px; }
.contact-option small { font-size:11px; }
.contact-option strong { font-size:15px; }
.contact-options--inverse .contact-option small { color:#dce7ff; }
.article-row__meta { font-size:12px; }
.article-row h3 a { display:block; padding-block:8px; }
.round-arrow { min-width:44px; min-height:44px; }
.site-footer li a { display:inline-block; padding-block:7px; }
.footer__legal { color:#bccce3; font-size:12px; line-height:1.9; }
.service-hero .breadcrumbs { color:#e2eaff; font-size:12px; }
.footer__legal a { display:inline-block; padding-block:8px; }

/* A focused introduction and a separate path to the existing self-service tools. */
.ux-home .hero__inner { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); align-items:center; gap:64px; min-height:610px; padding-block:64px 76px; }
.ux-home .hero__content { width:auto; min-width:0; animation:none; }
.ux-home .hero h1 { font-size:clamp(34px,3.8vw,50px); line-height:1.5; letter-spacing:-.045em; }
.ux-home .hero__lead { font-size:16px; line-height:1.95; margin-top:20px; }
.ux-home .hero__actions { margin-top:28px; gap:12px; }
.ux-home .hero__actions .button { min-height:52px; }
.ux-home .hero__lines { opacity:.45; }
.ux-start { position:relative; z-index:2; padding:30px; border:1px solid var(--line-strong); border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(17,35,66,.06); border-top:3px solid var(--sky); }
.ux-start__eyebrow { color:var(--royal); font-size:12px; font-weight:600; margin:0 0 10px; }
.ux-start h2 { font-size:23px; line-height:1.65; margin:0; }
.ux-start__intro { color:var(--muted); font-size:13px; line-height:1.9; margin:10px 0 20px; }
.ux-start__link { display:grid; grid-template-columns:38px minmax(0,1fr) 20px; align-items:center; gap:12px; padding-block:18px; border-top:1px solid var(--line); }
.ux-start__number { color:var(--royal); background:var(--blue-soft); border-radius:50%; width:34px; height:34px; display:grid; place-items:center; font-size:11px; }
.ux-start__link strong { display:block; font-size:14px; line-height:1.7; }
.ux-start__link small { display:block; color:var(--muted); font-size:11px; line-height:1.85; margin-top:4px; }
.ux-start__link > svg { color:var(--royal); width:20px; height:20px; }
.ux-start__link:hover strong { color:var(--royal); }
.ux-start__link:last-child { padding-bottom:0; }
.ux-hero-note { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--muted); font-size:12px; line-height:1.9; margin:18px 0 0; }
.ux-hero-note a { color:var(--royal); text-decoration:underline; text-underline-offset:4px; padding-block:4px; }
.ux-home #services .service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.ux-home #services .service-row { min-height:104px; padding:12px 4px; grid-template-columns:50px minmax(0,1fr) 24px; gap:16px; }
.ux-home #services .service-row h3 { font-size:17px; line-height:1.7; }
.ux-home #services .service-row:hover { padding-inline:10px; }
.ux-section-note { margin:16px 0 0; max-width:620px; color:var(--muted); font-size:14px; line-height:1.9; }

/* Readable long-form content and a table of contents on every screen size. */
.article-hero__meta { font-size:12px; gap:12px 18px; }
.article-hero__inner { padding-bottom:60px; }
.article-hero__inner > p { font-size:16px; line-height:1.95; }
.article-layout { grid-template-columns:240px minmax(0,720px); gap:56px; }
.article-layout .prose,.prose--narrow { font-size:16px; line-height:2.05; }
.article-layout .prose h2 { margin-top:44px; font-size:24px; }
.article-layout aside { display:block; max-height:calc(100dvh - 160px); overflow:auto; }
.ux-toc { border:1px solid var(--line); border-radius:12px; background:var(--blue-soft); }
.ux-toc summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; min-height:52px; padding:12px 16px; color:var(--royal); font-size:13px; font-weight:600; list-style:none; }
.ux-toc summary::-webkit-details-marker { display:none; }
.ux-toc summary::after { content:'+'; font-size:22px; font-weight:400; }
.ux-toc[open] summary::after { content:'−'; }
.article-layout .ux-toc ol { margin:0; padding:0 28px 12px 14px; font-size:12px; line-height:1.85; }
.article-layout .ux-toc li { margin:0; padding-block:3px; }
.ux-toc a { display:block; padding-block:7px; }
.ux-toc a:hover { text-decoration:underline; text-underline-offset:4px; }
.official-sources li,.article-disclaimer { font-size:13px; line-height:1.95; }
.breadcrumbs { line-height:1.9; flex-wrap:wrap; }
.breadcrumbs a { display:inline-block; padding-block:6px; }
.faq-list summary { font-size:15px; line-height:1.9; }
.faq-list details > p { font-size:14px; line-height:2; }

@media (max-width:1020px) {
 .ux-home .hero__inner { gap:32px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
 .ux-home .hero h1 { font-size:36px; }
 .ux-start { padding:24px; }
 .article-layout { gap:32px; }
}
@media (max-width:920px) {
 .article-layout { grid-template-columns:minmax(0,1fr); }
 .article-layout aside { display:block; position:static; max-height:none; padding:0; }
 .article-layout .ux-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
 .ux-home .hero__inner { grid-template-columns:minmax(0,1fr); gap:36px; padding-block:48px 56px; }
 .ux-home .hero__content { max-width:720px; }
 .ux-home .hero h1 { max-width:700px; font-size:40px; }
 .ux-start { max-width:720px; width:100%; }
}
@media (max-width:640px) {
 :root { --ux-anchor-offset:90px; }
 body { padding-bottom:calc(68px + env(safe-area-inset-bottom,0px)); }
 .shell { width:calc(100% - 36px); }
 .ux-home .hero__inner { padding-block:36px 44px; gap:30px; min-height:0; }
 .ux-home .hero h1 { font-size:32px; line-height:1.55; }
 .ux-home .hero__lead { font-size:15px; }
 .ux-home .hero__actions { display:flex; flex-wrap:wrap; gap:10px; }
 .ux-home .hero__actions .button { flex:1 1 145px; padding:10px 12px; font-size:12px; }
 .ux-start { padding:23px 20px; border-radius:14px; }
 .ux-start h2 { font-size:21px; }
 .ux-start__link { padding-block:16px; }
 .ux-home #services .service-list { grid-template-columns:minmax(0,1fr); gap:0; }
 .ux-home #services .service-row { min-height:88px; }
 .ux-home #services .service-row h3 { font-size:16px; }
 .section,.services-section { padding-block:56px; }
 .section-heading { gap:16px; margin-bottom:28px; }
 .article-hero__inner { padding-block:26px 38px; }
 .article-hero h1 { font-size:28px; line-height:1.6; }
 .article-hero__meta { font-size:11px; }
 .article-hero__inner > p { font-size:15px; }
 .breadcrumbs--blue { margin-bottom:28px; }
 .article-layout .ux-toc ol { display:block; }
 .article-layout .prose h2 { font-size:22px; }
 .article-service-link { padding-inline:16px; gap:10px; }
 .article-row { min-height:130px; gap:10px; }
 .article-row h3 { font-size:16px; }
 .article-row__meta { font-size:11px; }
 .mobile-contact { height:auto; min-height:68px; padding-bottom:env(safe-area-inset-bottom,0px); }
 .mobile-contact a { min-height:68px; padding:8px 12px; text-align:center; }
 .footer__legal { padding-bottom:16px; }
}

@media (max-width:380px) { .site-header .brand strong { font-size:16px; } }

/* The original brand tokens are deliberately retained. Load after the base stylesheet. */
.ux-nav { display: none; }

@media (max-width: 1020px) {
  .site-header .desktop-nav { display: none; }
  .site-header .header__inner { position: relative; gap: 12px; }
  .site-header .header__actions { flex: 0 0 auto; }
  .site-header .header__cta { min-height: 44px; }
  .ux-nav {
    position: static;
    display: block;
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--ink);
  }
  .ux-nav__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
  }
  .ux-nav__trigger::-webkit-details-marker { display: none; }
  .ux-nav__trigger::marker { content: ""; }
  .ux-nav__icon { flex: 0 0 auto; }
  .ux-nav[open] > .ux-nav__trigger {
    border-color: var(--royal);
    background: var(--blue-soft);
    color: var(--royal-deep);
  }
  .ux-nav__trigger:hover { border-color: var(--royal); }
  .ux-nav__trigger:focus-visible,
  .ux-nav__panel a:focus-visible {
    outline: 3px solid var(--royal);
    outline-offset: 3px;
  }
  .ux-nav__panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--royal);
    border-radius: 0 0 12px 12px;
    background: var(--paper);
    box-shadow: 0 16px 28px rgba(17, 35, 66, 0.12);
  }
  .ux-nav:not([open]) > .ux-nav__panel { display: none; }
  .ux-nav__panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
  }
  .ux-nav__panel a:hover,
  .ux-nav__panel a[aria-current] {
    background: var(--blue-soft);
    color: var(--royal-deep);
  }
  .ux-nav__panel a[aria-current] { font-weight: 700; }
}

@media (max-width: 640px) {
  .site-header .header__inner { gap: 8px; }
  .site-header .header__cta { padding-inline: 10px; }
  .ux-nav__trigger { gap: 5px; padding-inline: 9px; font-size: 12px; }
  .ux-nav__icon { width: 16px; height: 16px; }
  .ux-nav__panel { grid-template-columns: minmax(0, 1fr); padding: 8px; }
}

@media (max-width: 380px) {
  .site-header .header__inner { gap: 6px; }
  .site-header .header__cta { padding-inline: 9px; }
  .site-header .header__cta svg { display: none; }
  .ux-nav__trigger { padding-inline: 8px; }
}
