/* Add your own custom css here */

/* ---------- GLOBAL SCALE (desktop) ---------- */
:root {
  --site-scale: 0.8;          /* 80% of current size */
  --site-scale-inverse: 1.25; /* keeps map area at 100% */
}

@media (min-width: 960px) {
  body {
    zoom: var(--site-scale, 0.8);
  }

  /* Keep About page map section at original size */
  #about-map {
    zoom: var(--site-scale-inverse, 1.25);
  }
}

/* ---------- CONTACT / FOOTER (uni-studio-footer) ---------- */
/* Light mode (footer has dark bg): force WHITE text */
.uni-studio-footer { 
  color: #ffffff !important;
}

/* Dark mode (footer bg is white): force BLACK text */
html.dark .uni-studio-footer,
body.dark .uni-studio-footer,
.dark .uni-studio-footer,
html[data-theme="dark"] .uni-studio-footer,
body[data-theme="dark"] .uni-studio-footer { 
  color: #000000 !important;
}

/* Everything inside inherits footer color (kills template overrides) */
.uni-studio-footer h1,
.uni-studio-footer h2,
.uni-studio-footer h3,
.uni-studio-footer h4,
.uni-studio-footer h5,
.uni-studio-footer h6,
.uni-studio-footer p,
.uni-studio-footer a,
.uni-studio-footer li,
.uni-studio-footer span {
  color: inherit !important;
}

/* ---------- CONTACT ICON BUTTONS ---------- */
.contact-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  height: 76px !important;
  border: 2px solid currentColor !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.contact-icon-btn:hover {
  transform: scale(1.1) !important;
  background-color: currentColor !important;
  opacity: 0.9 !important;
}

.contact-icon-btn:hover svg {
  filter: invert(1) !important;
}

/* Make the SVG icon sit comfortably inside the box and scale with it */
.contact-icon-btn span[data-uk-icon],
.contact-icon-btn svg {
  width: 58% !important;
  height: 58% !important;
  display: block !important;
}

/* Optional variant: remove the box and let the icon fill the area
   Use class `contact-icon-btn--no-box` on the anchor to enable */
.contact-icon-btn--no-box {
  border: none !important;
  background: transparent !important;
}
.contact-icon-btn--no-box span[data-uk-icon],
.contact-icon-btn--no-box svg {
  width: 86% !important;
  height: 86% !important;
}

/* For boxless variant: draw a box behind the icon sized to the icon */
.contact-icon-btn--no-box {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.contact-icon-btn--no-box::before {
  content: "";
  position: absolute !important;
  left: 7% !important; /* (100% - 86%) / 2 to center the box behind icon */
  top: 7% !important;
  width: 86% !important;
  height: 86% !important;
  border: 2px solid currentColor !important;
  border-radius: 12px !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.contact-icon-btn--no-box svg,
.contact-icon-btn--no-box span[data-uk-icon] {
  z-index: 1 !important; /* ensure icon sits above the box */
}

/* ---------- SITE LOGO (header) ---------- */
.site-logo {
  display: block;
  width: auto;
  height: 320px; /* extra-large on-page logo */
  max-height: 320px;
  transition: height 180ms ease, opacity 180ms ease, filter 180ms ease;
  /* Default/day mode: show the SVG's original colors (no forced filter) */
  filter: none !important;
}

/* ---------- SITE LOGO THEME COLOR (day/night) ---------- */
/* Dark mode: make the logo appear white for contrast. We use invert and brightness
   which works for most monochrome or single-color SVG logos. If your SVG contains
   multiple colors you can replace this with a dedicated white SVG file and swap
   the `src` via JS instead. */
html.uk-dark .site-logo {
  filter: invert(1) brightness(1.05) !important; /* renders logo as light/white */
}

/* When navbar becomes sticky, reduce logo size to match the small GC */
.uk-sticky .site-logo,
.uni-header .uk-sticky .site-logo,
.uk-sticky.uk-active .site-logo {
  height: 160px !important; /* shrink when sticky but still very large */
  max-height: 160px !important;
}

@media (max-width: 640px) {
  .site-logo { height: 240px; max-height: 240px; }
  .uk-sticky .site-logo { height: 120px; max-height: 120px; }
}

/* Contact section visual tweaks */
.uni-studio-footer #contact h2 {
  margin-bottom: 8px !important;
}
.uni-studio-footer #contact .contact-rule {
  width: 140px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  margin: 12px auto !important;
  border-radius: 2px;
}
.uni-studio-footer #contact p.uk-text-large {
  margin-bottom: 10px !important;
}
.uni-studio-footer .contact-links {
  margin-top: 10px !important;
  gap: 28px !important;
}
.uni-studio-footer .footer-bottom-rule {
  width: 140px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  margin: 28px auto !important;
  border-radius: 2px;
}

