/*
 * about.css — page-specific styles for about.html.
 *
 * Extracted from an inline <style> block in about.html for caching and
 * HTML-payload reduction. Loaded after css/style.css so these rules can
 * override shared component styling where the About page needs to.
 *
 * Scope:
 *   - Firm Leadership card (.lead-*)
 *   - Technology & Service Partners (.partners*)
 *   - Split Hero page overrides (.home-hero__*)
 *   - Modal base + per-modal styling (#modal-why, #modal-faq, #modal-best-practices)
 *   - CTA banner page overrides
 *   - "Learn More About Us" navy section (#additional-content)
 *   - Core Values panel (.cv-b-*)
 */

    /* ── Firm Leadership — Card with Side Plate (Option A) ── */
    .lead-section {
      background: #fff;
      padding: 64px 64px 40px;
    }
    .lead-section__inner {
      max-width: 1240px;
      margin: 0 auto;
    }
    .lead-bio__eyebrow {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 18px;
      position: relative;
      z-index: 1;
    }
    .lead-card {
      background: #fff;
      border: none;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      box-shadow:
        0 -6px 18px rgba(11, 27, 61, 0.08),
        0 12px 32px rgba(11, 27, 61, 0.08),
        0 2px 8px rgba(11, 27, 61, 0.08);
      display: grid;
      grid-template-columns: 420px 1fr;
      min-height: 480px;
    }
    .lead-plate {
      background: linear-gradient(145deg, var(--navy) 0%, var(--navy-dark) 100%);
      /* Padding removed so the photo can fill the plate edge-to-edge,
         mirroring the .about-firm-plate treatment on the home page.
         Navy + grid-pattern pseudo become a fallback layer hidden
         behind the opaque photo. */
      padding: 0;
      position: relative;
      overflow: hidden;
    }
    .lead-plate::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 95% 200px at 50% 100%, rgba(43, 191, 154, 0.16) 0%, transparent 75%),
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: auto, 60px 60px, 60px 60px;
      pointer-events: none;
      z-index: 0;
    }
    .lead-plate__photo {
      /* Absolute fill so the photo covers the entire navy plate area,
         clipped by .lead-card's overflow:hidden + border-radius.
         Mirrors the .about-firm-plate__photo treatment on the home page. */
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 1;
    }
    .lead-bio {
      padding: 44px 56px 36px;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .lead-bio__name-row {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .lead-bio__name {
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
      font-size: 36px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .lead-bio__linkedin {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: #0A66C2;
      border-radius: 4px;
      margin-left: 10px;
      vertical-align: -3px;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }
    .lead-bio__linkedin:hover {
      background: #0E76D4;
      transform: translateY(-3px);
      box-shadow: 0 8px 18px -4px rgba(10, 102, 194, 0.55);
    }
    .lead-bio__linkedin svg {
      width: 16px;
      height: 16px;
      fill: #fff;
    }
    .lead-bio__role {
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--teal);
      margin-top: 8px;
      position: relative;
      z-index: 1;
    }
    .lead-bio__rule {
      width: 56px;
      height: 2px;
      background: var(--teal);
      border-radius: 2px;
      margin: 18px 0 22px;
      position: relative;
      z-index: 1;
    }
    .lead-bio__p {
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
      font-size: 16px;
      line-height: 1.65;
      color: #5A6B85;
      margin: 0 0 14px;
      position: relative;
      z-index: 1;
    }
    .lead-bio__p:last-child { margin: 0; }
    @media (max-width: 960px) {
      .lead-section { padding: 48px 24px 60px; }
      .lead-card { grid-template-columns: 1fr; min-height: auto; }
      .lead-bio { padding: 32px 28px; }
      .lead-plate__photo { height: 360px; }
    }
    @media (max-width: 720px) {
      .lead-bio__name { font-size: 30px; }
    }

    /* ── Technology & Service Partners ── */
    .partners {
      background: var(--white);
      /* 72px top padding matches the .section convention used by the
         Who We Are section above on this page — keeps section-to-header
         breathing room consistent down the page. */
      padding: 72px 0 16px;
    }
    .partners__label {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 32px;
    }
    .partners__grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    .partner-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 91px;
      padding: 0 24px;
    }
    .partner-logo img {
      height: 52px;
      width: auto;
      display: block;
    }
    /* logo 7 (Microsoft) has built-in whitespace padding inside its PNG,
       so the visible mark reads much smaller than the others at the base
       52px height. Scale it up so the visible mark appears proportional. */
    .partner-logo img[src*="logo 7"] {
      height: 120px;
    }
    /* logo 4 (Inflo) + logo 5 (Claude) render slightly tall vs the others
       at the base 52px height; trim 10px each so the row reads balanced. */
    .partner-logo img[src*="logo 4"],
    .partner-logo img[src*="logo 5"] {
      height: 42px;
    }

    /* ── Split Hero — shared core in css/style.css; page overrides only ──
       Per the "Hero Section Standard" in CLAUDE.md, the home page hero
       (index.html) is the canonical reference for spacing, font color,
       and other styling details. Page-specific content (title, copy,
       button labels, credential labels, photo) stays unique to this page. */
    .home-hero__grid {
      display: grid;
      /* Single column, matching the home hero — the photo is no longer a
         grid column; it pins to the section's right half (see
         .home-hero__bleed below). */
      grid-template-columns: 1fr;
    }
    /* ── Hero photo — full-bleed feathered, mirroring the home hero
       (design handoff "Hero — Image Treatments", Option 2). The photo
       pins to the section's right half and dissolves into the navy via
       mask gradients (fade-in from the left over 24%, fade-out at the
       bottom past 78%), with a navy wash over the dissolve so the
       headline stays legible. ── */
    .home-hero__content { position: relative; max-width: 690px; }
    .home-hero__bleed {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      /* Above the section's grid overlay (z 0); .container (z 1) comes
         later in the DOM so text still paints on top. */
      z-index: 1;
      pointer-events: none;
    }
    .home-hero__bleed-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 60% 40%;
      display: block;
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 24%),
        linear-gradient(to bottom, #000 78%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0%, #000 24%),
        linear-gradient(to bottom, #000 78%, transparent 100%);
      mask-composite: intersect;
    }
    .home-hero__bleed-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(11,29,69,0.55) 0%, rgba(11,29,69,0) 34%);
      pointer-events: none;
    }
    .home-hero__credentials {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 20px;
      padding-top: 18px;
      /* flex-wrap kept (not in home hero) as a safety net so credentials
         wrap to a second line on narrow viewports instead of overflowing. */
      flex-wrap: wrap;
    }
    .home-hero__cred {
      /* display/align/gap match home hero so credentials with inner icons
         would render identically; for plain text creds (which this page
         uses) it's a no-op. */
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      /* Muted slate at rest, brand teal on hover — trust-strip styling
         from the design handoff (Hero — Image Treatments); the hover
         tint is decorative since the row isn't interactive. Mirrors the
         home page hero. */
      color: rgba(160, 178, 206, 0.82);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      white-space: nowrap;
      cursor: default;
      transition: color 0.2s ease;
    }
    .home-hero__cred:hover {
      color: var(--teal);
    }
    /* About-page divider override matching home (global rule in
       css/style.css is 2px x 20px at rgba(255,255,255,0.15)). Design
       handoff trust-strip hairline, thickened to 2px wide. */
    .home-hero__cred-divider {
      width: 2px;
      height: 13px;
      background: rgba(255, 255, 255, 0.22);
    }
    /* Hero glow customizations — mirror the home page hero per CLAUDE.md.
       - Top-right circle glow removed; ::before repurposed as the
         grid-line layer, radially masked (per the design handoff's
         bg-grid) so the grid fades out toward the lower-right and never
         shows behind the full-bleed photo's feathered edges.
       - All glows removed: ::after (which carried the bottom-edge teal
         ellipse glow) is disabled entirely. */
    .home-hero::before {
      display: block;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      background:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
      mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
    }
    /* When the full-bleed photo is showing (>1100px), also clamp the grid
       horizontally so it ends just past the CTA row's last button and
       never reaches the photo's feathered edge — same values as the home
       hero. */
    @media (min-width: 1101px) {
      .home-hero::before {
        -webkit-mask-image:
          radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
          linear-gradient(to right, #000 45%, transparent 53%);
        -webkit-mask-composite: source-in;
        mask-image:
          radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
          linear-gradient(to right, #000 45%, transparent 53%);
        mask-composite: intersect;
      }
    }
    .home-hero::after {
      display: none;
    }
    /* Below ~1100px the text column would run into the photo's opaque
       zone, so the bleed hides and the hero goes text-only — same
       breakpoint as the home hero. */
    @media (max-width: 1100px) {
      .home-hero__bleed { display: none; }
    }
    @media (max-width: 900px) {
      .home-hero__title { font-size: 38px; }
    }
    /* ═══════════════════════════════════════
       MODAL — WHY ASURATRUST
       ═══════════════════════════════════════ */
    .content-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(9, 26, 61, 0.65);
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .content-modal.is-open {
      display: flex;
      animation: modalFadeIn 0.25s ease;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; } to { opacity: 1; }
    }
    @keyframes modalSlideIn {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }
    .content-modal__panel {
      background: var(--white);
      border: 1.5px solid var(--teal);
      border-radius: var(--radius-lg);
      max-width: 640px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 36px 40px;
      position: relative;
      animation: modalSlideIn 0.3s ease;
    }
    .content-modal__close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      font-size: 24px;
      color: var(--gray-400);
      cursor: pointer;
      line-height: 1;
      padding: 4px;
      transition: color 0.2s;
    }
    .content-modal__close:hover {
      color: var(--navy);
    }
    .content-modal__title {
      font-family: 'Inter', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 20px;
      padding-right: 32px;
    }
    .content-modal__body {
      font-size: 15px;
      color: var(--text-body);
      line-height: 1.8;
    }
    .content-modal__body p {
      margin-bottom: 16px;
    }
    .content-modal__body p:last-child {
      margin-bottom: 0;
    }
    #modal-faq .content-modal__body strong {
      text-decoration: underline;
      display: block;
      margin-bottom: 0;
      transition: color 0.2s ease;
      cursor: default;
    }
    #modal-faq .content-modal__body strong:hover {
      color: var(--teal);
    }
    #modal-best-practices .content-modal__body strong {
      text-decoration: underline;
      transition: color 0.2s ease;
      cursor: default;
    }
    #modal-best-practices .content-modal__body strong:hover {
      color: var(--teal);
    }
    .content-modal__footer {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--gray-200);
    }
    /* .cta-banner narrow width + bottom-edge teal glow now live in css/style.css
       on .cta-banner.cta-banner--with-image and its ::after — shared site-wide. */

    /* ── Dive Deeper — logo + header overrides ── */
    #additional-content .service-card__name {
      font-size: 18px;
      font-family: 'Source Serif 4', Georgia, serif;
    }

    /* ── Who We Are body — match Firm Leadership body font ── */
    #who-we-are .about-overview__text {
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
    }
    /* ── Who We Are stat values — match section header font ── */
    #who-we-are .firm-stats__value {
      font-family: 'DM Serif Display', Georgia, serif;
    }

    /* ── Hero buttons — uniform sizing modifier for outline CTAs ──
       Apply with `class="btn btn--outline btn--fixed-width"`. Replaces a brittle
       attribute selector that keyed on the buttons' inline onclick/href strings —
       which would break the moment either was refactored. */
    .btn--fixed-width {
      min-width: 184px;
      justify-content: center;
      text-align: center;
    }

    /* ── Data Security modal — intro relocated below header ── */
    #modal-best-practices .sec-d__intro {
      padding: 22px 44px 0;
      margin: 0;
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
    }

    /* ── Learn More About Us modals — body text matches Firm Leadership font ── */
    #modal-why .why-d__body,
    #modal-faq .faq-b__a,
    #modal-best-practices .sec-d__item-body {
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
    }

    /* ── Learn More About Us modals — soft drop-shadow, no teal border ── */
    #modal-why .content-modal__panel,
    #modal-faq .content-modal__panel,
    #modal-best-practices .content-modal__panel {
      border: none;
      box-shadow:
        0 -6px 18px rgba(11, 27, 61, 0.15),
        0 12px 32px rgba(11, 27, 61, 0.15),
        0 2px 8px rgba(11, 27, 61, 0.15);
    }

    /* ── Learn More About Us modals — navy header band ── */
    #modal-why .why-d__header,
    #modal-faq .faq-b__header,
    #modal-best-practices .sec-d__header {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
      position: relative;
      overflow: hidden;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    #modal-why .why-d__header::before,
    #modal-faq .faq-b__header::before,
    #modal-best-practices .sec-d__header::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }
    #modal-why .why-d__header::after,
    #modal-faq .faq-b__header::after,
    #modal-best-practices .sec-d__header::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 180px 120px at 0% 0%, rgba(43, 191, 154, 0.22) 0%, transparent 70%),
        radial-gradient(ellipse 220px 90px at 25% 0%, rgba(43, 191, 154, 0.16) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    #modal-why .why-d__header > *,
    #modal-faq .faq-b__header > *,
    #modal-best-practices .sec-d__header > * {
      position: relative;
      z-index: 1;
    }
    #modal-why .why-d__title,
    #modal-faq .faq-b__title,
    #modal-best-practices .sec-d__title {
      color: #fff;
    }
    #modal-faq .faq-b__rule {
      background: rgba(255, 255, 255, 0.18);
    }
    #modal-faq .faq-b__count,
    #modal-best-practices .sec-d__eyebrow {
      color: var(--teal);
    }

    /* ── Learn More About Us — Navy Section ── */
    /* Light mint background matching .cv-b-section (Core Values) so the
       two sections read as a unified pair. Previous dark-navy treatment
       (gradient + grid-line ::before + bottom teal-glow ::after) is gone
       because those effects were designed for a dark background. */
    #additional-content {
      background: #d6ece9;
      position: relative;
      overflow: hidden;
    }
    #additional-content > .container {
      position: relative;
      z-index: 1;
    }
    #additional-content .section__label {
      color: var(--teal);
    }
    #additional-content .section__title {
      /* Dark navy for contrast against the light mint background.
         Font/size overrides kept so this section keeps its larger
         editorial title treatment. */
      color: var(--navy);
      font-family: 'Source Serif 4', Georgia, serif !important;
      font-size: 56px !important;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.025em;
    }
    #additional-content .section__desc {
      color: var(--gray-500);
    }
    #additional-content .back-to-top {
      color: var(--teal);
    }
    /* Match the home page "What We Do" service-card style */
    #additional-content .service-card {
      border: none;
      overflow: hidden;
      box-shadow:
        0 -6px 18px rgba(11, 27, 61, 0.15),
        0 12px 32px rgba(11, 27, 61, 0.15),
        0 2px 8px rgba(11, 27, 61, 0.15);
    }
    /* Suppress the teal hover banner inherited from the global
       .service-card::before in css/style.css. The mint glow + lift on
       hover (defined below) are still active. */
    #additional-content .service-card::before {
      content: none;
    }
    #additional-content .service-card:hover {
      border: none;
      box-shadow: 0 18px 44px rgba(43, 191, 154, 0.35), 0 4px 12px rgba(43, 191, 154, 0.18);
      transform: translateY(-3px);
    }
    @media (max-width: 720px) {
      #additional-content .section__title { font-size: 40px !important; }
    }

    /* ── Core Values — Editorial Manifesto (Fresh redesign per handoff) ──
       Two-column dark-navy section: anchored title block on the left,
       four numbered value entries stacked on the right with hairline
       dividers. Replaces the previous .cv-b-* Option B treatment. */
    .cv-section {
      background: #0B1B3D;
      /* Bottom padding (40px) matches .lead-section above so the gap
         between the back-to-top link and the section edge reads
         consistently down the page. */
      padding: 56px 80px 40px;
      position: relative;
      overflow: hidden;
    }
    .cv-container {
      max-width: 1320px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .cv-grid {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      column-gap: 96px;
      align-items: start;
    }

    /* ── Left column ── */
    .cv-eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }
    .cv-eyebrow__text {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: #2DCFA6;
    }
    .cv-headline {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 60px;
      font-weight: 700;
      color: #fff;
      line-height: 0.98;
      letter-spacing: -0.025em;
      margin: 0 0 24px;
    }
    .cv-headline em {
      font-style: italic;
      font-weight: 600;
      color: #3DDFB6;
    }
    .cv-lead {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.68);
      max-width: 380px;
      margin: 0 0 28px;
    }
    .cv-index {
      list-style: none;
      padding: 0;
      margin: 0;
      max-width: 380px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .cv-index__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .cv-index__group {
      display: inline-flex;
      align-items: baseline;
      gap: 14px;
    }
    .cv-index__num {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 13px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.42);
      font-variant-numeric: tabular-nums;
    }
    .cv-index__name {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.86);
    }
    .cv-index__dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2DCFA6;
    }

    /* ── Right column ── */
    .cv-entries {
      list-style: none;
      padding: 0;
      margin: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .cv-entry {
      display: grid;
      grid-template-columns: 64px 1fr;
      column-gap: 20px;
      align-items: start;
      padding: 26px 0 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .cv-entry__num {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 40px;
      font-weight: 600;
      font-style: italic;
      color: #3DDFB6;
      line-height: 0.9;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .cv-entry__name {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 24px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.015em;
      line-height: 1.1;
      margin: 0 0 8px;
    }
    .cv-entry__body {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.68);
      max-width: 460px;
      margin: 0;
    }

    /* Back-to-top link — teal so it reads on the new dark background. */
    #core-values .back-to-top {
      color: var(--teal);
    }

    /* ── Responsive ── */
    @media (max-width: 960px) {
      .cv-section { padding: 48px 28px 56px; }
      .cv-grid {
        grid-template-columns: 1fr;
        row-gap: 36px;
      }
      .cv-headline { font-size: 44px; }
      /* Index is redundant once entries stack directly below — hide on mobile. */
      .cv-index { display: none; }
      .cv-entry {
        grid-template-columns: 52px 1fr;
        column-gap: 16px;
        padding: 22px 0 20px;
      }
      .cv-entry__num { font-size: 32px; }
      .cv-entry__name { font-size: 20px; }
    }
    @media (max-width: 600px) {
      .cv-headline { font-size: 36px; }
      .cv-entry {
        grid-template-columns: 1fr;
        row-gap: 8px;
      }
      .cv-entry__num { font-size: 28px; }
    }