/* ============================================================
   Interior page styles (shared)
   ============================================================ */

/* ---------- MEMBERSHIP ---------- */
/* A quiet cream passage on the white page — a warm step and a hairline, no
   hard colour edge. */
.intro-band{background:var(--bg-alt);border-block:1px solid var(--line-soft)}
.intro-band .container{max-width:820px;text-align:center;padding-block:clamp(48px,7vw,80px)}
.intro-band p{font-size:1.18rem;line-height:1.7;color:var(--ink)}
.intro-band .lead-serif{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--navy);line-height:1.4;font-weight:500}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{
  position:relative;
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .34s var(--ease-lux),box-shadow .34s var(--ease-lux),border-color .3s var(--ease);
}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--gold)}
/* ── The gold outline, drawn ON TOP of the card ──────────────────────────────
   The border alone did not read as a complete rectangle. .tier is
   overflow:hidden with a radius, and its navy .tier-head fills the top third
   right up to the border's inner edge — so along that third the 1px gold line
   sits gold-on-navy while along the white body it sits gold-on-white, and the
   two halves of the same edge read as different strengths. On the middle card,
   flanked by two others, the left edge lost the contrast entirely.

   So the outline is its own layer: an inset ring on a pseudo-element above
   every child, at one weight, on all four sides, over navy and over white
   alike. The border underneath keeps the card's geometry; this only draws. */
.tier::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 1.5px transparent;
  transition:box-shadow .3s var(--ease-lux);
}
.tier:hover::after,.tier:focus-within::after,.tier.tier-match::after{
  box-shadow:inset 0 0 0 1.5px var(--gold);
}
/* Whole tier card is a click target (its own join action). */
.tier-clickable{cursor:pointer}
.tier-clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,163,78,.32),var(--shadow-lg)}
.tier.tier-match{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,163,78,.4),var(--shadow-xl)}
.tier-head{background:var(--navy);color:var(--white);padding:30px 28px 26px;position:relative}
.tier-head.brown{background:var(--brown)}
.tier-kind{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.tier-head.brown .tier-kind{color:var(--gold-soft)}
.tier-name{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--white);line-height:1.15}
.tier-price{margin-top:18px;font-family:var(--serif);font-size:2.8rem;font-weight:700;color:var(--white);line-height:1}
.tier-price small{font-size:1rem;font-weight:500;color:rgba(255,255,255,.65);font-family:var(--sans)}
.tier-body{padding:28px;display:flex;flex-direction:column;flex:1}
.tier-for{font-size:.95rem;color:var(--ink);margin-bottom:20px}
.tier-list{margin-bottom:28px;flex:1}
.tier-list li{display:flex;gap:.7em;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);padding:.4em 0}
.tier-list li i{color:var(--gold);font-size:1.15em;margin-top:.15em;flex-shrink:0}
.tier .btn{width:100%;justify-content:center}

.tier-note{
  display:flex;gap:.6em;align-items:flex-start;
  margin-top:14px;font-size:.8rem;color:var(--ink-soft);line-height:1.5;
}
.tier-note i{color:var(--brown);margin-top:.1em}

.member-footnotes{
  max-width:820px;margin:44px auto 0;padding:26px 30px;
  background:var(--surface-2);border-radius:var(--radius-lg);border:1px solid var(--line);
}
.member-footnotes p{font-size:.86rem;line-height:1.65;color:var(--ink-soft);margin-bottom:10px}
.member-footnotes p:last-child{margin-bottom:0}
.member-footnotes strong{color:var(--navy)}

/* payment note */
.pay-strip{
  display:flex;align-items:center;justify-content:center;gap:.6em;flex-wrap:wrap;
  margin-top:28px;font-size:.85rem;color:var(--ink-soft);text-align:center;
}
.pay-strip i{color:var(--gold-deep);font-size:1.1em}

