@font-face{font-family:Inter;src:url("v4/InterVariable-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* Same metric-matched stand-in as the landing page, so font-display:swap
   costs no layout shift here either. */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90%;descent-override:22.43%;line-gap-override:0%;size-adjust:107.06%}
:root{
  /* Subpage role names mapped onto the shared palette in tokens.css.
     Previously a near-duplicate set of literals that drifted from the
     landing page by a few points per colour. */
  --bg:var(--neutral-0);
  --surface:var(--violet-50);
  --ink:var(--text-900);
  --accent:var(--violet-700);
  --accent2:var(--violet-800);
  --dim:var(--text-500);
  --faint:var(--text-500);
  --line:var(--neutral-200);
  --display:Inter,"Inter Fallback",Arial,sans-serif;
  --body:Inter,"Inter Fallback",Arial,sans-serif;
  --mono:Inter,"Inter Fallback",Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,var(--violet-50) 0,var(--neutral-0) 410px);color:var(--ink);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.7}
a{color:var(--accent2)}a:hover{color:var(--accent)}
::selection{background:var(--violet-300);color:var(--dark-900)}

.skip-link{position:absolute;top:-100px;left:20px;z-index:1000;padding:10px 16px;border-radius:9px;background:var(--neutral-0);color:var(--accent);font-weight:750}
.skip-link:focus{top:12px}
.bar{height:76px;padding:0 max(32px,calc((100vw - 1220px)/2));gap:28px;background:rgb(255 255 255 / 93%);border-bottom:1px solid var(--neutral-150);backdrop-filter:blur(18px);box-shadow:none}
.bar .brand{display:inline-flex;align-items:center;flex:none}
.bar .brand img{width:172px;height:auto;max-height:43px;object-fit:contain}
.bar .subpage-nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:13px;font-weight:650}
.bar .subpage-nav a{color:var(--text-500);white-space:nowrap}
.bar .subpage-nav a:hover{color:var(--accent)}
.header-open{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;min-height:42px;padding:9px 16px;border-radius:11px;background:linear-gradient(135deg,var(--violet-700),var(--violet-600));box-shadow:0 12px 25px rgb(var(--shadow-tint) / 19%);color:var(--neutral-0);font-size:13px;font-weight:750;white-space:nowrap}
.header-open:hover{color:var(--neutral-0);transform:translateY(-1px);box-shadow:0 16px 32px rgb(var(--shadow-tint) / 26%)}
.header-open span{font-size:18px;line-height:1}
.subpage-menu{display:none}
.wrap{max-width:860px;padding:78px 32px 112px}
.eyebrow{font-family:var(--body);font-size:11px;font-weight:850;letter-spacing:.18em;color:var(--accent)}
h1,h2,h3{font-family:var(--display);color:var(--ink)}
h1{font-size:clamp(44px,6vw,70px);font-weight:760;letter-spacing:-.07em;line-height:1.05;margin:18px 0 0}
h2{font-size:clamp(24px,3vw,30px);font-weight:750;letter-spacing:-.045em;line-height:1.15;margin:50px 0 0}
h3{font-size:20px;font-weight:730;letter-spacing:-.035em;line-height:1.2}
.g2{background:linear-gradient(105deg,var(--violet-800),var(--violet-600));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{font-size:19px;line-height:1.65;color:var(--text-500);margin-top:22px}
.meta{margin-top:20px;color:var(--text-500);font-size:13px}
.tag{padding:5px 10px;border-radius:8px;background:var(--violet-150);color:var(--violet-800);font-family:var(--body);font-size:11px;font-weight:750}
p,li{color:var(--text-600)}
p{margin-top:14px}
b,strong{font-weight:720}
hr{border-top-color:var(--line);margin:46px 0}
.callout{margin-top:30px;padding:20px 22px;border:1px solid var(--violet-200);border-left:3px solid var(--accent);border-radius:14px;background:var(--violet-100);color:var(--text-600);font-size:14px;line-height:1.6}
.callout b{color:var(--dark-800)}
.cards{gap:18px;margin-top:32px}
.card,.sidebar-card,.value-card,.positions-card{border:1px solid var(--neutral-200);border-radius:18px;background:var(--neutral-0);box-shadow:0 14px 38px rgb(var(--shadow-tint) / 4%)}
.card{padding:25px}
.card h3{font-size:22px;margin-top:12px}
.card p,.value-card p,.positions-card p{color:var(--text-500)}
.btn{min-height:44px;padding:10px 17px;border:1px solid var(--violet-300);border-radius:11px;color:var(--accent2);font-family:var(--body);font-weight:750;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:var(--violet-100);transform:translateY(-2px)}
.btn.primary{border:0;background:linear-gradient(135deg,var(--violet-700),var(--violet-600));color:var(--neutral-0);box-shadow:0 12px 25px rgb(var(--shadow-tint) / 19%)}
.btn.primary:hover{background:linear-gradient(135deg,var(--violet-800),var(--violet-700));box-shadow:0 16px 32px rgb(var(--shadow-tint) / 26%)}
.badges{gap:0;margin-top:30px;border:1px solid var(--neutral-200);border-radius:16px;background:var(--neutral-0);box-shadow:0 14px 38px rgb(var(--shadow-tint) / 4%)}
.badge .l{font-family:var(--body);font-weight:750;color:var(--text-800)}
.badge .s{font-family:var(--body);font-weight:700;color:var(--text-500)}
.input{min-height:46px;padding:11px 13px;border:1px solid var(--neutral-300);border-radius:10px;background:var(--neutral-0);color:var(--ink)}

.field label{font-weight:700;color:var(--text-600)}
.form-note{color:var(--text-500);margin-top:8px;margin-bottom:20px}
.contact-grid{gap:34px}
.sidebar-card{padding:28px;background:var(--violet-50)}
.sidebar-card .k{color:var(--text-500);font-weight:750}
.sidebar-card .v{color:var(--ink)}
.values{gap:18px}
.value-card{padding:30px 26px}
.value-card svg{color:var(--accent)}
.positions-card{padding:36px;background:var(--violet-50)}
footer{padding:34px max(32px,calc((100vw - 1220px)/2));background:var(--violet-50);border-top:1px solid var(--neutral-150)}
footer .cp{color:var(--text-500);font-size:12px}
footer .fl{display:flex;flex-wrap:wrap;gap:18px}
footer .fl a{color:var(--text-500);font-size:13px;font-weight:650}
footer .fl a:hover{color:var(--accent)}
@media(max-width:850px){
  .bar{padding:0 28px;gap:16px}
  .bar .subpage-nav{gap:17px}
  .bar .brand img{width:150px}
}
@media(max-width:700px){
  .bar{height:67px;padding:0 18px;gap:10px}
  .bar .brand img{width:145px}
  .bar .subpage-nav{display:none}
  .header-open{margin-left:auto;min-height:38px;padding:8px 11px;font-size:0;gap:0}
  .header-open span{font-size:18px}
  .subpage-menu{display:block;position:relative}
  .subpage-menu summary{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--neutral-0);cursor:pointer;list-style:none}
  .subpage-menu summary::-webkit-details-marker{display:none}
  .subpage-menu summary span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink)}
  .bar .subpage-menu nav{display:block;position:absolute;top:51px;right:-18px;width:min(290px,calc(100vw - 36px));padding:12px 18px;border:1px solid var(--line);border-radius:0 0 14px 14px;background:var(--neutral-0);box-shadow:0 20px 35px rgb(var(--shadow-tint) / 11%);z-index:20}
  .subpage-menu nav a{display:block;padding:11px 2px;color:var(--text-700);font-size:14px;font-weight:700}
  .subpage-menu nav a+a{border-top:1px solid var(--neutral-100)}
  .wrap{padding:65px 20px 86px}
  h1{font-size:clamp(42px,10vw,58px)}
  .intro{font-size:17px}
  .contact-grid{grid-template-columns:1fr}
  footer{padding:30px 20px}
}
@media(max-width:380px){.bar .brand img{width:132px}.header-open{min-width:38px}.subpage-menu summary{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Icon base — matches assets/design-system.css so the arrow is identical on
   the landing page and the subpages. Standalone <svg> rather than a sprite:
   these pages use exactly one icon. */
.icon{
  width:1em;height:1em;display:inline-block;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.125em;overflow:visible;
}

/* ── Accessibility corrections ──────────────────────────────────────────
   Mirrors assets/design-system.css so the subpages hold the same floors as
   the landing page: a 12px type minimum, WCAG 2.2 AA target sizes, and a
   focus ring that clears 3:1 and is not hidden by the sticky bar. */

/* Type floor — these labels were 11px. */
.eyebrow,.meta,.form-note,.tag,
.badge .l,.badge .s,
.sidebar-card .k,.k{font-size:var(--text-2xs)}

/* Target size: 24px minimum, 44px on coarse pointers. Inline prose links
   were 19px and the mail link 18px. */
.bar .subpage-nav a,
.fl a,
.meta a,
.sidebar-card .v a,
.wrap p a,
.wrap li a,
.callout a,
.card a{display:inline-flex;align-items:center;min-height:24px}
.fl a,.bar .subpage-nav a{padding-block:var(--space-1)}

@media (pointer:coarse){
  .bar .subpage-nav a,.fl a,.meta a,
  .sidebar-card .v a,.wrap p a,.wrap li a{min-height:44px}
  .fl{gap:var(--space-4) var(--space-6)}
}

/* An inline link inside a paragraph must not break the line box it sits in. */
.wrap p a,.wrap li a,.callout a{vertical-align:baseline}

/* Focus: same ring as the landing page, and never behind the sticky bar. */
html{scroll-padding-top:calc(var(--space-16) + var(--space-2))}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:3px}

/* Motion tokens, so hovers here match the landing page rather than snapping. */
.bar .subpage-nav a,.fl a,.header-open,.btn{
  transition:color var(--dur-fast) linear,
             background var(--dur-fast) linear,
             border-color var(--dur-fast) linear;
}
a,button,summary,[role=button]{cursor:pointer}

/* Form controls: a 13px checkbox is below the WCAG 2.2 AA target floor, and
   its label should be part of the same hit area. */
.wrap input[type=checkbox],.wrap input[type=radio]{
  width:24px;height:24px;flex:none;margin-top:0;accent-color:var(--violet-700);cursor:pointer}
.wrap label:has(input[type=checkbox]),
.wrap label:has(input[type=radio]){
  display:flex;align-items:flex-start;gap:var(--space-3);min-height:44px;cursor:pointer}
.field label{display:inline-flex;align-items:center;min-height:24px}
.input{min-height:44px}
textarea.input{min-height:120px}

/* Standalone back/secondary links. */
.wrap > a,.back,a.back{display:inline-flex;align-items:center;min-height:24px}

/* ── Who builds Kraftflix ───────────────────────────────────────────────── */
.team{margin:var(--space-12) 0 0}
.team h2{margin:0 0 var(--space-3)}
.team-intro{max-width:70ch;margin:0 0 var(--space-6);color:var(--dim)}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.person{
  margin:0;padding:var(--space-6);
  border:1px solid var(--line);border-radius:4px;background:var(--surface);
}
.person h3{margin:0 0 var(--space-1);font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em}
.person-role{
  margin:0 0 var(--space-3);
  font-size:var(--text-2xs);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent2);
}
.person-bio{margin:0;font-size:var(--text-xs);line-height:1.7;color:var(--dim)}
/* Three names sharing one remit, so the heading wraps rather than truncates. */
.person-group h3{font-size:var(--text-md);line-height:1.35}
@media (max-width:700px){ .team-grid{grid-template-columns:1fr} }
@media (min-width:701px){ .team-grid > .person:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--space-4)/2)} }

