/* ==========================================================================
   EIREA — design system
   Hand-written. No framework, no builder, no third-party runtime dependency.
   Type is self-hosted (see fonts.css). One reserved accent colour.

   MOBILE FIRST.
   The base layer is written for a 320–430px handset and is the complete
   design. Every @media query is min-width and only ADDS capacity as the
   viewport grows. There is exactly one max-width query in this file — a
   defensive fallback for sub-340px viewports — and it is marked as such.

   Tap targets are >=44px in the base layer. Form controls are >=16px in the
   base layer so iOS does not zoom on focus. Anchor targets clear the sticky
   masthead. Hover effects are gated behind @media (hover:hover).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#0d1418;
  --ink-2:#2f3b41;
  --muted:#66757f;
  --line:#e4e2dc;
  --line-strong:#cfccc4;
  --paper:#faf9f6;
  --card:#ffffff;
  --wash:#f2f1ec;
  --accent:#0d5852;
  --accent-2:#0a4640;
  --accent-wash:#e8efee;
  --on-accent:#f4faf9;
  /* listed but the agent has not verified themselves — a muted red, not an alarm */
  --unverified:#9a4a41;

  /* ---------- THE RESERVED COLOURS (owner, 7 Oct 2026) ----------
     Green and gold belong to the PAID rungs and to awards, and to nothing else.
     That reservation is what makes them mean something when they turn up — a
     free rung that borrowed one would devalue every paid badge on the page.
     Green is the house accent (#0d5852), which holds paper-coloured text on a
     solid block at 7.6:1; gold is tuned dark enough to do the same at 5.4:1. */
  --gold:#8a6a14;     /* Fellow   — F.EIREA */

  /* Award marks use a different DEVICE (rosette, not seal), so the colours
     never have to carry the distinction on their own. Silver and bronze are
     only ever used inside a rosette. */
  --silver:#5f6b74;
  --bronze:#8a5a35;

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --max:1340px;
  --gut:clamp(18px,5vw,44px);
  --r:2px;

  /* height of the sticky masthead + a little air, used to offset anchors */
  --mast:64px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{margin:0;padding:0;-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scroll-padding-top:calc(var(--mast) + 18px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;font-weight:400;font-optical-sizing:auto;
  overflow-x:clip;
  -webkit-tap-highlight-color:rgba(13,88,82,.14)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
a,button,label,.btn{touch-action:manipulation}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* anchors land clear of the sticky masthead — scroll-padding on the scroller
   does this on its own. Do NOT also add scroll-margin-top to targets: the two
   are additive and you get double the offset. */

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.wrap,.wrap-narrow{
  max-width:var(--max);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}
.wrap-narrow{max-width:920px}
section{padding:clamp(52px,8vw,132px) 0}
.section-line{border-top:1px solid var(--line)}
.grid{display:grid;gap:clamp(24px,3vw,56px)}
@media(min-width:900px){
  .g-2{grid-template-columns:1fr 1fr}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .g-split-r{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.018em;margin:0}
h1.display{font-size:clamp(2.15rem,6.8vw,5.25rem)}
h2.display{font-size:clamp(1.72rem,4.4vw,3.35rem)}
h3.display{font-size:clamp(1.32rem,2.7vw,2.05rem)}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);display:inline-block}
.lede{font-size:clamp(1.04rem,1.6vw,1.28rem);line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.measure{max-width:68ch}
.small{font-size:.88rem;color:var(--muted);line-height:1.6}
.rule-label{display:flex;align-items:center;gap:1.2rem;margin-bottom:clamp(26px,3.5vw,52px)}
.rule-label .ln{flex:1;height:1px;background:var(--line)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.005em;line-height:1.2;
  padding:.8em 1.5em;min-height:48px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:var(--r);cursor:pointer;text-align:center;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.on-dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.ghost-dark{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.28)}
.btn.lg{font-size:1.04rem;padding:.95em 1.7em;min-height:54px}

/* hover only where a real pointer exists — no sticky states on touch */
@media(hover:hover){
  .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
  .btn.on-dark:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .btn.ghost-dark:hover{border-color:var(--paper);color:var(--paper);background:transparent}
}

/* CTA rows stack full-width on a phone, become a row once there is room */
.cta-row{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;margin-top:2.1rem}
.cta-row .btn{width:100%}
@media(min-width:560px){
  .cta-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2.4rem}
  .cta-row .btn{width:auto}
}
.textlink{color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:1px;
  transition:color .25s var(--ease)}
@media(hover:hover){.textlink:hover{color:var(--accent-2)}}
/* A link that is the ONLY thing in its paragraph is a control, not running text —
   give it a real tap target. Inline links inside prose are untouched by this. */
p > .textlink:only-child{display:inline-flex;align-items:center;min-height:44px}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.94);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.75rem;flex:none;min-width:0;padding:.6rem 0;min-height:44px}
.brand .word{font-family:var(--serif);font-size:1.55rem;letter-spacing:.015em;line-height:1}
.brand .strap{font-family:var(--mono);font-size:.585rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);display:none}

