/* SPDX-License-Identifier: MIT */
/* LCB Manchester, v1 stylesheet
   Tokens: BD (Bangladesh) + UK (Union Jack) joint palette.
   Plain CSS, mobile-first, no framework. */

:root {
  --bd-green: #006A4E;
  --bd-red:   #F42A41;
  --uk-blue:  #012169;
  --uk-red:   #C8102E;
  --white:    #FFFFFF;
  --ink:      #0B1220;
  --mist:     #F4F7FB;
  --paper:    #FAFBFC;
  --line:     #E2E8F0;
  --muted:    #475569;
  --gold:     #D4A24C;
  --gold-2:   #B8862F;
  --gold-lit: #E7B84F;

  /* Crest trim for "LCB Manchester", colours sampled straight from
     assets/logo.png so the wordmark matches the real badge:
       bright specular line  #F5EAC0
       brass body            #AD9869
       bronze outer edge     #5E481F
     The trim is an 8 way drop-shadow ring so it paints OUTSIDE the glyph.
     The green, red and Union Jack fills stay full strength.
     Axis offset = r, diagonal offset = r * .7, so the band is an even
     1px all round instead of ballooning at the serif corners. */
  --crest-lit:   #F5EAC0;
  --crest-brass: #AD9869;
  --crest-rim:   #5E481F;
  --crest-r:     max(.004em,.3px);
  --crest-ring:
    drop-shadow(var(--crest-r) 0 0 var(--crest-rim))
    drop-shadow(calc(-1 * var(--crest-r)) 0 0 var(--crest-rim))
    drop-shadow(0 var(--crest-r) 0 var(--crest-rim))
    drop-shadow(0 calc(-1 * var(--crest-r)) 0 var(--crest-rim))
    drop-shadow(calc(var(--crest-r) * .7) calc(var(--crest-r) * .7) 0 var(--crest-rim))
    drop-shadow(calc(var(--crest-r) * -.7) calc(var(--crest-r) * .7) 0 var(--crest-rim))
    drop-shadow(calc(var(--crest-r) * .7) calc(var(--crest-r) * -.7) 0 var(--crest-rim))
    drop-shadow(calc(var(--crest-r) * -.7) calc(var(--crest-r) * -.7) 0 var(--crest-rim));

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
  --bengali: "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.08);
  --shadow-md: 0 4px 12px rgba(11,18,32,.10);
  --shadow-glow: 0 0 0 1px rgba(0,106,78,.35), 0 8px 24px rgba(0,106,78,.28), inset 0 0 0 1px rgba(255,255,255,.6);
  --radius:    14px;

  --maxw: 1180px;

  /* Union Jack built from CSS layers, same construction as the real flag:
     red saltire on top, then the red cross, then the white saltire, then
     the white cross, over the blue field. Kept as a variable so every
     "Manchester" wordmark uses the identical flag. The old blue/white/red
     band gradient is gone, that read as the French tricolour. */
  --uk-jack:
    linear-gradient(45deg,  transparent 49.1%, var(--uk-red) 49.1%, var(--uk-red) 50.9%, transparent 50.9%),
    linear-gradient(-45deg, transparent 49.1%, var(--uk-red) 49.1%, var(--uk-red) 50.9%, transparent 50.9%),
    linear-gradient(90deg,  transparent 46.5%, var(--uk-red) 46.5%, var(--uk-red) 47.5%, transparent 47.5%),
    linear-gradient(0deg,   transparent 49.8%, var(--uk-red) 49.8%, var(--uk-red) 56.5%, transparent 56.5%),
    linear-gradient(45deg,  transparent 47.4%, var(--white)  47.4%, var(--white)  52.6%, transparent 52.6%),
    linear-gradient(-45deg, transparent 47.4%, var(--white)  47.4%, var(--white)  52.6%, transparent 52.6%),
    linear-gradient(90deg,  transparent 48.5%, var(--white)  48.5%, var(--white)  51.5%, transparent 51.5%),
    linear-gradient(0deg,   transparent 40%,   var(--white)  40%,   var(--white)  60%,   transparent 60%),
    var(--uk-blue);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--bd-green); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* flag ribbon (top + bottom) */
