/* ==========================================================================
   YSN GROUP — design system, v14

   Navy ground, white paper, one gold-amber accent used only where an action
   or a figure has to be found. Mobile first.

   Class names are unchanged from v13 so the markup in app.js and the HTML
   pages keeps working: this file restyles, it does not restructure.
   ========================================================================== */

:root{
  color-scheme: only light;

  --navy-900:#0b1f3a;
  --navy-800:#0f2a4d;
  --navy-700:#16355c;
  --navy-600:#1f4675;

  --paper:#fff;
  --mist:#f2f4f7;
  --mist-200:#e4e8ee;
  --line:#d4dae3;

  --ink:#0e1726;
  --slate:#56637a;
  --faint:#7d8899;

  --gold:#e8a317;            /* actions, figures, active state — nothing else */
  --gold-deep:#a8710a;       /* the accessible form on white */
  --gold-soft:#fdf4e0;

  --ok:#156a3f;
  --ok-soft:#e7f4ec;
  --err:#b3261e;
  --err-soft:#fdecea;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --t-xs:.78rem; --t-sm:.9rem; --t-base:1rem; --t-md:1.13rem;
  --t-lg:1.4rem; --t-xl:1.85rem; --t-2xl:2.3rem; --t-3xl:2.9rem;

  --gutter:20px;
  --maxw:1180px;
  --sec-y:56px;
  --r:4px;
  --r-lg:8px;
}

@media (min-width:820px){
  :root{ --gutter:40px; --sec-y:88px; --t-xl:2.1rem; --t-2xl:3rem; --t-3xl:4.1rem; }
}

/* Archivo carries no Cyrillic, so Russian and Ukrainian set headings in the
   body face instead of dropping to a system fallback mid-page. */
:root:lang(ru), :root:lang(uk){ --display:var(--body); }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--t-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }

/* The phone number is the one channel that reaches us directly, and on a
   phone it is the thing people actually press. At its natural text size it
   was a 21px-tall target; this gives it room to be hit first time. */
a[href^="tel:"],
a[href^="mailto:"]{ display:inline-block; padding:6px 0; min-height:30px; }
/* A phone number and an e-mail address are the two things a candidate
   taps on a phone, and a 21px line is not a target. Both get a 44px
   box on touch screens; on a mouse the padding is invisible. */
@media (hover:none){
  a[href^="tel:"],
  a[href^="mailto:"]{ padding:10px 0; min-height:44px; }
}
@media (max-width:759px){
  a[href^="mailto:"]{ display:inline-block; padding:11px 0; min-height:44px; }
}

/* Any author `display` beats the browser's own [hidden] rule, so a class
   like .tag (display:inline-block) would keep an element visible after the
   script hid it — which is how the "currently hiring" badge appeared on
   categories with no open vacancy. */
[hidden]{ display:none !important; }

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; letter-spacing:-.021em;
  line-height:1.15; margin:0 0 .5em; text-wrap:balance;
  /* Five languages share these headings and some words are very long —
     "конфиденциальности" at h1 size pushed the Russian privacy page 14px
     wider than a 360px phone and made the whole page scroll sideways.
     Breaking the word is better than breaking the layout. */
  overflow-wrap:break-word; hyphens:auto;
}
h1{ font-size:var(--t-2xl); font-weight:800; letter-spacing:-.03em; line-height:1.06; }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-md); }
h4{ font-size:var(--t-base); }
@media (min-width:820px){ h1{ font-size:var(--t-3xl); } h2{ font-size:var(--t-2xl); } }

p{ margin:0 0 1em; max-width:68ch; }
ul,ol{ margin:0 0 1em; padding-left:1.25em; }
li{ margin-bottom:.4em; }

a{ color:var(--navy-700); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--gold-deep); }

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

hr{ border:0; border-top:1px solid var(--line); margin:32px 0; }

