/* Fixed site header: name left, flexible centered search, navigation right. */
header.wrap.nav {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  grid-template-areas: "brand search links" !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 0 clamp(12px, 1.5vw, 24px) !important;
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  width: min(1200px, calc(100% - 24px)) !important;
  height: 74px !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  overflow: visible !important;
  background: rgba(22, 32, 24, .96) !important;
  border: 1px solid #314537 !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body { padding-top: 74px !important; }
header.wrap.nav > .brand {
  grid-area: brand !important;
  display: block !important;
  min-width: 0;
  white-space: nowrap;
  font-size: 1.12rem !important;
}
header.wrap.nav > .site-search {
  grid-area: search !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  justify-self: center !important;
  width: min(100%, clamp(190px, 32vw, 420px)) !important;
  min-width: 0 !important;
  max-width: 420px !important;
  margin: 0 !important;
}
header.wrap.nav > .mobile-home,
header.wrap.nav > .menu { display: none !important; }
header.wrap.nav > .nav-links {
  grid-area: links !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  inset: auto !important;
  justify-self: end !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  white-space: nowrap !important;
  scrollbar-width: none;
}
header.wrap.nav > .nav-links a,
header.wrap.nav > .nav-links a[href="index.html"] {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  padding: 7px 6px !important;
  font-size: .9rem !important;
  white-space: nowrap !important;
}
header.wrap.nav > .nav-links a:hover,
header.wrap.nav > .nav-links a:focus-visible {
  background: #a6ff4d12 !important;
  color: var(--green, #a6ff4d) !important;
}
header.wrap.nav > .nav-links a:focus-visible,
header.wrap.nav > .site-search :focus-visible {
  outline: 2px solid var(--green, #a6ff4d);
  outline-offset: 2px;
}
@media (max-width: 900px) {
  body { padding-top: 60px !important; }
  header.wrap.nav {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content 40px !important;
    grid-template-areas: "brand search home menu" !important;
    align-items: center !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  header.wrap.nav > .brand {
    display: block !important;
    grid-area: brand !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  header.wrap.nav > .brand::before {
    content: "CLFL";
    display: block;
    color: var(--ink, #edf5ed);
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .06em;
  }
  header.wrap.nav > .mobile-home {
    grid-area: home !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted, #c3d0c5) !important;
    font-size: .9rem !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }
  header.wrap.nav > .mobile-home:hover,
  header.wrap.nav > .mobile-home:focus-visible {
    color: var(--green, #a6ff4d) !important;
    outline-color: var(--green, #a6ff4d);
  }
  header.wrap.nav > .site-search {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    justify-self: center !important;
    width: calc(100% - 56px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  header.wrap.nav > .menu {
    grid-area: menu !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 1002 !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(198, 232, 195, .24) !important;
    border-radius: 10px !important;
    background: rgba(166, 255, 77, .08) !important;
    color: var(--ink, #edf5ed) !important;
    font-size: 1.35rem !important;
    cursor: pointer;
  }
  header.wrap.nav > .nav-links { display: none !important; }
  header.wrap.nav > .nav-links.open {
    display: grid !important;
    position: absolute !important;
    top: calc(100% - 10px) !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1005 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(140px, calc(100vw - 24px)) !important;
    max-height: min(70vh, 440px) !important;
    overflow-y: auto !important;
    gap: 3px !important;
    padding: 10px !important;
    border: 1px solid rgba(166, 255, 112, .24) !important;
    border-radius: 14px 10px 14px 14px !important;
    transform-origin: top right;
    animation: menu-drop-from-button .18s ease-out both;
    background: rgba(18, 32, 23, .98) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  header.wrap.nav > .nav-links.open a,
  header.wrap.nav > .nav-links.open a[href="index.html"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    min-height: 38px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    color: var(--ink, #edf5ed) !important;
    font-size: .84rem !important;
    white-space: nowrap !important;
  }
  header.wrap.nav > .nav-links.open a:hover,
  header.wrap.nav > .nav-links.open a:focus-visible {
    background: #a6ff4d12 !important;
    color: var(--green, #a6ff4d) !important;
  }
}


/* Small phone layout: reveal the search field from the fixed magnifier button. */
@media (max-width: 600px) {
  header.wrap.nav {
    grid-template-columns: max-content 22px minmax(40px, 1fr) max-content 40px !important;
    grid-template-areas: "brand . search home menu" !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
  }
  header.wrap.nav > .site-search {
    grid-area: search !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 calc(100% - 40px) round 999px) !important;
    transition: clip-path .38s cubic-bezier(.22,.72,.25,1), box-shadow .2s ease !important;
  }
  header.wrap.nav > .site-search input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .14s ease, visibility 0s linear .14s !important;
  }
  header.wrap.nav > .site-search button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(166, 255, 77, .08) !important;
    color: var(--ink, #edf5ed) !important;
    font-size: 1.15rem !important;
  }
  header.wrap.nav > .site-search.mobile-open,
  header.wrap.nav > .site-search:not(.mobile-open):focus-within {
    clip-path: inset(0 0 0 0 round 999px) !important;
  }
  header.wrap.nav > .site-search.mobile-open input,
  header.wrap.nav > .site-search:not(.mobile-open):focus-within input {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .18s ease .12s, visibility 0s linear 0s !important;
  }
}


/* The search divider is only an accent while the visitor has entered a query. */
header.wrap.nav > .site-search button { border-left: 0 !important; }
header.wrap.nav > .site-search.mobile-open input:not(:placeholder-shown) + button {
  border-left: 1px solid rgba(166, 255, 112, .42) !important;
}

.site-search-suggestion-heading {
  padding: 8px 12px 4px;
  color: var(--muted, #c3d0c5);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .04em;
}

@keyframes menu-drop-from-button {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* Match the browser's built-in clear control to the site's green accent. */
header.wrap.nav > .site-search input[type="search"]::-webkit-search-cancel-button {
  filter: brightness(0) saturate(100%) invert(80%) sepia(53%) saturate(700%) hue-rotate(34deg) brightness(105%) contrast(102%);
  opacity: .9;
  cursor: pointer;
}


/* Improve readability of the homepage headline without changing its wording. */
main > .hero:not(.mini-hero) h1 {
  font-size: clamp(3rem, 5.8vw, 5.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  max-width: 760px !important;
}
@media (max-width: 760px) {
  main > .hero:not(.mini-hero) h1 {
    font-size: clamp(2.4rem, 8vw, 3.4rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
  }
}


/* Center the homepage computer illustration below the headline on narrow screens. */
@media (max-width: 760px) {
  main > .hero:not(.mini-hero) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "eyebrow" "title" "portrait" "intro" "actions" !important;
    gap: 8px 0 !important;
    padding: 28px 0 44px !important;
  }
  main > .hero:not(.mini-hero) > div:first-child { display: contents !important; }
  main > .hero:not(.mini-hero) > div:first-child > .eyebrow {
    grid-area: eyebrow !important;
    text-align: left !important;
  }
  main > .hero:not(.mini-hero) > div:first-child > h1 {
    grid-area: title !important;
    margin: 8px 0 10px !important;
    max-width: 100% !important;
    text-align: left !important;
    transform: translateX(10px) !important;
    font-size: clamp(2.4rem, 8vw, 3.4rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
  }
  main > .hero:not(.mini-hero) > .portrait {
    grid-area: portrait !important;
    width: min(220px, 72%) !important;
    height: 160px !important;
    min-height: 160px !important;
    margin: 0 auto 8px !important;
    border-radius: 22px !important;
  }
  main > .hero:not(.mini-hero) > .portrait::before,
  main > .hero:not(.mini-hero) > .portrait::after { display: none !important; }
  main > .hero:not(.mini-hero) > .portrait .tech-art { width: min(88%, 180px) !important; }
  main > .hero:not(.mini-hero) > div:first-child > .intro {
    grid-area: intro !important;
    max-width: none !important;
  }
  main > .hero:not(.mini-hero) > div:first-child > .actions {
    grid-area: actions !important;
    margin-top: 12px !important;
  }
}

main > .hero#info,
main > .hero#overmij,
main > #info-content { scroll-margin-top: 90px; }

header.wrap.nav > .brand { letter-spacing: .12em !important; }

header.wrap.nav > .brand { font-size: 1.25rem !important; }
@media (max-width: 900px) {
  header.wrap.nav > .brand { font-size: 0 !important; }
}

/* Certificate callout on the combined About page. */
.about-certificate{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 18px;margin:22px 0 34px;padding:18px 22px;border:1px solid rgba(139,189,115,.45);border-left:4px solid var(--green-soft,#8bbd73);border-radius:15px;background:linear-gradient(115deg,rgba(139,189,115,.12),rgba(29,41,32,.72))}
.about-certificate h3{margin:4px 0 0;color:var(--ink);font-size:1.18rem}
.about-certificate p{grid-column:1/-1;max-width:900px;margin:2px 0 0;color:var(--muted);line-height:1.65}
.about-certificate-status{justify-self:end;padding:5px 10px;border:1px solid rgba(223,157,99,.55);border-radius:999px;color:#ffd0a5;font-size:.76rem;font-weight:750}
.about-certificate-date{grid-column:1/-1;color:var(--muted);font-size:.84rem}
@media(max-width:600px){.about-certificate{grid-template-columns:1fr;padding:17px}.about-certificate-status{justify-self:start}.about-certificate p,.about-certificate-date{grid-column:1}}

/* Tighten the vertical gap between the Over mij title and its first section. */
body:has(main > .hero#overmij) main > .hero#overmij{padding-bottom:34px!important}
body:has(main > .hero#overmij) main > #over{padding-top:34px!important}
.about-cert-provider{display:block;margin-top:3px;color:var(--muted);font-size:.85rem;font-weight:650}

/* External site confirmation matching the Relim project link. */
.external-confirm-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:rgba(5,12,8,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.external-confirm-backdrop[hidden]{display:none!important}
.external-confirm-dialog{width:min(100%,460px);padding:32px;border:1px solid rgba(166,255,112,.32);border-radius:22px;background:rgba(22,39,28,.96);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(235,255,225,.08)}
.external-confirm-dialog .eyebrow{margin:0 0 10px}
.external-confirm-dialog h2{font-family:var(--serif);font-weight:500;letter-spacing:-.04em;line-height:1.05;font-size:2rem;margin:0 0 12px}
.external-confirm-dialog p:not(.eyebrow){color:var(--muted);margin:0}
.external-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;flex-wrap:wrap}
.external-confirm-actions button{font:inherit;font-weight:700;padding:11px 17px;border-radius:999px;border:1px solid rgba(166,255,112,.34);color:var(--ink);background:rgba(42,72,50,.56);cursor:pointer}
.external-confirm-actions button:last-child{background:rgba(166,255,77,.78);color:#142012;border-color:rgba(220,255,180,.56)}
.external-confirm-actions button:hover{filter:brightness(1.12)}
.external-confirm-actions button:focus-visible{outline:2px solid #d9ffa1;outline-offset:3px}

/* Group the personal story and skills in a clear, readable panel. */
.extra-info-panel{margin-top:30px;padding:26px 30px;border:1px solid rgba(139,189,115,.34);border-left:4px solid var(--green-soft,#8bbd73);border-radius:18px;background:linear-gradient(120deg,rgba(139,189,115,.1),rgba(29,41,32,.78));box-shadow:0 14px 34px rgba(0,0,0,.12)}
.extra-info-heading{margin-bottom:20px}
.extra-info-heading h3{margin:5px 0 0;color:var(--ink);font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,1.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.extra-info-panel .about-grid{display:block}
.extra-info-panel .about-grid p{max-width:900px;margin:0 0 14px;color:var(--muted);font-size:1rem;line-height:1.75}
.extra-info-panel .about-grid p:last-of-type{margin-bottom:0}
.extra-info-panel .skills{margin-top:22px}
@media(max-width:600px){.extra-info-panel{padding:20px;margin-top:22px}}

.project-art.five{background:linear-gradient(135deg,#23443a,#172c25)}
.project-art.six{background:linear-gradient(135deg,#2b493a,#192c23)}

/* Show the action prompt on the gaming and Netherlands cards only on hover/focus. */
.project-art.five .project-cta,.project-art.six .project-cta,.project-art.three .project-cta{position:absolute;left:50%;bottom:7px;z-index:4;transform:translate(-50%,6px);opacity:0;visibility:hidden;max-width:calc(100% - 20px);padding:3px 7px;border:1px solid rgba(195,244,180,.38);border-radius:999px;background:rgba(80,132,87,.28);color:#e7f6df;font:700 .58rem/1.2 var(--sans);letter-spacing:0;text-align:center;white-space:nowrap;backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.12);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.project:hover .project-art.five .project-cta,.project:focus-visible .project-art.five .project-cta,.project:hover .project-art.six .project-cta,.project:focus-visible .project-art.six .project-cta,.project:hover .project-art.three .project-cta,.project:focus-visible .project-art.three .project-cta{opacity:1;visibility:visible;transform:translate(-50%,0)}
.project-art.five>span:first-child,.project-art.six>span:first-child{grid-area:1/1;z-index:1;text-align:center}

/* Consistent footer with header color, comfortable spacing, and site links. */
body footer.footer{display:flex!important;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;width:100%!important;max-width:none!important;margin:30px 0 0!important;padding:22px max(24px,calc((100% - 1040px)/2))!important;border-top:1px solid #314537;background:rgba(22,32,24,.94);color:var(--muted);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:.82rem}
.footer-meta{display:grid;gap:5px;min-width:0}
body footer.footer .footer-copy{display:block;margin:0!important;white-space:nowrap}
.footer-protection{color:var(--muted);font-size:.76rem;line-height:1.45}
.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:8px 18px;flex-wrap:wrap}
.footer-links a{color:var(--muted);font-weight:650;text-decoration:none;transition:color .18s ease}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--green)}
@media(max-width:600px){body footer.footer{align-items:flex-start;flex-direction:column;gap:14px;padding:20px 18px!important}.footer-links{justify-content:flex-start;gap:9px 16px}}

/* Center the hosting and protection note in the footer. */
body footer.footer{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px}
.footer-meta{display:contents}
body footer.footer .footer-copy{grid-column:1;grid-row:1}
.footer-protection{grid-column:2;grid-row:1;justify-self:center;text-align:center;white-space:nowrap}
.footer-links{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:760px){body footer.footer{grid-template-columns:1fr;justify-items:center;gap:12px}.footer-meta{display:contents}body footer.footer .footer-copy{grid-column:1;grid-row:1}.footer-protection{grid-column:1;grid-row:2;white-space:normal}.footer-links{grid-column:1;grid-row:3;justify-self:center;justify-content:center}}

/* Separate linked hosting and security providers with their logo marks. */
.footer-providers{grid-column:2;grid-row:1;display:flex;align-items:center;justify-self:center;gap:9px}
.footer-provider{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 11px;border:1px solid rgba(139,189,115,.24);border-radius:999px;background:rgba(139,189,115,.07);color:var(--ink);font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.footer-provider:hover,.footer-provider:focus-visible{background:rgba(139,189,115,.16);border-color:rgba(166,255,112,.5);color:var(--ink);transform:translateY(-1px)}
.footer-logo{width:22px;height:22px;display:grid;place-items:center;flex:none}
.footer-logo img{display:block;width:22px;height:22px;max-width:none;object-fit:contain}
.footer-logo-strato{overflow:hidden;border-radius:4px;background:#fff}
.footer-logo-strato img{width:104px;height:22px;object-fit:cover;object-position:left center}
@media(max-width:760px){.footer-providers{grid-column:1;grid-row:2;justify-self:center;gap:6px}.footer-provider{gap:5px;padding:5px 8px;font-size:.73rem}.footer-links{grid-row:3!important}}

/* Blend provider names and logos into the footer instead of separate pills. */
.footer-provider-block{grid-column:2;grid-row:1;display:grid;justify-items:center;gap:5px}
.footer-provider-caption{color:var(--muted);font-size:.72rem;line-height:1.35;text-align:center}
.footer-providers{grid-column:auto;grid-row:auto;gap:22px}
.footer-provider{min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;font-size:.78rem}
.footer-provider:hover,.footer-provider:focus-visible{background:transparent;border:0;box-shadow:none;color:var(--green);transform:none}
.footer-logo-strato{background:transparent}
.footer-logo-strato img{filter:brightness(0) invert(1)}
@media(max-width:760px){.footer-provider-block{grid-column:1;grid-row:2;justify-self:center;gap:6px}.footer-providers{grid-column:auto;grid-row:auto;gap:14px}.footer-provider{font-size:.73rem}.footer-links{grid-row:3!important}}

/* Compact CLFL monogram logo, matching the site's forest green and lime palette. */
header.wrap.nav > .brand {
  display:inline-flex!important;
  grid-area:brand!important;
  align-items:center!important;
  justify-content:center!important;
  width:48px!important;
  height:42px!important;
  padding:4px!important;
  border:1px solid rgba(166,255,77,.25)!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,rgba(166,255,77,.13),rgba(166,255,77,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.12)!important;
  color:var(--ink,#edf5ed)!important;
  text-decoration:none!important;
  font-size:1rem!important;
  line-height:1!important;
  letter-spacing:normal!important;
  transition:border-color .18s ease,background .18s ease,transform .18s ease!important;
}
header.wrap.nav > .brand:hover,
header.wrap.nav > .brand:focus-visible {
  border-color:rgba(166,255,77,.65)!important;
  background:linear-gradient(145deg,rgba(166,255,77,.2),rgba(166,255,77,.07))!important;
  transform:translateY(-1px);
}
header.wrap.nav > .brand::before { content:none!important; display:none!important; }
.brand-monogram {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  align-items:center;
  justify-items:center;
  width:100%;
  height:100%;
  color:var(--ink,#edf5ed);
  font-size:.82rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.015em;
}
.brand-monogram span:nth-child(2),.brand-monogram span:nth-child(3){color:var(--green,#a6ff4d)}
@media(max-width:900px){header.wrap.nav > .brand{width:42px!important;height:38px!important;font-size:1rem!important}.brand-monogram{font-size:.76rem}}

/* Refined horizontal CLFL wordmark: tightly joined letters without a separate badge. */
header.wrap.nav > .brand {
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  padding:2px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ink,#edf5ed)!important;
  font-size:1.42rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.095em!important;
}
header.wrap.nav > .brand:hover,
header.wrap.nav > .brand:focus-visible {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:translateY(-1px);
}
.brand-monogram {
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start;
  width:auto;
  height:auto;
  gap:0;
  color:var(--ink,#edf5ed);
  font-size:inherit;
  font-weight:inherit;
  line-height:1;
  letter-spacing:-.095em;
}
.brand-monogram span {display:inline-block; margin:0 -.01em}
.brand-monogram span:nth-child(2){color:var(--green,#a6ff4d)}
.brand-monogram span:nth-child(3){color:var(--ink,#edf5ed)}
.brand-monogram span:nth-child(4){color:var(--green,#a6ff4d)}
@media(max-width:900px){header.wrap.nav > .brand{width:auto!important;height:auto!important;padding:2px 0!important;font-size:1.28rem!important}.brand-monogram{font-size:inherit}}

/* Calm, balanced CLFL wordmark in the original light header color. */
header.wrap.nav > .brand {
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  padding:2px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ink,#edf5ed)!important;
  font-family:var(--sans,Inter,ui-sans-serif,system-ui,sans-serif)!important;
  font-size:1.28rem!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  text-shadow:none!important;
}
header.wrap.nav > .brand:hover,
header.wrap.nav > .brand:focus-visible {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ink,#edf5ed)!important;
  transform:none;
}
.brand-monogram {
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start;
  width:auto;
  height:auto;
  gap:0;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:1;
  letter-spacing:inherit;
}
.brand-monogram span {display:inline; margin:0}
.brand-monogram span:nth-child(2),
.brand-monogram span:nth-child(3),
.brand-monogram span:nth-child(4) {color:inherit}
@media(max-width:900px){header.wrap.nav > .brand{width:auto!important;height:auto!important;padding:2px 0!important;font-size:1.2rem!important}.brand-monogram{font-size:inherit}}

/* Keep copyright attached to the footer's left edge as the layout grows. */
body footer.footer{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}
body footer.footer .footer-copy{grid-column:1!important;grid-row:1!important;justify-self:start!important;align-self:center!important;text-align:left!important;margin-left:0!important}
body footer.footer .footer-provider-block{grid-column:2!important;grid-row:1!important;justify-self:center!important}
body footer.footer .footer-links{grid-column:3!important;grid-row:1!important;justify-self:end!important}
@media(max-width:760px){body footer.footer .footer-copy{grid-column:1!important;grid-row:1!important;justify-self:start!important}body footer.footer .footer-provider-block{grid-column:1!important;grid-row:2!important;justify-self:center!important}body footer.footer .footer-links{grid-column:1!important;grid-row:3!important;justify-self:center!important}}

/* Match expired certificate notices on older page versions to the CV status. */
.certificate-expired{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:7px 13px!important;border:1px solid rgba(255,91,91,.42)!important;border-radius:999px!important;background:rgba(255,91,91,.09)!important;color:#ff7777!important;font-size:.82rem!important;font-weight:800!important;letter-spacing:.01em!important}
.certificate-expired::before,.about-certificate-status::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#ff5b5b;box-shadow:0 0 9px rgba(255,91,91,.55)}
.about-certificate-status{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:7px 13px!important;border:1px solid rgba(255,91,91,.42)!important;border-radius:999px!important;background:rgba(255,91,91,.09)!important;color:#ff7777!important;font-size:.82rem!important;font-weight:800!important;letter-spacing:.01em!important}

/* Modern compact CV section reused on the homepage. */
.home-cv-section{background:transparent}
.home-cv-section .section-head{align-items:end;margin-bottom:28px}
.home-cv-section .section-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(3.2rem,6.5vw,5rem);letter-spacing:-.065em;line-height:.98}
.home-cv-section .section-note{max-width:320px;font-size:.94rem}
.home-cv-content{max-width:940px;margin:0 auto}
.home-cv-section .cv-group + .cv-group{margin-top:42px}
.home-cv-section .cv-group-heading{display:flex;align-items:baseline;gap:14px;margin-bottom:13px;padding-bottom:8px;border-bottom:1px solid rgba(195,208,197,.18)}
.home-cv-section .cv-group-heading h3{margin:0;font-family:var(--serif);font-size:1.68rem;font-weight:500;letter-spacing:-.035em}
.home-cv-section .cv-group-heading>span{color:var(--green);font-size:.68rem;font-weight:750;letter-spacing:.12em}
.home-cv-section .cv-list{position:relative;border:0;padding-left:18px}
.home-cv-section .cv-list:before{position:absolute;content:"";left:4px;top:8px;bottom:20px;width:1px;background:linear-gradient(to bottom,rgba(166,255,77,.55),rgba(166,255,77,.08))}
.home-cv-section .cv-item{position:relative;display:grid;grid-template-columns:minmax(135px,170px) minmax(0,1fr);gap:22px;padding:3px 0 17px;border:0}
.home-cv-section .cv-item:last-child{padding-bottom:2px}
.home-cv-section .cv-item:before{position:absolute;content:"";left:-18px;top:8px;width:8px;height:8px;border:2px solid #8bbd73;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px rgba(166,255,77,.06)}
.home-cv-section .cv-date{padding-top:2px;color:#9fc58e;font-size:.75rem;line-height:1.5}
.home-cv-section .cv-item h4{margin:0 0 3px;font-size:1rem;line-height:1.45;font-weight:720}
.home-cv-section .cv-item h4 span{color:var(--muted);font-weight:520}
.home-cv-section .cv-item p{max-width:680px;margin:0;color:var(--muted);font-size:.87rem;line-height:1.55}
.home-cv-extras{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(220px,.75fr);align-items:start;gap:14px;margin-top:30px}
.home-certificate-card,.home-cv-languages{position:relative;min-width:0;padding:19px 20px;overflow:hidden;border:1px solid rgba(164,205,158,.2);border-radius:16px;background:linear-gradient(145deg,rgba(35,59,42,.76),rgba(19,32,24,.88));box-shadow:0 12px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(237,245,237,.035)}
.home-certificate-card:before,.home-cv-languages:before{position:absolute;content:"";left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,rgba(166,255,77,.48),rgba(166,255,77,0))}
.home-certificate-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.home-certificate-topline .eyebrow,.home-cv-languages>.eyebrow{font-size:.69rem;letter-spacing:.13em}
.home-certificate-status{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid rgba(255,91,91,.42);border-radius:999px;background:rgba(255,91,91,.09);color:#ff7777;font-size:.82rem;font-weight:800}
.home-certificate-status:before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#ff5b5b;box-shadow:0 0 9px rgba(255,91,91,.55)}
.home-certificate-card h3{margin:0 0 12px;font-family:var(--serif);font-size:1.55rem;font-weight:500;line-height:1.15}
.home-certificate-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0 0 12px;padding:9px 0;border-top:1px solid rgba(195,208,197,.13);border-bottom:1px solid rgba(195,208,197,.13)}
.home-certificate-dates p{display:flex;flex-direction:column;gap:3px;margin:0;color:var(--ink);font-size:.84rem;line-height:1.45}
.home-certificate-dates p span{color:var(--muted);font-size:.72rem;font-weight:600}
.home-certificate-dates p strong{font-size:.88rem;font-weight:700}
.home-certificate-card .home-certificate-description{max-width:680px;margin:0;color:#d4ddd5;font-size:.86rem;line-height:1.58}
.home-cv-languages{display:flex;flex-direction:column;gap:12px}
.home-cv-language-list{display:grid;grid-template-columns:1fr;gap:0}
.home-cv-language-list p{display:flex;flex-direction:column;gap:3px;margin:0;padding:9px 0;border-top:1px solid rgba(195,208,197,.13);font-size:.88rem;line-height:1.5}
.home-cv-language-list p:first-child{padding-top:0;border-top:0}
.home-cv-language-list strong{font-size:1.04rem}
.home-cv-language-list span{color:var(--muted);font-size:.8rem}
.home-cv-link{margin-top:22px}
@media(max-width:700px){.home-cv-section .section-head{margin-bottom:24px}.home-cv-section .section-note{margin-top:10px}.home-cv-section .cv-group + .cv-group{margin-top:34px}.home-cv-section .cv-item{grid-template-columns:1fr;gap:2px;padding-bottom:14px}.home-cv-extras{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:25px}}

/* Mobile footer alignment: center the content and keep the navigation balanced. */
@media(max-width:760px){
  body footer.footer{grid-template-columns:minmax(0,1fr)!important;justify-items:center;gap:5px;padding:8px 16px!important;}
  body footer.footer .footer-copy{grid-column:1!important;grid-row:1!important;justify-self:center!important;text-align:center!important;font-size:.74rem;line-height:1.15;}
  body footer.footer .footer-provider-block{grid-column:1!important;grid-row:2!important;justify-self:center!important;width:100%;gap:2px;}
  body footer.footer .footer-provider-caption{font-size:.65rem;line-height:1.15;}
  body footer.footer .footer-providers{display:flex;align-items:center;justify-content:center;justify-self:center;flex-wrap:nowrap;gap:8px;width:100%;}
  body footer.footer .footer-provider{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;white-space:nowrap;}
  body footer.footer .footer-logo,body footer.footer .footer-logo img{width:16px;height:16px;}
  body footer.footer .footer-logo-strato img{width:74px;height:16px;}
  body footer.footer .footer-links{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center!important;grid-column:1!important;grid-row:3!important;justify-self:center!important;width:100%;text-align:center;gap:0 clamp(12px,4vw,18px);line-height:1.1;}
  body footer.footer .footer-links a{justify-self:auto;font-size:.72rem;white-space:nowrap;}
}

/* Full text search suggestions use the live searchable content index. */
.site-search-suggestions{position:fixed;z-index:10000;left:16px;width:min(390px,calc(100vw - 32px));max-height:min(60vh,440px);overflow:auto;padding:7px;border:1px solid rgba(139,189,115,.34);border-radius:15px;background:rgba(15,27,19,.98);color:var(--ink,#edf5ed);box-shadow:0 16px 38px rgba(0,0,0,.36);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}.site-search-suggestion{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:10px;color:var(--ink,#edf5ed);text-decoration:none}.site-search-suggestion:hover,.site-search-suggestion:focus-visible{outline:none;background:rgba(166,255,77,.1)}.site-search-suggestion strong{font-size:.83rem;font-weight:750}.site-search-suggestion span{color:var(--muted,#c3d0c5);font-size:.72rem;line-height:1.4}.site-search-no-results{padding:12px;color:var(--muted,#c3d0c5);font-size:.83rem}.site-search-all-results{display:block;margin-top:4px;padding:10px 11px;border-top:1px solid rgba(195,208,197,.15);color:var(--green,#a6ff4d);font-size:.78rem;font-weight:750;text-decoration:none}.site-search-all-results:hover,.site-search-all-results:focus-visible{color:var(--lime,#c4ff70)}.search-result-snippet{opacity:.88}

/* Use the site's dark green palette for browser scrollbars. */
html{scrollbar-color:#718875 #111b14;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#111b14}
::-webkit-scrollbar-thumb{background:#718875;border:3px solid #111b14;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#91aa94}
::-webkit-scrollbar-corner{background:#111b14}

/* Keep the CLFL wordmark clean and glowing at every responsive size. */
header.wrap.nav > .brand,
header.wrap.nav > .brand .brand-monogram,
header.wrap.nav > .brand .brand-monogram span {
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
header.wrap.nav > .brand .brand-monogram span {
  color:var(--green,#a6ff4d)!important;
  text-shadow:0 0 2px rgba(166,255,77,.62),0 0 6px rgba(166,255,77,.3)!important;
}
@media(max-width:900px){
  header.wrap.nav > .brand{background:transparent!important;border:0!important;box-shadow:none!important}
  header.wrap.nav > .brand .brand-monogram span{background:transparent!important;box-shadow:none!important}
}
/* Keep each small-screen logo letter distinct so the glow never merges into a block. */
header.wrap.nav > .brand .brand-monogram{letter-spacing:0!important;gap:.04em!important}
header.wrap.nav > .brand .brand-monogram span{display:inline-block!important;margin:0!important;padding:0!important;letter-spacing:0!important;background:transparent!important;text-shadow:0 0 2px rgba(166,255,77,.62),0 0 6px rgba(166,255,77,.3)!important}