:root{
    /* Brand */
    --brand:#f46f5d;         /* coral */
    --brand2:#ff9b8f;        /* light coral */
    --dark:#0a1334;          /* deep navy */
    --ink:#0f172a;           /* body */
    --muted:#365486;         /* helper */
    --grad:linear-gradient(90deg,#f46f5d,#ff9b8f);
  
    /* Accents */
    --ring:rgba(244,111,93,.35);
    --border:rgba(244,111,93,.22);
    --soft:0 16px 48px rgba(2,6,23,.08);
    --med:0 22px 64px rgba(2,6,23,.14);
  
    /* Layout */
    --container:1200px;
    --r-xl:20px; --r-lg:16px;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
    color:var(--ink); background:#fff; line-height:1.6;
  }
  
  .container{max-width:var(--container); margin-inline:auto; padding:0 20px}
  .section{padding:52px 0}
  
  /* ===== Topbar + Navbar =====
     Removed page-specific overrides to use global styles from styles.css
     for a single, uniform header across the site. */
  
  /* ===== Page hero ===== */
  .page-hero{
    padding:56px 0 28px;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(244,111,93,.08) 0, transparent 60%),
      radial-gradient(900px 500px at 90% 110%, rgba(10,19,52,.05) 0, transparent 60%);
  }
  .page-hero h1{
    margin:0 0 8px; font-size:clamp(28px,5vw,44px);
    background:linear-gradient(90deg,var(--dark),var(--brand) 60%,var(--dark));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .page-hero p{margin:0; color:var(--muted); max-width:900px}
  
  /* ===== Centres header ===== */
  .centres .centres__head{text-align:center; max-width:900px; margin:0 auto 18px}
  .centres .centres__head h2{
    margin:0 0 6px; font-size:clamp(26px,4.4vw,38px);
    background:linear-gradient(90deg,var(--dark),var(--brand) 60%,var(--dark));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .centres .centres__head p{color:var(--muted); margin:0 0 12px}
  .centres__meta{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
  .chip{
    padding:8px 12px; border-radius:999px; font-weight:900; font-size:12.5px;
    border:1px solid rgba(10,19,52,.1); color:var(--dark); background:#fff
  }
  .chip--brand{border-color:var(--border); background:color-mix(in srgb, var(--brand) 12%, #fff)}
  
  /* ===== Centre card ===== */
  .c-card{
    display:grid; grid-template-columns:minmax(320px,520px) 1fr; gap:16px; align-items:stretch;
    border:1px solid var(--border); border-radius:var(--r-xl); padding:16px; background:#fff;
    box-shadow:var(--soft); position:relative; overflow:hidden; margin-bottom:16px; will-change:transform;
  }
  .c-card::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.28) 30%,transparent 60%);
    transform:translateX(-120%); transition:transform .9s ease;
  }
  .c-card:hover{border-color:var(--ring); box-shadow:var(--med); transform:translateY(-1px)}
  .c-card:hover::after{transform:translateX(120%)}
  @media (max-width:1100px){ .c-card{grid-template-columns:1fr} }
  
  .c-card__map{border-radius:var(--r-lg); overflow:hidden; background:#f8fafc; position:relative; box-shadow:0 10px 30px rgba(2,6,23,.08); filter:saturate(1.05)}
  .c-card__map iframe{width:100%; height:100%; min-height:320px; border:0; display:block}
  
  .c-card__body{display:flex; flex-direction:column}
  .c-card__top{display:flex; justify-content:space-between; align-items:center; gap:10px}
  .city{margin:0; font-size:clamp(20px,2.8vw,26px); color:var(--dark)}
  .badges{display:flex; gap:8px; flex-wrap:wrap}
  .badge{
    font-weight:900; font-size:11.5px; padding:6px 10px; border-radius:999px;
    border:1px solid var(--border); color:var(--dark); background:color-mix(in srgb, var(--brand) 10%, #fff)
  }
  .badge--soft{background:#fff}
  
  .name{margin:6px 0 8px; color:var(--dark)}
  .info{display:grid; gap:6px; color:var(--ink)}
  .row{display:flex; gap:10px; align-items:flex-start; margin:0}
  .ic{width:20px; display:inline-grid; place-items:center; opacity:.8}
  
  .c-card__foot{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; padding-top:10px}
  .pill{
    font-weight:900; font-size:11.5px; padding:6px 10px; border-radius:999px;
    color:var(--dark); border:1px dashed var(--border); background:#fff
  }
  
  /* Reveal animation */
  .reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
  .reveal.is-visible{opacity:1; transform:translateY(0)}
  
  /* Header/nav styles are unified in global styles.css */