/* Reviewer byline beside the effective date. */
.reviewer{font-size:var(--text-2xs);color:var(--dim)}
.reviewer a{display:inline-flex;align-items:center;min-height:24px;color:var(--accent2)}
.reviewer a:hover{color:var(--accent)}
/* A title inside a bio is italic, not a quote. */
.person-bio em{font-style:italic}
/* Verification link on each person card. */
.person-links{margin:var(--space-3) 0 0}
.person-links a{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:26px;
  font-size:var(--text-2xs);font-weight:750;letter-spacing:.02em;
  color:var(--accent2);
}
.person-links a:hover{color:var(--accent)}
.person-links .icon{font-size:var(--text-sm)}
@media (pointer:coarse){ .person-links a{min-height:44px} }

/* ── About page ─────────────────────────────────────────────────────────── */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin:var(--space-6) 0 0}
.value{padding:var(--space-6);border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.value h3{margin:0 0 var(--space-2);font-size:var(--text-md);font-weight:700}
.value p{margin:0;font-size:var(--text-xs);line-height:1.7;color:var(--dim)}
.quote-by{margin:var(--space-3) 0 0;font-size:var(--text-2xs);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)}
.team-tier{
  margin:var(--space-8) 0 var(--space-4);
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent2);
}
/* Initials stand in for photographs, which we do not have. */
.person-avatar{
  display:grid;place-items:center;
  width:40px;height:40px;margin-bottom:var(--space-3);
  border-radius:50%;background:var(--accent);color:var(--neutral-0);
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.04em;
}
.about-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-6) 0 0}
@media (max-width:700px){ .values{grid-template-columns:1fr} }

/* .input:focus-visible out-specifies the bare :focus-visible rule above, so
   form fields were still using a 1.64:1 ring. Same token as everything else. */
.input:focus-visible,
.wrap input:focus-visible,
.wrap textarea:focus-visible,
.wrap select:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-color:var(--accent);
}