.nav{display:none;gap:clamp(1.1rem,2vw,1.9rem);font-size:.925rem;align-items:center}
.nav a{color:var(--ink-2);transition:color .22s var(--ease);padding:.3rem 0}
@media(hover:hover){.nav a:hover{color:var(--accent)}}
.nav a[aria-current="page"]{color:var(--ink);font-weight:500}

.mast-actions{display:flex;align-items:center;gap:.5rem;flex:none}
.mast-actions .signin{display:none;font-size:.925rem;color:var(--ink-2)}
.mast-actions .btn{min-height:44px;padding:.55em 1.05em;font-size:.93rem}

.burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:0;padding:0;width:44px;height:44px;margin-right:-10px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobilenav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobilenav.open{display:block}
.mobilenav ul{list-style:none;margin:0;
  padding:.4rem max(var(--gut),env(safe-area-inset-left)) calc(1.4rem + env(safe-area-inset-bottom))}
.mobilenav li{border-bottom:1px solid var(--line)}
.mobilenav li:last-child{border-bottom:0}
.mobilenav a{display:flex;align-items:center;min-height:52px;font-size:1.02rem}
.mobilenav{max-height:calc(100vh - var(--mast));max-height:calc(100dvh - var(--mast));
  overflow-y:auto;-webkit-overflow-scrolling:touch}
body.nav-open{overflow:hidden}

@media(min-width:720px){.mast-actions .signin{display:inline}}
@media(min-width:980px){
  :root{--mast:76px}
  .masthead .bar{height:76px}
  .nav{display:flex}
  .burger{display:none}
  .mobilenav{display:none !important}
}
@media(min-width:1100px){.brand .strap{display:block}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(38px,6.5vw,96px);padding-bottom:clamp(46px,7.5vw,110px)}
.hero .eyebrow{margin-bottom:1.2rem}
.hero h1{max-width:19ch}
.hero .lede{margin-top:1.5rem}
.hero-meta{display:grid;gap:clamp(20px,3vw,48px);margin-top:clamp(40px,6vw,88px);
  padding-top:clamp(24px,3vw,42px);border-top:1px solid var(--line)}
@media(min-width:720px){.hero-meta{grid-template-columns:repeat(2,1fr)}}
.hero-meta .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.5rem}
.hero-meta .v{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.25}

/* ---------- card grid (hairline) ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  /* Rule 1: the block is the outset surface, not the cells. Downward only. */
  box-shadow:0 1px 2px rgba(13,20,24,.04),0 8px 22px rgba(13,20,24,.05)}
.card{background:var(--card);padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;gap:.85rem;
  transition:background .3s var(--ease)}
