/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   shared.css — everything more than one page uses, built on system.css.

   Loaded by EVERY page, after system.css and before the page's own file:
     fonts.css  →  system.css  →  shared.css  →  page-<name>.css

   These blocks were in home.css until the About page needed them. They were
   moved rather than copied: a nav, a footer and a dark panel duplicated per
   page is four sessions maintaining four navs.

     · icon sprite plumbing
     · nav, and the current-page state
     · the ghost button, which only exists on dark
     · the dark panel and its six-tile grid
     · the closing pair
     · footer

   Nothing homepage-specific belongs here. Nothing here may be overridden by
   a page file except through a page-scoped selector.
   ============================================================ */

/* ── icons ── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;display:block;flex:none;fill:currentColor}

/* ── nav. Sits on the ground, inset to the panel width, not sticky. ── */
/* No side inset. The nav lines up with the EDGE of the panels below it, not
   with the content inside them, so the page has one left and one right line
   running the whole way down. */
.nav{max-width:var(--frame);margin:0 auto;padding:var(--s3) 0 var(--s5);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5)}
.nav-brand{grid-column:1;justify-self:start;display:block}
/* Between the 158px it was and the 142px of the footer mark: the nav opens the
   page so it stays the larger of the two, but not by much. */
.nav-brand img{display:block;width:150px;height:auto}
.nav-links{grid-column:2;justify-self:center;display:flex;align-items:center;
  gap:clamp(var(--s4),2.2vw,var(--s6))}
.nav-links a{color:var(--muted);text-decoration:none;font-size:var(--t-text);white-space:nowrap;
  transition:color var(--fast) var(--ease)}
.nav-links a:hover{color:var(--deep)}
/* THE CURRENT PAGE. Full ink and one weight up, and nothing else — no
   underline, no dot, no pill. A marker under one of six links reads as a
   control you could press; the weight change reads as "you are here" and
   survives the mobile stack, where the links are already a list.

   Keyed off aria-current, not a class, so the state is announced as well as
   drawn — one attribute doing both jobs, and impossible to set on the page
   without also setting it for a screen reader. */
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav-links a[aria-current="page"]:hover{color:var(--deep)}
.nav-cta{grid-column:3;justify-self:end}
.nav-toggle{display:none;grid-column:2;justify-self:end;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:11px 18px;font:600 .875rem/1 var(--font-display);color:var(--ink);cursor:pointer}

/* Five links plus a button stop fitting before the layout grids need to break,
   so the nav gets its own breakpoint rather than sharing the one at 880. */
@media (max-width:1140px){
  .nav{grid-template-columns:1fr auto;row-gap:var(--s4)}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .nav[data-open] .nav-links{display:flex;flex-direction:column;align-items:flex-start;
    gap:var(--s4);grid-column:1/-1;justify-self:stretch;
    padding-top:var(--s5);border-top:1px solid var(--hair)}
  .nav[data-open] .nav-cta{display:inline-flex;grid-column:1/-1;justify-self:start}
}

/* ═══ THE PAGE OPENING ═══
   Every page except the homepage opens on this.

   The homepage hero holds a visitor in place: 80svh and a moving film. An
   inner page has already been chosen — its opening states the subject and
   lets the reader through. So it is shorter and it is a still.

   Same frame as the hero and the panels: full width, --r-panel, the lift,
   24px beneath. Same construction: picture, scrim, bottom-aligned type. What
   changes is the height and the weight of the scrim.

   It carries the same two actions as the hero — one solid, one ghost — so a
   visitor meets the same pair of doors on every page. ── */
.open{position:relative;max-width:var(--frame);margin:0 auto var(--s5);
  border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--lift);
  /* Roughly half the hero. Tall enough to carry a photograph and a title,
     short enough that the next section is already showing — which is the
     whole message of an inner page: keep reading, this one is content. */
  min-height:max(380px, 52svh);
  display:flex;align-items:flex-end;isolation:isolate}
.open-bg{position:absolute;inset:0;z-index:-2}
.open-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  display:block}

/* THE SCRIM IS LIGHTER THAN THE HERO'S, AND THE OTHER WAY UP.

   The hero runs darkest at the top because it sits under a moving film that
   never has to be read. This is a still, and it is the only picture on the
   page, so it is allowed to be seen: light at the top, gathering weight down
   to where the type sits. Same three navy values as the hero, reordered and
   reweighted — no new colour. */
.open-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(
    rgb(20 33 61 / 38%),
    rgb(20 33 61 / 55%) 34%,
    rgb(12 18 33 / 90%))}
.open-in{position:relative;width:100%;
  padding:var(--pad);padding-top:clamp(56px,9vw,96px)}

