/* Palette, second pass (23 Sep 2026): royal blue and purple, at the client's
   request. The token NAMES are historical — --cream, --sand, --tan and so on
   were literal when the palette was warm. They are kept because they are used
   in five stylesheets and renaming them buys nothing, but read them by role:

     --cream    page ground        --ink       body text and borders
     --sand     hover surface      --ink-70    secondary text
     --pale     panel fill         --ink-40    muted / disabled
     --sage     line on dark       --tan       accent fill, dark text on it
     --tan-deep links and marks    --warn      errors, never the brand

   Every pair was checked against WCAG AA before shipping; the accessibility
   page claims AA, so a future change to these values has to be re-checked. */

/* ==========================================================================
   Karen Vella — EU Rights Advisory
   Theme stylesheet. Single visual world: pale cool ground, royal blue ink,
   purple accent. Bold editorial, mobile-first.
   ========================================================================== */

:root{
  /* Brand palette (client-supplied) */
  --cream:  #f6f7fd;
  --sand:   #e6ebfa;
  --sage:   #b9c2e8;
  --pale:   #eceffb;
  --tan:    #b9a3f0;

  /* Derived neutrals — biased warm-olive so they read as chosen */
  --ink:     #1a2a6b;
  --ink-70:  #46548f;
  --ink-40:  #7b87ba;
  --tan-deep:#5b2fb8;
  --lilac:   #ece7fa;   /* second surface tint, and the client's own voice */

  /* A warning must never be the brand colour, or "something is wrong" and
     "this is a button" end up looking the same. Terracotta used to do both
     jobs; purple cannot. */
  --warn:    #b3261e;

  /* Semantic */
  --bg: var(--cream);
  --fg: var(--ink);
  --muted: var(--ink-70);
  --line: var(--ink);
  --accent: var(--tan);

  /* Type */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(1rem, 4vw, 3rem);
  --maxw: 1180px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 4px;

  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }

/* A <button> does not inherit colour: unstyled, it takes the browser's own
   button text, which is not reliably dark and on a device in dark mode can
   come out near-white on these pale fills. Two buttons were shipped that way.
   This makes inheriting the deliberate choice rather than the accident. */
