/* ════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════ */
:root{
  --navy:        #0A1F44;
  --navy-deep:   #071330;
  --navy-mid:    #132d5e;
  --navy-soft:   #1e3a6e;
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-pale:   #F5EDCC;
  --gold-dark:   #A6872E;
  --warm-white:  #FAFAF8;
  --off-white:   #F4F3EF;
  --white:       #FFFFFF;
  --text:        #1A1A2E;
  --text-mid:    #374151;
  --muted:       #6B7280;
  --border:      #E5E3DC;
  --border-gold: rgba(201,168,76,.25);
  --success:     #16A34A;
  --warning:     #D97706;
  --danger:      #DC2626;
  --info:        #2563EB;
  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'Montserrat', system-ui, sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.22,.68,0,1.2);
  --ease-smooth: cubic-bezier(.25,.46,.45,.94);
}

/* ════════════════════════════════════════════
   RESET
════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);background:var(--warm-white);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:var(--fb)}
ul{list-style:none}

/* ════════════════════════════════════════════
   LOADER
════════════════════════════════════════════ */
#loader{
  position:fixed;inset:0;background:var(--navy-deep);
  z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;
  transition:opacity .6s,visibility .6s;
}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.loader-seal{width:72px;height:72px;animation:sealSpin 2s linear infinite}
.loader-name{font-family:var(--fd);font-size:1rem;color:var(--gold);letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.loader-bar{width:200px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.loader-progress{height:100%;background:var(--gold);border-radius:2px;animation:loadBar 1.4s var(--ease-smooth) forwards}
@keyframes loadBar{from{width:0}to{width:100%}}
@keyframes sealSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════
   PAGES / SPA
════════════════════════════════════════════ */
.page{display:none}
.page.active{display:block}

/* ════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════ */
.topbar{
  background:var(--navy-deep);
  padding:.45rem 5vw;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(201,168,76,.2);
}
.topbar-left{display:flex;align-items:center;gap:1.5rem}
.topbar-item{
  font-size:.72rem;font-weight:400;color:rgba(255,255,255,.55);
  display:flex;align-items:center;gap:.4rem;letter-spacing:.02em;
}
.topbar-item svg{width:12px;height:12px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-link{
  font-size:.72rem;font-weight:500;color:rgba(255,255,255,.55);
  transition:color .2s;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
}
.topbar-link:hover{color:var(--gold)}
.topbar-verify-pill{
  background:var(--gold);color:var(--navy-deep);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .9rem;border-radius:50px;transition:all .25s;cursor:pointer;
}
.topbar-verify-pill:hover{background:var(--gold-light)}

/* ════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════ */
nav{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 20px rgba(10,31,68,.06);
}
.nav-inner{
  padding:0 5vw;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  max-width:1400px;margin:0 auto;
  /* A floor on the space between brand, nav and buttons. space-between alone lets them
     meet once the row is full, which is what put the first link over the logo. */
  gap:1.25rem;
}
.nav-brand{display:flex;align-items:center;gap:.9rem;cursor:pointer}
.brand-mark{
  width:48px;height:48px;background:var(--navy);border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand-text-main{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--navy);letter-spacing:.01em;line-height:1.15}
.brand-text-sub{font-size:.65rem;font-weight:400;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.1rem}
.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-link{
  /* inline-flex, not inline: an inline box ignores vertical padding for layout, which let
     the active item's background overflow its line box and reach the logo. */
  display:inline-flex;align-items:center;
  font-size:.82rem;font-weight:500;color:var(--text-mid);
  padding:.55rem .75rem;border-radius:6px;
  transition:all .2s;cursor:pointer;letter-spacing:.01em;
  position:relative;
}
.nav-link:hover,.nav-link.active{color:var(--navy);background:var(--off-white)}
.nav-link.active::after{
  content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  width:24px;height:2px;background:var(--gold);border-radius:2px;
}
/* ── Nav submenu ──────────────────────────────────────────────────────────
   Opens on hover and on keyboard focus. The parent stays a working link, so the
   menu is an addition for people who want it rather than a gate in front of the
   events listing. There is no gap between the trigger and the panel: a cursor
   crossing dead space would close the menu on the way to it. */
.nav-has-sub{position:relative}
.nav-caret{width:11px;height:11px;margin-left:.28rem;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .2s}
.nav-has-sub:hover .nav-caret,.nav-has-sub:focus-within .nav-caret{transform:rotate(180deg)}
.nav-sub{
  position:absolute;top:100%;left:0;min-width:190px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 16px 40px rgba(10,31,68,.14);
  padding:.4rem;margin-top:.35rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:120;
}
.nav-has-sub:hover .nav-sub,.nav-has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub a{
  display:block;padding:.55rem .75rem;border-radius:6px;
  font-size:.82rem;font-weight:500;color:var(--text-mid);white-space:nowrap;transition:all .18s;
}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--off-white);color:var(--navy)}

.nav-cta-group{display:flex;align-items:center;gap:.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fb);font-weight:600;font-size:.82rem;letter-spacing:.02em;border:none;cursor:pointer;border-radius:8px;transition:all .25s;white-space:nowrap}
.btn-sm{padding:.5rem 1.1rem;font-size:.78rem}
.btn-md{padding:.7rem 1.5rem}
.btn-lg{padding:.9rem 2rem;font-size:.9rem}
.btn-xl{padding:1.1rem 2.4rem;font-size:.95rem}
.btn-gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 4px 16px rgba(201,168,76,.3)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 6px 22px rgba(201,168,76,.4)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-mid);transform:translateY(-1px)}
.btn-outline-navy{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:var(--white)}
.btn-outline-gold{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn-outline-gold:hover{background:var(--gold);color:var(--navy-deep)}
.btn-outline-white{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{background:var(--off-white);transform:translateY(-1px)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
/* Mobile */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--white);z-index:200;flex-direction:column;padding:5rem 5vw 3rem;gap:1rem}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--fd);font-size:1.5rem;color:var(--navy);padding:.5rem 0;border-bottom:1px solid var(--border);cursor:pointer}
/* There is no room for a hover menu on a phone, so the submenu is simply indented
   under its parent and always visible. */
.mobile-nav a.mobile-sub{font-size:1.1rem;padding-left:1.1rem;color:var(--text-mid)}

/* ════════════════════════════════════════════
   SECTION COMMONS
════════════════════════════════════════════ */
.container{max-width:1200px;margin:0 auto;padding:0 5vw}
.container-wide{max-width:1400px;margin:0 auto;padding:0 5vw}
.section{padding:90px 0}
.section-sm{padding:60px 0}
.section-label{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;display:flex;align-items:center;gap:.7rem;
}
.section-label::before{content:'';width:24px;height:1.5px;background:var(--gold);flex-shrink:0}
.section-title{
  font-family:var(--fd);font-size:clamp(1.9rem,3.5vw,2.8rem);
  font-weight:600;line-height:1.2;color:var(--navy);
}
.section-title em{font-style:italic;color:var(--gold)}
.section-sub{
  font-size:.97rem;font-weight:400;line-height:1.85;color:var(--muted);
  max-width:560px;margin-top:.9rem;
}
/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease-smooth),transform .65s var(--ease-smooth)}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}
/* Dividers */
.gold-rule{width:60px;height:2px;background:var(--gold);border-radius:2px}
.section-divider{height:1px;background:var(--border);margin:0}

/* ════════════════════════════════════════════
   HOME — HERO
════════════════════════════════════════════ */
.hero{
  background:var(--navy-deep);
  min-height:94vh;display:flex;align-items:center;
  position:relative;overflow:hidden;padding:80px 0;
}
.hero-bg-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 70% 40%, rgba(201,168,76,.06) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(30,58,110,.6) 0%, transparent 50%);
}
.hero-grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:center;
  max-width:1200px;margin:0 auto;padding:0 5vw;width:100%;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(201,168,76,.12);border:1px solid var(--border-gold);
  border-radius:50px;padding:.4rem 1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.5rem;
}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-headline{
  font-family:var(--fd);
  font-size:clamp(2.8rem,5vw,4.2rem);
  font-weight:600;line-height:1.1;
  color:var(--white);margin-bottom:1.4rem;
}
.hero-headline em{font-style:italic;color:var(--gold)}
.hero-desc{
  font-size:1rem;font-weight:300;line-height:1.85;
  color:rgba(255,255,255,.65);max-width:480px;margin-bottom:2.5rem;
}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:3rem}
.hero-trust-row{
  display:flex;align-items:center;gap:2rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
}
.hero-trust-item{display:flex;align-items:center;gap:.5rem}
.hero-trust-num{font-family:var(--fd);font-size:1.6rem;font-weight:600;color:var(--white)}
.hero-trust-label{font-size:.75rem;font-weight:400;color:rgba(255,255,255,.5);line-height:1.3}

/* Hero right — Verify card */
.hero-right{position:relative}
.verify-card{
  background:var(--white);border-radius:16px;padding:2.4rem;
  box-shadow:0 32px 80px rgba(0,0,0,.4);
  position:relative;z-index:2;
}
.verify-card-header{
  display:flex;align-items:center;gap:.8rem;
  margin-bottom:1.6rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--border);
}
.verify-card-shield{
  width:42px;height:42px;background:var(--navy);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.verify-card-shield svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.verify-card-title{font-family:var(--fd);font-size:1.15rem;font-weight:600;color:var(--navy)}
.verify-card-sub{font-size:.78rem;color:var(--muted)}
.verify-input-group{
  border:1.5px solid var(--border);border-radius:10px;overflow:hidden;
  margin-bottom:1rem;display:flex;flex-direction:column;
}
.verify-input{
  padding:.9rem 1.1rem;font-family:var(--fb);font-size:.9rem;
  border:none;outline:none;background:var(--off-white);color:var(--text);
  border-bottom:1px solid var(--border);
}
.verify-input:last-of-type{border-bottom:none}
.verify-input::placeholder{color:var(--muted)}
.verify-input:focus{background:var(--white)}
.verify-btn-full{width:100%;padding:.9rem;border-radius:10px;font-size:.9rem;margin-bottom:1.2rem}
.verify-example{
  display:flex;align-items:center;gap:.5rem;
  font-size:.75rem;color:var(--muted);
  /* The "active members" badge is absolutely positioned over this corner of the card, so
     keep the chips clear of it and let them wrap rather than slide underneath. */
  flex-wrap:wrap;padding-right:7.5rem;
}
.verify-example-pill{
  background:var(--off-white);border:1px solid var(--border);
  border-radius:50px;padding:.2rem .65rem;font-size:.7rem;color:var(--navy);cursor:pointer;transition:all .2s;
}
.verify-example-pill:hover{background:var(--gold-pale);border-color:var(--gold)}
/* Static example chips illustrate the accepted input formats and are not links. They were
   previously wired to a real member, and started returning "Agency Not Found" the day that
   record was removed. */
.verify-example-pill.is-static{cursor:default}
.verify-example-pill.is-static:hover{background:var(--off-white);border-color:var(--border)}
/* Floating badge */
.hero-badge-float{
  position:absolute;bottom:-26px;right:-24px;left:auto;
  background:var(--navy);border:2px solid var(--gold);
  border-radius:12px;padding:.85rem 1.3rem;z-index:3;
  box-shadow:0 12px 32px rgba(0,0,0,.3);text-align:right;
}
.hbf-label{font-size:.68rem;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase}
.hbf-count{font-family:var(--fd);font-size:1.8rem;font-weight:700;color:var(--gold);line-height:1}
.hbf-sub{font-size:.72rem;color:rgba(255,255,255,.6)}
/* Hero decorative */
.hero-deco-line{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:1px;height:60%;background:linear-gradient(to bottom, transparent, rgba(201,168,76,.3), transparent);
}

/* ════════════════════════════════════════════
   TRUST STRIP
════════════════════════════════════════════ */
.trust-strip{
  background:var(--navy);padding:1.6rem 0;
  border-top:1px solid rgba(201,168,76,.2);
}
/* The strip runs as one continuous line. The track carries the five points twice and
   travels exactly half its width, so the second copy is in position the moment the first
   leaves. That equality only holds while every child owns its trailing space, which is why
   the spacing sits on the dividers as margins and not as a gap on the track. */
.trust-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5rem,#000 calc(100% - 5rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5rem,#000 calc(100% - 5rem),transparent);
}
.trust-marquee-track{
  display:flex;align-items:center;width:max-content;
  animation:ts-scroll 40s linear infinite;
}
.trust-marquee:hover .trust-marquee-track{animation-play-state:paused}
@keyframes ts-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ts-item{display:flex;align-items:center;gap:.7rem;white-space:nowrap}
.ts-item svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.ts-text{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.8);white-space:nowrap}
.ts-divider{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 2.5rem;flex-shrink:0}
/* Someone who has asked for less motion gets the line standing still, and can scroll it. */
@media (prefers-reduced-motion:reduce){
  .trust-marquee{overflow-x:auto}
  .trust-marquee-track{animation:none}
}

