@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --gold:#B8860B;
  --gold-light:#D4AF37;
  --ink:#1f2937;
  --muted:#6b7280;
  --navy:#111827;
  --border:#e5e7eb;
  --max:1200px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

html{
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Inter',sans-serif;
  background:#fff;
  color:var(--ink);
  line-height:1.8;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  -webkit-tap-highlight-color:transparent;
}

/* ---------- NAVIGATION ---------- */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 70px;
  background:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
  position:sticky;
  top:0;
  z-index:1000;
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--navy);
}

nav img{
  width:56px;
  height:56px;
  object-fit:contain;
}

.brand-name{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:19px;
  color:var(--navy);
  letter-spacing:.2px;
}

nav ul{
  display:flex;
  gap:30px;
  list-style:none;
}

nav a{
  text-decoration:none;
  color:#111827;
  font-weight:500;
  transition:color .2s ease;
}

nav a:hover,
nav a:focus-visible,
nav a.active{
  color:var(--gold);
}

nav a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:3px;
}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}

.nav-toggle span{
  width:100%;
  height:2.5px;
  background:var(--navy);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7.5px) rotate(-45deg);
}

/* ---------- HERO ---------- */
.hero{
  padding:90px 80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px;
  background:#fafafa;
  min-height:90vh;
}

.hero-text{
  width:50%;
}

.hero-text h1{
  font-size:58px;
  line-height:1.15;
  font-family:'Playfair Display',serif;
  margin-bottom:20px;
  color:var(--navy);
}

.hero-text p{
  font-size:19px;
  color:var(--muted);
  margin-bottom:30px;
  max-width:520px;
}

.hero-media{
  width:42%;
  display:flex;
  justify-content:center;
}

.hero-media img{
  width:100%;
  max-width:380px;
  animation:float 4s infinite ease-in-out;
}

.btn{
  padding:15px 35px;
  background:var(--gold);
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:8px;
  display:inline-block;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}

.btn:hover{
  background:#9c7209;
  transform:translateY(-2px);
}

.btn:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}

/* ---------- SECTIONS ---------- */
section{
  padding:90px 80px;
}

.section-title{
  font-size:40px;
  font-family:'Playfair Display',serif;
  text-align:center;
  margin-bottom:24px;
  color:var(--navy);
}

.about-box{
  max-width:850px;
  margin:auto;
  text-align:center;
  color:var(--muted);
  font-size:18px;
}

/* ---------- CARD GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin-top:50px;
}

.card{
  background:#fff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,.1);
}

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:20px;
}

.card h3{
  font-family:'Playfair Display',serif;
  margin-bottom:8px;
  color:var(--navy);
}

.card p{
  color:var(--muted);
}

/* ---------- GALLERY ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.gallery-item{
  overflow:hidden;
  border-radius:12px;
}

.gallery-item img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:12px;
  transition:transform .35s ease;
}

.gallery-item:hover img{
  transform:scale(1.06);
}

/* ---------- FORM ---------- */
form{
  max-width:700px;
  margin:auto;
}

.form-group{
  margin-bottom:20px;
}

form label{
  display:block;
  margin-bottom:6px;
  font-weight:500;
  font-size:15px;
  color:var(--ink);
}

form input,
form textarea{
  width:100%;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:#fff;
}

form input:focus,
form textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,134,11,.15);
}

form textarea{
  min-height:140px;
  resize:vertical;
}

.form-note{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin-top:16px;
}

/* ---------- CONTACT INFO STRIP ---------- */
.contact-info{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  max-width:900px;
  margin:0 auto 50px;
  text-align:center;
}

.contact-info div{
  padding:24px;
  background:#fafafa;
  border-radius:12px;
}

.contact-info h4{
  color:var(--gold);
  font-family:'Playfair Display',serif;
  margin-bottom:6px;
  font-size:17px;
}

.contact-info p{
  color:var(--muted);
  font-size:15px;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--navy);
  color:#fff;
  padding:60px 60px 30px;
}

.footer-container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  max-width:var(--max);
  margin:auto;
}

.footer-box h3{
  color:var(--gold-light);
  margin-bottom:18px;
  font-family:'Playfair Display',serif;
  font-size:18px;
}

