/* ============================================================
   Ludi Talent Ltd — site stylesheet
   Ludi Recruitment: stone #F1ECE5 with black
   Ludi Sport:       racing green #1C3C2F with white
   One stylesheet for the whole site. Edit values below.
   ============================================================ */

:root{
  --stone:#F1ECE5;
  --ink:#000000;
  --ink-80:rgba(0,0,0,.80);
  --ink-64:rgba(0,0,0,.64);
  --ink-45:rgba(0,0,0,.58);   /* meets AA contrast on stone for small caps labels */
  --rule:rgba(0,0,0,.16);
  --rule-soft:rgba(0,0,0,.09);

  --green:#1C3C2F;            /* single Ludi Sport colour token — used everywhere */
  --white:#FFFFFF;
  --white-72:rgba(255,255,255,.72);
  --white-45:rgba(255,255,255,.45);
  --rule-light:rgba(255,255,255,.22);

  --font:"Helvetica Neue",Helvetica,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  --wrap:1160px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(56px,7vw,96px);   /* the single gap between sections */
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit;}

::selection{background:var(--ink);color:var(--stone);}

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

/* Vertical rhythm: a plain section owns the space ABOVE it and nothing below,
   so consecutive sections never stack two paddings. Filled blocks (the black
   contact band, the Ludi Sport green sections) need space on both sides. */
.section{padding:var(--section) 0 0;}

/* Filled blocks carry padding on both sides, and take their own space above
   so the preceding section's content never sits flush against the colour
   change. The first block on a page needs no space above it. */
.section.contact-band,
.section.on-green,
.page-hero.on-green{padding:var(--section) 0;}
main > .section.contact-band,
main > .section.on-green{margin-top:var(--section);}
main > :first-child{margin-top:0;}

/* ---------- Type ---------- */

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08;}

h1{font-size:clamp(2.3rem,6.2vw,4.15rem);}
h2{font-size:clamp(1.75rem,3.9vw,2.85rem);line-height:1.12;}
h3{font-size:clamp(1.05rem,1.7vw,1.25rem);letter-spacing:-.01em;line-height:1.25;}

p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.lead{font-size:clamp(1.05rem,1.75vw,1.32rem);line-height:1.55;color:var(--ink-80);max-width:36em;}

.label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin:0 0 1.4rem;
}

.note{font-size:.95rem;color:var(--ink-64);}

.section-head{max-width:44rem;margin-bottom:clamp(36px,5vw,60px);}
.section-head p{margin-top:1.1rem;color:var(--ink-64);max-width:34em;}

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

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.6em;
  border:1px solid var(--ink);
  border-radius:2px;
  font-size:.95rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;
  background:transparent;color:var(--ink);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--ink);color:var(--stone);}
.btn--solid{background:var(--ink);color:var(--stone);}
.btn--solid:hover{background:transparent;color:var(--ink);}
.btn--light{border-color:var(--white);color:var(--white);}
.btn--light:hover{background:var(--white);color:var(--green);}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,40px);}
@media (max-width:520px){
  .btn-row .btn{flex:1 1 100%;justify-content:center;}
}

.arrow{
  display:inline-flex;align-items:center;gap:.55em;
  text-decoration:none;font-weight:600;font-size:.98rem;
  border-bottom:1px solid var(--rule);
  padding-bottom:.25em;
  transition:border-color .18s ease,gap .18s ease;
}
.arrow:hover{border-color:var(--ink);gap:.85em;}
.arrow--light{border-bottom-color:var(--rule-light);color:var(--white);}
.arrow--light:hover{border-bottom-color:var(--white);}

/* ---------- Header ---------- */

