/* ==========================================================================
   #WholeVillageHiring - shared style sheet
   Every page links to this file and carries no styling of its own.
   Change a value here and every page follows.
   Sections: 1 tokens, 2 base, 3 type, 4 blocks, 5 breakpoints, 6 #HireAndHouse blocks
   ========================================================================== */

/* ---------- font (hosted on this server, no third-party calls) ---------- */
@font-face { font-family:"Roboto"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/roboto-latin-700-normal.woff2") format("woff2"); }

/* ---------- 1. tokens: the single source of every value ---------- */
:root {
  /* page parameter: every block works to this width */
  --col:1200px;
  --gutter:24px;
  --measure:none;                  /* text fills the content width, like every other block */

  /* type */
  --font-main:"Roboto","Segoe UI",Arial,sans-serif;
  --font-quote:Georgia,"Times New Roman",serif;   /* quotes only; to be chosen */
  --fs-body:19px;
  --fs-small:15px;
  --lh-body:1.75;

  /* colour */
  --bg-0:#0f0f0f;                  /* footer */
  --bg-1:#141414;                  /* page */
  --bg-2:#1e1e1e;                  /* talent block, one step lighter */
  --header:#111111;
  --ink:#f2f2f2;                   /* body text */
  --ink-2:#d9d9d9;                 /* supporting text */
  --ink-3:#b9b9b9;                 /* footer text */
  --white:#ffffff;
  --line:#333333;
  --accent:#c0392b;                /* the one accent */
  --accent-hover:#a93226;
  --accent-mark:#f07562;           /* accent used on text-sized marks */

  /* space */
  --sec:clamp(56px, 7vw, 88px);    /* section padding */
  --para:26px;                     /* gap between paragraphs */
  --radius:10px;

  /* hero */
  --hero-h:max(78vh, 480px);
}

/* ---------- 2. base ---------- */
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg-1); }
body { font-family:var(--font-main); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
img { max-width:100%; }
a { color:inherit; }
.wrapx, .bar, .hero .wrap, .foot .row { max-width:var(--col); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ---------- 3. type: roles, not one-off sizes ---------- */
.hero h1 { margin:0; color:var(--white); font-weight:700; font-size:clamp(24px, 3vw, 38px); line-height:1.3; text-shadow:0 1px 14px rgba(0,0,0,.45); max-width:1000px; }
.sec-title { margin:0 0 26px; font-size:clamp(26px, 3.4vw, 44px); font-weight:700; letter-spacing:.2em; line-height:1.5; color:var(--white); text-align:left; }
.sec-title::before { content:""; display:block; width:56px; height:3px; background:var(--accent); margin:0 0 22px; }
.sec-title u { text-decoration-thickness:3px; text-underline-offset:8px; }
.sub-title { margin:60px 0 22px; font-size:clamp(22px, 2.4vw, 30px); font-weight:700; letter-spacing:.14em; line-height:1.4; color:var(--white); text-align:left; }
.txt { max-width:var(--measure); margin:0 0 var(--para); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.lead { margin:0 0 14px; font-size:clamp(20px, 2vw, 25px); font-weight:700; line-height:1.4; color:var(--white); }
.quote { font-family:var(--font-quote); font-style:italic; font-size:clamp(22px, 2.4vw, 30px); line-height:1.45; color:var(--white); }   /* the only use of the second face */

/* ---------- 4. blocks ---------- */

/* header */
header { background:var(--header); color:var(--white); position:relative; z-index:5; }
.bar { padding-top:14px; padding-bottom:14px; display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.brand { font-weight:700; font-size:20px; letter-spacing:.2px; color:var(--white); text-decoration:none; white-space:nowrap; }
.brand sup { font-size:10px; font-weight:400; }
nav { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:var(--fs-small); flex:1; justify-content:flex-end; }
nav a { color:#ececec; text-decoration:none; }
nav a:hover, nav a:focus { color:var(--white); text-decoration:underline; }
.menu-btn { display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; }
.menu-btn span { display:block; width:26px; height:2px; background:var(--white); margin:6px 0; }

/* hero */
.hero { position:relative; height:var(--hero-h); overflow:hidden; background:#222; }
.hero iframe { position:absolute; top:50%; left:30%; transform:translate(-30%, -50%); width:max(100vw, calc(var(--hero-h) * 1.7778)); height:max(56.25vw, var(--hero-h)); border:0; pointer-events:none; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.72) 100%); }
.hero .inner { position:absolute; z-index:2; inset:0; display:flex; align-items:flex-end; padding-bottom:clamp(28px, 7vh, 64px); }
.hero .wrap { width:100%; }
.hero h1 .line { display:block; margin:0 0 .35em; transition:opacity .7s ease, transform .7s ease; }
.hero h1 .line:last-child { margin-bottom:0; }
.js.timed .hero h1 .line { opacity:0; transform:translateY(10px); }   /* all lines show unless the script is running */
.js.timed .hero h1 .line.on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .hero h1 .line { transition:none; } }

/* three columns */
.three { background:var(--bg-1); padding-top:var(--sec); padding-bottom:var(--sec); }
.three .grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:44px 40px; }
.col { display:grid; grid-template-columns:70px 1fr; gap:0 18px; align-items:start; }
.num { width:70px; height:70px; border-radius:50%; background:var(--white); color:#111; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; }
.col h2 { margin:6px 0 18px; font-size:22px; font-weight:700; letter-spacing:.32em; color:var(--white); }
.col p { margin:0; font-size:var(--fs-body); line-height:1.9; color:var(--ink-2); }
.col p b { color:var(--white); }

/* talent mobility block */
.mobility { background:var(--bg-2); color:var(--ink); padding-top:var(--sec); padding-bottom:var(--sec); }
.watch { margin:0 0 26px; font-size:clamp(16px, 1.7vw, 22px); font-weight:700; letter-spacing:.22em; line-height:1.7; color:var(--white); }
.frame { position:relative; width:100%; aspect-ratio:16 / 9; background:#000; border:10px solid #111; border-radius:24px; outline:2px solid #bdbdbd; overflow:hidden; }
.frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.cta { text-align:left; margin:30px 0 0; }
.btn, .cta a { display:inline-block; padding:16px 34px; background:var(--accent); color:var(--white); font-weight:700; font-size:20px; text-decoration:none; border:2px solid var(--accent-mark); border-radius:3px; }
.btn:hover, .btn:focus, .cta a:hover, .cta a:focus { background:var(--accent-hover); }
.proof { max-width:var(--measure); margin:56px 0 0; }
.proof p { margin:0 0 var(--para); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.proof p:last-child { margin-bottom:0; }
.contrast { display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; margin:6px 0 34px; padding:26px 28px; background:rgba(255,255,255,.05); border-left:4px solid var(--accent); }
.contrast p.lead { margin:0 0 12px; font-size:var(--fs-body); font-weight:400; color:var(--ink); }
.contrast p.lead b { color:var(--white); }
.contrast ul { list-style:none; margin:0; padding:0; }
.contrast li { position:relative; padding-left:26px; margin:0 0 12px; font-size:var(--fs-body); line-height:1.6; color:var(--ink); }
.contrast li::before { content:"+"; position:absolute; left:0; top:0; font-weight:700; color:var(--accent-mark); }

/* ending */
.ending { background:var(--bg-1); color:var(--ink); padding-top:var(--sec); padding-bottom:var(--sec); }
.insight { display:grid; grid-template-columns:minmax(0, 38%) minmax(0, 1fr); gap:34px; align-items:center; margin:44px 0; }
.insight .thumb { display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#000; }
.insight .thumb img { display:block; width:100%; height:auto; transition:transform .25s ease; }
.insight .thumb:hover img, .insight .thumb:focus img { transform:scale(1.03); }
.insight .body { margin:0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.poster { display:block; width:100%; height:auto; border-radius:var(--radius); margin:46px 0 0; }

/* footer */
.foot { background:var(--bg-0); color:var(--ink-3); border-top:1px solid #262626; }
.foot .top { display:flex; justify-content:space-between; gap:20px 36px; flex-wrap:wrap; padding-top:26px; padding-bottom:20px; font-size:var(--fs-small); }
.foot .top a, .foot .top span { color:#cfcfcf; text-decoration:none; }
.foot .top a:hover, .foot .top a:focus { color:var(--white); text-decoration:underline; }
.foot .mid { text-align:center; padding:6px 0 16px; }
.foot .mid img { width:72px; height:72px; border-radius:50%; display:inline-block; }
.foot .bottom { display:flex; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; padding-bottom:30px; font-size:13px; color:#9a9a9a; }

/* ---------- 5. breakpoints: tablet, large phone, phone ---------- */
@media (max-width: 1000px) {
  :root { --hero-h:max(70vh, 500px); }
  .bar { padding-top:12px; padding-bottom:12px; gap:12px; }
  .js .menu-btn { display:block; }
  nav { flex-basis:100%; flex-direction:column; gap:0; font-size:18px; justify-content:flex-start; }
  .js nav { display:none; }
  .js nav.open { display:flex; padding:6px 0 14px; }
  nav a { padding:11px 2px; border-top:1px solid #2a2a2a; }
  .three .grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .insight { grid-template-columns:1fr; gap:20px; margin:36px 0; }
}
@media (max-width: 700px) {
  .contrast { grid-template-columns:1fr; padding:20px 18px; }
}
@media (max-width: 640px) {
  :root { --fs-body:18px; --hero-h:max(78vh, 540px); --gutter:20px; }
  .brand { font-size:19px; }
  .hero h1 { font-size:clamp(24px, 6.8vw, 30px); }
  .three .grid { grid-template-columns:1fr; gap:36px; }
  .col h2 { font-size:20px; }
  .sec-title { letter-spacing:.12em; }
  .sub-title { letter-spacing:.1em; }
  .watch { letter-spacing:.12em; }
  .frame { border-width:6px; border-radius:16px; }
  .foot .top { flex-direction:column; align-items:flex-start; }
}

/* ---------- 6. #HireAndHouse blocks (added v1.2, 28 Oct 2026) ---------- */

/* small print under a paragraph: a source note, never main text (T8, C6) */
.fine { margin:12px 0 0; font-size:13px; line-height:1.5; color:#9a9a9a; }

/* a picture in an insight row that is not a link: no hover zoom */
.insight .thumb.plain:hover img { transform:none; }

/* three 4:5 videos side by side, one text block under each */
.cards3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 40px; margin:60px 0 0; }
.vcard p { margin:0; }
.vcard .vframe { position:relative; width:100%; aspect-ratio:4 / 5; background:#000; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.vcard .vframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vcard .lead { margin:18px 0 4px; }
.vcard .role { margin:0 0 12px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); }
.vcard .say { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }

@media (max-width: 860px) {
  .cards3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cards3 { grid-template-columns:1fr; gap:40px; }
}

/* two 4:5 videos side by side, same cards as .cards3 (added for The NDP Legacy, 28 Oct 2026) */
.cards2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:44px 40px; margin:44px 0 0; }

@media (max-width: 640px) {
  .cards2 { grid-template-columns:1fr; gap:40px; }
}

/* two buttons side by side (Moving America) */
.cta-pair { display:flex; flex-wrap:wrap; gap:16px 20px; margin:30px 0 0; }

/* video rail (Making a Difference): one row of 4:5 cards that scrolls sideways */
.cap { margin:14px 0 0; font-size:var(--fs-small); line-height:1.5; color:var(--ink-2); }
.rail { display:flex; gap:24px; margin:56px 0 0; padding:0 0 20px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; }
.rail .vcard { flex:0 0 min(292px, 78vw); scroll-snap-align:start; margin:0; padding:0; }
.clip { position:relative; display:block; aspect-ratio:4 / 5; background:#000; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.clip img, .clip iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; object-fit:cover; }
.clip .play { position:absolute; right:14px; bottom:14px; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.7); border:2px solid rgba(255,255,255,.85); }
.clip .play::after { content:""; position:absolute; left:19px; top:14px; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff; }
.clip:hover .play, .clip:focus .play { background:var(--accent); }


/* logo laid over the badge in each card image (Making a Difference) */
.clip .mark { inset:auto; left:2.65%; top:39.6%; width:18.7%; height:auto; object-fit:contain; pointer-events:none; }


/* we do / we don't lists (added for Demo, 29 Oct 2026): the second list marks each item with a cross instead of a plus */
.contrast .no li::before { content:"\00d7"; color:#b9b9b9; }

/* contact form (added 30 Oct 2026): tick boxes left, fields right; the thank-you shows when the page opens at #thanks */
.enq { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; align-items:start; margin:44px 0 0; padding:28px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); }
.enq label { display:block; margin:0 0 6px; font-size:var(--fs-body); color:var(--ink); }
.enq .opt { display:flex; align-items:center; gap:14px; margin:0 0 20px; line-height:1.4; }
.enq .opt input { width:26px; height:26px; margin:0; flex:none; accent-color:var(--accent); }
.enq .fld { display:block; width:100%; box-sizing:border-box; margin:0 0 16px; padding:12px; background:var(--bg-1); color:var(--ink); border:1px solid #666; border-radius:3px; font-size:17px; font-family:inherit; }
.enq textarea.fld { resize:vertical; margin-bottom:20px; }
.enq .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.enq button.btn { cursor:pointer; font-family:inherit; }
.thanks { display:none; margin:20px 0 0; font-size:25px; font-weight:700; color:var(--white); }
.thanks:target { display:block; }
@media (max-width:760px) { .enq { grid-template-columns:1fr; } }

/* job page box and form notes (added 31 Oct 2026): a white field under the tick boxes, the note beside it, small print under the button */
.enq .fld.job { background:var(--white); color:#111; border-color:var(--white); margin:6px 0 20px; }
.enq .note { margin:0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.enq .note b { color:var(--white); }
.enq .fine { margin:14px 0 0; }

/* Watch Page header (added 31 Oct 2026): the brand and one link, no menu */
.bar .demo-link { margin-left:auto; font-size:var(--fs-small); color:#ececec; text-decoration:none; }
.bar .demo-link:hover, .bar .demo-link:focus { color:var(--white); text-decoration:underline; }

/* Watch Page video size (added 31 Oct 2026): never narrower than 60% of the window, and short enough that the whole video shows without scrolling */
.wp .frame { max-width:max(60vw, calc((100vh - 170px) * 1.7778)); }