/* ============================================================
   TNPMDA — The Tamilnadu Pen Manufacturers and Dealers Association
   Palette sampled directly from the association seal:
     seal red  #D12816   ·   seal navy #221A67
   Display: Marcellus · Body/UI: Archivo
   ============================================================ */

/* Tri-colour system, straight off the seal:
     PRIMARY  red   #D12816  — topbar, buttons, active states, marks
     SECONDARY blue #15104A  — footer, dark bands, headings, ink
     TERTIARY white #FFFFFF  — cards, nav, page ground                */
:root{
  --ink:        #15104A;   /* secondary — deep seal navy: footer, dark bands */
  --ink-2:      #201A62;   /* raised panel navy */
  --ink-3:      #332B80;   /* borders / hover on dark */
  --blue:       #3B34A0;   /* ink blue — links on light */
  --accent:     #D12816;   /* primary — seal red (client-supplied exact value) */
  --accent-dk:  #B01E0F;   /* pressed red — same hue, darker */
  --accent-lt:  #E4452E;   /* lifted red — top of the topbar wash */
  --accent-2:   #F2705C;   /* light red — accents on navy only */
  --on-red:     #FFDCD5;   /* muted text on a red ground */
  --paper:      #F6F7FB;   /* tertiary — cool near-white page ground */
  --card:       #FFFFFF;   /* tertiary — pure white surfaces */
  --text:       #23252F;
  --muted:      #5C5F70;
  --line:       #E4E6F0;
  --ok:         #2E7D4F;
  --err:        #B3402E;

  --ff-display: "Marcellus", Georgia, serif;
  --ff-body:    "Archivo", "Segoe UI", system-ui, sans-serif;

  --wrap: 1180px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 10px 30px rgba(21,16,74,.09);
  --shadow-sm: 0 4px 14px rgba(21,16,74,.07);
  --ease: cubic-bezier(.4,0,.2,1);
  --nav-h: 60px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
/* The hidden attribute has to beat whatever display a component sets, or it
   does nothing: .notice is display:flex, .filepick__filled is display:flex,
   and an author rule outranks the browser's own [hidden] styling. Anything
   toggled with .hidden = true depends on this line. */
[hidden]{ display:none !important; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:400; line-height:1.2; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:3px; }

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

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.skip-link{
  position:absolute; left:16px; top:-56px; z-index:400;
  background:var(--accent); color:#fff; font-weight:600;
  padding:10px 18px; border-radius:0 0 8px 8px; transition:top .2s;
}
.skip-link:focus{ top:0; }

/* icons drawn inline as SVG — sized by their box */
.i{ width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   1 · Topbar — the association lockup
   ============================================================ */
.topbar{
  background:linear-gradient(165deg, var(--accent-lt) 0%, var(--accent) 58%, var(--accent-dk) 100%);
  color:#fff;
  border-bottom:3px solid var(--ink);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; padding:5px 0;
}
.brand-full{ display:flex; align-items:center; gap:24px; min-width:0; }
.brand-full:hover{ text-decoration:none; }
.brand-full img{
  width:clamp(120px, 11vw, 152px); height:clamp(120px, 11vw, 152px); flex:none;
  border-radius:50%; background:#fff; padding:6px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}
.brand-full__txt{ min-width:0; }
.brand-full__name{
  display:block; font-family:var(--ff-display);
  font-size:clamp(1.15rem, 2.5vw, 1.85rem); line-height:1.15;
  color:#fff; letter-spacing:.03em; text-transform:uppercase;
}
.brand-full__name b{ font-weight:400; color:var(--on-red); }
.brand-full__sub{
  display:block; margin-top:8px;
  font-size:.76rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-red);
}
.topbar__actions{ display:flex; align-items:center; gap:14px; flex:none; }
.topbar__call{
  display:flex; align-items:center; gap:12px; color:#fff; font-size:.95rem;
  padding:10px 16px 10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.10);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.topbar__call:hover{ text-decoration:none; color:#fff; background:rgba(255,255,255,.2); border-color:#fff; }
.topbar__call .i{ width:34px; height:34px; padding:8px; border-radius:50%;
  background:rgba(255,255,255,.16); stroke-width:1.8; }
.topbar__call b{ display:block; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-red); }

/* Member Login / Edit Profile — same shape as the call button but filled, so
   it reads as the one thing on the topbar you are meant to press. */
.topbar__member{
  display:flex; align-items:center; gap:12px; font-size:.95rem;
  padding:10px 18px 10px 12px; border-radius:999px;
  background:#fff; color:var(--accent); border:1px solid #fff;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.topbar__member:hover{ text-decoration:none; background:var(--on-red); color:var(--accent-dk); }
.topbar__member .i{ width:34px; height:34px; padding:8px; border-radius:50%;
  background:rgba(209,40,22,.10); stroke-width:1.8; }
.topbar__member b{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-dk); opacity:.75; }

/* ============================================================
   2 · Main navigation — sticky
   ============================================================ */
.mainnav{
  position:sticky; top:0; z-index:120;
  background:var(--card);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.mainnav.is-stuck{ box-shadow:0 6px 24px rgba(21,16,74,.10); }
/* Three tracks — mini brand · nav · CTA. The equal 1fr side tracks keep the
   nav dead-centre whether or not the mini brand has appeared, so nothing
   slides sideways when the bar sticks to the top. */
.mainnav__inner{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:14px; min-height:var(--nav-h);
}
/* mini brand appears only once the nav is stuck */
.brand-mini{
  display:flex; align-items:center; gap:10px; flex:none; justify-self:start;
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .35s var(--ease), opacity .25s var(--ease);
}
.brand-mini:hover{ text-decoration:none; }
.mainnav.is-stuck .brand-mini{ max-width:240px; opacity:1; margin-right:8px; }
.brand-mini img{ width:46px; height:46px; border-radius:50%; flex:none; background:#fff; }
.brand-mini span{ font-family:var(--ff-display); font-size:1.2rem; letter-spacing:.1em; color:var(--ink); white-space:nowrap; }

.nav{ display:flex; align-items:center; justify-content:center; gap:2px; }
.nav__link{
  position:relative; display:block; padding:19px 15px;
  color:var(--text); font-size:.94rem; font-weight:500;
}
.nav__link:hover{ color:var(--accent); text-decoration:none; }
.nav__link::after{
  content:""; position:absolute; left:15px; right:15px; bottom:12px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--accent); font-weight:600; }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

/* desktop dropdown */
.nav__group{ position:relative; }
.nav__group > .nav__link{ display:flex; align-items:center; gap:6px; }
.nav__group > .nav__link .i{ width:14px; height:14px; transition:transform .25s var(--ease); }
.nav__group:hover > .nav__link .i{ transform:rotate(180deg); }
.nav__sub{
  position:absolute; top:100%; left:6px; min-width:236px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__sub a{
  display:block; padding:11px 14px; border-radius:8px;
  color:var(--text); font-size:.92rem; font-weight:500;
}
.nav__sub a:hover{ background:var(--paper); color:var(--accent); text-decoration:none; }

.nav__cta{ justify-self:end; flex:none; }
.burger{
  display:none; justify-self:end;
  width:46px; height:46px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); cursor:pointer;
  padding:0; position:relative;
}
.burger span{
  position:absolute; left:13px; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   3 · Mobile drawer
   ============================================================ */
.drawer{
  position:fixed; inset:0; z-index:300;
  visibility:hidden; pointer-events:none;
}
.drawer__overlay{
  position:absolute; inset:0; background:rgba(10,7,40,.6);
  opacity:0; transition:opacity .35s var(--ease); backdrop-filter:blur(3px);
}
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(330px, 86vw);
  background:var(--card); padding:20px 22px 40px;
  overflow-y:auto; transform:translateX(100%);
  transition:transform .38s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.is-open{ visibility:visible; pointer-events:auto; }
.drawer.is-open .drawer__overlay{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.drawer__head img{ width:62px; height:62px; border-radius:50%; background:#fff; }
.drawer__close{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;
}
.drawer__nav a{
  display:block; padding:15px 4px; font-size:1.02rem; font-weight:500;
  color:var(--text); border-bottom:1px solid var(--line);
  transition:padding-left .25s var(--ease), color .2s;
}
.drawer__nav a:hover, .drawer__nav a[aria-current="page"]{ color:var(--accent); padding-left:10px; text-decoration:none; }
.drawer__group > button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 4px; font-size:1.02rem; font-weight:500; color:var(--text);
  background:none; border:none; border-bottom:1px solid var(--line);
  cursor:pointer; text-align:left;
}
.drawer__group > button .i{ width:16px; height:16px; transition:transform .3s var(--ease); }
.drawer__group.open > button{ color:var(--accent); }
.drawer__group.open > button .i{ transform:rotate(180deg); }
.drawer__sub{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.drawer__group.open .drawer__sub{ max-height:240px; }
.drawer__sub a{ padding-left:20px; font-size:.94rem; color:var(--muted); }
.drawer__cta{ margin-top:26px; display:grid; gap:12px; }
.drawer__meta{
  margin-top:auto; padding-top:26px; font-size:.86rem; color:var(--muted);
}
.drawer__meta a{ color:var(--muted); }

/* ============================================================
   4 · Mobile bottom tab bar
   ============================================================ */
.tabbar{ display:none; }

/* ============================================================
   5 · Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; min-height:46px;
  font-weight:600; font-size:.94rem; letter-spacing:.01em;
  border-radius:9px; border:1px solid transparent;
  cursor:pointer; text-align:center;
  transition:background .2s var(--ease), color .2s, border-color .2s, transform .16s var(--ease), box-shadow .2s;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:10px 18px; min-height:40px; font-size:.87rem; }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(209,40,22,.28); }
.btn-accent:hover{ background:var(--accent-dk); color:#fff; box-shadow:0 6px 20px rgba(209,40,22,.36); }
.btn-outline-light{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-2); color:#fff; }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   6 · Signature: the ink stroke
   ============================================================ */
.ink-stroke{ display:block; width:110px; height:14px; margin:6px 0 0; overflow:visible; }
.ink-stroke path{
  fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:140; stroke-dashoffset:140;
}
.in-view .ink-stroke path{ transition:stroke-dashoffset .9s ease .15s; stroke-dashoffset:0; }
.on-dark .ink-stroke path{ stroke:var(--accent-2); }
.center .ink-stroke{ margin-left:auto; margin-right:auto; }

/* ============================================================
   7 · Motion utilities
   ============================================================ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; } .reveal-d3{ transition-delay:.24s; }

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:350;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .1s linear;
}
.to-top{
  position:fixed; right:20px; bottom:24px; z-index:200;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  box-shadow:0 8px 24px rgba(209,40,22,.34);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s, background .2s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--ink); }
.to-top .i{ width:20px; height:20px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .ink-stroke path{ stroke-dashoffset:0; transition:none; }
  .flash__track, .adstrip__track{ animation:none !important; }
  .adstrip__item--open::after{ animation:none; opacity:0; }
  .slide, .drawer__panel, .brand-mini{ transition:none !important; }
  .slide.is-active img{ animation:none !important; }
}

/* ============================================================
   8 · Hero — slider + flash news
   ============================================================ */
.hero{ padding:26px 0; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 322px; gap:20px; align-items:stretch;
}

.slider{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--ink);
  touch-action:pan-y;
}
/* width must stay definite — with only `aspect-ratio` + `max-height`, a clamped
   height makes the box derive its width back from the ratio, which left the
   slider's navy ground showing down the right edge. */
.slides{ position:relative; width:100%; aspect-ratio:16/10; }
.slide{
  position:absolute; inset:0; overflow:hidden;
  opacity:0; visibility:hidden;
  transition:opacity .75s var(--ease), visibility .75s;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.slide.is-active img{ animation:kenburns 7.5s ease forwards; }
@keyframes kenburns{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

.slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; cursor:pointer; padding:0;
  display:grid; place-items:center;
  background:rgba(21,16,74,.35); border:1px solid rgba(255,255,255,.25); color:#fff;
  opacity:.6; transition:opacity .25s, background .25s;
}
.slider:hover .slider__arrow{ opacity:1; }
.slider__arrow:hover{ background:var(--accent); border-color:transparent; }
.slider__arrow.prev{ left:14px; } .slider__arrow.next{ right:14px; }
.slider__arrow .i{ width:20px; height:20px; }
.slider__dots{
  position:absolute; bottom:14px; left:0; right:0; z-index:5;
  display:flex; gap:8px; justify-content:center;
}
.slider__dots button{
  width:9px; height:9px; padding:0; border-radius:6px; cursor:pointer;
  border:none; background:rgba(255,255,255,.55);
  transition:width .3s var(--ease), background .3s;
}
.slider__dots button.is-active{ width:26px; background:var(--accent-2); }

/* Flash news */
.flash{
  display:flex; flex-direction:column; min-height:0;
  background:var(--ink); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow);
}
.flash__head{
  display:flex; align-items:center; gap:10px; padding:15px 18px;
  background:var(--accent); color:#fff;
  font-weight:700; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
}
.flash__head .i{ width:18px; height:18px; animation:ring 2s ease-in-out infinite; }
@keyframes ring{ 0%,100%{ transform:rotate(0) scale(1);} 12%{ transform:rotate(-12deg) scale(1.12);} 24%{ transform:rotate(10deg) scale(1.12);} 36%{ transform:rotate(0) scale(1);} }
.flash__body{ position:relative; flex:1; min-height:0; overflow:hidden; }
.flash__body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52px; pointer-events:none;
  background:linear-gradient(transparent, var(--ink));
}
.flash__track{
  position:absolute; top:0; left:0; width:100%;
  display:flex; flex-direction:column;
  /* Two animations, run one after the other.

     flashIn is the lead-in: the column starts below the panel and rises into
     it, so the news enters from the bottom the way the old <marquee
     direction="up"> did, instead of being sat there already at the top when
     the page loads. flashUp is the endless loop over the doubled track.

     --flash-start (how far below the panel to begin) and --flash-intro (how
     long that takes at the loop's own speed) are measured by main.js, which
     is the only thing that knows the panel's height. Both default to 0, so
     with the script absent the loop simply starts where it always did rather
     than the column hanging somewhere off-screen.

     Loop speed is set per page from the admin panel's Flash News setting;
     26s is what it scrolled at before that setting existed.

     Written as longhands on purpose: the shorthand would need two <time>
     values on one line (duration then delay) and it is too easy to read the
     second as the first. */
  animation-name:            flashIn, flashUp;
  animation-duration:        var(--flash-intro, 0s), var(--flash-duration, 26s);
  animation-delay:           0s, var(--flash-intro, 0s);   /* the loop waits out the lead-in */
  animation-timing-function: linear;
  animation-iteration-count: 1, infinite;
  animation-fill-mode:       forwards, none;               /* hold translateY(0) at the join */
}
@keyframes flashIn{ from{ transform:translateY(var(--flash-start, 0px));} to{ transform:translateY(0);} }
@keyframes flashUp{ from{ transform:translateY(0);} to{ transform:translateY(-50%);} }
/* Note: no hover pause. The scroll runs whatever the pointer is doing —
   stopping it under the cursor is what the old marquee's onMouseOver did and
   it is not wanted. Keyboard focus is the exception below: a member tabbing
   to a link inside the panel cannot follow one that is moving away. */
.flash:focus-within .flash__track{ animation-play-state:paused; }
.flash__item{
  padding:16px 18px; border-bottom:1px dashed var(--ink-3);
  color:#D6D2EE; font-size:.92rem; line-height:1.6;
}
.flash__item b{
  display:block; margin-bottom:5px; color:var(--accent-2);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.flash__item a{ color:#fff; text-decoration:underline; }

/* ============================================================
   9 · Advertiser banner strip
   ============================================================ */
/* Slim white band: two 420x95 banners in view at a time, sliding. */
.adstrip{ background:#fff; padding:12px 0; border-bottom:1px solid var(--line); }
.adstrip__viewport{ overflow:hidden; }
.adstrip__track{
  display:flex; gap:16px; width:max-content;
  animation:adScroll 86s linear infinite;   /* JS retimes this to a fixed px/s */
  will-change:transform;
}
.adstrip:hover .adstrip__track{ animation-play-state:paused; }
@keyframes adScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.adstrip__item{
  flex:none; width:min(558px, calc((100vw - 64px) / 2));
  border-radius:8px; overflow:hidden; background:#fff;
  transition:transform .22s var(--ease), box-shadow .22s;
}
/* phones: exactly one banner in view — item width == the .wrap inner width */
@media (max-width: 760px){
  .adstrip__track{ gap:10px; }
  .adstrip__item{ width:calc(100vw - 48px); }
}
@media (max-width: 520px){
  .adstrip__item{ width:calc(100vw - 36px); }   /* .wrap padding drops to 18px */
}
.adstrip__item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); text-decoration:none; }
.adstrip__item img{ width:100%; aspect-ratio:420/95; object-fit:contain; }
/* open slot — same footprint as a banner, waiting to be sold */
.adstrip__item--open{
  background:linear-gradient(118deg, var(--accent) 0%, #B01E10 44%, var(--ink) 100%);
  border:none; position:relative; overflow:hidden;
}
.adstrip__item--open::after{           /* soft sheen sweeping across the card */
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform:translateX(-100%); animation:adSheen 4.5s ease-in-out infinite;
}
.adstrip__item--open:hover{ box-shadow:var(--shadow); }
@keyframes adSheen{ 0%,72%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
.adstrip__slot{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  aspect-ratio:420/95; padding:0 18px; text-align:center;
}
.adstrip__slot b{
  font-family:var(--ff-display); font-weight:400; color:#fff;
  font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1.15;
}
.adstrip__slot em{
  font-style:normal; font-size:clamp(.86rem, 1.1vw, .98rem); font-weight:500;
  color:#FFD9D2; letter-spacing:.02em;
}

/* Video gallery */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.video-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.video-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#D8D3CC; }
.video-card video{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000;
}
@media (max-width: 900px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .video-grid{ grid-template-columns:1fr; } }

/* Advertiser cards — the full roster, plus an open slot */
.ad-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ad-card{
  display:flex; /*flex-direction:column;*/ gap:12px; padding:16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s; justify-content:center;
}
.ad-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); text-decoration:none; }
.ad-card img{ width:80%; aspect-ratio:420/95; object-fit:contain; border-radius:6px; background:var(--paper); }
.ad-card__name{ font-size:.86rem; font-weight:600; color:var(--ink); text-align:center; }
/* open slot — the square "advertise here" placeholder artwork */
.ad-card--slot{ padding:12px; }
.ad-card--slot img{ aspect-ratio:1/1; background:#fff; }
.ad-grid__cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 26px; text-align:center; margin-top:30px;
}
.ad-grid__cta p{ margin:0; color:var(--muted); max-width:44em; }
.ad-card--open{
  align-items:center; justify-content:center; text-align:center; gap:10px;
  border:1px dashed #C3C7DA; background:var(--paper); box-shadow:none;
}
.ad-card--open:hover{ border-color:var(--accent); }
.ad-card--open .ad-card__slot{ font-family:var(--ff-display); font-size:1.15rem; color:var(--ink); }
.ad-card--open p{ font-size:.88rem; color:var(--muted); margin:0; }

/* ============================================================
   10 · Intro band — headline + stats
   ============================================================ */
.intro-band{ position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:74px 0; }
.intro-band__inner{ position:relative; z-index:2; text-align:center; }
.intro-band .eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2);
}
.intro-band .eyebrow::before,
.intro-band .eyebrow::after{ content:""; width:30px; height:1px; background:var(--accent-2); }
.intro-band h1{
  color:#fff; font-size:clamp(2rem, 4.4vw, 3.3rem);
  max-width:19ch; margin:0 auto 20px;
}
.intro-band h1 em{ font-style:normal; color:var(--accent-2); }
.intro-band__lede{ color:#BDB8E0; font-size:1.06rem; max-width:60ch; margin:0 auto 34px; }
.intro-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:56px; }
.intro-stats{
  display:grid; grid-template-columns:repeat(3, auto); justify-content:center;
  gap:clamp(28px, 6vw, 84px);
  border-top:1px solid var(--ink-3); padding-top:34px;
}
.stat__num{
  font-family:var(--ff-display); font-size:clamp(2rem, 4.4vw, 3rem);
  color:#fff; line-height:1;
}
.stat__num .suffix{ color:var(--accent-2); }
.stat__label{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:#918BC4; margin-top:9px;
}

/* who can join — four eligibility cards on the dark intro band */
.whogrid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin:0 auto 44px; max-width:1040px; text-align:left;
}
.whocard{
  display:block; padding:24px 22px 22px;
  border:1px solid var(--ink-3); border-radius:14px;
  background:rgba(255,255,255,.045); color:#fff;
  transition:background .22s, border-color .22s, transform .22s;
}
.whocard .i{ width:26px; height:26px; color:var(--accent-2); transition:color .22s, transform .22s; }
.whocard h3{ font-size:1.02rem; color:#fff; margin:14px 0 8px; }
.whocard p{ font-size:.9rem; color:#BDB8E0; margin:0; }
.whocard:hover{
  background:rgba(255,255,255,.1); border-color:var(--accent); transform:translateY(-4px);
}
.whocard:hover .i{ transform:scale(1.08); }
.whocard:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .whocard:hover{ transform:none; }
  .whocard:hover .i{ transform:none; }
}
@media (max-width: 980px){ .whogrid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px){ .whogrid{ grid-template-columns:1fr; gap:12px; } .whocard{ padding:20px; } }

/* who can join — plain list variant, used inside cards (registration sidebar) */
.who--light .who__title{ color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:0 0 12px; }
.who--light .who__lede{ color:var(--muted); font-size:.94rem; margin:0 0 14px; }
.who--light .who__list{ list-style:none; margin:0; padding:0; }
.who--light .who__list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; color:var(--ink); font-size:.94rem;
}
.who--light .who__list li + li{ border-top:1px solid var(--line); }
.who--light .who__list li::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-top:.55em;
}

/* watermark nib */
.nib-mark{
  position:absolute; z-index:1; right:-70px; bottom:-110px;
  width:420px; height:auto; opacity:.07; pointer-events:none;
  transform:rotate(-18deg);
}
.nib-mark path, .nib-mark circle{ fill:none; stroke:#fff; stroke-width:3; }

/* ============================================================
   11 · Sections
   ============================================================ */
.section{ padding:84px 0; }
.section.alt{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* navy band variant — the heads inside need .on-dark for the ink stroke */
.section.ink{ background:var(--ink); color:#fff; border-top:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); }
.section.ink .section-head .kicker{ color:var(--accent-2); }
.section.ink .section-head h2{ color:#fff; }
.section.ink .section-head p{ color:#BDB8E0; }
.section.ink .ad-grid__cta p{ color:#BDB8E0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .kicker{
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:10px;
}
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.35rem); margin-bottom:0; }
.section-head p{ color:var(--muted); margin:16px 0 0; }

.page-head{ background:var(--ink); color:#fff; padding:58px 0 52px; position:relative; overflow:hidden; }
.page-head .wrap{ position:relative; z-index:2; }
.page-head .kicker{
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2); display:block; margin-bottom:10px;
}
.page-head h1{ color:#fff; font-size:clamp(2rem, 3.6vw, 2.9rem); margin:0; }
.page-head p{ color:#BDB8E0; max-width:44em; margin:14px 0 0; }
.page-head .nib-mark{ width:300px; right:-50px; bottom:-80px; }

/* breadcrumb */
.crumb{ display:flex; gap:9px; align-items:center; font-size:.84rem; color:#918BC4; margin-bottom:14px; }
.crumb a{ color:#BDB8E0; }
.crumb span{ opacity:.6; }

/* ============================================================
   12 · Cards & grids
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow-sm);
}
.card--link{ transition:transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.card--link:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#D8D3CC; }

.benefit{ position:relative; padding-top:34px; }
.benefit::before{
  content:""; position:absolute; top:0; left:30px; width:44px; height:3px;
  background:var(--accent); border-radius:2px;
  transition:width .3s var(--ease);
}
.benefit:hover::before{ width:76px; }
.benefit h3{ font-size:1.18rem; margin-bottom:10px; }
.benefit p{ color:var(--muted); font-size:.95rem; margin:0; }

.message-card{ display:flex; flex-direction:column; }
.message-card .msg-head{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.message-card .msg-head img{
  width:86px; height:104px; object-fit:cover; border-radius:8px; border:1px solid var(--line);
}
.message-card .msg-head h3{ margin:0 0 4px; font-size:1.25rem; }
.message-card .msg-head span{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.message-card blockquote{ margin:0; color:var(--muted); font-size:.97rem; }
.message-card blockquote p:last-child{ margin-bottom:0; }

.person{ text-align:center; padding:26px 18px 22px; }
.person img{
  width:128px; height:128px; object-fit:cover; object-position:top;
  border-radius:50%; margin:0 auto 16px;
  border:3px solid var(--paper); outline:1px solid var(--line); background:#E9E7F0;
  transition:outline-color .25s, transform .25s var(--ease);
}
.person:hover img{ outline-color:var(--accent); transform:scale(1.04); }
.person h3{ font-size:1.02rem; letter-spacing:.02em; margin-bottom:4px; }
.person .role{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px;
}
.person .phone{ font-size:.88rem; color:var(--muted); margin:0; }
.person .phone a{ color:var(--muted); }
.person .phone a:hover{ color:var(--accent); }

.group-label{ display:flex; align-items:center; gap:18px; margin:54px 0 26px; }
.group-label h2{ font-size:1.35rem; margin:0; white-space:nowrap; }
.group-label::after{ content:""; height:1px; background:var(--line); flex:1; }
.group-label:first-of-type{ margin-top:0; }

/* gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-grid a{
  display:block; border-radius:var(--radius); overflow:hidden; position:relative;
  border:1px solid var(--line);
}
.gallery-grid img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .45s var(--ease); }
.gallery-grid a:hover img{ transform:scale(1.05); }
.gallery-grid figcaption{
  position:absolute; inset:auto 0 0 0; padding:28px 16px 13px;
  background:linear-gradient(transparent, rgba(21,16,74,.88));
  color:#fff; font-size:.85rem;
}
.gallery-grid a::after{
  content:"⌕"; position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:1.3rem;
  opacity:0; transform:scale(.8); transition:opacity .25s, transform .25s var(--ease);
}
.gallery-grid a:hover::after{ opacity:1; transform:scale(1); }

.lightbox{
  position:fixed; inset:0; z-index:400; display:none;
  background:rgba(9,6,32,.94); padding:5vh 5vw;
  align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:90vh; border-radius:8px; }
.lightbox-close{
  position:absolute; top:18px; right:22px;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); color:#fff; font-size:1.6rem; cursor:pointer; line-height:1;
}

/* ============================================================
   13 · Members directory
   ============================================================ */
.directory-tools{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:22px; }
.search-box{ position:relative; flex:1; min-width:250px; }
.search-box input{
  width:100%; padding:14px 18px 14px 48px; font:inherit;
  border:1px solid var(--line); border-radius:10px; background:var(--card);
  transition:border-color .2s, box-shadow .2s;
}
.search-box input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(209,40,22,.13); }
.search-box::before{
  content:"⌕"; position:absolute; left:17px; top:50%; transform:translateY(-52%);
  font-size:1.35rem; color:var(--muted); pointer-events:none;
}
.search-box input[type="search"]::-webkit-search-cancel-button{ display:none; }
.search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:50%; background:var(--paper);
  color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer;
}
.search-clear:hover{ color:var(--accent); }
.pick-box{ flex:1 1 170px; min-width:150px; max-width:230px; }
.pick-box select{
  width:100%; padding:14px 16px; font:inherit; min-height:52px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text);
}
.pick-box select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(209,40,22,.13); }
.pick-box select:disabled{ opacity:.5; }

/* Not sticky: search, two dropdowns and a wrapped alphabet come to roughly
   250px, which on a 667px phone left almost nothing for the results it was
   meant to be filtering. It scrolls away with the rest of the page. */
.directory-bar{ padding:0 0 10px; margin-bottom:6px; }
.directory-status{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 18px;
}
.directory-status .form-note{ margin:0; }
.link-clear{
  background:none; border:0; padding:0; font:inherit; font-size:.85rem; font-weight:600;
  color:var(--accent); text-decoration:underline; cursor:pointer;
}

/* Every letter on screen at once — a scrolling strip hid half the alphabet
   behind a gesture nobody thinks to make.

   A grid with a fixed column count, not wrapped flex and not auto-fit: both
   pack as many as will fit per line, which gave seventeen keys on the first
   row and nine on the second at every width. The counts below all divide the
   27 keys (All + A–Z) into even rows — 27, then 14+13, then 9+9+9. */
.alpha-filter{
  display:grid;
  grid-template-columns:repeat(27, minmax(0, 1fr));   /* one row */
  gap:6px;
}
@media (max-width:900px){
  .alpha-filter{ grid-template-columns:repeat(14, minmax(0, 1fr)); }   /* two rows */
}
@media (max-width:700px){
  /* Three complete rows of nine — no ragged last row, every key the same size */
  .alpha-filter{ grid-template-columns:repeat(9, minmax(0, 1fr)); gap:5px; }
}
.alpha-filter button{
  min-width:0; min-height:38px;
  padding:6px 4px; font-size:.85rem; font-weight:600;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  color:var(--text); cursor:pointer; transition:background .16s, color .16s, border-color .16s;
}
/* :not(.active) is load-bearing. `button:hover:not(:disabled)` is one
   pseudo-class more specific than `button.active`, so on a touch screen —
   where the tapped element keeps :hover until you tap elsewhere — the hover
   colour won and the chosen letter rendered red on red, i.e. invisible. */
.alpha-filter button:hover:not(:disabled):not(.active){ border-color:var(--accent); color:var(--accent); }
.alpha-filter button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* A letter nobody is filed under is shown but dead — finding that out by
   tapping wastes a tap and a page render. */
.alpha-filter button:disabled{ opacity:.32; cursor:default; }

.members-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.member-card{
  display:flex; flex-direction:column; gap:14px; padding:20px;
  transition:border-color .18s, box-shadow .18s;
}
.member-card:hover{ border-color:var(--accent); box-shadow:0 12px 26px -18px rgba(34,26,103,.55); }
.member-card__head{ display:flex; gap:16px; align-items:flex-start; }
/* `contain`, not `cover`: these are photographs the members supplied
   themselves at every shape and crop, and cutting a face in half to fill a
   square is worse than the letterboxing. */
.member-card img{
  width:104px; height:104px; flex:none; object-fit:contain;
  border-radius:10px; border:1px solid var(--line); background:var(--paper);
}
/* A firm with no photograph gets its initial rather than a broken frame */
.member-card__noimg{
  width:104px; height:104px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--ink); color:#fff;
  font-family:var(--ff-display); font-size:2.3rem; line-height:1;
}
.member-card__id{ min-width:0; }
/* The association's own member number, above the firm name — it is how the
   office refers to a member in correspondence, and it is what that member
   types to sign in, so it is printed exactly as they will type it. */
/* Navy ground, not red: this is an identifier, and the red on this card is
   already spoken for by the proprietor's name. */
.member-card .m-code{
  display:inline-block; margin-bottom:5px; padding:3px 10px;
  background:var(--ink); border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; color:#fff; display:none;
}
/* A search hit inside the code has to stay legible on that dark ground —
   the browser default is black on yellow. */
.member-card .m-code mark{ background:var(--accent-2); color:var(--ink); }
.member-card h3{ font-size:1.02rem; margin-bottom:2px; overflow-wrap:anywhere; }
.member-card .m-owner{
  color:var(--accent); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.member-card .m-city{ font-size:.8rem; color:var(--muted); margin-top:2px; }
/* Every field the member has, laid out as label / value so a card can be
   scanned down its left edge. */
.member-card__body{ margin:0; font-size:.86rem; }
.member-card .m-row{
  display:grid; grid-template-columns:76px 1fr; gap:4px 10px;
  padding:5px 0; border-top:1px dashed var(--line);
}
.member-card .m-row:first-child{ border-top:0; padding-top:0; }
.member-card .m-row dt{ color:var(--muted); font-size:.78rem; font-weight:600; padding-top:1px; }
.member-card .m-row dd{ margin:0; color:var(--text); overflow-wrap:anywhere; }
.member-card mark{ background:#FDE7C8; color:inherit; padding:0 1px; border-radius:2px; }

/* The contact details themselves, each one tappable — the number is the thing
   the visitor came for, so it is on the card rather than behind a label. The
   icon is only a marker for which channel it is. */
.member-card__acts{
  display:flex; gap:6px 16px; flex-wrap:wrap; margin-top:auto;
  padding-top:12px; border-top:1px solid var(--line);
}
.m-act{
  display:inline-flex; align-items:center; gap:7px; min-height:32px;
  font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none;
  overflow-wrap:anywhere;
}
.m-act .i{ width:14px; height:14px; flex:none; color:var(--accent); }
a.m-act:hover{ color:var(--accent); }
a.m-act:hover .i{ color:inherit; }
.m-act--wa .i{ color:#0b7a44; }
a.m-act--wa:hover{ color:#0b7a44; }
.m-act--mail{ font-weight:500; font-size:.84rem; }
/* Office phone and email are shown, not linked — both fields routinely hold
   two entries at once ("044-26512998 / 26511602", "a@x.com, b@y.com"), and a
   tel: or mailto: built from either is a dead link. */
.m-act--plain{ color:var(--muted); font-weight:500; cursor:text; }
.m-act--plain .i{ color:var(--muted); }
.m-act--plain:hover{ color:var(--muted); }

/* ---- Pagination ---- */
.pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:34px; }
.pager button{
  min-width:40px; min-height:40px; padding:8px 12px;
  font:inherit; font-size:.86rem; font-weight:600;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  color:var(--text); cursor:pointer; transition:background .16s, color .16s, border-color .16s;
}
.pager button:hover:not(:disabled):not(.active){ border-color:var(--accent); color:var(--accent); }
.pager button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pager button:disabled{ opacity:.35; cursor:default; }
.pager .pager-gap{ border-color:transparent; background:none; min-width:22px; padding:8px 2px; opacity:.6; }
.directory-empty{
  text-align:center; padding:60px 20px; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--radius); background:var(--card);
}
.directory-empty .btn{ margin-top:14px; }

.notice{
  display:flex; gap:12px; align-items:flex-start;
  background:#FDF0EE; border:1px solid #F2C9C2; border-radius:9px;
  padding:14px 18px; font-size:.9rem; color:#7A2C20; margin-bottom:26px;
}
.notice code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; font-size:.92em; }
/* An accepted application and a rejected one have to be told apart at a
   glance, so the neutral notice above is recoloured rather than reused as is. */
.notice--ok{ background:#EFF8F0; border-color:#BFDFC4; color:#1F5B2A; }
.notice--ok a{ color:#1F5B2A; text-decoration:underline; }
.notice--err{ background:#FDF0EE; border-color:#E9A79C; color:#8E2415; }
.notice > span:first-child{ font-weight:700; line-height:1.5; }

/* Server-side validation message under the field it belongs to. */
.field-error{
  display:block; margin-top:5px; font-size:.8rem; font-weight:600; color:var(--err);
}
.field-error + .field-error{ display:none; }   /* one message per field is enough */

/* ---- File picker (the applicant's photograph) ----
   One row the height of a normal field, not a drop-target billboard: it holds
   a single passport photo, so it should not dominate the form. The whole strip
   is the target — tap it, or drag a file onto it. A bare <input type=file> is
   a small unlabelled button on a phone, which is where most of these
   applications are filled in.

   The [hidden] rule is load-bearing: .filepick__empty and .filepick__filled
   are both display:flex, and an author rule beats the browser's own [hidden]
   styling — without it the two states render on top of each other. */
.filepick{
  display:flex; align-items:center; gap:12px; min-height:52px;
  border:1px dashed var(--line); border-radius:9px;
  background:var(--paper); padding:8px 12px; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.filepick:hover, .filepick:focus-visible{ border-color:var(--accent); background:#FDF5F3; outline:none; }
.filepick.is-dragging{ border-color:var(--accent); background:#FDF0EE; }

.filepick__empty{ display:flex; align-items:center; gap:11px; min-width:0; }
.filepick__icon{ flex:none; display:inline-flex; color:var(--muted); }
.filepick__text{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.filepick__text b{ font-size:.88rem; color:var(--ink); font-weight:600; }
.filepick__note{ font-size:.76rem; color:var(--muted); }

.filepick__filled{ display:flex; align-items:center; gap:12px; width:100%; min-width:0; }
.filepick__filled img{
  width:40px; height:40px; flex:none; object-fit:cover;
  border-radius:7px; border:1px solid var(--line); background:#fff;
}
.filepick__name{
  flex:1 1 auto; min-width:0; font-size:.82rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filepick__clear{
  flex:none; width:30px; height:30px; line-height:1; font-size:1.15rem;
  background:none; border:1px solid var(--line); border-radius:50%;
  color:var(--err); cursor:pointer; padding:0;
}
.filepick__clear:hover{ border-color:var(--err); background:#FDF0EE; }
.label-hint{ font-weight:400; color:var(--muted); }

/* ============================================================
   14 · Forms
   ============================================================ */
/* A form beside its sidebar — contact.php and registration.php.
   The column ratio lives here rather than in a style="" attribute: an inline
   declaration outranks any selector, so the two-column layout used to survive
   the mobile media query and squeeze the form into half a phone screen. */
.form-split{ display:grid; grid-template-columns:1.35fr 1fr; align-items:start; gap:40px; }
.form-split--wide{ grid-template-columns:1.5fr .9fr; }
@media (max-width:900px){
  .form-split, .form-split--wide{ grid-template-columns:1fr; gap:26px; }

  /* On a phone the sidebar falls below a very long form, which buries the fee
     and the bank details — the first thing an applicant wants. `display:contents`
     dissolves the <aside> box so its cards become grid items in their own
     right, which is what lets `order` lift one of them above the form; the
     inline margins go because the grid's own gap now does the spacing. */
  .form-split--wide > aside{ display:contents; }
  .form-split--wide > aside > .card{ margin-bottom:0 !important; }
  .form-split--wide .fee-card{ order:-1; }

  /* Contact: the office address and the phone numbers are the point of that
     page, so on a phone the whole sidebar comes above the enquiry form rather
     than below it. The card's own bottom margin goes for the same reason as
     above — the grid gap is now what separates it from the form. */
  .form-split--aside-first > aside{ order:-1; }
  .form-split--aside-first > aside > .card:last-child{ margin-bottom:0 !important; }
}

/* ---- Member login / profile ---- */
.login-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:start; max-width:900px; }
.login-aside{ background:var(--paper); }
/* "For details contact" — sits under the sign-in button, so it is separated by
   a rule rather than made into a card of its own inside the form card. */
/* Type-to-filter firm picker. The <select> it replaces stays in the document
   because it is still what posts — hidden with !important because a `display`
   from any other rule would otherwise beat the hidden attribute and leave both
   controls on screen. */
#memberCombo select[hidden]{ display:none !important; }
.combo{ position:relative; }
.combo__list{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px);
  max-height:270px; overflow-y:auto; overscroll-behavior:contain;
  margin:0; padding:5px; list-style:none;
  background:var(--card); border:1px solid var(--line);
  border-radius:9px; box-shadow:var(--shadow);
}
.combo__opt{
  padding:9px 12px; border-radius:7px; font-size:.94rem; line-height:1.35;
  cursor:pointer; transition:background .12s, color .12s;
}
.combo__opt:hover, .combo__opt.is-active{ background:var(--paper); color:var(--accent); }
.combo__none{ padding:10px 12px; font-size:.85rem; color:var(--muted); }

.login-help{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.login-help h3{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.login-help .c-info li{ font-size:.94rem; padding:10px 0; }
.member-bar{
  display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between;
  padding:16px 20px; margin-bottom:24px;
}
.member-bar strong{ font-size:1.05rem; color:var(--ink); }
.member-bar__code{
  display:inline-block; margin-left:10px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:3px 12px; font-size:.78rem; font-weight:600; color:var(--muted);
}
.member-bar__links{ display:flex; gap:18px; font-size:.9rem; font-weight:600; }
/* Disabled, because the firm name is not the member's to change here */
.field input:disabled{ background:var(--paper); color:var(--muted); cursor:not-allowed; }
@media (max-width:760px){
  .login-wrap{ grid-template-columns:1fr; gap:22px; }
  .member-bar{ flex-direction:column; align-items:flex-start; }
}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.form-grid .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
.field label .req{ color:var(--err); }
.field input, .field select, .field textarea{
  width:100%; padding:8px 15px; font:inherit; color:var(--text); min-height:35px;
  border:1px solid var(--line); border-radius:9px; background:var(--card);
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(209,40,22,.13);
}
.field textarea{ resize:vertical; min-height:130px; }
.field .hint{ font-size:.8rem; color:var(--muted); margin-top:5px; }
.form-note{ font-size:.88rem; color:var(--muted); }
fieldset{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin:0 0 26px; background:var(--card); }
legend{ font-family:var(--ff-display); font-size:1.15rem; color:var(--ink); padding:0 10px; }

/* The opening line of a form — the applicant's statement of intent on the
   Become a Member page. It reads like a legend and is deliberately not one:
   a legend is painted onto the fieldset's top border and does not push the
   box down when it wraps, so a sentence this long climbed out of the
   fieldset and over whatever sat above it on a narrow screen. */
.form-lede{
  font-family:var(--ff-display); font-size:1.15rem; line-height:1.4;
  color:var(--ink); margin:0 0 20px;
}

/* A group of checkboxes standing in for one answer — membership type, where a
   firm can be a manufacturer *and* a distributor. It sits inside a section's
   fieldset, so it is toned down to read as a field rather than a new section. */
.checkset{
  border:1px solid var(--line); border-radius:9px;
  padding:14px 16px 16px; margin:0; background:var(--paper);
}
.checkset legend{
  font-family:var(--ff-body); font-size:.86rem; font-weight:600;
  color:var(--ink); padding:0 6px;
}
/* Sits under the legend rather than inside it: a legend is painted onto the
   fieldset's border and does not push the box down when it wraps, so the
   hint on the end of one used to land on top of the checkboxes. */
.checkset__hint{ font-size:.8rem; font-weight:400; color:var(--muted); margin:0 0 10px; }
.checkset__grid{
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
/* Each option is a hit target in its own right — on a phone the label text is
   far easier to tap than a 16px box. */
.checkset__item{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px 9px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-size:.9rem; line-height:1;
  transition:border-color .15s, background .15s, color .15s;
}
.checkset__item:hover{ border-color:var(--accent); }
.checkset__item input{
  width:16px; height:16px; min-height:0; margin:0; padding:0;
  accent-color:var(--accent); flex:none;
}
.checkset__item:has(input:checked){
  border-color:var(--accent); background:#FDF0EE; color:var(--accent); font-weight:600;
}
.checkset__item:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

.c-info li{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.c-info li:last-child{ border-bottom:none; }
.c-info .ico{ flex:none; color:var(--accent); font-size:1.05rem; width:22px; text-align:center; }
.c-info b{ display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.map-frame{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.map-frame iframe{ display:block; width:100%; height:320px; border:0; }

.archive-figure{ margin:0 0 28px; }
.archive-figure img{ width:100%; border-radius:var(--radius); border:1px solid var(--line); }
.archive-figure figcaption{ font-size:.85rem; color:var(--muted); padding-top:10px; text-align:center; }

/* tabs */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:38px; }
.tabs button{
  padding:12px 22px; min-height:44px; border-radius:999px; font-weight:600; font-size:.92rem;
  border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer;
  transition:background .16s, color .16s, border-color .16s;
}
.tabs button:hover{ border-color:var(--accent); color:var(--accent); }
.tabs button.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .45s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------- Success modal ----------
   becomeamember.php answers a saved enquiry with this instead of the inline
   notice: on a phone the form runs well past a strip of text above it, and
   what happens next — the office sends the registration link on WhatsApp —
   is the one thing the visitor must not scroll past. Errors still use the
   notice, since they belong beside the fields they are about.
   PHP renders the panel with .modal--open when the form was posted the old
   way, so the message survives with the script absent — which is why the
   dismiss control is a link back to the page rather than a button. */
.modal{
  position:fixed; inset:0; z-index:500; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.modal--open{ display:flex; }
.modal__overlay{
  position:absolute; inset:0; background:rgba(10,7,40,.62); backdrop-filter:blur(3px);
}
.modal__panel{
  position:relative; z-index:1; width:min(470px,100%);
  max-height:calc(100vh - 48px); overflow-y:auto;
  background:var(--card); border-radius:var(--radius);
  border-top:5px solid #2E7D3A;
  box-shadow:0 30px 70px rgba(9,6,32,.35);
  padding:34px 30px 30px; text-align:center;
  animation:modalIn .3s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.97);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .modal__panel{ animation:none; } }
.modal__mark{
  width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
  background:#EFF8F0; color:#2E7D3A; border:1px solid #BFDFC4;
  display:grid; place-items:center; font-size:2rem; font-weight:700; line-height:1;
}
.modal__title{ font-size:clamp(1.3rem,4vw,1.6rem); margin:0 0 12px; }
/* The message itself is the point of the panel, so it is set bold. */
.modal__text{ margin:0 0 24px; font-weight:700; font-size:1.02rem; line-height:1.6; color:var(--ink); }
.modal__close{ min-width:160px; }
@media (max-width: 520px){
  .modal{ padding:16px; }
  .modal__panel{ padding:28px 20px 24px; }
  .modal__close{ width:100%; }
}

/* ============================================================
   15 · CTA band + footer
   ============================================================ */
.cta-band{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.cta-inner{
  position:relative; z-index:2; padding:64px 0;
  display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
}
.cta-inner h2{ color:#fff; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 8px; }
.cta-inner p{ color:#BDB8E0; margin:0; max-width:36em; }
.cta-band .nib-mark{ width:280px; bottom:-70px; }

.site-footer{ background:var(--ink); color:#9E98CC; border-top:4px solid var(--accent); }
/* padding-block, never the padding shorthand: these two elements also carry
   .wrap, whose `padding:0 24px` gives the page its side gutters. A shorthand
   here resets left and right to 0, which is what put the footer text hard
   against the edge of the screen. */
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-block:64px 48px; }
.site-footer h4{ color:#fff; font-size:1.02rem; letter-spacing:.06em; margin-bottom:16px; }
.site-footer a{ color:#9E98CC; }
.site-footer a:hover{ color:#fff; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand img{ width:66px; height:66px; border-radius:50%; background:#fff; padding:3px; }
.footer-brand span{ font-family:var(--ff-display); font-size:1.3rem; letter-spacing:.12em; color:#fff; }
.footer-about{ font-size:.9rem; }
.footer-links li{ padding:5px 0; font-size:.92rem; }
.footer-contact li{ padding:5px 0; font-size:.9rem; display:flex; gap:10px; }
.footer-contact .ico{ color:var(--accent-2); flex:none; }
.footer-base{
  border-top:1px solid var(--ink-3); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.82rem;
}
/* On the inner pages the copyright bar is the whole footer, so it has no grid
   above it to be divided from and needs its own breathing room. */
.footer-base--only{ border-top:0; padding-block:34px; }

/* ============================================================
   16 · Responsive
   ============================================================ */
@media (max-width: 1080px){
  .hero__grid{ grid-template-columns:1fr; }
  .flash{ height:290px; }
  .grid-4, .ad-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  /* tighten the links so the centred nav still clears brand + CTA */
  .nav__link{ padding:19px 11px; }
  .nav__link::after{ left:11px; right:11px; }
  .mainnav.is-stuck .brand-mini span{ display:none; }
}

@media (max-width: 900px){
  .nav, .nav__cta{ display:none; }
  .burger{ display:block; }
  /* only the brand + burger remain — collapse to two tracks */
  .mainnav__inner{ grid-template-columns:minmax(0,1fr) auto; min-height:56px; }
  .brand-mini{ max-width:240px; opacity:1; }        /* always visible on mobile */
  .mainnav.is-stuck .brand-mini span{ display:block; }   /* room again — nav is hidden */
  .topbar__actions{ display:none; }
  .topbar__inner{ justify-content:center; padding:14px 0; }
  .brand-full{ gap:16px; }
  .brand-full img{ width:104px; height:104px; padding:5px; }
  .brand-full__name{ font-size:1.02rem; }
  /* drop the hard break so the name flows and "Manufacturers and" stays on one line */
  .brand-full__name br{ display:none; }
  .brand-full__sub{ font-size:.62rem; letter-spacing:.14em; margin-top:5px; }
  .grid-4, .ad-grid{ grid-template-columns:repeat(2,1fr); }
  .intro-band{ padding:56px 0; }
  .intro-stats{ gap:24px 40px; }
}

@media (max-width: 760px){
  .section{ padding:58px 0; }
  .grid-2, .grid-3, .members-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .intro-stats{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .stat__label{ font-size:.66rem; letter-spacing:.08em; }
  .cta-inner{ padding:48px 0; }
  .cta-inner .btn{ width:100%; }
  .slides{ aspect-ratio:4/3; }
  .to-top{ bottom:calc(74px + env(safe-area-inset-bottom)); right:14px; }

  /* App-style bottom tab bar */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:250;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
    border-top:1px solid var(--line);
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px rgba(21,16,74,.08);
  }
  /* No overflow:hidden here — the Join button's icon is lifted above the bar
     with a negative margin, and clipping the anchor cuts its top off. */
  .tabbar a{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:4px 2px; color:var(--muted); font-size:.63rem; font-weight:600; letter-spacing:.02em;
    white-space:nowrap;
  }
  .tabbar a:hover{ text-decoration:none; }
  .tabbar .i{ width:22px; height:22px; }
  .tabbar a[aria-current="page"]{ color:var(--accent); }
  .tabbar a.tabbar__cta .i{
    width:38px; height:38px; padding:9px; margin-top:-14px; border-radius:50%;
    background:var(--accent); color:#fff; stroke:#fff;
    box-shadow:0 5px 16px rgba(209,40,22,.4);
  }
  /* The two halves of the copyright bar stack on a phone, so each needs its
     own line rather than being squeezed onto one. */
  .footer-base{ padding-block:26px; gap:6px; }
  .footer-base--only{ padding-block:32px; }
  /* Clears the fixed tab bar, plus a little air so the last line of the
     footer is not sitting on top of it. */
  body{ padding-bottom:76px; }
}

@media (max-width: 520px){
  .wrap{ padding:2px 18px; }
  .gallery-grid{ grid-template-columns:1fr; }
  .grid-4, .ad-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; padding-block:48px 36px; }
  .brand-full__sub{ display:none; }
  .brand-full img{ width:88px; height:88px; }
  .brand-full{ gap:12px; }
  .brand-full__name{ font-size: 1.02rem; letter-spacing: .15em;      line-height: 22px; }   /* keeps each phrase whole */

  /* ---- Directory on a phone ---- */
  .directory-tools{ gap:10px; }
  /* Search takes the full width; city and area share the row beneath it */
  .search-box{ flex:1 1 100%; }
  .pick-box{ flex:1 1 0; max-width:none; min-width:0; }
  .alpha-filter button{ min-height:36px; padding:5px 2px; font-size:.8rem; }
  .member-card{ padding:16px; }
  .member-card img, .member-card__noimg{ width:88px; height:88px; }
  .member-card__noimg{ font-size:1.9rem; }
  .member-card__acts{ gap:4px 14px; }
  .pager button{ min-width:38px; min-height:38px; padding:7px 9px; }
  .tabs button{ flex:1 1 auto; padding:12px 14px; font-size:.85rem; }
  .group-label h2{ font-size:1.12rem; white-space:normal; }
}

/* ============================================================
   16 · Events
   ------------------------------------------------------------
   events.php (the public list), event.php (the registration form behind the
   member login), the pop-up on the home page, and a member's own bookings on
   member-profile.php. One section, because they share the fact rows, the
   ticket chip and the money wording, and splitting them is how two spellings
   of the same thing end up on one site.
   ============================================================ */

/* ---- The list ---- */
.evt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:26px; }

.evt-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.evt-card__art{
  position:relative; display:block; aspect-ratio:16/10; background:var(--ink); overflow:hidden;
}
.evt-card__art img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.evt-card:hover .evt-card__art img{ transform:scale(1.05); }
.evt-card__noart{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--accent-2);
}
.evt-card__noart .i{ width:54px; height:54px; stroke-width:1.2; }

/* The day, over the poster — a member scanning the page looks for a date
   before anything else on the card. */
.evt-card__date{
  position:absolute; left:14px; top:14px; z-index:2;
  background:var(--accent); color:#fff; border-radius:9px; padding:8px 12px 7px;
  text-align:center; line-height:1; box-shadow:0 6px 18px rgba(9,6,32,.28);
}
.evt-card__date b{ display:block; font-family:var(--ff-display); font-size:1.5rem; }
.evt-card__date em{
  display:block; font-style:normal; font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin-top:3px; color:var(--on-red);
}

.evt-card__body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
.evt-card__title{ font-size:1.22rem; line-height:1.3; margin:0 0 12px; }
.evt-card__title a{ color:var(--ink); }
.evt-card__title a:hover{ color:var(--accent); }
.evt-card__lede{ font-size:.93rem; color:var(--muted); margin:12px 0 0; }

/* The four facts printed against every event: when, where, by when to
   register, what a ticket costs. */
.evt-facts{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.evt-facts li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--text); }
.evt-facts .i{ width:17px; height:17px; margin-top:2px; color:var(--accent); flex:none; }
.evt-facts--lg li{ font-size:.98rem; }
.evt-facts--lg b{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}

.evt-card__foot{
  margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
}
.evt-price{ margin:0; display:flex; gap:18px; }
.evt-price span{ font-size:.95rem; font-weight:700; color:var(--ink); }
.evt-price b{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.evt-closed{
  font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px;
}

.evt-note{ margin:32px 0 0; font-size:.94rem; color:var(--muted); }
.evt-empty{ text-align:center; padding:52px 24px; }
.evt-empty .i{ width:52px; height:52px; color:var(--accent); stroke-width:1.2; margin:0 auto 14px; }
.evt-empty h2{ font-size:1.4rem; margin:0 0 8px; }
.evt-empty p{ color:var(--muted); margin:0; }

/* ---- The event page ---- */
.evt-page{ padding-top:34px; }

/* The poster runs the full width of the card, whole and uncropped, with the
   details underneath. An event poster is a designed thing — a wide banner with
   the date in one corner and the sponsors along the bottom — and cropping it
   into a side column cut the title off. `contain` on a navy ground shows
   whatever shape it happens to be. */
.evt-hero{ display:block; padding:0; overflow:hidden; margin-bottom:30px; }
.evt-hero__art{ background:var(--ink); display:flex; justify-content:center; }
.evt-hero__art img{ width:100%; height:auto; max-height:430px; object-fit:contain; }
.evt-hero__body{ padding:28px 30px 30px; }
.evt-hero__body .kicker{
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:8px;
}
.evt-hero__body h1{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 18px; color:var(--ink); }
.evt-hero__lede{ margin:18px 0 0; color:var(--muted); font-size:.96rem; }

/* Already booked, or the list has closed — both end the page, so both are one
   card that says what to do next rather than a strip above a form. */
.evt-state{ text-align:center; padding:38px 26px; }
.evt-state h2{ font-size:1.35rem; margin:0 0 10px; }
.evt-state p{ color:var(--muted); margin:0 auto 8px; max-width:46em; }
.evt-state__note{ font-size:.88rem; }
.evt-state__acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.evt-ticket{
  display:inline-block; margin:14px 0 6px !important; padding:11px 22px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:1.3rem; font-weight:700; letter-spacing:.06em; color:#1d7a32;
  background:#EFF8F0; border:1px solid #BFDFC4; border-radius:10px;
}

/* ---- The form ----
   Each half of the booking is a titled block with a coloured rule down the
   left, the way the association's own printed form separates the member from
   the guests. The dot picks that colour up in the legend, which sits on the
   fieldset's border and would otherwise float free of its block. */
.evt-block{ position:relative; border-left:4px solid var(--line); }
.evt-block__dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--line); margin-right:8px; vertical-align:middle;
}

/* The block's name, as a filled chip on the fieldset's own border — bold and
   tinted so it reads as a heading rather than as the first line of the text
   below it. `nowrap` is not decoration: a legend is painted onto the border
   and does not push the box down, so a second line drops *inside* the card
   and reads as stray words. Keeping every legend to one short phrase is what
   makes that safe — anything longer belongs in .evt-block__head. */
.evt-block > legend{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--ff-body); font-weight:700; font-size:.95rem;
  letter-spacing:.01em; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:6px 15px; margin-left:4px;
}
.evt-block--member{ border-left-color:var(--ok); }
.evt-block--member .evt-block__dot{ background:var(--ok); }
.evt-block--member > legend{ background:#EFF8F0; border-color:#CBE5D3; color:#1F6B41; }
.evt-block--guest{ border-left-color:var(--blue); }
.evt-block--guest .evt-block__dot{ background:var(--blue); }
.evt-block--guest > legend{ background:#EEF0FB; border-color:#D5D9F2; color:var(--blue); }

/* What the block is about, inside the card where wrapping is harmless. */
.evt-block__head{
  font-family:var(--ff-display); font-size:1rem; color:var(--ink);
  margin:4px 0 6px;
      font-weight: bold;
    margin-bottom: 15px;
}

/* Gender — three options, one answer. The same pill as .checkset__item, since
   a radio and a checkbox should not look like different kinds of question. */
.radioset{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.radioset__item{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px 9px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-size:.9rem; line-height:1;
  transition:border-color .15s, background .15s, color .15s;
}
.radioset__item:hover{ border-color:var(--accent); }
.radioset__item input{
  width:16px; height:16px; min-height:0; margin:0; padding:0;
  accent-color:var(--accent); flex:none;
}
.radioset__item:has(input:checked){
  border-color:var(--accent); background:#FDF0EE; color:var(--accent); font-weight:600;
}
.radioset__item:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

/* One block per guest, added and removed by events.js. */
.evt-guests{ display:grid; gap:16px; margin-top:6px; }
.evt-guest{
  border:1px solid var(--line); border-radius:9px; padding:16px 18px 18px; background:var(--paper);
}
.evt-guest__head{
  font-family:var(--ff-body); font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin:0 0 12px;
}

.evt-pricebox{
  display:flex; align-items:center; gap:9px; margin:0;
  border:1px solid var(--line); border-radius:9px; background:var(--paper);
  padding:8px 15px; min-height:35px; font-size:1rem; color:var(--ink);
}
.evt-pricebox .i{ width:18px; height:18px; color:var(--accent); }
.evt-pricebox.is-free{ background:#EFF8F0; border-color:#BFDFC4; }
.evt-pricebox.is-free b{ color:var(--ok); letter-spacing:.06em; }

/* What it comes to. Rewritten by events.js as guests are added and printed by
   PHP as well, so the figure is right with the script off. */
.evt-total{
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:20px 24px; margin:0 0 26px;
}
.evt-total dl{ margin:0; }
.evt-total dl > div{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:7px 0;
}
.evt-total dt{ color:#BDB8E0; font-size:.94rem; }
.evt-total dd{ margin:0; font-weight:600; }
.evt-total__sum{ border-top:1px solid var(--ink-3); margin-top:6px; padding-top:12px !important; }
.evt-total__sum dt{ color:#fff; font-family:var(--ff-display); font-size:1.1rem; }
.evt-total__sum dd{ font-family:var(--ff-display); font-size:1.5rem; color:var(--accent-2); }

.btn--wide{ width:100%; justify-content:center; }

/* ---- Bank details and the office number, beside the form ---- */
.bank-card{ margin-bottom:22px; }
.bank-card h3{ font-size:1.15rem; margin-bottom:6px; }
.bank-qr{ margin:16px 0 0; text-align:center; }
.bank-qr img{
  width:170px; margin:0 auto; border:1px solid var(--line);
  border-radius:9px; padding:8px; background:#fff;
}
.bank-qr figcaption{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:8px;
}

.help-card{ background:var(--ink); border-color:var(--ink); text-align:center; }
.help-card__lede{
  color:#BDB8E0; font-size:.84rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 12px; line-height:1.6;
}
.help-card__num{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-display); font-size:1.5rem; color:var(--accent-2);
}
.help-card__num .i{ width:24px; height:24px; }
.help-card__num:hover{ color:#fff; }

/* ---- The home page pop-up ---- */
.evtpop__panel{
  width:min(560px, 100%); padding:0; text-align:left;
  border-top-color:var(--accent); overflow:hidden;
}
/* .modal__close is 160px wide for the dismiss button on the enquiry panel;
   here the same class is on a round close mark in the corner, so it is
   overridden rather than reused as it stands. */
.evtpop__x{
  position:absolute; z-index:6; right:12px; top:12px;
  width:36px; height:36px; min-width:0; padding:0; border:none; border-radius:50%;
  background:rgba(10,7,40,.5); color:#fff; font-size:24px; line-height:1; cursor:pointer;
}
.evtpop__x:hover{ background:var(--accent); }
.evtpop__kicker{
  display:flex; align-items:center; gap:8px; margin:0;
  padding:15px 20px; background:var(--ink); color:#fff;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.evtpop__kicker .i{ width:16px; height:16px; color:var(--accent-2); }
/* The poster is the point, so it is shown whole rather than cropped to the
   home page slider's 16:10 — and the frame takes the poster's own shape
   rather than a fixed ratio, which is what left a wide banner letterboxed in a
   tall box with a band of dead navy above it. The active slide is the only one
   in normal flow, so it is what gives .slides its height; the rest stay
   stacked over it and the cross-fade is unchanged. */
.evtpop__slider{ border:none; border-radius:0; box-shadow:none; background:var(--ink); }
.evtpop__slider .slides{ aspect-ratio:auto; }
.evtpop__slider .slide.is-active{ position:relative; }
.evtpop__slider .slide img{
  width:auto; max-width:100%; height:auto; max-height:56vh;
  margin:0 auto; object-fit:contain;
}
.evtpop__slider .slide.is-active img{ animation:none; }
/* The caption no longer sits over the poster, so the dots come back down to
   the frame's own edge; the room for them is made in the :has() rule below. */
.evtpop__slider .slider__dots{ bottom:12px; }
.evtpop__link{ display:block; position:relative; }
/* Under the poster rather than over it. An event poster is artwork the whole
   way to its edge — sponsor logos, a scoreboard, the date panel — and a bar
   laid across the bottom of one covers the part somebody opened the pop-up to
   read. It stays a solid bar and not a gradient for the same reason: nothing
   translucent survives artwork that light. */
.evtpop__cap{
  display:block; padding:12px 18px 13px;
  background:rgba(12,8,44,.94); color:#fff;
  border-top:2px solid var(--accent);
}
/* Dots are only rendered when there is more than one poster, so the room they
   need under the caption is only made then. */
.evtpop__slider:has(.slider__dots) .evtpop__cap{ padding-bottom:28px; }
.evtpop__cap b{ display:block; font-family:var(--ff-display); font-size:1.15rem; line-height:1.3; }
.evtpop__cap em{ display:block; font-style:normal; font-size:.82rem; color:#D8D4EE; margin-top:3px; }
.evtpop__acts{ display:flex; gap:10px; padding:16px 20px; }
.evtpop__acts .btn{ flex:1; justify-content:center; }

/* ---- A member's own bookings — my-registrations.php ----
   One card per booking, and every card says the same three things in the same
   three places: what the event is (head), who is going and what it cost
   (columns), what can be done about it (foot). */
.myreg{ padding:0; overflow:hidden; margin-bottom:22px; }
.myreg + .myreg{ margin-top:0; }

.myreg__head{
  display:grid; grid-template-columns:1fr auto; gap:20px;
  align-items:start; padding:20px 22px; border-bottom:1px solid var(--line);
}
/* The poster column only exists when there is a poster — an empty 132px
   gutter on an event without one reads as a missing image. */
.myreg__head--art{ grid-template-columns:132px 1fr auto; }
.myreg__art{
  border-radius:8px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line);
}
.myreg__art img{ display:block; width:100%; height:auto; }
.myreg__title h2{ font-size:1.25rem; margin:0 0 10px; line-height:1.25; }
.myreg__title h2 a{ color:var(--ink); }
.myreg__title h2 a:hover{ color:var(--accent); }
.myreg__over{ margin:10px 0 0; font-size:.82rem; color:var(--muted); font-style:italic; }

.myreg__state{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  text-align:right; min-width:190px; max-width:250px;
}
.myreg__tklabel{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:4px;
}
.myreg__ticket{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:1.02rem; font-weight:700; letter-spacing:.04em; color:var(--ok);
}
.myreg__note{ font-size:.78rem; color:var(--muted); line-height:1.5; }

.myreg__remarks{
  margin:0; padding:12px 22px; background:#FDF3E3; color:#7a4a12; font-size:.86rem;
  border-bottom:1px solid var(--line);
}

.myreg__cols{
  display:grid; grid-template-columns:1.35fr 1fr; gap:0;
  /* The rule between the two halves, drawn once so it survives either of them
     wrapping away on a narrow screen. */
  background:linear-gradient(var(--line), var(--line)) center/1px 100% no-repeat;
}
.myreg__block{ padding:20px 22px; }
.myreg__block h3{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin:0 0 12px; display:flex; justify-content:space-between; gap:10px; font-weight:700;
}
.myreg__block h3 span{ letter-spacing:0; text-transform:none; font-weight:600; }
.myreg__empty{ margin:0; font-size:.86rem; color:var(--muted); }

.table-scroll{ overflow-x:auto; }
.myreg__people{ width:100%; border-collapse:collapse; font-size:.9rem; }
.myreg__people th{
  text-align:left; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:0 10px 6px 0; font-weight:700; white-space:nowrap;
}
.myreg__people td{ padding:8px 10px 8px 0; border-top:1px solid var(--line); vertical-align:top; }
.myreg__people tr td:last-child, .myreg__people tr th:last-child{ padding-right:0; }
.myreg__people b{ display:block; color:var(--text); }
.myreg__kind{ font-size:.72rem; color:var(--muted); }
/* The header cell needs naming twice over: `.myreg__people th` sets
   text-align:left and outweighs a bare `.ta-r`, which left the Ticket heading
   at the left of a column whose figures were at the right. */
.ta-r, .myreg__people th.ta-r{ text-align:right; white-space:nowrap; }

.myreg__sum{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.88rem; }
.myreg__sum dt{ color:var(--muted); }
.myreg__sum dd{ margin:0; text-align:right; color:var(--text); }
.myreg__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
}
.myreg__total span{ font-size:.82rem; color:var(--muted); }
.myreg__total b{ font-family:var(--ff-display); font-size:1.3rem; color:var(--ink); }

.myreg__proof{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:10px;
  border:1px solid var(--line); border-radius:8px; background:var(--paper);
  font-size:.8rem; color:var(--muted);
}
.myreg__proof:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.myreg__proof img{
  width:54px; height:54px; object-fit:cover; border-radius:5px; flex:none;
  border:1px solid var(--line); background:#fff;
}

.myreg__acts{ display:flex; flex-wrap:wrap; gap:10px; padding:16px 22px; background:var(--paper); }

.myreg-none{ padding:34px 26px; text-align:center; }
.myreg-none h2{ font-size:1.2rem; margin:0 0 8px; }
.myreg-none p{ color:var(--muted); margin:0 0 18px; }

.chip{
  display:inline-block; border-radius:999px; padding:3px 12px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.chip--pending{  background:#FDF3E3; color:#9a5b18; }
.chip--approved{ background:#EFF8F0; color:var(--ok); }
.chip--rejected{ background:var(--paper); color:var(--muted); }

/* ---- Bank details, printed twice and shown once ----
   event.php renders the card into a string and prints it in both places. The
   sidebar's copy is the desktop one; the form's copy sits directly above the
   Payment block and is the phone's. Only ever one is on screen. */
.bank-inline{ display:none; }

/* A part of the form that exists only while there is something to pay — the
   Payment block and both copies of the bank card. PHP hides them on an event
   that comes to nothing and events.js flips the attribute as guests are added
   or removed. It has to be !important: .bank-inline sets its own display, and
   the browser's own [hidden] rule loses to any author rule at all. */
[data-pay-part][hidden]{ display:none !important; }

@media (max-width:900px){
  /* You cannot pay before you have been told where to, and on a phone the
     sidebar falls past the end of a long form — so the account details move
     to where the member is actually asked for the money, not to the top of
     the page where they mean nothing yet. */
  .bank-inline{ display:block; margin-bottom:26px; }
  .bank-aside{ display:none; }
  .bank-inline .bank-card{ margin-bottom:0; }

  /* One column under the other, so the rule down the middle has to go with
     them — a vertical line across a stacked card points at nothing. */
  .myreg__cols{ grid-template-columns:1fr; background:none; }
  .myreg__cols .myreg__block + .myreg__block{ border-top:1px solid var(--line); }
  .myreg__head{ grid-template-columns:1fr; }
  .myreg__head--art{ grid-template-columns:104px 1fr; }
  .myreg__state{
    grid-column:1 / -1; align-items:flex-start; text-align:left; max-width:none;
    padding-top:12px; border-top:1px solid var(--line);
  }
}
@media (max-width:560px){
  /* The legend cannot wrap without falling into the card, so on a narrow
     phone it gets smaller rather than taller. */
  .evt-block > legend{ font-size:.86rem; padding:5px 12px; }
  .evt-block__head{ font-size:1.08rem; }

  .evt-hero__body{ padding:22px 20px 24px; }
  .evt-card__foot{ flex-direction:column; align-items:stretch; }
  .evt-card__foot .btn{ width:100%; justify-content:center; }
  .evt-total{ padding:16px 18px; }
  .evt-total__sum dd{ font-size:1.3rem; }
  .evtpop__slider .slide img{ max-height:48vh; }

  .myreg__head, .myreg__block, .myreg__acts{ padding-left:16px; padding-right:16px; }
  .myreg__remarks{ padding-left:16px; padding-right:16px; }
  .myreg__head--art{ grid-template-columns:84px 1fr; gap:14px; }
  .myreg__title h2{ font-size:1.1rem; }
  .myreg__acts .btn{ flex:1; justify-content:center; }
}

/* A rejected answer. Every other field shows this as a red border on the input
   itself; a radio or checkbox group has no one input to put it on, so main.js
   marks the group and the ring goes round the whole row of pills. */
.radioset.is-invalid, .checkset.is-invalid{
  border-radius:9px; box-shadow:0 0 0 2px rgba(179,64,46,.35);
}