/* LOCKED GLOBAL RULE — do not change per page.
   Every page on the site, Ludi Recruitment and Ludi Sport alike, uses this
   same header: the universal LUDI logo, sticky at the top, always linking
   back to the main homepage. The Ludi Recruitment and Ludi Sport logos are
   used only inside page content and brand sections, never in the header. */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--stone);
  border-bottom:1px solid var(--rule-soft);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  min-height:168px;   /* logo height + clear space, nothing more */
}
.brand{display:block;line-height:0;}
.brand img{height:133px;width:auto;}   /* universal LUDI logo — desktop (105px + 27%) */

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);}
.nav a{
  text-decoration:none;font-size:.94rem;font-weight:500;
  color:var(--ink-80);
  padding:.4em 0;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}

/* Ludi Sport sits in the same nav as green text, not a filled button. */
.nav .nav-sport{color:var(--green);font-weight:600;}
.nav .nav-sport:hover,.nav .nav-sport[aria-current="page"]{color:var(--green);border-bottom-color:var(--green);}
.nav .nav-cta{
  border:1px solid var(--ink);border-radius:2px;
  padding:.6em 1.1em;color:var(--ink);font-weight:600;
}
.nav .nav-cta:hover{background:var(--ink);color:var(--stone);border-bottom-color:var(--ink);}

.nav-toggle{
  display:none;
  background:none;border:1px solid var(--ink);border-radius:2px;
  padding:.7em 1em;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--ink);cursor:pointer;
}

@media (max-width:900px){
  .header-inner{min-height:138px;}
  .brand img{height:104px;}            /* universal LUDI logo — mobile (82px + 27%) */
  .nav-toggle{display:block;}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--stone);
    border-bottom:1px solid var(--rule);
    padding:8px var(--gutter) 28px;
  }
  .nav[data-open="true"]{display:flex;}
  .nav a{padding:1em 0;border-bottom:1px solid var(--rule-soft);font-size:1.05rem;}
  .nav .nav-cta{margin-top:18px;text-align:center;border-bottom-color:var(--ink);}
}

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

.hero{padding:clamp(40px,5vw,72px) 0 0;}
.hero h1{max-width:19ch;}
.hero .lead{margin-top:clamp(22px,3vw,30px);}
.hero-foot{
  margin-top:clamp(40px,6vw,64px);
  padding-top:22px;
  border-top:1px solid var(--rule);
  font-size:.95rem;
  color:var(--ink-64);
  letter-spacing:.01em;
}

/* ---------- Numbered grid ---------- */

.grid{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}

.cell{background:var(--stone);padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,32px);}
.cell .num{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.2em;
  color:var(--ink-45);margin-bottom:1.4rem;
}
.cell h3{margin-bottom:.7rem;}
.cell p{font-size:.97rem;color:var(--ink-64);}

@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr;}
}

/* ---------- Split section ---------- */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}

/* ---------- Two brands ---------- */

.brands{display:grid;grid-template-columns:1fr 1fr;}
@media (max-width:820px){.brands{grid-template-columns:1fr;}}

.brand-panel{padding:clamp(40px,5.5vw,72px) clamp(26px,4vw,56px);display:flex;flex-direction:column;}
.brand-panel .panel-logo{margin-bottom:clamp(26px,3.5vw,38px);}
.brand-panel .panel-logo img{height:118px;width:auto;}
.brand-panel h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.8rem;}
.brand-panel p{font-size:1rem;}
.brand-panel .arrow{margin-top:auto;padding-top:clamp(26px,3vw,34px);align-self:flex-start;}

.panel--recruitment{background:var(--stone);border:1px solid var(--rule);}
.panel--recruitment p{color:var(--ink-64);}
.panel--sport{background:var(--green);color:var(--white);border:1px solid var(--green);}
.panel--sport p{color:var(--white-72);}

/* ---------- Roles ---------- */

.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:900px){.roles{grid-template-columns:1fr;}}

.role{
  display:flex;flex-direction:column;
  border:1px solid var(--rule);
  padding:clamp(24px,2.8vw,32px);
  text-decoration:none;
  background:var(--stone);
  transition:border-color .18s ease,transform .18s ease;
}
.role:hover{border-color:var(--ink);}
.role .meta{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);margin-bottom:1.5rem;}
.role h3{margin-bottom:.55rem;}
.role .where{font-size:.97rem;color:var(--ink-64);}
.role .pay{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--rule-soft);font-size:.97rem;font-weight:600;}