/* ════════════════════════════════════════════
   HOME — VERIFY BEFORE YOU BOOK
════════════════════════════════════════════ */
.vbyb-section{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding:80px 0;position:relative;overflow:hidden;
}
.vbyb-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%, rgba(201,168,76,.08) 0%, transparent 60%);
}
.vbyb-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap;
}
.vbyb-left{flex:1;min-width:300px}
.vbyb-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(201,168,76,.12);border:1px solid var(--border-gold);
  border-radius:50px;padding:.35rem .9rem;font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;
}
.vbyb-title{font-family:var(--fd);font-size:clamp(2rem,3.5vw,3rem);font-weight:600;color:var(--white);line-height:1.15;margin-bottom:1rem}
.vbyb-title em{font-style:italic;color:var(--gold)}
.vbyb-desc{font-size:.97rem;font-weight:300;line-height:1.85;color:rgba(255,255,255,.6);max-width:440px;margin-bottom:2rem}
.vbyb-right{flex:1;min-width:300px;display:flex;justify-content:flex-end}
.vbyb-big-search{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,168,76,.25);
  border-radius:16px;padding:2rem;width:100%;max-width:440px;
  backdrop-filter:blur(10px);
}
.vbyb-search-label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
/* verify.blade.php marks this label .verify-search-label, which had no rule anywhere in
   this file — it inherited near-black body text onto the navy hero and was invisible
   (contrast 1.07:1). Same treatment as the home-page search label. */
.verify-search-label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.vbyb-search-input{
  width:100%;padding:1rem 1.2rem;border:1.5px solid rgba(201,168,76,.3);
  border-radius:10px;background:rgba(255,255,255,.08);color:var(--white);
  font-family:var(--fb);font-size:.95rem;outline:none;margin-bottom:.8rem;
}
.vbyb-search-input::placeholder{color:rgba(255,255,255,.35)}
.vbyb-search-row{display:flex;gap:.6rem;margin-bottom:.8rem}
.vbyb-select{
  flex:1;padding:.75rem .9rem;border:1.5px solid rgba(201,168,76,.2);
  border-radius:8px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  font-family:var(--fb);font-size:.82rem;outline:none;-webkit-appearance:none;
}
.vbyb-search-btn{width:100%;padding:.85rem}