@media(hover:hover){.card:hover{background:#fdfcfa}}
.card .ic{width:32px;height:32px;color:var(--accent);margin-bottom:.4rem}
.card h3{font-size:1.11rem;font-weight:600;letter-spacing:-.008em;margin:0}
.card p{font-size:.945rem;color:var(--ink-2);margin:0}
@media(min-width:640px){.cards.c2{grid-template-columns:1fr 1fr}.cards.c3{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.cards.c3{grid-template-columns:repeat(3,1fr)}}

/* ---------- steps ---------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(13,20,24,.04),0 8px 22px rgba(13,20,24,.05)}
.step{background:var(--card);padding:clamp(24px,3vw,42px)}
.step .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;color:var(--accent)}
.step h3{margin:.8rem 0 .5rem;font-size:1.11rem;font-weight:600}
.step p{font-size:.94rem;color:var(--ink-2);margin:0}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps.one{grid-template-columns:1fr}

/* ---------- dark band ---------- */
.band{background:var(--ink);color:var(--paper)}
.band .eyebrow{color:#7fb5af}
.band h2.display,.band h3{color:var(--paper)}
.band p{color:#b6c1c6}
.band .hair{background:#202c32}
.band-grid{display:grid;gap:clamp(24px,3.5vw,52px);margin-top:clamp(30px,4vw,60px)}
.band-grid .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7fb5af;display:block;margin-bottom:.65rem}
.band-grid .v{font-size:.99rem;color:var(--paper);line-height:1.55}
.band-grid .v em{font-style:normal;color:#8a969b}
@media(min-width:780px){.band-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- value stack ---------- */
.vstack{border:1px solid var(--line);background:var(--card);border-radius:var(--r);overflow:hidden}
.vrow{display:flex;flex-direction:column;gap:.3rem;
  padding:1rem clamp(16px,2.4vw,30px);border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow .w{font-weight:500;font-size:.99rem}
.vrow .w span{display:block;font-weight:400;font-size:.845rem;color:var(--muted);margin-top:.22rem}
.vrow .r{font-family:var(--mono);font-size:.79rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(min-width:640px){
  .vrow{flex-direction:row;justify-content:space-between;gap:1.6rem;align-items:baseline;
    padding:1.05rem clamp(16px,2.4vw,30px)}
}
.vtotal{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.15rem clamp(16px,2.4vw,30px);background:var(--accent-wash);border:1px solid var(--accent-wash)}
.vtotal .l{font-size:.94rem;color:var(--ink-2)}
.vtotal .n{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2rem);color:var(--accent);line-height:1}

/* ---------- tiers ---------- */
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,52px)}
.tier{background:var(--card);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.tier.pick{background:#fdfcfa;box-shadow:inset 0 3px 0 var(--accent)}
.tier .grade{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);min-height:1.15em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.tier .tag{background:var(--accent-wash);color:var(--accent);padding:.2em .55em;border-radius:1px;
  letter-spacing:.12em}
.tier h3{font-family:var(--serif);font-size:1.68rem;font-weight:400;letter-spacing:-.01em;
  margin:.65rem 0 .2rem;line-height:1.1}
.tier .price{font-family:var(--serif);font-size:clamp(2.5rem,4vw,3rem);line-height:1;
  margin:1.1rem 0 .25rem;letter-spacing:-.02em}
.tier .price s{font-size:1.05rem;color:var(--muted);margin-left:.5rem;font-family:var(--sans)}
.tier .per{font-size:.8rem;color:var(--muted);font-family:var(--mono);letter-spacing:.03em;
  margin-bottom:1.2rem}
.tier .for{font-size:.925rem;color:var(--ink-2);margin:0 0 1.3rem}
.tier ul{list-style:none;margin:0 0 1.5rem;padding:0;font-size:.9rem;color:var(--ink-2)}
.tier li{padding:.42rem 0;border-top:1px solid var(--line);display:flex;gap:.6rem;align-items:flex-start}
.tier li:first-child{border-top:0}
.tier li svg{width:15px;height:15px;flex:none;margin-top:.28rem;color:var(--accent)}
.tier .btn{margin-top:auto;width:100%}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}.tiers.tiers-2{grid-template-columns:repeat(2,1fr)}.tier .for{min-height:3.2em}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:56px;padding:1.15rem 0;
  display:flex;justify-content:space-between;gap:1.2rem;align-items:center;
  font-weight:500;font-size:1rem;letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
@media(hover:hover){.faq summary:hover{color:var(--accent)}}
.faq summary .plus{font-family:var(--mono);color:var(--accent);flex:none;font-size:1.1rem;line-height:1;
  transition:transform .32s var(--ease)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{padding:0 0 1.5rem;max-width:74ch;color:var(--ink-2);font-size:.96rem}

/* ---------- forms ---------- */
.form{display:grid;gap:1.25rem;max-width:640px;width:100%}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
/* 1rem = 16px floor: anything smaller makes iOS Safari zoom the viewport on focus */
.field input,.field select,.field textarea{
  padding:.7em .9em;border:1px solid var(--line-strong);background:var(--card);border-radius:var(--r);
  font-size:max(1rem,16px);width:100%;min-height:50px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.field textarea{min-height:0;padding:.8em .9em}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.field .hint{font-size:.8rem;color:var(--muted)}
.form > .btn{width:100%}
@media(min-width:560px){.form > .btn{width:auto;justify-self:start}}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.check input{width:19px;height:19px;flex:none;margin-top:.2rem;accent-color:var(--accent)}
.formnote{font-size:.86rem;color:var(--muted);max-width:62ch}

/* checkbox grids — intrinsically multi-column, touch-sized rows.
   .checkgrid      : short labels (country names) — 2 up on a phone
   .checkgrid.two  : long labels — one per row on a phone          */
.checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.checkgrid .check{min-height:48px;padding:.35rem 0;align-items:center}
.checkgrid .check input{margin-top:0}
.checkgrid.two{grid-template-columns:1fr;gap:0}
@media(min-width:560px){.checkgrid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem}}
@media(min-width:820px){.checkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .checkgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.checkgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* defensive: an unusually narrow handset drops to a single column */
@media(max-width:339px){.checkgrid{grid-template-columns:1fr}}

fieldset{border:1px solid var(--line);border-radius:var(--r);
  padding:1rem max(1rem,4vw) 1.2rem;background:var(--card);margin:0}
legend{padding:0 .5rem}

/* ---------- compact category list (long sets) ---------- */
.catlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.catlist li{break-inside:avoid;padding:.55rem 0;border-bottom:1px solid var(--line);
  font-size:.93rem;color:var(--ink-2)}
.catlist li strong{color:var(--ink);font-weight:500}
@media(min-width:560px){.catlist{columns:2;column-gap:1.6rem}}
@media(min-width:980px){.catlist{columns:3;column-gap:clamp(24px,3vw,60px)}}

/* ---------- misc ---------- */
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-strong);
  padding:.35em .75em;border-radius:999px}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,44px);
  border-top:1px solid var(--line);padding-top:clamp(22px,3vw,38px);margin-top:clamp(30px,4vw,58px)}
.stat .n{font-family:var(--serif);font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1;color:var(--ink)}
.stat .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:.65rem;display:block}
@media(min-width:720px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.quote{border-left:2px solid var(--accent);padding-left:clamp(18px,2.5vw,32px)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.65rem);
  line-height:1.4;letter-spacing:-.01em}
.quote figcaption{margin-top:1rem;font-size:.87rem;color:var(--muted)}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--card);
  box-shadow:0 1px 2px rgba(13,20,24,.04),0 8px 22px rgba(13,20,24,.05);
  padding:1rem 1.1rem;border-radius:var(--r);font-size:.94rem;color:var(--ink-2)}
.breadcrumbs{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.4rem;line-height:1.7}
@media(hover:hover){.breadcrumbs a:hover{color:var(--accent)}}

/* ---------- prose (legal / long-form) ---------- */
.prose{max-width:74ch;font-size:1rem;line-height:1.7;color:var(--ink-2)}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.4vw,2rem);
  color:var(--ink);margin:2.4rem 0 .85rem;letter-spacing:-.012em;line-height:1.15}
