/* ============================================================
   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; }

/* 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;
}
.checkset__hint{ font-weight:400; color:var(--muted); }
.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;} }

/* ============================================================
   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; }
}