.ribbon {
  height: 6px;
  background: linear-gradient(90deg,
    var(--bd-green) 0%, var(--bd-green) 40%,
    var(--bd-red)   40%, var(--bd-red)   60%,
    var(--uk-blue)  60%, var(--uk-blue)  85%,
    var(--uk-red)   85%, var(--uk-red)   100%);
  position: relative; overflow: hidden;
}
.ribbon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%);
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(11,18,32,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.nav {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.25rem;
}
.brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--ink);
}
.brand img {
  width: 64px; height: 64px; object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 4px 10px rgba(0,40,30,.35));
}
.brand .name {
  font-family: var(--serif);
  font-size: 1.2rem; line-height: 1; font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  /* The wordmark must never run under the Donate button or under the menu
     links. It is one line and cannot wrap, so it is sized to the space the
     header has left. The first size is the fallback for a browser that does
     not know clamp. */
  font-size: clamp(.75rem, 3.9vw, 1.2rem);
}
/* header brand per-letter theming (set by nav.js).
   L+B = BD green, C = BD red. Manchester stays plain ink serif,
   the old badge lettering style, no flag fill and no rim. */
.brand .name .lcb-head .L,
.brand .name .lcb-head .B { color: var(--bd-green); }
.brand .name .lcb-head .C { color: var(--bd-red); }
.brand .name .manchester-head { margin-left: .15em; }
.brand .name .manchester-head .rest {
  color: var(--ink);
  display: inline-block;
}
.brand .sub {
  display: block; font-size: 10px;
  color: var(--ink); letter-spacing: .06em;
  margin-top: .1rem;
  line-height: 1.2; max-width: 18ch;
}
/* per-word BD flag theming in brand subtitle */
.brand .sub .word.w-language,
.brand .sub .word.w-bangladesh { color: var(--bd-green); font-weight: 700; }
.brand .sub .word.w-culture    { color: var(--bd-red);   font-weight: 700; }
.brand .sub .word.w-amp,
.brand .sub .word.w-of         { color: var(--ink); }
.nav-links {
  display: none; gap: 1rem; margin-left: auto;
}
.nav-links a {
  color: var(--ink); font-weight: 500; font-size: .88rem;
  padding: .3rem .2rem; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover { text-decoration: none; color: var(--bd-green); }
.nav-links a.is-active { border-bottom-color: var(--bd-red); }
.cta-join {
  background: var(--bd-green); color: var(--white);
  border: 0; padding: .5rem .85rem; border-radius: 999px;
  font-weight: 600; font-size: .85rem;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.cta-donate {
  background: var(--bd-green); color: var(--white);
  border: 0; padding: .5rem .85rem; border-radius: 999px;
  font-weight: 600; font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cta-donate:hover { background: #f4758a; transform: translateY(-1px); text-decoration: none; box-shadow: 0 6px 16px rgba(244,117,138,.35); }
.cta-join:hover { background: #f4758a; transform: translateY(-1px); text-decoration: none; box-shadow: 0 6px 16px rgba(244,117,138,.35); }
.nav-toggle {
  margin-left: auto; background: transparent; border: 0;
  padding: .5rem; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 28px; height: 28px; }
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
}
/* On a phone the header row is brand + Donate + Join us + menu button.
   That is wider than a narrow screen, which pushed the whole page
   sideways and made the menu button sit off the right edge. Join us is
   left out of the header row on small screens because it is already in
   the menu drawer. */
@media (max-width: 959px) {
  .nav > .cta-join { display: none; }
}
@media (max-width: 430px) {
  .nav { gap: .55rem; padding-left: .8rem; padding-right: .8rem; }
  .brand img { width: 46px; height: 46px; }
  .brand { gap: .4rem; }
  .nav-toggle { padding: .35rem; }
  .cta-donate { padding: .5rem .7rem; }
}
/* The full menu appears at 960px, and until the screen is wide enough for the
   crest, the wordmark, every menu link and both buttons, the wordmark ran
   under the first menu link and the Join us button was left off. In this
   band the header is tightened so nothing sits on top of anything. */
@media (min-width: 960px) and (max-width: 1150px) {
  .brand { gap: .4rem; }
  .brand img { width: 52px; height: 52px; }
  .brand .name { font-size: 1rem; }
  .brand .sub { max-width: 20ch; }
  .nav-links { gap: .65rem; }
  .nav > .cta-join { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(320px, 86vw);
  background: var(--white);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 60;
  display: flex; flex-direction: column;
  /* A short phone cannot show the whole menu at once, so the drawer itself
     scrolls and the Donate and Join us buttons stay pinned to the bottom. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.drawer header strong { font-family: var(--serif); font-size: 1.1rem; }
.drawer button.close {
  background: transparent; border: 0; padding: .25rem;
  color: var(--ink);
}
.drawer ul { list-style: none; margin: 0; padding: .5rem 0; flex: 0 0 auto; }
.drawer li a {
  display: block; padding: .9rem 1.25rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.drawer li a:hover { background: var(--mist); text-decoration: none; }
/* Donate and Join us sit in a pinned bar at the foot of the drawer so they
   can never be pushed below the fold on a short screen. */
.drawer-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: auto;
  display: flex; align-items: stretch; gap: .5rem;
  padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--line);
}
.drawer-actions .cta-donate,
.drawer-actions .cta-join {
  flex: 1 1 0; margin: 0; text-align: center;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.scrim {
  position: fixed; inset: 0; background: rgba(11,18,32,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 55;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* hero, dual-photo with crossfade + drift */
.hero {
  position: relative;
  min-height: 78vh; display: grid; place-items: center;
  text-align: center; color: var(--white);
  overflow: hidden; isolation: isolate;
}
.hero .hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.05);
  opacity: 0;
  will-change: transform, opacity;
}
.hero .hero-bg.is-a {
  background-image: url("../assets/hero.jpeg");
  background-position: center 38%;
  animation: kenburnsA 22s ease-in-out infinite alternate, crossfadeA 16s ease-in-out infinite;
  opacity: 1;
}
.hero .hero-bg.is-b {
  background-image: url("../assets/hero2.jpg");
  background-position: center 55%;
  animation: kenburnsB 22s ease-in-out infinite alternate, crossfadeB 16s ease-in-out infinite;
}
@keyframes kenburnsA {
  from { transform: scale(1.04) translate(0,0); }
  to   { transform: scale(1.08) translate(-0.6%, -0.4%); }
}
@keyframes kenburnsB {
  from { transform: scale(1.04) translate(0,0); }
  to   { transform: scale(1.08) translate(0.6%, -0.4%); }
}
@keyframes crossfadeA {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes crossfadeB {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0,106,78,.55), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(1,33,105,.55), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.55), rgba(11,18,32,.7));
}
.hero-inner {
  max-width: 880px; padding: 4rem 1.25rem;
  animation: rise .9s ease both;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw + 1rem, 4.4rem);
  line-height: 1.05; margin: 0 0 1rem;
  letter-spacing: -.01em;
  display: inline-flex; align-items: baseline; gap: .35em;
  flex-wrap: wrap; justify-content: center;
}
/* individual letter theming, LCB Bangladesh-flag colors (full opacity, no glass) */
.hero h1 .lcb { display: inline-flex; }
.hero h1 .lcb span {
  display: inline-block;
  font-weight: 700;
}
.hero h1 .lcb .L,
.hero h1 .lcb .B {
  color: var(--bd-green);
}
.hero h1 .lcb .C {
  color: var(--bd-red);
}

/* "Manchester" = Union Jack, see --uk-jack in :root.
   The background shorthand must come first, then the clip longhands,
   otherwise the shorthand resets background-clip and the flag spills
   out of the letters instead of filling them. */
.hero h1 .manchester {
  font-weight: 700;
  background: var(--uk-jack);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 .manchester { color: var(--uk-blue); }
}

/* hero crest logo, sits above the h1 with deep sharp drop-shadow */
.hero .hero-logo {
  display: block;
  width: clamp(110px, 18vw, 200px);
  height: auto;
  margin: 0 auto .6rem;
  filter:
    drop-shadow(0 6px 12px rgba(0,40,30,.55))
    drop-shadow(0 2px 4px rgba(0,0,0,.35))
    saturate(115%);
  /* slight inner rim highlight */
  border-radius: 12px;
}

/* golden Bangla line, solid gold for safe rendering on every platform */
.hero .bangla {
  font-family: var(--bengali);
  font-size: clamp(1.1rem, 1.5vw + .7rem, 1.7rem);
  margin: 0 0 .35rem;
  color: var(--gold);
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(60,40,10,.4);
  font-weight: 400;
}

.hero p.lead {
  font-size: clamp(1rem, .5vw + .9rem, 1.25rem);
  max-width: 620px; margin: 0 auto 2rem; opacity: .95;
}
.hero .hero-abbr {
  font-family: var(--serif);
  font-size: clamp(.85rem, .5vw + .7rem, 1.05rem);
  font-style: italic;
  letter-spacing: .02em;
  color: var(--white);
  opacity: .85;
  margin: -.35rem 0 .75rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.hero .hero-tagline {
  font-size: clamp(.85rem, .35vw + .75rem, 1rem);
  font-weight: 500;
  color: var(--white);
  opacity: .9;
  letter-spacing: .01em;
  margin: 1.5rem auto 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hero .ctas { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border-radius: 999px;
  font-weight: 600; border: 0; text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--bd-green); color: var(--white); transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.btn-primary:hover { background: #f4758a; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(244,117,138,.35); }
.btn-secondary { background: var(--white); color: var(--ink); }
.btn-secondary:hover { background: var(--mist); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* glass button: BD green crystal glass default (white text), light red on hover.
   Unified treatment for all radio-style CTAs (About LCB, See programmes,
   Support us, Partner with us, Volunteer instead, etc.). */
.btn-glass {
  background: linear-gradient(135deg, rgba(0,106,78,.92), rgba(0,90,65,.96));
  color: var(--white);
  border: 1px solid rgba(0,106,78,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(0,106,78,.28);
  position: relative; overflow: hidden;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease, color .2s ease, border-color .25s ease;
}
.btn-glass::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 80% 110%, rgba(255,255,255,.12), transparent 60%);
  opacity: .9; pointer-events: none;
}
.btn-glass:hover {
  color: var(--white);
  background: linear-gradient(135deg, rgba(255,122,138,.95), rgba(244,90,108,.96));
  border-color: rgba(244,90,108,.65);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px rgba(244,90,108,.4);
}
.btn-glass:hover::before {
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(circle at 80% 110%, rgba(255,255,255,.18), transparent 60%);
  opacity: 1;
}

/* legacy alias for old btn-glass-red markup, same green-default + light-red-hover */
.btn-glass-red,
.btn-glass-red.btn-glass {
  background: linear-gradient(135deg, rgba(0,106,78,.92), rgba(0,90,65,.96));
  color: var(--white);
  border: 1px solid rgba(0,106,78,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(0,106,78,.28);
  position: relative; overflow: hidden;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease, color .2s ease, border-color .25s ease;
}
.btn-glass-red::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 80% 110%, rgba(255,255,255,.12), transparent 60%);
  opacity: .9; pointer-events: none;
}
.btn-glass-red:hover {
  color: var(--white);
  background: linear-gradient(135deg, rgba(255,122,138,.95), rgba(244,90,108,.96));
  border-color: rgba(244,90,108,.65);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px rgba(244,90,108,.4);
}
.btn-glass-red:hover::before {
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(circle at 80% 110%, rgba(255,255,255,.18), transparent 60%);
  opacity: 1;
}

/* sections */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: 4rem 1.25rem;
}
.section h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  margin: 0 0 .5rem;
}
.section .kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bd-green); font-weight: 700; margin-bottom: .5rem;
}
/* pulsing red->green dot at the start of every section kicker.
   Uses the BD flag echo ring (red -> green -> red) on a 1.6s loop.
   Respects prefers-reduced-motion. */