/* ONE NEW DISPLAY SIZE, and it is the reason this component needed designing.
   The hero tops out at 3.65rem and h2 at 2.75rem. An inner page title set at
   either is wrong: the first is as loud as the homepage, the second is the
   same size as the section headings underneath it. This sits between them and
   is the only type size on the site outside the hero and the four-step scale. */
.open h1{color:#fff;font-family:var(--font-display);font-weight:500;
  font-size:clamp(2rem,3.9vw,3.15rem);line-height:1.2;letter-spacing:-.03em;
  max-width:900px;margin-bottom:var(--s4);text-wrap:balance}
/* Inline, not a block. The hero's headline is long enough that a second line
   is guaranteed; a page title is not, and forcing the break leaves one word
   stranded on its own line. */
.open h1 b{font-weight:300;color:color-mix(in srgb, #fff 82%, var(--azure))}
.open-lead{font-weight:300;font-size:var(--t-lead);line-height:var(--lh-lead);
  color:color-mix(in srgb, #fff 88%, var(--azure));max-width:60ch;
  margin-bottom:var(--s6)}
/* The same pair the homepage hero carries, and the same gap between them, so
   the two openings answer alike. 32px above rather than the hero's 48: this
   opening is half the height and the wider gap left the buttons adrift. */
.open-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
/* The one link, recoloured for dark the same way .deep recolours .lead. */
.open .link{color:color-mix(in srgb, #fff 88%, var(--azure))}
.open .link:hover,.open a:hover .link{color:#fff}
.open :focus-visible{outline-color:#fff}

@media (max-width:880px){
  .open{min-height:max(320px, 42svh)}
}

/* ── the ghost button. On dark only: the hero, and any page opening. ── */
.btn-ghost{background:color-mix(in srgb, #fff 12%, transparent);color:#fff;
  border-color:color-mix(in srgb, #fff 46%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--deep);border-color:#fff}

/* ═══ 3 · THE PLATFORM. The one dark panel. ═══ */
/* No overflow:hidden. It would clip the wash to the panel's rounded corners,
   but it also stops position:sticky working anywhere inside — and the timeline
   below pins. The wash carries the radius itself instead. */
.deep{background:var(--navy);color:#fff;position:relative}
.deep::before{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r-panel);
  background:
    radial-gradient(90% 70% at 8% -10%,  color-mix(in srgb, var(--deep) 62%, transparent), transparent 62%),
    radial-gradient(70% 60% at 100% 108%, color-mix(in srgb, var(--azure) 24%, transparent), transparent 64%)}
.deep > *{position:relative}
.deep h2,.deep h3,.deep h4{color:#fff}
.deep .lead{color:color-mix(in srgb, #fff 76%, var(--navy))}
/* White, matching the heading beside it, the same way the light sections put
   the eyebrow in the heading's ink. */
.deep .eyebrow{color:#fff}
.deep .btn-secondary{background:transparent;color:#fff;
  border-color:color-mix(in srgb, #fff 40%, transparent);     align-self: flex-end;
    width: fit-content;}
.deep .btn-secondary:hover{background:#fff;color:var(--navy);border-color:#fff}
/* Links on the dark panel. --deep is all but invisible on navy, so the same
   recolour the page opening takes: near-white at rest, pure white on hover.
   The arrow still moves; only the colour changes. */
.deep .link{color:color-mix(in srgb, #fff 88%, var(--azure))}
.deep .link:hover,.deep a:hover .link{color:#fff}
.deep :focus-visible{outline-color:#fff}

/* ── the eyebrow. ONE on the whole site. ──
   Same family, size, weight and tracking as the footer's column headings, so
   the page has one eyebrow and not a pill here and a label there. Was
   .diff-tag in home.css; renamed and moved up the first time a second page
   needed it, rather than copied.

   Rationed: at most one section in three carries one. It labels a thing that
   would otherwise be unnamed — the two halves of a card pair — never a
   section that already has a heading. */
.tag{display:block;margin-bottom:var(--s3);
  font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azure);line-height:1}

/* six capability tiles */
/* 32px under the grid, not 64. The button belongs to the tiles above it and
   at 64 it floated away from them — the loosest gap on the page. */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-bottom:var(--s6)}
.tile{background:color-mix(in srgb, #fff 7%, transparent);
  border:1px solid color-mix(in srgb, #fff 13%, transparent);
  border-radius:var(--r-card);padding:var(--s5);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.tile:hover{background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, var(--azure) 46%, transparent)}
/* display:block is what makes the margin below it real. As an inline span the
   16px was declared and silently dropped — vertical margins do not apply to
   inline boxes — so the icon sat directly on the title. */
.tile-ico{display:block;font-size:24px;margin-bottom:var(--s4);
  color:color-mix(in srgb, var(--azure) 92%, #fff)}
.tile h3{font-size:1rem;margin-bottom:6px}
.tile p{font-size:var(--t-small);line-height:var(--lh-small);margin:0;max-width:none;
  color:color-mix(in srgb, #fff 64%, var(--navy))}


/* ═══ 5 · CLOSING ═══ */
.close-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);
  max-width:var(--frame);margin:0 auto var(--s5)}
/* The whole card is the link, so it lifts on hover the way the option cards
   do, and the button inside answers at the same time rather than only when
   the pointer is on it. */
.close-card{background:var(--panel);border-radius:var(--r-panel);padding:var(--pad);
  display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.close-card:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.close-card:hover .btn svg{transform:translateX(3px)}
.close-card:hover .btn-primary{background:var(--deep-press)}
.close-card--deep{background:var(--deep);box-shadow:var(--lift);position:relative;
  overflow:hidden}
.close-card--deep:hover{box-shadow:0 4px 8px color-mix(in srgb, var(--navy) 6%, transparent),
  0 26px 56px -14px color-mix(in srgb, var(--navy) 26%, transparent)}
.close-card--deep::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 90% at 92% 100%,
    color-mix(in srgb, var(--azure) 40%, transparent), transparent 66%)}
.close-card--deep > *{position:relative}
.close-card--deep h2{color:#fff}
.close-card--deep .lead{color:color-mix(in srgb, #fff 86%, var(--deep))}
/* 32px above the button, matching the platform panel. The card's own 16px
   flex gap plus 16px here. */
.close-card .btn{margin-top:var(--s6)}
.close-card--deep .btn-secondary{background:#fff;color:var(--deep);border-color:#fff}
.close-card--deep:hover .btn-secondary,
.close-card--deep .btn-secondary:hover{background:color-mix(in srgb, #fff 86%, var(--azure))}
.close-card--deep :focus-visible{outline-color:#fff}


/* ═══ 6 · FOOTER ═══ */
.foot{background:var(--navy);border-radius:var(--r-panel);
  max-width:var(--frame);margin:0 auto;padding:var(--pad)}
/* Brand block on the left, three link columns on the right.

   The columns are sized to their own links and packed against the right edge,
   so COMPANY finishes on the same line as the rule below rather than starting
   somewhere inside a track and trailing off. The brand takes everything left
   over, which makes the break between the two halves of the footer far wider
   than the breaks inside the group of three — which is the point: the columns
   read as one set, held away from the brand block. */
/* FIVE TRACKS, and the flexible one is the GAP, not the brand block.

   The brand was the 1fr track before, so three fixed 160px gaps ate a constant
   876px and everything the window lost came out of the brand column: 673px
   wide at Full HD, 135px at 1280, where the paragraph ran to thirteen lines.
   Now the brand is sized to its own text, a spacer takes the slack, and the
   gaps shrink with the window instead of holding still. The spacer is always
   the widest break on the row, which is what separates the two halves. */
.foot-top{display:grid;
  /* The spacer never falls below one and a half times the gap between the
     columns, so the break between the brand block and the group of three is
     the widest one on the row at every width, not just at Full HD. */
  grid-template-columns:auto minmax(calc(var(--foot-gap) * 1.5),1fr) auto auto auto;
  column-gap:0;row-gap:var(--s7);
  padding-bottom:var(--s7);border-bottom:1px solid rgba(255,255,255,.13)}
.foot-brand{grid-column:1}
.foot-spacer{grid-column:2}
.foot-col + .foot-col{margin-left:var(--foot-gap)}
/* The tail after COMPANY only where there is width to spare. Below this it
   costs the brand paragraph three or four extra lines, so the column goes back
   to finishing on the rule instead. */
@media (min-width:1700px){ .foot-col:last-of-type{margin-right:var(--foot-gap)} }
/* Smaller than the nav mark, not larger. The footer signs the page off; it
   does not open it. This was 190px against the nav's 158px. */
.foot-brand img{display:block;width:142px;height:auto;margin-bottom:var(--s5)}
/* Light, not regular. Pale text on a dark ground reads a weight heavier than
   the same text on white, so the footer looked bolder than the panels above it
   while being set identically. One step down puts it back in line. */
/* No measure. The footer column is already a comfortable line length, and
   capping it left a ragged strip of empty space beside a paragraph that sits
   next to three full-width link columns. */
.foot-brand p{font-weight:300;font-size:var(--t-small);line-height:var(--lh-small);max-width:58ch;
  color:color-mix(in srgb, #fff 72%, var(--navy))}
.foot-col h3{font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--azure) 84%, #fff);margin-bottom:var(--s4)}
.foot-col ul{list-style:none}
/* 7px, not 12. Each link's line box carries about 5px of its own space above
   and below the words, so the margin has to come off that to land on a visible
   12px gap between one link and the next. */
.foot-col li{margin-bottom:7px}
.foot-col a{color:color-mix(in srgb, #fff 78%, var(--navy));text-decoration:none;
  font-weight:300;font-size:var(--t-small);line-height:var(--lh-small);
  transition:color var(--fast) var(--ease)}
.foot-col a:hover{color:#fff}
/* Equal gaps, not a page centre. Centred on the page the links sat 171px from
   the copyright and 602px from the icons, because the copyright line is long
   and the icons are small. space-between divides the leftover space evenly, so
   the pair sits the same distance from each neighbour. */
.foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:var(--s4) var(--s6);padding-top:var(--s7)}
.foot-legal{display:flex;gap:var(--s6);white-space:nowrap}
/* max-width:none matters: this paragraph inherits the 65ch reading measure
   every <p> carries, which broke a single sign-off line in two. A footer
   credit is a label, not a paragraph to be read down. */
.foot-end p,.foot-end a{font-weight:300;font-size:var(--t-fine);line-height:var(--lh-fine);
  color:color-mix(in srgb, #fff 62%, var(--navy));margin:0;max-width:none}
.foot-end a{text-decoration:none}
.foot-end a:hover{color:#fff}
/* No margin-left:auto. It shoved the icons to the far edge, so the row read
   as two clumps 700px apart; now every item in the row is one gap from the
   next. */
.foot-social{display:flex;gap:var(--s4);list-style:none}
.foot-social a{display:block;color:color-mix(in srgb, #fff 68%, var(--navy));
  transition:color var(--fast) var(--ease)}
.foot-social a:hover{color:#fff}
.foot-social svg{width:19px;height:19px;display:block}
.foot :focus-visible{outline-color:#fff}

@media (max-width:1080px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  /* The uneven gaps only mean something while all four sit on one row, and the
     spacer has to GO, not just empty out: it is a grid item, so left in place
     it eats one of the three cells and pushes a whole column onto its own row.
     It exists only to hold the desktop gap open. */
  .foot-top{grid-template-columns:repeat(3,1fr);column-gap:var(--s5)}
  .foot-spacer{display:none}
  .foot-brand{grid-column:1/-1}
  .foot-brand + .foot-col,.foot-col + .foot-col{margin-left:0}
}
@media (max-width:900px){
  /* Stacked and left aligned: three across stops fitting well before the rest
     of the footer does. */
  .foot-end{flex-direction:column;align-items:flex-start;gap:var(--s4)}
}
@media (max-width:880px){
  .close-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;row-gap:var(--s6)}
  .foot-legal{flex-wrap:wrap;gap:var(--s4)}
}


/* ═══════════ FORMS ═══════════
   Moved up out of page-contact.css on 26 August so Register could use them
   rather than growing a second form vocabulary. Section 24 of the design
   system listed form controls, and an inline link, as things the site did not
   have; this is both of them.

   Everything here is class-scoped — `.field input`, never a bare `input` — so
   a page without these classes is untouched by them.

   Contact keeps what is genuinely its own: `.form[hidden]`, the confirmation
   block, and the dark variant of `.ilink` that sits on its details card.
   ═══════════ */

.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.field{display:flex;flex-direction:column;min-width:0}
.field--wide{grid-column:1/-1}
/* Montserrat. The system gives the display face every heading, button, label
   and interface string, and a field label is a label. */
.field label{font-family:var(--font-display);font-weight:500;font-size:var(--t-small);
  line-height:1.3;letter-spacing:-.005em;color:var(--ink);margin-bottom:7px}
.field label i{font-style:normal;font-weight:400;color:var(--muted)}
.field-hint{font-size:var(--t-fine);line-height:var(--lh-fine);color:var(--muted);
  margin:0 0 7px;max-width:none}

/* A WELL, NOT A WHITE BOX. On a white panel a white field with a hairline
   round it is invisible until you look for it; --wash sets it back into the
   surface, and focus lifts it out to white. --r-chip, not --r-card: 16px on
   a 46px-high control is the squircle the shape rule warns about. */
.field input,.field select,.field textarea{
  font:400 var(--t-text)/1.45 var(--font-body);color:var(--ink);
  background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-chip);
  padding:13px 15px;width:100%;display:block;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.field textarea{resize:vertical;min-height:132px}
.field input::placeholder{color:var(--faint)}
.field input:hover,.field select:hover,.field textarea:hover{
  border-color:color-mix(in srgb, var(--navy) 22%, transparent)}
.field input:focus,.field select:focus,.field textarea:focus{
  background:var(--white);border-color:var(--deep)}
/* The system's own focus ring, on the system's own terms. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:0px solid var(--deep);outline-offset:0px; box-shadow: none !important;}

/* The select's own chevron is a different shape on every operating system, so
   it is replaced. A chevron, drawn inline the way every button arrow on this
   site already is — a turned sprite arrow was the wrong mark, it read as a
   download. It takes currentColor, so it answers focus with the border. */
.select{position:relative;display:block}
.select select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer}
.select-ico{position:absolute;right:15px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);color:var(--muted);pointer-events:none;
  transition:color var(--fast) var(--ease)}
.select select:focus ~ .select-ico,.select:hover .select-ico{color:var(--deep)}
/* The drawn chevron is not repainted in a forced-colours palette, so the
   indicator goes back to the operating system. v4.7 did the same. */
@media (forced-colors:active){
  .select select{appearance:auto;-webkit-appearance:auto;padding-right:15px}
  .select-ico{display:none}
}

/* Native checkbox with the brand blue in it. A checkbox rebuilt out of spans
   is one more thing to get wrong on a screen reader for no gain. */
.consent{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s3);align-items:start}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--deep)}
.consent label{font-size:var(--t-small);line-height:var(--lh-small);
  color:var(--muted);max-width:none}

.form-actions{grid-column:1/-1;margin-top:var(--s2)}
.form-actions .btn:disabled{opacity:.6;cursor:default}
.form-actions .btn:disabled:hover{background:var(--deep)}
.form-actions .btn:disabled:hover svg{transform:none}
/* Signal Red, and this is what it is for — the palette calls it "marks only,
   rare". Mixed toward navy rather than used flat: #E53935 on white is 4.0:1
   and fails on body text, and mixing toward navy keeps the page one
   temperature the way --muted does. 6.5:1 as set. */
.form-error{grid-column:1/-1;margin:0;max-width:none;
  font-size:var(--t-small);line-height:var(--lh-small);
  color:color-mix(in srgb, var(--red) 72%, var(--navy));
  background:color-mix(in srgb, var(--red) 6%, var(--white));
  border:1px solid color-mix(in srgb, var(--red) 26%, transparent);
  border-radius:var(--r-chip);padding:var(--s3) var(--s4)}

/* THE INLINE LINK. Section 24 of the design system records that the site has
   no style for a link inside a sentence — .link is a standalone call to
   action with an arrow, which is a different thing. In running text colour
   alone is not enough, so this one is underlined; the rule against underlines
   is about a line appearing ON HOVER, and this one is simply there. */
.ilink{color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--deep) 35%, transparent);
  transition:color var(--fast) var(--ease),text-decoration-color var(--fast) var(--ease)}
.ilink:hover{color:var(--azure);text-decoration-color:currentColor}

/* ONE COLUMN when there is not room for two. This belongs to the component, not
   to the pages using it: without it `.form` shipped a hard `1fr 1fr` and every
   page had to write its own collapse, which is how Contact and Register briefly
   ended up with one each at two different widths.

   880 is the honest number for an UNQUALIFIED form — one with nothing else in
   its row, filling a panel. A page that puts the component somewhere tighter
   adds its own on top; Register does, at 1180, because its form sits in half a
   panel beside a picture. An override that narrows is easy to read. One that
   widens is not, which is why the shared value is the looser of the two.

   Not `auto-fit`/`minmax`: the two columns here are a pairing decision, not a
   packing one, and auto-fit would give a wide panel four or five tracks and
   quietly change what `grid-column:1/-1` spans. */
@media (max-width:880px){
  .form{grid-template-columns:1fr}
}

/* The inline link, on a dark surface, is deliberately NOT here: the two pages
   that need one recolour it against their own background, the way `.deep`
   recolours `.lead`. */


/* ═══════════════════════════════════════════════════════════════════════════
   THE LEGAL DOCUMENT
   Moved up from page-privacy.css and page-terms.css, 26 August 2026 (prime-4),
   where the same rules had been written out twice. Not one value changed in the
   move: this is the block as it stood, lifted.

   Everything a page made of numbered clauses needs, and nothing else uses:

     .cl .cl-h .cl-n .cl-sub            a numbered clause and its heading
     .terms                             the multi-column term list
     .card .cards .card-line            a contact card inside a clause
     .chip                              the 40px icon chip both use
     .toc .toc-m .toc-title             the contents rail and its phone form
     .doc .doc-aside .doc-body          the rail-beside-body grid
     .aside-card .aside-title
     .vitals .jump                      the document card's contents

   A legal page's own stylesheet now holds one rule: where its photograph sits
   inside the shared opening. Everything else on it is here.

   .chip is the site's 40px chip. `.diff-chip` in home.css is the same object
   written a second time — same 40px box, same --r-chip, same deep-into-white
   fill, same deep icon, same inversion on hover. They should be one rule. That
   is a homepage job and the homepage is finished, so it is recorded here rather
   than done: anything that needs a 40px chip from now on should use .chip.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ THE DOCUMENT CARD ═══
   What dates the policy, and the three clauses people arrive for. It was a
   four-across strip in its own panel above the document and that is what it
   looked like: a row of metadata with no shape. It is a card now, in the same
   bordered box the About page's pair uses, and it sits inside the document
   rather than in front of it.

   Wide enough for three columns it sticks in the right-hand one. Narrower, it
   goes to the top of the text column and reads across instead of down. */
/* Filled, not outlined. Beside a hairline rail box and above hairline contact
   cards, a third bordered box was three of the same object; the wash fill makes
   this one read as the page's furniture rather than as part of the document. */
.aside-card{background:var(--wash);border-radius:var(--r-card);
  padding:var(--s5)}
/* On a filled ground the chip has to step away from it, so it takes the panel
   white the rest of the page uses as its own surface. */
.aside-card .chip{background:var(--white)}
/* NOT .tag. The shared eyebrow is Bright Blue, and Bright Blue on a light
   surface is 3.1:1 — under AA at any size, and worse again on this card's wash.
   Same shape, Deep Blue, 8.6:1. The four field labels below it stay in the
   muted navy, so the card has two ranks of label and both are readable. */
.aside-title{font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--deep);
  line-height:1;margin-bottom:var(--s5)}

.vitals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) var(--s6)}
/* NOT .tag. The eyebrow is azure and rationed to one section in three, and the
   card already spends this page's one on its own title. These are four data
   labels; same family, size, weight and tracking so the page keeps one label
   shape, in the muted navy the body copy is derived from so none of them
   competes with a heading. */
.vitals dt{font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  line-height:1;margin-bottom:var(--s3)}
.vitals dd{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink)}
/* The ABN and the two dates get compared against a document somebody is
   holding, so they line up digit under digit. */
.vitals dd.num{font-variant-numeric:tabular-nums}

/* The three things people come to a privacy policy to do, as rows rather than
   a line of links: chip, label, arrow. The same row the About page's cards are
   built from, and the chip answers the row's hover, not its own. */
.jump{margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid color-mix(in srgb, var(--navy) 10%, transparent);
  display:grid;gap:var(--s2)}
/* Stacked at every width, and each row runs the full width of the card with its
   arrow at the far end — a list row, the same shape as the phone contents list.
   Three across fitted only in the widest card; anywhere else the labels wrapped
   and the three sat at three different heights. */
.jump a{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;
  column-gap:var(--s4);align-items:center;
  padding:var(--s2) 0;text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-weight:500;font-size:var(--t-text);
  transition:color var(--fast) var(--ease)}
.jump a:hover{color:var(--deep)}
.jump svg:not(.ico){width:14px;height:14px;color:var(--deep);
  transition:transform var(--fast) var(--ease)}
.jump a:hover svg:not(.ico){transform:translateX(3px)}

/* The 40px chip the difference rows use, and the same inversion on hover. */
.chip{width:40px;height:40px;border-radius:var(--r-chip);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:color-mix(in srgb, var(--deep) 11%, var(--white));color:var(--deep);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.jump a:hover .chip{background:var(--deep);color:#fff}


/* ═══ THE DOCUMENT ═══
   Rail, clauses, card.

   Three named areas rather than three bare columns, because the card changes
   place rather than shrinking: beside the text where there is room for it,
   above the text where there is not. The rail spans both rows in the two-column
   form, so it is still the full height of the document and can still stick. */
/* THE GRID SPANS THE PANEL, edge to edge of its padding.
   It used to be capped and centred, which left more white down each side of
   this panel than any other panel on the site has, and the section stopped
   lining up with the ones above and below it. The rail now sits on the panel's
   left padding edge and the card on its right, exactly like the content of
   every other section, and the middle track takes whatever is left. The line
   length is set on the clause instead — see .cl. */
.doc{display:grid;
  grid-template-columns:300px minmax(0,1fr);
  grid-template-areas:"rail aside"
                      "rail body";
  column-gap:var(--s7);row-gap:var(--s7);
  align-items:start}
.toc{grid-area:rail}
.doc-aside{grid-area:aside}
.doc-body{grid-area:body}

/* Three across from the width where all three fit without cutting the measure.
   The third track is the flexible one, not the text: the text takes its 85ch
   and the card absorbs whatever is left, so the panel is filled edge to edge at
   every width above this and the line length never changes to suit the grid. */
@media (min-width:1560px){
  .doc{grid-template-columns:300px minmax(0,85ch) minmax(300px,1fr);
    grid-template-areas:"rail body aside"}
  .doc-aside{position:sticky;top:var(--s4)}
  /* One column inside a 320px card. */
  .vitals{grid-template-columns:1fr}
}

/* ── the contents rail ──
   Sticky, and it marks how far down the document you are. A policy is read
   top to bottom, so the rail carries the same filled-line idea the homepage
   timeline does — but drawn as a border per entry rather than a scaled bar,
   because here the steps are not evenly spaced.

   data-lenis-prevent: the rail scrolls inside itself on a short window, and
   without this a wheel over it moves the page instead. */
.toc{position:sticky;top:var(--s4);
  /* Its own box, like every other object on a light surface here. Loose down
     the left of a panel it read as a stray list rather than a control. */
  border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s5);
  max-height:calc(100svh - var(--s4) * 2);overflow-y:auto;
  overscroll-behavior:contain;
  /* The rail's own scrollbar is a detail nobody needs to see. */
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.toc-title{font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  line-height:1;margin-bottom:var(--s5)}
/* No rule down the side. The entry you are on going to full ink says where you
   are on its own, and a line beside thirty short labels was one mark more than
   the list needed. */
.toc ol{list-style:none}
.toc a{display:block;padding:6px 0;
  font-size:var(--t-fine);line-height:var(--lh-fine);
  color:var(--muted);text-decoration:none;
  transition:color var(--fast) var(--ease)}
.toc a:hover{color:var(--deep)}
.toc a.on{color:var(--ink);font-weight:500}

/* The phone form of the same list. Closed by default: on a phone the rail
   would be thirty lines standing between the reader and clause 1. */
.toc-m{display:none;border:1px solid var(--hair);border-radius:var(--r-card);
  margin-bottom:var(--s7)}
/* The site's own button arrow, turned down and then up, because a label with
   the native triangle taken off it has nothing left saying it can be opened.
   It is the one mark on the page that answers a tap rather than a pointer. */
.toc-m summary{list-style:none;cursor:pointer;padding:var(--s4) var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary svg{width:14px;height:14px;flex:none;color:var(--deep);
  transform:rotate(90deg);transition:transform var(--fast) var(--ease)}
.toc-m[open] summary svg{transform:rotate(-90deg)}
/* The system's focus ring is written for a and button, and this is neither, so
   a keyboard would get the browser's own ring here and the site's everywhere
   else. Same two pixels, same offset, same deep. */
.toc-m summary:focus-visible{outline:0px solid var(--deep);outline-offset:0px; box-shadow: none !important; border-radius:var(--r-card)}
.toc-m[open] summary{border-bottom:1px solid var(--hair)}
.toc-m ol{list-style:none;padding:var(--s4) var(--s5) var(--s5)}
.toc-m a{display:block;padding:5px 0;font-size:var(--t-small);
  line-height:var(--lh-small);color:var(--muted);text-decoration:none;
  transition:color var(--fast) var(--ease)}
.toc-m a:hover{color:var(--deep)}

/* ── a clause ──
   scroll-margin, because every one of these is an anchor target and a clause
   that lands hard against the top of the window reads as cut off. */
/* ONE MEASURE, and it is set here rather than on the column.
   The column runs the full width of the panel now, so the line length has to
   come from the content: 85ch, a document measure rather than a marketing one,
   and every part of a clause takes it — heading, paragraph, list and card all
   stop on the same edge. */
.cl{scroll-margin-top:var(--s5);max-width:85ch}
.cl + .cl{margin-top:var(--s8)}

/* THE H3 STEP for a clause title, and 1rem for a sub-clause under it.
   h2's 44px is the size a section of the homepage is set at; thirty of them
   inside one panel is a document shouting every fifteen lines. Three ranks
   still, 22 / 16 / 14, and the space above each clause does the separating that
   size was doing. */
.cl-h{margin-bottom:var(--s5);
  font-size:clamp(1.15rem,1.5vw,1.375rem);line-height:1.3;letter-spacing:-.01em}

/* The number, and nothing made of it at all. It was a blue square, then a
   display numeral, then a small blue one; every version turned a piece of legal
   numbering into an object. It is set exactly like the words it belongs to —
   "1. About this Privacy Policy" — which is how the clause reads when it is
   cited. Tabular figures only, so that thirty titles start on the same x
   whether the number is one digit or two. */
.cl-n{font-variant-numeric:tabular-nums}

/* The sub-headings inside clause 3. Its own number sits in the muted ink so
   the words are what the eye lands on, and the heading still ranges left with
   the paragraphs rather than being indented under the chip. */
.cl-sub{margin:var(--s7) 0 var(--s4);font-size:1rem;line-height:1.3}
.cl-sub:first-of-type{margin-top:0}
.cl-sub-n{font-variant-numeric:tabular-nums;margin-right:.45em}

/* ── prose ──
   The whole rhythm of the document is these three rules. A paragraph is
   16px from the one above it; a list is 16px from its lead-in sentence and
   24px from whatever follows, because a list is a block and a paragraph is a
   line. */
.cl p + p{margin-top:var(--s4)}
/* No 65ch. The <p> default is a reading measure set against a full-width panel;
   here the column IS the measure, and capping the paragraphs a few characters
   inside it left them ending short of the lists beside them. One edge. */
.cl p{margin-bottom:0;max-width:none}
.cl > ul{margin:var(--s4) 0 var(--s5)}
.cl > ul:last-child{margin-bottom:0}
.cl > *:last-child{margin-bottom:0}

/* ── the term lists ──
   Twenty-five of these, several of them fifteen items long. Set in one column
   they are the wall of bullets that makes a policy unreadable, so they run in
   as many columns as the measure allows and no more.

   columns, not a grid: the items are different lengths and reading them down
   one column and back up to the next is how a list of terms is read. */
/* Two, explicitly. Three would fit only the lists whose items are single
   words, and the ones whose items run to eight words would break into
   three-line stacks. Two halves the height of every list on the page without
   ever cramping one. Below 190px per column it drops to one by itself. */
.terms{list-style:none;columns:2 190px;column-gap:var(--s6)}
.terms--one{columns:1}
.terms li{break-inside:avoid;position:relative;
  padding-left:var(--s4);margin-bottom:7px;
  font-size:var(--t-small);line-height:var(--lh-small);color:var(--muted)}
.terms li:last-child{margin-bottom:0}
/* A square with the corner just knocked off, in deep at 50%. Not a disc: every
   other small mark on this site is a square with a soft corner, and a round
   bullet would be the one exception — but at 5px a 2px radius IS a disc, which
   is what it was reading as. 6px at 25% is 1.5px of corner, the same proportion
   --r-chip has on the 40px chip, so the bullet and the chip are the same shape
   at two sizes. Percentage rather than pixels, so it stays that proportion.
   .5em down the line puts it on the x-height of the first line, not its top. */
.terms li::before{content:'';position:absolute;left:0;top:.5em;
  width:6px;height:6px;border-radius:25%;
  background:color-mix(in srgb, var(--deep) 50%, transparent)}

/* ── a contact card ──
   The four clauses that give out a mailbox, a phone number or an address.
   Running as plain paragraphs the details disappear into the prose, and these
   are the lines somebody is on the page to copy down. A washed box round them
   was not enough: it had no title, no mark, and nothing saying what it was.

   So it is the card the rest of the site builds on a light surface — hairline
   border, card radius, a 40px chip, a title at the card-title step — and it
   answers a pointer the same quiet way the About page's cards do. */
.card{border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s5);margin:var(--s5) 0;
  display:grid;grid-template-columns:40px minmax(0,1fr);
  column-gap:var(--s4);align-items:start;
  transition:background var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
.card:hover{background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.card:hover .chip{background:var(--deep);color:#fff}
.card h4{margin-bottom:var(--s2)}
/* The lines of a card are a block to be copied down, not prose to be read
   through, so they sit at list spacing rather than paragraph spacing. The
   selector has to out-specify .cl p + p, which is what set them 16px apart. */
.card-line{font-size:var(--t-small);line-height:var(--lh-small);
  color:var(--muted);max-width:none}
.card .card-line + .card-line{margin-top:5px}

/* Clause 30 gives out three different things — who we are, how to reach us,
   where we are — so it is three cards rather than one long block. Stacked, not
   two across: three into two columns leaves either an empty cell or one card
   spanning the row with three short lines in it, and stacked they are the same
   object as the single cards in clauses 24, 25 and 28. Six cards, one shape.
   Source order is the client's and is not rearranged to suit a grid. */
.cards{display:grid;gap:var(--s4);margin:var(--s5) 0}
.cards .card{margin:0}

/* ── a link inside a sentence ──
   The site's .link is a standalone call to action with an arrow after it, and
   it carries no underline because it is never inside a line of type. This one
   always is, so it needs the underline — set faint enough that a mailbox
   address in the middle of a paragraph does not read as a heading, and
   brought up to full strength on hover. */
/* .ilink itself is in shared.css now — same rule, same 35% underline, moved up
   by prime-2 on 26 August because section 24 lists it as a site-wide gap. The
   copy that used to sit here has gone; nothing changed on the page.

   This one stays, because it is not about the link, it is about what a card
   does to one on its own ground. A bolded address inside a link picks up the
   system's <strong> ink and comes out navy; inside a card it has to stay the
   link's colour. It was written against .note, which is what this component was
   called before it became a card, so it had quietly stopped matching anything. */
.card .ilink strong{color:inherit}


/* ═══ RESPONSIVE ═══

   1600  three columns, and the card sticks in the third. Above it.
   1080  the rail goes. Below its width the three columns have already become
         two, and two become one: the card sits above the clauses and the rail
         becomes the disclosure.
   680   the two-up card grid and the term columns collapse. */
@media (max-width:1079px){
  .doc{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"aside"
                        "body"}
  .toc{display:none}
  .toc-m{display:block}
}
@media (max-width:680px){
  .vitals{grid-template-columns:1fr;gap:var(--s5)}
  .cards{grid-template-columns:1fr}
  .terms{columns:1}
}
@media (max-width:480px){
  /* The chip drops out of the row rather than squeezing the words next to it,
     the same way the option cards give theirs up on a phone. */
  .card{grid-template-columns:1fr;row-gap:var(--s4)}
}