/* Shokumu website. Colours, radii and widths come from brand/shokumu-tokens.css only. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
:root{
  /* Aptos is not a webfont (see action plan, block 3). Figtree is the interim web fallback. */
  --font:"Aptos","Aptos Display","Figtree","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:"Aptos Mono","Cascadia Mono","JetBrains Mono",Consolas,ui-monospace,monospace;
}
html{scroll-behavior:smooth}
body{background:var(--sk-paper);color:var(--sk-text);font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{letter-spacing:-.03em;font-weight:700;text-wrap:balance;line-height:1.08}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sk-violet);outline-offset:2px}
.dk :focus-visible,.hero :focus-visible,.nav :focus-visible,footer :focus-visible{outline-color:var(--sk-violet-on-dark)}
.wrap{max-width:var(--sk-maxw);margin-inline:auto;padding-inline:var(--sk-gutter)}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sk-violet);font-weight:600}
.eyebrow.pink{color:var(--sk-pink)}
.dk .eyebrow{color:var(--sk-wash)}
.rulez{width:44px;height:2px;background:var(--sk-text-muted);margin-top:22px;position:relative}
.rulez::after{content:"";position:absolute;right:-11px;top:-4px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--sk-text-muted)}
.dk .rulez{background:var(--sk-text-on-dark-muted)}
.dk .rulez::after{border-color:var(--sk-text-on-dark-muted)}

.sec{padding-block:clamp(60px,7.5vw,112px)}
.sec.dk{background:var(--sk-graphite);color:var(--sk-text-on-dark)}
.sec.sf{background:var(--sk-surface)}
.h2{font-size:clamp(1.7rem,3.6vw,2.7rem);margin-top:14px;max-width:21ch}
.h2.wide{max-width:26ch}
.h2.full{max-width:none}
br.lg{display:none}
@media (min-width:1100px){br.lg{display:inline}}
.sub{color:var(--sk-text-muted);font-size:1.1rem;margin-top:18px;max-width:62ch}
.dk .sub{color:var(--sk-text-on-dark-muted)}

/* ---------- buttons ---------- */
.btn{font-size:15px;font-weight:600;padding:13px 24px;border-radius:var(--sk-r-pill);display:inline-block;
  transition:transform .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.p{background:var(--sk-violet-on-dark);color:var(--sk-graphite)}
.btn.g{background:var(--sk-violet-on-dark);color:var(--sk-graphite)}
.btn.s{border:1px solid var(--sk-line-on-dark);color:var(--sk-text-on-dark)}
.btn.s:hover{border-color:var(--sk-text-on-dark)}
.btn.v{background:var(--sk-violet);color:var(--sk-paper)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:var(--sk-graphite);
  border-bottom:1px solid var(--sk-line-on-dark);color:var(--sk-text-on-dark)}
.navin{max-width:var(--sk-maxw);margin-inline:auto;padding:0 var(--sk-gutter);height:70px;display:flex;
  align-items:center;gap:30px}
.brand img{display:block;width:138px;height:auto}
.links{display:flex;gap:4px;margin-left:auto;align-items:center}
.links a{font-size:14px;color:var(--sk-text-on-dark-muted);padding:8px 13px;border-radius:var(--sk-r-pill);
  transition:color .2s,background .2s}
.links a:hover{color:var(--sk-text-on-dark);background:var(--sk-line-on-dark)}
.links a.navcta{background:var(--sk-violet-on-dark);color:var(--sk-graphite);font-weight:600;padding:9px 18px;margin-left:8px}
.links a.navcta:hover{background:var(--sk-violet-on-dark);color:var(--sk-graphite)}

/* ---------- hero ---------- */
/* Brandbook 2.5, chapter 06: flat graphite; the fingerprint is a texture to the right of the title, taken out of
   the flow so it can never drop under the text, violet variant on graphite, gone when there is no room beside the title. */
.hero{position:relative;overflow:hidden;background:var(--sk-graphite);color:var(--sk-text-on-dark);
  padding-block:clamp(64px,8vw,120px)}
.hero .wrap{position:relative;z-index:1;padding-right:clamp(0px,28vw,360px)}
.fingerprint{position:absolute;top:50%;transform:translateY(-50%);right:clamp(16px,4vw,64px);
  width:clamp(120px,22vw,300px);height:auto;aspect-ratio:438 / 620;object-fit:contain;pointer-events:none}
.hero .in{max-width:760px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.035em;line-height:1.04}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--sk-wash);margin-top:.14em}
.hero p.lead{color:var(--sk-text-on-dark-muted);font-size:1.22rem;margin-top:26px;max-width:50ch;line-height:1.5}
.cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* ---------- what it is: employee profile ---------- */
.team{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch;
  margin-top:56px}