/* ════════════════════════════════════════════
   HOME — EVENTS
════════════════════════════════════════════ */
.events-section{background:var(--warm-white)}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-top:2.5rem}
.event-card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 12px rgba(10,31,68,.05);transition:all .3s var(--ease-smooth);
}
.event-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(10,31,68,.1);border-color:var(--border-gold)}
.event-card-header{
  background:var(--navy);padding:1.4rem 1.6rem;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.event-date-block{text-align:center}
.event-day{font-family:var(--fd);font-size:2.2rem;font-weight:700;color:var(--gold);line-height:1}
.event-month{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.event-type-pill{
  background:rgba(201,168,76,.15);border:1px solid var(--border-gold);
  border-radius:50px;padding:.25rem .8rem;
  font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.event-card-body{padding:1.4rem 1.6rem}
.event-title{font-family:var(--fd);font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:.5rem;line-height:1.35}
.event-meta{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.1rem}
.event-meta-item{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}
.event-meta-item svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.event-card-footer{padding:.9rem 1.6rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.event-spots{font-size:.75rem;color:var(--muted)}
.event-spots strong{color:var(--navy)}

/* ════════════════════════════════════════════
   HOME — ANNOUNCEMENTS
════════════════════════════════════════════ */
.announce-section{background:var(--off-white)}
.announce-grid{display:flex;flex-direction:column;gap:0;margin-top:2.5rem;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.announce-card{
  background:var(--white);padding:1.4rem 2rem;
  display:flex;align-items:flex-start;gap:1.5rem;
  border-bottom:1px solid var(--border);transition:all .2s;cursor:pointer;
}
.announce-card:last-child{border-bottom:none}
.announce-card:hover{background:var(--off-white)}
.announce-date-col{flex-shrink:0;text-align:center;min-width:48px}
.announce-date-day{font-family:var(--fd);font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1}
.announce-date-mo{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.announce-cat{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .6rem;border-radius:50px;margin-bottom:.4rem;display:inline-block}
.cat-circular{background:#EFF6FF;color:#2563EB}
.cat-advisory{background:#FEF2F2;color:#DC2626}
.cat-industry{background:#F0FDF4;color:#16A34A}
.cat-general{background:var(--off-white);color:var(--muted)}
.announce-title{font-weight:600;color:var(--navy);font-size:.95rem;line-height:1.35;margin-bottom:.3rem}
.announce-excerpt{font-size:.82rem;color:var(--muted);line-height:1.6}
.announce-arrow{margin-left:auto;flex-shrink:0;color:var(--muted);transition:all .2s}
.announce-card:hover .announce-arrow{color:var(--gold);transform:translateX(3px)}

/* ════════════════════════════════════════════
   HOME — BENEFITS
════════════════════════════════════════════ */
.benefits-section{background:var(--warm-white)}
.benefits-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:4rem;
}
.benefits-visual{position:relative}
.benefit-big-card{
  background:var(--navy);border-radius:16px;padding:2.4rem;color:var(--white);
  position:relative;overflow:hidden;
}
.bbc-pattern{
  position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(201,168,76,.15) 0%, transparent 60%);
}
.bbc-inner{position:relative;z-index:1}
.bbc-number{font-family:var(--fd);font-size:4rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.5rem}
.bbc-label{font-size:1rem;font-weight:500;color:rgba(255,255,255,.8);margin-bottom:.3rem}
.bbc-sub{font-size:.82rem;color:rgba(255,255,255,.5)}
.bbc-rows{margin-top:1.8rem;display:flex;flex-direction:column;gap:.8rem}
.bbc-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.75)}
.bbc-check{width:20px;height:20px;border-radius:50%;background:rgba(201,168,76,.2);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bbc-check svg{width:10px;height:10px;stroke:var(--gold);fill:none;stroke-width:2.5;stroke-linecap:round}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:0}
.benefit-card{
  border:1px solid var(--border);border-radius:12px;padding:1.6rem;background:var(--white);
  transition:all .3s var(--ease-smooth);position:relative;overflow:hidden;
}
.benefit-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.benefit-card:hover::before{transform:scaleX(1)}
.benefit-card:hover{border-color:var(--border-gold);transform:translateY(-3px);box-shadow:0 8px 24px rgba(10,31,68,.08)}
.bc-icon{width:44px;height:44px;border-radius:10px;background:var(--off-white);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.bc-icon svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round}
.bc-title{font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:.4rem}
.bc-desc{font-size:.82rem;color:var(--muted);line-height:1.65}

/* ════════════════════════════════════════════
   HOME — ANTI-SCAM
════════════════════════════════════════════ */
.antiscam-section{
  background:linear-gradient(135deg,#7F1D1D 0%,#991B1B 50%,#7F1D1D 100%);
  padding:70px 0;position:relative;overflow:hidden;
}
.antiscam-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.05) 0%,transparent 60%)}
.antiscam-inner{position:relative;z-index:1;display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.antiscam-icon-big{
  width:80px;height:80px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.antiscam-icon-big svg{width:36px;height:36px;stroke:var(--white);fill:none;stroke-width:1.8;stroke-linecap:round}
.antiscam-text{flex:1}
.antiscam-label{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.6rem}
.antiscam-title{font-family:var(--fd);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:600;color:var(--white);margin-bottom:.6rem;line-height:1.25}
.antiscam-desc{font-size:.92rem;color:rgba(255,255,255,.7);line-height:1.75;max-width:500px}
.antiscam-actions{display:flex;flex-direction:column;gap:.8rem;flex-shrink:0}
.antiscam-alerts{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:1rem 1.4rem;
}
.aa-label{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.5rem}
.aa-item{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:rgba(255,255,255,.75);margin-bottom:.35rem}
.aa-dot{width:7px;height:7px;border-radius:50%;background:#F87171;flex-shrink:0;animation:blink 1.5s infinite}

/* ════════════════════════════════════════════
   HOME — GALLERY PREVIEW
════════════════════════════════════════════ */
.gallery-preview{background:var(--off-white)}
.gallery-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;
  gap:1rem;margin-top:2.5rem;border-radius:16px;overflow:hidden;
}
.gallery-thumb{
  background:var(--navy-mid);position:relative;overflow:hidden;cursor:pointer;
}
.gallery-thumb:first-child{grid-row:1/3}
.gallery-thumb:hover .gallery-overlay{opacity:1}
.gallery-overlay{
  position:absolute;inset:0;background:rgba(10,31,68,.6);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;
}
.gallery-overlay svg{width:32px;height:32px;stroke:var(--white);fill:none;stroke-width:1.5}
.gallery-thumb-label{
  position:absolute;bottom:.8rem;left:.8rem;right:.8rem;
  font-size:.75rem;font-weight:500;color:rgba(255,255,255,.8);
}
/* SVG placeholder thumbs */
.gt-1{background:linear-gradient(135deg,#1e3a6e,#0A1F44)}
.gt-2{background:linear-gradient(135deg,#2d4a7a,#1a2d54)}
.gt-3{background:linear-gradient(135deg,#162848,#0e1f3a)}
.gt-4{background:linear-gradient(135deg,#1a3058,#0A1F44)}
.gt-5{background:linear-gradient(135deg,#253d70,#162848)}

/* ════════════════════════════════════════════
   HOME — MEMBERSHIP CTA
════════════════════════════════════════════ */
.join-section{background:var(--warm-white);padding:80px 0}
.join-inner{
  background:var(--navy);border-radius:20px;padding:4rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.join-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 90% 50%,rgba(201,168,76,.12) 0%,transparent 60%),
             linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.join-content{position:relative;z-index:1}
.join-pretitle{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.join-title{font-family:var(--fd);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;color:var(--white);line-height:1.2;margin-bottom:.8rem}
.join-desc{font-size:.95rem;color:rgba(255,255,255,.65);line-height:1.75;max-width:420px}
.join-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:.8rem;align-items:flex-end}
.join-note{font-size:.78rem;color:rgba(255,255,255,.4);text-align:center}

/* ════════════════════════════════════════════
   VERIFY PAGE
════════════════════════════════════════════ */
.verify-page-hero{
  background:var(--navy-deep);padding:80px 0;
  position:relative;overflow:hidden;
}
.verify-page-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(201,168,76,.07) 0%,transparent 55%),
    linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);
  background-size:auto,60px 60px,60px 60px;
}
.verify-page-inner{position:relative;z-index:1}
.verify-page-title{font-family:var(--fd);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:600;color:var(--white);text-align:center;margin-bottom:.7rem}
.verify-page-title em{font-style:italic;color:var(--gold)}
.verify-page-sub{font-size:.97rem;color:rgba(255,255,255,.55);text-align:center;max-width:500px;margin:0 auto 2.5rem;line-height:1.75}
.verify-big-box{
  max-width:700px;margin:0 auto;
  background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.2);
  border-radius:16px;padding:2rem;backdrop-filter:blur(10px);
}
.verify-search-bar{
  display:flex;align-items:stretch;border:2px solid rgba(255,255,255,.15);
  border-radius:10px;overflow:hidden;margin-bottom:1.2rem;background:rgba(255,255,255,.08);
  transition:border-color .3s;
}
.verify-search-bar:focus-within{border-color:var(--gold)}
.verify-search-icon{padding:0 1.1rem;display:flex;align-items:center;flex-shrink:0}
.verify-search-icon svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.verify-search-field{
  flex:1;border:none;outline:none;background:transparent;
  font-family:var(--fb);font-size:.95rem;color:var(--white);padding:.9rem 0;
}
.verify-search-field::placeholder{color:rgba(255,255,255,.3)}
.verify-filters{display:flex;gap:.8rem;margin-bottom:1.4rem;flex-wrap:wrap}
.vf-select{
  flex:1;min-width:140px;padding:.65rem .9rem;
  border:1.5px solid rgba(255,255,255,.15);border-radius:8px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  font-family:var(--fb);font-size:.82rem;outline:none;-webkit-appearance:none;
  transition:border-color .3s;
}
.vf-select:focus{border-color:var(--gold)}
.verify-submit-row{display:flex;gap:.8rem}
.verify-submit-btn{flex:1;padding:.85rem}
.verify-tip{font-size:.73rem;color:rgba(255,255,255,.35);text-align:center;margin-top:.9rem}
/* Results */
.verify-results-section{background:var(--warm-white);padding:60px 0}
.verify-results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.verify-results-count{font-size:.85rem;color:var(--muted)}
.verify-results-count strong{color:var(--navy);font-weight:700}
.verify-results-sort{display:flex;gap:.5rem}
.sort-btn{padding:.4rem .9rem;font-size:.75rem;font-weight:600;border-radius:50px;border:1.5px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s}
.sort-btn.active{border-color:var(--navy);background:var(--navy);color:var(--white)}
.trust-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.3rem}
/* Trust Card */
.trust-card{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:1.6rem;box-shadow:0 2px 12px rgba(10,31,68,.05);
  transition:all .3s var(--ease-smooth);cursor:pointer;position:relative;overflow:hidden;
}
.trust-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(10,31,68,.1);border-color:var(--border-gold)}
.trust-card-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
.tc-logo{
  width:54px;height:54px;border-radius:10px;background:var(--off-white);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--navy);
}
.tc-info{flex:1}
.tc-name{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:.2rem;line-height:1.3}
.tc-meta{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.tc-dot{width:3px;height:3px;border-radius:50%;background:var(--border)}
.tc-badge{flex-shrink:0}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:50px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge-verified{background:#F0FDF4;color:#16A34A;border:1px solid #BBF7D0}
.badge-good{background:#EFF6FF;color:#2563EB;border:1px solid #BFDBFE}
.badge-pending{background:#FFFBEB;color:#D97706;border:1px solid #FDE68A}
.badge-expired{background:#F9FAFB;color:#6B7280;border:1px solid #E5E7EB}
.badge-suspended{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}
.badge svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round}
.trust-card-divider{height:1px;background:var(--border);margin-bottom:1.2rem}
.tc-details{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.2rem}
.tc-detail-item{}
.tc-detail-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.tc-detail-value{font-size:.83rem;font-weight:600;color:var(--navy)}
.tc-id{
  font-family:var(--fm);font-size:.72rem;color:var(--muted);
  background:var(--off-white);border:1px solid var(--border);
  border-radius:6px;padding:.3rem .65rem;margin-bottom:1.1rem;
}
.tc-actions{display:flex;gap:.7rem}
/* Verification result card */
.verify-result-card{
  background:var(--white);border:2px solid #BBF7D0;border-radius:16px;padding:2.4rem;
  max-width:600px;margin:0 auto;box-shadow:0 8px 32px rgba(22,163,74,.12);
}
.vrc-header{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.8rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.vrc-shield{
  width:60px;height:60px;border-radius:50%;background:#F0FDF4;border:2px solid #BBF7D0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.vrc-shield svg{width:28px;height:28px;stroke:#16A34A;fill:none;stroke-width:2;stroke-linecap:round}
.vrc-status-label{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#16A34A;margin-bottom:.2rem}
.vrc-agency-name{font-family:var(--fd);font-size:1.4rem;font-weight:600;color:var(--navy)}
.vrc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.8rem}
.vrc-item{}
.vrc-item-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.vrc-item-value{font-size:.9rem;font-weight:600;color:var(--navy)}
.vrc-id-row{
  background:var(--off-white);border:1px solid var(--border);border-radius:8px;
  padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.4rem;
}
.vrc-id-label{font-size:.72rem;color:var(--muted)}
.vrc-id-value{font-family:var(--fm);font-size:.85rem;font-weight:600;color:var(--navy)}
/* Not found */
.verify-not-found{
  background:var(--white);border:2px solid #FECACA;border-radius:16px;padding:2.4rem;
  max-width:500px;margin:0 auto;text-align:center;
}
.vnf-icon{width:60px;height:60px;border-radius:50%;background:#FEF2F2;margin:0 auto 1.2rem;display:flex;align-items:center;justify-content:center}
.vnf-icon svg{width:28px;height:28px;stroke:#DC2626;fill:none;stroke-width:2;stroke-linecap:round}
.vnf-title{font-family:var(--fd);font-size:1.3rem;font-weight:600;color:var(--navy);margin-bottom:.6rem}
.vnf-desc{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem}

/* ════════════════════════════════════════════
   MEMBER DIRECTORY
════════════════════════════════════════════ */
.directory-hero{background:var(--navy);padding:60px 0}
/* ── Directory hero: copy on the left, the region map on the right ──────── */
.dir-hero-grid{display:grid;grid-template-columns:1fr 390px;gap:3.5rem;align-items:center}
.dir-hero-copy{min-width:0}
/* The search bar is centred when it stands alone; in the two-column hero it belongs to
   the column, not the page. */
.dir-hero-grid .directory-search-bar{margin-left:0;margin-right:0}

.rmap{
  margin:0;display:flex;flex-direction:column;gap:.7rem;
  /* Navy on navy made the map read as background. Its own surface, a gold hairline and a
     lift give it the same standing as a card elsewhere on the site. */
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(201,168,76,.28);
  border-radius:16px;padding:1.3rem 1.4rem 1.1rem;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.rmap-head{display:flex;flex-direction:column;gap:.15rem}
.rmap-title{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.rmap-sub{font-size:.75rem;color:rgba(255,255,255,.55)}

/* Title and layer switch share a line, so the switch reads as part of the map's own
   heading rather than as another filter belonging to the directory below it. */
.rmap-headline{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.rmap-view{display:flex;align-items:center;gap:.4rem;flex:none}
.rmap-view-label{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
/* Sits on the card, not on the page: the light control the browser draws by default
   read as a hole punched in the navy. */
.rmap-view-select{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;
  color:var(--white);background:rgba(255,255,255,.06);
  border:1px solid rgba(201,168,76,.4);border-radius:7px;
  padding:.25rem 1.5rem .25rem .5rem;cursor:pointer;appearance:none;
  /* The chevron the appearance reset removes, redrawn in the card's own gold. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a84c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;background-size:8px;
  transition:border-color .2s,background-color .2s;
}
.rmap-view-select:hover{border-color:var(--gold);background-color:rgba(255,255,255,.1)}
.rmap-view-select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Tall enough for the artwork's 2:3 proportions at the card's full width. Capped lower
   and the map would shrink away from the sides of its own card. */
.rmap-svg{width:100%;height:auto;max-height:530px;overflow:visible}

/* The archipelago sits behind the pins — enough to recognise the country, never
   competing with the figures on top of it. */
.rmap-art{opacity:.9}

.rmap-pin{cursor:pointer}
.rmap-halo{fill:var(--gold);opacity:0;transition:opacity .2s}
.rmap-dot{
  fill:rgba(201,168,76,.9);stroke:rgba(255,255,255,.35);stroke-width:1;
  transition:fill .2s,stroke .2s;
}
.rmap-pin.is-empty .rmap-dot{fill:none;stroke:rgba(255,255,255,.3);stroke-dasharray:2 2}
.rmap-num{
  fill:var(--navy);font-family:var(--fb);font-size:10px;font-weight:700;
  text-anchor:middle;pointer-events:none;
}
.rmap-code{
  fill:rgba(255,255,255,.78);font-family:var(--fm);font-size:10px;
  pointer-events:none;
}
.rmap-pin:hover .rmap-halo{opacity:.22}
.rmap-pin:hover .rmap-dot{fill:var(--gold-light)}
.rmap-pin:focus-visible{outline:none}
.rmap-pin:focus-visible .rmap-halo{opacity:.35}
.rmap-pin.is-active .rmap-dot{fill:var(--white);stroke:var(--gold);stroke-width:2}
.rmap-pin.is-active .rmap-halo{opacity:.3}

.rmap-foot{font-size:.72rem;color:rgba(255,255,255,.5);margin:0}
.rmap-foot a{color:var(--gold-light);text-decoration:underline}

@media(max-width:1000px){
  .dir-hero-grid{grid-template-columns:1fr;gap:2rem}
  .rmap{max-width:360px;margin-inline:auto}
}

.directory-search-bar{
  max-width:700px;margin:2rem auto 0;
  display:flex;background:var(--white);border-radius:10px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.dir-search-input{
  flex:1;padding:1rem 1.4rem;border:none;outline:none;
  font-family:var(--fb);font-size:.95rem;color:var(--text);
}
.dir-search-input::placeholder{color:var(--muted)}
.dir-search-btn{padding:.9rem 1.8rem;border-radius:0;border-left:1px solid var(--border)}
.directory-section{background:var(--warm-white);padding:50px 0}
.directory-filters{
  display:flex;gap:.8rem;margin-bottom:2rem;flex-wrap:wrap;align-items:center;
}
.dir-filter-label{font-size:.8rem;font-weight:600;color:var(--muted)}
.dir-filter-select{
  padding:.5rem .9rem;border:1.5px solid var(--border);border-radius:8px;
  background:var(--white);font-family:var(--fb);font-size:.82rem;color:var(--text);
  outline:none;-webkit-appearance:none;cursor:pointer;
}
.dir-filter-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.dir-tag{
  padding:.35rem .8rem;border-radius:50px;border:1.5px solid var(--border);
  background:var(--white);font-size:.75rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;
}
.dir-tag.active{border-color:var(--navy);background:var(--navy);color:var(--white)}
.dir-tag:hover:not(.active){border-color:var(--navy-mid)}

/* ════════════════════════════════════════════
   MEMBER PROFILE
════════════════════════════════════════════ */
.profile-hero{background:var(--navy-deep);padding:60px 0 0}
.profile-hero-inner{display:flex;align-items:flex-end;gap:2rem;padding-bottom:0}
.profile-logo-big{
  width:100px;height:100px;border-radius:16px;background:var(--white);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--fd);font-size:2rem;font-weight:700;color:var(--navy);
  border:3px solid var(--gold);
}
.profile-hero-info{flex:1;padding-bottom:2rem}
.profile-name{font-family:var(--fd);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;color:var(--white);margin-bottom:.5rem}
.profile-meta-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.profile-meta-item{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:rgba(255,255,255,.6)}
.profile-meta-item svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.profile-badges-row{display:flex;gap:.6rem;flex-wrap:wrap}
.profile-tabs{display:flex;gap:0;border-bottom:none;margin-top:1.5rem}
.profile-tab{
  padding:.8rem 1.5rem;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.5);
  border-bottom:2px solid transparent;cursor:pointer;transition:all .2s;letter-spacing:.02em;
}
.profile-tab.active{color:var(--gold);border-color:var(--gold)}
.profile-tab:hover:not(.active){color:rgba(255,255,255,.8)}
.profile-content{background:var(--warm-white);padding:50px 0}
.profile-layout{display:grid;grid-template-columns:2fr 1fr;gap:2.5rem;align-items:start}
.profile-main-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2rem;margin-bottom:1.5rem}
.pmc-title{font-family:var(--fd);font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.pmc-title::before{content:'';width:3px;height:18px;background:var(--gold);border-radius:2px;flex-shrink:0}
.profile-sidebar-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.6rem;margin-bottom:1.2rem}
.psc-title{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.psc-row{display:flex;align-items:flex-start;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.psc-row:last-child{border-bottom:none}
.psc-label{color:var(--muted);font-weight:400}
.psc-value{color:var(--navy);font-weight:600;text-align:right}
.psc-id{font-family:var(--fm);font-size:.75rem}
/* QR card */
.qr-card{
  background:var(--navy);border-radius:14px;padding:1.6rem;text-align:center;
}
.qr-box{
  width:120px;height:120px;background:var(--white);border-radius:8px;
  margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold);
}
.qr-label{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.3rem}
.qr-sub{font-size:.75rem;color:rgba(255,255,255,.35)}
/* Services chips */
.services-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.service-chip{
  padding:.35rem .8rem;background:var(--off-white);border:1px solid var(--border);
  border-radius:50px;font-size:.78rem;color:var(--navy);font-weight:500;
}
.report-btn{
  width:100%;padding:.75rem;background:#FEF2F2;border:1.5px solid #FECACA;
  border-radius:8px;color:#DC2626;font-weight:600;font-size:.82rem;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.report-btn:hover{background:#DC2626;color:var(--white);border-color:#DC2626}
.report-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════ */
.about-hero{background:var(--navy-deep);padding:90px 0;position:relative;overflow:hidden}
.about-hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.about-hero-inner{position:relative;z-index:1;max-width:700px}
.page-hero-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.page-hero-title{font-family:var(--fd);font-size:clamp(2.2rem,4vw,3.5rem);font-weight:600;color:var(--white);line-height:1.15;margin-bottom:1rem}
.page-hero-title em{font-style:italic;color:var(--gold)}
.page-hero-sub{font-size:1rem;font-weight:300;color:rgba(255,255,255,.6);line-height:1.8;max-width:560px}
/* History timeline */
.timeline{position:relative;padding-left:2.5rem}
.timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:2.2rem}
.timeline-dot{
  position:absolute;left:-2rem;top:.3rem;
  width:20px;height:20px;border-radius:50%;
  background:var(--white);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.timeline-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}
.timeline-year{font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--gold);margin-bottom:.3rem}
.timeline-desc{font-size:.9rem;color:var(--text-mid);line-height:1.7}
/* Vision mission */
/* One card per row. This grid sits inside the left half of the About layout, so two
   columns left each card about 230px wide — fine for the one-line vision and mission it
   used to hold, but PTAA's current wording wraps at roughly 25 characters there. */
.vm-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
.vm-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2rem;position:relative;overflow:hidden}
.vm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--navy),var(--gold))}
.vm-icon{width:48px;height:48px;border-radius:10px;background:var(--off-white);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.vm-icon svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round}
.vm-title{font-family:var(--fd);font-size:1.1rem;font-weight:600;color:var(--navy);margin-bottom:.8rem}
.vm-text{font-size:.9rem;color:var(--text-mid);line-height:1.8}

/* General Profile: a single reading column. Capped near 70 characters so the lines stay
   comfortable on wide screens, with the spacing owned by the flex gap rather than
   per-paragraph margins. */
.about-profile{margin-top:1.4rem;max-width:70ch;display:flex;flex-direction:column;gap:1.1rem}
.about-profile p{font-size:.97rem;line-height:1.85;color:var(--text-mid)}

/* ════════════════════════════════════════════
   LEADERSHIP
════════════════════════════════════════════ */
.leaders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-top:2.5rem}
.leader-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-align:center;transition:all .3s var(--ease-smooth)}
.leader-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(10,31,68,.1);border-color:var(--border-gold)}
.leader-photo{
  height:180px;background:var(--navy-mid);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.leader-initials{font-family:var(--fd);font-size:2.5rem;font-weight:600;color:rgba(255,255,255,.3)}
/* The officer portraits are full-length shots dropped into a 180px landscape frame, so
   object-fit:cover centres on the torso and crops the head off. Bias the crop upward to
   keep the face in frame. object-position is not in the element's inline style, so this
   applies without touching the markup or re-cropping the stored images. */
.leader-photo img{object-position:50% 18%}

.leader-photo-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,31,68,.8) 0%,transparent 50%);
}
.leader-body{padding:1.2rem}
.leader-name{font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:.25rem}
.leader-position{font-size:.75rem;color:var(--gold);font-weight:600;letter-spacing:.04em}
.leader-term{font-size:.72rem;color:var(--muted);margin-top:.15rem}

/* ── MESSAGE FROM THE PRESIDENT ─────────────────────────────────────────
   His card is the first cell of the leadership grid, so the photo is exactly the size of
   every other officer's. The message takes the rest of that first row.

   Everything inside the panel is absolutely positioned, so the panel has no height of its
   own: the row is sized by the card beside it and the message is cut to exactly that,
   however long the copy runs. */
/* The President's card is deliberately larger than the rest: two columns wide with a
   portrait-shaped photo rather than the 180px landscape crop the grid uses, which suits a
   full-length studio shot and gives the message roughly 480px of visible copy instead of
   276px. */
.pm-card{grid-column:span 2}
.pm-card .leader-photo{height:380px}
/* The 18% bias the small landscape cards use crops the top of the head off once the
   frame is this tall, so this one sits closer to the top of the source. */
.pm-card .leader-photo img{object-position:50% 4%}
.pm-panel{
  grid-column:3 / -1;
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--border);border-radius:14px;
}
.pm-text{position:absolute;inset:1.5rem 1.6rem;overflow:hidden}
.pm-eyebrow{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:.75rem;
}
.pm-text p{font-size:.9rem;line-height:1.8;color:var(--text-mid);margin:0 0 .85rem}
.pm-text p:first-of-type{font-weight:500;color:var(--navy)}
.pm-fade{
  position:absolute;left:1.6rem;right:1.6rem;bottom:0;
  padding:3.5rem 0 1.4rem;display:flex;
  /* An explicit rgba stop rather than `transparent`: transparent resolves to transparent
     black in a gradient and greys the fade on the way down. */
  background:linear-gradient(to top,var(--white) 45%,rgba(255,255,255,0) 100%);
}
/* Below three columns the message stops being a row-mate and takes a height of its own,
   since there is no longer a card setting one. */
/* Once the grid is narrow enough that a two-column card leaves the message a sliver,
   the message drops below it and takes a height of its own. */
@media(max-width:1200px){
  .pm-panel{grid-column:1 / -1;height:20rem}
}
@media(max-width:760px){
  .pm-card{grid-column:1 / -1}
  .pm-card .leader-photo{height:320px}
  .pm-panel{grid-column:1 / -1;height:17rem}
}

/* The full message. A dialog rather than a scripted overlay: it centres, traps focus and
   closes on Escape without any code of ours, and the body inherits the site scrollbars. */
.pm-dialog{
  /* The global reset sets margin:0 on everything, which cancels the margin:auto a browser
     uses to centre a modal dialog. Put it back explicitly rather than relying on the UA. */
  position:fixed;inset:0;margin:auto;
  width:min(46rem,92vw);max-height:min(80vh,44rem);
  padding:0;border:none;border-radius:16px;
  background:var(--white);color:var(--text);
  box-shadow:0 40px 100px rgba(10,31,68,.35);
  overflow:hidden;
}
.pm-dialog::backdrop{background:rgba(7,19,48,.62)}
.pm-dialog-head{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.5rem 1.6rem 1.15rem;border-bottom:1px solid var(--border);
}
.pm-dialog-eyebrow{
  font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dark);
}
.pm-dialog h3{font-family:var(--fd);font-size:1.35rem;font-weight:600;color:var(--navy);margin:.4rem 0 .2rem}
.pm-dialog-role{font-size:.78rem;color:var(--muted)}
.pm-dialog-close{
  margin-left:auto;flex-shrink:0;width:34px;height:34px;
  border-radius:8px;border:1px solid var(--border);background:var(--white);
  color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;transition:all .2s;
}
.pm-dialog-close:hover{background:var(--off-white);color:var(--navy);border-color:var(--gold)}
.pm-dialog-body{
  padding:1.5rem 1.6rem 1.9rem;overflow-y:auto;
  max-height:calc(min(80vh,44rem) - 8rem);
}
.pm-dialog-body:focus{outline:none}
.pm-dialog-body p{font-size:.95rem;line-height:1.9;color:var(--text-mid);margin:0 0 1.15rem}
.pm-dialog-body p:first-child{font-size:1.05rem;font-weight:500;color:var(--navy)}
.pm-dialog-body p:last-child{
  margin-bottom:0;font-family:var(--fd);font-style:italic;
  font-size:1.05rem;color:var(--navy);
}
body.pm-open{overflow:hidden}



/* ════════════════════════════════════════════
   EVENTS PAGE
════════════════════════════════════════════ */
.events-full-grid{display:grid;grid-template-columns:1fr 340px;gap:2.5rem;align-items:start}
.events-list{display:flex;flex-direction:column;gap:1.2rem}
.event-row-card{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  display:flex;gap:0;overflow:hidden;transition:all .3s var(--ease-smooth);cursor:pointer;
}
.event-row-card:hover{border-color:var(--border-gold);box-shadow:0 8px 24px rgba(10,31,68,.08);transform:translateX(3px)}
.event-row-date{
  background:var(--navy);padding:1.4rem;min-width:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex-shrink:0;
}
.event-row-day{font-family:var(--fd);font-size:2rem;font-weight:700;color:var(--gold);line-height:1}
.event-row-mo{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.event-row-body{flex:1;padding:1.4rem 1.6rem}
.event-row-title{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:.5rem;line-height:1.35}
.event-row-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.event-row-meta-item{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--muted)}
.event-row-meta-item svg{width:12px;height:12px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.event-row-desc{font-size:.83rem;color:var(--muted);line-height:1.6}
.event-row-actions{padding:1.4rem;display:flex;flex-direction:column;justify-content:center;gap:.6rem;border-left:1px solid var(--border);flex-shrink:0}
/* Sidebar calendar widget */
.calendar-widget{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:88px}
.cw-header{background:var(--navy);padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between}
.cw-month{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--white)}
.cw-nav{display:flex;gap:.3rem}
.cw-nav-btn{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:all .2s}
.cw-nav-btn:hover{background:rgba(255,255,255,.2);color:var(--white)}
.cw-nav-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cw-grid{padding:1rem}
.cw-days{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.5rem}
.cw-day-label{text-align:center;font-size:.65rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:.3rem 0}
.cw-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cw-cell{text-align:center;padding:.4rem .2rem;font-size:.8rem;border-radius:6px;cursor:pointer;transition:all .2s;color:var(--text-mid)}
.cw-cell:hover:not(.cw-empty){background:var(--off-white)}
.cw-cell.event{color:var(--navy);font-weight:700;background:var(--gold-pale);border-bottom:2px solid var(--gold)}
.cw-cell.today{background:var(--navy);color:var(--white);font-weight:700}
.cw-cell.empty{color:transparent;cursor:default}
.upcoming-events-list{padding:1rem;border-top:1px solid var(--border)}
.uel-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.uel-item{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.uel-item:last-child{border-bottom:none}
.uel-date-mini{flex-shrink:0;text-align:center;min-width:32px}
.uel-day-mini{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--navy);line-height:1}
.uel-mo-mini{font-size:.6rem;font-weight:600;text-transform:uppercase;color:var(--gold)}
.uel-title-text{font-size:.8rem;font-weight:600;color:var(--navy);line-height:1.3}
.uel-type{font-size:.7rem;color:var(--muted)}

/* ════════════════════════════════════════════
   ADVISORIES (SCAM CENTER)
════════════════════════════════════════════ */
.advisories-hero{
  background:linear-gradient(135deg,#7F1D1D,#991B1B);
  padding:70px 0;position:relative;overflow:hidden;
}
.advisories-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(255,255,255,.05) 0%,transparent 60%)}
.advisory-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.5rem}
.advisory-card{
  background:var(--white);border-radius:14px;border:1px solid var(--border);
  overflow:hidden;transition:all .3s var(--ease-smooth);cursor:pointer;
}
.advisory-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(127,29,29,.1)}
.advisory-card-severity{height:4px;width:100%}
.sev-critical{background:#DC2626}
.sev-high{background:#EA580C}
.sev-medium{background:#D97706}
.sev-low{background:#16A34A}
.advisory-card-body{padding:1.4rem 1.6rem}
.advisory-type-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.advisory-type-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .7rem;border-radius:50px;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.atb-fraud{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}
.atb-advisory{background:#FFFBEB;color:#D97706;border:1px solid #FDE68A}
.atb-suspension{background:#F3F4F6;color:#374151;border:1px solid #E5E7EB}
.advisory-date{font-size:.72rem;color:var(--muted)}
.advisory-title{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:.5rem;line-height:1.35}
.advisory-excerpt{font-size:.83rem;color:var(--muted);line-height:1.65}
.advisory-card-footer{padding:.9rem 1.6rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.advisory-agency{font-size:.75rem;color:var(--navy);font-weight:600}
.advisory-read{font-size:.75rem;font-weight:700;color:var(--danger);display:flex;align-items:center;gap:.3rem}
/* Stats row */
.advisories-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2.5rem}
.adv-stat-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1.4rem;text-align:center}
.adv-stat-num{font-family:var(--fd);font-size:2rem;font-weight:700;margin-bottom:.2rem}
.adv-stat-label{font-size:.75rem;color:var(--muted)}

/* ════════════════════════════════════════════
   MEMBERSHIP PAGE
════════════════════════════════════════════ */
.membership-hero{background:var(--navy);padding:80px 0;position:relative;overflow:hidden}
.membership-hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%,rgba(201,168,76,.1) 0%,transparent 55%);
}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2.5rem}
.category-card{
  border:2px solid var(--border);border-radius:16px;padding:2rem;background:var(--white);
  position:relative;transition:all .3s var(--ease-smooth);
}
.category-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 16px 40px rgba(10,31,68,.1)}
.category-card.featured{border-color:var(--gold);background:var(--navy)}
.cc-tag{font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.6rem}
.cc-tag-light{color:var(--gold)}
.cc-tag-dark{color:var(--gold)}
.cc-name{font-family:var(--fd);font-size:1.25rem;font-weight:600;margin-bottom:.3rem}
.cc-name-light{color:var(--white)}
.cc-name-dark{color:var(--navy)}
.cc-desc{font-size:.85rem;line-height:1.7;margin-bottom:1.4rem}
.cc-desc-light{color:rgba(255,255,255,.6)}
.cc-desc-dark{color:var(--muted)}
.cc-features{margin-bottom:1.5rem}
.cc-feature{display:flex;align-items:center;gap:.6rem;font-size:.83rem;margin-bottom:.5rem}
.cc-feature svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}
.cc-feature-light{color:rgba(255,255,255,.75)}
.cc-feature-dark{color:var(--text-mid)}
/* Requirements steps */
.req-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}
.req-step{text-align:center;padding:1.5rem}
.req-step-num{
  width:52px;height:52px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
  font-family:var(--fd);font-size:1.2rem;font-weight:700;color:var(--gold);
}
.req-step-title{font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:.4rem}
.req-step-desc{font-size:.82rem;color:var(--muted);line-height:1.65}

/* ════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════ */
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;align-items:start;padding:70px 0}
.contact-info-card{background:var(--navy);border-radius:16px;padding:2.4rem;color:var(--white);position:relative;overflow:hidden}
.cic-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 80%,rgba(201,168,76,.1) 0%,transparent 55%)}
.cic-inner{position:relative;z-index:1}
.cic-logo{width:56px;height:56px;background:rgba(201,168,76,.15);border:1px solid var(--border-gold);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}
.cic-logo svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round}
.cic-title{font-family:var(--fd);font-size:1.3rem;font-weight:600;margin-bottom:.6rem}
.cic-desc{font-size:.87rem;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:1.8rem}
.cic-items{display:flex;flex-direction:column;gap:1.1rem}
.cic-item{display:flex;align-items:flex-start;gap:.8rem}
.cic-item-icon{width:36px;height:36px;border-radius:8px;background:rgba(201,168,76,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}
.cic-item-icon svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.cic-item-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.15rem}
.cic-item-value{font-size:.87rem;color:rgba(255,255,255,.8);line-height:1.5}
.contact-form-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:2.4rem}
.cf-title{font-family:var(--fd);font-size:1.3rem;font-weight:600;color:var(--navy);margin-bottom:.4rem}
.cf-sub{font-size:.87rem;color:var(--muted);margin-bottom:2rem;line-height:1.65}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.cf-group{display:flex;flex-direction:column;gap:.4rem}
.cf-group.full{grid-column:1/-1}
.cf-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cf-input{
  padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:8px;
  font-family:var(--fb);font-size:.9rem;color:var(--text);outline:none;background:var(--off-white);
  transition:border-color .2s,background .2s;-webkit-appearance:none;
}
.cf-input:focus{border-color:var(--gold);background:var(--white)}
.cf-input::placeholder{color:var(--muted)}
textarea.cf-input{resize:vertical;min-height:110px}
/* A rejected field says so where the applicant is looking, rather than only in the
   summary at the top of the step. */