.prose h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:1.8rem 0 .6rem}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);border-bottom:1px solid currentColor}
.updated{font-family:var(--mono);font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);line-height:1.8}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#8a969b;
  padding:clamp(46px,6.5vw,88px) 0 calc(2.25rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--ink)}
.footer .fgrid{display:grid;gap:clamp(26px,4vw,44px)}
.footer a{display:block;font-size:.92rem;padding:.55rem 0;min-height:44px;color:#8a969b;
  transition:color .22s var(--ease)}
@media(hover:hover){.footer a:hover{color:var(--paper)}}
.footer .word{font-family:var(--serif);font-size:1.55rem;color:var(--paper);margin-bottom:.7rem;line-height:1}
.footer .strap{font-family:var(--mono);font-size:.585rem;letter-spacing:.18em;text-transform:uppercase;
  color:#6c7a80;margin-bottom:1rem}
.footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--paper);font-weight:400;margin:0 0 .9rem}
.footer .legal{margin-top:clamp(32px,4.5vw,62px);padding-top:1.8rem;border-top:1px solid #1e2a30;
  font-size:.82rem;line-height:1.75;max-width:100ch}
.footer .legal p{margin-bottom:.9rem}
.footer .legal a{display:inline;padding:0;min-height:0;text-decoration:underline;text-underline-offset:2px}
@media(min-width:560px){.footer .fgrid{grid-template-columns:1fr 1fr}}
@media(min-width:820px){.footer .fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .72s var(--ease),transform .72s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@media print{
  .masthead,.footer,.cta-row{display:none}
  body{background:#fff;font-size:11pt}
}

/* ---------- the mark ---------- */
/* align-self keeps the mark centred without disturbing the baseline alignment
   the wordmark and strapline already rely on. */
.brand .mark{height:40px;width:40px;display:block;flex:none;align-self:center}
.footer .mark{height:20px;width:20px;display:block;margin-bottom:.7rem}
@media(min-width:1100px){.brand .mark{height:40px;width:40px}}

/* ---------- hero (homepage) ----------
   The homepage hero was a looping clip until 5 Oct 2026. It is now a still.
   The still uses the shared .hero--still shape (defined below) plus .hero--home
   for this page's own frame and band height. Nothing on the page depends on a
   video any more: the still is the LCP element and is preloaded in <head>, so
   there is no poster to paint first and no clip to keep off the critical path. */
.hero--still.hero--home{min-height:clamp(460px,62vh,720px);
  background-image:url("/assets/img/eirea-home-hero.jpg")}

/* ---------- markets: flag strip ----------
   Monochrome flags, one ink, four opacities. The whole set is drawn from
   currentColor, so every flag is genuinely black-and-white and the strip can
   be inverted later by changing one colour. Inline SVG, no sprite, no CDN,
   no third-party request -- nothing about the hero depends on anyone else's
   server staying up.

   28 flags divide cleanly into 7 columns (4 rows) and 14 columns (2 rows), so
   the strip always ends on a full row. No ragged tail.                      */
.flagband{padding-top:clamp(28px,3.6vw,50px);padding-bottom:clamp(36px,4.8vw,66px)}
.flagband .rule-label{margin-bottom:clamp(22px,3vw,42px)}
.flagrow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:clamp(12px,2.2vw,20px) clamp(8px,1.7vw,16px);
  align-items:center}
.flagrow li{display:flex;justify-content:center;line-height:0}
.flag{width:100%;max-width:42px;height:auto;aspect-ratio:3/2;
  color:var(--ink);opacity:.58;transition:opacity .3s var(--ease)}
@media(min-width:980px){.flagrow{grid-template-columns:repeat(14,1fr)}}
@media(hover:hover){.flagrow li:hover .flag{opacity:1}}

/* ---------- awards: the band photograph and the still hero ----------
   The awards band and the /enter hero now carry a photograph. Both follow the
   same discipline as the video hero: the image sits BEHIND a scrim, and the
   scrim -- never the image -- is what guarantees the copy its contrast.

   The masters are 1280x714, a re-encode rather than the original, so they are
   soft at desktop widths. That is carried deliberately: the scrim is weighted
   so the copy side of the band, and the foot of the hero, sit on the heaviest
   part of the gradient, which is where lost resolution shows least. A
   higher-resolution master replaces the file with no markup change.

   The image is applied with ::before and the scrim with ::after at negative
   z-index, so both paint above the band's own ink background and below all
   content. isolation:isolate keeps that contained to this element.          */
.band--media{position:relative;isolation:isolate;overflow:hidden}
.band--media::before{content:"";position:absolute;inset:0;z-index:-2;
  background-color:var(--ink);
  background-image:url("/assets/img/eirea-home-awards.jpg");
  background-position:center;background-size:cover;background-repeat:no-repeat}
.band--media::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(13,20,24,.95) 0%,rgba(13,20,24,.88) 38%,
    rgba(13,20,24,.70) 68%,rgba(13,20,24,.56) 100%)}