/* ---------- APPLICATION FORM ---------- */
.apply-section{background:var(--navy);color:var(--white)}
.apply-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start}
.apply-copy .eyebrow{color:var(--gold)}
.apply-copy h2{color:var(--white);margin:12px 0 18px}
.apply-copy p{color:rgba(255,255,255,.72);margin-bottom:24px}
.apply-points li{display:flex;gap:.7em;align-items:flex-start;padding:.5em 0;color:rgba(255,255,255,.85);font-size:.95rem}
.apply-points i{color:var(--gold);font-size:1.2em;margin-top:.1em}
.apply-form{background:var(--surface);border-radius:var(--radius-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--edge-light),var(--shadow-lg);border:1px solid var(--line)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.02em}
/* Fields are the recessed half of the depth system. A button comes toward you;
   a field sinks in. Previously both were a 1px rule on white at exactly the
   same plane, so a form read as a stack of undifferentiated rectangles and
   there was no visual cue about which of them you could press. The well is a
   soft inner shadow at the top edge, exactly inverting the lit top edge the
   buttons carry, and it lifts to flush-and-lit on focus — the field rises to
   meet you as you type into it. */
.field input,.field select,.field textarea{color:var(--ink);
  width:100%;padding:.8em .9em;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface-2);
  box-shadow:var(--inset-well);
  transition:border-color .22s var(--ease),box-shadow .28s var(--ease-lux),background .22s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brown-soft)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--surface);
  box-shadow:0 0 0 3px rgba(201,163,78,.16),0 1px 2px rgba(10,23,40,.06);
}
.field input::placeholder,.field textarea::placeholder{color:#9aa4b1}
.field textarea{resize:vertical;min-height:100px}
.form-consent{display:flex;gap:.6em;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);margin-bottom:20px}
.form-consent input{margin-top:.25em;accent-color:var(--gold)}
.apply-form .btn{width:100%;justify-content:center}
.form-note{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:14px}

/* ---------- Contact wizard (guided Step 1 → 4) ---------- */
.contact-form.wizard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,36px);box-shadow:var(--edge-light),var(--shadow-md);align-self:start;
}
/* Forms sit tight on a phone so a full step fits the screen without a long
   scroll — reduced padding and field rhythm, but still with room to breathe. */
@media (max-width:600px){
  .contact-form.wizard,.apply-form.wizard{padding:18px 15px}
  .field{margin-bottom:12px}
  .field label{margin-bottom:5px}
  .field input,.field select,.field textarea{padding:.68em .8em}
  .field textarea{min-height:78px}
  .wz-progress{margin-bottom:16px}
  .wz-steps{margin-bottom:10px}
  .form-row{gap:12px}
  .contact-grid,.consult-grid{gap:22px}
}
.wz-progress{margin-bottom:24px}
.wz-steps{display:flex;list-style:none;gap:4px;margin:0 0 14px;padding:0;justify-content:space-between}
.wz-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0;position:relative}
.wz-step .wz-dot{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);
  font-weight:700;font-size:.82rem;position:relative;z-index:1;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.wz-step .wz-dot i{display:none;font-size:.95rem}
.wz-step .wz-label{font-size:.72rem;letter-spacing:.02em;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.1;white-space:nowrap}
.wz-step.is-active .wz-dot{border-color:var(--gold);color:var(--gold-deep);background:rgba(201,163,78,.1);box-shadow:0 0 0 3px rgba(201,163,78,.12)}
.wz-step.is-active .wz-label{color:var(--navy)}
.wz-step.is-done .wz-dot{background:var(--gold);border-color:var(--gold);color:#fff}
.wz-step.is-done .wz-dot i{display:block}
.wz-step.is-done .wz-dot b{display:none}
.wz-step.is-done{cursor:pointer}
.wz-step:not(:first-child)::before{
  content:"";position:absolute;top:15px;right:50%;width:100%;height:2px;background:var(--line);z-index:0;
}
.wz-step.is-active:not(:first-child)::before,
.wz-step.is-done:not(:first-child)::before{background:var(--gold-soft)}
.wz-bar{height:4px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.wz-bar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .45s var(--ease-lux)}
.wz-count{font-size:.72rem;color:var(--ink-soft);margin-top:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}

.wz-pane{border:0;margin:0;padding:0;display:none;min-inline-size:0}
.wz-pane.is-active{display:block;animation:wzIn .35s var(--ease)}
@keyframes wzIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.wz-legend{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--navy);padding:0;margin-bottom:4px}
.wz-hint{font-size:.86rem;color:var(--ink-soft);margin-bottom:18px}
.wz-opt{color:var(--ink-soft);font-weight:400;font-size:.9em}