.kicker::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bd-red);
  box-shadow: 0 0 0 0 rgba(244,42,65,.55);
  flex: 0 0 auto;
  animation: lcb-kicker-pulse 1.6s ease-in-out infinite;
}
@keyframes lcb-kicker-pulse {
  0%   { background: var(--bd-red);   box-shadow: 0 0 0 0   rgba(244,42,65,.65); }
  50%  { background: var(--bd-green); box-shadow: 0 0 0 6px rgba(0,106,78,0); }
  100% { background: var(--bd-red);   box-shadow: 0 0 0 0   rgba(244,42,65,0); }
}
@media (prefers-reduced-motion: reduce) {
  .kicker::before { animation: none; background: var(--bd-red); }
}
.section .intro {
  max-width: 720px; color: var(--muted); margin: 0 0 2rem;
}

/* legal pages: privacy, cookies and terms.
   These pages are long legal text, so the body copy is measured to a
   comfortable reading width and the tables that set out the details are
   given a clear card style that works on a phone. */
.legal-doc .section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.legal-doc .section h2 {
  font-size: clamp(1.45rem, 1.2vw + .9rem, 1.9rem);
  margin: 0 0 1rem;
}
.legal-doc .section h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 1.75rem 0 .5rem;
}
.legal-doc .section p,
.legal-doc .section li {
  max-width: 78ch;
  line-height: 1.7;
}
.legal-doc .section p { margin: 0 0 1rem; }
.legal-doc .section ul,
.legal-doc .section ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal-doc .section li { margin-bottom: .5rem; }
.legal-doc .section strong { color: var(--ink); }
.legal-doc .section a { text-decoration: underline; }
.legal-doc .section a:hover { text-decoration: none; }

