/* ── the landing page ───────────────────────────────────────────────────────
   Same shape as the original survey site: a hero, then a full-bleed photograph
   per sector with a dark card and a coloured button. What this version adds is
   that it is responsive, keyboard-navigable, built from the design tokens
   rather than an Elementor stylesheet, and works in dark mode. */

.ld { margin:0; background:var(--surface-1); color:var(--ink-2);
      font:400 1rem/1.6 var(--font-ui); -webkit-font-smoothing:antialiased; }

/* ── bar ─────────────────────────────────────────────────────────────────── */
.ld-bar { position:sticky; top:0; z-index:20; background:var(--header-bg);
          backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
          border-bottom:1px solid var(--line-1); }
.ld-bar__inner { max-width:1180px; margin-inline:auto; padding:10px var(--gutter);
                 display:flex; align-items:center; gap:var(--s-5); }
.ld-bar__brand { display:block; }
.ld-bar__brand img { display:block; block-size:44px; inline-size:auto; }
.ld-bar__nav { margin-left:auto; display:flex; align-items:center; gap:var(--s-4); }
.ld-bar__nav a { font:600 .875rem var(--font-ui); color:var(--ink-2); text-decoration:none; }
.ld-bar__nav a:hover { color:var(--accent-text); }
.theme-toggle { display:grid; place-items:center; inline-size:var(--ctl-h-sm); block-size:var(--ctl-h-sm);
                background:var(--surface-2); border:1px solid var(--line-1); border-radius:var(--r-sm);
                color:var(--ink-2); cursor:pointer; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent-text); }
.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:block; }
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.ld-hero { background:var(--surface-1); border-bottom:1px solid var(--line-1); }
.ld-hero__inner { max-width:1180px; margin-inline:auto; padding:clamp(34px,6vw,74px) var(--gutter);
                  display:grid; gap:clamp(24px,4vw,54px); grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
                  align-items:start; }
.ld-eyebrow { margin:0 0 12px; font:600 .875rem/1 var(--font-mono); letter-spacing:.1em;
              text-transform:uppercase; color:var(--accent-text); }
.ld-hero h1 { margin:0; font:600 clamp(1.9rem,3.9vw,3rem)/1.1 var(--font-display);
              letter-spacing:-.032em; color:var(--ink-1); text-wrap:balance; }
.ld-lead { margin:var(--s-5) 0 0; max-width:58ch; font-size:1.0625rem; line-height:1.65; color:var(--ink-2); }
/* A surface under the partner marks. Without one they floated in the right-hand
   column with nothing holding them, which is what made the hero look unbalanced
   next to a solid block of text. */
.ld-hero__partners {
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-5); border:1px solid var(--line-1); border-radius:var(--r-lg);
  background:var(--surface-2);
}
.ld-partner { display:flex; flex-direction:column; gap:var(--s-2); }
.ld-partner__mark { display:block; inline-size:148px; block-size:auto; }
.ld-partner__note { margin:0; font-size:.75rem; color:var(--ink-4); }
.ld-logos { list-style:none; margin:var(--s-2) 0 0; padding:0; display:flex; align-items:center; gap:var(--s-5); }
.ld-logos img { display:block; block-size:56px; inline-size:auto; }

/* ── sector bands ────────────────────────────────────────────────────────── */
.ld-band { position:relative; isolation:isolate; min-block-size:clamp(340px,44vw,460px);
           display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line-1); }
.ld-band__photo { position:absolute; inset:0; inline-size:100%; block-size:100%;
                  object-fit:cover; z-index:-2; }
.ld-band__scrim { position:absolute; inset:0; z-index:-1;
                  background:linear-gradient(100deg, rgba(6,10,16,.86) 0%, rgba(6,10,16,.72) 46%, rgba(6,10,16,.32) 100%); }
.ld-band__inner { inline-size:100%; max-width:1180px; margin-inline:auto; padding:clamp(26px,4vw,52px) var(--gutter); }

