:root{
    --card-bg:  rgba(255,255,255,0.08);
    --text:     #313131;
    --muted:    #cbd5e1;
    --accent:   #38bdf8;
    --shadow:   0 20px 50px rgba(0,0,0,0.35);
    --radius:   18px;
  }

  *{ box-sizing: border-box; }
  html, body { height: 100%; margin: 0; color-scheme: dark; }
  body{
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text);

      linear-gradient(0deg, rgba(9,12,20,0.55), rgba(9,12,20,0.55)),
      url("https://aspirearts.uk/gifs/bck2025.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* optional “parallax” feel */
background-color: #ebeae6; /* solid fallback */

  }

  .wrap{
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .card{
    width: 100%;
    max-width: 970px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 18px;
    text-align: center;
    animation: fadeIn 600ms ease-out both;
   margin-top:22px;
  }



 /* White card – softened transparency */
.whitecard{
  width: 100%;
  max-width: 970px;

  /* Fallback solid white, then translucent white */
  background: #ffffff;                        /* fallback */
  background: rgba(255,255,255,0.77);         /* ~14% see-through */

  color: #0f172a;                             /* keep strong contrast */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--radius, 18px);

  /* A touch softer shadow when translucent */
  box-shadow: 0 16px 42px rgba(0,0,0,0.18);

  padding: 22px 20px;
  text-align: center;
  animation: fadeIn 600ms ease-out both;
  margin-top: 22px;

  /* Gentle frosted effect (supported browsers) */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Optional: slightly stronger border on very dark backdrops */
@media (prefers-color-scheme: dark){
  .whitecard{
    border-color: rgba(255,255,255,0.18);
  }
}


  /* Headings inside the white card */
  .whitecard h1,
  .whitecard h2,
  .whitecard h3{
    color: #0b1220;
    margin: 0 0 8px;
    line-height: 1.2;
  }

  /* Paragraph spacing */
  .whitecard p{
    margin: 0.5rem 0 0;
    color: #111827;                 /* readable body copy */
  }

  /* Links inside the white card */
  .whitecard a,
  .whitecard-link{
    color: #0f766e;                 /* teal accent (adjust if you have a brand color) */
    text-decoration: none;
    border-bottom: 1px solid rgba(15,118,110,0.25);
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .whitecard a:hover,
  .whitecard-link:hover{
    color: #115e59;
    border-bottom-color: rgba(17,94,89,0.45);
  }

  /* Reduce motion if the user prefers */
  @media (prefers-reduced-motion: reduce){
    .whitecard{ animation: none; }
  }

  /* Slightly tighter padding on small screens */
  @media (max-width: 520px){
    .whitecard{ padding: 16px 14px; }
  }
.whitecard:hover{
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.whitecard:hover{
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}


/* Size the clickable link */
.logo-link{
  display:inline-block;
  width:60%;
  max-width:290px;
  line-height:0;          /* remove inline gap */
  text-decoration:none;
}

/* Make the image fill the link */
.logo{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.35));
  user-select:none;
  border:0px solid #000;
  /* optional: ensure border doesn’t increase total box size */
  box-sizing:border-box;
}

  .logo {
    display: block;
    max-width: 100%;
    height: auto;
    /* Start slightly faded */
    filter: opacity(70%) contrast(110%) brightness(105%);
    transition: filter 0.4s ease; /* smooth fade */
  }

  .logo-link:hover .logo {
    /* On hover, full strength */
    filter: opacity(100%) contrast(100%) brightness(100%);
  }

/* === Primary Navigation === */
.site-nav{
  width:100%;
  max-width: 970px;
  margin: 6px auto 18px auto;   /* sits above your whitecard */
  padding: 0 10px;
}

.nav-list{
  list-style:none;
  margin:0; 
  padding:0;
  display:flex; 
  justify-content:center; 
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;              /* wrap on small screens */
}

.nav-link{
  --accent: #38b000;            /* brand green */
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;         /* pill */
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
  color: #0f172a;               /* dark text */
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .15s ease, 
              box-shadow .15s ease, 
              border-color .15s ease, 
              color .15s ease, 
              background-color .15s ease;
}

.nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  border-color: rgba(56,176,0,0.35);
  background: #f7fff3;          /* subtle green tint */
  color:#0b1220;
}

.nav-link:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Keyboard focus ring */
.nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,176,0,0.35), 0 6px 16px rgba(0,0,0,0.10);
  border-color: rgba(56,176,0,0.6);
}

