/* Athens Pathways mini-site theme (dark, minimal, photo-forward)
   One stylesheet, shared across all pages.
*/

:root{
  --bg:#07080b;
  --bg2:#0b0d13;
  --panel:rgba(255,255,255,.045);
  --panel2:rgba(255,255,255,.06);
  --text:#f3f5fb;
  --muted:rgba(243,245,251,.72);
  --muted2:rgba(243,245,251,.56);
  --line:rgba(255,255,255,.09);
  --accent:#67a8ff;
  --accent2:#ff5f8f;
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 18px 46px rgba(0,0,0,.45);
  --shadow2:0 10px 24px rgba(0,0,0,.35);
  --maxw:1120px;

  /* Hospitable widget styling hack (iframe filter).
     Tweak if the calendar becomes too low-contrast. */
  --widget-filter: invert(1) hue-rotate(180deg) brightness(1.14) contrast(1.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(103,168,255,.22), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(255,95,143,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2) 70%, #06070a);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--text)}
img{max-width:100%; height:auto; display:block}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 18px 56px;
}

/* ---------- Top bar ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(120%) blur(10px);
  background:rgba(7,8,11,.62);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.topbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.logo{
  width:34px;
  height:34px;
  object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
  opacity:.98;
}

.brand-text b{
  display:block;
  letter-spacing:.2px;
  font-size:14px;
}
.brand-text span{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--muted2);
}

.topnav{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
  overflow:visible;
  scrollbar-width:none;
}
.topnav::-webkit-scrollbar{display:none}

.navlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  transition: all .18s ease;
}
.navlink:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.navlink.active{
  color:var(--text);
  border-color:rgba(103,168,255,.25);
  background:rgba(103,168,255,.08);
}

.navtoggle{
  display:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
}
.navtoggle:hover{background:rgba(255,255,255,.06)}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(103,168,255,.95), rgba(255,95,143,.75));
  color:#0b0d13;
  font-weight:700;
  font-size:13px;
  border:0;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  white-space:nowrap;
}
.cta:hover{filter:brightness(1.02)}
.cta:active{transform:translateY(1px)}

/* ---------- Typography helpers ---------- */

.kicker{
  color:var(--muted);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.subhead{
  color:var(--muted);
  font-size:16px;
  max-width:62ch;
}
.section-title{
  font-size:18px;
  margin:0 0 10px;
  letter-spacing:.2px;
}
.muted{color:var(--muted)}
.small{font-size:13px; color:var(--muted)}
.divider{height:1px; background:rgba(255,255,255,.08); margin:18px 0}

/* ---------- Components ---------- */

.hero{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) + 6px);
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(103,168,255,.16), transparent 55%),
    radial-gradient(700px 420px at 90% 0%, rgba(255,95,143,.10), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  padding:clamp(26px, 4.2vw, 56px);
  margin-top:18px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20px;
  background-image:var(--hero-image);
  background-size:cover;
  background-position:center;
  filter: blur(12px) saturate(1.05) brightness(.62);
  transform:scale(1.08);
  opacity:.95;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(7,8,11,.78), rgba(7,8,11,.44) 55%, rgba(7,8,11,.78));
}

.hero > *{position:relative; z-index:1}

.hero h1{
  margin:10px 0 10px;
  font-size:clamp(28px, 4.2vw, 42px);
  line-height:1.12;
  letter-spacing:-.02em;
}
.hero .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.07)}
.btn:active{transform:translateY(1px)}

.card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
}

.pad{padding:18px}

.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-size:12px;
  background:rgba(255,255,255,.03);
}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:12px;
}