.roster{display:flex;flex-direction:column;gap:8px}
.roster button{font:inherit;font-weight:600;font-size:1.05rem;letter-spacing:-.015em;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--sk-r-sm);
  background:transparent;border:1px solid var(--sk-line);color:var(--sk-text-muted);
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.roster button>img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.roster-name,.roster-job{display:block}
.roster-name{font-size:1.05rem;line-height:1.2}
.roster-job{font-size:.84rem;font-weight:400;line-height:1.3;margin-top:4px}
.roster button:hover{color:var(--sk-text);border-color:var(--sk-text-muted)}
.roster button[aria-selected="true"]{background:var(--sk-graphite);color:var(--sk-text-on-dark);
  border-color:var(--sk-graphite)}
.roster button:focus-visible{outline:2px solid var(--sk-violet);outline-offset:2px}
.profile.swap dl,.profile.swap header{animation:swap .45s cubic-bezier(.2,.7,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.profile{background:var(--sk-graphite);color:var(--sk-text-on-dark);border-radius:var(--sk-r);overflow:hidden}
.profile header{display:flex;align-items:center;gap:18px;padding:26px 28px;border-bottom:1px solid var(--sk-line-on-dark);
  background:var(--sk-graphite-raised)}
.avatar{width:104px;height:104px;overflow:hidden;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sk-graphite);border:1px solid var(--sk-line-on-dark)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile header .who{font-size:1.7rem;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.profile header .job-title{color:var(--sk-text-on-dark-muted);font-size:.98rem;margin-top:6px;line-height:1.3}
.profile header .role{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sk-wash);margin-bottom:5px;display:flex;gap:10px;align-items:center}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.12em;font-weight:600;color:var(--sk-graphite);
  background:var(--sk-pink);border-radius:var(--sk-r-pill);padding:2px 8px}
.profile{display:flex;flex-direction:column}
.profile dl{padding:8px 28px 12px;flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.profile dl div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--sk-line-on-dark)}
.profile dl div:last-child{border-bottom:0}
.profile dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sk-text-on-dark-muted);padding-top:4px}
.profile dd{font-size:.98rem;line-height:1.5}
.points{list-style:none;margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.points li{padding-top:20px;border-top:2px solid var(--sk-text)}
.points h3{font-size:1.15rem;margin-bottom:8px}
.points p{color:var(--sk-text-muted);font-size:.97rem}

/* ---------- jobs ---------- */
.aside{margin-top:34px;max-width:62ch;font-size:1.08rem}
.aside a{font-weight:700;color:var(--sk-violet);border-bottom:2px solid var(--sk-violet);padding-bottom:1px}

/* ---------- how it goes ---------- */
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step{background:var(--sk-graphite-raised);border:1px solid var(--sk-line-on-dark);border-radius:var(--sk-r);
  padding:30px 28px 32px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--sk-text-on-dark-muted);font-weight:600}
.step h3{font-size:1.3rem;margin:12px 0 12px;line-height:1.15}
.step p{color:var(--sk-text-on-dark-muted);font-size:.99rem}
.step q{display:block;margin-top:14px;color:var(--sk-wash);font-weight:600;quotes:none}
.example{margin-top:22px;max-width:70ch;color:var(--sk-text-on-dark-muted);font-size:.98rem}
.example b{color:var(--sk-text-on-dark)}
.result{margin-top:18px;background:var(--sk-graphite-raised);border:1px solid var(--sk-line-on-dark);border-radius:var(--sk-r);
  padding:30px 34px;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.result-n{font-size:clamp(3rem,6vw,4.6rem);font-weight:700;letter-spacing:-.05em;line-height:1}
.result-n span{color:var(--sk-text-on-dark-muted)}
.result-t{color:var(--sk-text-on-dark-muted);font-size:1.08rem;max-width:52ch}
.result-t b{color:var(--sk-text-on-dark);font-weight:600}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:64px}
.pair .bonus{margin-top:0}
.bonus{margin-top:56px;max-width:30ch;font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.2}
.bonus em{font-style:normal;color:var(--sk-wash)}
.bonus-sub{margin-top:14px;max-width:58ch;color:var(--sk-text-on-dark-muted)}