/* a page hero carrying a still rather than a clip -- deliberately the same
   shape as .hero--video, so the two share their scrim and contrast rules.
   The base rule carries NO image: the photograph is set per page below, so a
   further still hero is a class and a file, never a fork of this block. */
.hero--still{position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--ink);
  background-position:center;background-size:cover;background-repeat:no-repeat}

/* per-page still heroes. Add the class here AND the matching entry in the
   @supports block below -- miss either one and the WebP upgrade silently
   skips that page. */
.hero--still.hero--enter{background-image:url("/assets/img/eirea-enter-hero.jpg")}
/* The awards hero is its OWN frame, not the homepage band's. The band shows the
   room front-on from the far end; this is the elevated view down the central
   aisle, which is a different picture of the same evening -- the two are one
   click apart, so they must not read as the same shot twice. */
.hero--still.hero--awards{background-image:url("/assets/img/eirea-awards-hero.jpg");
  background-position:center}
/* The register hero is the flat grid: many identical bays, no horizon and no
   depth. Deliberately the opposite move to the homepage (symmetry + vanishing
   point), so /register and / cannot be mistaken for one another. */
.hero--still.hero--register{background-image:url("/assets/img/eirea-register-hero.jpg");
  background-position:center}
/* The membership hero is what is BEHIND the register page's closed doors: the
   empty industrial volume in flat daylight. The two pages are one click apart
   and read as a pair -- outside the building, then inside it. */
.hero--still.hero--membership{background-image:url("/assets/img/eirea-membership-hero.jpg");
  background-position:center}
/* The why hero is the only frame in the set with a real horizon: one building,
   alone in a flat plain under a vast sky. It is the deliberate counterpoint to
   the register grid, which was built with no horizon at all.
   Anchored to the BOTTOM, not the centre: the subject sits low in the frame
   (roofline ~71%, ground line ~82%), so `cover` with a centred position crops the
   top and bottom equally and slices the building off on a wide, short viewport.
   Pinning the bottom edge means any crop is taken from the sky, which is
   featureless, and the building can never be cut. */
.hero--still.hero--why{background-image:url("/assets/img/eirea-why-hero.jpg");
  background-position:center bottom}