.wz-choices{display:grid;gap:10px}
.wz-choice{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;
  align-items:center;text-align:left;cursor:pointer;
  padding:13px 16px;border:1px solid var(--line);border-radius:0;background:var(--surface);
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),transform .1s var(--ease);
}
.wz-choice i{grid-row:1/3;font-size:1.5rem;color:var(--gold-deep)}
.wz-c-t{font-weight:700;color:var(--navy);font-size:.98rem}
.wz-c-s{font-size:.82rem;color:var(--ink-soft)}
.wz-choice:hover{border-color:var(--gold);box-shadow:0 4px 14px rgba(201,163,78,.12);transform:translateY(-1px)}
.wz-choice.is-selected{border-color:var(--gold);background:rgba(201,163,78,.08);box-shadow:inset 0 0 0 1px rgba(201,163,78,.4)}

.wz-nav{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
/* .btn sets display:inline-flex, which overrides the UA [hidden]{display:none};
   without this the "Back"/"Send" buttons stay visible on the wrong steps. */
.btn[hidden]{display:none}
.wz-nav .wz-next,.wz-nav .wz-send{margin-left:auto;width:auto}
.wz-back{color:var(--ink-soft)}
.field input.wz-invalid{border-color:#c0432f;box-shadow:0 0 0 3px rgba(192,67,47,.14)}

.wz-done{text-align:center;padding:20px 8px 6px;animation:wzIn .4s var(--ease)}
.wz-done-mark{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 16px;border-radius:50%;background:var(--gold);color:#fff;font-size:1.7rem}
.wz-done h3{font-family:var(--serif);font-size:1.5rem;color:var(--navy);margin-bottom:8px}
.wz-done p{color:var(--ink-soft);font-size:.95rem;max-width:340px;margin:0 auto}

@media (max-width:520px){
  .wz-step .wz-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wz-pane.is-active,.wz-done{animation:none}
  .wz-bar-fill{transition:none}
}

/* ---------- GENERIC CONTENT ---------- */
.prose{max-width:760px}
.prose h2{margin:40px 0 16px}
.prose h3{margin:30px 0 12px}
.prose p{font-size:1.05rem;line-height:1.75;margin-bottom:18px;color:var(--ink)}
.prose ul.ticks li{display:flex;gap:.7em;align-items:flex-start;padding:.4em 0;color:var(--ink)}
.prose ul.ticks i{color:var(--gold);margin-top:.2em}

/* value grid */
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.value-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;transition:all .3s var(--ease)}
.value-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.value-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);color:var(--brown);margin-bottom:18px}
.value-icon i{font-size:1.5rem}
.value-card h3{font-size:1.3rem;margin-bottom:10px}
.value-card p{font-size:.95rem}

/* president full block */
.president-full{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:start}
.president-full .pp-frame{aspect-ratio:4/5;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.pf-body h2{margin-bottom:8px}
.pf-role{color:var(--gold);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;display:block}
.pf-body p{font-size:1.05rem;line-height:1.75;margin-bottom:16px;color:var(--ink)}

/* board grid */
.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.board-member{text-align:center}
.bm-photo{aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(150deg,#e8e2d5,#f4efe6);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--brown-soft)}
.bm-photo i{font-size:2.6rem}
.bm-name{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--navy)}
.bm-role{font-size:.85rem;color:var(--ink-soft);margin-top:2px}

/* ── EUROPEAN PRESENCE ───────────────────────────────────────────────────────
   Fourteen engraved plates. Each carries the country's flag in a ruled
   compartment and its OWN leaf — fourteen silhouettes generated from one
   construction rule, so no two countries share a mark and all fourteen are
   obviously the same species. The previous grid had a .cc-leaf span in the
   markup with no CSS anywhere in the project to draw it, so the leaves did
   not exist: every card was a rounded box with a name in it.

   Hover carries two of the seven approved marks and no movement at all:
   01 Ledge Glow settles a gold hairline under the plate, 05 Corner Spark
   lifts the two points on the diagonal, and the leaf — which rests at a
   quiet third — comes up to full and turns a few degrees on its petiole. */
.presence-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  list-style:none;margin:0;padding:0;
}
.presence-defs{position:absolute;width:0;height:0;overflow:hidden}
.country-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:var(--hair) solid var(--line);border-radius:0;
  padding:18px 18px 20px;
  transition:border-color .3s var(--ease-lux),box-shadow .34s var(--ease-lux),background .3s var(--ease);
}
/* 05 Corner Spark */
.country-card::before,.country-card::after{
  content:"";position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--gold-deep);opacity:.22;pointer-events:none;z-index:3;
  transition:opacity .32s var(--ease-lux),box-shadow .32s var(--ease-lux);
}
.country-card::before{top:6px;left:6px}
.country-card::after{bottom:6px;right:6px}
/* 01 Ledge Glow */
.country-card:hover{
  border-color:var(--gold);
  box-shadow:0 var(--hair) 0 var(--gold),0 6px 18px -10px rgba(10,23,40,.28);
}
.country-card:hover::before,.country-card:hover::after{opacity:1;box-shadow:0 0 5px var(--gold-deep)}

