/* Signature pieces: the parts that make this site ours. Shared by the home page and the style guide.
   Self-contained: needs only the colour variables from pages.css or the home page (--ink, --orange, --card, --mut, --deep, --sand). */
/* flag strip under the hero: countries scroll past on their own, like a row of logos. Flags are from flag-icons (MIT), see images/flags/LICENSE.txt */
.flagrow{padding:20px 0 64px;text-align:center}
.flagrow .flag-lab{font-size:17px;color:var(--mut);margin-bottom:22px}
.flagrow .belt{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.flagrow .track{display:flex;width:max-content;animation:flagbelt 44s linear infinite}
.flagrow .belt:hover .track{animation-play-state:paused}
.flagrow ul{display:flex;flex:none;gap:56px;padding:0 28px;list-style:none;margin:0}
.flagrow li{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:19px;font-weight:500}
.flagrow li img{width:40px;height:30px;border-radius:6px;object-fit:cover;box-shadow:0 2px 8px rgba(60,40,20,.18)}
@keyframes flagbelt{to{transform:translateX(-50%)}}
@media(max-width:760px){.flagrow{padding-bottom:40px}.flagrow ul{gap:36px}.flagrow li{font-size:17px}}
@media(prefers-reduced-motion:reduce){.flagrow .track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.flagrow ul[aria-hidden]{display:none}}

/* 3 jobs by category: boarding passes (Alex picked concept B, 23 Oct 2026). Notches are cut with a mask, so the page shows through. */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
/* the notch mask would clip a box-shadow, so the shadow is a filter: it follows the real ticket shape, notches included */
.bp{position:relative;display:grid;grid-template-columns:1fr 132px;min-height:150px;color:var(--ink);filter:drop-shadow(0 8px 14px rgba(60,40,20,.10)) drop-shadow(0 2px 4px rgba(60,40,20,.06));transition:transform .25s,filter .25s}
.bp:hover{transform:translateY(-3px) rotate(-.6deg);filter:drop-shadow(0 14px 22px rgba(60,40,20,.16)) drop-shadow(0 2px 4px rgba(60,40,20,.08))}
.bp .main,.bp .stub{position:relative}
.bp .main{background:var(--card);border-radius:24px 0 0 24px;padding:20px 24px;display:flex;flex-direction:column;justify-content:space-between;
  -webkit-mask:radial-gradient(circle 12px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 12px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.bp .stub{background:var(--orange);border-radius:0 24px 24px 0;padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  -webkit-mask:radial-gradient(circle 12px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 12px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 12px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.bp .lab{font-size:14px;font-weight:500;color:var(--mut);}
.bp h3{font-weight:500;letter-spacing:-.01em;font-size:clamp(22px,2.6vw,30px);line-height:1.12;margin:6px 0}
.bp .from{font-size:16px;color:var(--mut)}
.bp .stub b{font-weight:600;font-size:16px}
.bp .bars{width:100%;height:44px;border-radius:3px;background:repeating-linear-gradient(90deg,#191919 0 2px,transparent 2px 5px,#191919 5px 6px,transparent 6px 9px,#191919 9px 12px,transparent 12px 14px)}
.bp.dark .main{background:var(--ink);color:#fff}.bp.dark .lab,.bp.dark .from{color:#cfc5b8}
.bp.dark .stub{background:#fff}
@media(max-width:860px){.cats{grid-template-columns:1fr;gap:16px}.bp{grid-template-columns:1fr 108px;min-height:136px}.bp .main{padding:16px 18px}}
@media(prefers-reduced-motion:reduce){.bp{transition:none}.bp:hover{transform:none}}

/* 4 how it works: a vertical tracker, like following a parcel (Alex, 23 Oct 2026). Circle and line on the left, the step on the right. */
.how2{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.how2 .lhs{position:sticky;top:110px}
.how2 .lhs .btn{margin-top:28px}
.trk{list-style:none;padding:0;margin:0;max-width:560px}
.trk-step{display:flex;gap:20px}
.trk-side{display:flex;flex-direction:column;align-items:center;flex:none;width:34px}
.trk-dot{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #b9a98f;background:transparent;display:grid;place-items:center;transition:background .35s,border-color .35s}
.trk-dot svg{width:20px;height:20px;stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .4s .12s}
.trk-step.trk-done .trk-dot{background:var(--orange);border-color:var(--orange)}
.trk-step.trk-done .trk-dot svg{stroke-dashoffset:0}
.trk-line{flex:1;width:2px;min-height:24px;margin:6px 0;background:#d9c7ad;transition:background .5s}
.trk-step.trk-lit .trk-line{background:var(--orange)}
.trk-body{padding:2px 0 36px}
.trk-step:last-child .trk-body{padding-bottom:0}
.trk-body h3{font-weight:500;letter-spacing:-.01em;font-size:clamp(21px,2.2vw,26px);line-height:1.2;margin-bottom:6px;color:#6f6558;transition:color .3s}
.trk-step.trk-done .trk-body h3{color:var(--ink)}
.trk-body p{font-size:18px;color:var(--mut);max-width:38ch}
@media(max-width:860px){.how2{grid-template-columns:1fr;gap:36px}.how2 .lhs{position:static}.trk{max-width:none}.trk-body p{font-size:17px}}
@media(prefers-reduced-motion:reduce){.trk-dot,.trk-dot svg,.trk-line,.trk-body h3{transition:none}}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px}
.pg{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.stamp{width:150px;height:150px;opacity:0;transform:scale(1.7);filter:url(#rough);mix-blend-mode:multiply}
.stamp.in{animation:thud .42s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes thud{0%{opacity:0;transform:scale(1.7) rotate(0)}60%{opacity:.95}100%{opacity:.9;transform:scale(1) rotate(var(--r))}}
.stamp text{font-family:var(--fh),system-ui,sans-serif}

.pg h3{font-weight:500;letter-spacing:-.01em;font-size:21px;margin-bottom:4px}.pg p{color:#5b4a30}
@media(max-width:860px){.pgrid{grid-template-columns:1fr}.pg{grid-template-columns:112px 1fr;gap:14px}.stamp{width:112px;height:112px}}
@media(prefers-reduced-motion:reduce){.stamp{opacity:.9;transform:rotate(var(--r));animation:none}}

/* 6 trust: the same round stamps, stamp on the left and text on the right, no card around them */
.trustgrid{gap:44px 56px}
@media(max-width:860px){.trustgrid{gap:28px}}

/* 8 see us in action: photos fanned along a curve that keeps turning on its own (Alex, 23 Oct 2026). Drag, tap, arrows. */
.arc{position:relative;isolation:isolate;height:500px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.arc[data-drag="1"]{cursor:grabbing}
.arc:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}
.arc-card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:24px;overflow:hidden;background:#d9c3a5;box-shadow:0 8px 30px rgba(60,40,20,.14);will-change:transform}
.arc-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;pointer-events:none}
.arc-bar{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:14px;display:flex;align-items:center;gap:16px;cursor:default;z-index:200}
.arc-cap{flex:1;min-width:0;font-size:18px;font-weight:500}
.arc-cnt{font-size:16px;color:var(--mut);font-variant-numeric:tabular-nums}
.arc-btn{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(60,40,20,.12);display:grid;place-items:center;font-size:20px;line-height:1;border:0;cursor:pointer;color:var(--ink);font-family:inherit}
.arc-btn:hover{box-shadow:0 8px 18px rgba(60,40,20,.18)}
@media(max-width:760px){.arc{height:470px}.arc-cap{font-size:16px}}

/* 2 hero: copied from concept E Glow (same background, same photo, same fades), chosen by Alex 24 Oct 2026 */
.hx{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:145px 20px 0;overflow:hidden;background:linear-gradient(180deg,#fffaf4 0%,#f6ede0 38%,#eee5d3 62%,#ece3d1 100%)}
.hx h1{font-size:clamp(40px,5.6vw,76px);line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:14ch;margin:0 auto 20px}
.hx p{max-width:560px;color:#3a342d;font-size:20px;line-height:1.5;margin:0 0 30px}
.hx .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hx-team{display:block;width:min(1180px,100%);aspect-ratio:1600/893;margin-top:10px;background:url(../images/hero-team3.webp) center bottom/cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 14%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 14%);mask-composite:intersect}
@media(max-width:760px){.hx{padding-top:112px}.hx p{font-size:18px}}

/* a page whose first screen is the hero (the home page and the employers page): the menu bar starts transparent so it blends into the hero,
   and gets a cream background and a thin line once the page is scrolled (pieces.js adds .scrolled) */
body.hero-page nav{position:sticky;top:0;z-index:20;margin-bottom:-73px;background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .2s,border-color .2s}
body.hero-page nav.scrolled{background:rgba(248,240,228,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}

/* bold hero (employers page, after wise.com): one colour block, one huge headline, one button, three step cards rising into the first screen */
.hb{position:relative;margin-top:24px;border-radius:24px 24px 0 0;background:var(--orange);padding:64px 20px 0;text-align:center;overflow:hidden}
.hb h1{font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:700;max-width:14ch;margin:0 auto}
.hb>p{font-size:21px;max-width:40ch;margin:20px auto 28px;color:#2b1a08}
.hb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;text-align:left}
.hb-steps>div{padding:28px 28px 34px;border-radius:24px 24px 0 0;background:var(--ink);color:#fff;min-height:210px}
.hb-steps>div:nth-child(2){background:#2a2520;margin-top:24px}
.hb-steps>div:nth-child(3){background:#3d2a14;margin-top:48px}
.hb-steps b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--ink);font-weight:600;margin-bottom:14px}
.hb-steps h3{font-size:24px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.hb-steps p{font-size:17px;color:#d9d0c4;margin:0;max-width:30ch}
@media(max-width:900px){.hb{padding-top:44px}.hb-steps{grid-template-columns:1fr;margin-top:36px}.hb-steps>div:nth-child(n){margin-top:0;min-height:0}}

/* group tickets (employers roles section): one boarding pass per group of roles, the roles listed on it */
.gr-passes{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.gr-passes .bp{min-height:230px}
.gr-passes .bp .main{justify-content:flex-start}
.gr-passes .bp h3{font-size:clamp(26px,3vw,36px)}
.gr-pl{list-style:none;padding:0;margin-top:14px;display:grid;gap:6px;font-size:18px;font-weight:500}
.gr-pl li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:10px}
@media(max-width:860px){.gr-passes{grid-template-columns:1fr;gap:16px}}

/* roles table: one row per role, grouped by kind of work. Fed from ROLE_GROUPS in tools/build_pages.py, so it can grow */
.rt-wrap{width:var(--rt-w,100%);margin-left:auto;margin-right:auto;border-radius:24px;overflow:hidden;background:var(--card);box-shadow:var(--lift)}
.rt{width:100%;border-collapse:collapse;text-align:left}
/* column widths are percentages of the table, set per table with --c1 to --c4 (and the table itself with --rt-w, a percentage of its container).
   The numbers live in TABLE_WIDTHS in website/tools/build_pages.py; each set of columns must add up to 100. */
.rt.pct{table-layout:fixed}
.rt.pct col.c1{width:var(--c1)}.rt.pct col.c2{width:var(--c2)}.rt.pct col.c3{width:var(--c3)}.rt.pct col.c4{width:var(--c4)}
.rt-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rt thead th{background:var(--ink);color:#d9d0c4;font-size:16px;font-weight:500;padding:16px 24px}
.rt thead th:last-child{text-align:right;white-space:nowrap}
.rt tbody{border-top:1px solid var(--line)}
.rt tbody:first-of-type{border-top:0}
.rt td,.rt th.rt-g{padding:14px 24px;vertical-align:middle}
.rt tr+tr td{border-top:1px solid var(--line)}
.rt th.rt-g{vertical-align:top;padding-top:22px;font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.2;background:#faf4e9;border-right:1px solid var(--line)}
.rt th.rt-g small{display:block;margin-top:4px;font-size:16px;font-weight:400;letter-spacing:0;color:var(--mut)}
.rt .rt-r{font-size:19px;font-weight:500}
.rt .rt-a{text-align:right;white-space:nowrap}
.rt tbody tr:hover td{background:#fff7ec}
.rt-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:40px;background:var(--sand);font-size:16px;font-weight:500;transition:background .2s,color .2s}
.rt-go i{font-style:normal;transition:transform .2s}
.rt-go:hover{background:var(--ink);color:#fff}.rt-go:hover i{transform:translateX(3px)}
@media(max-width:760px){
  .rt-wrap{width:100%}
  .rt colgroup{display:none}
  .rt,.rt tbody,.rt tr,.rt td,.rt th{display:block}
  .rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt th.rt-g{flex:0 0 calc(100% + 40px);margin:0 -20px;width:auto;border-right:0;padding:18px 20px 12px;background:#faf4e9}
  .rt tr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;padding:0 20px;border-top:1px solid var(--line)}
  .rt tr:first-child{border-top:0}
  .rt td{padding:10px 0;border-top:0!important}
  .rt .rt-a{width:auto}
}

/* dark band: the request-to-arrival steps as five big numbered columns (Alex picked option C) */
.st-note{display:inline-block;padding:6px 16px;border-radius:40px;background:var(--soft);font-size:17px;font-weight:500}
.st-c{padding:48px;border-radius:24px;background:var(--ink);color:#fff}
.st-c .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:36px}
.st-c h2{font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:#fff}
.st-c .st-note{background:var(--orange);color:var(--ink)}
.st-c .cols{display:grid;grid-template-columns:repeat(5,1fr)}
.st-c .col{padding:0 22px;border-left:1px solid #4a423a}
.st-c .col:first-child{padding-left:0;border-left:0}
.st-c .col b{display:block;font-size:56px;line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--orange);margin-bottom:18px}
.st-c .col h3{font-size:21px;font-weight:600;margin-bottom:8px;line-height:1.2}
.st-c .col p{font-size:17px;color:#d9d0c4}
@media(max-width:1000px){.st-c{padding:30px 22px}.st-c .cols{grid-template-columns:1fr;gap:24px}.st-c .col{padding:20px 0 0;border-left:0;border-top:1px solid #4a423a}.st-c .col:first-child{border-top:0;padding-top:0}}

/* the same table in two more places: two columns on the home page (.rt.two) and the job list on Find jobs (.rt.jobs) */
.rt .rt-r small{display:block;margin-top:2px;font-size:16px;font-weight:400;color:var(--mut)}
.rt tfoot td{background:var(--ink);color:#fff;border-top:0;padding:18px 24px;vertical-align:middle}
.rt tfoot .rt-r{font-size:20px;font-weight:600}
.rt tfoot .rt-r small{color:#d9d0c4}
.rt-go.dk{background:var(--orange);color:var(--ink)}.rt-go.dk:hover{background:#fff;color:var(--ink)}
.rt-go.off{background:#e9dfcf;color:#5c544a;pointer-events:none}
.rt .fl{display:inline-block;width:24px;height:18px;border-radius:4px;object-fit:cover;box-shadow:0 1px 4px rgba(60,40,20,.25);margin-right:10px;vertical-align:-3px}
.rt.jobs td{vertical-align:middle}
.rt.jobs .rt-r b{font-size:21px;font-weight:600;letter-spacing:-.01em}
.rt.jobs .rt-r .tag{margin-left:10px;vertical-align:2px}
.rt.jobs td small{display:block;margin-top:2px;font-size:16px;color:var(--mut)}
.rt.jobs td{font-size:18px}
@media(max-width:760px){
  .rt tfoot{display:block;background:var(--ink)}
  .rt tfoot tr{padding:14px 20px;border-top:0}
  .rt tfoot td{padding:4px 0}
  .rt.two td.rt-r{flex:1 1 0;min-width:0}
  .rt.jobs tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px 20px}
  .rt.jobs td{padding:0;border-top:0!important}
  .rt.jobs td:nth-child(1){grid-column:1/-1}
  .rt.jobs td:nth-child(2),.rt.jobs td:nth-child(3){grid-column:1}
  .rt.jobs td.rt-a{grid-column:2;grid-row:2/4;align-self:center}
}

/* Bento grid (employers: why employers choose us). One big card, a photo card with a frosted label, one small card. */
.bn{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:28px}
.bn h3{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;line-height:1.2}
.bn p{font-size:18px;color:var(--mut)}
.bn .big{grid-row:span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:44px 36px;border-radius:24px;background:var(--card);box-shadow:var(--lift)}
.bn .disc{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--ink);box-shadow:0 14px 34px rgba(60,40,20,.22)}
.bn .disc img{width:56%;height:auto;display:block}
.bn .big p{max-width:30ch;margin:0 auto}
.bn .pic{position:relative;min-height:320px;border-radius:24px;overflow:hidden;box-shadow:var(--lift)}
.bn .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.bn .pic .g{position:absolute;left:14px;right:14px;bottom:14px;padding:16px 20px;border-radius:18px;background:rgba(255,253,249,.9);backdrop-filter:blur(10px)}
.bn .pic .g h3{margin-bottom:2px}
.bn .low{padding:32px;border-radius:24px;background:var(--card);box-shadow:var(--lift);display:flex;flex-direction:column;justify-content:center}
@media(max-width:1000px){.bn{grid-template-columns:1fr}.bn .big{grid-row:auto;padding:36px 24px}}
@media(max-width:560px){
  .bn{gap:12px;margin-top:20px}
  .bn .big{flex-direction:row;text-align:left;align-items:center;gap:16px;padding:22px 20px}
  .bn .disc{flex:none;width:64px;height:64px}
  .bn .big h3{font-size:24px}
  .bn .big p{margin:0;max-width:none}
  .bn .pic{min-height:0;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end}
  .bn .pic img{object-position:50% 18%}
  .bn .pic .g{position:relative;left:auto;right:auto;bottom:auto;margin:0 10px 10px;padding:14px 16px}
  .bn .low{padding:22px 20px}
}

/* Photo bento (employers: why hire from Kenya). A tall photo card, a wide card with a faded photo, a photo card, a tinted card. */
.kb{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"y t t" "y l f";gap:16px;margin-top:28px}
.kb>div{position:relative;border-radius:24px;background:var(--card);box-shadow:var(--lift);overflow:hidden}
.kb h3{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;line-height:1.2}
.kb p{font-size:18px;color:var(--mut)}
.kb img{display:block}
.kb .y{grid-area:y;min-height:520px}
.kb .y>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.kb .y .g{position:absolute;left:14px;right:14px;bottom:14px;padding:18px 20px;border-radius:18px;background:rgba(255,253,249,.92);backdrop-filter:blur(10px);box-shadow:var(--lift)}
.kb .y .g h3{margin-bottom:2px}
.kb .t{grid-area:t;display:flex;flex-direction:column;justify-content:center;padding:32px 36px;min-height:240px}
.kb .t>img{position:absolute;right:0;top:0;width:44%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%)}
.kb .t .in{position:relative;width:56%}
.kb .pills{display:flex;gap:8px;margin-top:16px}
.kb .pills span{padding:8px 16px;border-radius:40px;background:var(--soft);font-size:17px;font-weight:500}
.kb .l{grid-area:l;display:flex;flex-direction:column}
.kb .l>img{width:100%;height:150px;object-fit:cover;object-position:50% 30%}
.kb .l .in,.kb .f .in{padding:24px 26px}
.kb .f{grid-area:f;background:var(--soft);display:flex;flex-direction:column;justify-content:center}
@media(max-width:1000px){
  .kb{grid-template-columns:1fr;grid-template-areas:"y" "t" "l" "f"}
  .kb .y{min-height:0;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end}
  .kb .y .g{position:relative;left:auto;right:auto;bottom:auto;margin:0 10px 10px}
  .kb .t{min-height:0;padding:0}
  .kb .t>img{position:relative;width:100%;height:190px;-webkit-mask-image:none;mask-image:none}
  .kb .t .in{width:auto;padding:22px 20px}
}
@media(max-width:560px){
  .kb{gap:12px;margin-top:20px}
  .kb .y{aspect-ratio:1/1}
  .kb .y>img{object-position:50% 25%}
  .kb .t>img{height:160px}
  .kb .l>img{height:150px}
  .kb .l .in,.kb .f .in{padding:20px}
}

/* WEIGHTS, fixed site-wide to match the home page (Alex, 24 Oct 2026): hero and page headline 700, section titles 600,
   card titles and question rows 500, text 400. Buttons, menu links and labels keep 500. !important on purpose: no piece may change these. */
h1{font-weight:700!important}
h2{font-weight:600!important}
h3,summary{font-weight:500!important}
p{font-weight:400!important}

/* TYPE STANDARDS (Alex, 24 Oct 2026). One size, weight and colour per role. Documented in docs/design_rules.md and the style guide.
   Change a number here and every use follows. Text on dark or photo backgrounds keeps a light colour (contrast). */
:root{
  --t-hero:clamp(44px,7vw,96px);   /* hero headline h1: 700, ink, line 0.98, letter -.045em, once per page */
  --t-h1:clamp(38px,5vw,64px);     /* page title h1 (form and legal pages): 700, line 1.04, letter -.035em */
  --t-h2:clamp(28px,3.4vw,44px);   /* section title h2: 600, line 1.1, letter -.03em */
  --t-h3:22px;                     /* card and row title h3: 500, line 1.2, letter -.01em */
  --t-lead:20px;                   /* lead line: 400, muted, line 1.45 */
  --t-body:18px;                   /* body text: 400, muted, line 1.5 */
  --t-small:16px;                  /* labels, buttons, small print people must read: 500 */
  --w-title:600;--w-card:500;--w-text:400;
  --c-title:var(--ink);--c-body:var(--mut);--c-title-dark:#fff;--c-body-dark:#d9d0c4;
}
.t-hero{font-size:var(--t-hero);font-weight:700;line-height:.98;letter-spacing:-.045em;color:var(--c-title)}
.t-h1{font-size:var(--t-h1);font-weight:700;line-height:1.04;letter-spacing:-.035em;color:var(--c-title)}
.t-h2{font-size:var(--t-h2);font-weight:var(--w-title);line-height:1.1;letter-spacing:-.03em;color:var(--c-title)}
.t-h3{font-size:var(--t-h3);font-weight:var(--w-card);line-height:1.2;letter-spacing:-.01em;color:var(--c-title)}
.t-lead{font-size:var(--t-lead);font-weight:var(--w-text);line-height:1.45;color:var(--c-body)}
.t-body{font-size:var(--t-body);font-weight:var(--w-text);line-height:1.5;color:var(--c-body)}
.t-small{font-size:var(--t-small);font-weight:var(--w-text);line-height:1.5;color:var(--c-body)}
.on-dark .t-hero,.on-dark .t-h1,.on-dark .t-h2,.on-dark .t-h3{color:var(--c-title-dark)}
.on-dark .t-lead,.on-dark .t-body,.on-dark .t-small{color:var(--c-body-dark)}

/* The employers page follows the standards */
main .hb h1{font-size:var(--t-hero)}
main .sec>h2,main .st-c h2,main .cta2 h2,main .pf h2{font-size:var(--t-h2);font-weight:var(--w-title);line-height:1.1;letter-spacing:-.03em;max-width:none}
main .hb-steps h3,main .st-c .col h3,main .bn h3,main .kb h3,main #pricing h3,main .qa summary{font-size:var(--t-h3);font-weight:var(--w-card);line-height:1.2;letter-spacing:-.01em}
main .hb>p,main .sec .sub,main .cta2 p,main .fhead p{font-size:var(--t-lead);font-weight:var(--w-text);line-height:1.45}
main .hb-steps p,main .st-c .col p,main .bn p,main .kb p,main .pp,main #roles p:not(.sub),main .qa .a{font-size:var(--t-body);font-weight:var(--w-text);line-height:1.5}
main .bn p,main .kb p,main .pp,main #roles p:not(.sub),main .qa .a{color:var(--c-body)}
main .pp{max-width:52ch;margin-bottom:16px}
main .pp b{font-weight:inherit;color:inherit}
main .ticks li{font-size:var(--t-body);font-weight:var(--w-text);line-height:1.5;color:var(--c-body)}
main .fhead h1{font-size:var(--t-h1)}

/* Call-to-action block (after the questions on the employers page). Soft warm card, dotted pattern, centred. */
.cta2{position:relative;text-align:center;padding:56px 32px;border-radius:24px;background:linear-gradient(120deg,#fdebd6,#f8d6ad);box-shadow:var(--lift);overflow:hidden}
.cta2::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(168,86,10,.22) 1.4px,transparent 1.4px);background-size:16px 16px;-webkit-mask-image:radial-gradient(ellipse at center,#000 0,transparent 62%);mask-image:radial-gradient(ellipse at center,#000 0,transparent 62%)}
.cta2>*{position:relative}
.cta2 h2{max-width:18ch;margin:0 auto 14px;text-wrap:balance}
.cta2 p{max-width:46ch;margin:0 auto 28px;color:#4a4036}
@media(max-width:560px){.cta2{padding:40px 20px}}

/* Photo and text (employers: how pricing works). A photo card on the left, title, text, ticks and button on the right. */
.pf{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pf .ph{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--lift-hi);min-height:500px}
.pf .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.pf .txt h2{margin-bottom:14px}
.pf .txt h3{margin:22px 0 12px}
.pf .txt .ticks{margin:0 0 20px}
.pf .txt .pp{margin-bottom:20px}
.pf .txt .btn{margin-top:6px}
@media(max-width:1000px){.pf{grid-template-columns:1fr;gap:28px}.pf .ph{min-height:0;aspect-ratio:4/3}}

/* Find jobs search bar: fields are white with a faint shadow so they stand out from the sand bar (Alex, 24 Oct 2026). */
.fj-bar .fld input,.fj-bar .dd-btn{background:#fff;box-shadow:0 2px 10px rgba(60,40,20,.10)}

/* Trust cards (home page: you can check that we are real). Cards with an icon circle and a small built-in visual each:
   a licence card, two membership cards, a company paper, the office photo, a message card. Our own line icons. */
.tz h3{font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1.2;margin-bottom:6px;color:var(--ink)}
.tz p{font-size:18px;color:var(--mut);line-height:1.5;overflow-wrap:break-word}
.tz img{display:block}
.tz-h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.tz .ic{width:24px;height:24px;flex:none}
.tz-bub{display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid #efe4d3;box-shadow:0 6px 18px rgba(60,40,20,.10)}
.tz-bub.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.tz-bub.or{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.tz-card{position:relative;border-radius:24px;background:linear-gradient(180deg,#fffdf9 0%,#f7efe3 100%);border:1px solid #efe3d1;box-shadow:var(--lift);overflow:hidden}
.tz-disc{display:grid;place-items:center;border-radius:50%;background:var(--ink);box-shadow:0 14px 34px rgba(60,40,20,.25)}
.tz-disc img{width:56%;height:auto}

/* D: cards with built-in visuals and an icon on each card (round 2 D, icons instead of pictures) */
.tz-d .head{text-align:center;margin-bottom:36px}
.tz-d .top{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tz-d .bot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.tz-d .tz-card{padding:30px;min-height:430px;display:flex;flex-direction:column}
.tz-d .tz-card>.tz-bub{margin-bottom:18px}
.tz-d .bot .tz-card{min-height:290px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.tz-d .bot .tz-card .tz-bub{margin-bottom:16px}
.tz-d .vis{margin-top:auto;display:grid;place-items:center;min-height:280px;position:relative}
.tz-idc{width:min(100%,280px);padding:18px;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(60,40,20,.14);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;transform:rotate(-3deg)}
.tz-idc .tz-disc{width:48px;height:48px;margin-bottom:4px}
.tz-idc small{font-size:16px;color:var(--mut)}
.tz-idc b{font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.tz-idc .chips{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.tz-idc .chips span{padding:4px 12px;border-radius:40px;background:var(--soft);font-size:16px;text-align:center}
.tz-mem{position:relative;width:min(240px,100%);padding:16px;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(60,40,20,.14);font-size:17px;line-height:1.35;color:var(--ink)}
.tz-mem small{display:flex;align-items:center;gap:6px;font-size:16px;color:var(--mut);margin-bottom:4px}
.tz-mem small .ic{width:16px;height:16px;color:var(--orange)}
.tz-d .vis{gap:16px;align-content:center}
.tz-d .vis{padding-top:22px}
.tz-mem.m1{transform:translateX(-22px) rotate(-4deg)}.tz-mem.m2{transform:translateX(22px) rotate(3deg)}
.tz-doc{width:min(100%,250px);padding:18px 20px;border-radius:12px;background:#fff;box-shadow:0 10px 28px rgba(60,40,20,.14);transform:rotate(3deg)}
.tz-doc i{display:block;height:8px;border-radius:4px;background:#efe6d8;margin:8px 0}
.tz-doc i.s{width:60%}
.tz-doc b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;margin:10px 0 2px;color:var(--ink)}
.tz-doc small{display:block;margin-top:4px;font-size:16px;color:var(--mut)}
.tz-loc{position:relative;border-radius:18px;overflow:hidden;height:230px}
.tz-loc img{width:100%;height:100%;object-fit:cover;object-position:50% 75%}
.tz-loc .chip{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:40px;background:rgba(255,253,249,.94);font-size:16px;font-weight:500}
.tz-loc .chip .ic{width:16px;height:16px}
.tz-note{position:relative}
.tz-note .nt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(60,40,20,.12);font-size:17px;line-height:1.35;color:var(--ink);position:relative;z-index:1}
.tz-note .nt>div{min-width:0;overflow-wrap:anywhere}
.tz-note .nt small{display:block;font-size:16px;color:var(--mut)}
.tz-note .nt .tz-bub{width:44px;height:44px}
.tz-note .back{height:14px;margin:0 14px;border-radius:0 0 14px 14px;background:#fff;opacity:.75;box-shadow:0 6px 14px rgba(60,40,20,.08)}
.tz-note .back.b2{margin:0 28px;opacity:.45}

@media(max-width:1000px){
  .tz-d .top,.tz-d .bot{grid-template-columns:1fr}.tz-d .tz-card{min-height:0}.tz-d .bot .tz-card{grid-template-columns:minmax(0,1fr)}
  .tz-d .vis{min-height:220px}.tz-d .tz-card>.tz-bub{margin-bottom:12px}.tz-loc{height:190px}
}
@media(max-width:560px){
  .tz-d .tz-card{padding:24px 20px}.tz-mem{width:min(240px,100%)}.tz-mem.m1{transform:translateX(-12px) rotate(-4deg)}.tz-mem.m2{transform:translateX(12px) rotate(3deg)}
}

/* Table that fades out at the bottom with a "View more" button over the fade (home page roles table). The button opens the full list on another page. */
/* the card itself fades out at the bottom: its fill is a masked layer behind the table, so no bottom edge or corners are left */
.rt-wrap.fade{position:relative;overflow:visible;background:none;box-shadow:none;filter:drop-shadow(0 8px 18px rgba(60,40,20,.07))}
.rt-wrap.fade::before{content:"";position:absolute;inset:0;z-index:0;border-radius:24px;background:var(--card);-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 86%);mask-image:linear-gradient(to bottom,#000 40%,transparent 86%)}
.rt-wrap.fade .rt{position:relative;z-index:1;-webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 90%);mask-image:linear-gradient(to bottom,#000 42%,transparent 90%)}
.rt-wrap.fade .rt thead th:first-child{border-top-left-radius:24px}
.rt-wrap.fade .rt thead th:last-child{border-top-right-radius:24px}
.rt-wrap.fade::after{display:none}
.rt-wrap.fade .rt-more{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;justify-content:center}
.rt-wrap.fade .rt-more .btn{box-shadow:0 10px 26px rgba(60,40,20,.22)}
.rt-wrap.fade tbody tr:last-child td{border-bottom:0}
.rt-wrap.fade .rt{margin-bottom:0}
@media(max-width:1000px){.rt-wrap.fade::after{height:170px}.rt-wrap.fade .rt-more{bottom:20px}}
/* ===== #044 phone and footer polish: START (one block, the same text sits at the end of pages.css and pieces.css; a test keeps the two copies equal) ===== */
/* D-022: a short page keeps its footer at the bottom of the screen (no band of empty colour under it). */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}
main>:last-child{margin-bottom:0}
/* D-021: the two small-print lines sit on one centre line, the link columns never squeeze, every footer link looks the same.
   "body footer" makes these win over the older footer rules that sit inside some pages. */
body footer .small{align-items:center;row-gap:0}
body footer .small a{display:inline;padding:14px 8px;margin:0 -4px}
body footer .grid a{overflow-wrap:anywhere}
@media(hover:none){body footer .grid a:hover{color:#cfc5b8}}
@media(max-width:900px){body footer .grid{gap:8px 32px}body footer .grid>div:last-child{grid-column:span 2}body.hasbar footer{padding-bottom:156px}}
@media(max-width:480px){body footer .grid{grid-template-columns:minmax(0,1fr);gap:20px}body footer .grid .who,body footer .grid>div:last-child{grid-column:auto}body footer .grid a{padding:10px 0}body footer .small{flex-direction:column;align-items:flex-start;gap:0}}
/* D-032: the two FAQ tab buttons have the same corner as every other button. */
.tabs button{border-radius:40px}
/* D-016: on a phone the green WhatsApp button is only its icon, on every page. While a box is being typed in it steps aside. */
@media(max-width:760px){
  body .wa{width:48px;height:48px;padding:0;justify-content:center;gap:0;font-size:0;right:12px;bottom:16px}
  body.hasbar .wa{bottom:84px}
  body:has(input:focus,textarea:focus,select:focus) .wa{display:none}
}
/* D-025: a link inside a sentence gets a tap area of at least 44px high and wide on a phone. Vertical padding on an inline link does not
   move the lines; the sideways padding is taken back with an equal negative margin, so the text sits where it did. */
@media(max-width:760px){
  main p a:not(.btn):not(.jt):not(.back),main li a:not(.btn):not(.jt),main dd a:not(.btn),main span a:not(.btn):not(.jt),main label a:not(.btn),.qa .a a:not(.btn){padding:12px 6px;margin:0 -6px}
}
/* ===== #044 phone and footer polish: END ===== */

/* ---- #043 the email in the home trust card stays in ONE piece: its own line, never split, small enough to fit ---- */
.tz-d .mail{display:inline-block;white-space:nowrap;font-size:15px}
.tz-note .nt{grid-template-columns:1fr;justify-items:start;gap:10px}
.tz-note .nt .em{display:block;white-space:nowrap;font-size:15px}
/* two cards side by side only where the text column is wide enough for the address (about 245px) */
@media(max-width:1199px){.tz-d .bot .tz-card{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1200px){.tz-note .nt{padding:14px 12px}.tz-note .nt .em{font-size:14px}}