.roles-foot{margin-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;}

/* ---------- Contact band ---------- */

.contact-band{background:var(--ink);color:var(--stone);}
.contact-band h2{max-width:18ch;}
.contact-band p{color:rgba(241,236,229,.78);margin-top:1.2rem;max-width:34em;}
.contact-band .btn{border-color:var(--stone);color:var(--stone);}
.contact-band .btn:hover{background:var(--stone);color:var(--ink);}
.contact-band .mail{
  display:inline-block;margin-top:26px;font-size:.97rem;
  color:rgba(241,236,229,.7);text-decoration:none;
  border-bottom:1px solid rgba(241,236,229,.3);padding-bottom:.2em;
}
.contact-band .mail:hover{color:var(--stone);border-bottom-color:var(--stone);}

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

.site-footer{border-top:1px solid var(--rule);margin-top:var(--section);padding:clamp(44px,5vw,68px) 0 40px;}
.footer-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,48px);}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

.footer-brand img{height:80px;width:auto;margin-bottom:22px;}  /* smaller than the header lockup so the header stays dominant */
.footer-brand p{font-size:.97rem;color:var(--ink-64);max-width:26em;}
.footer-social{display:flex;gap:18px;margin-top:20px;}
.footer-social a{font-size:.92rem;color:var(--ink-64);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.15em;}
.footer-social a:hover{color:var(--ink);border-bottom-color:var(--ink);}

.footer-col h2{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);margin-bottom:1.1rem;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:0;}
.footer-col li a{display:inline-block;padding:.42em 0;}
.footer-col a{font-size:.97rem;color:var(--ink-64);text-decoration:none;}
.footer-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
/* Any link pointing at Ludi Sport carries the Ludi Sport green. */
.link-sport{color:var(--green);font-weight:600;}
.footer-col a.link-sport:hover{color:var(--green);}

.footer-legal{
  margin-top:clamp(46px,6vw,68px);padding-top:26px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:.86rem;color:var(--ink-45);
}
.footer-legal p{margin:0;max-width:60ch;}
.footer-legal nav{display:flex;gap:20px;}
.footer-legal nav a{display:inline-block;padding:.3em 0;}
.footer-legal a{color:var(--ink-45);text-decoration:none;}
.footer-legal a:hover{color:var(--ink);}

/* ---------- Accessibility ---------- */

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--stone);padding:.8em 1.2em;z-index:100;
}
.skip:focus{left:0;}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.panel--sport :focus-visible,.contact-band :focus-visible{outline-color:var(--stone);}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ============================================================
   ADDITIONS FOR INTERIOR PAGES
   ============================================================ */

/* ---------- Interior page hero ---------- */

.page-hero{padding:clamp(36px,4.5vw,64px) 0 0;}
.page-hero h1{max-width:20ch;font-size:clamp(2rem,5vw,3.4rem);}
.page-hero .lead{margin-top:clamp(20px,2.6vw,28px);}

/* ---------- Ludi Sport green sections ----------
   Swaps the token values inside the section, so every component
   in here inverts without needing its own green variant. */

.on-green{
  --stone:#1C3C2F;
  --ink:#FFFFFF;
  --ink-80:rgba(255,255,255,.86);
  --ink-64:rgba(255,255,255,.78);
  --ink-45:rgba(255,255,255,.70);
  --rule:rgba(255,255,255,.24);
  --rule-soft:rgba(255,255,255,.15);
  background:var(--green);
  color:var(--white);
}
.on-green .arrow{color:var(--white);}
.on-green ::selection{background:var(--white);color:var(--green);}

/* ---------- Bullet lists ---------- */