.skip{ position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy-900); color:#fff; padding:12px 18px; }
.skip:focus{ left:8px; top:8px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
/* prose column: narrower for readable line length, still centred */
.wrap--article{ max-width:calc(820px + var(--gutter) * 2); }

.muted{ color:var(--slate); }
.small{ font-size:var(--t-sm); }
.center{ text-align:center; }
.lede{ font-size:var(--t-md); color:var(--slate); max-width:62ch; }
@media (min-width:820px){ .lede{ font-size:var(--t-lg); line-height:1.45; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:0 26px;
  border:1.5px solid transparent; border-radius:var(--r);
  font-family:var(--display); font-size:var(--t-md); font-weight:600;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn--gold{ background:var(--gold); color:var(--navy-900); }
.btn--gold:hover{ background:#f5b534; color:var(--navy-900); }
.btn--navy{ background:var(--navy-800); color:#fff; }
.btn--navy:hover{ background:var(--navy-600); color:#fff; }
.btn--line{ background:transparent; color:var(--navy-700); border-color:var(--line); }
.btn--line:hover{ background:var(--mist); color:var(--navy-900); border-color:var(--navy-700); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.btn--ghostline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--ghostline:hover{ background:rgba(255,255,255,.1); color:#fff; }
.btn--wa{ background:#1f9d55; color:#fff; }
.btn--wa:hover{ background:#198246; color:#fff; }
.btn--wide{ width:100%; }
@media (min-width:560px){ .btn--wide{ width:auto; } }

.btnrow{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:60; background:var(--navy-900); color:#fff; }
.hdr__in{ display:flex; align-items:center; gap:16px; min-height:64px; }

.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  letter-spacing:-.03em; color:#fff; text-decoration:none; margin-right:auto;
}
.logo__t{ display:inline-flex; align-items:baseline; gap:.35em; }
/* Scoped to the inner span: .logo span would also match the wrapper
   added around the wordmark and turn "YSN" gold as well. */
.logo__t > span{ color:var(--gold); }
/* The shield is drawn in navy and mid-blue on white. Both the header and the
   footer are navy, so it carries its own white chip; knocking it out to a
   flat white silhouette would lose the two figures and the handshake, which
   is the entire mark. Fixed box so it cannot shift the header as it loads. */
.logo__m{
  width:34px; height:34px; flex:0 0 34px; border-radius:8px;
  background:#fff; padding:3px; box-sizing:border-box;
}
@media (max-width:420px){
  .logo{ gap:8px; font-size:1.12rem; }
  .logo__m{ width:30px; height:30px; flex-basis:30px; }
}

.nav{ display:none; }
@media (min-width:980px){
  .nav{ display:flex; align-items:center; gap:26px; }
  .nav a{
    color:#d6dfea; text-decoration:none; font-size:var(--t-sm); font-weight:600;
    padding:6px 0; border-bottom:2px solid transparent;
  }
  .nav a:hover,.nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--gold); }
}

.hdr__act{ display:flex; align-items:center; gap:10px; }
.hdr__cta{ display:none; }
@media (min-width:980px){ .hdr__cta{ display:inline-flex; min-height:44px; font-size:var(--t-sm); } }

.langsel select{
  width:auto; min-height:40px; padding:0 30px 0 12px;
  background-color:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--r);
  font-family:var(--body); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.03em; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.langsel select:hover{ border-color:var(--gold); }
.langsel select option{ color:var(--ink); background:#fff; }

/* three bars that fold into a cross when the drawer is open */
.burger{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; width:44px; height:44px; padding:0; background:transparent;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--r); cursor:pointer;
}
.burger span{
  display:block; width:19px; height:2px; background:#fff; border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (min-width:980px){ .burger{ display:none; } }

/* mobile drawer */
.mnav{ display:none; background:var(--navy-800); border-top:1px solid rgba(255,255,255,.12); }
.mnav.open{ display:block; }
.mnav .btn{ margin:14px var(--gutter) 18px; width:calc(100% - var(--gutter) * 2); }
@media (min-width:980px){ .mnav{ display:none !important; } }
.mnav a{
  display:block; padding:15px var(--gutter); color:#e3eaf3; text-decoration:none;
  font-weight:600; border-bottom:1px solid rgba(255,255,255,.08);
}
.mnav a:hover{ background:var(--navy-700); color:#fff; }
.mnav .langsel{
  display:flex; gap:6px; padding:14px var(--gutter);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mnav .langsel button{
  flex:1; min-height:44px; font-size:.82rem;
  border:1px solid rgba(255,255,255,.22);
}

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--navy-900); overflow:hidden; }

.hero__img,.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
/* app.js adds .is-on once the clip can actually play, and fades the
   photograph out at the same moment — so a failed download leaves the
   poster photograph in place rather than an empty hero. */
.hero__img{ transition:opacity .6s ease; }
.hero__video{ opacity:0; transition:opacity .6s ease; }
.hero__video.is-on{ opacity:1; }

.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,21,40,.95) 0%, rgba(8,21,40,.78) 48%, rgba(8,21,40,.52) 100%);
}
@media (min-width:820px){
  .hero::after{
    background:linear-gradient(to top,
      rgba(8,21,40,.94) 0%, rgba(8,21,40,.62) 42%, rgba(8,21,40,.34) 100%);
  }
}

.hero__in{
  position:relative; z-index:2;
  padding-block:96px 44px; max-width:var(--maxw);
}
@media (min-width:820px){ .hero__in{ padding-block:160px 86px; } }

.hero h1{ color:#fff; max-width:19ch; }
.hero h1::after{
  content:""; display:block; width:72px; height:4px;
  background:var(--gold); margin:22px 0 20px;
}
.hero__sub{ color:#cfdae8; font-size:var(--t-md); max-width:42rem; margin-bottom:28px; }
@media (min-width:820px){ .hero__sub{ font-size:var(--t-lg); line-height:1.45; } }
.hero__note{
  color:#9fb0c6; font-size:var(--t-sm); max-width:56ch; margin:26px 0 0;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
}

/* one orchestrated entrance; nothing else moves on scroll */
.hero__in>*{ animation:rise .6s cubic-bezier(.2,.65,.3,1) backwards; }
.hero__in>*:nth-child(1){ animation-delay:.05s; }
.hero__in>*:nth-child(2){ animation-delay:.13s; }
.hero__in>*:nth-child(3){ animation-delay:.19s; }
.hero__in>*:nth-child(4){ animation-delay:.25s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }

/* ---------- trust strip ---------- */
.trust{ background:var(--navy-800); color:#fff; }
.trust__grid{
  display:grid; gap:22px 32px; padding-block:34px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .trust__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .trust__grid{ grid-template-columns:repeat(3,1fr); } }
.trust__i h4{ color:#fff; margin-bottom:4px; font-size:var(--t-base); }
.trust__i p{ color:#a9bace; font-size:var(--t-sm); margin:0; line-height:1.45; }

/* ---------- sections ---------- */
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:calc(var(--sec-y) * .6); }
.section--mist{ background:var(--mist); }
.section--navy{ background:var(--navy-900); color:#fff; }
.section--navy h2,.section--navy h3{ color:#fff; }
.section--navy p,.section--navy .lede{ color:#c3d0e0; }

.shead{ margin-bottom:34px; max-width:52rem; }
.shead h2{ margin-bottom:0; }
.shead .lede{ margin:14px 0 0; }

.pagehead{ background:var(--mist); padding-block:40px 36px; border-bottom:1px solid var(--mist-200); }
@media (min-width:820px){ .pagehead{ padding-block:60px 52px; } }
.pagehead h1{ margin-bottom:12px; }

.split{ display:grid; gap:28px; }
@media (min-width:820px){ .split{ grid-template-columns:1fr 1fr; gap:48px; align-items:center; } }
.split img{ border-radius:var(--r); width:100%; height:auto; }

/* ---------- vacancy ledger ---------- */
.jobs{ border-top:2px solid var(--navy-900); }

.jobrow{
  display:grid; gap:4px 20px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .jobrow{ grid-template-columns:1fr auto auto; align-items:center; gap:10px 28px; }
}

.jobrow__main{ text-decoration:none; color:inherit; display:block; }
.jobrow__t{
  font-size:var(--t-md); margin:0 0 3px; letter-spacing:-.015em;
  transition:color .15s ease;
}
@media (min-width:760px){ .jobrow__t{ font-size:var(--t-lg); } }
.jobrow__main:hover .jobrow__t{ color:var(--gold-deep); }
.jobrow__meta{ font-size:var(--t-sm); color:var(--slate); margin:0; }

.jobrow__pay{ display:flex; flex-direction:column; gap:4px; padding-top:8px; }
@media (min-width:760px){ .jobrow__pay{ padding-top:0; align-items:flex-end; text-align:right; } }
.jobrow__pay b{
  font-family:var(--display); font-size:var(--t-lg); font-weight:700;
  color:var(--gold-deep); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.jobrow__pay em{ font-style:normal; font-size:var(--t-sm); color:var(--slate); }
.jobrow__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
@media (min-width:760px){ .jobrow__tags{ justify-content:flex-end; } }

.jobrow__act{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
@media (min-width:760px){ .jobrow__act{ margin-top:0; } }
.jobrow__act .btn{ min-height:44px; font-size:var(--t-sm); padding:0 18px; }

.tag{
  display:inline-block; font-size:var(--t-xs); font-weight:600;
  color:var(--navy-700); background:var(--mist);
  border:1px solid var(--mist-200); border-radius:999px; padding:4px 11px;
}
.tag--ok{ color:var(--ok); background:var(--ok-soft); border-color:#c9e4d5; }
.tag--gold{ color:var(--gold-deep); background:var(--gold-soft); border-color:#f0dcae; }

.empty{
  border:1px dashed var(--line); border-radius:var(--r);
  padding:36px 24px; text-align:center; background:var(--mist);
}
.empty h3{ margin-bottom:8px; }
/* The "vacancy no longer available" state uses an h1 so the page still has a
   top-level heading, but it should read at the same size as the h3 above it. */
.empty h1{ font-size:var(--t-md); letter-spacing:-.012em; line-height:1.25; margin-bottom:8px; }
.empty p{ margin-inline:auto; color:var(--slate); }

/* ---------- job detail ---------- */
.crumb{ font-size:var(--t-sm); margin-bottom:4px; }
.crumb a{ color:var(--slate); text-decoration:none; }
.crumb a:hover{ color:var(--gold-deep); text-decoration:underline; }

.terms{ border-top:2px solid var(--navy-900); margin-bottom:8px; }
.terms__r{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
@media (min-width:600px){
  .terms__r{ grid-template-columns:minmax(150px,32%) 1fr; gap:20px; align-items:start; }
}
.terms__k{ font-size:var(--t-sm); font-weight:600; color:var(--slate); }
.terms__v{ font-size:var(--t-base); }
.terms__v b{ font-weight:700; }
/* the qualifier ("į rankas", "300 €/mėn. išskaitoma") sits on its own line
   rather than running straight on from the value */
.terms__v em{
  display:block; font-style:normal; font-size:var(--t-sm);
  color:var(--slate); margin-top:3px;
}

.tbl{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tbl th,.tbl td{
  text-align:left; vertical-align:top; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line);
}
.tbl th{ font-weight:600; color:var(--slate); width:38%; }
.tbl--trust th{ width:44%; }

/* ---------- sample contract ---------- */
.ctr{ border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.ctr summary{
  cursor:pointer; padding:16px 18px; font-family:var(--display);
  font-weight:600; font-size:var(--t-base); list-style:none;
}
.ctr summary::-webkit-details-marker{ display:none; }
.ctr summary::after{ content:" ▾"; color:var(--gold-deep); }
.ctr[open] summary::after{ content:" ▴"; }
.ctr summary:hover{ color:var(--gold-deep); }
.ctr__body{ padding:0 18px 22px; border-top:1px solid var(--line); }
.ctr__doc{ padding-top:18px; }
.ctr__title{ font-size:var(--t-md); margin-bottom:16px; }
.ctr__r{
  display:grid; grid-template-columns:26px 1fr; gap:4px 10px;
  padding:11px 0; border-bottom:1px solid var(--mist-200); font-size:var(--t-sm);
}
@media (min-width:680px){
  .ctr__r{ grid-template-columns:26px minmax(130px,26%) 1fr; gap:14px; }
}
.ctr__n{ color:var(--faint); font-variant-numeric:tabular-nums; }
.ctr__k{ font-weight:600; color:var(--slate); }
.ctr__v{ grid-column:2/-1; }
@media (min-width:680px){ .ctr__v{ grid-column:3; } }
.ctr__fill{
  display:inline-block; min-width:120px; border-bottom:1px dashed var(--faint);
  color:var(--faint);
}

/* ---------- category cards ---------- */
.cats{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .cats{ grid-template-columns:repeat(3,1fr); gap:18px; } }

/* On a phone these nine cards sit directly under the hero, so the whole set
   has to be scannable without pushing the real vacancies off the screen.
   Two columns with a sentence under each title ran to five rows and over a
   thousand pixels. Three columns of picture-and-name are three rows and
   about a third of the height; the description and the photo button are a
   tap away on the trade's own page, and both come back at tablet width. */
@media (max-width:759px){
  .cats{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .cats .cat__b p,
  .cats .cat__links{ display:none; }
  .cats .cat__b{ padding:8px 8px 10px; }
  .cats .cat__b h3{
    font-size:.78rem; line-height:1.2; letter-spacing:0; hyphens:auto;
  }
  .cats .cat__ph{ aspect-ratio:4/3; }
  .cats .cat__zoom{ display:none; }

  /* This is the first thing under the hero on a phone, so the heading block
     has to earn its height. The four-line lede explains that the pictures are
     tappable and that hiring trades carry a link — both of which the cards
     show for themselves. Dropped here, kept from tablet width up. */
  #sritys .shead .lede{ display:none; }
  #sritys .shead{ margin-bottom:18px; }
  #sritys{ padding-top:calc(var(--sec-y) * .55); }
}

.cat{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--r); overflow:hidden; background:var(--paper);
  border:1px solid var(--mist-200);
}
.cat__ph{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--navy-800); cursor:pointer; aspect-ratio:16/10; overflow:hidden;
}
.cat__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.cat__ph:hover img{ transform:scale(1.045); }
.cat__ph--empty{ display:grid; place-items:center; color:#8fa2ba; }
.cat__zoom{
  position:absolute; right:10px; bottom:10px;
  width:30px; height:30px; display:grid; place-items:center;
  background:rgba(8,21,40,.72); color:#fff; border-radius:50%;
  font-size:1rem; line-height:1;
}
.cat__b{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
@media (min-width:760px){ .cat__b{ padding:18px; } }
.cat__b h3{ font-size:var(--t-base); margin:0; letter-spacing:-.012em; }
@media (min-width:760px){ .cat__b h3{ font-size:var(--t-md); } }
.cat__b p{ font-size:var(--t-sm); color:var(--slate); margin:0; }
.cat__hire{ align-self:flex-start; }
.cat__links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:auto; padding-top:6px; }
.cat__n{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--body); font-size:var(--t-sm); font-weight:600;
  color:var(--navy-700); text-decoration:underline; text-underline-offset:3px;
}
.cat__n:hover{ color:var(--gold-deep); }
.cat__n--pos{ color:var(--gold-deep); }

/* ---------- process / why ---------- */
.flow{ display:grid; gap:26px; }
@media (min-width:680px){ .flow{ grid-template-columns:1fr 1fr; gap:32px 40px; } }
@media (min-width:1020px){ .flow{ grid-template-columns:repeat(4,1fr); } }
.flow__i{ border-top:3px solid var(--gold); padding-top:16px; }
.flow__i h3{ font-size:var(--t-md); margin-bottom:8px; }
.flow__i p{ font-size:var(--t-sm); color:var(--slate); margin:0; }
.section--navy .flow__i p{ color:#b6c5d8; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:18px 36px 18px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:var(--t-base);
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--gold-deep); font-size:1.3rem; font-weight:400; line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ color:var(--gold-deep); }
.faq details>div{ padding:0 0 20px; }
.faq p{ margin:0; color:var(--slate); }

/* ---------- forms ---------- */
.field{ margin-bottom:20px; }
.field label,.leg{
  display:block; font-weight:600; font-size:var(--t-sm);
  margin-bottom:6px; color:var(--ink);
}
.req{ color:var(--err); }
.hint{ display:block; font-size:var(--t-sm); color:var(--slate); margin-bottom:7px; font-weight:400; }

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=file],select,textarea{
  width:100%; min-height:50px; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:var(--t-base); color:var(--ink);
  background:var(--paper); -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2356637a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
textarea{ min-height:110px; resize:vertical; line-height:1.55; }
input:focus,select:focus,textarea:focus{ border-color:var(--navy-700); outline-offset:1px; }
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--err); }

.err{ color:var(--err); font-size:var(--t-sm); margin:6px 0 0; min-height:0; }
.err:empty{ display:none; }

fieldset{ border:0; padding:0; margin:0 0 20px; }
.opts{ display:grid; gap:8px; }
.opts--2{ grid-template-columns:1fr; }
@media (min-width:520px){ .opts--2{ grid-template-columns:1fr 1fr; } }
.opt{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  cursor:pointer; font-weight:400; font-size:var(--t-base); margin:0;
}
.opt:hover{ border-color:var(--navy-600); background:var(--mist); }
.opt input{ width:auto; min-height:0; margin:3px 0 0; accent-color:var(--navy-700); flex:0 0 auto; }
.opt:has(input:checked){ border-color:var(--navy-700); background:var(--mist); }

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

.steps{ display:flex; gap:10px; list-style:none; padding:0; margin:0 0 28px; counter-reset:s; }
.steps li{
  flex:1; counter-increment:s; font-size:var(--t-sm); font-weight:600;
  color:var(--faint); padding-top:12px; border-top:3px solid var(--mist-200); margin:0;
}
.steps li::before{ content:counter(s) ". "; }
.steps li[aria-current="step"]{ color:var(--navy-900); border-top-color:var(--gold); }

.fstep{ display:none; }
.fstep.active{ display:block; }
/* the step heading is focused programmatically when the form advances, so
   screen readers announce the new step; it is not interactive, so it should
   not also draw a focus ring */
.fstep h2:focus,.fstep h2:focus-visible{ outline:none; }
.fnav{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.panel{ border:1px solid var(--line); border-radius:var(--r); padding:24px; background:var(--paper); }
.panel--mist{ background:var(--mist); border-color:var(--mist-200); }

.notice{
  background:var(--gold-soft); border-left:3px solid var(--gold);
  padding:14px 16px; border-radius:0 var(--r) var(--r) 0; margin-bottom:20px;
}
.notice p{ margin:0; max-width:none; font-size:var(--t-sm); }
.notice--navy{ background:var(--mist); border-left-color:var(--navy-700); }

.consent{
  background:var(--mist); border:1px solid var(--mist-200);
  border-radius:var(--r); padding:16px; margin-bottom:14px;
  max-height:220px; overflow-y:auto; font-size:var(--t-sm);
}
.consent p{ font-size:var(--t-sm); margin-bottom:8px; }

.ref{
  font-family:var(--display); font-size:var(--t-2xl); font-weight:800;
  color:var(--gold-deep); letter-spacing:-.02em; margin:0;
}

/* ---------- gallery + lightbox ---------- */
.gal{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .gal{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (min-width:960px){ .gal{ grid-template-columns:repeat(4,1fr); } }
.gal__i{
  padding:0; border:0; background:var(--mist); cursor:pointer;
  border-radius:var(--r); overflow:hidden; aspect-ratio:4/3;
}
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gal__i:hover img{ transform:scale(1.05); }
.gal__c{ font-size:var(--t-sm); color:var(--slate); margin-top:8px; }

.lb{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(6,14,26,.94); padding:16px;
}
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:1100px; width:100%; text-align:center; }
.lb__img{ max-width:100%; max-height:76vh; width:auto; margin-inline:auto; border-radius:var(--r); }
.lb figcaption{ color:#cfdae8; font-size:var(--t-sm); margin-top:14px; }
.lb__close,.lb__prev{
  position:absolute; width:48px; height:48px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  color:#fff; border-radius:50%; cursor:pointer; font-size:1.3rem;
}
.lb__close{ top:16px; right:16px; }
.lb__prev{ top:50%; transform:translateY(-50%); left:12px; }
.lb__prev+.lb__prev,.lb__prev[data-dir="next"]{ left:auto; right:12px; }
.lb__n{ color:#9fb0c6; font-size:var(--t-sm); margin-top:6px; }

/* ---------- sticky mobile bar ---------- */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(255,255,255,.18); border-top:1px solid var(--navy-700);
  box-shadow:0 -6px 20px rgba(11,31,58,.18);
}
.stickybar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; background:var(--navy-900); color:#fff;
  font-family:var(--display); font-weight:600; font-size:var(--t-base);
  text-decoration:none;
}
.stickybar a.sticky-apply{ background:var(--gold); color:var(--navy-900); }
@media (min-width:980px){ .stickybar{ display:none; } }
@media (max-width:979px){ body:not([data-no-sticky]) { padding-bottom:57px; } }

/* ---------- cookie banner ---------- */
.consent__box{
  position:fixed; inset:auto 0 0 0; z-index:90; background:var(--paper);
  border-top:3px solid var(--gold); box-shadow:0 -10px 40px rgba(11,31,58,.26);
  max-height:86vh; overflow-y:auto; padding:22px var(--gutter) 24px;
}
@media (min-width:760px){
  .consent__box{ inset:auto auto 22px 22px; max-width:460px;
    border-radius:var(--r-lg); border-top-width:4px; padding:24px; }
}
.consent__box[hidden]{ display:none; }
.consent__t{ font-size:var(--t-md); margin-bottom:10px; }
.consent__p{ font-size:var(--t-sm); color:var(--slate); margin-bottom:14px; }
.consent__acts{ display:grid; gap:9px; }
@media (min-width:420px){ .consent__acts{ grid-template-columns:1fr 1fr; } }
.consent__acts .btn{ min-height:48px; font-size:var(--t-base); }
.consent__rows{ display:grid; gap:10px; margin-bottom:14px; }
.consent__more{ font-size:var(--t-xs); margin:14px 0 0; }

.cbrow{
  display:flex; gap:12px; align-items:flex-start; padding:12px;
  border:1px solid var(--line); border-radius:var(--r); font-size:var(--t-sm);
}
.cbrow--fixed{ background:var(--mist); color:var(--slate); }

/* ---------- filter bar (kept for when listings grow) ---------- */
.fbar{ display:grid; gap:12px; margin-bottom:28px; }
@media (min-width:720px){ .fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } }
.fbar__foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.fcount{ font-size:var(--t-sm); color:var(--slate); }

/* ---------- footer ---------- */
.ftr{ background:#081528; color:#9fb0c6; font-size:var(--t-sm); }
.ftr__grid{ padding-block:46px 26px; display:grid; gap:32px; }
@media (min-width:760px){ .ftr__grid{ grid-template-columns:1fr 1fr; gap:36px 40px; } }
@media (min-width:1020px){ .ftr__grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; } }
.ftr h4{ font-size:var(--t-sm); color:#fff; margin-bottom:14px; font-weight:700; }
.ftr a{ color:#c3d0e0; text-decoration:none; }
.ftr a:hover{ color:var(--gold); text-decoration:underline; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ftr li{ margin:0; }
.ftr p{ margin:0 0 9px; max-width:34ch; }
.ftr .logo{ font-size:1.15rem; }
.ftr__bot{
  border-top:1px solid rgba(255,255,255,.12); padding-block:20px 30px;
  display:flex; flex-wrap:wrap; gap:8px 22px; font-size:var(--t-xs); color:#76869b;
}
.soc{ display:flex; gap:10px; margin-top:14px; }
.soc a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r); color:#c3d0e0;
}
.soc a:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- print: the sample contract only ---------- */
@media print{
  .hdr,.ftr,.stickybar,.consent__box,.btnrow,.crumb,.lb{ display:none !important; }
  body{ padding:0; }
  .ctr{ border:0; }
  .ctr summary{ display:none; }
  .ctr__body{ border:0; padding:0; }
}
body.printing-contract main>*:not(.wrap),
body.printing-contract .ctr~*{ }

/* ---------- "what the work involves" panel ---------- */
/* Opens from a category card. On a phone the card body is compacted away, so
   this panel is where the detail lives — it has to be comfortable to read at
   360px, which is why it fills the screen there and becomes a centred sheet
   from 760px up. */
.tp{
  position:fixed; inset:0; z-index:210; display:grid; place-items:end center;
  background:rgba(6,14,26,.72); padding:0;
  -webkit-overflow-scrolling:touch;
}
.tp__in{
  position:relative; background:#fff; width:100%; max-width:720px;
  max-height:92vh; overflow-y:auto; border-radius:14px 14px 0 0;
  padding:26px 20px 28px;
}
.tp__x{
  position:absolute; top:10px; right:10px; width:40px; height:40px;
  display:grid; place-items:center; background:var(--mist);
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
  font-size:1.4rem; line-height:1; color:var(--slate);
}
.tp__x:hover{ background:#E6EAF1; }
.tp__body h2{ font-size:1.35rem; padding-right:44px; margin-bottom:6px; }
.tp__body .lede{ font-size:var(--t-sm); margin-bottom:22px; }
.tp__body h3{ font-size:1.02rem; margin:0 0 10px; }
.tp__steps{ margin:0 0 20px; padding-left:0; list-style:none; counter-reset:tp; }
.tp__steps li{
  counter-increment:tp; position:relative; padding:0 0 14px 42px;
  font-size:var(--t-sm); line-height:1.55;
}
.tp__steps li::before{
  content:counter(tp); position:absolute; left:0; top:-1px;
  width:28px; height:28px; display:grid; place-items:center;
  background:var(--navy-900); color:#fff; border-radius:50%;
  font-size:.82rem; font-weight:700;
}
.tp__steps li:last-child{ padding-bottom:0; }
.tp__note{ margin:0 0 24px; }
.tp__note p{ font-size:var(--t-sm); margin:0; }
.tp__note p + p{ margin-top:8px; }
.tp__prov{ margin:0 0 24px; padding-left:20px; }
.tp__prov li{ font-size:var(--t-sm); line-height:1.55; margin-bottom:8px; }
.tp__cta{ margin-bottom:0; }
.tp__nojob{ margin-top:14px; }

@media (min-width:760px){
  .tp{ place-items:center; padding:24px; }
  .tp__in{ border-radius:var(--r); padding:32px 34px 34px; max-height:88vh; }
  .tp__body h2{ font-size:1.6rem; }
}

/* ---------- pay breakdown (job detail) ---------- */
.pb__h{ font-size:1rem; margin:26px 0 10px; }
.pb{ margin:0; padding-left:0; list-style:none; }
.pb li{
  position:relative; padding:0 0 0 26px; margin-bottom:10px;
  font-size:var(--t-sm); line-height:1.55;
}
.pb li::before{
  content:""; position:absolute; left:8px; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.pb__n{ margin-top:12px; }

/* On a phone these inline guide links sit in the middle of a block of text,
   where a 22px line box is an awkward target. Keyed to width rather than
   (hover:none) so the rule is visible to the automated mobile scan, which
   runs a desktop engine at phone width. */
@media (max-width:759px){
  .terms__v a{ display:inline-block; padding:11px 0; }
}

/* ---------- reserve the header's height before it is built ---------- */
/* #site-header is empty in the markup and filled by app.js. Until that runs
   it is 0px tall, so the moment the header appears every single thing below
   it jumps down 64px. Chrome measures that jump as Cumulative Layout Shift,
   and on the homepage it alone put the page at 0.143 — above Google's 0.1
   threshold and therefore a failing Core Web Vital.
   Giving the empty placeholder the height the header will have costs nothing
   and removes the jump entirely. Keep this in step with .hdr's height. */
#site-header{ min-height:64px; }
#site-header:empty{ display:block; }

/* Same reasoning for the footer: it is injected too, and while the page is
   short enough to scroll past, the shift still counts. */
#site-footer{ min-height:1px; }