/* Make dividers dark when the site is in 'dark' (light-background) theme */
html.uk-dark .uni-studio-footer #contact .contact-rule {
  background: rgba(0,0,0,0.95) !important;
}

html.uk-dark .uni-studio-footer .footer-bottom-rule {
  background: rgba(0,0,0,0.95) !important;
}

/* Reduce the large default footer spacing so the block feels tighter */
.uni-studio-footer .uk-margin-xlarge-top {
  margin-top: 28px !important;
}

/* Neutralize hard-coded utility color classes inside the footer */
.uni-studio-footer .uk-text-white,
.uni-studio-footer .uk-text-gray-90,
.uni-studio-footer .dark\:uk-text-gray-90 {
  color: inherit !important;
}

/* UIkit icons should follow current text color */
.uni-studio-footer [data-uk-icon],
.uni-studio-footer svg.uk-icon {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Preserve color for Leaflet map tiles and hover images on About */
#about-map img,
#world-map img,
.leaflet-container img {
  filter: none !important;
}

/* ---------- CONTACT LINKS ROW ---------- */
.contact-links {
  display: flex;
  gap: 32px;            /* much wider spacing between icons */
  justify-content: center;
  align-items: center;
  margin-top: 24px;     /* extra space under the paragraph */
}

/* Icons keep the same color as text, with a subtle hover fade */
.contact-links a span[data-uk-icon] {
  color: currentColor !important;
  opacity: 1 !important;
}
.contact-links a:hover span[data-uk-icon] {
  opacity: 0.7 !important;
}

/* Larger click/touch target around each icon (no change to line thickness) */
.uni-studio-footer .contact-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Larger contact icons without increasing stroke thickness */
.uni-studio-footer .contact-links .uk-icon svg {
  width: 96px;
  height: 96px;
}

@media (min-width: 1200px) {
  .uni-studio-footer .contact-links .uk-icon svg {
    width: 128px;
    height: 128px;
  }
}

@media (max-width: 640px) {
  .uni-studio-footer .contact-links .uk-icon svg {
    width: 72px;
    height: 72px;
  }
}

/* Keep lines thin even when scaled up */
.uni-studio-footer .contact-links .uk-icon svg * {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.1;         /* thin lines */
  fill: none;
  shape-rendering: geometricPrecision;
}

/* ---------- OVERRIDES: BIGGER ICONS + FILLED LINKEDIN ---------- */

/* Make the LinkedIn icon a filled glyph (override the outline rule above) */
.uni-studio-footer .contact-links [data-uk-icon*="linkedin"] svg *,
.uni-studio-footer .contact-links [uk-icon*="linkedin"] svg *,
.uni-studio-footer .contact-links a span[data-uk-icon*="linkedin"] svg *,
.uni-studio-footer .contact-links a [uk-icon*="linkedin"] svg * {
  fill: currentColor !important;
  stroke: none !important;
  vector-effect: none;
}

/* Make the icons MUCH larger and responsive (keeps same ratio) */
.uni-studio-footer .contact-links .uk-icon svg {
  width: clamp(140px, 18vmin, 260px) !important;
  height: clamp(140px, 18vmin, 260px) !important;
}


/* ---------- ICON SIZE (smaller & side-by-side) ---------- */
:root {
  /* Smaller default so icons sit side-by-side on most screens */
  --contact-icon-size: clamp(50px, 6vmin, 62px);
}

@media (max-width: 600px) {
  :root { --contact-icon-size: clamp(80px, 18vw, 120px); }
}

/* Tighter gap; ensure row layout and allow wrapping if needed */
.uni-studio-footer .contact-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: clamp(16px, 3vmin, 32px) !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Ensure the svg follows the variable size */
.uni-studio-footer .contact-links .uk-icon svg,
.uni-studio-footer .contact-links [data-uk-icon] svg {
  width: var(--contact-icon-size) !important;
  height: var(--contact-icon-size) !important;
}
/* =============================
   EXPERIENCE PAGE (scoped styles)
   These rules only apply on pages whose <body> has class "page-experience"
   so other sections/pages remain unchanged.
   ============================= */

.page-experience .xp-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;             /* ensure overlays layer correctly */
  min-height: 260px;
}