/* The shared .hero--still scrim is bottom-heavy (.60 -> .90). That shape was
   inherited from the homepage video hero, where a meta row of copy sits at the
   bottom and needs the contrast. /why has no copy down there -- its copy is all
   at the top -- and its SUBJECT is at the bottom, so the heaviest band of the
   gradient was protecting nothing and burying the building. Measured: with the
   shared scrim the subject read at 3/10 against its background. This page gets a
   gradient that is heaviest where the type is and lifts towards the picture. */
.hero--still.hero--why::after{background:linear-gradient(180deg,
  rgba(13,20,24,.62) 0%,rgba(13,20,24,.50) 45%,rgba(13,20,24,.30) 100%)}
/* The courses hero is the specimen: ONE complete bay, studied close, where the
   register hero is a flat grid of many. Same building, opposite scale. */
.hero--still.hero--courses{background-image:url("/assets/img/eirea-courses-hero.jpg");
  background-position:center}
/* The about hero is the typology line: one roofline, varied bays, glazing and a
   personnel door across it -- many units held to one standard, which is the
   governance page's own argument ("the specialist is recognised as the
   specialist"). Distinct from the register grid, which is identical bays with
   NO sky; this one has a wide sky band above the building.
   Anchored to the CENTRE on purpose: measured, the building occupies 35-70% of
   the frame with sky above and forecourt below, so `cover` with a centred
   position keeps the roofline AND the loading bays in shot. A bottom anchor
   (the /why fix) would clip the roofline here -- that page's subject sits low,
   this one does not.
   The per-page scrim is the /why remedy: this hero has NO copy at the bottom,
   so the shared bottom-heavy gradient (.76 -> .90) was burying the building for
   nothing. Heaviest where the type is, lifting towards the picture. */
.hero--still.hero--about{background-image:url("/assets/img/eirea-about-hero.jpg");
  background-position:center}
.hero--still.hero--about::after{background:linear-gradient(180deg,
  rgba(13,20,24,.66) 0%,rgba(13,20,24,.52) 42%,rgba(13,20,24,.30) 100%)}

/* the copy on a still hero sits on a dark photograph, so the meta row needs
   the same inversion the video hero gets */
.hero--still .hero-meta{border-top-color:rgba(250,249,246,.22)}
.hero--still .hero-meta .k{color:#a9b6bc}
.hero--still .hero-meta .v{color:var(--paper)}

/* WebP where it is understood; the plain url() above is the base, so a browser
   that cannot parse image-set() silently keeps the JPEG. The enhancement has no
   failure path -- it cannot break the page it improves. Roughly halves the
   weight: 116 KB vs 152 KB for the band, 43 KB vs 92 KB for the hero.

   No AVIF entry: this box's Pillow (12.3.0) has no AVIF encoder, so the format
   the brief prefers cannot be produced here yet. Add it to this list the moment
   it can -- image-set takes any number of candidates in preference order.     */
@supports (background-image:image-set(url("/assets/img/eirea-enter-hero.webp") type("image/webp"))) {
  .hero--still.hero--home{background-image:image-set(
    url("/assets/img/eirea-home-hero.webp") type("image/webp"),
    url("/assets/img/eirea-home-hero.jpg") type("image/jpeg"))}
  .band--media::before{background-image:image-set(
    url("/assets/img/eirea-home-awards.webp") type("image/webp"),
    url("/assets/img/eirea-home-awards.jpg") type("image/jpeg"))}
  .hero--still.hero--enter{background-image:image-set(
    url("/assets/img/eirea-enter-hero.webp") type("image/webp"),
    url("/assets/img/eirea-enter-hero.jpg") type("image/jpeg"))}
  .hero--still.hero--awards{background-image:image-set(
    url("/assets/img/eirea-awards-hero.webp") type("image/webp"),
    url("/assets/img/eirea-awards-hero.jpg") type("image/jpeg"))}
  .hero--still.hero--register{background-image:image-set(
    url("/assets/img/eirea-register-hero.webp") type("image/webp"),
    url("/assets/img/eirea-register-hero.jpg") type("image/jpeg"))}
  .hero--still.hero--membership{background-image:image-set(
    url("/assets/img/eirea-membership-hero.webp") type("image/webp"),
    url("/assets/img/eirea-membership-hero.jpg") type("image/jpeg"))}
  .hero--still.hero--why{background-image:image-set(
    url("/assets/img/eirea-why-hero.webp") type("image/webp"),
    url("/assets/img/eirea-why-hero.jpg") type("image/jpeg"))}
  .hero--still.hero--courses{background-image:image-set(
    url("/assets/img/eirea-courses-hero.webp") type("image/webp"),
    url("/assets/img/eirea-courses-hero.jpg") type("image/jpeg"))}
  .hero--still.hero--about{background-image:image-set(
    url("/assets/img/eirea-about-hero.webp") type("image/webp"),
    url("/assets/img/eirea-about-hero.jpg") type("image/jpeg"))}
}
.hero--still::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,20,24,.60) 0%,rgba(13,20,24,.76) 58%,
    rgba(13,20,24,.90) 100%)}