/* ---------- what stays simple ---------- */
.keep{margin-top:54px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.keep>div{background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:var(--sk-r);padding:30px 30px 32px}
.keep h3{font-size:1.3rem;margin-bottom:10px}
.keep p{color:var(--sk-text-muted);font-size:1rem}

/* ---------- about ---------- */
.about{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,84px);align-items:start}
.about p.t{color:var(--sk-text-muted);margin-top:20px;font-size:1.05rem}
.about p.t b{color:var(--sk-text)}
.founders{color:var(--sk-text)}
.founders a{font-weight:600;border-bottom:2px solid var(--sk-violet)}
.founders a:hover{color:var(--sk-violet)}
.people-block{max-width:none}
.about .people-block p.t{margin-top:0}
.people{list-style:none;margin-top:14px}
.people li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:12px 0;border-top:1px solid var(--sk-line);align-items:baseline}
.people li:last-child{border-bottom:1px solid var(--sk-line)}
.people a{font-weight:600;justify-self:start;border-bottom:2px solid var(--sk-violet)}
.people a:hover{color:var(--sk-violet)}
.people span{color:var(--sk-text-muted);font-size:1rem}
.people span b{color:var(--sk-text);font-weight:700}
.about-text p.t:first-child{margin-top:0}
.facts{list-style:none}
.facts li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--sk-line);
  align-items:baseline}
.facts li:last-child{border-bottom:1px solid var(--sk-line)}
.facts .v{font-size:2.1rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--sk-violet)}
.facts .k{color:var(--sk-text-muted);font-size:.98rem}
.facts .k a{color:var(--sk-text);font-weight:600;border-bottom:2px solid var(--sk-violet)}
.about-text .facts{margin-top:28px}

/* ---------- contact ---------- */
.contact .h2{max-width:18ch;font-size:clamp(2rem,4.4vw,3.3rem)}
.cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:34px;max-width:720px}
.cform label{display:block}
.cform label.full{grid-column:1 / -1}
.cform label span{display:block;font-size:.92rem;color:var(--sk-text-on-dark-muted);margin-bottom:8px}
.cform input,.cform textarea{width:100%;font:inherit;font-size:1rem;color:var(--sk-text-on-dark);
  background:var(--sk-graphite-raised);border:1px solid var(--sk-line-on-dark);border-radius:var(--sk-r-sm);
  padding:12px 14px;transition:border-color .2s}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--sk-violet-on-dark)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-foot{grid-column:1 / -1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.cform-foot .btn{border:0;cursor:pointer;font-family:inherit}
.cform-foot .btn:disabled{opacity:.6;cursor:default;transform:none}
.cform-alt{color:var(--sk-text-on-dark-muted);font-size:.95rem}
.cform-alt a{color:var(--sk-text-on-dark);border-bottom:1px solid var(--sk-line-on-dark)}
.cform-alt a:hover{border-color:var(--sk-text-on-dark)}
.cform-note{grid-column:1 / -1;color:var(--sk-text-on-dark-muted);font-size:1rem;min-height:1.5em}
.cform-note:empty{display:none}
.cform.sent label,.cform.sent .cform-foot{display:none}
.cform.sent .cform-note{color:var(--sk-text-on-dark);font-size:1.15rem}

footer{background:var(--sk-graphite);color:var(--sk-text-on-dark-muted);border-top:1px solid var(--sk-line-on-dark);
  padding:34px 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{width:112px;height:auto;display:block}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.36s}.d4{animation-delay:.56s}.d5{animation-delay:.74s}
@keyframes rise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise,.reveal{opacity:1;transform:none;animation:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .team,.about{grid-template-columns:minmax(0,1fr)}
  .roster .profile{margin:2px 0 10px}
  .pair{grid-template-columns:minmax(0,1fr);gap:44px}
  .roster button:hover,.roster button[aria-selected="true"]{transform:none}
  .points{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .cform{grid-template-columns:minmax(0,1fr)}
  .result{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 24px}
  .fingerprint{display:none}
  .hero .wrap{padding-right:var(--sk-gutter)}
  body{font-size:16px}
  .links a:not(.navcta){display:none}
  .keep{grid-template-columns:minmax(0,1fr)}
  .points{grid-template-columns:minmax(0,1fr)}
  .profile dl div{grid-template-columns:minmax(0,1fr);gap:4px}
  .profile header,.profile dl{padding-inline:22px}
  .facts li{grid-template-columns:minmax(0,1fr);gap:6px}
  .avatar{width:80px;height:80px}
  .profile header{gap:14px}
  .hero p.lead{font-size:1.1rem}
}