/* Base photo background (set per card via --xp-img: url('...')) */
.page-experience .xp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--xp-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 600ms ease;
  z-index: 0;
}

/* Legibility overlay */
.page-experience .xp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.60));
  z-index: 0;
  transition: opacity 300ms ease;
}

.page-experience .xp-card:hover::before { transform: scale(1.05); }
.page-experience .xp-card:hover::after  { opacity: .45; }

/* Content sits above image/overlay */
.page-experience .xp-card .xp-card-inner {
  position: relative;
  z-index: 1;
  color: #ffffff;                  /* readable on dark overlay */
}

/* Graceful fallback if the cover image is missing */
.page-experience .xp-card.xp-noimg::before {
  background-image: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
.page-experience .xp-card.xp-noimg::after {
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.40));
}

/* Hover mosaic preview (non-blocking if images absent) */
.page-experience .xp-mosaic {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.page-experience .xp-mosaic .xp-tile {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.page-experience .xp-card:hover .xp-mosaic .xp-tile {
  opacity: 1;
  transform: translateY(0);
}

/* Split-2 specific: tiles must be visible on hover */
.page-experience .xp-card.xp-split-2:hover .xp-mosaic .xp-tile,
.page-experience .xp-card.xp-split-2:hover .xp-mosaic .t1,
.page-experience .xp-card.xp-split-2:hover .xp-mosaic .t2 {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Removed old five-tile layout rules - using CSS Grid instead */

@media (min-width: 1200px) {
  .page-experience .xp-card { min-height: 300px; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .page-experience .xp-card::before { transition: none; }
  .page-experience .xp-card::after { transition: none; }
  .page-experience .xp-mosaic .xp-tile { transition: none; }
}
/* ===== EXPERIENCE: 2‑tile split layout (Handshake) ===== */
/* Removed old rules that conflicted with grid layout - using CSS Grid instead */
/* ===== EXPERIENCE — finishing adjustments (scoped) ===== */

/* 1) Taller responsive cards for better photo composition */
.page-experience .xp-card {
  min-height: clamp(300px, 32vw, 400px);
}

/* 2) Full-bleed imagery — remove inner card padding */
.page-experience .xp-card.uk-card-body {
  padding: 0;
}

/* 3) Clickable overlay above everything; title above tiles */
.page-experience .xp-card > a.uk-position-cover { z-index: 3; }
.page-experience .xp-card .xp-card-inner       { z-index: 2; }
.page-experience .xp-mosaic                    { z-index: 1; }

/* Removed - using CSS Grid layout instead */

/* ===== EXPERIENCE — definitive overrides (robust) ===== */

/* Put the COVER directly on the card element (more robust than ::before) and make cards larger */
.page-experience .xp-card {
  min-height: clamp(320px, 35vw, 450px) !important;
  background-image: var(--xp-img, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Remove inner padding so images are full-bleed */
.page-experience .xp-card.uk-card-body { padding: 0 !important; }

/* UIkit card backgrounds must be transparent so the cover is visible */
.page-experience .xp-card.uk-card,
.page-experience .xp-card.uk-card-default { background-color: transparent !important; }

/* Disable previous ::before cover layer completely */
.page-experience .xp-card::before { content: none !important; }

/* Keep a legibility overlay (lighter so the cover shows) */
.page-experience .xp-card::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.50)) !important;
  pointer-events: none;
}

/* Clickable overlay above everything; then title; then hover tiles */
.page-experience .xp-card > a.uk-position-cover { z-index: 10 !important; pointer-events: auto !important; }
.page-experience .xp-card .xp-card-inner       { z-index: 9 !important; }
.page-experience .xp-mosaic                    { z-index: 8 !important; }

/* Two-tile split: each side fills half */
.page-experience .xp-card.xp-split-2 .xp-mosaic .t1,
.page-experience .xp-card.xp-split-2 .xp-mosaic .t2 {
  background-size: cover !important;
}
.page-experience .xp-card.xp-split-2 .xp-mosaic .t1 { background-position: 25% center !important; }
.page-experience .xp-card.xp-split-2 .xp-mosaic .t2 { background-position: 75% center !important; }

/* No seam between halves */
.page-experience .xp-card.xp-split-2 .xp-mosaic .t1::after,
.page-experience .xp-card.xp-split-2 .xp-mosaic .t2::after { display: none !important; }
.page-experience .xp-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important; /* preserve rounded corners */
}

/* Mosaic must perfectly cover the card */
.page-experience .xp-mosaic{
  position: absolute !important;
  inset: 0 !important;                 /* top:0 right:0 bottom:0 left:0 */
  /* Layout is configurable per-card via CSS variables set on the .xp-card element.
     Defaults match the previous two-column layout. */
  display: grid !important;
  grid-template-columns: var(--xp-grid-cols, 1fr 1fr) !important;
  grid-template-rows: var(--xp-grid-rows, 1fr) !important;
  gap: var(--xp-grid-gap, 0) !important;
  padding: var(--xp-grid-padding, 0) !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  pointer-events: none !important;      /* don't block clicks */
  z-index: 8 !important;                 /* below title, above cover */
}

/* Readability overlay above tiles, below title */
.page-experience .xp-card::after{
  z-index: 8 !important;                 /* darken both halves on hover */
}

/* Tiles fill their half completely */
.page-experience .xp-mosaic .xp-tile,
.page-experience .xp-mosaic .t1,
.page-experience .xp-mosaic .t2{
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;         /* neutralize older absolute rules */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Requested focal points */
.page-experience .xp-card.xp-split-2 .xp-mosaic .t1{ background-position: 25% 60% !important; }
.page-experience .xp-card.xp-split-2 .xp-mosaic .t2{ background-position: 75% center !important; }

/* Chromie-specific mosaic (left full height, right stacked) */
.page-experience .xp-card.xp-chromie .xp-mosaic{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0 !important;
}
.page-experience .xp-card.xp-chromie .xp-mosaic .t1{
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important; /* span both rows */
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
}
.page-experience .xp-card.xp-chromie .xp-mosaic .t2{
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
}
.page-experience .xp-card.xp-chromie .xp-mosaic .t3{
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
}
.page-experience .xp-card.xp-chromie .xp-mosaic .t4,
.page-experience .xp-card.xp-chromie .xp-mosaic .t5{
  display: none !important;
}

/* Handshake_AI hover-right: fit entire photo with white background */
.page-experience .xp-card.xp-split-2 .xp-mosaic .t2 {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
  background-position: center !important;
}

/* Mastec Civil cover: fit entire photo with white background */
.page-experience .xp-card.xp-mastec {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
  background-position: center !important;
}

/* ===== Mastec Civil: 4-tile hover layout (scoped) ===== */
/* Left takes 2/3 width (columns 1-6), right side split into quadrants */
.page-experience .xp-card.xp-mastec .xp-mosaic{
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  grid-template-rows: 1fr 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}
/* Left tile (t1): columns 1-6, rows 1-3 (full height, 2/3 width) */
.page-experience .xp-card.xp-mastec .xp-mosaic .t1 { 
  grid-column: 1 / 7 !important; 
  grid-row: 1 / 4 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Top-right tile (t2): columns 7-9, rows 1-2 */
.page-experience .xp-card.xp-mastec .xp-mosaic .t2 { 
  grid-column: 7 / 10 !important; 
  grid-row: 1 / 3 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Bottom-left tile (t3): column 7, row 3 */
.page-experience .xp-card.xp-mastec .xp-mosaic .t3 { 
  grid-column: 7 / 8 !important; 
  grid-row: 3 / 4 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Bottom-right tile (t4): columns 8-9, row 3 */
.page-experience .xp-card.xp-mastec .xp-mosaic .t4 { 
  grid-column: 8 / 10 !important; 
  grid-row: 3 / 4 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center 20% !important;
}

/* Ensure Mastec tiles are visible on hover (inherit global animation) */
.page-experience .xp-card.xp-mastec:hover .xp-mosaic .xp-tile { opacity: 1 !important; transform: translateY(0) !important; }

/* ===== Kimberly-Clark: Pinwheel hover layout (scoped) ===== */
/* True pinwheel: specific grid spans for each image with no empty space */
.page-experience .xp-card.xp-kimberly .xp-mosaic{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}
/* Top-left tile (t1): row 1, columns 1-2 */
.page-experience .xp-card.xp-kimberly .xp-mosaic .t1 { 
  grid-column: 1 / 3 !important; 
  grid-row: 1 / 2 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Top-right tile (t2): rows 1-2, column 3 */
.page-experience .xp-card.xp-kimberly .xp-mosaic .t2 { 
  grid-column: 3 / 4 !important; 
  grid-row: 1 / 3 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Center tile (t3): row 2, column 2 */
.page-experience .xp-card.xp-kimberly .xp-mosaic .t3 { 
  grid-column: 2 / 3 !important; 
  grid-row: 2 / 3 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center 32% !important;
}
/* Bottom-left tile (t4): rows 2-3, column 1 */
.page-experience .xp-card.xp-kimberly .xp-mosaic .t4 { 
  grid-column: 1 / 2 !important; 
  grid-row: 2 / 4 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Bottom-right tile (t5): row 3, columns 2-3 */
.page-experience .xp-card.xp-kimberly .xp-mosaic .t5 { 
  grid-column: 2 / 4 !important; 
  grid-row: 3 / 4 !important; 
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Ensure Kimberly tiles are visible on hover (inherit global animation) */
.page-experience .xp-card.xp-kimberly:hover .xp-mosaic .xp-tile { opacity: 1 !important; transform: translateY(0) !important; }

/* =============================
   PROJECTS PAGE (scoped styles)
   Mirrors the experience card layout but keeps hover to a simple cover zoom.
   ============================= */
.page-projects .xp-card {
  position: relative;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  min-height: clamp(280px, 32vw, 400px);
  aspect-ratio: 1 / 1;
  background: var(--xp-img-bg, transparent);
  --xp-title-height: calc(100% / 6);
}
.page-projects .xp-card .xp-card-cover {
  grid-row: 2 / 7;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: var(--xp-img, none);
  background-size: var(--xp-img-size, cover);
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--xp-img-bg, transparent);
  z-index: 0;
}
.page-projects .xp-card.uk-card-body { padding: 0 !important; }
.page-projects .xp-card.uk-card,
.page-projects .xp-card.uk-card-default { background-color: transparent !important; }
.page-projects .xp-card::before {
  content: "";
  position: absolute;
  inset: var(--xp-title-height) 0 0 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.52)),
    var(--xp-img, none);
  background-size: cover, var(--xp-img-size, cover);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transform: scale(1.02);
  transition: transform 450ms ease;
  z-index: 1;
}
.page-projects .xp-card::after {
  content: "";
  position: absolute;
  inset: var(--xp-title-height) 0 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.55));
  z-index: 2;
  transition: opacity 250ms ease;
}
.page-projects .xp-card:hover::before {
  transform: scale(1.06);
  filter: saturate(1.35) contrast(1.08) brightness(1.06);
}
.page-projects .xp-card:hover::after  { opacity: .12; }
.page-projects .xp-card .xp-card-inner { 
  position: relative; 
  z-index: 3; 
  color: #0c0c0f;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: start;
  padding: 12px 18px;
  margin: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.page-projects .xp-card .xp-card-inner.xp-card-inner--right {
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}
.dark .page-projects .xp-card .xp-card-inner { color: #f4f4f4; }
.page-projects .xp-card > a.uk-position-cover { z-index: 4; }
/* Ensure any leftover mosaic markup stays hidden on projects */
.page-projects .xp-mosaic { display: none !important; }
/* Keep project images/videos in full color */
.page-projects img,
.page-projects video { filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .page-projects .xp-card::before,
  .page-projects .xp-card::after { transition: none; }
}

/* Project modals: wide two-column layout with media slider + text */
.page-projects .project-modal { padding: clamp(16px, 3vw, 32px) !important; }
.page-projects .project-modal .uk-modal-dialog {
  background: #ffffff;
  width: 96vw;
  max-width: 1440px;
}
.dark .page-projects .project-modal .uk-modal-dialog { background: #0c0c0f; }
.page-projects .project-modal .swiper {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 5 / 4;
  max-height: clamp(420px, 70vw, 920px);
}
.page-projects .project-modal .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.page-projects .project-modal .swiper-slide.media-bg-black { background: #000000; }
.page-projects .project-modal .swiper-slide.media-bg-white { background: #ffffff; }
.dark .page-projects .project-modal .swiper-slide.media-bg-white { background: #0f1117; }
.page-projects .project-modal .swiper-slide img,
.page-projects .project-modal .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: inherit;
  filter: none !important;
}
.page-projects .project-modal .swiper-button-prev,
.page-projects .project-modal .swiper-button-next {
  color: #0f172a;
}
.dark .page-projects .project-modal .swiper-button-prev,
.dark .page-projects .project-modal .swiper-button-next { color: #fff; }
.page-projects .project-modal .project-modal-text {
  padding: clamp(12px, 2vw, 20px);
  color: #ffffff;
  gap: 12px;
}
.page-projects .project-modal .project-modal-text p,
.page-projects .project-modal .project-modal-text li { color: #e6e9f2; }
.dark .page-projects .project-modal .project-modal-text { color: #ffffff; }
.dark .page-projects .project-modal .project-modal-text p,
.dark .page-projects .project-modal .project-modal-text li { color: #e6e9f2; }
.page-projects .project-modal h3 { color: inherit; }
.page-projects .project-modal .uk-text-meta { color: #d6d9e4; }
.dark .page-projects .project-modal .uk-text-meta { color: #d6d9e4; }
.page-projects .project-modal .uk-modal-close-default {
  color: inherit;
  top: 14px;
  right: auto;
  left: 14px;
  background: rgba(0,0,0,0.12);
  border-radius: 50%;
}
.dark .page-projects .project-modal .uk-modal-close-default { background: rgba(255,255,255,0.16); color: #fff; }
@media (max-width: 960px) {
  .page-projects .project-modal .project-modal-text { padding-top: 0; }
}
/* === HERO INTRO: circular headshot with wrapped text =================== */
.hero-intro {
  max-width: 1100px;
  margin: 32px auto 0;
}

.hero-intro .hero-headshot {
  float: right;
  width: clamp(180px, 28vw, 360px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  /* make text wrap to the true circle */
  shape-outside: circle(50%);
  -webkit-shape-outside: circle(50%);
  margin: 0 0 1rem 2rem; /* space to the left & bottom of the image */
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.12);
  filter: saturate(1.2) !important;
  -webkit-filter: saturate(1.2) !important;
}

/* HERO INTRO — Typographic sizing (bigger & responsive) */
.hero-intro h1 {
  line-height: 1.08;
  /* scales with viewport, but stays readable on small/large screens */
  font-size: clamp(32px, 4.8vw, 64px);
}
.hero-intro p  {
  line-height: 1.66;
  /* bump paragraph size so it's comfortably readable */
  font-size: clamp(18px, 1.6vw, 24px);
}

/* Stack the headshot nicely on small screens */
@media (max-width: 960px) {
  .hero-intro .hero-headshot {
    float: none;
    display: block;
    margin: 0 auto 16px;
    width: 200px;
    shape-outside: none;
    -webkit-shape-outside: auto;
  }
  .hero-intro { margin-top: 12px; }
  .hero-intro h1 { text-align: center; }
}
/* === CONTACT — Remove squares, keep only icons, and size anchors ======= */
/* Kill any border/box coming from template helpers in ALL themes */
.uni-studio-footer .contact-links a,
.contact-icon-btn,
.contact-icon-btn--no-box {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Nuke the faux box behind the icon entirely */
.contact-icon-btn--no-box::before { display: none !important; }

/* Make the clickable area match the icon size and center the glyph */
.uni-studio-footer .contact-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--contact-icon-size) !important;
  height: var(--contact-icon-size) !important;
  padding: 0 !important;
}

/* Ensure the icon always sits above any leftover decoration */
.uni-studio-footer .contact-links .uk-icon,
.uni-studio-footer .contact-links [data-uk-icon] {
  position: relative !important;
  z-index: 2 !important;
}

/* Prevent light/dark theme from altering outlines — we show only glyphs */
.uni-studio-footer .contact-links .uk-icon svg,
.uni-studio-footer .contact-links [data-uk-icon] svg {
  outline: none !important;
}