.checklist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.checklist li{background:var(--stone);padding:1.05em 0 1.05em 1.6em;position:relative;font-size:1rem;}
.checklist li::before{content:"";position:absolute;left:0;top:1.55em;width:8px;height:1px;background:var(--ink);}
@media (min-width:760px){.checklist{grid-template-columns:1fr 1fr;}}

.role-list{list-style:none;margin:1.1rem 0 0;padding:0;font-size:.95rem;color:var(--ink-64);}
.role-list li{padding:.35em 0;border-bottom:1px solid var(--rule-soft);}
.role-list li:last-child{border-bottom:0;}

/* ---------- Timeline (About) ---------- */

.timeline{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.timeline-item{background:var(--stone);padding:clamp(24px,3vw,34px) 0;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(18px,3vw,44px);}
.timeline-item .when{font-size:.85rem;font-weight:600;letter-spacing:.06em;color:var(--ink-45);padding-top:.3em;}
.timeline-item h3{margin-bottom:.55rem;}
.timeline-item p{font-size:.97rem;color:var(--ink-64);}
@media (max-width:640px){.timeline-item{grid-template-columns:1fr;gap:10px;}}

/* ---------- Contact ---------- */

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,76px);align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

.field{display:block;margin-bottom:22px;}
.field span{display:block;font-size:.85rem;font-weight:600;letter-spacing:.04em;margin-bottom:.5em;}
.field .hint{display:block;font-weight:400;color:var(--ink-64);font-size:.85rem;letter-spacing:0;margin-top:.35em;}
.field input,.field select,.field textarea{
  width:100%;
  font:inherit;font-size:1rem;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.85em 1em;
}
/* Tick boxes and radio buttons must never take the full-width text-input
   sizing above — it stretches them across the column and pushes them off
   their labels. Only the feedback form uses them; the enquiry form on
   contact.html has none, so this changes nothing there. Kept here rather
   than in the review block below so it holds even if that block is missing
   or has not finished loading. */
.field input[type="radio"],
.field input[type="checkbox"]{
  width:auto;height:auto;
  flex:0 0 auto;
  padding:0;border-radius:0;
}
/* A fieldset used as a field carries no border of its own, so a legend is
   never cut through by a rule. Same reasoning as above: stated at the base
   level so it does not depend on the review block. */
fieldset.field{border:0;margin:0;padding:0;min-width:0;}

.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px;}
.field textarea{min-height:150px;resize:vertical;}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px;background-repeat:no-repeat;padding-right:3em;}

.hp{position:absolute;left:-9999px;}

.contact-routes{list-style:none;margin:0;padding:0;}
.contact-routes li{padding:1.4em 0;border-bottom:1px solid var(--rule-soft);}
.contact-routes li:first-child{padding-top:0;}
.contact-routes h3{margin-bottom:.5rem;}
.contact-routes p{font-size:.97rem;color:var(--ink-64);margin-bottom:.8rem;}

/* ---------- Simple prose (privacy, thanks) ---------- */

.prose{max-width:44rem;}
.prose h2{margin-top:clamp(40px,5vw,64px);margin-bottom:1rem;font-size:clamp(1.4rem,2.4vw,1.9rem);}
.prose h2:first-child{margin-top:0;}
.prose p,.prose li{color:var(--ink-80);}
.prose ul{padding-left:1.2em;}
.prose li{margin-bottom:.5em;}
.prose a{color:var(--ink);}

/* ---------- Purpose / lawful basis list ---------- */

.basis{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:1.4rem 0 0;}
.basis > div{background:var(--stone);padding:1.1em 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(14px,3vw,36px);}
.basis h3{font-size:1rem;margin-bottom:.35rem;}
.basis p{font-size:.95rem;color:var(--ink-64);margin:0;}
@media (max-width:680px){.basis > div{grid-template-columns:1fr;gap:8px;}}

/* ---------- Founder portrait placeholder ---------- */

.founder{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start;}
@media (max-width:760px){.founder{grid-template-columns:1fr;}}