/* the numbered headings in the legal text read better with a little air */
.legal-doc .section + .section { border-top: 1px solid var(--line); }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-size: .95rem;
}
.legal-doc th,
.legal-doc td {
  text-align: left;
  vertical-align: top;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}
.legal-doc thead th {
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legal-doc tbody tr:last-child td { border-bottom: 0; }
.legal-doc tbody tr:nth-child(even) { background: rgba(244,247,251,.55); }
@media (max-width: 700px) {
  .legal-doc table { display: block; overflow-x: auto; white-space: normal; }
  .legal-doc th,
  .legal-doc td { padding: .6rem .7rem; font-size: .88rem; }
}

/* glass card (purpose / radio-button tiles), with green-neon hover */
.purposes {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.purpose {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.45));
  border: 1px solid rgba(255,255,255,.6);
  border-left: 4px solid var(--bd-green);
  border-radius: var(--radius);
  padding: 1.25rem;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-sm);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.purpose::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(0,106,78,.18), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.purpose:nth-child(2) { border-left-color: var(--bd-red); }
.purpose:nth-child(3) { border-left-color: var(--uk-blue); }
.purpose:nth-child(4) { border-left-color: var(--uk-red); }
.purpose:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(0,106,78,.18), rgba(0,106,78,.06));
  border-color: rgba(0,106,78,.55);
  box-shadow: var(--shadow-glow);
}
.purpose:hover::before { opacity: 1; }
.purpose h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.purpose p { margin: 0; color: var(--muted); font-size: .95rem; transition: color .25s ease; }
.purpose:hover p { color: var(--ink); }