/* The flag sits in its own ruled plate — a hairline frame and a fine inner
   shadow, so it reads as a printed plate set into the card rather than as an
   icon dropped on top of it. */
.cc-flag{
  display:block;width:26px;height:17.34px;margin:0 0 14px;
  border:var(--hair) solid rgba(10,23,40,.22);
  box-shadow:0 1px 2px rgba(10,23,40,.10);
  font-size:0;line-height:0;
}
.cc-flag svg{display:block;width:100%;height:100%}

/* The country's own leaf, resting in the upper-right corner and running off
   the plate edge the way a watermark does. */
/* The leaf's colours are set through custom properties, not through selectors.
   A <use> instance is a shadow tree: `.cc-leaf .lf-blade{fill:...}` from this
   stylesheet cannot reach the path inside the referenced <symbol>, which is
   why the first pass rendered fourteen identical grey silhouettes. Inherited
   CUSTOM PROPERTIES do cross that boundary, so the symbol carries
   fill="var(--lc)" and the card sets --lc. */
.cc-leaf{
  position:absolute;top:-4px;right:-6px;width:56px;height:56px;z-index:1;
  --lv:rgba(255,255,255,.62);--ls:rgba(122,82,56,.8);
  opacity:.3;pointer-events:none;
  transform:rotate(4deg);transform-origin:50% 92%;
  transition:opacity .42s var(--ease-lux),transform .55s var(--ease-lux);
}
.country-card:hover .cc-leaf{opacity:.9;transform:rotate(-5deg)}

.cc-name{position:relative;z-index:2;display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--navy)}
.cc-tag{position:relative;z-index:2;display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}

/* Luxembourg is the headquarters and is the only plate that says so before
   you read it: a gold hairline at rest and a warmer ground. */
.cc-hq{
  border-color:rgba(201,163,78,.55);
  background:linear-gradient(180deg,#fdfbf6,#f8f3e8);
}
.cc-hq::before,.cc-hq::after{opacity:.6}
.cc-hq .cc-leaf{opacity:.46}
.cc-hq .cc-tag{color:var(--gold-deep)}

/* On a touch device there is no hover, so the leaf would sit at its resting
   third for ever and the one thing that distinguishes these fourteen plates
   from a list of country names would never be seen. Where the pointer cannot
   hover, the leaves simply rest brighter. */
@media (hover:none){
  .cc-leaf{opacity:.62}
  .country-card::before,.country-card::after{opacity:.4}
}
@media (prefers-reduced-motion:reduce){
  .country-card,.cc-leaf,.country-card::before,.country-card::after{transition:none}
  .country-card:hover .cc-leaf{transform:rotate(4deg)}
}

/* regulatory list */
.reg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.reg-card{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.reg-icon{width:52px;height:52px;flex-shrink:0;border-radius:12px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center}
.reg-icon i{font-size:1.5rem}
.reg-card h3{font-size:1.2rem;margin-bottom:6px}
.reg-card p{font-size:.9rem}

/* ---------- EVENTS PAGE ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filter-btn{
  padding:.6em 1.2em;border-radius:0;border:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--ink-soft);background:var(--surface);
  transition:all .2s var(--ease);
}
.filter-btn:hover{border-color:var(--gold);color:var(--brown)}
.filter-btn.active{background:var(--gold);border-color:var(--gold);color:#12243f}

.event-row{
  display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 28px;margin-bottom:16px;transition:all .28s var(--ease);
}
.event-row:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-md)}
.er-date{text-align:center;border-right:1px solid var(--line);padding-right:20px}
.er-day{font-family:var(--serif);font-size:2.6rem;font-weight:700;color:var(--gold-bright);line-height:1}
.er-mon{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:600}
.er-body h3{font-size:1.35rem;margin-bottom:6px}
.er-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.er-tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3em .8em;border-radius:20px;background:var(--gold-soft);color:var(--brown)}
.er-body p{font-size:.92rem}
.er-meta{display:flex;gap:16px;font-size:.85rem;color:var(--ink-soft);margin-top:8px}
.er-meta span{display:flex;align-items:center;gap:.4em}
.er-meta i{color:var(--gold)}

.empty-state{text-align:center;padding:60px 20px;background:var(--surface-2);border-radius:var(--radius-lg);border:1px dashed var(--line)}
.empty-state i{font-size:2.6rem;color:var(--gold);margin-bottom:16px}
.empty-state h3{margin-bottom:8px}
.empty-state p{max-width:440px;margin:0 auto 20px}

/* event type cards */
.evtype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.evtype{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;position:relative;overflow:hidden;transition:all .3s var(--ease)}
.evtype:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.evtype::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--c)}
.evtype-icon{width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--c) 12%,white);color:var(--c);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.evtype-icon i{font-size:1.6rem}
.evtype h3{margin-bottom:10px}
.evtype p{font-size:.95rem}