.portrait-placeholder{
  aspect-ratio:4/5;
  border:1px dashed var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:1.5rem;
  color:var(--ink-45);
}
.portrait-placeholder span{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}
.portrait-placeholder small{font-size:.85rem;letter-spacing:0;text-transform:none;font-weight:400;max-width:24ch;line-height:1.45;}

/* ============================================================
   HOMEPAGE COMPONENTS
   Two patterns used once each, so consecutive sections never
   repeat the same visual rhythm.
   ============================================================ */

/* ---------- Value areas: a compact list, not a card grid ---------- */

.values{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.values li{
  border-bottom:1px solid var(--rule);
  padding:clamp(18px,2.4vw,26px) 0;
  display:grid;
  grid-template-columns:minmax(0,20ch) minmax(0,1fr);
  gap:clamp(8px,3vw,44px);
  align-items:baseline;
}
.values h3{font-size:clamp(1.05rem,1.9vw,1.28rem);}
.values p{font-size:.99rem;color:var(--ink-64);margin:0;}
@media (max-width:640px){
  .values li{grid-template-columns:1fr;gap:6px;padding:16px 0;}
}

.values-foot{
  margin-top:clamp(20px,2.6vw,28px);
  font-size:1rem;
  color:var(--ink-80);
  max-width:44em;
}

/* ---------- Process: a numbered vertical timeline ---------- */

.steps{list-style:none;margin:0;padding:0;position:relative;}
.steps::before{
  content:"";position:absolute;left:15px;top:12px;bottom:12px;
  width:1px;background:var(--rule);
}
.steps li{
  position:relative;
  padding:0 0 clamp(18px,2.4vw,26px) 46px;
}
.steps li:last-child{padding-bottom:0;}
.steps .marker{
  position:absolute;left:0;top:0;
  width:31px;height:31px;
  border:1px solid var(--ink);border-radius:50%;
  background:var(--stone);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.steps h3{font-size:clamp(1.02rem,1.7vw,1.18rem);margin-bottom:.3rem;line-height:1.3;}
.steps p{font-size:.97rem;color:var(--ink-64);margin:0;}
@media (min-width:760px){
  .steps{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,64px);}
  .steps::before{display:none;}
  .steps li{padding-bottom:clamp(22px,2.6vw,30px);}
}

/* ---------- Founder portrait ---------- */

.portrait{aspect-ratio:4/5;width:100%;object-fit:cover;display:block;}

/* ============================================================
   MOBILE DENSITY
   Tighter rhythm on small screens. Type sizes and tap targets
   are untouched — only spacing and the footer grid change.
   ============================================================ */

@media (max-width:640px){
  :root{--section:46px;}

  .hero{padding:28px 0 0;}
  .hero-foot{margin-top:26px;padding-top:16px;}
  .page-hero{padding:26px 0 0;}

  /* Brand panels: smaller lockups and tighter padding when stacked */
  .brand-panel{padding:32px 24px;}
  .brand-panel .panel-logo{margin-bottom:20px;}
  .brand-panel .panel-logo img{height:88px;}
  .brand-panel .arrow{padding-top:22px;}

  /* Footer reads as two columns rather than one long list */
  .site-footer{padding:36px 0 30px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px 24px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-brand img{height:64px;margin-bottom:16px;}
  .footer-legal{margin-top:36px;}

  .contact-band .mail{margin-top:20px;}
  .section-head{margin-bottom:26px;}
  .split{gap:22px;}
  .btn-row{margin-top:24px;gap:10px;}
  .values-foot{margin-top:18px;}
  .steps li{padding-bottom:16px;}
}


/* ============================================================
   BACKGROUND BRAND EMBLEM
   The approved universal LUDI master, oversized and very faint,
   used on selected sections only. Decorative: drawn by a
   pseudo-element, so it takes no layout space, is invisible to
   assistive technology and never intercepts a click.
   ============================================================ */

.watermark{position:relative;overflow:hidden;isolation:isolate;}
.watermark > *{position:relative;z-index:1;}
.watermark::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:50%;
  right:-14%;
  width:min(620px,62vw);
  aspect-ratio:3000 / 3313;          /* the master's own proportions */
  transform:translateY(-50%);
  background-image:url("../img/ludi-black-1200.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.028;
}

/* Ludi Sport green sections use the approved white master */
.on-green.watermark::after{
  background-image:url("../img/ludi-sport-white-1200.png");
  opacity:.045;
}

@media (max-width:640px){
  .watermark::after{
    width:min(320px,66vw);
    right:-20%;
    opacity:.028;
  }
  .on-green.watermark::after{opacity:.045;}
}

@media (prefers-reduced-motion:reduce){
  .watermark::after{transition:none;}
}

/* ============================================================
   VACANCIES
   Two related but distinct treatments, so neither repeats the
   card grids used elsewhere:
   .vacancy-list  — compact rows for the homepage snapshot
   .vacancy       — fuller entries on the Live Vacancies page
   ============================================================ */

.vacancy-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.vacancy-list li{border-bottom:1px solid var(--rule);}
.vacancy-list a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 20px;
  align-items:baseline;
  padding:clamp(14px,1.8vw,18px) 0;
  text-decoration:none;
  transition:padding-left .18s ease;
}
.vacancy-list a:hover{padding-left:8px;}
.vacancy-list .role{font-weight:600;font-size:clamp(1rem,1.7vw,1.14rem);line-height:1.3;}
.vacancy-list .where{font-size:.93rem;color:var(--ink-64);grid-column:1;}
.vacancy-list .pay{
  font-size:.95rem;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;grid-row:1 / span 2;grid-column:2;
  align-self:center;
}
@media (max-width:560px){
  .vacancy-list a{grid-template-columns:1fr;}
  .vacancy-list .pay{grid-row:auto;grid-column:1;text-align:left;margin-top:2px;}
}

.vacancy{
  border:1px solid var(--rule);
  padding:clamp(22px,2.6vw,30px);
  margin-bottom:14px;
}
.vacancy:last-of-type{margin-bottom:0;}
.vacancy .meta{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:.8rem;
}
.vacancy h2{font-size:clamp(1.15rem,2.1vw,1.45rem);margin-bottom:.9rem;}
.vacancy dl{margin:0 0 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:.45em 1.4em;font-size:.97rem;}
.vacancy dt{color:var(--ink-45);}
.vacancy dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;}
.vacancy .actions{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;}
.vacancy .actions .btn{font-size:.9rem;padding:.75em 1.25em;}
@media (max-width:480px){
  .vacancy .actions .btn{flex:1 1 100%;justify-content:center;}
}