/* alternating dark band */
.band-uk {
  background: linear-gradient(135deg, var(--uk-blue), #021d5e);
  color: var(--white);
  position: relative; overflow: hidden;
}
.band-uk::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(0,106,78,.35), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(200,16,46,.25), transparent 45%);
  pointer-events: none;
}
.band-uk .section { position: relative; }
.band-uk h2 { color: var(--white); }
.band-uk .intro { color: rgba(255,255,255,.85); }
.band-uk .btn-secondary { background: var(--white); color: var(--ink); }

/* two-column blocks */
.split {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}
.split ul.checks { list-style: none; padding: 0; margin: 0; }
.split ul.checks li {
  padding: .5rem 0 .5rem 1.6rem; position: relative;
  border-bottom: 1px dashed var(--line);
}
.split ul.checks li::before {
  content: ""; position: absolute; left: 0; top: .85rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bd-green);
}

/* CTA strip */
.cta-strip {
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 3rem 1.25rem;
}
.cta-strip h2 { margin: 0 0 .5rem; font-family: var(--serif); }
.cta-strip .btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Live Hub, Bangladeshi flag themed */
.live-hub {
  position: relative;
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.live-hub .section { padding-top: 3rem; padding-bottom: 3rem; }
.hub-disclaimer {
  font-size: .8rem; color: var(--muted);
  background: var(--white); border-radius: 8px;
  padding: .6rem .85rem; margin: .5rem 0 1.25rem;
  border: 1px solid var(--line);
}
.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.tab {
  position: relative;
  background: transparent; border: 0;
  padding: .65rem .95rem .65rem 1.7rem;
  border-radius: 8px 8px 0 0;
  color: var(--bd-green); font-weight: 700; font-size: .9rem;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.tab::before {
  content: "";
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bd-red);
  box-shadow: 0 0 0 0 rgba(244,42,65,.5);
}
.tab:nth-of-type(odd)::before { background: var(--bd-green); box-shadow: 0 0 0 0 rgba(0,106,78,.5); }
.tab:nth-of-type(even)::before { background: var(--bd-red); box-shadow: 0 0 0 0 rgba(244,42,65,.5); }
.tab:hover {
  color: var(--bd-red);
  background: linear-gradient(180deg, transparent, rgba(244,42,65,.08));
}
.tab:nth-of-type(odd):hover {
  color: var(--bd-green);
  background: linear-gradient(180deg, transparent, rgba(0,106,78,.08));
}
.tab.is-active,
.tab[aria-selected="true"] {
  color: var(--white);
  background: linear-gradient(180deg, var(--bd-green), var(--bd-red));
  border-bottom-color: var(--bd-red);
  box-shadow: 0 4px 16px rgba(244,42,65,.25);
}
.tab.is-active::before,
.tab[aria-selected="true"]::before { background: var(--white); }
.hub-panel {
  display: none;
  max-height: 460px; overflow-y: auto;
  padding-right: .25rem;
}
.hub-panel.is-active { display: block; }
.hub-list { list-style: none; padding: 0; margin: 0; }
.hub-list li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.hub-list a {
  font-weight: 600; color: var(--ink);
}
.hub-list a:hover { color: var(--bd-green); }
.hub-list .meta {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--muted);
  margin-top: .35rem;
  flex-wrap: wrap;
}
.hub-list .src-badge {
  width: 16px; height: 16px;
  border-radius: 3px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  background: var(--bd-green);
  box-shadow: 0 0 0 1px rgba(11,18,32,.08);
}
.hub-list .src-name { color: var(--ink); font-weight: 600; }
.hub-list .dot-sep { color: var(--muted); }
.hub-list .teaser { display: block; font-size: .85rem; color: var(--muted); margin-top: .25rem; }
.hub-status {
  font-size: .8rem; color: var(--muted); margin-top: 1rem;
}
.hub-empty { color: var(--muted); font-style: italic; }