.cf-hint{font-size:.75rem;color:var(--muted);line-height:1.5}
.cf-error{font-size:.78rem;font-weight:500;color:var(--danger);line-height:1.5}
.cf-input.is-invalid{
  border-color:var(--danger);
  background:#FEF2F2;
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
.cf-input.is-invalid:focus{border-color:var(--danger);outline-color:var(--danger)}
/* Field and its exemption on one line, the tick box sized to its own content so the
   number keeps the rest. */
.cf-inline{display:flex;align-items:stretch;gap:.6rem}
.cf-inline .cf-input{flex:1;min-width:0}
.cf-check{
  display:flex;align-items:center;gap:.45rem;flex-shrink:0;
  padding:0 .85rem;border:1.5px solid var(--border);border-radius:8px;
  background:var(--white);cursor:pointer;transition:all .2s;
  font-size:.82rem;font-weight:500;color:var(--text-mid);white-space:nowrap;
}
.cf-check:hover{border-color:var(--gold)}
.cf-check:has(input:checked){border-color:var(--gold);background:var(--gold-pale);color:var(--navy)}
.cf-check input{width:15px;height:15px;accent-color:var(--navy);cursor:pointer}
.cf-select{-webkit-appearance:none}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
footer{background:var(--navy-deep);color:rgba(255,255,255,.85);padding:70px 0 0}
.footer-inner{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;
  padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.08);
  max-width:1200px;margin:0 auto;padding-left:5vw;padding-right:5vw;
}
.footer-brand{}
.footer-brand-mark{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;cursor:pointer}
.fbm-logo{width:44px;height:44px;background:var(--navy);border:1px solid rgba(201,168,76,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fbm-name{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--white)}
.fbm-sub{font-size:.65rem;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase;margin-top:.1rem}
.footer-desc{font-size:.84rem;color:rgba(255,255,255,.45);line-height:1.8;margin-bottom:1.4rem;max-width:280px}
.footer-socials{display:flex;gap:.6rem}
.footer-social{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.footer-social:hover{background:rgba(201,168,76,.15);border-color:var(--gold);color:var(--gold)}
.footer-col-title{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.1rem}
.footer-col ul li{margin-bottom:.55rem}
.footer-col ul li a{font-size:.85rem;color:rgba(255,255,255,.55);transition:color .2s;cursor:pointer}
.footer-col ul li a:hover{color:var(--gold)}
.footer-bottom{
  max-width:1400px;margin:0 auto;padding:1.4rem 5vw;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.3)}
.footer-legal{display:flex;gap:1.2rem}
.footer-legal a{font-size:.75rem;color:rgba(255,255,255,.3);cursor:pointer;transition:color .2s}
.footer-legal a:hover{color:rgba(255,255,255,.7)}
/* Gold line at footer top */
.footer-gold-line{height:3px;background:linear-gradient(90deg,var(--gold),rgba(201,168,76,.3),transparent)}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-right{display:none}
  .benefits-intro{grid-template-columns:1fr}
  .benefits-visual{display:none}
  .events-full-grid{grid-template-columns:1fr}
  .profile-layout{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .about-story-inner{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr;padding:50px 0}
}
@media(max-width:768px){
  .topbar{display:none}
  .nav-links,.nav-cta-group .btn-outline-navy{display:none}
  .hamburger{display:flex}
  .nav-inner{height:60px}
  .hero{min-height:auto;padding:60px 0 40px}
  .section{padding:60px 0}
  .benefits-grid{grid-template-columns:1fr 1fr}
  .vm-grid{grid-template-columns:1fr}
  .advisory-cards-grid{grid-template-columns:1fr}
  .advisories-stats{grid-template-columns:1fr 1fr}
  .categories-grid{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:1fr}
  .leaders-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gallery-thumb:first-child{grid-row:auto}
  .trust-cards-grid{grid-template-columns:1fr}
  .vbyb-inner{flex-direction:column}
  .event-row-card{flex-direction:column}
  .event-row-actions{border-left:none;border-top:1px solid var(--border);flex-direction:row}
}
@media(max-width:480px){
  .benefits-grid{grid-template-columns:1fr}
  .advisories-stats{grid-template-columns:1fr 1fr}
  .leaders-grid{grid-template-columns:repeat(2,1fr)}
  .req-steps{grid-template-columns:1fr}
  .tc-details{grid-template-columns:1fr}
}
/* ════════════════════════════════════════════
   BRAND LOGO (official PTAA wordmark)
════════════════════════════════════════════ */
.brand-logo{height:40px;width:auto;display:block}
.brand-logo-sm{height:34px;width:auto;display:block}
.brand-logo-lg{height:48px;width:auto;display:block}
/* Navy logo flipped to white for dark backgrounds (footer, loader, portal) */
.brand-logo-light{filter:brightness(0) invert(1)}
@media(max-width:600px){.brand-logo{height:32px}}

/* ════════════════════════════════════════════
   RESPONSIVE AUDIT FIXES — 2026-07
   (mobile/tablet remediation; see audit report)
════════════════════════════════════════════ */

/* H-02 — header overflow: switch to the hamburger at <=1024px, and keep the
   full desktop nav compact enough to fit the 1025-1280 band. */
@media(max-width:1024px){
  .topbar{display:none}
  .nav-links,.nav-cta-group .btn-outline-navy{display:none}
  .hamburger{display:flex}
  .nav-inner{height:60px}
}
@media(min-width:1025px) and (max-width:1280px){
  .nav-links{gap:0}
  .nav-link{padding-left:.4rem;padding-right:.4rem;font-size:.82rem;letter-spacing:0}
  .nav-cta-group{gap:.5rem}
  .nav-cta-group .btn-outline-navy{display:none}
  .brand-logo{height:34px}
}

/* H-03 About stats + M-01 event-detail two-column blocks collapse on mobile */
@media(max-width:768px){
  .stats-grid{grid-template-columns:1fr 1fr !important}
  .about-cols{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr !important}
}

/* M-02 comfortable touch targets on mobile */
@media(max-width:768px){
  .btn{min-height:44px}
  .hamburger{padding:11px 8px}
}

/* M-03 floor small labels/eyebrows at 12px on mobile */
@media(max-width:768px){
  .cf-label,.aa-label,.antiscam-label{font-size:12px}
}

/* L-01 320px floor: let tight button rows wrap + break long strings */
@media(max-width:480px){
  .antiscam-actions{flex-shrink:1}
  .antiscam-actions .btn{white-space:normal}
  .cic-item-value,.aa-item{overflow-wrap:anywhere}
}

/* L-01 residual — sub-360px legacy devices (iPhone SE 1st-gen class):
   clip the last few px of overflow without breaking sticky headers. */
@media(max-width:360px){ body{overflow-x:clip} }

/* H-01 residual — let portal grid items shrink below intrinsic content width
   (file inputs etc.) so single-column cards fit the phone. */
@media(max-width:860px){
  .portal-content [style*="grid-template-columns"]>*{min-width:0}
  .portal-card{min-width:0}
  .portal-card .cf-input,.portal-card input,.portal-card select{max-width:100%}
}

/* ════════════════════════════════════════════
   MESSAGE FROM THE PRESIDENT
   ════════════════════════════════════════════ */
/* Portrait and message share one height, so the text is cut to exactly the height of the
   image whatever the copy does. The fade sits inside that box rather than below it, which
   is why the two columns stay level and Read more never lengthens the row. */

/* ---------- scrollbars ----------------------------------------------------
   Every scrollable surface is painted from the site palette instead of the
   browser's own chrome, so Chrome, Firefox and Safari agree with each other
   and with the CMS. Firefox takes scrollbar-width/color; WebKit takes the
   pseudo-elements. */
*{scrollbar-width:thin;scrollbar-color:rgba(10,31,68,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:rgba(10,31,68,.35);border-radius:8px;
  border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(10,31,68,.6);
  border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-corner{background:transparent}

/* ---------- select controls ------------------------------------------------
   The four select classes only set -webkit-appearance, which Firefox ignores —
   so the same dropdown arrived with Chrome's chrome on one machine and
   Firefox's on another, and on WebKit the native arrow was stripped with
   nothing drawn in its place. Normalise all three prefixes and supply our own
   chevron. (The opened option list is drawn by the operating system and cannot
   be reached from CSS; only the closed control is ours.) */
select,
.vbyb-select,.vf-select,.dir-filter-select,.cf-select,select.cf-input{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:1rem 1rem;
  padding-right:2.2rem;
}
/* Dark-ground selects need a light chevron to stay visible. */
.vbyb-select,.vf-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8C97A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select::-ms-expand{display:none}

/* ---------- the site's own dropdown ----------------------------------------
   A native <select> draws its option list with the operating system: it ignores
   everything above, differs on every machine, and on a dark card reads as a hole
   punched in the page. Styling the closed box never fixed that — the open list is
   the part people look at. These rules dress the listbox that public/js/site.js
   builds over each select, down to its own scrollbar.

   The native element is still in the DOM underneath, kept at opacity 0 rather
   than display:none so the browser can still focus it to report a validation
   message on a required field. */
.ps{position:relative;display:inline-block;vertical-align:top;text-align:left}
.ps-native{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;border:0;padding:0;margin:0;appearance:none;
}

.ps-btn{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
  font-family:var(--fb);font-size:.82rem;color:var(--navy);text-align:left;
  background:#fff;border:1px solid rgba(18,32,59,.16);border-radius:9px;
  padding:.55rem .8rem;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.ps-btn:hover{border-color:rgba(201,168,76,.75)}
.ps-btn:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.22)}
.ps.is-open .ps-btn{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.18)}
.ps-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-chev{
  width:11px;height:8px;flex:none;fill:none;
  stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s;
}
.ps.is-open .ps-chev{transform:rotate(180deg)}

.ps-panel{
  position:absolute;z-index:60;left:0;top:calc(100% + 6px);min-width:100%;
  /* Long option text sets the width rather than being cut to the button's. */
  width:max-content;max-width:min(22rem,80vw);
  margin:0;padding:.3rem;list-style:none;
  max-height:16.5rem;overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid rgba(201,168,76,.5);border-radius:11px;
  box-shadow:0 16px 40px rgba(18,32,59,.22);
  animation:psIn .14s ease-out;
}
.ps--up .ps-panel{top:auto;bottom:calc(100% + 6px);transform-origin:bottom left}
/* A control at the right of a card would push its panel off the screen edge. */
.ps--right .ps-panel{left:auto;right:0}
.ps-panel:focus{outline:none}
@keyframes psIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.ps-group{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(18,32,59,.45);padding:.5rem .65rem .25rem;
}
.ps-opt{
  font-family:var(--fb);font-size:.82rem;color:var(--navy);
  padding:.46rem .65rem;border-radius:7px;cursor:pointer;white-space:nowrap;
  transition:background-color .12s,color .12s;
}
.ps-opt:hover,.ps-opt.is-active{background:rgba(201,168,76,.16)}
.ps-opt.is-selected{background:rgba(201,168,76,.28);font-weight:600}
.ps-opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* The scrollbar is part of the dropdown, so it is drawn by the site too. */
.ps-panel{scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.75) transparent}
.ps-panel::-webkit-scrollbar{width:11px}
.ps-panel::-webkit-scrollbar-track{background:transparent}
.ps-panel::-webkit-scrollbar-thumb{
  background:rgba(201,168,76,.6);border-radius:99px;
  border:3px solid #fff;background-clip:content-box;
}
.ps-panel::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:content-box}