.ld-card { max-width:640px; background:rgba(8,12,18,.72); border:1px solid rgba(255,255,255,.14);
           border-radius:var(--r-xl); padding:clamp(20px,2.6vw,32px); color:rgba(255,255,255,.9);
           backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.ld-card h2 { margin:0 0 12px; font:600 clamp(1.25rem,2.2vw,1.75rem)/1.2 var(--font-display);
              letter-spacing:-.02em; color:#fff; }
.ld-card p { margin:0 0 8px; font-size:.875rem; line-height:1.6; }
.ld-card p:last-of-type { margin-bottom:0; }

.ld-card__foot { display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; margin-top:20px; }
.ld-cta { display:inline-flex; align-items:center; gap:8px;
          min-block-size:var(--ctl-h-lg); padding:0 var(--ctl-px-lg); border-radius:var(--r-sm);
          background:var(--band); color:#fff; text-decoration:none;
          font:600 .875rem var(--font-ui);
          transition:transform var(--d-2) ease-out, filter var(--d-2) ease-out; }
.ld-cta:hover { transform:translateY(-1px); filter:brightness(1.08); }
.ld-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.ld-cta svg { inline-size:17px; block-size:17px; }
.ld-card__meta { margin:0; font-size:.875rem; color:rgba(255,255,255,.72);
                 font-variant-numeric:tabular-nums; }
.ld-card__meta strong { color:#fff; font-weight:600; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.ld-foot { background:var(--surface-2); }
.ld-foot__inner { max-width:1180px; margin-inline:auto; padding:26px var(--gutter);
                  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.ld-foot p { margin:0; font-size:.875rem; color:var(--ink-3); }
.ld-foot__small { color:var(--ink-4); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .ld-hero__inner { grid-template-columns:1fr; }
  .ld-band { min-block-size:0; }
  .ld-band__scrim { background:linear-gradient(180deg, rgba(6,10,16,.78), rgba(6,10,16,.88)); }
  .ld-card { max-width:none; }
}
@media (max-width:560px) {
  .ld-bar__brand img { block-size:36px; }
  .ld-logos img { block-size:44px; }
  .ld-card__foot { gap:var(--s-4); }
  .ld-cta { inline-size:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) { .ld-cta { transition:none; } }
@media (forced-colors: active) {
  .ld-band__scrim { background:Canvas; opacity:.75; }
  .ld-card, .ld-cta { border:1px solid CanvasText; }
}

/* ── the chooser ─────────────────────────────────────────────────────────────
   The fast path to a questionnaire: three compact, numbered targets. It exists
   because an interviewer who already knows which form they need should not have
   to scroll past three full-height photographs, on a phone, on one bar. */
.ld-pick { background:var(--surface-2); border-bottom:1px solid var(--line-1); }
.ld-pick__inner { max-width:1180px; margin-inline:auto; padding:var(--s-9) var(--gutter); }
.ld-pick__title {
  margin:0 0 var(--s-6); display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap;
  font:600 clamp(1.125rem,1.6vw,1.375rem)/1.3 var(--font-display); letter-spacing:-.02em; color:var(--ink-1);
}
.ld-pick__hint { font:var(--t-xs); color:var(--ink-4); font-weight:400; }

.ld-picks { list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4);
            grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

.ld-pick-card {
  --band: var(--accent);
  display:flex; align-items:center; gap:var(--s-4);
  block-size:100%; box-sizing:border-box; min-block-size:104px; padding:var(--s-5) var(--s-5);
  background:var(--surface-1); border:1px solid var(--line-2); border-radius:var(--r-lg);
  text-decoration:none; color:inherit;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), border-color .16s, box-shadow .16s;
}
.ld-pick-card:hover { transform:translateY(-2px); border-color:var(--band); box-shadow:0 10px 26px rgba(3,8,16,.14); }
.ld-pick-card:focus-visible { outline:2px solid var(--band); outline-offset:3px; }

.ld-pick-card__n {
  flex:none; inline-size:42px; block-size:42px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--band); color:#fff;
  font:700 .9375rem/1 var(--font-ui); font-variant-numeric:tabular-nums;
}
.ld-pick-card__body { flex:1 1 auto; min-inline-size:0; display:flex; flex-direction:column; gap:2px; }
.ld-pick-card__name { font:600 1.0625rem/1.3 var(--font-display); letter-spacing:-.018em; color:var(--ink-1); }
.ld-pick-card__meta { font:var(--t-xs); color:var(--ink-3); }
.ld-pick-card__go { flex:none; inline-size:18px; block-size:18px; color:var(--ink-4); transition:transform .16s, color .16s; }
.ld-pick-card:hover .ld-pick-card__go { transform:translateX(3px); color:var(--band); }

.ld-pick__title kbd {
  display:inline-block; min-inline-size:20px; padding:2px 6px; text-align:center;
  background:var(--surface-1); border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:5px; font:600 .6875rem/1.3 var(--font-mono); color:var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .ld-pick-card, .ld-pick-card__go { transition:none; }
  .ld-pick-card:hover { transform:none; }
}
@media (forced-colors: active) { .ld-pick-card { border:1px solid CanvasText; } }