.qnav{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.q{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:13px;
}
.q:hover{background:rgba(255,255,255,.05)}

/* Grids */

.section{margin-top:22px}

.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.cards .card{grid-column: span 6}
.cards .card.full{grid-column: span 12}

.media{
  border-radius:calc(var(--radius) - 6px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  aspect-ratio: 16 / 9;
  min-height: 140px;
}
.media img{width:100%; height:100%; object-fit:cover; display:block}

.card h3{margin:0 0 6px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}

.card .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.grid{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.list{margin:10px 0 0; padding:0 0 0 18px; color:var(--muted)}
.list li{margin:6px 0}

.note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
}

/* ---------- Property page specifics ---------- */

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.gallery a{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
.gallery img{width:100%; height:140px; object-fit:cover; transition: transform .2s ease}
.gallery a:hover img{transform:scale(1.03)}

.more-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.review{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.avatar{
  width:38px;
  height:38px;
  border-radius:999px;
  background:rgba(103,168,255,.18);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.sidebar{
  position:sticky;
  top:84px;
  overflow:hidden;
}
.sidebar-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.stack{display:flex; flex-direction:column; gap:6px}

.iframe-shell{padding:0 14px 14px}
.widget-frame{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
}
.widget-frame iframe{
  width:100%;
  height:640px;
  border:0;
  display:block;
  filter: var(--widget-filter);
}

/* Float CTA on mobile */
.float-book{
  position:fixed;
  left:0; right:0;
  bottom:0;
  padding:12px 14px;
  background:rgba(7,8,11,.70);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.06);
  display:none;
  z-index:60;
}
.float-book .cta{width:100%;}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:100;
}
.lightbox[aria-hidden="false"]{display:flex}
.lb-inner{
  width:min(980px, 100%);
  background:rgba(11,13,19,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.lb-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.count{color:var(--muted); font-size:13px}
.lb-close{cursor:pointer}
.lb-img{width:100%; height:min(64vh, 620px); object-fit:contain; background:rgba(0,0,0,.35)}
.lb-nav{display:flex; justify-content:space-between; gap:10px; padding:12px 14px}

/* Booking modal */
.booking-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.70);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:110;
}
.booking-modal[aria-hidden="false"]{display:flex}
.bm-card{
  width:min(980px, 100%);
  background:rgba(11,13,19,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.bm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bm-body{padding:14px}
.bm-body .widget-frame iframe{height:min(78vh, 760px)}

/* Erasmus apply modal */
.apply-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:120;
}
.apply-modal[aria-hidden="false"]{display:flex}
.apply-card{
  width:min(720px, 100%);
  background:rgba(11,13,19,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.apply-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.apply-body{padding:14px}
.apply-body input, .apply-body textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:12px;
  outline:none;
  margin-top:8px;
}
.apply-body input:focus, .apply-body textarea:focus{
  border-color:rgba(103,168,255,.30);
  box-shadow:0 0 0 4px rgba(103,168,255,.14);
}


/* Amenities accordion */
.amenities details{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.025);
  border-radius:16px;
  padding:10px 12px;
}
.amenities summary{
  cursor:pointer;
  font-weight:700;
  color:var(--text);
  list-style:none;
}
.amenities summary::-webkit-details-marker{display:none}
.amenities summary:after{
  content:"▾";
  float:right;
  color:var(--muted2);
  margin-left:10px;
}
.amenities details[open] summary:after{content:"▴"}
.amenities ul{margin:10px 0 0; padding:0 0 0 18px; color:var(--muted)}
.amenities li{margin:6px 0}

/* ---------- Footer ---------- */

footer{
  margin-top:34px;
  padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap:18px;
  align-items:start;
}
.footer-col b{
  display:block;
  color:var(--text);
  margin-bottom:8px;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-col li{margin:8px 0}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr; }
  .sidebar{position:static}
  .float-book{display:block}
  .cards .card{grid-column: span 12}
  .media img{height:200px}
}

@media (max-width: 720px){
  .navtoggle{display:inline-flex}
  .topnav{display:none}
  .topnav.open{
    display:flex;
    position:absolute;
    left:12px;
    right:12px;
    top:64px;
    padding:10px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(7,8,11,.86);
    box-shadow:var(--shadow2);
  }
  .topnav.open{ flex-direction:column; align-items:stretch; gap:8px; overflow:visible; }
  .topnav.open > .navlink{ width:100%; }
  .topnav.open .navgroup{ width:100%; }
  .topnav.open .navgroup > .navlink{ flex:1; width:auto; }
  .topnav.open .dropdown{ position:static; top:auto; left:auto; min-width:0; width:100%; margin-top:8px; display:none; box-shadow:none; }
  .topnav.open details[open] .dropdown{ display:block; }
  .topbar-inner{position:relative}
  .brand{min-width:0}
  .brand-text span{display:none}
  .navgroup{ width:100%; }
  .navgroup > .navlink{ flex:1; }
  .navcaret{ flex:0 0 auto; }
}




/* Grouped nav items with a direct link + caret dropdown */
.navgroup{
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
}
.navgroup.active .navlink{ color:var(--text); border-color:rgba(103,168,255,.25); background:rgba(103,168,255,.08); }

.navcaret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  transition: all .18s ease;
}
.navcaret:hover{ color:var(--text); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); }
.navdrop[open] > summary.navcaret{ color:var(--text); background:rgba(255,255,255,.07); }

/* --- Dropdown nav (details/summary) --- */
.navdrop{ position:static; }
.navdrop > summary{ list-style:none; }
.navdrop > summary::-webkit-details-marker{ display:none; }
.navdrop.active > summary{ background: rgba(121,168,255,.16); border-color: rgba(121,168,255,.35); opacity:1; }
.navdrop[open] > summary{ background: rgba(255,255,255,.07); }

.dropdown{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(12,13,18,.94);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:none;
}
.navdrop[open] .dropdown{ display:block; }

.drop{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 12px;
  color: var(--text);
  font-weight:800;
  font-size: 13px;
  border:1px solid transparent;
}
.drop:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.drop.active{ background: rgba(121,168,255,.14); border-color: rgba(121,168,255,.28); }

@media (max-width: 980px){
  .dropdown{
    position: static;
    min-width: 0;
    margin-top: 8px;
    display: block;
    background: rgba(255,255,255,.03);
  }
  .navdrop[open] .dropdown{ display:block; }
}


/* Utility link style (used for subtle inline links) */
.smalllink{color:var(--text); opacity:.78; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18)}
.smalllink:hover{opacity:1; border-bottom-color:rgba(255,255,255,.32)}