/* footer */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.85);
  padding: 3rem 1.25rem 1.5rem;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.site-footer h4 {
  font-family: var(--serif); color: var(--white);
  font-size: 1.05rem; margin: 0 0 .75rem;
}
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: var(--white); }

/* footer brand block, shows the crest + BD/UK theming in the footer too */
.site-footer .footer-brand {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.25rem;
}
.site-footer .footer-brand img {
  width: 90px; height: 90px; object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 4px 10px rgba(0,40,30,.5));
  flex: 0 0 auto;
}
.site-footer .footer-brand-text { display: block; }
.site-footer .footer-name {
  font-family: var(--serif);
  font-size: 1.55rem; line-height: 1.1; font-weight: 600;
  white-space: nowrap;
}
.site-footer .footer-name .lcb-head .L,
.site-footer .footer-name .lcb-head .B { color: var(--bd-green); }
.site-footer .footer-name .lcb-head .C { color: var(--bd-red); }
.site-footer .footer-name .manchester-head { margin-left: .15em; }
.site-footer .footer-name .manchester-head .rest { color: var(--white); display: inline-block; }

/* Crest trim on "LCB Manchester", hero only.
   One thin ring OUTSIDE every letter, colour #5E481F taken from the badge.
   Nothing sits inside the glyph, the green, red and Union Jack fills are
   untouched. No text-shadow bevel here, it bled over the letter edge and
   read as an outline inside the word.
   The header and footer keep the old plain badge lettering, no rim. */
.hero h1 .lcb span,
.hero h1 .manchester {
  filter:
    var(--crest-ring)
    drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
.site-footer .footer-sub {
  display: block; font-size: .78rem;
  color: var(--white); letter-spacing: .08em;
  margin-top: .35rem; margin-bottom: .75rem;
  line-height: 1.3;
}
.site-footer .footer-sub .word.w-language,
.site-footer .footer-sub .word.w-bangladesh { color: var(--bd-green); font-weight: 700; }
.site-footer .footer-sub .word.w-culture    { color: var(--bd-red);   font-weight: 700; }
.site-footer .footer-sub .word.w-amp,
.site-footer .footer-sub .word.w-of         { color: var(--white); }
.site-footer .footer-address {
  margin: .5rem 0 0; font-size: .85rem; line-height: 1.55;
  color: rgba(255,255,255,.85);
}
/* On a narrow phone the footer crest plus the one line wordmark was
   wider than the screen, which pushed the whole page sideways.
   Both are scaled down a little on small screens so the footer fits. */
@media (max-width: 430px) {
  .site-footer .footer-brand { gap: .75rem; }
  .site-footer .footer-brand img { width: 64px; height: 64px; }
  .site-footer .footer-name { font-size: 1.25rem; }
}
.site-footer .footer-address a { color: rgba(255,255,255,.9); }
.site-footer .footer-address a:hover { color: var(--white); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .2rem 0; }
/* Footer links get a little extra height so they are easy to tap on a phone. */
.site-footer li a { display: inline-block; padding: .25rem 0; }
.site-footer .legal {
  max-width: var(--maxw); margin: 2rem auto 0;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.6);
}