/* ---------- KNOWLEDGE PAGE ---------- */
.kh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* A quieter shadow. These cards sit in grids of six and nine; at --shadow-md
   each one announced itself and the page read as a pile of floating tiles
   rather than a set. The resting card now has almost none — a hairline of
   light along the top edge and the faintest lift — and the shadow is something
   that happens on approach, not a permanent property. */
.kh-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--edge-light),0 1px 2px rgba(15,32,56,.04);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.kh-card:hover{transform:translateY(-4px);box-shadow:var(--edge-light),0 10px 22px -14px rgba(15,32,56,.22),0 2px 5px rgba(15,32,56,.05);border-color:var(--gold-soft)}
.kh-top{height:4px;background:var(--c,linear-gradient(90deg,var(--gold-deep),var(--gold-bright) 50%,var(--gold-deep)))}
.kh-inner{padding:26px;display:flex;flex-direction:column;flex:1}
.kh-cat{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--gold-deep));margin-bottom:12px}
.kh-inner h3{font-size:1.3rem;margin-bottom:10px;line-height:1.25}
.kh-inner p{font-size:.92rem;flex:1}
.kh-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.kh-foot .kh-meta{font-size:.8rem;color:var(--ink-soft)}
.kh-foot .kh-link{color:var(--brown);font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:.4em}
.kh-link i{transition:transform .25s var(--ease)}
.kh-card:hover .kh-link i{transform:translateX(4px)}

/* ---------- PARTNERS PAGE ---------- */
.partner-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* The cards are a grid of equal columns, but they were laid out as if every
   label were as short as "IRE". "Order of Chartered Accountants" is four times
   the length of its neighbours: with no horizontal padding it ran the full
   width of its card and touched both edges, so that one card read as a
   different width from the other five even though the grid was giving it the
   same column. A long label also has to be free to take a second line without
   the box changing shape.

   So: real side padding, a centred measure that can wrap, balanced wrapping so
   a two-line label splits evenly instead of leaving one word alone on line two,
   and a min-height so the tallest label sets the floor for the row instead of
   overflowing its own box.

   ── Why there is no aspect-ratio here any more ────────────────────────────
   There was: aspect-ratio:3/2 alongside min-height:150px. Together those two
   are not a height rule, they are a WIDTH rule. A grid item's automatic
   minimum size is its min-content size, and on a box with an aspect ratio the
   min-height is transferred through that ratio into a minimum width — 150px of
   height at 3:2 is 225px of floor width per card, which no amount of available
   space can compress. Measured: at 1024 the four columns wanted 4 x 225 + 3 x 18
   = 954px inside a 922px grid, and at 390 two columns wanted 464px inside 350px.
   The row simply ran off the right-hand edge, which is why IRE, The Bar and
   Institutional partner were the ones cut — they are the cards at the end of a
   row. min-width:0 lets a grid item shrink to its track, which is the other
   half of the same fix. */