.chiprow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); color:var(--text); text-decoration:none; font-weight:800; font-size:12px; opacity:.92}
.chip:hover{opacity:1; background:rgba(255,255,255,.07)}


/* Media cards (image + content) */
.card.media, .card.has-media { overflow:hidden; }
.card .media{
  aspect-ratio: 16/9;
  height: auto;
  background: #0f1117;
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
}
.card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: none;
}
.card .media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.35));
  pointer-events:none;
}
.card .pad{ padding:16px; }
.card .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.card .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.card .pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,236,241,.92);
  font-size:12px; font-weight:800;
}


/* Small fact lists inside cards */
.facts{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.facts li{
  display:flex;
  gap:10px;
  color:rgba(233,236,241,.90);
  font-size:13px;
  line-height:1.35;
}
.facts li::before{
  content:"";
  width:7px; height:7px;
  border-radius:99px;
  margin-top:6px;
  background: rgba(103,168,255,.75);
  flex:0 0 7px;
}


/* Image fallback */
.media.noimg{
  display:flex;
  align-items:flex-end;
  padding:14px;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(103,168,255,.22), rgba(0,0,0,0) 55%),
    radial-gradient(900px 360px at 85% 0%, rgba(255,165,90,.16), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.media.noimg::after{ background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.55)); }

/* Tighten long paragraphs inside cards */
.card p{ margin:10px 0 0; }

/* Small section intro spacing */
.section .muted{ max-width: 72ch; }