/* Current page */
.nav-link[aria-current="page"],
.nav-link.is-active{
  background: #eaffdb;
  border-color: rgba(56,176,0,0.55);
  color: #145a00;
}

/* Compact spacing on small screens */
@media (max-width: 520px){
  .nav-link{ padding: 9px 12px; }
  .site-nav{ margin: 4px auto 14px auto; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-link{ transition: none; }
}


  h1{ margin:18px 0 6px; font-size:clamp(23px,4.6vw,40px); line-height:1.1; font-weight:300; letter-spacing:.2px; }
  .tagline{ margin:0 0 18px; font-size:clamp(14px,2.4vw,16px); color:var(--muted); }
  .pill{ display:inline-block; margin-top:16px; padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:var(--card-bg); font-size:14px; }
  .accent{ position:relative; display:inline-block; }
  .accent::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.85; }

/* Footer container */
/* Footer container */
.site-footer{
  margin-top:22px;
  padding:0; /* remove side gutter so panel can be truly full width */
}

/* Full-width footer panel */
.site-footer .footer-inner{
  width:100%;
  max-width:none;          /* remove previous 990px cap */
  margin:0;
  padding:14px 16px;
  text-align:center;

  color:#fff;
  background:rgba(9,12,20,0.66);
  border-top:1px solid rgba(255,255,255,0.16);
  border-bottom:1px solid rgba(255,255,255,0.16);
  border-left:none;
  border-right:none;
  border-radius:0;         /* square edges for full-bleed */
  box-shadow:none;         /* optional: remove drop shadow when full width */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}

/* Force footer links white + interactions (unchanged) */
.site-footer .footer-inner a,
.site-footer .footer-inner a:visited{
  color:#ffffff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.35);
  transition: color .2s ease, border-color .2s ease, opacity .2s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.site-footer .footer-inner a:hover{
  color:#eaffdb; border-bottom-color:rgba(56,176,0,0.65);
}
.site-footer .footer-inner a:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(56,176,0,0.35);
}