.footer-box p,
.footer-box a{
  display:block;
  color:#d1d5db;
  margin-bottom:10px;
  text-decoration:none;
  font-size:15px;
}

.footer-box a:hover,
.footer-box a:focus-visible{
  color:var(--gold-light);
}

.footer-bottom{
  text-align:center;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#9ca3af;
  font-size:14px;
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}

/* ---------- ANIMATIONS ---------- */

/* Page-load entrance: nav drops in, hero text/media rise in */
nav{
  animation:navDrop .6s ease both;
}

.hero-text > *{
  opacity:0;
  animation:riseIn .7s ease forwards;
}

.hero-text h1{animation-delay:.15s;}
.hero-text p{animation-delay:.3s;}
.hero-text .btn{animation-delay:.45s;}

.hero-media img{
  opacity:0;
  animation:heroMediaIn .8s ease forwards, float 4s ease-in-out 1.2s infinite;
  animation-delay:.25s;
}

@keyframes navDrop{
  from{opacity:0; transform:translateY(-12px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes riseIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes heroMediaIn{
  from{opacity:0; transform:scale(.92) translateY(10px);}
  to{opacity:1; transform:scale(1) translateY(0);}
}

/* Scroll-reveal: elements fade + rise into view as the user scrolls */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Stagger children of a reveal group (cards, gallery items) */
.reveal-group.is-visible .reveal-item{
  opacity:1;
  transform:translateY(0);
}

.reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}

.reveal-group.is-visible .reveal-item:nth-child(1){transition-delay:.05s;}
.reveal-group.is-visible .reveal-item:nth-child(2){transition-delay:.15s;}
.reveal-group.is-visible .reveal-item:nth-child(3){transition-delay:.25s;}
.reveal-group.is-visible .reveal-item:nth-child(4){transition-delay:.35s;}

/* Subtle underline-grow on nav link hover for extra polish */
nav ul a{
  position:relative;
}

nav ul a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:width .25s ease;
}

nav ul a:hover::after,
nav ul a.active::after{
  width:100%;
}

/* Form field focus already animates via transition; add gentle button press */
.btn:active{
  transform:translateY(0) scale(.97);
}

/* ============ TABLET (≤1024px) ============ */
@media (max-width:1024px){
  nav{padding:14px 32px;}

  .hero{
    padding:70px 40px;
  }

  .hero-text h1{font-size:46px;}

  section{padding:70px 40px;}

  .section-title{font-size:34px;}

  footer{padding:50px 32px 24px;}

  .footer-container{
    grid-template-columns:repeat(2,1fr);
    gap:32px;
  }
}

/* ============ MOBILE + SMALL TABLET (≤768px) ============ */
@media (max-width:768px){
  nav{padding:12px 20px;}

  .nav-toggle{display:flex;}

  nav ul{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    background:#fff;
    gap:0;
    box-shadow:0 12px 20px rgba(0,0,0,.08);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }

  nav ul.open{
    max-height:320px;
  }

  nav ul li{
    width:100%;
  }

  nav ul a{
    display:block;
    padding:16px 24px;
    border-top:1px solid var(--border);
  }

  .hero{
    flex-direction:column-reverse;
    text-align:center;
    padding:40px 24px 60px;
    min-height:auto;
    gap:30px;
  }

  .hero-text{width:100%;}

  .hero-text p{margin-left:auto;margin-right:auto;}

  .hero-media{width:100%;}

  .hero-media img{max-width:260px;}

  .hero-text h1{font-size:36px;}

  .hero-text p{font-size:17px;}

  section{padding:50px 24px;}

  .section-title{font-size:28px;}

  .about-box{font-size:16px;}

  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .gallery-item img{height:200px;}

  .contact-info{grid-template-columns:1fr;}

  footer{padding:40px 24px 20px;}

  .footer-container{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }
}

/* ============ SMALL MOBILE (≤480px) ============ */
@media (max-width:480px){
  .nav-logo .brand-name{font-size:16px;}

  nav img{width:44px;height:44px;}

  .hero-text h1{font-size:30px;}

  .section-title{font-size:24px;}

  .btn{
    width:100%;
    text-align:center;
    padding:15px 20px;
  }

  .gallery-grid{
    grid-template-columns:1fr;
  }

  .gallery-item img{height:230px;}

  .card{padding:22px;}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}

  .reveal,
  .reveal-item,
  .hero-text > *,
  .hero-media img{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Fallback: if JS hasn't run yet or fails, never leave content invisible */
.no-js .reveal,
.no-js .reveal-item{
  opacity:1;
  transform:none;
}

/* ---------- PRACTICE AREA CATEGORIES ---------- */
.practice-intro{
  text-align:center;
  color:var(--muted);
  font-size:17px;
  font-style:italic;
  margin-bottom:60px;
  letter-spacing:.4px;
}

.practice-category{
  margin-bottom:60px;
}

.practice-category-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Playfair Display',serif;
  font-size:24px;
  color:var(--navy);
  margin-bottom:28px;
  padding-bottom:12px;
  border-bottom:2px solid var(--gold);
}

.service-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.07);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.service-card img{
  width:100%;
  height:190px;
  object-fit:cover;
}

