/* 1.2.0 — supplied red desktop/mobile mockup. */
:root {
  --red:#e0000b; --navy:#b51218; --navy-dark:#a90c12; --blue:#bc1018;
  --ink:#171d29; --muted:#65738b; --pale:#fff4f2; --line:#ececef;
}
body { background:linear-gradient(115deg,#f4e8e5,#fff 48%,#f6efec); }
.site-header { color:var(--red); }
.topbar { color:#fff; background:linear-gradient(90deg,#c71319,#9c0b10 76%,#b71319); min-height:34px; padding-block:4px; }
.topbar-separator { color:#fff9; }
.topbar-tools a:hover { color:#ffe09a; }
.font-controls button { background:#74090c; width:22px; height:22px; }
.masthead,.uses-real-images .masthead {
  min-height:clamp(94px,9vw,124px); padding:12px 30px;
  background-color:#fff;
  background-image:linear-gradient(90deg,#fff 0,#fff 29%,#fffffff0 37%,#ffffff80 48%,#ffffff00 59%),url('images/mockup-masthead.webp');
  background-position:center,right center; background-size:auto,74% auto; background-repeat:no-repeat;
}
.brand,.brand:hover { color:var(--red); gap:16px; }
.brand-symbol { width:clamp(66px,6.5vw,84px); height:clamp(66px,6.5vw,84px); }
.brand-text { min-width:0; }
.brand-overline { font-size:clamp(11px,.98vw,14px); margin-bottom:3px; }
.brand-center { font-size:clamp(15px,1.42vw,20px); letter-spacing:-.25px; }
.brand-text strong { color:var(--red); font-size:clamp(23px,2.15vw,30px); letter-spacing:-.3px; line-height:1.08; }
.brand-tagline { font-size:clamp(10px,.99vw,13px); font-weight:400; }
.header-search { width:350px; max-width:28%; margin-top:13px; }
.site-search { height:38px; border-color:#e8dedc; border-radius:3px; }
.site-search input { padding-inline:12px; font-size:.75rem; }
.site-search button { min-width:42px; }
.main-nav { background:linear-gradient(90deg,#c10b12,#9e0910); }
.nav-list { min-height:42px; justify-content:space-between; }
.nav-list>li>a { font-size:clamp(9px,.89vw,12px); padding-inline:clamp(4px,.55vw,8px); font-weight:600; }
.nav-list>li>a:hover,.nav-list>.current-menu-item>a,.nav-list>.current-menu-parent>a { background:#e3000c; }
.nav-home:hover,.nav-more:hover { background:#d3000b; }
.nav-home { width:58px; }
.nav-more { width:46px; }
.icon-button { color:var(--red); }
.home-main { padding:9px 30px 10px; }
.home-lead { grid-template-columns:minmax(0,1.82fr) minmax(0,1fr); gap:22px; align-items:stretch; }
.hero-slider { aspect-ratio:2.42; min-height:0; border-radius:5px; background:#243845; }
.hero-slider,.lead-news { align-self:start; }
.hero-slide { height:100%; min-height:0; }
.hero-copy { position:absolute; left:0; right:0; bottom:0; min-height:0; padding:22px 24px 20px; }
.hero-copy h2 { color:#fff; font-size:clamp(19px,1.69vw,24px); line-height:1.26; margin:0 65px 9px 0; text-shadow:0 1px 3px #0008; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-label { padding:4px 10px; font-size:.8125rem; margin-bottom:7px; }
.hero-image { object-position:center; }
.hero-shade { background:linear-gradient(180deg,transparent 30%,#1516161c 43%,#140b08f0 100%); }
.hero-copy .meta { font-size:.75rem; }
.hero-location { margin-left:9px; font-size:.6875rem; }
.hero-arrows { bottom:64px; right:21px; gap:7px; }
.hero-arrows button { width:34px; height:34px; background:#17120dba; border-color:#ffffff70; }
.hero-dots { bottom:18px; right:22px; }
.hero-dots button { width:8px; height:8px; }
.lead-news { min-width:0; min-height:0; aspect-ratio:1.32967; display:grid; grid-template-rows:repeat(4,minmax(0,1fr)); gap:9px; overflow:hidden; }
.lead-news article { grid-template-columns:minmax(0,39%) minmax(0,1fr); min-height:0; overflow:hidden; gap:16px; padding-bottom:7px; }
.lead-thumb { aspect-ratio:auto; height:100%; max-height:none; align-self:stretch; }
.lead-thumb img { height:100%; border-radius:4px; }
.lead-news h2 { font-size:clamp(11px,1.02vw,14px); line-height:1.24; margin:0 0 5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lead-news .meta { font-size:clamp(9px,.8vw,11px); }
.quick-links { background:#fdf1ef; margin-top:10px; padding:12px 10px 9px; gap:8px; }
.quick-links>a { gap:7px; min-height:77px; font-size:clamp(10px,.87vw,12px); font-weight:600; }
.quick-icon { width:48px; height:48px; color:var(--red); border:0; background:#fff; }
.quick-icon .icon { width:27px; height:27px; stroke-width:2.15; }
.quick-links>a:hover .quick-icon { box-shadow:0 5px 15px #b7131826; }
.desktop-label { max-width:128px; }
.home-content-grid { margin-top:16px; grid-template-columns:minmax(0,1.78fr) minmax(0,1fr) minmax(0,1fr); gap:18px; }
.section-heading { align-items:center; margin-bottom:12px; gap:6px; }
.section-heading h2 { font-size:clamp(13px,1.15vw,16px); border-left-width:4px; padding-left:8px; }
.section-heading>a { color:var(--red); font-size:clamp(9px,.82vw,11px); }
.latest-grid { gap:12px; }
.news-image { aspect-ratio:1.9; }
.news-card h3 { margin:8px 0 8px; line-height:1.4; font-size:clamp(11px,.98vw,13px); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.news-card .meta { color:#687996; font-size:.6875rem; }
.notice-section,.video-section { border-left:0; padding-left:0; }
.notice-list article { grid-template-columns:48px minmax(0,1fr); gap:11px; padding:8px 0; }
.notice-list h3 { font-size:clamp(11px,.95vw,13px); line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.date-tile { width:48px; min-height:44px; color:#69798e; background:#fff1ee; }
.date-tile strong { font-size:1.2rem; }
.video-main .video-cover { aspect-ratio:3.45; }
.video-main h3 { font-size:clamp(12px,1.03vw,14px); line-height:1.25; margin:7px 0 4px; }
.video-main .meta,.video-small .meta { font-size:.6875rem; }
.video-small { gap:10px; margin-top:10px; }
.video-small .video-cover { aspect-ratio:1.85; }
.video-small h3 { font-size:clamp(10px,.86vw,12px); margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.play-symbol .icon { fill:#2216129c; }
.longson-banner {
  min-height:65px; padding:7px 18px; border:1px solid #ffbf4c; gap:0; color:var(--red);
  background:#fff0b5 url('images/longson-civic-banner.svg') center/cover no-repeat;
}
.longson-banner:hover { color:#aa0611; }
.longson-banner>span { padding-inline:100px 65px; }
.longson-banner strong { font-size:clamp(19px,1.8vw,26px); font-weight:800; }
.longson-banner small { font-size:clamp(8px,.83vw,11px); font-weight:600; margin-top:1px; }
.site-footer { position:relative; background:linear-gradient(95deg,#c31319,#9e0910); }
.footer-grid { gap:25px; padding:18px 29px 14px; }
.footer-brand { gap:15px; }
.footer-brand img { width:70px; height:70px; }
.footer-grid h2 { font-size:.75rem; margin-bottom:8px; }
.footer-grid>div>a { font-size:.6875rem; }
.footer-brand strong { margin-bottom:5px; }
.footer-brand p { font-size:.6875rem; }
.social-links a { background:#fff; color:#b40b13; }
.footer-grid .footer-contact { margin-top:10px; }
.footer-support { margin:8px 0 0; font-size:.6875rem; line-height:1.4; color:#fff; }
.footer-support>a { display:inline!important; text-decoration:underline; font-size:inherit!important; }
.footer-bottom { color:#fff; padding:7px 0 10px; }
.site-footer .back-top { position:absolute; right:24px; bottom:17px; width:36px; height:36px; background:#fff; color:var(--red); border:0; box-shadow:none; }
.inner-main { background:#fff; padding:16px 28px 25px; }
.page-heading { background:transparent; padding:2px 0 14px; margin-bottom:16px; border-bottom:1px solid var(--line); border-radius:0; }
.page-heading h1 { font-size:1.2rem; color:var(--red); }
.panel { border-color:#ededed; }
.side-panel>a { color:#455168; }
.side-panel>.active,.side-panel>a:hover { color:#fff; }
.procedure-group { background:#fff; }
.field-icon { color:var(--red); background:#fff1ed; }
.filter-search button { background:var(--red); }
.map-card { background:#fff6f0; color:#ad1b22; border-color:#f1d9d3; }
.procedure-facts dt { background:#fff4f0; color:#a42b32; }
.mode-badge { color:#a52d33; background:#fff1ee; }
.document-detail { background:#fff5f2; flex-wrap:wrap; }
.document-row>div { min-width:0; }
.article-cover { margin:0 0 24px; }
.about-content figure { margin:0 0 24px; }
.about-image { object-fit:cover; }
.national-support { padding:14px 16px 4px; margin:18px 0 22px; background:#fff4f0; border-radius:5px; }
.national-support h3 { font-size:.875rem; margin-bottom:10px; }
.form-hint { font-size:.8125rem; color:#526173; line-height:1.55; padding:11px 13px; background:#f8f6f5; border-radius:4px; }
.form-hint a { color:var(--red); text-decoration:underline; }
.video-launch { display:block; position:relative; width:100%; padding:0; background:#24171a; aspect-ratio:16/9; overflow:hidden; }
.video-launch>img { width:100%; height:100%; object-fit:cover; }
.video-launch .play-symbol .icon { width:68px; height:68px; }
.video-player iframe { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; }
.video-external { margin:12px 0 18px; }

@media (min-width:1101px) {
  .main-nav,.primary-menu { position:relative; z-index:30; }
  .nav-list { overflow:visible; }
  .nav-list .sub-menu { position:absolute; top:100%; left:0; min-width:210px; background:#a90c12; padding:7px 0; margin:0; list-style:none; border-radius:0 0 5px 5px; box-shadow:0 8px 18px #7a0b1626; }
  .nav-list>li:hover>.sub-menu,.nav-list>li:focus-within>.sub-menu { display:block; }
  .sub-menu a { display:block; color:#fff; padding:10px 15px; font-size:.8125rem; }
  .sub-menu a:hover,.sub-menu a:focus-visible { background:#d3000c; }
}
@media (min-width:768px) and (max-width:1100px) {
  .masthead { min-height:99px; padding:12px 23px; }
  .brand { gap:12px; }
  .brand-symbol { width:67px; height:67px; }
  .brand-center { font-size:15px; }
  .brand-overline { font-size:11px; }
  .brand-text strong { font-size:24px; }
  .brand-tagline { font-size:10px; }
  .header-search { max-width:27%; }
  .site-search input { font-size:10px; }
  .home-main { padding:9px 22px 10px; }
  .home-lead { gap:18px; }
  .hero-copy { padding:16px 19px; }
  .hero-copy h2 { font-size:19px; margin-right:0; }
  .hero-label { font-size:12px; }
  .hero-copy .meta { font-size:10px; }
  .lead-news article { gap:11px; }
  .lead-news h2 { -webkit-line-clamp:2; margin-bottom:3px; }
  .nav-home { width:42px; }
  .nav-more { width:33px; }
  .nav-list>li>a { font-size:9px; padding-inline:5px; }
  .quick-links { padding:9px 7px 7px; }
  .quick-links>a { min-height:64px; }
  .quick-icon { width:40px; height:40px; }
  .quick-icon .icon { width:25px; height:25px; }
  .home-content-grid { gap:15px; }
  .latest-grid { gap:10px; }
  .notice-list article { grid-template-columns:40px minmax(0,1fr); gap:10px; }
  .date-tile { width:40px; min-height:41px; }
  .longson-banner { min-height:57px; padding:6px 12px; }
  .longson-banner>span { padding-inline:80px 30px; }
  .footer-grid { padding:15px 23px; gap:18px; }
  .footer-brand img { width:60px; height:60px; }
}
@media (max-width:767px) {
  body { background:#fff; }
  .site-header { box-shadow:0 1px 6px #37081110; }
  .masthead,.uses-real-images .masthead { min-height:78px; padding:8px 9px; gap:5px; background:#fff; border-bottom:6px solid #ffcf56; }
  .brand,.brand:hover { gap:8px; justify-content:center; }
  .brand-symbol { width:44px; height:44px; }
  .brand-text { line-height:1.1; }
  .brand-overline { font-size:7.4px; margin-bottom:2px; }
  .brand-center { font-size:8.4px; max-width:200px; white-space:normal; letter-spacing:-.1px; }
  .brand-text strong { font-size:15px; line-height:1.12; margin-top:1px; }
  .brand-tagline { font-size:6.6px; margin-top:2px; }
  .mobile-menu-toggle,.mobile-search-toggle { min-height:44px; width:36px; min-width:36px; }
  .icon-button .icon { width:22px; height:22px; }
  .main-nav.is-open { height:auto; max-height:calc(100dvh - 155px - env(safe-area-inset-bottom)); background:#a90c12; }
  .nav-list>li>a { font-size:.8125rem; padding:14px 22px; }
  .sub-menu a { color:#fff2db; }
  .home-main { padding:0; }
  .hero-slider { aspect-ratio:auto; height:clamp(255px,80vw,355px); min-height:0; border-radius:0; }
  .hero-slide { height:100%; min-height:0; }
  .hero-copy { min-height:0; padding:19px 19px 23px; }
  .hero-copy h2 { font-size:clamp(18px,4.8vw,22px); line-height:1.28; margin:0 0 10px; }
  .hero-label { font-size:.75rem; padding:4px 9px; }
  .hero-copy .meta { font-size:.6875rem; max-width:75%; }
  .hero-shade { background:linear-gradient(180deg,transparent 20%,#17100b35 43%,#1a100bee 88%,#120b07 100%); }
  .hero-dots { bottom:24px; right:17px; }
  .hero-location { display:none; }
  .lead-news { display:none; }
  .quick-links { background:#fff; margin:0; padding:14px 12px 17px; row-gap:17px; column-gap:8px; }
  .quick-links>a { min-height:0; font-size:.625rem; font-weight:500; gap:6px; }
  .quick-icon { width:41px; height:41px; background:#fff2ef; }
  .quick-icon .icon { width:24px; height:24px; }
  .mobile-label { max-width:88px; }
  .home-content-grid { display:block; margin:0; padding:16px 17px 21px; }
  .section-heading h2 { font-size:.90625rem; }
  .section-heading>a { font-size:.625rem; }
  .latest-grid { gap:0; }
  .news-card { grid-template-columns:99px minmax(0,1fr); gap:12px; }
  .news-image { aspect-ratio:1.65; height:64px; }
  .news-card h3 { font-size:.8125rem; margin:0 0 8px; line-height:1.32; font-weight:500; -webkit-line-clamp:4; }
  .news-card .meta { font-size:.6875rem; }
  .mobile-bottom-nav { background:#fff; color:#182045; border-top:1px solid #ececf0; box-shadow:0 -2px 8px #17234508; }
  .mobile-bottom-nav>a { min-height:44px; justify-content:center; }
  .mobile-bottom-nav>a[aria-current="page"] { color:var(--red); }
  .inner-main { padding:13px 15px 20px; }
  .page-heading h1 { font-size:1.0625rem; }
  .document-row>.button { margin-left:38px; }
  .contact-info h2 { font-size:.9375rem; }
  .national-support a { overflow-wrap:anywhere; }
  .admin-bar .site-header { top:46px; }
}
@media (min-width:768px) and (max-width:900px) {
  .home-lead { grid-template-columns:minmax(0,1fr); }
  .lead-news { display:none; }
}
@media (max-width:359px) {
  .brand { gap:6px; }
  .brand-symbol { width:38px; height:38px; }
  .brand-center { font-size:7.6px; max-width:167px; }
  .brand-overline { font-size:6.8px; }
  .brand-text strong { font-size:14px; }
  .brand-tagline { font-size:6px; }
  .hero-copy { padding-inline:15px; }
  .hero-copy h2 { font-size:17px; }
}
@media print {
  body { background:#fff; }
  .article-title,.prose h2,.prose h3 { color:#000; }
}