/* Footer nav pills (unchanged) */
.footer-nav{ width:100%; }
.footer-nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
}
.site-footer .footer-nav .nav-link{
  display:inline-block; line-height:1; font-weight:600; letter-spacing:.2px;
  padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.site-footer .footer-nav .nav-link:hover{
  transform:translateY(-1px);
  background:rgba(56,176,0,0.18);
  border-color:rgba(56,176,0,0.55);
  color:#eaffdb;
}
.site-footer .footer-nav .nav-link:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* Credit + social (unchanged) */
.footer-text{ font-size:13px; line-height:1.4; opacity:.95; }
.credit-link{ border-bottom:1px solid rgba(255,255,255,0.35); }
.social{ display:inline-flex; align-items:center; gap:10px; }
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  color:#ffffff; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.social-link svg{ width:20px; height:20px; display:block; }
.social-link:hover{
  transform:translateY(-1px);
  background:rgba(56,176,0,0.18);
  border-color:rgba(56,176,0,0.55);
  color:#eaffdb;
}

/* Small screens */
@media (max-width:480px){
  .site-footer .footer-inner{ padding:12px 12px; gap:10px; }
  .site-footer .footer-nav .nav-link{ padding:8px 11px; }
  .social-link{ width:36px; height:36px; }
}
/* Anchor for the brand logo and reserve space so center content doesn't overlap */
.site-footer .footer-inner{
  position: relative;      /* NEW */
  padding-left: 180px;      /* NEW: adjust if you change logo size */
}

/* Brand logo pinned to the extreme left edge */
.footer-brand{
  position: absolute;
  left: 16px;              /* tweak to taste */
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-bottom: 0;
}

.footer-brand img{
  height: 72px;            /* 32–44px works well */
  width: auto;
  display: block;
  filter: opacity(80%) contrast(110%) brightness(105%);
  transition: filter .25s ease, transform .15s ease;
}

.footer-brand:hover img,
.footer-brand:focus-visible img{
  filter: opacity(100%) contrast(100%) brightness(100%);
  transform: translateY(-1px);
}

/* Mobile: let the logo stack and center */
@media (max-width: 560px){
  .site-footer .footer-inner{
    padding-left: 16px;    /* remove reserved space */
  }
  .footer-brand{
    position: static;
    transform: none;
    margin-bottom: 8px;
    justify-content: center;
  }
  .footer-brand img{
    height: 62px;
  }
}




.select { 
    border: 1px solid #c4c4c4; 
    width: 275px; 
    font-size: 16px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.select:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

@media (max-width: 599px){
  .select{ width:90%; }
}

P.clear{
clear:both;
}

.smallselect { 
    border: 1px solid #c4c4c4; 
    width: 135px; 
    font-size: 13px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.smallselect:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 


/* Base button (pairs with your existing --card-bg, --accent, --text vars) */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: var(--card-bg);
  color: var(--text);
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 200ms ease,
    filter 120ms ease;
  /* make it work for <a> and <button> */
  appearance: none;
  -webkit-appearance: none;
}

.button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.button:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(56,189,248,0.45), /* accent ring */
    0 8px 24px rgba(0,0,0,0.4);
  border-color: rgba(56,189,248,0.55);
}

.button:disabled,
.button[disabled],
.button[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary (accented) variant */
.button--primary{
  background: linear-gradient(180deg, rgba(56,189,248,0.22), rgba(56,189,248,0.08));
  border-color: rgba(56,189,248,0.45);
}
.button--primary:hover{
  background: linear-gradient(180deg, rgba(56,189,248,0.28), rgba(56,189,248,0.12));
  border-color: rgba(56,189,248,0.6);
}

/* Sizes & helpers */
.button--sm{ padding:8px 14px; font-size:13px; }
.button--lg{ padding:14px 22px; font-size:15px; }
.button--block{ display:flex; width:100%; }

/* Optional: icon sizing if you drop an SVG inside */
.button svg{ width:1.05em; height:1.05em; display:block; }

/* === Aspire Arts button: dark glass, white text, green-hover === */
.button,
button.button,
input[type="submit"].button,
input[type="button"].button {
  -webkit-appearance: none;
  appearance: none;

  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  text-decoration: none;

  color: #ffffff;
  background: rgba(9,12,20,0.66);              /* dark translucent (matches footer/contact) */
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;                         /* pill */
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  transition: transform .15s ease,
              background .2s ease,
              border-color .2s ease,
              color .2s ease,
              box-shadow .2s ease;
}

/* Hover/focus: raise 2px and switch to #2a3e27, keep text white */
.button:hover,
button.button:hover,
input[type="submit"].button:hover,
input[type="button"].button:hover,
.button:focus-visible,
button.button:focus-visible,
input[type="submit"].button:focus-visible,
input[type="button"].button:focus-visible {
  transform: translateY(-2px);
  background: #2a3e27;
  border-color: #2a3e27;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.32);
  outline: none;
}

/* Active: settle back down a bit */
.button:active,
button.button:active,
input[type="submit"].button:active,
input[type="button"].button:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,0.24);
}