/* ============================================================
   REVIEW PAGE (review.html)
   Added for the "Share your experience" testimonial form.
   Every rule below is scoped to .review-form, .footer-legal or
   the .sr-only helper, so nothing above this block is affected.
   ============================================================ */

/* Visually hidden but available to screen readers and still
   focusable. Used for the star rating's text labels. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- Field labels and required / optional markers ---------- */

.review-form .field{border:0;margin:0 0 26px;padding:0;}
.review-form .field > label,
.review-form .field > legend{
  display:block;
  font-size:.85rem;font-weight:600;letter-spacing:.04em;
  margin-bottom:.5em;padding:0;
  max-width:36em;
}
/* Overrides the general .field span rule so the marker sits on the
   same line as the question rather than on its own. */
.review-form .field label span,
.review-form .field legend span{display:inline;}
.review-form .field legend .q,
.review-form .field label .q{letter-spacing:.04em;}

/* Required and optional are stated in words, never by colour alone. They sit
   just after the question as quiet supporting text, and never split across
   two lines. */
.review-form .req,
.review-form .opt{
  display:inline-block;
  margin-left:.6em;
  font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
  vertical-align:.05em;
}
.review-form .req{color:var(--ink-64);}
.review-form .opt{color:var(--ink-45);}

.review-form .hint{
  display:block;font-size:.85rem;font-weight:400;letter-spacing:0;
  color:var(--ink-64);margin:.35em 0 .7em;max-width:40em;
}