.hero--still .hero-inner{position:relative;z-index:2}
.hero--still .display,
.hero--still .lede{color:var(--paper)}
.hero--still .eyebrow{color:#a9b6bc}
.hero--still .btn.ghost{color:var(--paper);border-color:rgba(250,249,246,.42)}
@media(hover:hover){.hero--still .btn.ghost:hover{border-color:var(--paper)}}
/* A text link inside a still hero sits on the photograph, so it cannot use the
   dark accent green — on the ink scrim that is effectively invisible. It reads
   as paper, held slightly back from the buttons beside it so it stays a third
   voice rather than competing with them. */
.hero--still .textlink{color:var(--paper);opacity:.85}
@media(hover:hover){.hero--still .textlink:hover{color:var(--paper);opacity:1}}
/* In a CTA row a text link is a control, not running prose — give it the same
   44px tap target as the buttons it stands beside, and centre it with them. */
.cta-row .textlink{display:inline-flex;align-items:center;min-height:44px}

/* on a handset the copy sits on the image rather than beside it, so the scrim
   has to work in both directions at once */
@media(max-width:700px){
  .band--media::after{background:linear-gradient(180deg,rgba(13,20,24,.92) 0%,
    rgba(13,20,24,.87) 100%)}
  .hero--still::after{background:linear-gradient(180deg,rgba(13,20,24,.66) 0%,
    rgba(13,20,24,.91) 100%)}
}

/* ============================================================
   THE MARK SYSTEM — membership rungs, award marks, credentials
   Shared across pages (register, membership, awards, courses), so it
   lives here rather than in a page-scoped sheet. Moved out of
   register.css 7 Oct 2026, when the awards and course credentials
   gained a presence on their own pages.
   ============================================================ */
.status{display:inline-flex;align-items:center;gap:.42em;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;padding:.26em .52em;border-radius:var(--r);white-space:nowrap}
/* ---------- the four rungs (owner, 7 Oct 2026) ----------
   Unconfirmed  compiled from public sources; nobody has touched it  → muted red
   Confirmed    a free account: they signed up and confirmed/corrected their
                own record                                              → ink
   Verified · Member   paid account, €15/month  → SOLID GREEN block, seal + tick
   Verified · Fellow   paid account, €25/month, billed annually (€300 in advance)
                                                → SOLID GOLD block, seal + tick
                                                  + chevron

   "Verified" is the PAID standing — both paid rungs are Verified, and they are
   told apart by the BADGE they carry: Member (green tick) or Fellow (gold
   tick). The free rungs are never described as Verified.

   Every rung owns a different word AND a different device, so the two paid
   rungs are never one badge in two colours:

     Unconfirmed      word "Unconfirmed",  no device
     Confirmed        word "Confirmed",    no device
     Member           word "Member",       seal + tick            (green)
     Fellow           word "Fellow",       seal + tick + chevron  (gold)

   The paid rungs are SOLID BLOCKS, not outlines. That is the visual promise an
   agent is buying: a filled mark, unmistakable in a screenshot, an email
   signature or a colleague's register entry. Free rungs are never filled, and
   the block carries the badge word, so it is legible as status even in
   greyscale — where the colour is gone, the FILL remains. */
.status--unconfirmed{color:var(--unverified)}
.status--confirmed{color:var(--ink-2)}
/* The qualifying line under a FREE rung. It states the two things a buyer
   needs and nothing else: the agent is not verified, and the specialism has
   not been confirmed. It is the reason an agent claims their entry, so it must
   be legible in a result row — not a whisper. Owner-approved wording. */
.status-note{display:block;margin-top:.34em;max-width:30ch;font-family:var(--sans,inherit);
  font-size:.72rem;line-height:1.35;letter-spacing:.01em;color:var(--unverified)}
.status--confirmed + .status-note{color:var(--ink-2)}
.status--member{color:var(--paper);background:var(--accent);border-color:var(--accent)}
.status--fellow{color:var(--paper);background:var(--gold);border-color:var(--gold)}
/* The badge is a device, not a glyph: at the pill's own 9px it collapses into a
   blob and the scallops vanish entirely (measured, 7 Oct 2026 — 15px is the
   smallest size where the lobes still read). So it is sized in em but floored
   well above the label's own type. */
.status-tick{display:inline-flex;width:1.5em;height:1.5em;flex:none}
.status-tick svg{width:100%;height:100%;display:block}
.status-tick .bd-shape{fill:currentColor}
.status-tick .bd-tick{fill:none;stroke:var(--paper);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
/* On a solid block currentColor is the paper text, so the device inverts:
   paper shape, metal tick. Without this the seal disappears into the fill. */
.status--member .bd-shape,.status--fellow .bd-shape{fill:var(--paper)}
.status--member .bd-tick{stroke:var(--accent)}
.status--fellow .bd-tick{stroke:var(--gold)}
/* The Fellow's second device. A tick alone would make Fellow "Member in a
   different colour", which is the failure the distinctness rule forbids — so
   the Fellow seal carries a chevron beneath the tick as well. */
.status-chev{display:inline-flex;width:1.5em;height:1.5em;flex:none}
.status-chev svg{width:100%;height:100%;display:block}
.status-chev .cv{fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- award marks (rosette device) ----------
   Deliberately a different device family from the membership seal: an award
   cannot be mistaken for a subscription, and a subscription cannot be
   mistaken for an award. Winner / Highly Commended / Commended differ by
   ribbon bars and metal, so the three places never read as one mark. */
.amark{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid currentColor;padding:.26em .52em;border-radius:var(--r);white-space:nowrap}
.amark svg{width:1.35em;height:1.35em;flex:none}
.amark .rs{fill:currentColor}
.amark .rb{fill:none;stroke:var(--paper);stroke-width:2.2;stroke-linecap:round}
.amark--winner{color:var(--gold)}
.amark--hc{color:var(--silver)}
.amark--commended{color:var(--bronze)}
/* The Winner is filled — first place is not a shade of second place. */
.amark--winner{color:var(--paper);background:var(--gold);border-color:var(--gold)}
.amark--winner .rb{stroke:var(--gold)}

/* ---------- training credentials (chevron device) ----------
   Course badges and the EIPP credential. A third device family again: a
   narrow chevron chip, so a course completion can never be read as a
   membership rung or an award place. */
.cred{display:inline-flex;align-items:center;gap:.42em;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);border:1px solid currentColor;padding:.26em .52em;
  border-radius:var(--r);white-space:nowrap}
.cred svg{width:1.2em;height:1.2em;flex:none}
.cred .ch{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cred--eipp{color:var(--ink);border-style:double;border-width:3px}
.creds{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}

/* ---------- language switcher + detector ----------
   Injected into the masthead by site.js, so the control lives in ONE file
   rather than being pasted into 18 duplicated headers. Deliberately small and
   mono: it reads as site chrome, not as a call to action — Join is the action,
   this is a utility. */
.langpick{position:relative;flex:none}
.langbtn{display:inline-flex;align-items:center;gap:.32em;background:none;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5em .5em;min-height:38px}
.langbtn:hover{border-color:var(--ink-2);color:var(--ink)}
.langbtn[aria-expanded="true"]{background:var(--wash);border-color:var(--ink-2);color:var(--ink)}
.langbtn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}

.langpanel{position:absolute;top:calc(100% + .5rem);right:0;z-index:70;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:0 14px 34px rgba(13,20,24,.16);padding:.7rem .55rem .5rem;
  width:min(78vw,250px);max-height:min(66vh,430px);overflow:auto}
.langhead{margin:0 0 .45rem .55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.langlist{list-style:none;margin:0;padding:0}
.langlist li{margin:0}
.langlist a,.langlist .soon{display:flex;align-items:baseline;justify-content:space-between;
  gap:.7rem;padding:.42rem .55rem;border-radius:calc(var(--r) - 1px);text-decoration:none}
.langlist a{color:var(--ink)}
.langlist a:hover{background:var(--wash)}
.langlist a.cur{background:var(--accent-wash)}
.langn{font-size:.92rem;line-height:1.2}
.lange{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.langlist .soon{color:var(--muted)}
.langlist .soon .langn{opacity:.62}
.lange em{display:block;font-style:normal;color:var(--silver);letter-spacing:.08em}

/* the detector's offer bar — a slim, dismissible strip above the content */
.langoffer{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  background:var(--accent-wash);border-bottom:1px solid var(--line);
  padding:.85rem clamp(18px,4vw,40px);font-size:.92rem;color:var(--ink-2)}
.langoffer b{font-weight:600;color:var(--ink)}
.langoffer .lb-yes{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px;text-decoration:none}
.langoffer .lb-no{background:none;border:0;cursor:pointer;color:var(--muted);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.3em 0;border-bottom:1px solid transparent}
.langoffer .lb-no:hover{color:var(--ink);border-bottom-color:var(--line-strong)}

@media(max-width:420px){
  .langbtn span{display:none}       /* globe only on the narrowest phones */
}