/* --- Homepage trust strip --- */
.trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.trust .t{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(233,236,241,.92);
  font-size:13px;
}
.trust .dot{
  width:8px; height:8px;
  border-radius:99px;
  background: rgba(103,168,255,.80);
}

/* --- Section chips (jump links) --- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,236,241,.92);
  font-size:13px;
  text-decoration:none;
}
.chip:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.chip b{ font-weight:700; }

/* --- Back to top button --- */
.toTop{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:999;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: all .18s ease;
}
.toTop.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.toTop .btn{
  border-radius:999px;
  padding:10px 12px;
}

/* --- Nav polish --- */
.navlink{ letter-spacing:.2px; }
.navlink:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.navlink.active{ box-shadow: inset 0 0 0 1px rgba(103,168,255,.10); }

/* Make card headings a bit more scannable */
.card h3{ line-height:1.15; }
.card .meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }

/* Image fallback makes broken images look intentional */
.media.noimg{
  display:flex;
  align-items:flex-end;
  padding:14px;
  min-height:160px;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(103,168,255,.22), rgba(0,0,0,0) 55%),
    radial-gradient(900px 360px at 85% 0%, rgba(255,165,90,.16), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}


/* Icon media for info cards */
.card .media.icon{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 260px at 20% -20%, rgba(103,168,255,.18), rgba(0,0,0,0) 55%),
    radial-gradient(900px 260px at 85% 0%, rgba(255,165,90,.12), rgba(0,0,0,0) 55%),
    rgba(255,255,255,.02);
}
.card .media.icon img{
  width:58px;
  height:58px;
  object-fit:contain;
  opacity:.94;
}


/* Fix for 12-column span rules on explicit grids */
.cards.cards-2 > .card,
.cards.cards-2 > a.card,
.cards.cards-3 > .card,
.cards.cards-3 > a.card,
.cards.cards-4 > .card,
.cards.cards-4 > a.card{
  grid-column: auto !important;
}


/* Compact cards (used on homepage "how" section) */
.cards.compact .pad{ padding:16px; }
.cards.compact h3{ margin: 10px 0 6px; font-size: 17px; }
.cards.compact p{ margin:0; font-size: 14.5px; line-height: 1.4; }
.cards.compact .row{ margin-top: 12px; gap: 10px; flex-wrap: wrap; }
.cards.compact .btn{ padding: 9px 11px; font-size: 13px; }
.cards.compact .media.icon img{ width:48px; height:48px; }


/* Robust span mapping for cards-2/3/4 (fixes overly narrow cards on desktop) */
.cards.cards-2 > .card,
.cards.cards-2 > a.card,
.cards.cards-3 > .card,
.cards.cards-3 > a.card,
.cards.cards-4 > .card,
.cards.cards-4 > a.card{
  grid-column: span 12 !important; /* default: stack */
}

@media (min-width: 960px){
  .cards.cards-2 > .card,
  .cards.cards-2 > a.card{ grid-column: span 6 !important; }

  .cards.cards-3 > .card,
  .cards.cards-3 > a.card{ grid-column: span 4 !important; }

  .cards.cards-4 > .card,
  .cards.cards-4 > a.card{ grid-column: span 3 !important; }
}


/* Homepage "how" section: allow cards to use more horizontal space */
.section.how .cards{ max-width: 980px; }
@media (min-width: 1200px){
  .section.how .cards{ max-width: 1040px; }
}


/* Hero actions (homepage) */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}


.footer-contact{ display:grid; gap:6px; }
.footer-legal{ margin-top:12px; line-height:1.45; }
.footer-divider{ margin-top:18px; }

.footer-meta{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  justify-content:space-between;
  align-items:center;
}

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-meta{ align-items:flex-start; }
}


/* Maintenance banner */
.banner{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,8,11,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  color:rgba(255,255,255,.86);
  font-size:14px;
}
.banner-inner .btn{
  padding:8px 10px;
}