/* ---------- Radio and checkbox rows ----------
   The control is a REAL, VISIBLE input. It is not hidden and redrawn, so it
   cannot drift away from its wording, and it keeps the browser's own checked,
   focus and high-contrast rendering. The <label> wraps the input, so the
   whole row is clickable and no `for` lookup is involved. */

.review-form .review-options{
  display:flex;flex-wrap:wrap;
  gap:10px 12px;
  margin-top:.3em;
}
.review-form .review-options--stack{flex-direction:column;align-items:stretch;gap:10px;}

.review-form .review-option{
  display:flex;align-items:center;
  gap:12px;
  min-height:48px;                       /* comfortable tap target */
  padding:.7em 1.15em;
  border:1px solid var(--rule);border-radius:2px;
  font-size:1rem;font-weight:400;letter-spacing:0;
  line-height:1.45;
  cursor:pointer;
  background:transparent;
  transition:border-color .16s ease;
}
.review-form .review-option:hover{border-color:var(--ink-45);}
.review-form .review-option:focus-within{outline:2px solid var(--ink);outline-offset:2px;}
.review-form .review-option:has(input:checked){border-color:var(--ink);}

/* The one rule that matters for alignment: the control keeps its own size and
   is never stretched by the full-width sizing that text inputs use. */
.review-form .review-option input[type="radio"],
.review-form .review-option input[type="checkbox"],
.review-form .review-consent-row input[type="checkbox"]{
  appearance:auto;-webkit-appearance:auto;
  width:20px;height:20px;
  flex:0 0 20px;
  min-width:0;
  margin:0;padding:0;
  border:0;border-radius:0;
  accent-color:var(--ink);
  cursor:pointer;
}
.review-form .field .review-option .review-option-text{display:block;margin:0;flex:1 1 auto;min-width:0;}

/* ---------- Consent rows ----------
   The familiar terms-acceptance pattern: box on the left, statement beside
   it, status underneath, the whole row one clickable label. */

.review-form .consent-field{margin-bottom:22px;}

.review-form .field .review-consent-row{
  display:flex;align-items:center;
  gap:16px;
  min-height:48px;
  padding:.9em 1.15em;
  border:1px solid var(--rule);border-radius:2px;
  cursor:pointer;
  transition:border-color .16s ease;
}
.review-form .field .review-consent-row:hover{border-color:var(--ink-45);}
.review-form .field .review-consent-row:focus-within{outline:2px solid var(--ink);outline-offset:2px;}
.review-form .field .review-consent-row:has(input:checked){border-color:var(--ink);}

.review-form .field .review-consent-row input[type="checkbox"]{
  width:22px;height:22px;flex:0 0 22px;
}

.review-form .field .review-consent-row .review-consent-copy{
  margin:0;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.4em;
  flex:1 1 auto;min-width:0;
  font-size:.97rem;font-weight:400;letter-spacing:0;line-height:1.55;
}
.review-form .field .review-consent-row .review-consent-text{display:block;margin:0;}

.review-form .field .review-consent-row .review-status{
  margin:0;
  font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-45);
  white-space:nowrap;
}

/* ---------- Star rating ---------- */

/* Five stars in one compact left-aligned row. The label is the tap target
   (46px, above the 44px minimum) and its padding leaves a 34px star. */
.review-form .star-rating{
  display:flex;flex-wrap:nowrap;justify-content:flex-start;
  gap:4px;margin:.2em 0 .3em;position:relative;
  padding:0;list-style:none;
}
/* As above: the five radio buttons stay in the page for the keyboard and for
   assistive technology, but are clipped to nothing and take no pointer
   events, so only the star labels are clickable. */