/* On navy — the directory map card. Same control, inverted ground. */
.ps--dark .ps-btn{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;
  color:var(--white);background:rgba(255,255,255,.06);
  border-color:rgba(201,168,76,.4);border-radius:7px;padding:.28rem .55rem;
}
.ps--dark .ps-btn:hover{background:rgba(255,255,255,.11);border-color:var(--gold)}
.ps--dark.is-open .ps-btn{background:rgba(255,255,255,.11);border-color:var(--gold)}
.ps--dark .ps-panel{
  background:#16264a;border-color:rgba(201,168,76,.45);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.ps--dark .ps-opt{font-family:var(--fm);font-size:.68rem;color:rgba(255,255,255,.85)}
.ps--dark .ps-group{color:rgba(255,255,255,.4)}
.ps--dark .ps-opt:hover,.ps--dark .ps-opt.is-active{background:rgba(201,168,76,.22);color:var(--white)}
.ps--dark .ps-opt.is-selected{background:rgba(201,168,76,.34);color:var(--white)}
.ps--dark .ps-panel::-webkit-scrollbar-thumb{border-color:#16264a}

/* The filter bar sizes its controls; the button inherits that rather than the
   select's old fixed width. */
.directory-filters .ps{min-width:9.5rem}
.directory-filters .ps-btn{min-height:2.6rem}
/* Form selects run the full width of their field. */
.cf-group .ps,.portal-card .ps{display:block;width:100%}
.cf-group .ps-btn,.portal-card .ps-btn{min-height:2.9rem;font-size:.9rem}

@media(max-width:640px){
  .ps-panel{max-width:min(20rem,88vw)}
  .directory-filters .ps{min-width:0;flex:1 1 8rem}
}
/* On a form the dropdown is one of the fields, so it takes the field's own ground
   and border rather than standing out as the one white control in the column. */
.cf-group .ps-btn,.portal-card .ps-btn{
  padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:8px;
  background:var(--off-white);color:var(--text);font-size:.9rem;
}
.cf-group .is-open .ps-btn,.portal-card .is-open .ps-btn,
.cf-group .ps-btn:hover,.portal-card .ps-btn:hover{background:var(--white);border-color:var(--gold)}

/* ---------- mobile nav: it has to scroll -----------------------------------
   The panel is fixed at inset:0 with twelve links in a flex column, and opening
   it locks the body. Two things followed: the column had no overflow, so the
   last links (Announcements, Alerts, Contact) were cut off the bottom edge, and
   with the body locked there was no way to reach them. Flex children shrink by
   default too, so the links were being squeezed instead of overflowing.

   It scrolls now, on the site's own scrollbar rather than the browser's. */
.mobile-nav{
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.75) transparent;
}
/* 100dvh tracks the phone's address bar as it hides and shows; inset:0 alone
   leaves the last link sitting under it. */
@supports (height:100dvh){.mobile-nav{height:100dvh}}
/* Links keep their height instead of compressing to fit. */
.mobile-nav a{flex:none}
/* Clearance under the last link once the list is scrollable. */
.mobile-nav a:last-child{border-bottom:0;margin-bottom:2rem}

.mobile-nav::-webkit-scrollbar{width:10px}
.mobile-nav::-webkit-scrollbar-track{background:transparent}
.mobile-nav::-webkit-scrollbar-thumb{
  background:rgba(201,168,76,.6);border-radius:99px;
  border:3px solid var(--white);background-clip:content-box;
}
.mobile-nav::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:content-box}