.partner-logo{
  min-height:clamp(132px,14vw,178px);min-width:0;
  background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:20px 18px;text-align:center;
  color:var(--ink-soft);transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.partner-logo:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.partner-logo i{font-size:2rem;color:var(--brown);flex:0 0 auto}
/* German compounds are the stress case: "Wirtschaftsprüferkammer" is a single
   23-character word, so no amount of wrapping helps — it either hyphenates or
   it runs out of the card. hyphens:auto does the first (the document's lang is
   switched by the i18n layer, so the browser has the right dictionary), and
   overflow-wrap:anywhere is the backstop for a language with no rules loaded.
   The size steps down with the card rather than being fixed, so the label has
   less to hyphenate on a phone in the first place. */
.partner-logo span{
  font-size:clamp(.74rem,1.6vw,.82rem);font-weight:600;line-height:1.35;
  max-width:22ch;text-wrap:balance;
  overflow-wrap:anywhere;hyphens:auto;
}

/* Frame, corners and padding all come from .cta-band in style.css now; this
   only supplies the ground. Square corners are the point — see that block. */
.partner-cta-band{background:linear-gradient(160deg,var(--navy),#132844);color:var(--white)}
.partner-cta-band h2{color:var(--white);margin-bottom:14px}
.partner-cta-band p{color:rgba(255,255,255,.75);max-width:560px;margin:0 auto 28px;font-size:1.08rem}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:start}
.contact-info .ci-item{display:flex;gap:16px;margin-bottom:28px}
.ci-icon{width:48px;height:48px;flex-shrink:0;border-radius:12px;background:var(--gold-soft);color:var(--brown);display:flex;align-items:center;justify-content:center}
.ci-icon i{font-size:1.4rem}
.ci-item h2{font-size:1.15rem;margin-bottom:4px}
.ci-item p,.ci-item a{font-size:.95rem;color:var(--ink-soft);line-height:1.6}
.ci-item a:hover{color:var(--gold)}
.contact-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-sm)}

/* ---------- CONSULTATION ---------- */
.consult-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,56px);align-items:start}
.consult-copy .prose{max-width:none}
.calendar-embed{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  min-height:560px;display:flex;align-items:center;justify-content:center;
  padding:20px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.calendar-placeholder{text-align:center;color:var(--ink-soft);max-width:360px}
.calendar-placeholder i{font-size:3rem;color:var(--gold);margin-bottom:16px}
.calendar-placeholder h2{margin-bottom:10px}
.calendar-placeholder code{background:var(--surface-2);padding:.2em .5em;border-radius:4px;font-size:.85em;color:var(--brown)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .tiers,.evtype-grid,.kh-grid,.knowledge-grid{grid-template-columns:1fr}
  .tiers{max-width:460px;margin-inline:auto}
  .apply-grid,.president-full,.contact-grid,.consult-grid{grid-template-columns:1fr;gap:36px}
  .value-grid,.reg-grid{grid-template-columns:1fr}
  .board-grid,.presence-grid,.partner-logos{grid-template-columns:repeat(2,1fr)}
  .president-full .pp-frame{max-width:380px}
}
@media (max-width:600px){
  .form-row{grid-template-columns:1fr}
  .board-grid,.presence-grid,.partner-logos{grid-template-columns:1fr 1fr}
  .event-row{grid-template-columns:1fr;text-align:left;gap:16px}
  .er-date{display:flex;align-items:baseline;gap:10px;border-right:none;border-bottom:1px solid var(--line);padding:0 0 12px}
  .event-row .btn{width:100%;justify-content:center}
}

/* ===== Premium mobile spacing — interior pages ===== */
@media (max-width:720px){
  /* More top room so the H1 is never tucked under the header on landing, and a
     mobile-scaled heading so long titles ("Membership & Partnership") sit fully
     inside the frame rather than being clipped. */
  .page-hero{padding-block:clamp(58px,15vw,86px) clamp(34px,8vw,52px)}
  /* Interior H1s only — the homepage monument is sized separately in
     css/home.css and is deliberately left exactly as it is. */
  .page-hero h1{font-size:clamp(2.1rem,7.6vw,2.75rem);line-height:1.14}
  .page-hero p{margin-top:14px;font-size:1rem}
  /* Even, comfortable gaps for stacked card grids */
  .value-grid,.reg-grid,.evtype-grid,.kh-grid,.tiers{gap:16px}
  .board-grid,.presence-grid,.partner-logos{gap:14px}
  /* The corner country-leaf was 56px bleeding off the card's top-right and got
     sliced flat by the card's overflow on the narrow mobile cards (the "chopped"
     leaves). Smaller and pulled fully inside, so each country's leaf reads whole. */
  .cc-leaf{width:42px;height:42px;top:10px;right:10px;opacity:.28}
  /* Breadcrumb a touch more room from the H1 */
  .breadcrumb{margin-bottom:18px}
  /* Forms: comfortable field rhythm */
  .field{margin-bottom:16px}
  /* Prose sections: a little more line room */
  .prose p{margin-bottom:16px}
}

/* === BEGIN generated: touch-life hover mirror (tools/mirror_hover.py) === */
/* Touch devices only. js/touch-life.js adds .tl-on to a component
   while it sits in the middle band of the screen, so scrolling is the
   gesture that a pointer cannot make. Do not edit by hand. */
.tier.tl-on{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--gold)}
.value-card.tl-on{border-color:var(--gold-soft);box-shadow:var(--shadow-md);transform:translateY(-4px)}
/* 01 Ledge Glow */
.country-card.tl-on{border-color:var(--gold);
  box-shadow:0 var(--hair) 0 var(--gold),0 6px 18px -10px rgba(10,23,40,.28);}