/* Disabled state */
.button[disabled],
button.button[disabled],
input[type="submit"].button[disabled],
input[type="button"].button[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Aspire Arts text input (white field on dark page) */
input.select[type="text"]{
  width: 100%;
  max-width: 600px;          /* cap width */
  box-sizing: border-box;

  background: #ffffff;       /* white field */
  color: #0f172a;            /* near-black text */
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.3;

  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Placeholder color */
input.select[type="text"]::placeholder{
  color: #6b7280;           /* muted gray */
}

/* Focus state with brand green */
input.select[type="text"]:focus{
  outline: none;
  border-color: rgba(56,176,0,0.65); /* #38b000 */
  box-shadow: 0 0 0 3px rgba(56,176,0,0.25);
}

/* Disabled/read-only states (optional) */
input.select[type="text"]:disabled,
input.select[type="text"][readonly]{
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}



/* Gallery grid */
.gallerygrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:24px auto 8px;
  width:100%;
  max-width:1200px; /* stretch wider if you like */
  padding:0 16px;
}

/* Each tile */
/* Update .gallerybox to hold image + caption */
.gallerybox{
  display:flex;
  flex-direction:column;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  background: var(--card-bg, rgba(255,255,255,0.08));
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  cursor:pointer;
  padding:0;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 200ms ease, background 150ms ease;
}
.gallerybox:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.14); }
.gallerybox:focus-visible{ outline:2px solid var(--accent, #38bdf8); outline-offset:2px; }

/* Ensure pointer cursor even when hovering child elements */
.gallerybox,
.gallerybox * {
  cursor: pointer;
}


/* Square thumbnail area */
.gallerythumb{
  aspect-ratio: 1 / 1;
  width:100%;
  overflow:hidden;
}
.gallerythumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Caption under each tile */
.gallerycaption{
  padding:10px 12px;
  font-size: 13px;
  color: var(--muted, #cbd5e1);
  line-height:1.35;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.16));
  border-top: 1px solid rgba(255,255,255,0.12);
  /* clamp to two lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Lightbox overlay */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(2px);
  display: grid;                 /* centers content and plays nice with overflow */
  place-items: center;
  padding: 24px;
  z-index: 9999;
  overflow: auto;              
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lightbox[hidden]{ display:none; }

.lightbox__img{
  display: block;
  max-width: min(92vw, 1400px);
  /* Use dynamic viewport units so Chrome/Safari account for UI bars */
  max-height: calc(100dvh - 120px); /* leaves room for padding & the close button */
  width: auto;
  height: auto;
  object-fit: contain;     
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  background:#111;
}

/* Fallback for older browsers that don't support dvh */
@supports not (height: 100dvh) {
  .lightbox__img { max-height: calc(100vh - 120px); }
}

/* Close button (X) — top-left to avoid menus */
.lightbox__close{
  position:fixed;
  top:14px; left:14px;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.24);
  background: rgba(0,0,0,0.45);
  color:#fff;
  font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform 120ms ease, background 150ms ease, border-color 150ms ease;
}
.lightbox__close:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
.lightbox__close:focus-visible{ outline:2px solid var(--accent, #38bdf8); outline-offset:2px; }

/* Prevent background scroll when lightbox is open */
.noscroll{ overflow:hidden; }

/* Responsive columns */
@media (max-width: 1024px){
  .gallerygrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px){
  .gallerygrid{ grid-template-columns: 1fr; padding:0 12px; }
}
  @keyframes fadeIn{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* If tiles are <button> elements, reset native look so Chrome shows pointer reliably */
button.gallerybox{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
}

/* Absolutely force the hand on the tile and all its children */
.gallerybox,
.gallerybox *, 
.gallerybox::before, 
.gallerybox::after{
  cursor: pointer !important;
  pointer-events: auto;
}



/* === Contact page social buttons (footer-style) === */
.contact-social{
  text-align: center;
  margin: 2rem auto;
  max-width: 700px;
}

.contact-social h2{
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
}

/* Dark translucent pill with white text */
.contact-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 0.6rem auto;
  padding: 14px 20px;
  max-width: 420px;

  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;

  border-radius: 999px;
  background: rgba(9,12,20,0.66);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  transition: transform .15s ease,
              background .2s ease,
              border-color .2s ease,
              color .2s ease,
              box-shadow .2s ease;
}

/* Force text (and icons using currentColor) to white by default */
.contact-link,
.contact-link *{
  color: #ffffff !important;
}

/* Hover/focus: raise 2px, dark green-grey background, keep white text */
.contact-link:hover,
.contact-link:focus-visible{
  transform: translateY(-2px);
  background: #2a3e27 !important;
  border-color: #2a3e27 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.32);
}

/* Icon sizing */
.contact-link .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.contact-link svg{
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor; /* inherits white */
}

/* Optional: a bit wider on large screens */
@media (min-width: 720px){
  .contact-social .contact-link{
    max-width: 520px;
  }
}






a {
color:#000;
background:transparent;
text-decoration:none;
}

a:visited {
color:#333;
background:transparent;
text-decoration:none;
}

a:active {
color:#333;
background:transparent;
text-decoration:none;
}

a:hover {
color:#000;
text-decoration:underline;
}

a[href] {
  cursor: pointer;
}

/* 1) Force the hand on links and anything inside them */
a[href],
a[href] *{
  cursor: pointer !important;
}

/* 2) Make purely decorative pseudo-elements ignore the mouse */
.accent::after{
  pointer-events: none;
}

/* 3) Make sure your “link components” are actually blocks */
a.logo-link,
a.social-link,
a.button{
  display: inline-flex; /* you already use inline-flex for social/button */
}

/* 4) If you ever mark a link as disabled, prevent hover confusion */
a[aria-disabled="true"],
a[disabled]{
  pointer-events: none;
  cursor: not-allowed !important;
}

a[href] img {
  cursor: pointer;
}

.popup-gallery a {
  display:block;
  cursor:pointer;
}