.review-form .star-rating input{
  position:absolute;left:0;top:0;
  width:1px;height:1px;opacity:0;margin:0;
  clip-path:inset(50%);
  pointer-events:none;
}
.review-form .star-rating label{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:46px;height:46px;                /* tap target, 44px minimum */
  padding:6px;                           /* leaves a 34px star */
  margin:0;
  cursor:pointer;
  border-radius:2px;
}
.review-form .star-rating svg{
  width:100%;height:100%;
  display:block;
  fill:transparent;
  stroke:var(--ink-45);
  stroke-width:1.1;
  transition:fill .14s ease,stroke .14s ease;
}
.review-form .star-rating label:hover svg{stroke:var(--ink);}
.review-form .star-rating input:focus-visible + label{
  outline:2px solid var(--ink);outline-offset:1px;
}

/* Fill every star up to the one chosen. :has() does this without
   JavaScript; the single-star rule beneath is the fallback for any
   browser that does not support it. */
.review-form .star-rating input:checked + label svg{fill:var(--ink);stroke:var(--ink);}
.review-form .star-rating:has(#rating-1:checked) label:nth-of-type(-n+1) svg,
.review-form .star-rating:has(#rating-2:checked) label:nth-of-type(-n+2) svg,
.review-form .star-rating:has(#rating-3:checked) label:nth-of-type(-n+3) svg,
.review-form .star-rating:has(#rating-4:checked) label:nth-of-type(-n+4) svg,
.review-form .star-rating:has(#rating-5:checked) label:nth-of-type(-n+5) svg{
  fill:var(--ink);stroke:var(--ink);
}

.review-form .rating-readout{
  font-size:.9rem;font-weight:600;color:var(--ink-80);
  margin:0;min-height:1.4em;
}
.review-form .rating-readout:empty{min-height:0;}

/* ---------- Validation messages ---------- */

.review-form .field-error{
  display:block;
  font-size:.9rem;font-weight:600;letter-spacing:0;
  color:var(--ink);
  margin:.6em 0 0;padding-left:1.5em;
  position:relative;max-width:40em;
}
/* A symbol as well as the wording, so the message does not rely on
   position or colour to be recognised as an error. */
.review-form .field-error::before{
  content:"!";
  position:absolute;left:0;top:.05em;
  width:1.05em;height:1.05em;
  border:1px solid var(--ink);border-radius:50%;
  font-size:.82rem;line-height:1.05em;text-align:center;font-weight:700;
}
.review-form [aria-invalid="true"]{border-color:var(--ink);box-shadow:inset 2px 0 0 var(--ink);}
.review-form .review-option:has(input[aria-invalid="true"]),
.review-form .review-consent-row:has(input[aria-invalid="true"]){
  border-color:var(--ink);box-shadow:inset 2px 0 0 var(--ink);
}

.review-form .form-error-summary{
  border:1px solid var(--ink);
  padding:1.1em 1.3em;
  margin:0 0 26px;
}
.review-form .form-error-summary h2{
  font-size:1.05rem;margin:0 0 .6rem;
}
.review-form .form-error-summary ul{margin:0;padding-left:1.2em;font-size:.95rem;}
.review-form .form-error-summary li{margin-bottom:.35em;}
.review-form .form-error-summary li:last-child{margin-bottom:0;}
.review-form .form-error-summary a{color:var(--ink);text-underline-offset:3px;}

.review-form [hidden]{display:none;}

/* ---------- Small screens ---------- */

@media (max-width:520px){
  .review-form .review-options{flex-direction:column;}
  .review-form .review-option{width:100%;}
  .review-form button[type="submit"]{width:100%;justify-content:center;}
  .review-form .star-rating label{width:17vw;height:17vw;max-width:52px;max-height:52px;}
}

/* ---------- Footer legal row ----------
   The legal row now carries a fourth link ("Share your experience"),
   so it is allowed to wrap onto a second line on narrow screens
   rather than overflowing. */

.footer-legal nav{flex-wrap:wrap;gap:12px 20px;}