.service-card-body{
  padding:22px 24px;
  flex:1;
}

.service-card-body h3{
  font-family:'Playfair Display',serif;
  font-size:19px;
  color:var(--navy);
  margin-bottom:8px;
}

.service-card-body p{
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.expertise-tag{
  display:inline-block;
  background:rgba(184,134,11,.1);
  color:var(--gold);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  padding:4px 10px;
  border-radius:20px;
  margin-top:12px;
}

/* ---------- ABOUT PAGE ---------- */
.about-hero{
  background:linear-gradient(135deg, var(--navy) 0%, #1e3a5f 100%);
  padding:100px 80px;
  text-align:center;
  color:#fff;
}

.about-hero h1{
  font-family:'Playfair Display',serif;
  font-size:52px;
  margin-bottom:16px;
  color:#fff;
}

.about-hero p{
  font-size:19px;
  color:#d1d5db;
  max-width:700px;
  margin:auto;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
  margin-top:50px;
}

.value-box{
  text-align:center;
  padding:36px 24px;
  border-radius:14px;
  background:#fafafa;
  border-top:4px solid var(--gold);
  transition:transform .25s ease, box-shadow .25s ease;
}

.value-box:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(0,0,0,.08);
}

.value-box .val-icon{
  font-size:36px;
  margin-bottom:16px;
  display:block;
}

.value-box h3{
  font-family:'Playfair Display',serif;
  color:var(--navy);
  margin-bottom:10px;
  font-size:18px;
}

.value-box p{
  color:var(--muted);
  font-size:15px;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:36px;
  margin-top:50px;
}

.team-card{
  text-align:center;
  background:#fff;
  border-radius:16px;
  padding:36px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transition:transform .25s ease;
}

.team-card:hover{ transform:translateY(-5px); }

.team-card img{
  width:160px;
  height:160px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--gold);
  margin:0 auto 20px;
}

.team-card h3{
  font-family:'Playfair Display',serif;
  font-size:20px;
  color:var(--navy);
  margin-bottom:6px;
}

.team-card .role{
  color:var(--gold);
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:14px;
}

.team-card p{ color:var(--muted); font-size:15px; line-height:1.7; }

.stat-strip{
  background:var(--navy);
  padding:60px 80px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:30px;
  text-align:center;
}

.stat-strip div h2{
  font-family:'Playfair Display',serif;
  font-size:48px;
  color:var(--gold-light);
}

.stat-strip div p{ color:#d1d5db; font-size:15px; margin-top:4px; }

/* ---------- ADVOCATE / CONTACT CARDS ---------- */
.advocate-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:36px;
  max-width:820px;
  margin:0 auto 56px;
}

.advocate-card{
  text-align:center;
  background:#fff;
  border-radius:16px;
  padding:36px 24px;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
}

.advocate-card img{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--gold);
  margin:0 auto 18px;
}

.advocate-card h3{
  font-family:'Playfair Display',serif;
  font-size:20px;
  color:var(--navy);
  margin-bottom:4px;
}

.advocate-card .role{
  color:var(--gold);
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:18px;
}