/* forms */
.form { display: grid; gap: 1rem; max-width: 560px; }
.form label { font-weight: 600; font-size: .9rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--white); color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--bd-green); outline-offset: 1px;
}
.form textarea { min-height: 140px; resize: vertical; }

/* chip (filter), glass + green-neon hover */
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.chip {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  border: 1px solid rgba(255,255,255,.6);
  padding: .45rem .9rem; border-radius: 999px;
  font-size: .85rem; color: var(--ink);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-sm);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  overflow: hidden;
}
.chip::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(0,106,78,.22), transparent 65%);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.chip:hover {
  color: var(--white);
  background: linear-gradient(135deg, rgba(0,106,78,.9), rgba(0,90,65,.95));
  border-color: rgba(0,106,78,.6);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,106,78,.45), 0 8px 22px rgba(0,106,78,.35), inset 0 0 0 1px rgba(255,255,255,.35);
}
.chip:hover::before { opacity: 1; }
.chip.is-active {
  background: var(--bd-green); color: var(--white); border-color: var(--bd-green);
  box-shadow: 0 0 0 1px rgba(0,106,78,.45), 0 6px 18px rgba(0,106,78,.3);
}

/* gallery */
.gallery {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* The six archive pictures. Each tile shows the whole photograph, never a
   crop, so the frame is a soft mist colour and the picture sits inside it.
   The 4/3 box is made with the old padding trick, because aspect-ratio is
   not understood by the older phones and those boxes would collapse to
   nothing. */
.gallery .ph {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery .ph-img {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 75%;
  background: var(--mist);
  overflow: hidden;
}
.gallery .ph-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gallery .ph figcaption {
  padding: .55rem .7rem .6rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.gallery a.ph-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
}
.gallery a.ph-tile:hover .ph-img img,
.gallery a.ph-tile:focus .ph-img img {
  opacity: .92;
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}
.gallery .ph-img img { transition: opacity .25s ease, transform .25s ease; }

/* Time Capsule */
.time-capsule { background: linear-gradient(180deg, transparent, var(--mist) 60%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capsule-years {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.capsule-year {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  border: 1px solid rgba(255,255,255,.7);
  border-left: 4px solid var(--bd-green);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.capsule-year:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); border-color: rgba(0,106,78,.55); }
.capsule-year header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.capsule-year .year-num { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--uk-blue); }
.capsule-year .year-tag {
  background: var(--bd-green); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .2rem .6rem; border-radius: 999px;
}
.capsule-year .year-tag.tag-now { background: var(--bd-red); animation: pulse-now 2.4s infinite; }
@keyframes pulse-now {
  0%   { box-shadow: 0 0 0 0 rgba(244,42,65,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(244,42,65,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,42,65,0); }
}
.capsule-year .year-blurb { color: var(--muted); font-size: .9rem; margin: 0 0 .65rem; line-height: 1.45; }
.year-thumbs { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .35rem; margin-bottom: .65rem; scroll-snap-type: x mandatory; }
.year-thumbs::-webkit-scrollbar { height: 6px; }
.year-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cap-thumb {
  flex: 0 0 88px; height: 88px;
  border-radius: 8px;
  background: var(--mist) center/contain no-repeat;
  border: 1px solid var(--line);
  scroll-snap-align: start;
  transition: transform .2s ease;
}
.cap-thumb:hover { transform: scale(1.04); }
.cap-thumb.is-video { display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .7rem; }
.cap-thumb.is-video::before { content: '\25B6'; font-size: 1.2rem; opacity: .9; }
.year-thumbs.is-empty { display: block; }
.year-thumbs .cap-empty { display: block; font-size: .85rem; color: var(--muted); font-style: italic; padding: .5rem 0; }
.more-memories {
  display: inline-block; font-size: .85rem; font-weight: 600;
  color: var(--bd-green); text-decoration: none;
  border-bottom: 1px dashed var(--bd-green);
  /* extra height so the link is easy to tap on a phone */
  padding: .35rem 0;
}
.more-memories:hover { color: #005a41; text-decoration: none; }
.capsule-hint { font-size: .85rem; color: var(--muted); margin: 2rem 0 0; text-align: center; }

/* page header (sub-pages) */
.page-head {
  background: linear-gradient(135deg, var(--bd-green), #005a41 60%, var(--uk-blue));
  color: var(--white); padding: 4rem 1.25rem 3rem;
  text-align: left;
}
.page-head h1 {
  font-family: var(--serif); margin: 0 0 .5rem;
  font-size: clamp(2rem, 2vw + 1rem, 3rem);
}
.page-head p { margin: 0; max-width: 720px; opacity: .9; }

/* rise-in */
.rise {
  animation: rise .8s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* consent banner (cookie choice)
   A compact bar along the bottom. The wording is complete, it is just set
   smaller so it takes up less of the page. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--white);
  border-top: 2px solid var(--bd-green);
  box-shadow: 0 -6px 18px rgba(11,18,32,.26);
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
}
.consent-banner[hidden] { display: none; }
.consent-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .35rem .9rem;
  flex-wrap: wrap;
}
.consent-title {
  margin: 0;
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
}
.consent-text {
  margin: 0;
  flex: 1 1 24rem;
  font-size: .78rem;
  line-height: 1.4;
  color: #d7e0ea;
}
.consent-text a { color: #9be7c4; }
.consent-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.consent-btn {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: .32rem .85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.6);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.consent-btn:hover { transform: translateY(-1px); }
.consent-btn-accept { background: var(--bd-green); border-color: var(--bd-green); }
.consent-btn-accept:hover { background: #00845f; }
.consent-btn-reject:hover { background: rgba(255,255,255,.14); }
.consent-btn:focus-visible { outline: 3px solid #9be7c4; outline-offset: 2px; }

/* ---------------- contact chooser ---------------- */
/* The Donate button never jumps straight to WhatsApp. It opens this
   small chooser so the visitor picks email or WhatsApp for themselves.
   No phone number is printed anywhere in it, on our pages or in the
   link that is handed to WhatsApp. */

.contact-chooser {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.contact-chooser.is-open { display: flex; }
.contact-chooser-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.contact-chooser-card {
  position: relative;
  width: min(30rem, 100%);
  min-width: 0;
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  overflow-wrap: anywhere;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 4px solid var(--bd-green);
  box-shadow: 0 24px 60px rgba(11,18,32,.35);
  padding: 1.5rem 1.5rem 1.25rem;
}
.contact-chooser-close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  background: var(--mist);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.contact-chooser-close:hover { background: var(--line); color: var(--ink); }
.contact-chooser h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 0 0 .35rem;
  padding-right: 2rem;
}
.contact-chooser .lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .95rem;
}
.contact-choices { display: grid; gap: .65rem; }
.contact-choice {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.contact-choice:hover {
  border-color: var(--bd-green);
  background: var(--mist);
  transform: translateY(-1px);
  text-decoration: none;
}
.contact-choice:focus-visible { outline: 3px solid var(--bd-green); outline-offset: 2px; }
.contact-choice-icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.contact-choice-icon svg { width: 1.25rem; height: 1.25rem; }
.contact-choice.email .contact-choice-icon { background: rgba(0,106,78,.12); color: var(--bd-green); }
.contact-choice.whatsapp .contact-choice-icon { background: rgba(37,211,102,.16); color: #128C4A; }
.contact-choice strong { display: block; font-size: 1rem; font-weight: 600; }
.contact-choice .sub { display: block; font-size: .84rem; color: var(--muted); line-height: 1.35; }
.contact-chooser-foot {
  margin: 1rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.contact-chooser-foot a { font-weight: 600; }
body.contact-chooser-open { overflow: hidden; }

/* utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- old phone browsers ----------------
   Flex gap is not understood by an iPhone on iOS 14 or older, so these rows
   would sit tight against each other. This puts the space back there. It only
   applies to a browser that does not know about flex gap. */
@supports not (gap: 1rem) {
  .nav > * + * { margin-left: 1rem; }
  .brand > * + * { margin-left: .55rem; }
  .nav-links > * + * { margin-left: 1rem; }
  .drawer-actions > * + * { margin-left: .5rem; }
  .footer-brand > * + * { margin-left: 1rem; }
  .hero .ctas > * + * { margin-left: .75rem; }
  .cta-strip .btns > * + * { margin-left: .75rem; }
  .chips > * + * { margin-left: .5rem; }
  .tabs > * + * { margin-left: .25rem; }
  .consent-actions > * + * { margin-left: .4rem; }
  .contact-choice > * + * { margin-left: .85rem; }
  .capsule-year header > * + * { margin-left: .5rem; }
  .year-thumbs > * + * { margin-left: .35rem; }
}

@media (max-width: 430px) {
  @supports not (gap: 1rem) {
    .nav > * + * { margin-left: .55rem; }
    .footer-brand > * + * { margin-left: .75rem; }
  }
}