button{ color: inherit; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p{ margin: 0; }
a{ color: inherit; }

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

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; font-family: var(--mono); font-size: .8rem;
}
.skip-link:focus{ left: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section{ padding-block: clamp(3.5rem, 9vw, 7rem); }
.section--tight{ padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before{
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--tan-deep);
  flex: none;
}
.eyebrow--plain::before{ display: none; }

.section-head{
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: 46ch;
}
.section-head h2{ font-size: clamp(2rem, 5.5vw, 3.6rem); }
.section-head p{ color: var(--muted); font-size: 1.0625rem; max-width: 52ch; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{ transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active{ transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.btn--accent{ background: var(--tan); color: var(--ink); }
.btn--ghost{ background: transparent; color: var(--ink); box-shadow: none; }
.btn--ghost:hover{ background: var(--sand); box-shadow: var(--shadow-sm); }
.btn--sm{ padding: .6rem 1.15rem; font-size: .9rem; }
.btn--lg{ padding: 1.1rem 2rem; font-size: 1.0625rem; }
.btn[disabled]{ opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.site-header{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
}
.site-header__inner{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
  padding-block: .75rem;
}
.brand{
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark{
  inline-size: 38px; block-size: 38px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tan);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 800; font-size: .95rem;
  letter-spacing: -0.04em;
  flex: none;
}
.brand__name{ font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; line-height: 1.05; }
.brand__role{ font-family: var(--mono); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }

.site-nav{ display: flex; align-items: center; gap: 1.5rem; }

/* A fifth item arrived with the news listing, and between the point where the
   hamburger takes over and about 1100px five of them wrapped to a second row —
   which pushed the header from 80px to 108px on exactly the laptops where
   vertical space is tightest. Closing the gap a little fits them back on one
   line without touching anything above that width. */
@media (max-width: 1100px){
  .site-nav{ gap: 1.05rem; }
  .site-nav a{ font-size: .9rem; }
}

/* The last stretch before the hamburger takes over at 820, where the logo and
   its strapline leave the least room. */
@media (max-width: 1024px){
  .site-nav{ gap: .8rem; }
  .site-nav a{ font-size: .86rem; }
}

@media (max-width: 950px){
  .site-nav{ gap: .6rem; }
  .site-nav a{ font-size: .82rem; }

  /* Below this the nav links are already at 13px, and shrinking them further
     to buy room would be trading a readable menu for a tidy header. The
     strapline goes instead: it repeats what the page says in its first
     screenful, where the menu does not. It is back the moment there is room,
     and the hamburger takes over at 820 anyway. */
  .brand__role{ display: none; }
}
.site-nav a{
  font-size: .95rem; font-weight: 600; text-decoration: none;
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover{ border-bottom-color: var(--tan-deep); }

/* The account control. An icon on desktop — signing in is a utility, not a
   section of the site — and a labelled row once the menu stacks on mobile,
   where an unlabelled circle among words reads as a mistake. */
.account{ position: relative; }

.account-btn{
  display: inline-grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  padding: 0 !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}
.account-btn:hover{ background: var(--sand); }
.account-btn[aria-expanded="true"]{ background: var(--tan); }
.account-btn__icon{ inline-size: 21px; block-size: 21px; }
/* The count on the icon. Absolutely placed against the button rather than
   pushed into its layout, because the button is a fixed circle on desktop and
   a full-width row on mobile, and a badge that moves the icon looks like a
   misprint in one of those two. */
.account-btn{ position: relative; }

.account-btn__badge{
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  display: grid; place-items: center;
  min-inline-size: 19px; block-size: 19px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid var(--cream);
  background: var(--warn); color: #fff;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  line-height: 1;
}

.account-btn__text{
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.account__menu{
  position: absolute;
  top: calc(100% + .6rem); right: 0;
  z-index: 70;
  display: grid;
  min-inline-size: 12rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.account__menu[hidden]{ display: none; }
.account__menu a{
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--sage) !important;
  font-size: .95rem; font-weight: 600;
}
.account__menu a:last-child{ border-bottom: 0 !important; }
.account__menu a:hover{ background: var(--sand); }

.nav-toggle{ display: none; }

@media (max-width: 860px){
  .site-nav{
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    top: 68px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-top: 2px solid var(--ink);
    padding: var(--gutter);
    padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .site-nav a{ padding-block: .9rem; border-bottom: 1px solid var(--sage); font-size: 1.1rem; }
  .site-nav .btn{ margin-top: 1rem; }

  /* Stacked, an unlabelled circle among full-width rows reads as a mistake,
     so the label comes back and the menu stops floating. */
  .account{ display: contents; }
  .account-btn{
    display: flex; align-items: center; gap: .7rem;
    inline-size: 100%; block-size: auto;
    border: 0 !important;
    border-bottom: 1px solid var(--sage) !important;
    border-radius: 0;
    background: transparent;
    padding: .9rem 0 !important;
    font-size: 1.1rem; font-weight: 600;
    text-align: left;
  }
  .account-btn:hover, .account-btn[aria-expanded="true"]{ background: transparent; }
  .account-btn__icon{ inline-size: 22px; block-size: 22px; flex: none; }
  .account-btn__text{
    position: static; inline-size: auto; block-size: auto;
    margin: 0; overflow: visible; clip-path: none;
  }
  /* Stacked, the button is a full-width row, so a badge pinned to its corner
     would float out by the screen edge with nothing under it. It joins the
     label instead. */
  .account-btn__badge{
    position: static;
    margin-inline-start: .1rem;
    border-color: transparent;
  }
  .account__menu{
    position: static;
    border: 0; border-radius: 0;
    box-shadow: none; background: transparent;
    min-inline-size: 0;
  }
  .account__menu a{ padding: .9rem 0 .9rem 2rem; }
  .nav-toggle{
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--sand);
    /* Explicit, not inherited: a bare <button> takes the browser's own text
       colour, which is not reliably dark — on a device in dark mode it can
       come out near-white on this pale pill and all but disappear. */
    color: var(--ink);
    border: 2px solid var(--ink); border-radius: 999px;
    padding: .55rem 1rem; font-family: var(--mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
/* --------------------------------------------------------------------------
   The map

   It replaces the pale disc that used to fill this corner. The disc was a
   shape; this is the same weight of mark saying something — which of the
   countries on it she works in.

   Three tones, and the order matters more than the values: member states
   clearly ahead, the EEA and Switzerland a step back, neighbours barely there.
   Flatten that and it stops being a statement and becomes wallpaper.
   -------------------------------------------------------------------------- */

.euromap{
  position: absolute;
  /* Anchored to the right and running past the fold, so the card covers
     central Europe and the rest reads round it — Scandinavia above, Iberia and
     the Mediterranean below. Sized to the card would leave only a sliver. */
  inset-inline-end: -13vw;
  inset-block-start: -11vw;
  inline-size: min(64vw, 900px);
  block-size: auto;
  z-index: -1;
  pointer-events: none;
}

.euromap .eu{ fill: var(--tan); opacity: .5; }
.euromap .eea{ fill: var(--sage); opacity: .5; }
.euromap .rest{ fill: var(--sage); opacity: .22; }

@media (max-width: 960px){
  /* Stacked, there is no empty column to sit in and the headline runs the full
     width, so it goes up and out: the mass ends up beside the eyebrow and the
     first line rather than under the paragraph. Fainter too — the text is over
     it here, and passing AA is the floor, not the aim. */
  .euromap{
    inset-inline-end: -34vw;
    inset-block-start: -20vw;
    inline-size: 112vw;
  }
  .euromap .eu{ opacity: .26; }
  .euromap .eea{ opacity: .22; }
  .euromap .rest{ opacity: .1; }
}

@media (prefers-contrast: more){
  /* Anything behind text is the first thing to go when somebody has asked the
     system for more contrast. */
  .euromap{ display: none; }
}

.hero__grid{
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 960px){
  .hero__grid{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
}

.hero h1{
  font-size: clamp(2.4rem, 7.2vw, 4.4rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
}
@media (min-width: 960px){
  .hero h1{ font-size: clamp(3rem, 4.4vw, 4.2rem); max-width: 15ch; }
}
.hero h1 .mark{
  background: var(--tan);
  padding: 0 .18em .06em;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero h1 .under{
  background-image: linear-gradient(var(--sage), var(--sage));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.28em;
}
.hero__lede{
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 44ch;
}
.hero__actions{
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin-top: 2.2rem;
}
.hero__note{
  margin-top: 1.2rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--ink-70);
}

/* Hero side card — a real worked example, not decoration */
.case-card{
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.case-card__bar{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ink); color: var(--cream);
  padding: .7rem 1.1rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
}
.case-card__body{ padding: 1.35rem 1.35rem 1.5rem; display: grid; gap: 1rem; }
.case-card__q{ font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.025em; }
.case-card__meta{ display: grid; gap: .55rem; }
.case-row{
  display: flex; gap: .75rem; align-items: baseline;
  font-size: .9rem;
  padding-block: .45rem;
  border-top: 1px solid rgba(26,42,107,.18);
}
.case-row dt{ font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); inline-size: 8.5rem; flex: none; }
.case-row dd{ margin: 0; font-weight: 600; }
/* The line that says the card is an illustration. Quiet, but on the card
   itself rather than in a footnote — a disclaimer somewhere else is not a
   disclaimer. */
.case-card__note{
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-70);
  border-top: 1px solid rgba(26,42,107,.18);
  padding-top: .7rem;
}

.status-pill{
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--sage);
  /* The pill is a light chip on a DARK card, so it must not inherit the
     card's light text — that was white on pale blue at 1.6:1. */
  color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: .15rem .6rem; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
.status-pill::before{ content:""; inline-size:7px; block-size:7px; border-radius:50%; background: var(--tan-deep); }

/* --------------------------------------------------------------------------
   Marquee — the topics, stated plainly
   -------------------------------------------------------------------------- */

.marquee{
  background: var(--ink);
  color: var(--cream);
  border-block: 2px solid var(--ink);
  padding-block: .9rem;
  overflow: hidden;
  display: flex;
  user-select: none;
}
.marquee__track{
  display: flex;
  flex: none;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation: slide 38s linear infinite;
  will-change: transform;
}
.marquee span{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex; align-items: center; gap: 2.5rem;
}
.marquee span::after{ content: "●"; color: var(--tan); font-size: .5em; }
@keyframes slide{ to{ transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
  .marquee{ overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Situations — "sound like you?"
   -------------------------------------------------------------------------- */

.situations{ background: var(--pale); border-bottom: 2px solid var(--ink); }
.situation-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.situation{
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  display: grid;
  gap: .8rem;
  align-content: start;
}
.situation__quote{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.situation__who{
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-70);
}
.situation__law{
  font-size: .88rem; color: var(--ink-70);
  border-top: 1px solid var(--sage); padding-top: .8rem;
}
.situation__law strong{ color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.cat-grid{
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.cat{
  position: relative;
  display: grid;
  gap: .75rem;
  align-content: start;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.cat:hover, .cat:focus-visible{ transform: translate(-3px, -3px); box-shadow: var(--shadow); }
.cat:nth-child(8n+1){ background: var(--sand); }
.cat:nth-child(8n+3){ background: var(--pale); }
/* A surface tint, not the edge colour: --sage is dark enough that --ink-70
   secondary text on it fell to 4.08. */
.cat:nth-child(8n+6){ background: var(--lilac); }
.cat:nth-child(8n+8){ background: var(--sand); }
.cat__code{
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-70);
}
.cat__name{ font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.02; }
.cat__list{ margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-70); }
.cat__list li{ display: flex; gap: .5rem; }
.cat__list li::before{ content: "→"; color: var(--tan-deep); flex: none; }
.cat__go{
  margin-top: .4rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 500;
  display: flex; align-items: center; gap: .4rem;
}
@media (prefers-reduced-motion: reduce){ .cat:hover{ transform: none; } }

/* --------------------------------------------------------------------------
   Process — a genuine sequence, so it is numbered
   -------------------------------------------------------------------------- */

.process{ background: var(--ink); color: var(--cream); }
.process .section-head h2{ color: var(--cream); }
.process .section-head p{ color: var(--sage); }
.process .eyebrow{ color: var(--sage); }
.process .eyebrow::before{ background: var(--tan); }

/* Rules between steps come from the 2px gap showing the container through,
   so any number of steps works and wrapping stays tidy. */
.steps{
  display: grid;
  gap: 2px;
  background: var(--cream);
  border: 2px solid var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 820px){
  .steps{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.step{
  background: var(--ink);
  padding: 1.75rem 1.5rem 2rem;
  display: grid; gap: .7rem; align-content: start;
}
.step__n{
  font-family: var(--display); font-weight: 800;
  font-size: 3.2rem; line-height: .85; letter-spacing: -0.05em;
  color: var(--tan);
}
.step h3{ font-size: 1.35rem; color: var(--cream); }
.step p{ color: var(--sage); font-size: .95rem; }
.step__time{
  margin-top: .4rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream);
  border: 1.5px solid var(--sage); border-radius: 999px;
  padding: .2rem .65rem; justify-self: start;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about__grid{
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px){ .about__grid{ grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); } }

.portrait{
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--sage);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.portrait__initials{
  font-family: var(--display); font-weight: 800;
  font-size: clamp(4rem, 12vw, 7rem); letter-spacing: -0.06em;
  color: var(--ink); opacity: .22;
}
.portrait__tag{
  position: absolute; inset-inline-start: 0; inset-block-end: 0;
  background: var(--ink); color: var(--cream);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .5rem .9rem;
}

.about__body{ display: grid; gap: 1.5rem; }
.about__body h2{ font-size: clamp(2rem, 5vw, 3.2rem); }
.about__body p{ color: var(--ink-70); }
.creds{ display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.creds li{
  display: flex; gap: 1rem; align-items: baseline;
  padding-block: .85rem;
  border-bottom: 1px solid var(--sage);
  font-size: .95rem;
}
.creds b{ font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); inline-size: 6.5rem; flex: none; font-weight: 500; }

/* Qualifications.
   Two columns where there is room, because seven items in one column is a
   long thin stack next to a block of prose. Mono and small: this is a record,
   not a sales section, and it should read as one. */
.quals{ margin-top: 1.75rem; }

.quals__label{
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: .7rem;
}

.quals__list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .35rem .5rem;
  font-size: .9rem;
  color: var(--ink-70);
}

.quals__list li{ display: flex; gap: .55rem; }
.quals__list li::before{ content: "—"; color: var(--sage); flex: none; }

@media (min-width: 620px){
  /* Down one column then down the next, rather than left-right-left-right.
     A list of degrees is read top to bottom: flowing by row scatters her
     chronology across two columns and strands the last one on its own. */
  .quals__list{
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: 1.75rem;
    align-content: start;
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq{ background: var(--sand); border-block: 2px solid var(--ink); }
.faq__list{ display: grid; gap: .75rem; max-width: 64ch; }
.faq details{
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  overflow: hidden;
}
.faq summary{
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.2rem;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  font-family: var(--mono); font-size: 1.4rem; line-height: 1;
  color: var(--tan-deep); flex: none;
}
.faq details[open] summary::after{ content: "–"; }
.faq details[open] summary{ background: var(--pale); border-bottom: 2px solid var(--ink); }
.faq__a{ padding: 1.1rem 1.2rem; color: var(--ink-70); font-size: .97rem; }
.faq__a p + p{ margin-top: .75rem; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.closing{ text-align: center; }
.closing h2{ font-size: clamp(2.3rem, 8vw, 5rem); letter-spacing: -0.045em; }
.closing p{ margin: 1.25rem auto 0; color: var(--ink-70); max-width: 46ch; font-size: 1.1rem; }
.closing .btn{ margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer{
  background: var(--ink);
  color: var(--sage);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.site-footer a{ color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(246,247,253,.3); }
.site-footer a:hover{ border-bottom-color: var(--tan); }
.footer__grid{
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(185,194,232,.28);
}
.footer__grid h3{ color: var(--cream); font-size: 1rem; margin-bottom: .9rem; }
.footer__grid ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.footer__brand p{ font-size: .92rem; margin-top: .8rem; max-width: 32ch; }
.footer__bottom{
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-top: 1.5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase;
}
/* The office address. An <address> element because that is what it is, and
   normal weight because it is information, not a design flourish. */
.footer__address{
  font-style: normal;
  line-height: 1.5;
}

.footer__responsible{
  margin-top: 1.25rem;
  font-size: .8rem;
  color: rgba(185,194,232,.75);
}

.footer__disclaimer{
  margin-top: 1.5rem; font-size: .8rem; line-height: 1.5;
  color: rgba(185,194,232,.75); max-width: 70ch;
}

/* ==========================================================================
   Enquiry flow
   ========================================================================== */

.enquiry-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.enquiry-overlay[hidden]{ display: none !important; }

.enquiry__bar{
  position: sticky;
  top: 0;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  z-index: 2;
}
.enquiry__bar-inner{
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px; padding-block: .6rem;
}
.enquiry__title{
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -0.03em; margin-right: auto;
}
.enquiry__close{
  border: 2px solid var(--ink); background: var(--cream);
  color: var(--ink);   /* not the browser's default button text — see .nav-toggle */
  border-radius: 999px;
  padding: .45rem 1rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.enquiry__close:hover{ background: var(--sand); }

.progress{ display: grid; gap: .5rem; padding-bottom: .75rem; }
.progress__track{
  block-size: 6px; background: var(--pale);
  border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden;
}
.progress__fill{
  block-size: 100%; inline-size: 20%;
  background: var(--tan);
  transition: inline-size .3s ease;
}
@media (prefers-reduced-motion: reduce){ .progress__fill{ transition: none; } }
.progress__label{
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-70);
  display: flex; justify-content: space-between; gap: 1rem;
}

.enquiry__body{ padding-block: clamp(2rem, 6vw, 3.5rem) 8rem; }
.step-panel[hidden]{ display: none !important; }
.step-panel{ max-width: 760px; }
.step-panel > h2{
  font-size: clamp(1.8rem, 5vw, 2.9rem);
  margin-bottom: .75rem;
}
.step-panel__hint{ color: var(--ink-70); margin-bottom: 2rem; max-width: 56ch; }

/* Choice tiles */
.choices{ display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.choices--stack{ grid-template-columns: 1fr; }

.choice{ position: relative; }
.choice input{
  position: absolute; opacity: 0; inline-size: 100%; block-size: 100%;
  margin: 0; cursor: pointer;
}
.choice__face{
  display: grid; gap: .3rem;
  padding: 1.05rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
  block-size: 100%;
  align-content: start;
}
.choice__face b{ font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.12; }
.choice__face small{ font-size: .85rem; color: var(--ink-70); line-height: 1.4; }
.choice input:hover + .choice__face{ background: var(--sand); }
.choice input:checked + .choice__face{
  background: var(--tan);
  box-shadow: var(--shadow-sm);
  transform: translate(-2px, -2px);
}
.choice input:checked + .choice__face small{ color: var(--ink); }
.choice input:focus-visible + .choice__face{ outline: 3px solid var(--tan-deep); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  .choice input:checked + .choice__face{ transform: none; }
}

/* Fields */
.field{ display: grid; gap: .45rem; margin-bottom: 1.4rem; }
.field > label, .fieldset__legend{
  font-family: var(--mono); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-70); font-weight: 500;
}
.field .req{ color: var(--warn); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  font: inherit;
  font-size: 1rem;
  padding: .85rem 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  width: 100%;
  max-width: 100%;
}
.field textarea{ min-block-size: 150px; resize: vertical; line-height: 1.55; }
.field select{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field__help{ font-size: .83rem; color: var(--ink-70); }
.field__counter{ font-family: var(--mono); font-size: .7rem; color: var(--ink-70); justify-self: end; }
.field--error input, .field--error textarea, .field--error select{ border-color: var(--warn); background: #fdecea; }
.field__error{ font-size: .83rem; color: var(--warn); font-weight: 600; }
.field__error[hidden]{ display: none !important; }

.grid-2{ display: grid; gap: 1.4rem; }
@media (min-width: 620px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

.consent{
  display: flex; gap: .85rem; align-items: flex-start;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--pale); padding: 1.1rem;
  font-size: .9rem; line-height: 1.5;
}
.consent input{ inline-size: 22px; block-size: 22px; flex: none; margin: 0; accent-color: var(--tan-deep); }

/* Review */
.review{ border: 2px solid var(--ink); border-radius: var(--radius); background: var(--sand); overflow: hidden; }
.review__row{
  display: grid; gap: .3rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(26,42,107,.2);
}
@media (min-width: 620px){ .review__row{ grid-template-columns: 11rem 1fr; gap: 1.25rem; align-items: baseline; } }
.review__row:last-child{ border-bottom: none; }
.review__row dt{ font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.review__row dd{ margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Sticky step actions */
.enquiry__actions{
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--cream);
  border-top: 2px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 3;
}
.enquiry__actions-inner{
  display: flex; align-items: center; gap: .9rem;
  padding-block: .9rem;
}
.enquiry__actions .spacer{ margin-left: auto; }
.enquiry__save{
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-70);
}

/* Success */
.success{ max-width: 620px; display: grid; gap: 1.25rem; }
.success__ref{
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--sage); box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  display: grid; gap: .35rem;
}
.success__ref span{ font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
.success__ref b{ font-family: var(--mono); font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: -0.01em; font-weight: 700; }
.success ol{ padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--ink-70); }

/* Utility */
.visually-hidden{
  position: absolute !important; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.is-locked{ overflow: hidden; }

/* --------------------------------------------------------------------------
   Attachments
   -------------------------------------------------------------------------- */

.dropzone{
  position: relative;
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  transition: background .14s ease, border-color .14s ease;
}
.dropzone input[type="file"]{
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__face{
  display: grid; gap: .3rem; justify-items: center; text-align: center;
  padding: 1.6rem 1.2rem;
  pointer-events: none;
}
.dropzone__face b{
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.dropzone__face small{ font-size: .85rem; color: var(--ink-70); }
.dropzone:hover,
.dropzone.is-over{ background: var(--sand); border-color: var(--tan-deep); border-style: solid; }
.dropzone input:focus-visible + .dropzone__face{ outline: 3px solid var(--tan-deep); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce){ .dropzone{ transition: none; } }

.filelist{ list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; }
.filelist:empty{ margin: 0; }
.filelist li{
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--pale);
  font-size: .9rem;
}
.filelist .name{
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-inline-size: 0;
}
.filelist .size{
  font-family: var(--mono); font-size: .72rem; color: var(--ink-70);
  margin-left: auto; flex: none;
}
.filelist .remove{
  flex: none;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--cream); color: var(--ink);
  padding: .2rem .7rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
}
.filelist .remove:hover{ background: var(--tan); }

.success__open{ margin-top: .5rem; }
.success__open .btn{ text-decoration: none; }
.success__note{
  font-size: .9rem;
  color: var(--ink-70);
  max-width: 52ch;
}
.success__note[hidden]{ display: none !important; }

/* The account invitation. Set apart from the confirmation so it reads as an
   offer rather than another thing that must be done. */
.success__account{
  margin-top: 2rem;
  padding: 1.3rem 1.4rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--pale);
  max-width: 54ch;
}
.success__account h3{
  font-size: 1.2rem;
  margin-bottom: .6rem;
}
.success__account p{ font-size: .95rem; line-height: 1.6; }
.success__account .btn{ margin-top: 1rem; text-decoration: none; }
.success__account-note{
  margin-top: .8rem;
  font-size: .85rem;
  color: var(--ink-70);
}

/* The small print is now links, and carries the build credit. */
.footer__legal{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.footer__legal a{ border-bottom: 1px solid rgba(246,247,253,.3); }
.footer__legal a:hover{ border-bottom-color: var(--tan); }
.footer__legal span{ opacity: .5; }
.footer__credit a{ border-bottom: 1px solid rgba(246,247,253,.3); }
.footer__credit a:hover{ border-bottom-color: var(--tan); }

/* --- Long-form prose ------------------------------------------------------
   Everything above is a landing page: short blocks, each with its own layout.
   This is the other thing — a post, or one of the policy pages — where the
   reader is reading rather than scanning, and nothing here had any styling at
   all. Paragraphs ran together and lines ran the full width of a desktop
   screen, which is roughly twice what anybody can track back from. */

.wrap--reading{ max-width: 44rem; }

.post__head{ margin-bottom: 2rem; }
.post__head .page-title{ margin-block: .35rem 0; }
.post__date{
  margin: .55rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.entry-content{ font-size: 1.06rem; line-height: 1.72; }
.entry-content > * + *{ margin-top: 1.15rem; }

.entry-content h2{
  margin-top: 2.4rem;
  font-size: 1.45rem;
  line-height: 1.25;
}
.entry-content h3{
  margin-top: 1.9rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

/* A heading belongs to what follows it, not to what came before. */
.entry-content h2 + *,
.entry-content h3 + *{ margin-top: .6rem; }

.entry-content ul,
.entry-content ol{ padding-left: 1.3rem; }
.entry-content li + li{ margin-top: .45rem; }

.entry-content a{ color: var(--tan-deep); text-underline-offset: 2px; }

.entry-content blockquote{
  margin-inline: 0;
  padding: .3rem 0 .3rem 1.1rem;
  border-left: 3px solid var(--sage);
  color: var(--ink-70);
}

.entry-content img{ max-width: 100%; height: auto; border-radius: 8px; }

.entry-content table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th,
.entry-content td{
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--sand);
  text-align: left;
  vertical-align: top;
}

/* What comes after the reading. */
.post__after{
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.post__back{ color: var(--ink-70); font-size: .92rem; }

/* --- Recent notes on the front page ---------------------------------------
   Borrows the situations grid rather than inventing a second card, because
   they are the same shape of thing: a short piece of text somebody might want
   to read. The only additions are the link behaviour and the way out. */

.notes .situation__quote{ font-size: 1.12rem; line-height: 1.3; margin-block: .35rem .6rem; }
.notes .situation__quote a{ color: inherit; text-decoration: none; }
.notes .situation__quote a:hover,
.notes .situation__quote a:focus-visible{ color: var(--tan-deep); text-decoration: underline; }

.notes .situation__who{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.notes__all{ margin-top: 2rem; }