.wa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  border-radius:8px;
  border:1.5px solid #e5e7eb;
  font-weight:600;
  font-size:14px;
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.wa-btn .wa-icon{ width:18px; height:18px; fill:#25D366; flex-shrink:0; }

.wa-btn:hover{
  border-color:#25D366;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,211,102,.15);
}

.wa-btn-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.wa-btn-row .wa-btn{ flex:1 1 auto; min-width:190px; }

/* ---------- FLOATING WHATSAPP WIDGET ---------- */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.wa-float-menu{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:4px;
  opacity:0;
  transform:translateY(10px) scale(.96);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

.wa-float.open .wa-float-menu{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.wa-float-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  padding:10px 16px;
  border-radius:30px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}

.wa-float-item:hover{
  transform:translateX(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.wa-float-item svg{ width:18px; height:18px; fill:#25D366; flex-shrink:0; }

.wa-float-toggle{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}

.wa-float-toggle:hover{
  transform:scale(1.06);
  box-shadow:0 12px 30px rgba(37,211,102,.5);
}

.wa-float-toggle svg{ width:28px; height:28px; fill:#fff; transition:opacity .15s ease, transform .15s ease; }

.wa-float-toggle .wa-close-icon{
  position:absolute;
  opacity:0;
  transform:rotate(-45deg) scale(.6);
}

.wa-float.open .wa-float-toggle .wa-chat-icon{ opacity:0; transform:rotate(45deg) scale(.6); }
.wa-float.open .wa-float-toggle .wa-close-icon{ opacity:1; transform:rotate(0) scale(1); }

.wa-float-toggle .wa-chat-icon{ transition:opacity .15s ease, transform .15s ease; }

@keyframes waPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.wa-float:not(.open) .wa-float-toggle{
  animation:waPulse 2.6s infinite;
}

@media (max-width:480px){
  .wa-float{ right:16px; bottom:16px; }
  .wa-float-toggle{ width:52px; height:52px; }
  .wa-float-toggle svg{ width:24px; height:24px; }
}

@media (prefers-reduced-motion: reduce){
  .wa-float:not(.open) .wa-float-toggle{ animation:none; }
}

/* ---------- ARTICLE CARDS ---------- */
.article-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
  margin-top:40px;
}

.article-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

.article-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(0,0,0,.1);
}

.article-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.article-body{ padding:22px 24px; }

.article-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}

.article-body h3{
  font-family:'Playfair Display',serif;
  font-size:19px;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.4;
}

.article-body p{ color:var(--muted); font-size:15px; line-height:1.7; }

.article-meta{ font-size:13px; color:#9ca3af; margin-top:14px; }

/* ---------- PAGE HERO BANNER ---------- */
.page-hero{
  background:linear-gradient(135deg, var(--navy) 0%, #1b3556 100%);
  padding:70px 80px;
  text-align:center;
  color:#fff;
}

.page-hero h1{
  font-family:'Playfair Display',serif;
  font-size:46px;
  color:#fff;
  margin-bottom:12px;
}

.page-hero p{ font-size:18px; color:#d1d5db; max-width:650px; margin:auto; }

@media (max-width:1024px){
  .about-hero,.page-hero{ padding:60px 40px; }
  .stat-strip{ padding:50px 40px; }
}

@media (max-width:768px){
  .about-hero h1,.page-hero h1{ font-size:30px; }
  .about-hero,.page-hero{ padding:50px 24px; }
  .stat-strip{ padding:40px 24px; }
  .stat-strip div h2{ font-size:36px; }
  .practice-category-title{ font-size:19px; }
}

@media (max-width:480px){
  .about-hero h1,.page-hero h1{ font-size:24px; }
}

/* ---------- COUNTRY GRID ---------- */
.country-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}

.country-card{
  text-align:center;
  background:#fafafa;
  border-radius:14px;
  padding:32px 20px;
  border-bottom:3px solid var(--gold);
  transition:transform .25s ease, box-shadow .25s ease;
}

.country-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(0,0,0,.09);
  background:#fff;
}

.country-flag{
  font-size:42px;
  margin-bottom:12px;
  line-height:1;
}

.country-card h4{
  font-family:'Playfair Display',serif;
  color:var(--navy);
  font-size:17px;
  margin-bottom:8px;
}

.country-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

@media (max-width:768px){
  .country-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:480px){
  .country-grid{grid-template-columns:1fr 1fr;}
  .country-flag{font-size:32px;}
}