.country-card.tl-on::before, .country-card.tl-on::after{opacity:1;box-shadow:0 0 5px var(--gold-deep)}
.country-card.tl-on .cc-leaf{opacity:.9;transform:rotate(-5deg)}
@media (prefers-reduced-motion:reduce){.country-card.tl-on .cc-leaf{transform:rotate(4deg)}}
.kh-card.tl-on{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold-soft)}
.kh-card.tl-on .kh-link i{transform:translateX(4px)}
.partner-logo.tl-on{border-color:var(--gold);box-shadow:var(--shadow-sm)}
/* === END generated: touch-life hover mirror === */

/* ── Wizard: the parts the generic engine needs ─────────────────────────────
   js/wizard.js drives both the Contact enquiry and the Membership application.
   These are the pieces the older contact-only version never had. */

/* An error is written beside the field it belongs to and cleared the moment
   the reader types. Nothing scolds twice, and nothing is announced from the
   top of the form about a field four steps away. */
.wz-err{
  margin-top:6px;font-size:.8rem;color:#b23a26;display:flex;align-items:center;gap:.4em;
}
.wz-err::before{content:"";width:4px;height:4px;border-radius:50%;background:#b23a26;flex:0 0 auto}
.field select.wz-invalid,.field textarea.wz-invalid{border-color:#c0432f;box-shadow:0 0 0 3px rgba(192,67,47,.14)}

/* A pane that cannot be left because nothing is chosen gives one short nudge
   rather than an error message: there is no field to point at. */
.wz-nudge{animation:wzNudge .5s var(--ease)}
@keyframes wzNudge{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)} 45%{transform:translateX(5px)}
  70%{transform:translateX(-3px)} 88%{transform:translateX(2px)}
}

/* ── The review panel ───────────────────────────────────────────────────────
   The last thing before the ask is a summary of the reader's own answers, not
   a price arriving out of nowhere. It is set as a ruled list — the same
   hairlines the rest of the site uses — so it reads as a statement of record
   rather than as another form field. */
.wz-review{
  margin:2px 0 22px;padding:16px 18px;
  background:linear-gradient(180deg,#fffdf9,var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--edge-light);
}
.wz-rv-row{
  display:flex;align-items:baseline;gap:14px;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid var(--line-soft);
}
.wz-rv-row:last-child{border-bottom:0}
.wz-rv-k{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--ink-soft);flex:0 0 auto;
}
.wz-rv-v{font-family:var(--serif);font-size:1.02rem;color:var(--navy);text-align:right;min-width:0;overflow-wrap:anywhere}

/* The category cards on step 1 carry their price where the tier cards do. */
.wz-choice[data-price]{position:relative}
.wz-choice[data-price]::after{
  content:attr(data-price);position:absolute;top:14px;right:16px;
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--gold-deep);
}
.wz-choice[data-price] .wz-c-t,.wz-choice[data-price] .wz-c-s{padding-right:6.2em}

@media (max-width:520px){
  .wz-choice[data-price]::after{position:static;display:block;margin-top:4px;grid-column:2}
  .wz-choice[data-price] .wz-c-t,.wz-choice[data-price] .wz-c-s{padding-right:0}
  .wz-rv-row{flex-direction:column;gap:2px}
  .wz-rv-v{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .wz-nudge{animation:none}
}