/* ---------- footer social accounts -----------------------------------------
   Grouped by whose account it is. PTAA and TravelTour Expo each run a Facebook
   and an Instagram, so one flat strip showed two identical marks side by side
   with nothing to choose between them. */
.footer-socials{display:flex;flex-direction:column;gap:.9rem}
.footer-social-group{display:flex;flex-direction:column;gap:.45rem}
.footer-social-label{
  font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.3);
}
.footer-social-row{display:flex;gap:.6rem}
/* These were divs holding the letters "f", "tw", "ig". They are anchors now. */
a.footer-social{text-decoration:none}
.footer-social svg{width:17px;height:17px;display:block}
/* The label under an address that needs one — the legal hotline. */
.footer-note{
  display:block;font-size:.66rem;color:rgba(255,255,255,.3);
  letter-spacing:.04em;margin-top:.1rem;
}
/* The contact column mixes links with plain lines now; the plain ones match. */
.footer-col ul li span{font-size:.85rem;color:rgba(255,255,255,.55);display:block;line-height:1.5}

/* ---------- member profile: website and social accounts --------------------
   The website was printed in link blue with nothing behind it. Both it and the
   agency's own accounts are real links now. */
.psc-link{color:var(--info);text-decoration:none;transition:color .2s}
.psc-link:hover{color:var(--gold);text-decoration:underline}
.psc-socials{display:flex;gap:.45rem;justify-content:flex-end;flex-wrap:wrap}
.psc-social{
  width:30px;height:30px;border-radius:7px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--muted);
  transition:color .2s,border-color .2s,background-color .2s;
}
.psc-social:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.1)}
.psc-social svg{width:15px;height:15px;display:block}

/* The contact card's email is a real mailto now, and the legal hotline sits beside it. */
.cic-item-link{color:inherit;text-decoration:none;transition:color .2s}
.cic-item-link:hover{color:var(--gold);text-decoration:underline}

/* ---------- the secretariat, led from the left ------------------------------
   The Secretary General heads this office, so the section is built like the
   leadership one above it: one tall card on the left, his staff beside him.

   Five explicit columns rather than the auto-fill the other grids use — two for
   him and three for them is what puts three staff on the first line and the rest
   on the second, and auto-fill would re-flow that at every width. */
.sec-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
/* Two columns wide and both rows tall, so he stands beside the whole group
   rather than above it. */
