/*  Page hero  */
    .page-hero {
      margin-top: var(--header-h);
      background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
      padding: var(--space-16) 0 var(--space-12);
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .page-hero__inner { position: relative; z-index: 1; }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.65);
      margin-bottom: var(--space-6);
      flex-wrap: wrap;
    }
    .breadcrumb a { color: rgba(255,255,255,0.65); transition: color var(--transition-fast); }
    .breadcrumb a:hover { color: var(--clr-white); }
    .breadcrumb__sep { color: rgba(255,255,255,0.35); }
    .breadcrumb__current { color: rgba(255,255,255,0.90); font-weight: 500; }

    .page-hero__tag {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      color: var(--clr-white);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-4);
      border: 1px solid rgba(255,255,255,0.20);
    }
    .page-hero__title {
      font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
      font-weight: 800;
      color: var(--clr-white);
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: var(--space-4);
    }
    .page-hero__desc {
      font-size: clamp(var(--text-base), 2vw, var(--text-lg));
      color: rgba(255,255,255,0.80);
      max-width: 580px;
      line-height: 1.7;
      margin-bottom: var(--space-8);
    }
    .page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

    /* ── Topics nav ── */
    .topics-nav {
      background: var(--clr-white);
      border-bottom: 1px solid var(--clr-border);
      position: sticky;
      top: var(--header-h);
      z-index: 90;
      box-shadow: var(--shadow-sm);
    }
    .topics-nav__inner {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      scrollbar-width: none;
      padding: var(--space-3) 0;
      -webkit-overflow-scrolling: touch;
    }
    .topics-nav__inner::-webkit-scrollbar { display: none; }
    .topic-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--clr-muted);
      background: var(--clr-bg);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-full);
      white-space: nowrap;
      transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
      text-decoration: none;
      flex-shrink: 0;
    }
    .topic-pill:hover, .topic-pill.is-active {
      background: var(--clr-primary);
      color: var(--clr-white);
      border-color: var(--clr-primary);
    }

    /*  Permit block  */
    .permit-block {
      scroll-margin-top: calc(var(--header-h) + 56px);
    }
    

    .permit-hero {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }
    @media (min-width: 900px) {
      .permit-hero { flex-direction: row; align-items: flex-start; gap: var(--space-12); }
      .permit-hero__content { flex: 1; }
      .permit-hero__card { flex-shrink: 0; width: 320px; }
    }

    .permit-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      border-radius: var(--radius-xl);
      font-size: 2.4rem;
      margin-bottom: var(--space-4);
      flex-shrink: 0;
    }
    .permit-badge--blue   { background: #e8f0fe; }
    .permit-badge--orange { background: #fff3e8; }
    .permit-badge--green  { background: #e8f5e9; }
    .permit-badge--red    { background: #fdecea; }
    .permit-badge--purple { background: #f3f0ff; }
    .permit-badge--teal   { background: #e0f7f6; }

    .permit-tag {
      display: inline-block;
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 2px var(--space-3);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-3);
    }
    .permit-tag--blue   { color: var(--clr-blue);   background: #e8f0fe; }
    .permit-tag--orange { color: var(--clr-orange); background: #fff3e8; }
    .permit-tag--green  { color: var(--clr-green);  background: #e8f5e9; }
    .permit-tag--red    { color: var(--clr-red);    background: #fdecea; }
    .permit-tag--purple { color: var(--clr-purple); background: #f3f0ff; }
    .permit-tag--teal   { color: var(--clr-teal);   background: #e0f7f6; }

    .permit-title {
      font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
      font-weight: 800;
      color: var(--clr-dark);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: var(--space-4);
    }
    .permit-lead {
      font-size: var(--text-lg);
      color: var(--clr-muted);
      line-height: 1.75;
      margin-bottom: var(--space-6);
    }
    .permit-body {
      font-size: var(--text-base);
      color: var(--clr-muted);
      line-height: 1.8;
    }
    .permit-body p { margin-bottom: var(--space-4); }
    .permit-body p:last-child { margin-bottom: 0; }
    .permit-body strong { color: var(--clr-dark); font-weight: 600; }

    /* ── Summary card ── */
    .summary-card {
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .summary-card__header {
      padding: var(--space-5) var(--space-6);
      font-size: var(--text-sm);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--clr-white);
    }
    .summary-card__header--blue   { background: linear-gradient(135deg, #1a56db, #3b82f6); }
    .summary-card__header--orange { background: linear-gradient(135deg, #f97316, #fb923c); }
    .summary-card__header--green  { background: linear-gradient(135deg, #16a34a, #4ade80); }
    .summary-card__header--red    { background: linear-gradient(135deg, #dc2626, #f87171); }
    .summary-card__header--purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
    .summary-card__header--teal   { background: linear-gradient(135deg, #0d9488, #2dd4bf); }

    .summary-card__body { padding: var(--space-5) var(--space-6); }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-3);
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--clr-border);
      font-size: var(--text-sm);
    }
    .summary-row:last-child { border-bottom: none; padding-bottom: 0; }
    .summary-row__label { color: var(--clr-muted); font-weight: 500; flex-shrink: 0; }
    .summary-row__value { color: var(--clr-dark); font-weight: 600; text-align: right; }
    .summary-card__cta {
      padding: 0 var(--space-6) var(--space-6);
    }
    .summary-card__cta .btn { width: 100%; text-align: center; }

    /* ── Highlight box ── */
    .highlight-box {
      background: var(--clr-primary-light);
      border-left: 4px solid var(--clr-primary);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: var(--space-5) var(--space-6);
      margin: var(--space-6) 0;
      font-size: var(--text-sm);
      color: var(--clr-text);
      line-height: 1.7;
    }
    .highlight-box strong {
      display: block;
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--clr-primary);
      margin-bottom: var(--space-2);
    }
    .highlight-box--warning { background: #fff8e8; border-left-color: var(--clr-accent); }
    .highlight-box--warning strong { color: var(--clr-accent-dark); }

    /* ── Requirement list ── */
    .req-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-3);
      margin: var(--space-5) 0;
    }
    @media (min-width: 640px) { .req-grid { grid-template-columns: repeat(2, 1fr); } }

    .req-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius);
      padding: var(--space-4);
    }
    .req-item__check {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      background: var(--clr-primary-light);
      color: var(--clr-primary);
      font-size: var(--text-sm);
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .req-item__text { font-size: var(--text-sm); color: var(--clr-muted); line-height: 1.55; }
    .req-item__text strong { display: block; color: var(--clr-dark); font-weight: 600; margin-bottom: 1px; }

    /* ── Sub-permits grid ── */
    .sub-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
      margin: var(--space-6) 0;
    }
    @media (min-width: 640px) { .sub-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 900px) { .sub-grid { grid-template-columns: repeat(4, 1fr); } }

    .sub-card {
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      text-align: center;
      transition: box-shadow var(--transition), transform var(--transition);
    }
    .sub-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .sub-card__label {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--clr-primary);
      margin-bottom: var(--space-2);
    }
    .sub-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--clr-dark); margin-bottom: var(--space-2); }
    .sub-card__desc { font-size: var(--text-xs); color: var(--clr-muted); line-height: 1.5; }

    /* ── Block divider ── */
    .block-divider {
      height: 1px;
      background: var(--clr-border);
      margin: var(--space-16) 0;
    }

    /* ── CTA section ── */
    .cta-section {
      background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
      border-radius: var(--radius-xl);
      padding: var(--space-12) var(--space-8);
      text-align: center;
      color: var(--clr-white);
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .cta-section > * { position: relative; z-index: 1; }
    .cta-section__icon { font-size: 3rem; margin-bottom: var(--space-4); }
    .cta-section__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-3); }
    .cta-section__desc { color: rgba(255,255,255,0.82); font-size: var(--text-base); max-width: 480px; margin-inline: auto; line-height: 1.7; margin-bottom: var(--space-8); }
    .cta-section__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
    .btn--white { background: var(--clr-white); color: var(--clr-primary); font-weight: 700; }
    .btn--white:hover { background: rgba(255,255,255,0.92); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.20); }

    @media (min-width: 1024px) { .page-hero { padding: var(--space-20) 0 var(--space-16); } }