/* Montserrat Complaints Commission — design system Civic, calm and legible. Navy for authority, paper for warmth, brass only for citations. Source Serif 4 for headings; Source Sans 3 for reading. ------------------------------------------------------------------------- */ :root { --navy: #13284a; --navy-2: #0b1a33; --navy-3: #1d3a66; --navy-tint: #e9edf4; --ink: #121722; --text: #2c3342; --muted: #596173; --line: #d9dce2; --line-2: #e9ebef; --paper: #f5f2eb; --paper-2: #ece6d9; --white: #fff; --brass: #8a5a12; --brass-2: #c9973f; --link: #1e4f8f; --sea: #1f6e73; --ok: #276338; --ok-bg: #e8f2ea; --warn-bg: #f8efdc; --err: #a1262a; --err-bg: #fbeceb; --focus: #e8a317; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --wrap: 1200px; --gut: clamp(16px, 4vw, 40px); --r: 4px; --r2: 8px; --band: clamp(56px, 7vw, 104px); --hdr-h: 76px; --shadow: 0 1px 2px rgba(11, 26, 51, .06), 0 8px 24px -12px rgba(11, 26, 51, .18); --c0: #13284a; --c1: #2a7f86; --c2: #b8862b; --c3: #9aa2b1; } /* Base ------------------------------------------------------------------- */ .mcc *, .mcc *::before, .mcc *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 64px); } body.mcc { margin: 0; background: var(--white); color: var(--text); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; } .mcc main { display: block; outline: 0; } body.mcc { overflow-x: clip; overflow-anchor: none; } :where(.mcc) img { max-width: 100%; height: auto; display: block; } :where(.mcc) :is(h1, h2, h3, h4) { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -.008em; text-wrap: balance; } :where(.mcc) p { margin: 0; } :where(.mcc) :is(ul, ol) { margin: 0; padding: 0; } :where(.mcc) a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; } :where(.mcc) a:hover { text-decoration-thickness: 2px; } .mcc :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } :where(.mcc) button { font: inherit; color: inherit; } :where(.mcc) address { font-style: normal; } .mcc ::selection { background: #f1dfb8; color: var(--ink); } .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy); color: #fff !important; padding: 12px 18px; border-radius: var(--r); font-weight: 600; transition: top .15s; } .skip:focus { top: 12px; } .muted { color: var(--muted); } .mcc [hidden] { display: none !important; } .hp { position: absolute; left: -9999px; } .ico { width: 20px; height: 20px; flex: none; } /* Elementor: our sections manage their own spacing */ .mcc .elementor-section, .mcc .e-con.mcc-flush, .mcc .e-con { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; --row-gap: 0; --column-gap: 0; } .mcc .e-con.mcc-flush { --content-width: 100%; --container-max-width: 100%; } .mcc .e-con > .e-con-inner { max-width: none; padding: 0; } .mcc .elementor-widget { width: 100%; } .mcc .elementor-widget:not(:last-child) { margin-bottom: 0; } /* Sticky "On this page" bar must escape its one-widget container to stick across the page */ .mcc .e-con:has(> .elementor-widget-mcc-subnav), .mcc .elementor-widget-mcc-subnav { display: contents; } /* Type helpers ------------------------------------------------------------ */ .cite { font: italic 500 15px/1.4 var(--serif); color: var(--brass); letter-spacing: .005em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .cite::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; opacity: .8; } .kicker { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; line-height: 1.4; color: var(--muted); margin-bottom: 10px; } .kicker span { font-weight: 600; color: var(--sea); } .prose { max-width: 70ch; } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: 26px; line-height: 1.25; margin-top: 1.8em; } .prose h3 { font-size: 21px; line-height: 1.3; margin-top: 1.6em; } .prose h2 + *, .prose h3 + * { margin-top: .6em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--brass); } .prose ol[type="a"] li::marker, .prose ol.alpha li::marker { font-weight: 600; } .prose strong { color: var(--ink); font-weight: 600; } .prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brass-2); font-family: var(--serif); font-size: 20px; color: var(--ink); } .prose--sm { font-size: 16px; } /* Links inside running text keep an underline, so they never rely on colour alone (Elementor removes it) */ .mcc :is(.prose, .qa__a, .text__aside, .article__body, .stmt__src, .fld__h) a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } .mcc :is(.prose, .qa__a, .article__body) a:not([class]) { overflow-wrap: anywhere; } .prose--page { max-width: 760px; } .prose .lead { font-size: 21px; line-height: 1.5; color: var(--ink); } .prose table { border-collapse: collapse; width: 100%; font-size: 16px; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } /* Buttons & links --------------------------------------------------------- */ .btn { --b: var(--navy); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: var(--r); border: 1.5px solid var(--b); background: var(--b); color: #fff !important; font: 600 16.5px/1.2 var(--sans); text-decoration: none !important; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn .ico { width: 18px; height: 18px; transition: transform .2s; } .btn:hover { --b: var(--navy-2); } .btn:hover .ico { transform: translateX(2px); } .btn:active { transform: translateY(1px); } .btn--secondary { background: var(--white); color: var(--navy) !important; border-color: #a9b2c3; } .btn--secondary:hover { border-color: var(--navy); background: var(--navy-tint); } .btn--ghost { background: transparent; border-color: transparent; color: var(--navy) !important; padding-left: 8px; padding-right: 8px; } .btn--ghost:hover { background: transparent; border-color: transparent; text-decoration: underline !important; text-underline-offset: .2em; } .btn--light { background: #fff; border-color: #fff; color: var(--navy) !important; } .btn--light:hover { background: var(--paper); border-color: var(--paper); } .btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff !important; } .btn--ghost-light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; } .btn--sm { min-height: 42px; padding: 8px 14px; font-size: 15px; gap: 8px; } .btn--block { width: 100%; } .btn[disabled] { opacity: .45; cursor: not-allowed; } .tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy) !important; text-decoration: none !important; border: 0; background: none; padding: 4px 0; cursor: pointer; border-bottom: 1.5px solid transparent; } .tlink span { border-bottom: 1.5px solid #b8c0cf; padding-bottom: 1px; transition: border-color .15s; } .tlink:hover span { border-color: var(--navy); } .tlink .ico { width: 18px; height: 18px; transition: transform .2s; } .tlink:hover .ico { transform: translateX(3px); } /* Sections ---------------------------------------------------------------- */ .band { padding: var(--band) 0; position: relative; } .band--tight { padding: clamp(40px, 5vw, 72px) 0; } .band--paper { background: var(--paper); } .band--rule > .wrap { border-top: 1px solid var(--line); padding-top: var(--band); } .band--rule { padding-top: 0; } .band + .band:not(.band--paper):not(.band--rule) { padding-top: 0; } .band--paper + .band--paper { padding-top: 0; } /* The same, across Elementor's one-widget containers */ .mcc .e-con:has(> .elementor-widget > .band:not(.band--paper)) + .e-con > .elementor-widget > .band:not(.band--paper):not(.band--rule), .mcc .e-con:has(> .elementor-widget > .band--paper) + .e-con > .elementor-widget > .band--paper { padding-top: 0; } .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; } .head__text { max-width: 720px; } .head__title { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; } .head__intro { margin-top: 14px; font-size: 19px; color: var(--muted); max-width: 62ch; } .head__link { padding-bottom: 4px; } /* Header ------------------------------------------------------------------ */ .site-header { position: sticky; top: -41px; z-index: 60; } .admin-bar .site-header { top: -9px; } .hdr { background: var(--white); } .hdr__util { background: var(--navy-2); color: #d3d9e4; font-size: 14.5px; } .hdr__util-in { display: flex; justify-content: space-between; align-items: center; min-height: 41px; gap: 24px; } .hdr__util a { color: #e7ebf2; text-decoration: none; } .hdr__util a:hover { color: #fff; text-decoration: underline; } .hdr__util .ico { width: 16px; height: 16px; opacity: .75; } .hdr__hours, .hdr__contact a { display: inline-flex; align-items: center; gap: 8px; } .hdr__contact { list-style: none; display: flex; align-items: center; gap: 26px; } .hdr__utl { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .18); } .hdr__utl + .hdr__utl { padding-left: 0; border: 0; } .hdr__utl a[aria-current] { color: #fff; text-decoration: underline; } .hdr__bar { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); transition: box-shadow .2s; } .is-stuck .hdr__bar { box-shadow: 0 6px 20px -14px rgba(11, 26, 51, .45); } .hdr__bar-in { display: flex; align-items: center; gap: 28px; min-height: var(--hdr-h); } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; margin-right: auto; line-height: 1; } .brand__mark { width: 52px; height: 52px; flex: none; } .brand__text { display: flex; flex-direction: column; padding-left: 12px; border-left: 1px solid var(--line); } .brand__pre { font: 600 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .brand__name { font: 600 22px/1.05 var(--serif); color: var(--navy); letter-spacing: -.01em; white-space: nowrap; } .brand--sm .brand__mark { width: 44px; height: 44px; } .brand--sm .brand__name { font-size: 19px; } .brand--rev .brand__text { border-color: rgba(255, 255, 255, .2); } .brand--rev .brand__pre { color: #a9b4c7; } .brand--rev .brand__name { color: #fff; } .nav__list { list-style: none; display: flex; align-items: center; gap: 2px; } .nav__item { position: relative; } .nav__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0; background: none; cursor: pointer; border-radius: var(--r); font: 600 16.5px/1 var(--sans); color: var(--ink) !important; text-decoration: none !important; position: relative; } .nav__top .ico { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; } .nav__top:hover { background: var(--navy-tint); } .nav__top[aria-expanded="true"] { background: var(--navy-tint); } .nav__top[aria-expanded="true"] .ico { transform: rotate(180deg); } .nav__top[aria-current]::after, .nav__top[data-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -16px; height: 3px; background: var(--navy); } .nav__panel { position: absolute; top: calc(100% + 16px); left: -12px; z-index: 70; width: 640px; display: grid; grid-template-columns: 220px 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); box-shadow: 0 24px 48px -20px rgba(11, 26, 51, .35); overflow: hidden; } .nav__item:last-child .nav__panel, .nav__item:nth-last-child(2) .nav__panel { left: auto; right: -12px; } .nav__panel[hidden] { display: none; } .nav__intro { background: var(--paper); padding: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; color: var(--muted); line-height: 1.5; } .nav__ptitle { font: 600 21px/1.2 var(--serif); color: var(--ink); } .nav__intro .tlink { margin-top: auto; font-size: 15.5px; } .nav__links { list-style: none; padding: 12px; } .nav__links a { display: block; padding: 12px 14px; border-radius: var(--r); text-decoration: none; } .nav__links a:hover { background: var(--navy-tint); } .nav__links a[aria-current] { background: var(--navy-tint); box-shadow: inset 3px 0 0 var(--navy); } .nav__lt { display: block; font-weight: 600; color: var(--ink); font-size: 16.5px; } .nav__ld { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .hdr__cta { min-height: 46px; padding: 10px 18px; } .hdr__cta-s { display: none; } .hdr__menu { display: none; align-items: center; gap: 8px; min-height: 46px; padding: 8px 14px; border: 1.5px solid #a9b2c3; background: #fff; border-radius: var(--r); font-weight: 600; cursor: pointer; color: var(--navy); } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 200; background: rgba(11, 26, 51, .5); display: flex; justify-content: flex-end; } .drawer[hidden] { display: none; } .drawer__in { background: #fff; width: min(420px, 100%); height: 100%; display: flex; flex-direction: column; animation: drawerIn .22s ease-out; } @keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gut); border-bottom: 1px solid var(--line); min-height: 68px; } .drawer__close { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--line); background: #fff; border-radius: var(--r); cursor: pointer; color: var(--ink); } .drawer__body { overflow-y: auto; padding: 20px var(--gut) 32px; display: flex; flex-direction: column; gap: 20px; overscroll-behavior: contain; } .dnav { list-style: none; margin-top: -20px; } .dnav > li { border-bottom: 1px solid var(--line); } .dnav__top { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 2px; border: 0; background: none; font: 600 18px/1.2 var(--sans); color: var(--ink) !important; text-decoration: none !important; cursor: pointer; text-align: left; } .dnav__top .ico { color: var(--muted); transition: transform .2s; } .dnav__top[aria-expanded="true"] .ico { transform: rotate(180deg); } .dnav__sub { list-style: none; padding: 0 0 12px; } .dnav__sub[hidden] { display: none; } .dnav__sub a { display: block; padding: 11px 14px; border-left: 2px solid var(--line); color: var(--text); text-decoration: none; font-size: 17px; } .dnav__sub a[aria-current] { border-color: var(--navy); color: var(--navy); font-weight: 600; background: var(--navy-tint); } .drawer__contact { background: var(--paper); border-radius: var(--r2); padding: 18px; display: grid; gap: 4px; } .drawer__label { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 4px; } .drawer__row { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--ink) !important; text-decoration: none; font-size: 16.5px; } .drawer__row .ico { color: var(--navy); } html.has-drawer { overflow: hidden; } /* Footer ------------------------------------------------------------------ */ .ftr__band { background: var(--paper); border-top: 1px solid var(--paper-2); } .ftr__band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; padding-top: 56px; padding-bottom: 56px; align-items: center; } .ftr__title { font-size: 30px; line-height: 1.15; margin-bottom: 10px; } .ftr__lead p { color: var(--muted); } .ftr__ways { list-style: none; display: grid; grid-template-columns: repeat(3, auto); gap: 12px; } .ftr__ways a { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 18px; background: #fff; border: 1px solid var(--paper-2); border-radius: var(--r2); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .ftr__ways a:hover { border-color: #b9b1a1; box-shadow: var(--shadow); } .ftr__ways .ico { color: var(--navy); margin-top: 2px; } .ftr__wl { display: block; font-size: 14px; color: var(--muted); font-weight: 600; } .ftr__wv { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; } .ftr__ways li:nth-child(2) .ftr__wv { white-space: nowrap; } .ftr__ways li:nth-child(3) .ftr__wv { max-width: 18ch; } .ftr__or { font-weight: 400; color: var(--muted); } .ftr__main { background: var(--navy-2); color: #c5cdda; font-size: 16px; } .ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; } .ftr__about p { margin-top: 18px; max-width: 34ch; line-height: 1.55; } .ftr__hours { display: flex; align-items: center; gap: 10px; color: #e7ebf2; } .ftr__hours .ico { width: 18px; height: 18px; } .ftr__h { font: 600 14px/1 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; color: #8f9bb0 !important; margin-bottom: 18px !important; } .ftr__col ul { list-style: none; display: grid; gap: 10px; } .ftr__col a { color: #e7ebf2; text-decoration: none; } .ftr__col a:hover { color: #fff; text-decoration: underline; } .ftr__act p { margin-bottom: 18px; line-height: 1.55; } .ftr__legal { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: #93a0b5; } .ftr__legal ul { list-style: none; display: flex; gap: 20px; } .ftr__legal a { color: #c5cdda; } /* Home: hero -------------------------------------------------------------- */ .hero { background: var(--paper); border-bottom: 1px solid var(--paper-2); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: stretch; } .hero__text { padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); align-self: center; } .hero__title { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.018em; color: var(--navy-2); max-width: 15ch; } .hero__lead { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 52ch; color: var(--text); } .hero__btns { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; align-items: center; } .hero__note { margin-top: 18px; font-size: 15px; color: var(--muted); } .hero__fig { margin: 0 calc(-1 * var(--gut)) 0 0; position: relative; min-height: 420px; } .mcc .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .hero__fig::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brass-2); z-index: 1; } .hero__fig figcaption { position: absolute; right: var(--gut); bottom: 18px; z-index: 1; background: rgba(11, 26, 51, .72); color: #fff; font-size: 13.5px; padding: 6px 12px; border-radius: 2px; backdrop-filter: blur(4px); } .assure { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #d9d1c0; margin-top: 0; } .assure__item { display: flex; gap: 14px; padding: 26px 24px 30px 0; } .assure__item + .assure__item { padding-left: 24px; border-left: 1px solid #d9d1c0; } .assure__ico { width: 26px; height: 26px; color: var(--brass); margin-top: 2px; } .assure__t { font: 600 19px/1.25 var(--serif); color: var(--ink); } .assure__d { font-size: 15.5px; line-height: 1.5; color: var(--muted); margin-top: 6px; } /* Home hero: full-width photograph ------------------------------------- */ .btn--brass { --b: #c9973f; background: #c9973f; border-color: #c9973f; color: var(--navy-2) !important; } .btn--brass:hover { background: #d9a94f; border-color: #d9a94f; } .hero--full { position: relative; background: var(--navy-2); border: 0; overflow: visible; isolation: isolate; color: #dbe2ec; } .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .mcc .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 26, 51, .94) 0%, rgba(11, 26, 51, .86) 34%, rgba(11, 26, 51, .45) 62%, rgba(11, 26, 51, .2) 100%), linear-gradient(0deg, rgba(11, 26, 51, .55) 0%, rgba(11, 26, 51, 0) 40%); } .hero--full .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 400px); gap: 48px 72px; align-items: center; min-height: min(74vh, 660px); padding-top: clamp(56px, 7vw, 96px); padding-bottom: 136px; } .hero--full .hero__text { padding: 0; } .hero--full .cite { color: #d9b06a; } .hero--full .hero__title { color: #fff; font-size: clamp(42px, 5.4vw, 72px); line-height: 1.02; max-width: 21ch; letter-spacing: -.022em; } .hero--full .hero__lead { color: #d6deea; font-size: clamp(18px, 1.6vw, 21px); max-width: 50ch; } .hero--full .hero__note { color: #aab6ca; } .hero__tasks { background: #fff; color: var(--text); border-radius: var(--r2); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); overflow: hidden; } .hero__tt { font: 600 14px/1.2 var(--sans); letter-spacing: .02em; color: var(--muted); padding: 18px 22px 10px; } .hero__tasks ul { list-style: none; } .hero__tasks li + li { border-top: 1px solid var(--line-2); } .hero__tasks a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 14px 22px; color: var(--ink) !important; text-decoration: none !important; transition: background .15s; } .hero__tasks a:hover { background: var(--navy-tint); } .hero__tasks li:first-child a { background: var(--paper); } .hero__tasks li:first-child a:hover { background: var(--paper-2); } .hero__ti { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); } .hero__tasks li:first-child .hero__ti { background: var(--navy); color: #fff; } .hero__ti .ico { width: 19px; height: 19px; } .hero__tl strong { display: block; font: 600 17px/1.3 var(--sans); } .hero__tl span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; } .hero__tgo { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; } .hero__tasks a:hover .hero__tgo { transform: translateX(3px); color: var(--navy); } .hero__cap { position: absolute; right: var(--gut); bottom: 112px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .8); } .hero__cap .ico { width: 14px; height: 14px; } .hero--full .hero__assure-wrap { position: relative; margin-top: -76px; z-index: 2; } .hero--full .assure { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); box-shadow: 0 18px 40px -24px rgba(11, 26, 51, .35); padding: 0 8px; } .hero--full .assure__item { padding: 24px 22px; } .hero--full .assure__item + .assure__item { border-left: 1px solid var(--line-2); padding-left: 22px; } .hero--full + * .band:first-child, .e-con:has(.hero--full) + .e-con .band { padding-top: clamp(64px, 7vw, 96px); } @media (prefers-reduced-motion: no-preference) { .hero--full .hero__text > * { animation: heroIn .7s cubic-bezier(.2, .7, .2, 1) both; } .hero--full .hero__text > :nth-child(2) { animation-delay: .06s; } .hero--full .hero__text > :nth-child(3) { animation-delay: .14s; } .hero--full .hero__text > :nth-child(4) { animation-delay: .22s; } .hero__tasks { animation: heroIn .7s .3s cubic-bezier(.2, .7, .2, 1) both; } @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } } /* Statement band ---------------------------------------------------------- */ .stmt { background: var(--navy); color: #d6deea; padding: clamp(64px, 8vw, 112px) 0; position: relative; overflow: hidden; } .stmt::before { content: "§"; position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); font: 600 min(52vw, 640px)/1 var(--serif); color: rgba(255, 255, 255, .035); pointer-events: none; } .stmt__fig { margin: 0; max-width: 980px; position: relative; } .stmt .cite { color: #d9b06a; } .stmt__q { margin: 0; } .stmt__q p { font: 500 clamp(28px, 3.4vw, 44px)/1.22 var(--serif); color: #fff; letter-spacing: -.012em; text-wrap: balance; } .stmt__q p::before { content: "“"; color: #c9973f; margin-left: -.42em; padding-right: .04em; } .stmt__q p::after { content: "”"; color: #c9973f; } .stmt__src { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 24px; font-size: 15.5px; color: #aab6ca; } .stmt__src .tlink { color: #fff !important; } .stmt__src .tlink span { border-color: rgba(255, 255, 255, .35); } .stmt__figs { margin: clamp(48px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; position: relative; } .stmt__figs > div { padding: 22px 24px 4px 0; border-top: 2px solid #c9973f; } .stmt__figs > div + div { padding-left: 24px; margin-left: 0; border-left: 1px solid rgba(255, 255, 255, .12); } .stmt__figs dd { margin: 0; font: 600 clamp(36px, 3.6vw, 48px)/1 var(--serif); color: #fff; order: -1; } .stmt__figs > div { display: flex; flex-direction: column; gap: 10px; } .stmt__figs dt { font-size: 15.5px; color: #c5cfdf; line-height: 1.45; max-width: 24ch; } /* Process on navy */ .proc--dark { background: var(--navy-2); color: #c5cfdf; } .proc--dark .head__title { color: #fff; } .proc--dark .head__intro { color: #aab6ca; } .proc--dark .phases__t { color: #fff; } .proc--dark .phases__item p { color: #b7c2d4; } .proc--dark .phases__n { background: #c9973f; color: var(--navy-2); box-shadow: 0 0 0 6px var(--navy-2); } .proc--dark .phases__item::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px); } .proc--dark .tlink { color: #fff !important; } .proc--dark .tlink span { border-color: rgba(255, 255, 255, .35); } /* What we can look into --------------------------------------------------- */ .types__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); } .types__col { padding: 32px 32px 8px 0; } .types__col + .types__col { padding-left: 32px; border-left: 1px solid var(--line); } .types__col .cite { margin-bottom: 12px; } .types__t { font-size: 25px; line-height: 1.2; margin-bottom: 12px; } .types__col > p:not(.cite):not(.types__exl) { color: var(--text); } .types__exl { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } .types__col .tlink { margin-top: 20px; } .types__hint { display: none; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: -4px 0 14px; } .types__hint .ico { width: 16px; height: 16px; } .ticks { list-style: none; display: grid; gap: 8px; } .ticks li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.5; } .ticks li::before { content: ""; position: absolute; left: 4px; top: .28em; width: 6px; height: 12px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .types__not { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px 56px; padding: 32px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--err); border-radius: var(--r); } .band--paper .types__not { background: #fff; } .types__not h3 { font-size: 23px; margin-bottom: 10px; } .types__not-h p { color: var(--muted); font-size: 16.5px; margin-bottom: 14px; } .crosses { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; align-content: start; } .crosses li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.45; } .crosses li::before, .crosses li::after { content: ""; position: absolute; left: 3px; top: .7em; width: 12px; height: 2px; background: var(--err); transform: rotate(45deg); } .crosses li::after { transform: rotate(-45deg); } /* Ways to complain -------------------------------------------------------- */ .ways__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 32px 64px; align-items: start; } .ways__h { font-size: 22px; margin-bottom: 16px; } .ways__include { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: 28px; position: sticky; top: calc(var(--hdr-h) + 24px); } .band--paper .ways__include { border-color: var(--paper-2); } .ways__include > p { color: var(--muted); font-size: 16.5px; margin-bottom: 16px; } .checklist { list-style: none; display: grid; gap: 2px; } .checklist li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 17px; line-height: 1.45; } .checklist li:last-child { border-bottom: 0; } .checklist .ico { color: var(--ok); width: 20px; height: 20px; margin-top: 2px; stroke-width: 2.25; } .methods { list-style: none; display: grid; gap: 12px; } .methods__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); } .band--paper .methods__item { border-color: var(--paper-2); } .methods__item--primary { border: 2px solid var(--navy); box-shadow: var(--shadow); } .methods__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-tint); color: var(--navy); } .methods__item--primary .methods__ico { background: var(--navy); color: #fff; } .methods__t { font: 600 20px/1.25 var(--serif); color: var(--ink); } .methods__d { font-size: 16px; color: var(--muted); margin-top: 4px; line-height: 1.5; } /* Process ----------------------------------------------------------------- */ .phases { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: ph; position: relative; } .phases__item { position: relative; padding: 0 28px 0 0; } .phases__item::before { content: ""; position: absolute; left: 44px; right: 0; top: 21px; height: 2px; background: repeating-linear-gradient(90deg, #b9c2d2 0 6px, transparent 6px 12px); } .phases__item:last-child::before { display: none; } .phases__n { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 600 19px/1 var(--serif); margin-bottom: 20px; box-shadow: 0 0 0 6px var(--white); } .band--paper .phases__n { box-shadow: 0 0 0 6px var(--paper); } .phases__t { font-size: 21px; line-height: 1.25; margin-bottom: 8px; } .phases__item p { font-size: 16.5px; color: var(--muted); line-height: 1.55; } .proc__foot { margin-top: 40px; } .proc__tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 16px 20px; margin-bottom: 36px; background: var(--paper); border-radius: var(--r2); position: sticky; top: var(--hdr-h); z-index: 5; box-shadow: 0 -14px 0 #fff; } .proc__legend { font-size: 15.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .you-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px; background: #fbf1dd; color: #6e4609; font: 600 13px/1.2 var(--sans); vertical-align: 2px; white-space: nowrap; } .you-tag .ico { width: 14px; height: 14px; stroke-width: 2.2; } .switch { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; cursor: pointer; color: var(--ink); } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch__ui { width: 46px; height: 28px; border-radius: 99px; background: #b5bdcb; position: relative; transition: background .2s; flex: none; } .switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .switch input:checked + .switch__ui { background: var(--navy); } .switch input:checked + .switch__ui::after { transform: translateX(18px); } .switch input:focus-visible + .switch__ui { outline: 3px solid var(--focus); outline-offset: 2px; } .proc__phase { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 56px; padding: 40px 0; border-top: 1px solid var(--line); } .proc__phase:first-child { border-top: 2px solid var(--navy); } .proc__ph { position: sticky; top: calc(var(--hdr-h) + 104px); align-self: start; } .proc__phn { font-size: 14px; font-weight: 600; color: var(--brass); margin-bottom: 8px; } .proc__ph h3 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; } .proc__ph p:last-child { color: var(--muted); font-size: 16.5px; } .steps { list-style: none; display: grid; gap: 0; position: relative; } .steps__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; position: relative; padding-bottom: 28px; transition: opacity .25s; } .steps__item:last-child { padding-bottom: 0; } .steps__item::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); } .steps__item:last-child::before { display: none; } .steps__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--navy); color: var(--navy); background: #fff; font: 600 17px/1 var(--serif); position: relative; z-index: 1; } .steps__item.is-you .steps__n { background: var(--navy); color: #fff; } .steps__body { padding-top: 8px; } .steps__t { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.45; } .steps__d { margin-top: 6px; color: var(--text); font-size: 17px; } .steps__branch { margin-top: 12px; display: inline-flex; gap: 10px; align-items: flex-start; padding: 10px 14px; background: var(--paper); border-radius: var(--r); font-size: 15.5px; color: var(--ink); } .steps__branch .ico { width: 18px; height: 18px; color: var(--brass); margin-top: 2px; } .proc--only-you .steps__item:not(.is-you) { opacity: .28; } .proc--only-you .proc__phase:not(:has(.is-you)) { opacity: .4; } /* News -------------------------------------------------------------------- */ .upd__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border-top: 2px solid var(--navy); } .upd__lead { padding: 32px 48px 8px 0; border-right: 1px solid var(--line); } .upd__lt { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.18; margin-bottom: 16px; } .upd__lt a, .upd__t a, .news__t a, .more__t a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s; } .upd__lt a:hover, .upd__t a:hover, .news__t a:hover, .more__t a:hover { background-size: 100% 1.5px; } .upd__lead > p:not(.kicker) { color: var(--text); margin-bottom: 20px; max-width: 58ch; } .upd__list { list-style: none; } .upd__list li { border-bottom: 1px solid var(--line); } .upd__item { padding: 24px 0 24px 40px; } .upd__t { font-size: 20px; line-height: 1.3; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 15.5px; cursor: pointer; color: var(--ink); } .chip:hover { border-color: var(--navy); } .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; } .chip__n { font-size: 13px; padding: 1px 8px; border-radius: 99px; background: var(--navy-tint); color: var(--navy); } .chip[aria-pressed="true"] .chip__n { background: rgba(255, 255, 255, .18); color: #fff; } .news__list { list-style: none; border-top: 2px solid var(--navy); } .news__item { border-bottom: 1px solid var(--line); } .news__item[hidden] { display: none; } .news__item article { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 32px; padding: 32px 0; align-items: start; position: relative; } .news__date { text-align: center; padding: 10px 0 12px; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 0 0 var(--r) var(--r); background: #fff; } .news__d { display: block; font: 600 34px/1 var(--serif); color: var(--navy); } .news__my { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; font-weight: 600; } .news__t { font-size: 24px; line-height: 1.25; margin-bottom: 10px; } .news__item--lead .news__t { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; } .news__body > p:not(.kicker) { color: var(--text); max-width: 68ch; } .news__go { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--navy); transition: background .15s, color .15s; } .news__item article:hover .news__go { background: var(--navy); color: #fff; border-color: var(--navy); } .news__t a::after { content: ""; position: absolute; inset: 0; } /* Page header ------------------------------------------------------------- */ .phdr { padding: 28px 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); } .phdr--paper { background: var(--paper); border-color: var(--paper-2); } .phdr--navy { background: var(--navy); border: 0; color: #dfe5ee; } .phdr--navy .phdr__title { color: #fff; } .phdr--navy .phdr__lead { color: #d3dbe7; } .phdr--navy .cite { color: var(--brass-2); } .phdr--navy .crumbs a { color: #c5cfdf; } .phdr--navy .crumbs li::after { color: #7f8ea8; } .phdr--navy .crumbs [aria-current] { color: #fff; } .phdr--article { border: 0; padding-bottom: 8px; } .phdr--article .phdr__title { max-width: 26ch; font-size: clamp(32px, 3.8vw, 48px); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 15px; margin-bottom: clamp(28px, 4vw, 48px); } .crumbs li { display: inline-flex; align-items: center; } .crumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: #a3abb9; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { text-decoration: underline; color: var(--link); } .crumbs [aria-current] { color: var(--ink); font-weight: 600; } .phdr__in--aside { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px 72px; align-items: end; } .phdr__in--narrow { max-width: 860px; } .phdr__title { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.016em; max-width: 20ch; color: var(--navy-2); } .phdr__lead { margin-top: 20px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--text); max-width: 62ch; } .phdr__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .phdr__facts { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--navy); } .phdr--navy .phdr__facts { border-color: var(--brass-2); } .phdr__facts > div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); } .phdr--navy .phdr__facts > div { border-color: rgba(255, 255, 255, .16); } .phdr__facts dt { color: var(--muted); font-size: 15.5px; } .phdr--navy .phdr__facts dt { color: #aab6ca; } .phdr__facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; font-size: 16.5px; } .phdr--navy .phdr__facts dd { color: #fff; } /* On this page */ .subnav { position: sticky; top: var(--hdr-h); z-index: 40; background: rgba(255, 255, 255, .97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .admin-bar .subnav { top: calc(var(--hdr-h) + 32px); } .subnav__in { display: flex; align-items: center; gap: 24px; min-height: 58px; } .subnav__l { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; } .subnav ul { list-style: none; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 24px; } .subnav ul::-webkit-scrollbar { display: none; } .subnav a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 99px; text-decoration: none; color: var(--text); font-size: 15.5px; font-weight: 600; } .subnav a:hover { background: var(--navy-tint); } .subnav a.is-active { background: var(--navy); color: #fff; } /* Text section ------------------------------------------------------------ */ .text__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px 72px; } .text--split .text__head { position: sticky; top: calc(var(--hdr-h) + 84px); align-self: start; } .text__title { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; } .text__body { font-size: 18px; } .text__grid:has(.text__aside) { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 300px); gap: 20px 56px; } .text--stack .text__grid { grid-template-columns: minmax(0, 1fr); } .text--stack .text__grid:has(.text__aside) { grid-template-columns: minmax(0, 1fr) 320px; } .text--stack .text__head { grid-column: 1 / -1; } .text__aside { background: var(--paper); border-radius: var(--r2); padding: 24px; align-self: start; border-top: 3px solid var(--brass-2); } .band--paper .text__aside { background: #fff; } .text__aside--plain { border-top: 0; } .text__ah { font-size: 19px; margin-bottom: 10px; } /* Values ------------------------------------------------------------------ */ .values__grid { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--navy); } .values__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .values__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .values__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .values__item { padding: 28px 28px 8px 0; } .values__item + .values__item { padding-left: 28px; border-left: 1px solid var(--line); } .values__grid--2 .values__item:nth-child(2n+1), .values__grid--3 .values__item:nth-child(3n+1) { padding-left: 0; border-left: 0; } .values__grid--2 .values__item:nth-child(n+3), .values__grid--3 .values__item:nth-child(n+4) { border-top: 1px solid var(--line); margin-top: 20px; } .values__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); margin-bottom: 18px; } .band--paper .values__ico { background: #fff; } .values__t { font-size: 22px; line-height: 1.2; margin-bottom: 10px; } .values__item p { font-size: 16.5px; color: var(--text); line-height: 1.55; } /* Facts ------------------------------------------------------------------- */ .facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0; border-top: 2px solid var(--navy); } .facts__item { padding: 24px 28px 24px 0; border-bottom: 1px solid var(--line); } .facts__item + .facts__item { padding-left: 28px; border-left: 1px solid var(--line); } .facts__item dt { font-size: 15px; color: var(--muted); font-weight: 600; } .facts__v { margin: 8px 0 0; font: 600 30px/1.1 var(--serif); color: var(--navy); } .facts__n { margin: 8px 0 0; font-size: 15.5px; color: var(--text); line-height: 1.5; } .facts__foot { margin-top: 32px; } /* Points ------------------------------------------------------------------ */ .points__list { list-style: none; border-top: 2px solid var(--navy); } .points--numbered .points__list { counter-reset: pt; } .points__item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .points__t { font: 600 20px/1.3 var(--serif); color: var(--ink); margin-bottom: 4px; } .points__d { font-size: 17px; } .points__ico { color: var(--ok); width: 22px; height: 22px; margin-top: 3px; stroke-width: 2.25; } .points--numbered .points__item::before { counter-increment: pt; content: counter(pt); flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 600 16px/1 var(--serif); } .points--grid .points__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .points--grid .points__item { padding: 22px 0; } .points--grid .points__d { font-size: 17.5px; color: var(--ink); line-height: 1.5; } .points--dyk .points__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; } .points--dyk .points__item { padding: 24px 26px; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--r2); background: #fff; } .points--dyk .points__d { font: 400 19px/1.5 var(--serif); color: var(--ink); } .points--dyk .points__d::before { content: "Did you know\2026"; display: block; font: italic 500 15px/1.4 var(--serif); color: var(--brass); margin-bottom: 8px; } /* Statute ----------------------------------------------------------------- */ .statute__fig { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 900px; } .statute__q { margin: 0; padding: clamp(28px, 4vw, 48px); background: #fffdf8; border: 1px solid #e3dccb; border-left: 6px solid var(--brass-2); font: 400 19px/1.65 var(--serif); color: var(--ink); position: relative; } .statute__q::before { content: "§"; position: absolute; right: 24px; top: 8px; font: 600 80px/1 var(--serif); color: #efe6d1; } .statute__h { font-weight: 600; font-size: 21px; margin-bottom: 14px; color: var(--navy); } .statute__q p + p { margin-top: .8em; } .statute__q dl { margin: .8em 0 0; } .statute__q dt { font-weight: 600; } .statute__q dd { margin: .2em 0 .7em 1.4em; } .statute__src { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 16px 4px 0; font-size: 15.5px; color: var(--muted); } /* Timeline ---------------------------------------------------------------- */ .tl__list { list-style: none; position: relative; } .tl__item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; position: relative; padding-bottom: 36px; } .tl__item::before { content: ""; position: absolute; left: 187px; top: 10px; bottom: -10px; width: 2px; background: var(--line); } .tl__item:last-child::before { display: none; } .tl__item::after { content: ""; position: absolute; left: 181px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); } .tl__date { font: 600 18px/1.3 var(--serif); color: var(--navy); text-align: right; padding-right: 8px; } .tl__body { padding-left: 28px; } .tl__t { font-size: 21px; line-height: 1.3; margin-bottom: 6px; } .tl__body > p:not(.cite) { color: var(--text); font-size: 17px; } .tl__body .cite { margin: 10px 0 0; font-size: 14px; } /* Index ------------------------------------------------------------------- */ .idx__list { list-style: none; border-top: 2px solid var(--navy); } .idx__item { border-bottom: 1px solid var(--line); } .idx__a { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "m go" "t go" "d go"; column-gap: 24px; padding: 26px 0; text-decoration: none !important; color: inherit !important; align-items: center; } .idx__m { grid-area: m; font-size: 14px; color: var(--brass); font-weight: 600; margin-bottom: 4px; } .idx__t { grid-area: t; font: 600 23px/1.25 var(--serif); color: var(--ink); } .idx__d { grid-area: d; color: var(--muted); margin-top: 6px; font-size: 16.5px; max-width: 70ch; } .idx__go { grid-area: go; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--navy); transition: all .15s; } .idx__a:hover .idx__t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; } .idx__a:hover .idx__go { background: var(--navy); color: #fff; border-color: var(--navy); } .idx--tiles .idx__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; border: 0; } .idx--tiles .idx__item { border: 1px solid var(--line); border-radius: var(--r2); background: #fff; transition: border-color .15s, box-shadow .15s; } .idx--tiles .idx__item:hover { border-color: #a9b2c3; box-shadow: var(--shadow); } .idx--tiles .idx__a { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; height: 100%; } .idx--tiles .idx__d { margin-bottom: 20px; } .idx--tiles .idx__go { margin-top: auto; width: 40px; height: 40px; } .idx--tiles .idx__t { font-size: 22px; } /* Callout ----------------------------------------------------------------- */ .callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r2); } .callout--navy { background: var(--navy); color: #d6deea; background-image: linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, .04) 62%); } .callout--navy .callout__t { color: #fff; } .callout--paper { background: var(--paper); border: 1px solid var(--paper-2); } .callout__t { font-size: clamp(25px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 8px; } .callout__text p { max-width: 60ch; } .callout__btns { display: flex; flex-wrap: wrap; gap: 12px; } /* People ------------------------------------------------------------------ */ .ppl__full { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px 56px; padding: 44px 0; border-top: 1px solid var(--line); } .ppl__full:first-of-type { border-top: 2px solid var(--navy); } .ppl__ph { background: var(--paper-2); overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; display: grid; place-items: center; } .mcc .ppl__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .ppl__ph--lg { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); } .ppl__ini { font: 600 44px/1 var(--serif); color: var(--navy); } .ppl__r { font-size: 14.5px; font-weight: 600; color: var(--brass); letter-spacing: .02em; } .ppl__n { font: 600 28px/1.15 var(--serif); color: var(--ink); margin: 6px 0 12px; } .ppl__s { font-size: 19px; color: var(--ink); line-height: 1.5; margin-bottom: 18px; font-family: var(--serif); } .ppl__text { color: var(--text); } .ppl__text.is-clamped { max-height: 14.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .ppl__more { margin-top: 12px; } .ppl__row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .ppl__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; } .ppl__card .ppl__ph { aspect-ratio: 1; border-radius: 50%; } .ppl__card .ppl__n { font-size: 21px; margin: 4px 0 6px; } .ppl__card .ppl__s { font-size: 15.5px; font-family: var(--sans); color: var(--muted); margin: 0; } .ppl__card .ppl__ini { font-size: 30px; } .ppl__roll { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 2px solid var(--navy); } .ppl__roll li { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); } .ppl__roll .ppl__n { font-size: 20px; margin: 0 0 4px; } .ppl__roll .ppl__r { font-size: 15px; color: var(--text); font-weight: 400; letter-spacing: 0; } .ppl__ten { font-size: 14.5px; color: var(--muted); margin-top: 6px; } /* Documents --------------------------------------------------------------- */ .docs__group + .docs__group { margin-top: 40px; } .docs__gh { font-size: 21px; margin-bottom: 12px; } .docs__list { list-style: none; border-top: 2px solid var(--navy); } .docs__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); } .docs__type { width: 48px; height: 60px; display: grid; place-items: end center; padding-bottom: 8px; border: 1.5px solid #b9c2d2; border-radius: 3px 14px 3px 3px; font: 700 11.5px/1 var(--sans); letter-spacing: .06em; color: var(--navy); background: #fff linear-gradient(225deg, var(--paper-2) 12px, transparent 12px); } .docs__type--lg { width: 64px; height: 80px; font-size: 13px; padding-bottom: 12px; } .docs__t { font: 600 20px/1.3 var(--serif); color: var(--ink); } .docs__t a { color: inherit; text-decoration: none; } .docs__t a:hover { text-decoration: underline; } .docs__d { font-size: 16px; color: var(--text); margin-top: 4px; max-width: 70ch; } .docs__m { font-size: 14.5px; color: var(--muted); margin-top: 6px; } .docpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px 64px; align-items: start; } .docpage__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 24px; align-items: center; padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--r2); background: #fff; box-shadow: var(--shadow); } .docpage__t { font: 600 23px/1.25 var(--serif); color: var(--ink); } .docpage__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; } .docpage__body { margin-top: 36px; } .docpage__toc { background: var(--paper); border-radius: var(--r2); padding: 28px; position: sticky; top: calc(var(--hdr-h) + 24px); } .docpage__th { font-size: 20px; margin-bottom: 14px; } .toc { list-style: none; counter-reset: toc; } .toc li { counter-increment: toc; display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--paper-2); font-size: 16px; line-height: 1.4; } .toc li::before { content: counter(toc); font: 600 15px/1.4 var(--serif); color: var(--brass); grid-row: span 2; } .toc__t { color: var(--ink); font-weight: 600; } .toc__d { color: var(--muted); font-size: 14.5px; margin-top: 2px; } .viewer { margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--paper); } .viewer__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); font-size: 15px; } .viewer__bar p { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ink); } .viewer__frame { height: 180px; display: grid; place-items: center; transition: height .3s; } .viewer.is-loaded .viewer__frame { height: min(80vh, 860px); } .viewer__frame iframe { width: 100%; height: 100%; border: 0; background: #fff; } /* Questions --------------------------------------------------------------- */ .faq__wrap--groups, .faq__wrap:has(.faq__side) { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px 64px; align-items: start; } .faq__side { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; } .faq__search label { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink); margin-bottom: 8px; } .field-ico { position: relative; } .field-ico .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .field-ico input { padding-left: 44px !important; } .faq__count { font-size: 14.5px; color: var(--muted); margin-top: 8px; min-height: 1.4em; } .faq__toc ul { list-style: none; border-left: 2px solid var(--line); } .faq__toc a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text); text-decoration: none; font-size: 16px; } .faq__toc a span { color: var(--muted); font-size: 14px; } .faq__toc a:hover, .faq__toc a.is-active { border-color: var(--navy); color: var(--navy); font-weight: 600; } .faq__group + .faq__group { margin-top: 44px; } .faq__group[hidden] { display: none; } .faq__gh { font-size: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); } .qa { border-bottom: 1px solid var(--line); } .qa[hidden] { display: none; } .qa summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .qa summary::-webkit-details-marker { display: none; } .qa__q { font: 600 19.5px/1.35 var(--serif); color: var(--ink); } .qa summary:hover .qa__q { color: var(--navy); } .qa__i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--navy); transition: transform .2s, background .2s; } .qa__i .ico { width: 18px; height: 18px; } .qa[open] .qa__i { transform: rotate(45deg); background: var(--navy); color: #fff; border-color: var(--navy); } .qa__a { padding: 0 56px 24px 0; font-size: 17.5px; } .qa mark { background: #f6e4b8; color: inherit; padding: 0 2px; border-radius: 2px; } /* Statistics -------------------------------------------------------------- */ .stats__kpis { margin: 0 0 48px; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); border-top: 2px solid var(--navy); } .stats__kpis > div { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line); } .stats__kpis > div + div { padding-left: 20px; border-left: 1px solid var(--line); } .stats__kpis dt { font-size: 14.5px; font-weight: 600; color: var(--muted); } .stats__kpis dd { margin: 0; } .stats__kpis dd:nth-of-type(1) { font: 600 40px/1.1 var(--serif); color: var(--navy); margin-top: 6px; } .stats__kpis > div:first-child dd:nth-of-type(1) { font-size: 52px; } .stats__kn { font-size: 14px; color: var(--muted); margin-top: 4px !important; } .stats__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px 56px; margin-bottom: 56px; } .chart, .outc { margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; } .chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-bottom: 28px; } .chart__t { font: 600 19px/1.3 var(--serif); color: var(--ink); display: block; } .outc .chart__t { margin-bottom: 22px; } .chart__key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); } .chart__key span { display: inline-flex; align-items: center; gap: 6px; } .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; } .sw--0 { background: var(--c0); } .sw--1 { background: var(--c1); } .sw--2 { background: var(--c2); } .sw--3 { background: var(--c3); } .chart__plot { position: relative; height: 280px; margin-left: 28px; } .chart__grid { position: absolute; inset: 0 0 28px 0; display: flex; flex-direction: column; justify-content: space-between; } .chart__grid span { border-top: 1px solid var(--line-2); position: relative; height: 0; } .chart__grid span:last-child { border-top: 1.5px solid #9aa2b1; } .chart__grid span::before { content: attr(data-v); position: absolute; left: -28px; top: -9px; font-size: 12.5px; color: var(--muted); width: 20px; text-align: right; font-variant-numeric: tabular-nums; } .chart__bars { list-style: none; position: absolute; inset: 0 0 0 0; display: flex; justify-content: space-around; gap: 6px; } .chart__col { flex: 1; max-width: 56px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 28px; cursor: default; outline-offset: 4px; } .chart__stack { display: flex; flex-direction: column; width: 100%; gap: 2px; min-height: 2px; position: relative; } .chart__seg { display: block; width: 100%; min-height: 2px; } .chart__seg:nth-child(2) { border-radius: 3px 3px 0 0; } .chart__v { position: absolute; left: -6px; right: -6px; top: -22px; text-align: center; font: 600 14px/1 var(--sans); color: var(--ink); } .chart__x { position: absolute; bottom: 0; left: -10px; right: -10px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .chart__tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--navy-2); color: #fff; padding: 10px 12px; border-radius: var(--r); font-size: 13.5px; line-height: 1.45; white-space: nowrap; display: none; z-index: 3; box-shadow: var(--shadow); } .chart__tip strong { display: block; margin-bottom: 4px; } .chart__tip span { display: flex; align-items: center; gap: 6px; } .chart__tip b { margin-left: auto; padding-left: 12px; } .chart__col:hover .chart__tip, .chart__col:focus .chart__tip { display: block; } .chart__col:hover .chart__seg, .chart__col:focus .chart__seg { filter: brightness(1.12); } .chart__note { margin-top: 18px; font-size: 14px; color: var(--muted); } .outc__list { list-style: none; display: grid; gap: 14px; } .outc__list li { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "l n" "b b"; gap: 6px 10px; } .outc__l { grid-area: l; font-size: 15.5px; color: var(--ink); } .outc__n { grid-area: n; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .outc__bar { grid-area: b; height: 10px; background: var(--line-2); border-radius: 99px; overflow: hidden; } .outc__bar span { display: block; height: 100%; background: var(--navy); border-radius: 99px; } .outc__list li:first-child .outc__bar span { background: var(--c1); } .stats__h { font-size: 24px; margin-bottom: 10px; } .stats__p { color: var(--muted); margin-bottom: 20px; max-width: 70ch; } .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; } .tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; } .tbl th, .tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); } .tbl thead th { background: var(--paper); font-weight: 600; color: var(--ink); font-size: 14.5px; border-bottom: 1px solid var(--paper-2); white-space: nowrap; } .tbl tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; } .tbl tfoot th, .tbl tfoot td { background: var(--navy-tint); border-bottom: 0; color: var(--ink); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } .tbl tbody tr:hover { background: #fafbfc; } .oc { list-style: none; display: grid; gap: 3px; } .oc b { display: inline-block; min-width: 1.2em; color: var(--navy); } .nil { color: #a3abb9; } .stats__gender { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; margin-top: 56px; align-items: start; } .split { display: flex; height: 44px; border-radius: var(--r); overflow: hidden; font-size: 14.5px; font-weight: 600; } .split span { display: flex; align-items: center; padding: 0 14px; white-space: nowrap; } .split__m { background: var(--c0); color: #fff; } .split__f { background: var(--c1); color: #fff; justify-content: flex-end; } .tbl--compact th, .tbl--compact td { padding: 9px 14px; } .stats__note { margin-top: 32px; color: var(--muted); } /* Eligibility checker ---------------------------------------------------- */ .chk__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px 64px; align-items: start; } .chk__intro { position: sticky; top: calc(var(--hdr-h) + 32px); } .chk__intro .head { margin-bottom: 28px; } .chk__intro .head__title { font-size: clamp(28px, 3vw, 36px); } .chk__lt { font-size: 14.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; } .chk__topics { list-style: none; counter-reset: ct; border-top: 1px solid var(--paper-2); } .chk__topics li { counter-increment: ct; display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--paper-2); font-size: 16.5px; color: var(--ink); } .chk__topics li::before { content: counter(ct); font: 600 15px/1.5 var(--serif); color: var(--brass); width: 14px; } .chk__talk { display: flex; gap: 12px; margin-top: 24px; font-size: 16px; color: var(--text); } .chk__talk .ico { color: var(--navy); margin-top: 3px; } .chk__box { overflow-anchor: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow); overflow: hidden; } .band--paper .chk__box { border-color: var(--paper-2); } .chk__progress { height: 4px; background: var(--line-2); } .chk__progress span { display: block; height: 100%; width: 0; background: var(--navy); transition: width .3s; } .chk__form, .chk__result { padding: clamp(24px, 4vw, 40px); } .chk__q { border: 0; margin: 0; padding: 0; min-width: 0; } .chk__q legend { padding: 0; margin-bottom: 8px; } .chk__n { display: block; font-size: 14px; font-weight: 600; color: var(--brass); margin-bottom: 8px; } .chk__qt { display: block; font: 600 clamp(22px, 2.4vw, 27px)/1.25 var(--serif); color: var(--ink); } .chk__help { color: var(--muted); font-size: 16px; margin-bottom: 6px; max-width: 64ch; } .chk__opts { display: grid; gap: 10px; margin-top: 20px; } .chk__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; } .chk__nav .btn--primary { margin-left: auto; } .chk__result:focus { outline: 0; } .chk__badge { display: flex; align-items: center; gap: 12px; font: 600 clamp(21px, 2.2vw, 25px)/1.3 var(--serif); color: var(--ink); padding: 16px 18px; border-radius: var(--r); margin-bottom: 16px; } .chk__badge .ico { width: 28px; height: 28px; padding: 4px; border-radius: 50%; color: #fff; stroke-width: 2.5; } .chk__badge--ok { background: var(--ok-bg); } .chk__badge--ok .ico { background: var(--ok); } .chk__badge--maybe { background: var(--warn-bg); } .chk__badge--maybe .ico { background: var(--brass); } .chk__badge--no { background: var(--err-bg); } .chk__badge--no .ico { background: var(--err); } .chk__notes { list-style: none; display: grid; gap: 10px; margin-top: 20px; } .chk__notes li { padding: 14px 16px; border-left: 3px solid var(--brass-2); background: var(--paper); font-size: 16.5px; border-radius: 0 var(--r) var(--r) 0; } .chk__notes li.is-no { border-color: var(--err); } .chk__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .chk__fine { margin-top: 24px; font-size: 14.5px; color: var(--muted); } /* Forms ------------------------------------------------------------------- */ .fld { display: grid; gap: 6px; min-width: 0; } .fld__l { font-weight: 600; color: var(--ink); font-size: 17px; line-height: 1.35; padding: 0; } .opt-l { font-weight: 400; color: var(--muted); font-size: 15px; } .fld__h { font-size: 15.5px; color: var(--muted); line-height: 1.5; max-width: 68ch; } .fld__e { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; color: var(--err); font-size: 15.5px; } .fld__e .ico { width: 18px; height: 18px; margin-top: 2px; } .mcc input[type="text"], .mcc input[type="email"], .mcc input[type="tel"], .mcc input[type="date"], .mcc input[type="search"], .mcc select, .mcc textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #8e97a8; border-radius: var(--r); background: #fff; font: 400 17px/1.4 var(--sans); color: var(--ink); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .mcc select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313284a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; padding-right: 40px; } .mcc textarea { min-height: 120px; resize: vertical; line-height: 1.55; } .mcc input:hover, .mcc select:hover, .mcc textarea:hover { border-color: var(--navy); } .mcc input:focus, .mcc select:focus, .mcc textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px var(--focus); } .has-err input, .has-err select, .has-err textarea, .mcc [aria-invalid="true"] { border-color: var(--err) !important; border-width: 2px; } .fld--choice { border: 0; padding: 0; margin: 0; } .fld--choice legend { margin-bottom: 6px; } .has-err.fld--choice, .has-err.fld--check { padding-left: 16px; border-left: 3px solid var(--err); } .choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .choices--stack { display: grid; } .opt { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; position: relative; font-size: 17px; line-height: 1.4; color: var(--ink); } .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .opt__ui { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #6d7688; background: #fff; display: grid; place-items: center; transition: border-color .15s; margin-top: 0; } .opt__ui::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); transform: scale(0); transition: transform .15s; } .opt input:checked + .opt__ui { border-color: var(--navy); } .opt input:checked + .opt__ui::after { transform: scale(1); } .opt input:focus-visible + .opt__ui { outline: 3px solid var(--focus); outline-offset: 2px; } .opt__ui--sq { border-radius: 4px; } .opt__ui--sq::after { display: none; } .opt__ui--sq .ico { width: 16px; height: 16px; color: #fff; stroke-width: 3; opacity: 0; } .opt input:checked + .opt__ui--sq { background: var(--navy); } .opt input:checked + .opt__ui--sq .ico { opacity: 1; } .opt--box, .chk__opts .opt { padding: 15px 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; min-height: 56px; align-items: center; transition: border-color .15s, background .15s; } .opt--box:hover, .chk__opts .opt:hover { border-color: var(--navy); } .opt--box:has(input:checked), .chk__opts .opt:has(input:checked) { border-color: var(--navy); background: var(--navy-tint); box-shadow: inset 0 0 0 1px var(--navy); } .choices:not(.choices--stack) .opt--box { min-width: 120px; } .opt--check { padding: 4px 0; } .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--title { grid-template-columns: 130px minmax(0, 1fr) 120px minmax(0, 1fr); } .form { display: grid; gap: 20px; } .alert { padding: 18px 20px; border-radius: var(--r); margin-bottom: 24px; font-size: 16.5px; } .alert:focus { outline: 3px solid var(--focus); } .alert__t { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); } .alert__t .ico { margin-top: 2px; } .alert ul { margin: 10px 0 0 30px; display: grid; gap: 4px; } .alert a { color: var(--err); font-weight: 600; } .alert--err { background: var(--err-bg); border: 2px solid var(--err); } .alert--err .alert__t .ico { color: var(--err); } .alert--ok { background: var(--ok-bg); border: 2px solid var(--ok); } .alert--ok .alert__t .ico { color: var(--ok); } .alert--ok p:not(.alert__t) { margin: 6px 0 0 30px; } .cform__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 56px; align-items: start; } .cform { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow); } .cform__step { border: 0; margin: 0; padding: 0; min-width: 0; display: block; } .cform__step > * + * { margin-top: 24px; } .cform__step > legend { float: left; width: 100%; } .cform__step > legend + * { clear: both; padding-top: 10px; } .cform__step > legend + .cform__p { padding-top: 12px; margin-top: 0; } .cform__step + .cform__step { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); } .is-stepped .cform__step + .cform__step { margin-top: 0; padding-top: 0; border-top: 0; } .cform__step[hidden] { display: none; } .cform__h { font: 600 clamp(25px, 2.6vw, 30px)/1.2 var(--serif); color: var(--ink); padding: 0; margin-bottom: 0; } .cform__sec { display: block; font: 600 14px/1.2 var(--sans); color: var(--brass); margin-bottom: 8px; letter-spacing: .02em; } .cform__p { color: var(--muted); font-size: 16.5px; } .cform__subh { font: 600 19px/1.3 var(--serif); color: var(--ink); } .cform__cond { display: grid; gap: 20px; padding: 24px; background: var(--paper); border-radius: var(--r2); } .cform__cond[hidden] { display: none; } .cform__nav { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); } .cform__nav [data-submit], .cform__nav [data-next] { margin-left: auto; } .cform__count { font-size: 15px; color: var(--muted); } .stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: -4px 0 36px; } .stepper li { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 600; } .stepper li::before { content: ""; height: 4px; border-radius: 99px; background: var(--line); } .stepper li.is-done::before, .stepper li.is-now::before { background: var(--navy); } .stepper li.is-now { color: var(--ink); } .stepper__n { display: none; } .drop { position: relative; border: 2px dashed #a9b2c3; border-radius: var(--r2); background: #fafbfc; transition: border-color .15s, background .15s; } .drop:hover, .drop.is-over { border-color: var(--navy); background: var(--navy-tint); } .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .drop input:focus-visible + .drop__ui { outline: 3px solid var(--focus); outline-offset: 2px; } .drop__ui { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px 16px; color: var(--muted); font-size: 16px; text-align: center; } .drop__ui strong { color: var(--navy); } .drop__list { list-style: none; display: grid; gap: 6px; margin-top: 8px; } .drop__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--paper); border-radius: var(--r); font-size: 15px; } .drop__list li.is-bad { background: var(--err-bg); color: var(--err); font-weight: 600; } .declare { display: grid; gap: 16px; padding: 24px; border: 1.5px solid var(--navy); border-radius: var(--r2); background: #fbfcfe; } .declare__t { font: 600 20px/1.2 var(--serif); color: var(--ink); } .declare > p:not(.declare__t) { font-size: 16.5px; } .review { padding: 24px; background: var(--paper); border-radius: var(--r2); } .review__t { font: 600 20px/1.2 var(--serif); color: var(--ink); margin-bottom: 12px; } .review__list { margin: 0; display: grid; gap: 0; } .review__list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; padding: 12px 0; border-top: 1px solid var(--paper-2); font-size: 15.5px; } .review__list dt { color: var(--muted); } .review__list dd { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; } .review__list button { border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; font-size: 15px; padding: 0; } .cform__aside { display: grid; gap: 16px; position: sticky; top: calc(var(--hdr-h) + 24px); } .aside-card { padding: 24px; border-radius: var(--r2); background: var(--navy); color: #d6deea; font-size: 16px; } .aside-card p + p { margin-top: 10px; } .aside-card__t { display: flex; align-items: center; gap: 10px; font-size: 19px !important; color: #fff !important; margin-bottom: 10px !important; } .aside-card--plain { background: var(--paper); color: var(--text); } .aside-card--plain .aside-card__t { color: var(--ink) !important; } .aside-card--plain .ico { color: var(--navy); } .aside-card .btn { margin-top: 14px; } .done { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); text-align: left; border: 1px solid var(--line); border-top: 4px solid var(--ok); border-radius: var(--r2); background: #fff; box-shadow: var(--shadow); } .done:focus { outline: 0; } .done__badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; margin-bottom: 20px; } .done__badge .ico { width: 28px; height: 28px; stroke-width: 2.5; } .done__t { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; margin-bottom: 14px; } .done__ref { font-size: 19px; color: var(--ink); margin-bottom: 10px; } .done__ref strong { font-family: var(--serif); font-size: 22px; padding: 2px 10px; background: var(--paper); border-radius: var(--r); letter-spacing: .02em; } .done__h { font-size: 21px; margin: 28px 0 12px; } .done__steps { padding-left: 1.4em; display: grid; gap: 8px; } .done__steps li::marker { color: var(--brass); font-weight: 600; } .done__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* Contact ----------------------------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px 56px; align-items: start; } .cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); } .cards__item { display: flex; gap: 16px; padding: 24px 20px 24px 0; border-bottom: 1px solid var(--line); } .cards__item:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); } .cards__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); } .cards__t { font: 600 14.5px/1.3 var(--sans) !important; color: var(--muted) !important; margin-bottom: 6px !important; letter-spacing: .02em; } .cards__item p, .cards__item address { font-size: 17px; line-height: 1.5; color: var(--ink); } .cards__item a { font-weight: 600; overflow-wrap: break-word; } .hours { margin: 0; } .hours div { display: grid; gap: 2px; } .hours dt { color: var(--ink); font-weight: 600; } .hours dd { margin: 0; } .map { margin-top: 28px; border-radius: var(--r2); overflow: hidden; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23e3dccb' stroke-width='1'/%3E%3C/svg%3E"); border: 1px solid var(--paper-2); min-height: 280px; display: grid; place-items: center; text-align: center; padding: 24px; position: relative; } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map__load { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 20px; border: 1.5px solid var(--navy); background: #fff; border-radius: var(--r); font-weight: 600; color: var(--navy); cursor: pointer; } .map__note { font-size: 14px; color: var(--muted); margin-top: 10px; } .contact__form { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow); } .contact__h { font-size: 28px; margin-bottom: 8px; } .contact__p { color: var(--muted); margin-bottom: 24px; font-size: 16.5px; } /* Article ----------------------------------------------------------------- */ .band--article { padding-top: clamp(32px, 4vw, 48px); } .article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px 80px; align-items: start; } .article__body { font-size: 19px; line-height: 1.7; max-width: 68ch; } .article__body > p:first-child { font-size: 21px; line-height: 1.55; color: var(--ink); } .article__body ul, .article__body ol { padding-left: 1.3em; } .article__aside { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: 24px; padding-top: 4px; } .meta { margin: 0; border-top: 2px solid var(--navy); } .meta > div { padding: 14px 0; border-bottom: 1px solid var(--line); } .meta dt { font-size: 14px; color: var(--muted); font-weight: 600; } .meta dd { margin: 4px 0 0; color: var(--ink); font-weight: 600; } .article__share { display: grid; gap: 4px; justify-items: start; } .more { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); } .more li + li { border-left: 1px solid var(--paper-2); } .more__item { padding: 24px 28px 8px 0; } .more li + li .more__item { padding-left: 28px; } .more__t { font-size: 20px; line-height: 1.3; } /* Reveal motion (respectful) --------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .js .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .js .rv.is-in { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Responsive -------------------------------------------------------------- */ @media (max-width: 1180px) { .nav__top { padding: 8px 9px; font-size: 16px; } .hdr__bar-in { gap: 16px; } .brand__name { font-size: 20px; } } @media (max-width: 1024px) { :root { --hdr-h: 68px; } .site-header { top: 0; } .admin-bar .site-header { top: 0; } .hdr__util { display: none; } .nav { display: none; } .hdr__menu { display: inline-flex; } .hdr__bar-in { gap: 10px; } .hdr__cta { min-height: 46px; padding: 10px 14px; } .brand__mark { width: 46px; height: 46px; } .brand__name { font-size: 19px; } .brand__pre { font-size: 11px; margin-bottom: 5px; } .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .hero--full .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0; padding-bottom: 120px; } .hero--full .hero__tasks { max-width: 560px; } .hero__cap { display: none; } .stmt__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stmt__figs > div:nth-child(3) { padding-left: 0; border-left: 0; } .stmt__figs > div:nth-child(n+3) { margin-top: 24px; } .stmt__figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .hero__text { padding: 40px 0 32px; } .hero__fig { margin: 0 calc(-1 * var(--gut)); min-height: 0; aspect-ratio: 16 / 9; } .hero__fig::before { width: 100%; height: 5px; bottom: auto; } .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assure__item:nth-child(3) { padding-left: 0; border-left: 0; } .assure__item:nth-child(n+3) { border-top: 1px solid #d9d1c0; } .types__grid { grid-template-columns: minmax(0, 1fr); border-top: 0; } .types__col, .types__col + .types__col { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); } .types__col:first-child { border-top: 2px solid var(--navy); } .types__not { grid-template-columns: minmax(0, 1fr); } .ways__grid { grid-template-columns: minmax(0, 1fr); } .ways__include { position: static; } .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .phases__item:nth-child(2)::before { display: none; } .proc__phase { grid-template-columns: minmax(0, 1fr); gap: 20px; } .proc__ph { position: static; } .upd__grid { grid-template-columns: minmax(0, 1fr); } .upd__lead { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); } .upd__item { padding-left: 0; } .phdr__in--aside { grid-template-columns: minmax(0, 1fr); } .text__grid, .text__grid:has(.text__aside), .text--stack .text__grid:has(.text__aside) { grid-template-columns: minmax(0, 1fr); gap: 16px; } .text--split .text__head { position: static; } .text__aside { margin-top: 8px; } .values__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .values__grid--4 .values__item:nth-child(3) { padding-left: 0; border-left: 0; } .values__grid--4 .values__item:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 16px; } .values__grid--3 { grid-template-columns: minmax(0, 1fr); } .values__grid--3 .values__item { padding-left: 0 !important; border-left: 0 !important; } .values__grid--3 .values__item + .values__item { border-top: 1px solid var(--line); margin-top: 8px; } .chk__grid { grid-template-columns: minmax(0, 1fr); } .chk__intro { position: static; } .chk__topics, .chk__lt, .chk__talk { display: none; } .docpage__grid, .faq__wrap--groups, .faq__wrap:has(.faq__side), .cform__grid, .contact__grid, .article, .stats__grid, .stats__gender { grid-template-columns: minmax(0, 1fr); } .docpage__toc, .faq__side, .cform__aside, .article__aside { position: static; } .faq__toc { display: none; } .cform__aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .stats__kpis { grid-template-columns: repeat(3, 1fr); } .stats__kpis > div:nth-child(4) { padding-left: 0; border-left: 0; } .ftr__band-in { grid-template-columns: minmax(0, 1fr); } .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ppl__row { grid-template-columns: minmax(0, 1fr); gap: 20px; } .more { grid-template-columns: minmax(0, 1fr); } .more li + li { border-left: 0; border-top: 1px solid var(--paper-2); } .more li + li .more__item { padding-left: 0; } .tl__item { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; } .tl__item::before { left: 127px; } .tl__item::after { left: 121px; } .tl__body { padding-left: 20px; } } @media (max-width: 720px) { body.mcc { font-size: 17px; } :root { --hdr-h: 64px; --band: 56px; } .hdr__cta-l { display: none; } .hdr__cta-s { display: inline; } .hdr__cta { padding: 10px 14px; min-height: 44px; font-size: 15.5px; } .hdr__menu { min-height: 44px; padding: 8px 12px; } .hdr__menu span { display: none; } .brand { gap: 9px; } .brand__mark { width: 40px; height: 40px; } .brand__text { padding-left: 9px; } .brand__name { font-size: 17px; white-space: normal; max-width: 12ch; line-height: 1.08; } .brand__pre { font-size: 10.5px; letter-spacing: .14em; } .head { margin-bottom: 24px; } .head__intro { font-size: 17px; } .cite { font-size: 14px; } .hero__text { padding: 32px 0 28px; } .hero__title { font-size: 36px; line-height: 1.07; max-width: none; } .hero__lead { font-size: 18px; margin-top: 16px; } .hero__btns { margin-top: 24px; } .hero__btns .btn { width: 100%; } .hero__btns .btn--ghost { justify-content: flex-start; padding-left: 0; } .hero__fig { aspect-ratio: 4 / 3; } .hero--full .hero__grid { padding-top: 36px; padding-bottom: 32px; gap: 28px; } .hero--full .hero__title { font-size: 36px; max-width: none; } .hero--full .hero__lead { font-size: 17.5px; } .hero__bg { bottom: auto; height: 640px; } .hero--full { background: var(--navy-2); } .mcc .hero__bg img { object-position: 68% 40%; } .hero__bg::after { background: linear-gradient(180deg, rgba(11, 26, 51, .5) 0%, rgba(11, 26, 51, .7) 35%, rgba(11, 26, 51, .93) 70%, #0b1a33 100%); } .hero--full .hero__title { text-shadow: 0 2px 18px rgba(11, 26, 51, .5); } .hero--full .hero__tasks { margin: 0 calc(-1 * var(--gut) + 8px); } .hero__tasks a { padding: 13px 16px; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; } .hero__ti { width: 36px; height: 36px; } .hero__tt { padding: 16px 16px 8px; } .hero--full .hero__assure-wrap { margin-top: 0; padding-top: 0; padding-bottom: 8px; background: transparent; } .hero--full .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r2); margin: 0 0 4px; padding: 0; box-shadow: none; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); } .hero--full .assure__item, .hero--full .assure__item + .assure__item { padding: 16px 14px; border-left: 0; border-top: 0; flex-direction: column; gap: 8px; } .hero--full .assure__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .12); } .hero--full .assure__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); } .hero--full .assure__t { color: #fff; font-size: 17px; } .hero--full .assure__d { color: #b7c2d4; font-size: 14px; } .hero--full .assure__ico { color: #d9b06a; width: 22px; height: 22px; } .hero--full { padding-bottom: 20px; } .stmt__q p { font-size: 26px; } .stmt__q p::before { margin-left: 0; } .stmt__figs dd { font-size: 34px; } .stmt__figs > div, .stmt__figs > div + div { padding: 16px 12px 0 0; } .stmt__figs > div:nth-child(even) { padding-left: 16px; } .stmt__figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .hero__fig figcaption { font-size: 12.5px; bottom: 12px; } .assure { grid-template-columns: minmax(0, 1fr); } .assure__item, .assure__item + .assure__item { padding: 18px 0; border-left: 0; } .assure__item + .assure__item { border-top: 1px solid #d9d1c0; } .assure__t { font-size: 18px; } .types__t { font-size: 23px; } .types__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 14px; scroll-padding: 0 var(--gut); scrollbar-width: none; } .types__grid::-webkit-scrollbar { display: none; } .types__col, .types__col + .types__col, .types__col:first-child { flex: 0 0 86%; scroll-snap-align: start; padding: 22px 20px; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: var(--r2); background: #fff; } .types__hint { display: flex !important; } .types__not { padding: 22px 20px; margin-top: 32px; } .crosses { grid-template-columns: minmax(0, 1fr); } .ways__include { padding: 22px 20px; } .methods__item { grid-template-columns: auto minmax(0, 1fr); padding: 20px; gap: 14px 16px; align-items: start; } .methods__ico { width: 42px; height: 42px; } .methods__act { grid-column: 1 / -1; } .methods__act .btn { width: 100%; } .phases { grid-template-columns: minmax(0, 1fr); gap: 0; } .phases__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 0 0 26px; } .phases__item::before { left: 21px; right: auto; top: 44px; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #b9c2d2 0 6px, transparent 6px 12px); display: block !important; } .phases__item:last-child::before { display: none !important; } .phases__n { grid-row: span 2; margin: 0; box-shadow: none; } .phases__t { font-size: 19px; padding-top: 9px; } .proc__tools { top: calc(var(--hdr-h) + 8px); padding: 12px 14px; margin-bottom: 20px; } .proc__legend { display: none; } .switch { font-size: 15px; } .proc__phase { padding: 28px 0; } .proc__ph h3 { font-size: 23px; } .steps__item { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; } .steps__n { width: 36px; height: 36px; font-size: 15px; } .steps__item::before { left: 17px; top: 36px; } .steps__body { padding-top: 5px; } .steps__t { font-size: 17px; } .steps__d { font-size: 16px; } .upd__lt { font-size: 24px; } .upd__t { font-size: 18.5px; } .upd__item { padding: 18px 0; } .news__item article { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 24px 0; } .news__d { font-size: 26px; } .news__my { font-size: 12px; } .news__go { display: none; } .news__t { font-size: 20px; } .news__item--lead .news__t { font-size: 24px; } .news__body > p:not(.kicker) { font-size: 16px; } .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gut)) 20px; padding: 0 var(--gut); scrollbar-width: none; } .chip { flex: none; } .phdr { padding: 18px 0 32px; } .crumbs ol { margin-bottom: 22px; font-size: 14px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .crumbs li:not(:last-child):not(:nth-last-child(2)) { display: none; } .crumbs li:nth-last-child(2)::before { content: "‹"; margin-right: 6px; color: var(--muted); } .crumbs li:nth-last-child(2)::after { display: none; } .crumbs li:last-child { display: none; } .phdr__title { font-size: 32px; line-height: 1.1; } .phdr__lead { font-size: 17.5px; margin-top: 14px; } .phdr__btns .btn { width: 100%; } .phdr__facts > div { padding: 12px 0; } .subnav__l { display: none; } .subnav__in { min-height: 52px; padding-right: 0; } .subnav__in { overflow: hidden; } .subnav ul { margin-right: calc(-1 * var(--gut)); } .text__title { font-size: 25px; } .text__body { font-size: 17px; } .prose h2 { font-size: 23px; } .values__grid--4, .values__grid--2 { grid-template-columns: minmax(0, 1fr); } .values__item, .values__item + .values__item { padding: 22px 0 !important; border-left: 0 !important; margin-top: 0 !important; } .values__item + .values__item { border-top: 1px solid var(--line); } .values__t { font-size: 20px; } .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts__item, .facts__item + .facts__item { padding: 18px 12px 18px 0; border-left: 0; } .facts__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); } .facts__v { font-size: 24px; } .points--grid .points__list, .points--dyk .points__list { grid-template-columns: minmax(0, 1fr); } .points--dyk .points__item { padding: 20px; } .points--dyk .points__d { font-size: 17.5px; } .statute__q { font-size: 17.5px; padding: 22px 20px; } .statute__q::before { font-size: 56px; right: 14px; } .tl__item { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 0 28px 30px; } .tl__item::before { left: 6px; top: 12px; } .tl__item::after { left: 0; top: 4px; } .tl__date { text-align: left; font-size: 16px; } .tl__body { padding-left: 0; } .tl__t { font-size: 19px; } .idx__a { padding: 20px 0; column-gap: 16px; grid-template-columns: minmax(0, 1fr) 36px; } .idx__t { font-size: 20px; } .idx__d { font-size: 15.5px; } .idx__go { width: 36px; height: 36px; } .callout { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; } .callout__btns .btn { width: 100%; } .ppl__full { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 0; } .ppl__ph--lg { position: static; width: 160px; } .ppl__n { font-size: 25px; } .ppl__s { font-size: 17.5px; } .ppl__card { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; } .docs__item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; padding: 18px 0; align-items: start; } .docs__type { width: 40px; height: 50px; font-size: 10px; padding-bottom: 6px; } .docs__t { font-size: 18px; } .docs__act { grid-column: 2; } .docpage__card { padding: 20px; grid-template-columns: auto minmax(0, 1fr); } .docs__type--lg { width: 48px; height: 60px; } .docpage__t { font-size: 19px; } .docpage__btns .btn { flex: 1 1 100%; } .viewer { display: none; } .faq__gh { font-size: 21px; } .qa__q { font-size: 17.5px; } .qa__a { padding-right: 0; font-size: 16.5px; } .qa summary { padding: 18px 0; gap: 16px; } .stats__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats__kpis > div:first-child { grid-column: 1 / -1; } .stats__kpis > div, .stats__kpis > div + div { padding: 16px 12px 16px 0; border-left: 0; } .stats__kpis > div:nth-child(odd):not(:first-child) { padding-left: 16px; border-left: 1px solid var(--line); } .stats__kpis dd:nth-of-type(1) { font-size: 32px; } .stats__kpis > div:first-child dd:nth-of-type(1) { font-size: 44px; } .chart, .outc { padding: 20px 16px; } .chart__plot { height: 220px; margin-left: 22px; } .chart__grid span::before { left: -24px; } .chart__bars { gap: 3px; } .chart__v { font-size: 12px; } .chart__x { font-size: 11px; transform: rotate(-40deg); transform-origin: 50% 50%; bottom: 2px; } .chart__tip { display: none !important; } .tbl { font-size: 14.5px; } .tbl th, .tbl td { padding: 10px 12px; } .tbl--stats { min-width: 620px; } .chk__form, .chk__result { padding: 22px 18px; } .chk__nav { position: sticky; bottom: 0; background: #fff; margin: 20px -18px -22px; padding: 14px 18px; border-top: 1px solid var(--line); } .chk__btns .btn { width: 100%; } .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } /* Fields keep their reading order (title, first, middle, last) so "Next" on the keyboard goes straight down */ .grid--title { grid-template-columns: minmax(0, 1fr); } .grid--title .fld:nth-child(1), .grid--title .fld:nth-child(3) { max-width: 60%; } .cform { padding: 22px 18px; border-radius: 0; margin: 0 calc(-1 * var(--gut)); border-left: 0; border-right: 0; box-shadow: none; } .cform__cond, .declare, .review { padding: 18px 16px; } .cform__nav { position: sticky; bottom: 0; z-index: 5; background: #fff; margin: 28px -18px -22px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -16px rgba(11, 26, 51, .4); } .cform__count { display: none; } .cform__nav .btn { flex: 1; } .cform__nav [data-prev] { flex: 0 0 auto; } .stepper { margin-bottom: 26px; } .stepper__l { display: none; } .stepper li.is-now .stepper__l { display: block; white-space: nowrap; } .review__list > div { grid-template-columns: 1fr auto; gap: 4px 12px; } .review__list dt { grid-column: 1; } .review__list dd { grid-column: 1 / -1; grid-row: 2; } .review__list button { grid-column: 2; grid-row: 1; } .cards { grid-template-columns: minmax(0, 1fr); } .cards__item, .cards__item:nth-child(even) { padding: 20px 0; border-left: 0; } .contact__form { padding: 22px 18px; margin: 0 calc(-1 * var(--gut)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; } .article__body { font-size: 17.5px; } .article__body > p:first-child { font-size: 19px; } .ftr__band-in { padding-top: 40px; padding-bottom: 40px; gap: 20px; } .ftr__title { font-size: 26px; } .ftr__ways { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ftr__ways li .ftr__wv { white-space: normal; max-width: none; overflow-wrap: anywhere; } .ftr__ways a { padding: 14px 16px; align-items: center; } .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 44px; } .ftr__about, .ftr__act { grid-column: 1 / -1; } .ftr__legal { flex-direction: column; } } @media (max-width: 380px) { .brand__name { font-size: 16px; } .brand__mark { width: 34px; height: 34px; } .brand__text { border-left: 0; padding-left: 0; } .hdr__cta { padding: 9px 11px; font-size: 15px; } .hdr__menu { padding: 8px 10px; } } /* Landscape phones: keep sticky bars from eating the screen */ @media (max-height: 500px) and (orientation: landscape) { .site-header { position: relative; top: 0; } .subnav, .proc__tools { position: static; } .cform__nav, .chk__nav { position: static; } } @media print { .site-header, .ftr, .subnav, .hdr, .article__aside, .cform__aside, .proc__tools, .viewer, .map { display: none !important; } body.mcc { font-size: 12pt; color: #000; } .band { padding: 16pt 0; } a { color: #000; } } /* ========================================================================== Phones: a native-feeling mobile site. A fixed bottom bar for the four things people come to do, a compact header, instant press feedback, and layouts drawn for the small screen rather than squeezed from desktop. ========================================================================== */ .mbar, .quick { display: none; } /* Every tap answers at once. Hover effects stay with mice, because iPhone Safari turns a first tap into a "hover" when hover reveals something. */ a, button, select, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(19, 40, 74, .1); } html.is-leaving::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 1000; height: 3px; background: #c9973f; transform-origin: left; animation: mccLeaving 2.5s cubic-bezier(.1, .7, .3, 1) forwards; pointer-events: none; } @keyframes mccLeaving { from { transform: scaleX(.08); } to { transform: scaleX(.9); } } @media (hover: none) { .btn:active { filter: brightness(1.12); transform: scale(.985); } .btn--secondary:active, .btn--ghost:active { background: var(--navy-tint); } .idx__a:active, .news__item article:active, .docs__item:active, .hero__tasks a:active, .qa summary:active, .dnav__top:active, .dnav__sub a:active, .methods__item:active, .opt:active, .chip:active, .quick a:active, .ftr__ways a:active { background-color: var(--navy-tint); } .mbar__tab:active, .mbar__tab.is-going { color: var(--navy); background: var(--navy-tint); } .mbar__go:active { transform: scale(.97); } } @media (max-width: 720px) { :root { --band: 44px; } body.mcc { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* Bottom action bar */ .mbar { position: fixed; inset: auto 0 0; z-index: 90; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(11, 26, 51, .55); padding-bottom: env(safe-area-inset-bottom); } .mbar__tab { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 60px; color: var(--muted) !important; text-decoration: none !important; font: 600 11.5px/1 var(--sans); letter-spacing: .01em; } .mbar__tab .ico { width: 22px; height: 22px; color: var(--navy); } .mbar__tab[aria-current] { color: var(--navy) !important; } .mbar__tab { position: relative; } .mbar__tab[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: #c9973f; } .mbar__go { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin: 0 12px 0 2px; padding: 0 16px; border-radius: 999px; background: var(--navy); color: #fff !important; text-decoration: none !important; font: 600 15px/1 var(--sans); white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(11, 26, 51, .7); } .mbar__go .ico { width: 17px; height: 17px; color: #d9b06a; } /* The complaint form and the keyboard need the whole screen */ body:has(.cform) .mbar, html.is-typing .mbar, html.has-drawer .mbar { display: none; } body:has(.cform) { padding-bottom: 0; } body:has(.cform) .phdr .cite { display: none; } /* With the keyboard open the Continue bar steps back into the page, so it never floats over the fields */ html.is-typing .cform__nav, html.is-typing .chk__nav { position: static; box-shadow: none; margin-top: 28px; } body:has(.cform) .phdr { padding-bottom: 20px; } .cform-band { padding-top: 0; } .cform { border-top: 0; padding-top: 18px; } /* Header: logo and menu only (the bar carries the complaint button) */ .hdr__cta { display: none; } .hdr__bar-in { min-height: 62px; } .hdr__menu { min-height: 44px; min-width: 44px; justify-content: center; } .brand__name { max-width: none; white-space: nowrap; font-size: 18px; } /* Drawer feels like a sheet */ .drawer__in { width: 100%; } .drawer__body { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } /* Section rhythm */ .head { margin-bottom: 20px; gap: 12px; } .head__title { font-size: 26px; } .head__link { padding: 0; } .cite { margin-bottom: 10px; } /* Page header: back link, title, lead, then facts as a compact grid */ .phdr { padding: 14px 0 28px; } .crumbs ol { margin-bottom: 18px; } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--navy); } .crumbs ol { margin-top: -6px; margin-bottom: 12px; } .phdr__in--aside { gap: 22px; } .phdr__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top-width: 2px; } .phdr__facts > div { flex-direction: column; justify-content: flex-start; gap: 3px; padding: 12px 12px 12px 0; } .phdr__facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); } .phdr--navy .phdr__facts > div:nth-child(even) { border-color: rgba(255, 255, 255, .16); } .phdr__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .phdr__facts > div:nth-child(n+3) { border-top: 0; } .phdr__facts dt { font-size: 13px; } .phdr__facts dd { text-align: left; font-size: 15.5px; } .phdr__btns { gap: 10px; } /* "On this page" chips: comfortable targets */ .subnav a { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 14px; } /* Text sections: tighter, aside becomes a soft card */ .text__grid { gap: 12px; } .text__aside { padding: 18px; } /* Principles: icon beside the text, not above it */ .values__item:has(.values__ico) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; } .values__ico { grid-row: 1 / 3; width: 40px; height: 40px; margin: 2px 0 0; } .values__item:has(.values__ico) .values__t { margin-bottom: 6px; } .values__item p { font-size: 16px; } /* Links and lists */ .tlink { min-height: 44px; } .chip { min-height: 44px; } /* Members: portrait beside the name, biography below */ .ppl__full { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "ph r" "ph n" "s s" "t t" "m m"; column-gap: 16px; row-gap: 0; padding: 26px 0; align-items: end; } .ppl__bio { display: contents; } .ppl__ph--lg { grid-area: ph; width: 92px; aspect-ratio: 4 / 5; position: static; align-self: start; } .ppl__full .ppl__r { grid-area: r; align-self: end; } .ppl__full .ppl__n { grid-area: n; font-size: 22px; margin: 4px 0 0; align-self: start; } .ppl__full .ppl__s { grid-area: s; font-size: 17px; margin: 16px 0 10px; } .ppl__full .ppl__text { grid-area: t; font-size: 16.5px; } .ppl__full .ppl__more { grid-area: m; justify-self: start; } .ppl__text.is-clamped { max-height: 10em; } .ppl__roll { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ppl__roll li { padding: 16px 12px 16px 0; } .ppl__roll .ppl__n { font-size: 17px; } /* Questions: topics become a swipeable chip row */ .faq__side { gap: 14px; } .faq__toc { display: block !important; margin: 0 calc(-1 * var(--gut)); } .faq__toc ul { display: flex; gap: 8px; overflow-x: auto; border: 0; padding: 2px var(--gut) 6px; scrollbar-width: none; } .faq__toc ul::-webkit-scrollbar { display: none; } .faq__toc a { white-space: nowrap; border: 1.5px solid var(--line); border-radius: 99px; margin: 0; padding: 9px 14px; min-height: 44px; align-items: center; font-weight: 600; font-size: 15px; } .faq__toc a.is-active, .faq__toc a:hover { border-color: var(--navy); background: var(--navy); color: #fff; } .faq__toc a.is-active span { color: rgba(255, 255, 255, .7); } .faq__group + .faq__group { margin-top: 32px; } /* Statistics: each year becomes a card instead of a sideways-scrolling table */ .tablewrap:has(.tbl--stats) { overflow: visible; border: 0; background: none; } .tbl--stats { min-width: 0; } .tbl--stats thead { display: none; } .tbl--stats, .tbl--stats tbody, .tbl--stats tfoot, .tbl--stats tr { display: block; } .tbl--stats tr { border: 1px solid var(--line); border-radius: var(--r2); background: #fff; margin-bottom: 10px; padding: 4px 14px 8px; } .tbl--stats tbody th { display: block; padding: 10px 0 6px; border-bottom: 1px solid var(--line-2); font: 600 18px/1.2 var(--serif); } .tbl--stats td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); } .tbl--stats td::before { content: attr(data-label); color: var(--muted); font-size: 14px; } .tbl--stats td.is-nil { display: none; } .tbl--stats td.num { text-align: left; border-bottom: 0; } .tbl--stats tfoot tr { background: var(--navy-tint); border-color: transparent; } .tbl--stats tfoot th { display: block; padding: 10px 0 4px; font-weight: 600; } .tbl--stats tfoot td { border-bottom: 0; } /* Articles */ .band--article { padding-top: 8px; } .article__aside { border-top: 1px solid var(--line); padding-top: 20px; } /* Ways to complain: one full-width primary action; the rest are compact */ .methods__item { padding: 18px 16px; } .methods__t { font-size: 18.5px; } .methods__d { font-size: 15.5px; } .methods__item:not(.methods__item--primary) .methods__act { grid-column: 2; } .methods__item:not(.methods__item--primary) .methods__act .btn { width: auto; min-height: 44px; padding: 8px 14px; font-size: 15px; } /* Hub tiles become a native-style list */ .idx--tiles .idx__list { display: block; border-top: 2px solid var(--navy); } .idx--tiles .idx__item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none !important; } .band--paper .idx--tiles .idx__item, .idx--tiles.band--paper .idx__item { border-color: var(--paper-2); } .idx--tiles .idx__a { display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "m go" "t go" "d go"; align-items: center; padding: 18px 0; } .idx--tiles .idx__d { margin-bottom: 0; } .idx--tiles .idx__go { margin: 0; width: 36px; height: 36px; } .idx--tiles .idx__t { font-size: 20px; } /* Documents: whole-width download buttons */ .docs__act .btn { width: 100%; } /* Contact: one-tap actions first */ .quick { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; } .quick a { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; color: var(--navy) !important; text-decoration: none !important; font-weight: 600; font-size: 15px; } .quick .ico { width: 24px; height: 24px; } .quick li:first-child a { background: var(--navy); color: #fff !important; border-color: var(--navy); } .quick li:first-child .ico { color: #d9b06a; } .contact .band--tight, .contact { padding-top: 24px; } .map { min-height: 190px; margin-top: 20px; } .map:has(iframe) { min-height: 300px; } /* Footer: shorter on phones; the bar and menu carry navigation */ .ftr__grid { gap: 26px 16px; padding-top: 36px; padding-bottom: 28px; } .ftr__col ul { gap: 0; } .ftr__col a { display: inline-flex; align-items: center; min-height: 44px; } .ftr__act { display: none; } .ftr__legal { padding-bottom: 20px; } .chk__badge { font-size: 19px; padding: 14px; gap: 10px; } .chk__badge .ico { width: 24px; height: 24px; } .chk__notes li { font-size: 15.5px; } /* Checker: answers advance on tap, so Back/Next simply sit under them */ .chk__nav { position: static; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); background: none; } /* Checker: the result card's buttons stack */ .chk__q legend { margin-bottom: 4px; } .opt { font-size: 16.5px; } } @media (max-width: 380px) { .mbar__tab span { font-size: 10.5px; } .mbar__go { padding: 0 14px; margin-right: 10px; } .brand__name { font-size: 16px; } .quick a { font-size: 14px; } } @media (max-height: 500px) and (orientation: landscape) { .mbar { display: none; } body.mcc { padding-bottom: 0; } } @media print { .mbar, .quick { display: none !important; } }