.sec-lead{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
/* The photo takes whatever height the two rows leave, so the card's foot lines up
   with the bottom of the second row of staff instead of floating short. */
.sec-lead .leader-photo{flex:1;height:auto;min-height:380px}
/* A portrait in a frame this tall crops through the chin at the 18% bias the
   small landscape cards use, so this one sits nearer the top of the source. */
.sec-lead .leader-photo img{object-position:50% 8%}
.sec-lead .leader-name{font-size:1.15rem}

/* Below this the five columns stop earning their width: he takes the full row and
   the staff fall into three, then two. */
@media(max-width:1100px){
  .sec-grid{grid-template-columns:repeat(3,1fr)}
  .sec-lead{grid-column:1 / -1;grid-row:auto}
  .sec-lead .leader-photo{min-height:320px}
}
@media(max-width:760px){
  .sec-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- leadership card proportions ------------------------------------
   Three sizing corrections, kept together so the two sections stay in step. */

/* The President carries the section, so his portrait is given the height to do it.
   The message panel beside him is sized by this row, so it gains the same height
   and shows more of the letter before it fades. */
.pm-card .leader-photo{height:460px}

/* The secretariat staff are supporting cards, not headline ones: a shorter frame
   and a tighter body stop each of them claiming as much room as a trustee. */
.sec-grid .leader-photo{height:150px}
.sec-grid .leader-body{padding:.85rem .8rem}
/* Secretariat staff carry no term, so the element was reserving a line of height
   for a string that is never there. */
.sec-grid .leader-term:empty{display:none}

/* His portrait was filling the whole of both rows, which made it the tallest thing
   on the page by some distance. Capped, it still leads the section without
   towering over the office it belongs to. */
.sec-lead .leader-photo{min-height:0;max-height:330px}
/* With the photo capped, the card no longer needs to stretch the full two rows —
   it sits to the top of them, and the row below stays its own height. */
.sec-lead{align-self:start}

/* His portrait is a standing 600x900 shot. Shortening the frame to 330px left the
   crop window starting 23px down a 620px-tall scaled image, which took the top of
   his head off. Anchored to the top instead: the source already carries its own
   headroom, so nothing above his hair is lost and nothing of his face is. */
.sec-lead .leader-photo img{object-position:50% 0}

/* ---------- past presidents: circular portraits ----------------------------
   Their photographs were supplied already cut to circles on a plain ground, so a
   landscape frame boxed a circle inside a rectangle and left corners of dead
   background around every one of them. The frame matches the picture now. */
.pp-grid .leader-photo{
  width:150px;height:150px;margin:1.5rem auto .3rem;border-radius:50%;
}
/* These are square sources with the face centred, so no bias — the 18% lift the
   landscape cards need would push every face off centre in a circle. */
.pp-grid .leader-photo img{object-position:50% 50%}
/* The overlay darkens the foot of a rectangular frame; around a circle it reads as
   a smudge across the chin. */
.pp-grid .leader-photo-overlay{display:none}
.pp-grid .leader-body{padding:.4rem .8rem 1.2rem}

@media(max-width:480px){
  .pp-grid .leader-photo{width:120px;height:120px}
}

/* His card goes full width below 1100px, and at 330px tall that made the frame
   nearly 3:1 — a standing 600x900 portrait cropped to a letterbox slot, which cut
   straight through his face. Capping the picture's width keeps the frame near the
   4:3 it is on a desktop, whatever the card does around it: under 460px the photo
   still fills the card edge to edge, and past that it centres instead of stretching
   into a slot no portrait survives. */
.sec-lead .leader-photo{max-width:460px;margin-left:auto;margin-right:auto}

/* The real reason his face was cut, which object-position could never have fixed.
   .leader-photo is a flex container with align-items:center, and the img inside
   carries an inline height:100%. Capping the box with max-height rather than height
   left its height indefinite, so that percentage resolved to auto: the image laid
   itself out at its natural 460x690, overflowed the 330px box, and was centred —
   showing the middle of a standing portrait, which is his chest. object-fit never
   got a say, because nothing was being fitted.

   A definite height gives the percentage something to resolve against, so the image
   is 460x330 and object-fit:cover crops it from the top as intended. */
.sec-lead .leader-photo{flex:0 0 auto;height:330px;min-height:0;max-height:none}

/* ---------- PTAA Foundation ------------------------------------------------
   Its own page, built from the section furniture the rest of the site already
   uses — only the pieces with no equivalent elsewhere are defined here. */
.fdn-programmes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;
}
.fdn-card{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:1.8rem 1.6rem;transition:all .3s var(--ease-smooth);
}
.fdn-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(10,31,68,.1);border-color:var(--border-gold)}
.fdn-icon{
  width:46px;height:46px;border-radius:12px;margin-bottom:1.1rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,76,.12);
}
.fdn-icon svg{width:22px;height:22px;fill:none;stroke:var(--gold-dark);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fdn-card-title{font-family:var(--fd);font-size:1.15rem;font-weight:600;color:var(--navy);margin-bottom:.6rem}
.fdn-card-text{font-size:.88rem;line-height:1.8;color:var(--text-mid)}

.fdn-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;align-items:start}
.fdn-group{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.5rem 1.4rem}
.fdn-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.fdn-group-title{font-family:var(--fd);font-size:1.02rem;font-weight:600;color:var(--navy)}
/* The count is the group's own figure, so it reads as a tally rather than a label. */
.fdn-group-count{
  font-family:var(--fm);font-size:.7rem;color:var(--gold-dark);
  background:rgba(201,168,76,.14);border-radius:99px;padding:.15rem .55rem;flex:none;
}
.fdn-group-blurb{font-size:.8rem;line-height:1.7;color:var(--muted);margin-top:.5rem}
.fdn-list{list-style:none;margin:1.1rem 0 0;padding:0}
.fdn-item{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.7rem 0;border-bottom:1px solid var(--border);
}
.fdn-item:last-child{border-bottom:none;padding-bottom:0}
.fdn-place{font-size:.87rem;font-weight:600;color:var(--navy);line-height:1.4}
.fdn-detail{font-size:.78rem;color:var(--text-mid)}
.fdn-date{font-family:var(--fm);font-size:.68rem;color:var(--gold-dark);margin-top:.15rem}

.fdn-closing{max-width:760px}
.fdn-closing p{font-size:.95rem;line-height:1.9;color:var(--text-mid);margin:1rem 0 0}
.fdn-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

@media(max-width:980px){
  .fdn-programmes,.fdn-groups{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .fdn-programmes,.fdn-groups{grid-template-columns:1fr}
  .fdn-cta .btn{width:100%;justify-content:center}
}

/* The 18% lift was not enough. In a 249x180 frame a 600x900 portrait scales to
   373px tall, so an 18% bias starts the crop 84px down the source — past the top
   of the head on Bondagjy, Cobarrubias, Tankiang-Manotok, Ty, Lontoc and Gomez.

   These are full-length studio shots in a short landscape frame: there is no
   headroom to give away, and every pixel of the bias comes off the top of someone.
   The crop starts at the top of the source instead. The portraits carry their own
   headroom above the hair, so nothing reads as cramped and nothing is cut.

   Scoped by specificity, not by accident: .pp-grid and .sec-lead each set their own
   object-position earlier in this file and both outrank a bare .leader-photo img,
   so the circles and the Secretary General keep theirs. */
.leader-photo img{object-position:50% 0}
.pm-card .leader-photo img{object-position:50% 0}

/* ---------- Foundation gallery ---------------------------------------------
   Relief photographs are candid and vary wildly in shape, so the grid fixes the
   frame and lets the crop do the work — a masonry of mismatched heights would
   read as a contact sheet rather than a record. */
.fdn-gallery{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;
}
.fdn-shot{
  position:relative;display:block;padding:0;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;background:var(--navy);cursor:pointer;
  aspect-ratio:4/3;width:100%;text-align:left;
  transition:transform .3s var(--ease-smooth),box-shadow .3s var(--ease-smooth),border-color .3s;
}
.fdn-shot:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,31,68,.18);border-color:var(--border-gold)}
.fdn-shot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.fdn-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-smooth)}
.fdn-shot:hover img{transform:scale(1.05)}
/* The caption sits on the picture, so it needs its own ground to stay readable over
   whatever is underneath it. */
.fdn-shot-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .7rem;
  background:linear-gradient(to top,rgba(10,31,68,.92),rgba(10,31,68,.55) 55%,transparent);
  display:flex;flex-direction:column;gap:.1rem;
}
.fdn-shot-text{font-size:.76rem;line-height:1.45;color:#fff;font-weight:500}
.fdn-shot-date{font-family:var(--fm);font-size:.63rem;color:var(--gold-light)}

/* ---------- the lightbox ---------------------------------------------------
   Same <dialog> the President's message uses: it centres, traps focus and closes
   on Escape without any code of ours. */
.fdn-lightbox{
  position:fixed;inset:0;margin:auto;padding:0;border:none;background:transparent;
  width:min(92vw,1200px);max-height:92vh;overflow:visible;color:var(--white);
}
.fdn-lightbox::backdrop{background:rgba(6,16,36,.88)}
.fdn-lb-figure{margin:0;display:flex;flex-direction:column;gap:.9rem;align-items:center}
.fdn-lb-figure img{
  max-width:100%;max-height:78vh;border-radius:12px;display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.55);background:var(--navy-mid);
}
.fdn-lb-cap{
  display:flex;align-items:baseline;justify-content:center;gap:.9rem;flex-wrap:wrap;
  font-size:.85rem;color:rgba(255,255,255,.85);text-align:center;
}
.fdn-lb-count{font-family:var(--fm);font-size:.7rem;color:rgba(255,255,255,.45)}

.fdn-lb-close,.fdn-lb-nav{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;border-radius:999px;
  transition:background-color .2s,border-color .2s;
}
.fdn-lb-close:hover,.fdn-lb-nav:hover{background:rgba(201,168,76,.3);border-color:var(--gold)}
.fdn-lb-close:focus-visible,.fdn-lb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fdn-lb-close{top:-16px;right:-6px;width:38px;height:38px;font-size:1.5rem;line-height:1}
.fdn-lb-nav{top:38%;width:44px;height:44px;font-size:1.7rem;line-height:1;padding-bottom:.2rem}
.fdn-lb-prev{left:-14px}
.fdn-lb-next{right:-14px}

@media(max-width:980px){
  .fdn-gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .fdn-gallery{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .fdn-shot-text{font-size:.7rem}
  /* Off the edges there is no room for the controls to sit outside the picture. */
  .fdn-lb-close{top:-14px;right:0}
  .fdn-lb-nav{width:38px;height:38px;font-size:1.4rem}
  .fdn-lb-prev{left:2px}
  .fdn-lb-next{right:2px}
}

/* ════════════════════════════════════════════
   FOUNDATION — General Profile with PTAAF logo
════════════════════════════════════════════ */
.fdn-profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:3.5rem;align-items:center}
.fdn-profile-brand{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2.4rem 2.2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(11,26,58,.06)}
.fdn-profile-brand img{display:block;width:100%;max-width:340px;height:auto}
@media(max-width:900px){
  .fdn-profile-grid{grid-template-columns:1fr;gap:2rem}
  .fdn-profile-brand{max-width:380px;padding:1.8rem}
}

/* ════════════════════════════════════════════
   ALERTS — anti-scam video band (under the hero, on red)
════════════════════════════════════════════ */
.scam-video{background:linear-gradient(135deg,#5C1212,#7A1717);padding:56px 0;border-top:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.scam-video-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:center}
.scam-video-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:1rem}
.scam-video-title{font-family:var(--fd);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;color:var(--white);line-height:1.2;margin-bottom:.9rem}
.scam-video-title em{font-style:italic;color:var(--gold)}
.scam-video-sub{font-size:.95rem;font-weight:300;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:1.4rem;max-width:46ch}
.scam-video-player{border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12)}
.scam-video-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
@media(max-width:900px){
  .scam-video{padding:44px 0}
  .scam-video-inner{grid-template-columns:1fr;gap:1.8rem}
}

/* ---------- secretariat lead card: fill the frame, align with the staff --------
   The photo box was collapsing to the image's own width (220px in a 414px card)
   because auto side-margins in a column flex container shrink the item to content
   and the img's percentage width then resolved against that. He looked small and
   letterboxed. The box now spans the card; the img is absolutely positioned so it
   fills without needing a definite height; the card stretches to both staff rows
   and a small script on the page sets the photo's height so his name sits on the
   same line as the second row of staff. His term is shown in the board section
   above, so it is dropped here to keep his body the same height as theirs. */
.sec-lead{align-self:stretch}
.sec-lead .leader-photo{flex:1 1 auto;width:100%;max-width:none;margin:0;height:auto;min-height:330px;max-height:none}
.sec-lead .leader-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.sec-lead .leader-term{display:none}
@media(max-width:1100px){
  .sec-lead{align-self:auto}
  .sec-lead .leader-photo{flex:0 0 auto;height:360px;min-height:0;width:100%;max-width:460px;margin:0 auto}
}


/* ---------- trustee profile modal -------------------------------------------
   A board card with a biography opens it from the photo or the name. The photo
   is a div acting as a button (role, tabindex and key handling are in the page);
   the name is a real button reset to look like the text it replaces. */
.leader-card.has-bio .leader-photo[data-bio]{cursor:pointer}
.leader-card.has-bio .leader-photo[data-bio]::after{
  content:'View profile';position:absolute;left:50%;bottom:.7rem;transform:translate(-50%,6px);
  background:rgba(255,255,255,.94);color:var(--navy);font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.35rem .7rem;border-radius:50px;opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;z-index:2;white-space:nowrap;
}
.leader-card.has-bio:hover .leader-photo[data-bio]::after,
.leader-card.has-bio .leader-photo[data-bio]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.leader-photo[data-bio]:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.leader-name-btn{
  all:unset;cursor:pointer;font:inherit;color:inherit;display:inline;
  text-decoration:underline transparent;text-underline-offset:3px;transition:text-decoration-color .2s,color .2s;
}
.leader-name-btn:hover,.leader-name-btn:focus-visible{color:var(--gold-dark);text-decoration-color:var(--gold)}
.leader-name-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.bio-dialog-head{align-items:center;gap:1rem}
.bio-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex-shrink:0;border:2px solid var(--gold-pale);background:var(--off-white)}
/* The President's message styles its greeting and sign-off lines; a biography is plain prose. */
.bio-dialog-body p,.bio-dialog-body p:first-child,.bio-dialog-body p:last-child{
  font-size:.95rem;font-weight:400;color:var(--text-mid);font-style:normal;text-align:left;line-height:1.9;margin:0 0 1.1rem
}
.bio-dialog-body p:last-child{margin-bottom:0}
@media(max-width:560px){.bio-avatar{width:56px;height:56px}}

/* Top-bar links may carry a small icon (the Portal sign-in link does). */
.topbar-link{display:inline-flex;align-items:center;gap:.4rem}
.topbar-link svg{width:12px;height:12px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}


/* 2026-09-16 — Member Portal must stay reachable on phones. Below 1024px the topbar
   (which carries the "Portal" link) is hidden and the header's Member Portal button
   used to be hidden too, so mobile visitors had no way in. Keep the button, compact
   it on narrow screens ("Portal" only), and the hamburger menu now lists it as well. */
@media(max-width:1024px){
  .nav-cta-group .btn-outline-navy.nav-portal{display:inline-flex}
}
@media(max-width:480px){
  .nav-cta-group .nav-portal{padding:.5rem .7rem}
  .nav-cta-group .nav-portal-long{display:none}
  .nav-cta-group .btn-gold.btn-sm{padding:.5rem .7rem}
}

/* 2026-09-17 — narrow phones (Galaxy Z Flip / Fold cover screens, ~320-360px): the brand
   link was allowed to shrink, which squeezed the logo; and "Verify Member" is too long for
   the row. The logo now keeps its natural width and the button reads "Verify" under 400px. */
.nav-brand{flex-shrink:0}
.brand-logo{flex-shrink:0;max-width:none}
@media(max-width:400px){
  .nav-cta-group .nav-verify-long{display:none}
  .nav-cta-group{gap:.4rem}
  .nav-cta-group .btn-sm{padding:.5rem .65rem;font-size:.74rem}
  .nav-inner{gap:.6rem}
}
@media(max-width:340px){
  .brand-logo{height:28px}
  .nav-cta-group .btn-sm{padding:.45rem .55rem;font-size:.7rem}
}
/* 2026-09-17 — home hero overflowed the viewport on ~320px screens: the single grid column
   was `1fr` (= minmax(auto,1fr)), so it grew to the trust rows min-content width instead
/* 2026-09-17 — home hero overflowed the viewport on ~320px screens: the single grid column
   was `1fr` (= minmax(auto,1fr)), so it grew to the trust row's min-content width instead
   of wrapping. Let the column shrink and the trust row wrap. */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-trust-row{flex-wrap:wrap;gap:1rem 1.5rem}
}
/* 2026-09-17 — membership category cards: minmax(280px,1fr) plus 2rem padding overflowed
   screens under ~348px. Below 400px the grid is one full-width column with tighter padding. */
@media(max-width:400px){
  .categories-grid{grid-template-columns:minmax(0,1fr)}
  .category-card{padding:1.4rem;min-width:0}
}
/* 2026-09-17 — home at ≤360px: event cards used minmax(320px,1fr) and the join CTA
   sat right-aligned with an oversized button; both poked past the viewport. */
@media(max-width:400px){
  .events-grid{grid-template-columns:minmax(0,1fr)}
  .join-actions{align-items:stretch}
  .join-actions .btn{width:100%;justify-content:center}
  .btn-xl{padding:.95rem 1.4rem;font-size:.9rem}
}

/* 2026-09-17 — directory: an active search shows an × inside the box and a results bar
   with "Clear search"; both link to the plain directory (clean slate, filters included). */
.dir-search-wrap{position:relative;flex:1;display:flex;min-width:0}
.dir-search-wrap .dir-search-input{width:100%;padding-right:2.8rem}
.dir-search-clear{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;line-height:1;color:var(--muted);background:var(--off-white);text-decoration:none;
  transition:all .2s;
}
.dir-search-clear:hover{background:var(--navy);color:var(--white)}
.dir-results-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:-.5rem 0 1.5rem;padding:.75rem 1rem;background:var(--white);border:1px solid var(--border);border-radius:8px;
  font-size:.88rem;color:var(--text-mid);
}
.dir-results-bar strong{color:var(--navy)}
.dir-results-clear{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;padding:.35rem .7rem;border-radius:6px;border:1.5px solid var(--navy);transition:all .2s;
}
.dir-results-clear:hover{background:var(--navy);color:var(--white)}
.dir-results-clear span{font-size:1.1rem;line-height:1}

/* 2026-09-17 — directory filters: "Clear filters" shortcut on the right when any of
   region/province/category is set. Keeps the search query; the × in the box clears that. */
.dir-filters-clear{
  margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;padding:.4rem .7rem;border-radius:6px;border:1.5px solid var(--navy);transition:all .2s;
}
.dir-filters-clear:hover{background:var(--navy);color:var(--white)}
.dir-filters-clear span{font-size:1.1rem;line-height:1}
@media(max-width:600px){.dir-filters-clear{margin-left:0;width:100%;justify-content:center}}

/* ═══ 2026-09-17 — EVENT TICKETING: registration form, ticket page, badges ═══ */
.ev-reg-form{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.ev-reg-member{background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;margin-top:.6rem}
.ev-reg-member-agency{font-weight:600;font-size:.88rem;color:var(--navy)}
.ev-reg-member-no{font-family:var(--fm);font-size:.72rem;color:var(--muted)}
.ev-reg-errors{background:#FEE2E2;color:#B91C1C;border-radius:8px;padding:.6rem .8rem;font-size:.82rem;margin-top:.6rem;display:flex;flex-direction:column;gap:.2rem}
.ev-reg-label{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.3rem 0 -.3rem}
.ev-reg-label small{font-weight:400;text-transform:none;letter-spacing:0}
.ev-reg-kind{display:flex;flex-direction:column;gap:.35rem;background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem}
.ev-reg-kind label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text);cursor:pointer}
.ev-reg-kind input{accent-color:var(--navy);width:1rem;height:1rem}
.ev-reg-kind small{color:var(--muted)}
.ev-reg-roster{border:1px dashed var(--border);border-radius:8px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.5rem}
.ev-roster-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.4rem;align-items:center}
.ev-roster-row .cf-input{padding:.55rem .7rem;font-size:.82rem}
.ev-roster-remove{border:0;background:var(--off-white);color:var(--muted);width:1.9rem;height:1.9rem;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer}
.ev-roster-remove:hover{background:var(--danger);color:#fff}
.ev-reg-hint{font-size:.72rem;color:var(--muted)}
.ev-reg-check{display:flex;gap:.55rem;align-items:flex-start;font-size:.78rem;color:var(--text-mid);line-height:1.5}
.ev-reg-check input{margin-top:.2rem;accent-color:var(--navy);flex-shrink:0}
.ev-reg-lost{display:inline-block;margin-top:.9rem;font-size:.78rem;color:var(--navy)}
@media(max-width:600px){.ev-roster-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.ev-roster-row .ev-roster-remove{justify-self:end}}

.tk-flash{border-radius:10px;padding:.85rem 1.1rem;font-size:.9rem;margin-bottom:1.2rem}
.tk-flash-ok{background:#F0FDF4;border:1px solid #BBF7D0;color:#15803D}
.tk-flash-warn{background:#FFFBEB;border:1px solid #FDE68A;color:#B45309}
.tk-flash-err{background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C}
.tk-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:1.6rem;align-items:start}
@media(max-width:860px){.tk-layout{grid-template-columns:1fr}}
.tk-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:1.4rem;border-top:6px solid var(--navy);box-shadow:0 8px 30px rgba(10,31,68,.06)}
.tk-card.tk-success{border-top-color:var(--success)}.tk-card.tk-warning{border-top-color:var(--warning)}.tk-card.tk-danger{border-top-color:var(--danger)}.tk-card.tk-info{border-top-color:var(--info)}
.tk-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.tk-eyebrow{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tk-name{font-family:var(--fd);font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1.2;margin-top:.2rem}
.tk-sub{font-size:.86rem;color:var(--text-mid);margin-top:.15rem}
.tk-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:4px;white-space:nowrap;background:var(--off-white);color:var(--text-mid)}
.tk-badge-success{background:#DCFCE7;color:#15803D}.tk-badge-warning{background:#FEF3C7;color:#B45309}.tk-badge-danger{background:#FEE2E2;color:#B91C1C}.tk-badge-info{background:#DBEAFE;color:#1D4ED8}.tk-badge-primary{background:var(--gold-pale);color:var(--gold-dark)}
.tk-qr-wrap{text-align:center;margin:1.4rem 0 .4rem}
.tk-qr{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px}
.tk-qr svg{display:block;width:min(260px,70vw);height:auto}
.tk-qr-cap{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.tk-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}
.tk-roster{margin-top:1.4rem;border-top:1px solid var(--border);padding-top:.9rem}
.tk-roster-title{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.tk-roster-row{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.tk-roster-row.is-in{color:var(--muted)}
.tk-roster-row input{accent-color:var(--navy);width:1.05rem;height:1.05rem}
.tk-roster-name small{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-left:.3rem}
.tk-roster-state{margin-left:auto;font-size:.74rem;color:var(--muted);white-space:nowrap}
.tk-roster-row.is-in .tk-roster-state{color:#15803D;font-weight:600}
.tk-staff-actions{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.tk-side{display:flex;flex-direction:column;gap:1rem}
.tk-collect{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}